*{
 font-family: Tajawal;
}

/* Language visibility */
html.lang-en .lang-ar { display: none !important; }
html.lang-ar .lang-en { display: none !important; }

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

/* ── Language toggle visibility ── */
html.lang-en .lang-ar { display: none !important; }
html.lang-ar .lang-en { display: none !important; }

/* ── Language toggle button ── */
#lang-toggle-btn {
    background: transparent;
    border: 2px solid #1D2957;
    color: #1D2957;
    font-weight: 700;
    font-size: 13px;
    padding: 4px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
    margin-left: 10px;
    margin-right: 10px;
}
#lang-toggle-btn:hover {
    background: #1D2957;
    color: #fff;
}
/*------------------------------------------------------- landing page ---------------------------------------------------------- */
/* Preloader overlay */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1d2957;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  flex-direction: column;
  color: white;
  text-align: center;
  transition: opacity 0.5s ease;
}
.preloader-logo {
  width: 120px;
  margin-bottom: 20px;
}
/* Navbar  */
.nav-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  
  align-items: center;
  width: 100%;
}
.navbar-custom {
  background-color: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  width: 92%;
  max-width: 100%;
  padding-inline: 16px;
  margin: 20px auto 0;
  border-radius: 16px;
  font-size: 1rem;
  box-sizing: border-box;
}
.nav-links ul {
  display: flex;
  justify-content: center;
  gap: 1.8vw;
  width: 100%;
  flex-wrap: nowrap;
}
.navbar-brand img {
    height: 70px;
}
.nav-link {
    color: #000;
    font-weight: 500;
    font-size: 1.15rem;
    margin-right: 1rem;
}
.nav-link.active {
    color: #6AC6A0 !important;
    font-weight: 700;
    position: relative;
}
.nav-link.active::after {
    content: "";
    position: absolute;
    bottom: -27px;
    left: 0;
    right: 0;
    margin: 0;
    width: 100%;
    height: 7px;
    background-color: #6AC6A0;
    box-shadow: 0px -10px 19.3px 4px #6AC6A0A3;
    border-radius: 10px;
}
.nav-link:hover {
    color: #6AC6A0 !important;
}
.btn-session {
    background-color: #1D2957;
    color: white;
    border-radius: 8px;
    font-weight: 700;
}
.btn-session:hover {
    background-color: #6AC6A0A3;
}
/* HERO SECTION */
.hero {
    position: relative;
    width: 100%;
    min-height: clamp(400px, 60vh, 700px);
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent;
    /* Bottom-right rounded corner. Fluid clamp so the curve stays
       proportional across viewport widths without becoming a diagonal sweep. */
    border-radius: 0 0 clamp(120px, 18vw, 320px) 0;
    clip-path: none;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/hero_section_rec.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 0;
}
html[dir="rtl"] .hero {
    /* RTL: mirror the corner to the bottom-LEFT */
    border-radius: 0 0 0 clamp(120px, 18vw, 320px);
    clip-path: none;
}
html[dir="rtl"] .hero::before {
    transform: scaleX(-1);
}
.hero-bg-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    z-index: 1;
    pointer-events: none;
    display: block;
}
.hero-square-overlay {
    position: absolute;
    top: 60%;
    left: 62.5%;
    transform: translateY(-50%);
    width: 30%;
    height: 54vh;
    z-index: 3;
    pointer-events: none;
    display: block;
    background-color: transparent;
    background-image: url('/assets/images/Square_herosection.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.hero-visual-group {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.hero-main-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero-main-container > * {
    pointer-events: auto;
}
@media (max-width: 992px) {
    .hero-main-container {
        top: -30px !important;
    }
}
@media (max-width: 576px) {
    .hero-main-container {
        top: -50px !important;
    }
}
.hero-center-overlay {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 120vh;
    object-fit: fill;
    z-index: 2;
    pointer-events: none;
    display: block;
}
.hero-content {
    position: absolute;
    top: 60%;
    left: 18%;
    transform: translateY(-50%);
    width: 32%;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
html[dir="rtl"] .hero-content {
    left: auto !important;
    right: 15% !important;
    direction: rtl;
    align-items: flex-start;
    text-align: right;
}
html[dir="rtl"] .hero-small-logo {
    align-self: flex-start;
    object-position: right center;
}
html[dir="rtl"] .hero-heading,
html[dir="rtl"] .hero-subtext {
    direction: rtl;
    text-align: right;
    width: 100%;
}
html[dir="rtl"] .hero-square-overlay {
    left: auto !important;
    right: 62.5% !important;
}
/* ─── Hero responsive (tablet) — keep side-by-side layout, scale down ─── */
@media (max-width: 992px) {
    .hero {
        min-height: auto !important;
        padding: 0 0 40px 0 !important;
    }
    .hero > .navbar-custom,
    .hero .navbar-custom {
        position: relative !important;
        z-index: 100;
        margin-top: 20px !important;
    }
    .hero::before {
        background-image: url('/assets/images/backhome1.png') !important;
        background-size: 100% 100% !important;
        background-position: top center !important;
        background-repeat: no-repeat !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    .hero-content {
        width: 38%;
        left: 5%;
        top: 50% !important;
        gap: 10px;
    }
    html[dir="rtl"] .hero-content {
        right: 5% !important;
    }
    .hero-small-logo {
        height: 100px;
        width: 290px;
    }
    .hero-heading {
        font-size: 1.4rem;
    }
    .hero-subtext {
        font-size: 0.8rem;
        line-height: 1.5;
    }
    .hero-subtext br { display: none; }
    .hero-btn {
        font-size: 0.95rem;
        padding: 13px 36px;
        min-width: 200px;
        text-align: center;
    }
    .hero-square-overlay {
        width: 32%;
        height: 28vh;
        top: 38%;
        left: 60%;
    }
    html[dir="rtl"] .hero-square-overlay {
        right: 60% !important;
    }
}
/* ─── Hero responsive (mobile) — 2-column flex layout, auto-sized to content ─── */
@media (max-width: 576px) {
    .hero {
        min-height: auto !important;
        height: auto !important;
        padding: 90px 16px 40px 16px !important;
        overflow: hidden !important;
    }
    .hero::before {
        background-size: 100% 100% !important;
        height: 100% !important;
        width: 100% !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    /* Navbar: pinned to the top of the hero section (above the gradient content) */
    .hero > .navbar-custom,
    .hero .navbar-custom {
        position: absolute !important;
        top: 16px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: calc(100% - 24px) !important;
        margin: 0 !important;
        z-index: 100 !important;
    }
    /* Hero content + image: real flex row, no absolute positioning */
    .hero-main-container {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .hero-content {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: auto !important;
        flex: 0 0 40% !important;
        max-width: 40% !important;
        min-width: 0 !important;
        gap: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    html[dir="rtl"] .hero-content {
        right: auto !important;
    }
    .hero-square-overlay {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        width: 55% !important;
        max-width: 55% !important;
        flex: 0 0 55% !important;
        min-width: 0 !important;
        height: 200px !important;
        aspect-ratio: 1 / 1;
    }
    html[dir="rtl"] .hero-square-overlay {
        right: auto !important;
    }
    .hero-center-overlay,
    .hero-visual-group {
        display: none !important;
    }
    .hero-small-logo {
        height: 88px;
        width: 250px;
        margin-bottom: 0;
    }
    .hero-heading {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
    }
    .hero-subtext {
        font-size: 14px;
        font-weight: 500;
        line-height: 1.4;
        margin: 0;
    }
    .hero-subtext br { display: none; }
    .hero-btn {
        font-size: 15px;
        font-weight: 600;
        padding: 13px 36px;
        min-width: 190px;
        text-align: center;
        border-radius: 26px;
    }
    .hero-square-overlay {
        width: 38%;
        height: 18vh;
        top: 37%;
        left: 56%;
    }
    html[dir="rtl"] .hero-square-overlay {
        right: 56% !important;
    }
    .hero-center-overlay {
        display: none !important;
    }
}

/* ===============================================================
   Hero section — unified responsive layout (overrides legacy rules)
   - Hero auto-sizes to content (no min-height / fixed height)
   - Navbar pinned at top of hero (no big gap above)
   - SIDE-BY-SIDE 2-column flex at every breakpoint (never stacks)
   - Fluid sizing via clamp() so text & image scale with viewport
   =============================================================== */
.hero {
    min-height: clamp(400px, 60vh, 700px) !important;
    height: auto !important;
    padding: clamp(12px, 2vw, 32px) clamp(12px, 3vw, 48px) clamp(20px, 3vw, 48px) clamp(12px, 3vw, 48px) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 1 !important;
    /* Fluid bottom-right rounded corner (see base .hero rule) */
    border-radius: 0 0 clamp(120px, 18vw, 320px) 0 !important;
    clip-path: none !important;
}
html[dir="rtl"] .hero.hero,
html[dir="rtl"] .hero {
    /* RTL: mirror so the corner is on the bottom-left */
    border-radius: 0 0 0 clamp(120px, 18vw, 320px) !important;
    clip-path: none !important;
}
.hero::before {
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
/* Hide decorative absolute arcs — they conflict with auto-height layout */
.hero .hero-visual-group,
.hero .hero-center-overlay {
    display: none !important;
}
/* Navbar pinned to the top of the hero */
.hero > .navbar-custom,
.hero .navbar-custom {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    z-index: 10;
}
/* Main content container — ALWAYS flex row, never wraps, fluid gap */
.hero .hero-main-container {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(8px, 1.5vw, 24px) !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: clamp(8px, 2vw, 24px) auto 0 auto !important;
    padding: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
/* Left text column — fluid 45% width, flex column for stacked content */
.hero .hero-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    flex: 1 1 45% !important;
    max-width: 45% !important;
    min-width: 0 !important;
    gap: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    overflow: visible !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}
/* Force every hero-content child to share the same left edge:
   - reset margins/padding/indent on the box
   - force text inside each element to left-align (defeats mobile `text-align: center`)
   - align-self: flex-start defeats parent `align-items: center` on mobile */
.hero .hero-content > * {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
}
/* Logo image: align its box flush with every other child of the column.
   No negative margin — the logo shares the same left edge as the heading,
   subtext, and button. */
.hero .hero-content > .hero-small-logo {
    object-position: left bottom !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    transform: none !important;
    align-self: flex-start !important;
}
/* Button: center the label inside the pill using flexbox (more robust than
   text-align, which loses to the generic left-align rule on inline children) */
.hero .hero-content > .hero-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}
.hero .hero-content > .hero-btn > span {
    text-align: center !important;
    width: auto !important;
}
html[dir="rtl"] .hero .hero-content {
    right: auto !important;
    left: auto !important;
}
html[dir="rtl"] .hero .hero-content > * {
    text-align: right !important;
    align-self: flex-end !important;
}
/* RTL logo: mirror every horizontal property from the LTR consolidated rule
   so the visible "M" lines up at the RIGHT edge of the column alongside the
   heading, subtext, and button. */
html[dir="rtl"] .hero .hero-content > .hero-small-logo,
html[dir="rtl"] .hero-content > .hero-small-logo {
    object-position: right bottom !important;
    transform: translateX(16%) !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    left: auto !important;
    right: 0 !important;
    align-self: flex-end !important;
    justify-self: flex-end !important;
}
/* RTL button: anchor the BUTTON BOX to the right edge of the column AND
   the label to the right of the pill.
   - `margin-left: auto` pushes the inline-flex box to the right side of the
     column (direction-agnostic — works even though `align-self: flex-end` in
     an RTL column flex actually points to the LEFT).
   - `justify-content: flex-start` in an RTL row-flex = main-start = RIGHT,
     so the label hugs the right side of the pill. */
html[dir="rtl"] .hero .hero-content > .hero-btn {
    margin-left: auto !important;
    margin-right: 0 !important;
    align-self: flex-end !important;
    justify-content: flex-start !important;
    text-align: right !important;
    direction: rtl !important;
}
html[dir="rtl"] .hero .hero-content > .hero-btn > span {
    text-align: right !important;
}
/* Right image column — fluid width, capped at 500x500 on wide screens
   so it doesn't dominate the layout */
.hero .hero-square-overlay {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: clamp(200px, 35vw, 500px) !important;
    max-width: 500px !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    max-height: 500px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
html[dir="rtl"] .hero .hero-square-overlay {
    right: auto !important;
    left: auto !important;
}

/* Mobile (<768px): keep side-by-side layout, just tighten padding & gap.
   NO column stacking — same row structure as desktop. */
@media (max-width: 767.98px) {
    .hero {
        padding: 12px 12px 24px 12px !important;
    }
    .hero .hero-main-container {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        text-align: left !important;
        gap: 12px !important;
        margin-top: 8px !important;
    }
    .hero .hero-content {
        flex: 1 1 45% !important;
        max-width: 45% !important;
        width: auto !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    .hero .hero-square-overlay {
        flex: 1 1 50% !important;
        max-width: 50% !important;
        width: auto !important;
        margin: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }
}

/* ===============================================================
   Fluid clamp() sizing — applies at every breakpoint, last word wins
   over the legacy media queries that set fixed pixel sizes.
   =============================================================== */
/* Logo: zero EVERY property that could offset its box from the column's
   left edge. This is the single source of truth — overrides everything above.

   HACK: `transform: translateX(-16%)` slides the rendered image left by 16%
   of its own width to compensate for the transparent padding baked into the
   PNG file (the uploaded logo is an 8000x4500 master canvas with the visible
   logo centered inside). If a tightly-cropped logo is ever re-uploaded via
   the dashboard, REMOVE this transform — it will push the new logo off-screen. */
.hero .hero-content > .hero-small-logo,
.hero-content > .hero-small-logo {
    height: auto !important;
    width: clamp(80px, 18vw, 340px) !important;
    max-width: clamp(80px, 18vw, 340px) !important;
    min-width: 0 !important;
    object-fit: contain !important;
    object-position: left bottom !important;
    display: block !important;
    position: relative !important;
    left: 0 !important;
    right: auto !important;
    /* per-child vertical spacing — `gap` is disabled on the column so each
       element controls its own bottom margin (logo→heading = tight) */
    margin: 0 0 clamp(4px, 1vw, 12px) 0 !important;
    padding: 0 !important;
    transform: translateX(-16%) !important;
    text-indent: 0 !important;
    align-self: flex-start !important;
    justify-self: flex-start !important;
    float: none !important;
}
.hero .hero-content .hero-heading {
    font-size: clamp(18px, 3.5vw, 48px) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    /* heading→description = comfortable but not large */
    margin: 0 0 clamp(8px, 1.5vw, 16px) 0 !important;
}
.hero .hero-content .hero-subtext {
    font-size: clamp(11px, 1.4vw, 18px) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    /* description→button = clear breathing room before the CTA */
    margin: 0 0 clamp(18px, 3vw, 32px) 0 !important;
}
.hero .hero-content > .hero-btn {
    font-size: clamp(11px, 1.2vw, 16px) !important;
    padding: clamp(6px, 1vw, 14px) clamp(14px, 2.2vw, 44px) !important;
    min-width: clamp(110px, 14vw, 220px) !important;
    border-radius: clamp(16px, 1.8vw, 28px) !important;
    margin: 0 !important;
}

.hero-small-logo {
    height: 120px;
    width: 340px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 12px;
}
.hero-heading {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px 0;
}
.hero-subtext {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin: 0 0 16px 0;
}
.hero-btn {
    display: inline-block;
    background-color: #1D2957;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 44px;
    min-width: 220px;
    text-align: center;
    border-radius: 28px;
    text-decoration: none;
    transition: background 0.2s ease;
}
.hero-btn:hover {
    background-color: #0f1a3c;
    color: #fff;
}
.hero-img {
  max-width: 100%;
  height: auto;
}
/* Hero Card Layout */
.hero-card {
  display: flex;
  align-items: stretch;
  border: none;
  border-radius: 16px;
  overflow: visible;
  background: transparent;
  height: 320px;
  gap: 20px;
}
.hero-card-left {
  flex: 0 0 48%;
  max-width: 48%;
  position: relative;
}
.hero-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
}
.hero-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* View Our Services button overlay on hero image */
.hero-services-btn {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 0 0 14px 14px;
  z-index: 5;
}
.hero-services-label {
  flex: 1;
  background: rgba(255, 255, 255, 0.95);
  color: #1D2957;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 16px 24px;
  white-space: nowrap;
}
.hero-services-arrow {
  background: #6AC6A0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  font-size: 1.3rem;
  transition: background 0.2s;
}
.hero-services-btn:hover .hero-services-arrow {
  background: #1D2957;
}
/* RTL: flip wcu-left-deco to right side */
html.lang-ar .wcu-left-deco {
    left: auto;
    right: 0;
    transform: translateY(-50%) scaleX(-1);
}
/* RTL: flip services button to bottom-right of image, mirror arrow */
html.lang-ar .hero-services-btn {
  left: auto;
  right: 0;
  flex-direction: row-reverse;
}
html.lang-ar .hero-services-arrow .fa-arrow-right {
  transform: scaleX(-1);
}
.hero-img-overlay {
  position: absolute;
  bottom: -15px;
  left: -10px;
  background: rgba(255, 255, 255, 0.95);
  padding: 10px 22px;
  border-radius: 10px;
  color: #1D2957;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.hero-card-right {
  flex: 0 0 48%;
  max-width: 48%;
  background-color: #FFFFFF3D;
  border-radius: 16px;
  padding: 20px 25px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: center;
  overflow: hidden;
  min-width: 0;
}
.hero-card-right h2 {
  font-size: 1.4rem;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.hero-card-right .consultant-btn {
  width: auto;
  align-self: flex-start;
}
/* Hero Carousel */
.hero-carousel-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.hero-carousel-track {
  display: flex;
  transition: transform 0.4s ease;
  will-change: transform;
}
.hero-carousel-track .hero-slide {
  flex: 0 0 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.hero-nav-container {
  position: absolute;
  bottom: 220px;
  left: 0;
  right: 0;
  z-index: 10;
}
.hero .navbar {
  position: relative;
  z-index: 10;
}
.hero-nav-container {
  position: relative;
  z-index: 10;
}
.hero-nav {
  padding: 15px 0;
  padding-right: 0;
  margin-right: -80px;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
}
.hero-dot.active {
  width: 40px;
  border-radius: 10px;
  background-color: #3EC8AC;
}
.hero-arrow-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  background: transparent;
  color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.3s ease;
}
.hero-arrow-btn.active,
.hero-arrow-btn:hover {
  border-color: #3EC8AC;
  background-color: #3EC8AC;
  color: white;
}
.consultant-btn {
            background: linear-gradient(135deg, #6AC6A0 0%, #6AC6A0 100%);
            color: white;
            border: none;
            padding: 10px 24px;
            font-size: 0.95rem;
            font-weight: 700;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(29, 41, 87, 0.25);
            display: inline-flex;
            width: auto;
            align-items: center;
            justify-content: center;
            gap: 10px;
            position: relative;
            overflow: hidden;
        }
        .btn:hover {
            box-shadow: 0 10px 25px rgba(29, 41, 87, 0.35);
            background: linear-gradient(135deg, #6AC6A0 0%, #1D2957 100%);
            color: white;
        }
        .consultant-btn:active {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(29, 41, 87, 0.3);
        }
        .consultant-btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
        }
        .consultant-btn:hover::after {
            left: 100%;
        }
        /* about-section  */
        .about.right-side{
            background-color: transparent;
            color: #1D2957;
        }
.about, .terms, .services, .about-section {
    margin-top: 60px;
    padding-top: 0px;
}
.about .row {
    display: flex;
    align-items: center;      
}
.about .right-side {
    background-color: transparent !important;
    color: #1D2957;
}
.about {
    position: relative;
    z-index: 2;
    /* Force the section to start CLEANLY below the hero at every breakpoint.
       There are ~6 other rules in this file (lines 3185, 3399, 3612, 3692,
       3872, 3887) that apply negative margin-top (-30px to -115px) to pull
       .about up into the hero. Those negative margins were the source of the
       "diamond image overlap" bug. !important here defeats all of them. */
    margin-top: 0 !important;
    padding: 48px 0 80px 0 !important;
    overflow: hidden;
}
.about-img-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.about-img-wrapper img {
    width: 100%;
    height: auto;
    max-width: 500px;
    display: block;
}

/* About section — keep side-by-side row at every screen size */
.about-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 24px;
}
.about-row > .col-6,
.about-row > .about-text-col,
.about-row > .about-img-col {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.about-img-col {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Mobile (≤576px): keep side-by-side; scale content down so it still fits */
@media (max-width: 576px) {
    .about {
        padding: 32px 0 !important;
        margin-bottom: 0 !important;
    }
    .about .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .about-row {
        gap: 12px !important;
    }
    /* Image column: normal flow on mobile (no full-viewport offset) */
    .about-img-col {
        position: relative !important;
    }
    .about-img-wrapper {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .about-img-wrapper img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
    html.lang-ar .about-img-wrapper {
        right: auto !important;
        left: auto !important;
    }
    /* Text column: shrink content */
    .about-text-col .about-logo,
    .about-text-col .about-logo.section-head-logo {
        width: 80px !important;
        max-width: 80px !important;
        max-height: 50px !important;
        height: auto !important;
    }
    .about-text-col h2,
    .about-text-col h2 .lang-en,
    .about-text-col h2 .lang-ar {
        font-size: 12px !important;
        line-height: 1.4 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        margin: 0 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    .about-text-col .consultant-btn {
        font-size: 12px !important;
        padding: 8px 16px !important;
        display: inline-block;
    }
}
/* Arabic RTL variant */
html.lang-ar .about-img-wrapper {
    right: auto;
    left: auto;
    z-index: 0;
}
/* Ensure text column (logo) always renders above the decorative image in RTL */
html.lang-ar .about .right-side {
    position: relative;
    z-index: 2;
}
/* Section heading logos — CMS-uploaded icons that sit next to section titles
   (Why Choose Us, Trustful Partners, Our Services, Connect with us…) and the
   "master code" wordmark in the features section. The size is locked so that
   even if the admin uploads a large image it renders at the design dimensions. */
.section-head-logo {
    width: 40px !important;
    height: auto !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
    vertical-align: middle;
}
/* Features section "master code" wordmark is wider than the small heading icons */
.about-logo.section-head-logo,
.about-text-col .about-logo.section-head-logo {
    width: 170px !important;
    max-width: 170px !important;
    max-height: 80px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* why choose us SECTION */
.why-choose-us {
    width: 100%;
    background-color: transparent !important;
    /* No background-image — the streamline-cyber decoration was removed
       from the section's inline `style` attribute in index.blade.php, so
       there's nothing to override here. */
    /* Match the Trusted Partners section: tight padding, no forced min-height,
       so the hexagon doesn't sit in a giant block of empty white space.
       overflow: visible + z-index: 3 lets the heading lift above .about
       (which has z-index: 2) without being clipped. */
    padding: 32px 0 !important;
    min-height: 0 !important;
    position: relative;
    z-index: 3;
    overflow: visible;
}
.why-choose-us .container > h4 {
    background-image: url(../images/partners-img.png);
    background-repeat: no-repeat;
    /* Hexagon sits BEHIND the heading text (centered behind the h4 box) —
       not below it. No negative margin pull — heading stays in section flow.
       (Previously: `background-position: center bottom` + `padding: 16px 0 80px 0`
        + `margin: -80px 0 0 0` was pushing the hexagon below and pulling the
        heading up into the section above.) */
    background-position: center center;
    background-size: clamp(80px, 14vw, 140px) auto;
    padding: 32px 0;
    margin: 0;
    position: relative;
    z-index: 10;
    color: #1D2957;
    font-weight: 600;
}
.wcu-left-deco {
    display: none;
}
/* .why-choose-us {
    width: 100%;
    min-height: 100vh;
    background: url(../images/why-choose-us.png) no-repeat;
    background-size: cover;
    align-items: center;
    position: relative;
    display: flex;
} */
/* Why Choose Us — flexible row that scales with screen size */
.wcu-row {
  margin: 0 !important;
}
.wcu-row > [class*="col-"] {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 0 8px !important;
}
.feature-box {
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;
  width: 100% !important;
  max-width: 240px !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
}
.feature-img {
  width: 100% !important;
  max-width: 240px !important;
  height: auto !important;
  display: block;
}
.icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.why-choose-us .icon-overlay i {
  font-size: clamp(12px, 2.2vw, 30px) !important;
  background: linear-gradient(45deg, #34a97c, #0f244e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: clamp(2px, 0.5vw, 8px) !important;
  line-height: 1 !important;
}
.why-choose-us .icon-overlay img {
  width: clamp(16px, 2.8vw, 40px) !important;
  height: clamp(16px, 2.8vw, 40px) !important;
  margin-bottom: clamp(2px, 0.5vw, 8px) !important;
  object-fit: contain !important;
}
.feature-title {
  font-weight: 600 !important;
  color: #1D2957 !important;
  font-size: clamp(7px, 1.4vw, 14px) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 clamp(2px, 0.5vw, 6px) !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.icon-overlay {
  width: 75% !important;
  max-width: clamp(80px, 16vw, 200px) !important;
  gap: 0 !important;
}

/* Feature Cards */
.feature-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.feature-card .feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature-card h3 {
  font-size: 22px;
  color: #0f244e;
}
.feature-card p {
  font-size: 16px;
  line-height: 1.6;
  color: #6c757d;
}

 /* Partners Section */
   .partners-section {
    padding: 32px 0;
    text-align: center;
    background: url(../images/partners-img.png) no-repeat top center;
    /* Smaller hexagon shape behind the heading (was natural ~214px) */
    background-size: clamp(80px, 14vw, 140px) auto;
}
    .partners-section h2,
    .partners-section h4 {
      font-weight: 600;
      margin-bottom: 10px;
      color: #1D2957;
    }
    .partners-section .slogan {
      color: #6AC6A0;
      margin-bottom: 40px;
    }
    .partners-slider-wrapper {
      position: relative;
      width: 100%;
      overflow: hidden;
    }
    .partners-logos {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      flex-wrap: nowrap !important;
      padding: 10px 20px 20px;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .partners-logos::-webkit-scrollbar { display: none; }
    .partners-logos img {
      max-height: 200px;
      flex: 0 0 auto;
      scroll-snap-align: start;
      transition: transform 0.3s;
    }
    .partners-logos img:hover {
      transform: scale(1.1);
    }

    /* ── Partners slider nav buttons (prev / next) — narrow screens only ──
       Two round white circular buttons pinned at the left/right edges of
       the partners strip. They scroll the .partners-logos row one step in
       the clicked direction (wired up in public/scripts/index.js).
       Hidden ≥ 992px where all 4 logos fit without scrolling. */
    .partners-nav-btn { display: none; }

    @media (max-width: 991.98px) {
      .partners-slider-wrapper {
        /* Reserve gutter on both sides so buttons don't overlap logos */
        padding-inline: 44px;
      }
      .partners-nav-btn {
        display: flex !important;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: none;
        background: #fff;
        color: #1D2957;
        font-size: 14px;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
        z-index: 3;
        padding: 0;
      }
      .partners-nav-btn:hover,
      .partners-nav-btn:focus-visible {
        background: #1D2957;
        color: #fff;
        outline: none;
      }
      .partners-nav-btn:active { transform: translateY(-50%) scale(0.94); }
      .partners-nav-prev { inset-inline-start: 4px; }
      .partners-nav-next { inset-inline-end: 4px; }
    }
    /* Mission Section */
    .mission-section {
      background: url('../images/mission-bg.png') no-repeat center center;
      background-size: cover;
      padding: 80px 0;
      color: #1e2b4d;
      text-align: center;
    }
    .mission-section-about{
      background: url('../images/aboutus-img2.png') no-repeat center center;
        background-size: cover;
      padding: 80px 0;
      color: #1e2b4d;
      text-align: center;
    }
   .mission-cards-wrap {
    transform: translateY(-10px);
    margin-bottom: -10px;
}
/* About Us page: cards sit higher so they overlap the bottom of the
   mission banner more — desktop only, leaves the mobile stacking alone. */
@media (min-width: 768px) {
    .mission-cards-wrap-about {
        transform: translateY(-40px) !important;
        margin-bottom: -40px !important;
    }
}
   .mission-cards .card {
    background-color: #fff;
    border-radius: 12px;
    min-height: 195px;
    height: auto;
    max-height: 260px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}
    .mission-cards .card h5 {
      font-weight: 700;
      color: #1D2957;
    }
/* service section  */
.services-section {
  background: #ffffff;
}
.cards-wrapper {
  display: flex;
  justify-content: center;
  gap: 25px;
}
/* ── Services Swipe Slider ── */
.services-slider-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.services-slider {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 10px 20px 20px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.services-slider::-webkit-scrollbar { display: none; }
.services-slider .service-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
}
.services-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.services-dots .dot {
  width: 28px;
  height: 6px;
  border-radius: 4px;
  background: #d1d5db;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}
.services-dots .dot.active {
  background: #34a97c;
  width: 36px;
}
@media (max-width: 768px) {
  .services-slider .service-card {
    width: 280px !important;
    height: 320px !important;
  }
}
.service-card {
  width: 411px;
  height: 464px;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  transition: 0.3s ease;
}
.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
      text-align: justify;
}
.service-card .overlay {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    height: 100% !important;
    padding: 20px !important;
    background: linear-gradient(180deg, rgba(106, 198, 160, 0.64) 0%, rgba(29, 41, 87, 0.64) 100%);
    display: flex !important;
    justify-content: flex-end !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    color: white;
    text-align: justify;
}
.text{
font-weight: 700;
/* Responsive inline padding — was a fixed 200px which made the text look
   off-centre / cramped on narrow screens. clamp() shrinks the side gutters
   as the viewport shrinks so the paragraph stays visually centered. */
padding-inline: clamp(16px, 14vw, 200px);
text-align: center;
color: #6AC6A0;
/* Long unbroken strings (e.g. CMS test input) would otherwise extend past
   the container and break text-align: center — wrap them instead. */
word-break: break-word;
overflow-wrap: anywhere;
}
/* Overlay icon — sits directly above the title as a flex child (no longer
   absolutely-positioned) so the two are visually grouped with a tiny gap. */
.service-card .overlay > i,
.service-card .overlay > img {
  position: relative !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  object-fit: contain !important;
  z-index: 2;
}
.service-card .overlay h5 {
  margin: 0 !important;
}
.overlay h5 {
  font-size: 18px;
  font-weight: 600;
}

/* ==========================================================================
   Services carousel — hover reveal panel (.hover-detail)
   --------------------------------------------------------------------------
   Behaviour: a short white panel slides up from the bottom of the card on
   hover/tap, covering ~25-35% of the card's height. The project image stays
   visible above. The default `.overlay` (dark gradient) fades out in sync.

   All rules apply at every viewport — content uses clamp() sizing so the
   panel naturally stays a short bottom strip on smaller cards without
   clipping. No media queries needed.
   ========================================================================== */
/* (1) Panel container */
.service-card .hover-detail {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);   /* slide-in start position */
    width: 85%;
    /* Height is content-driven. The clamp() sizing on children below keeps
       the panel ~25-35% of the card height. Hard safety cap so the panel
       can never exceed the card itself. */
    max-height: calc(100% - 30px);
    background: #ffffff;
    border-radius: 16px;
    padding: clamp(6px, 1.5vw, 22px);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s ease;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    z-index: 3;
    overflow: hidden;
}

/* (2) Reveal — panel fades+slides in; default overlay fades out in sync */
.service-card:hover .hover-detail {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.service-card:hover .overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* (3) Icon (img OR i) — sits directly above the title with a tiny gap */
.service-card .hover-detail > i,
.service-card .hover-detail > img {
    display: block !important;
    width:  clamp(18px, 2.4vw, 30px) !important;
    height: clamp(18px, 2.4vw, 30px) !important;
    object-fit: contain !important;
    margin: 0 0 clamp(2px, 0.3vw, 6px) 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: clamp(16px, 2vw, 28px) !important;   /* sizes FA <i>, ignored on <img> */
}
/* Font Awesome <i> icon — green (visible on white) */
.service-card .hover-detail i {
    color: #1d9b6e !important;
}
/* Uploaded PNG icon — tinted to brand navy so white/light PNGs (designed
   for the dark overlay state) become visible against the white panel */
.service-card .hover-detail > img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(48%) saturate(2106%) hue-rotate(208deg) brightness(94%) contrast(92%);
}

/* (4) Title — dark navy, sits directly under the icon */
.service-card .hover-detail h5 {
    margin: 0 0 clamp(1px, 0.3vw, 6px) 0 !important;
    font-size: clamp(11px, 1.4vw, 18px) !important;
    font-weight: 700 !important;
    color: #1D2957 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* (5) Description — dark grey. Wraps freely so the whole text is visible,
   including long unbreakable strings. */
.service-card .hover-detail p {
    margin: 0;
    font-size: clamp(10px, 1.1vw, 14px);
    line-height: 1.3;
    color: #555 !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}

/* (6) Bilingual <span> children inherit the dark colours above (defeats
       any unexpected inheritance that would otherwise make them light) */
.service-card .hover-detail h5 .lang-en,
.service-card .hover-detail h5 .lang-ar,
.service-card .hover-detail p  .lang-en,
.service-card .hover-detail p  .lang-ar {
    color: inherit !important;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
}
.carousel-indicators [data-bs-target] {
  width: 10px;
  height: 10px;
  background-color: #c0c0c0;
  border-radius: 50%;
  border: none;
  opacity: 1;
  transition: all 0.3s ease;
  padding: 0;
  margin: 0;
}
.carousel-indicators .active {
  width: 50px;
  height: 10px;
  border-radius: 999px;
  background-color: #3cb886;
}
/* testimonial section */
.testimonial-section{
 width: 100%;
    min-height: 500px;              
    background: url('../images/why-choose-us.png') no-repeat center;
    background-size: cover;         
    padding: 80px 0;                
    position: relative;
}
.testimonial-box {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  max-width: 800px;
}
.reviewer-img {
  border-radius: 50%;
  object-fit: cover;
}
.small-img {
  width: 55px;
  height: 55px;
  opacity: 0.7;
}
.active-img {
  width: 70px;
  height: 70px;
  border: 3px solid #3cb886;
}
.nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #3cb886;
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-btn:hover {
  background: #34a97c;
}
.review-text {
  font-size: 1.1rem;
  line-height: 1.8;
}
.quote-icon i {
  color: #3cb886;
}
/* info section  */
.info-section{
   width: 100%;
    min-height: 500px;
    background: url('../images/info-bg.png') no-repeat center;
    background-size: cover;
    padding: 80px 0;
    position: relative;
}
.info-section .section-header h4{
  color: #1D2957;
padding-inline:250px;
}
.info{
  background-color: #1D2957;
  color: #fff;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
  overflow: visible;
}
.info > .row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}
/* Stacked email/phone lines — same plain white styling, no link underline */
.info .info-line,
.info .info-line a,
.info p,
.info a {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 500;
}
.info .info-line {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.4;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Desktop: 4 sections side-by-side with vertical separators */
@media (min-width: 768px) {
  .info {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .info .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* Logo column dictates the bar's height — no padding, no frame */
  .info > .row > .col-2,
  .info > .row > .col-md-2 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 180px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
  }
  /* Logo image at its natural rendered height — bar will match this */
  .info > .row > .col-2 img,
  .info > .row > .col-md-2 img {
    height: 80px !important;
    max-height: 80px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  /* Right container holds the 3 info sections */
  .info > .row > .col-10,
  .info > .row > .col-md-10 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* Inner row of 3 sections */
  .info > .row > .col-10 > .row,
  .info > .row > .col-md-10 > .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 !important;
  }
  .info .mail,
  .info .phone,
  .info .links {
    flex: 1 1 0 !important;
    min-width: 0;
    padding: 0 24px !important;
    border-right: 0 !important;
    align-self: stretch;
    display: flex !important;
    align-items: center !important;
    position: relative;
  }
  /* Vertical separator pseudo-elements — explicit fixed height, vertically centered */
  .info .mail::after,
  .info .phone::after {
    content: "" !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 60px !important;
    width: 2px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
  }
  .info .links::after {
    content: none !important;
  }
  /* RTL: the flex row reverses visually, so a separator at `right: 0` on
     mail ends up between mail and the logo column (stray). Flip the
     pseudo-element to the LEFT edge in RTL — the separator now lands at
     the boundary between mail↔phone (and phone↔links), where it belongs. */
  html[dir="rtl"] .info .mail::after,
  html[dir="rtl"] .info .phone::after {
    right: auto !important;
    left: 0 !important;
  }
  /* Follow Us cell: heading on top, icons row beneath */
  .info .links {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 8px;
  }
  .info .links h5 {
    margin: 0 !important;
  }
  .info .links-icons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .info .links-icons > div,
  .info .links-icons > a {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
  }
  /* Last section (Follow Us) — no right separator */
  .info .links {
    border-right: 0 !important;
  }
  /* Reset Bootstrap's border-start since we use border-right now */
  .info .border-start {
    border-left: 0 !important;
  }
  .info .mail,
  .info .phone {
    display: flex !important;
    align-items: center !important;
    gap: 12px;
  }
  .info .mail-icon,
  .info .phone-icon {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }
  .info .mail-content,
  .info .phone-content {
    min-width: 0;
    flex: 1;
    margin: 0 !important;
  }
  .info .mail-content h5,
  .info .phone-content h5,
  .info .mail-content .info-line,
  .info .phone-content .info-line {
    margin: 0;
    color: #fff;
    font-size: clamp(0.8rem, 0.95vw, 0.95rem);
    line-height: 1.2;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .info .info-line + .info-line {
    margin-top: 2px;
  }
  .info .links h5 {
    color: #fff;
    font-size: 1rem;
    margin: 0 0 6px 0;
    line-height: 1.2;
  }
  .info .links-icons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    margin: 0 !important;
  }
}

/* Mobile: horizontal layout that wraps onto multiple rows if needed (no horizontal scroll) */
@media (max-width: 767.98px) {
  .info {
    padding: 20px 16px !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Outer row: left-aligned wrap — sections move to next row if they don't fit */
  .info > .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }
  /* Promote mail/phone/links up to outer flex via display: contents */
  .info > .row > .col-10,
  .info > .row > .col-md-10,
  .info > .row > .col-10 > .row,
  .info > .row > .col-md-10 > .row {
    display: contents !important;
  }
  /* Logo column: left-aligned, shrunk, no frame */
  .info > .row > .col-2,
  .info > .row > .col-md-2 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 80px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    align-self: flex-start !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
  .info > .row > .col-2 img,
  .info > .row > .col-md-2 img,
  .info > .row > .col-2 > img.w-100,
  .info > .row > .col-md-2 > img.w-100 {
    max-width: 80px !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: block !important;
    object-fit: contain !important;
  }
  /* Arabic mode: mirror the logo column to the right edge to match
     the right-aligned mail/phone/links rows below it. */
  html.lang-ar .info > .row > .col-2,
  html.lang-ar .info > .row > .col-md-2 {
    margin-left: auto !important;
    margin-right: 0 !important;
    justify-content: flex-end !important;
  }
  /* Mail / Phone / Follow Us cells — full width, left-aligned, no separators */
  .info .mail,
  .info .phone,
  .info .links {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    align-self: flex-start !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }
  /* Bootstrap border-start/border-end cleanup */
  .info .border-start,
  .info .border-end,
  .info .mail,
  .info .phone,
  .info .links,
  .info .phone.border-start {
    border-left: 0 !important;
    border-right: 0 !important;
  }
  /* Only kill the separator pseudo-elements (NOT FontAwesome icon glyphs) */
  .info .phone.border-start::before,
  .info .phone.border-start::after,
  .info .mail.border-start::before,
  .info .mail.border-start::after,
  .info .links.border-start::before,
  .info .links.border-start::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
  }
  /* Mail/phone icon + text layout */
  .info .mail,
  .info .phone {
    flex-direction: row !important;
    gap: 8px !important;
  }
  .info .mail-icon,
  .info .phone-icon {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
  }
  .info .mail-icon i,
  .info .phone-icon i {
    font-size: 13px !important;
  }
  .info .mail-content,
  .info .phone-content {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  .info .mail-content .info-line,
  .info .mail-content h5,
  .info .phone-content .info-line,
  .info .phone-content h5 {
    margin: 0 !important;
    color: #fff;
    font-size: 11px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
  /* Follow Us — heading on top, icons row beneath */
  .info .links {
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: normal !important;
    flex-shrink: 0 !important;
  }
  .info .links h5 {
    color: #fff;
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  .info .links-icons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  .info .links-icons > div,
  .info .links-icons > a {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
  .info .links-icons i {
    font-size: 13px !important;
  }
}

/* Tablet/medium and up: ensure social icons have proper spacing and Follow Us heading sits above icons */
@media (min-width: 768px) {
  .info .links-icons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    gap: 16px !important;
  }
  .info .links-icons > div,
  .info .links-icons > a {
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
  }
}
.mail-icon, .phone-icon, .linkedin-icon , .facebook-icon, .insta-icon, .qr-code-icon{
  border-radius: 50%;
  height: 50px;
  width: 50px;
  border: 1px solid white;
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  margin-left: 10px;
  flex-shrink: 0;
}
.info .mail,
.info .phone {
  align-items: center;
}
/* Make the phone column the same height as the links column so its border-start matches */
.info .phone {
  align-self: center;
  height: auto;
}
.info .phone.border-start {
  border-left: 0 !important;
}
.info .phone.border-start::before {
  content: none !important;
  display: none !important;
}
 .links-icons{
  gap: 35px !important;
}
 .links-icons div, .links-icons a.linkedin-icon {
  background-color: rgba(255, 255, 255, 0.15);
  border: none;
  height: 38px;
  width: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.links-icons div a, .links-icons a.linkedin-icon a {
  background-color: transparent !important;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-social-icon {
  background-color: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  height: 38px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.links-icons i {
  font-size: 1.4rem;
}
/*--------------------------------------- terms&policy page -------------------------------------------------------------- */
.hero-inner{
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: auto;
    margin: 0;
    padding: 0 !important;
    background: none;
}
.hero-inner.hero-heroo {
    min-height: 75vh;
    background-image: url('../images/heroo.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: top center;
    margin: 0 !important;
    overflow: hidden;
}
.hero-inner.hero-heroo::before {
    display: none !important;
}
.hero-inner::before {
    content: "";
    position: absolute;
    top: 110px;
    right: 0;
    width: 230px;
    height: 100%;
    background: url(../../assets/images/beforeimg-hero-white.png) no-repeat center;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}
.hero-inner h2{
  margin-top: 100px;
}
.terms-page-img {
    width: 100%;
    min-height: 500px;
    position: relative;
    z-index: 0;
}
.terms-page-img::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/opacity-terms-page.png') no-repeat center;
    background-size: cover;
    opacity: 0.07;
    z-index: -1;
}
.terms ul {
  /* Lists on the terms / privacy pages: keep the bullets but tuck them
     inside the text flow so the marker sits right next to the first word
     (was rendering far away in the gutter, especially with text-end). */
  list-style-position: inside;
  padding-inline-start: 0;
}
.terms ul li {
  list-style-type: disc;
}
/*-------------------------------------------------- contact us page ------------------------------------------------- */
.contact-us-section .links-icons div{
 background-color: #1d295730;
}
 .contact-us-section{
    margin-top: 20px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 60px;
    padding-bottom: 60px;
    position: relative;
    background: none;
}

/* Data deletion page: center the 2-column layout vertically in the viewport
   so the form + logo block reads as the page's focal point — was crowding
   the navbar and leaving huge empty space below. Scoped to .data-deletion-section
   so the regular contact-us page (.contact-us-section without the modifier)
   is untouched. */
.contact-us-section.data-deletion-section {
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    margin-top: 32px;
    margin-bottom: 32px;
}
.contact-us-section.data-deletion-section > .container {
    width: 100%;
}
/* Light-grey rounded container that holds both columns (logo+text and the
   form card), matching the reference shell shape. */
.contact-us-section.data-deletion-section .data-deletion-card {
    background: #f3f3f6;
    border-radius: 28px;
    padding: clamp(16px, 3vw, 40px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.04);
}
/* Stay 2-column at every viewport (col-6 already enforces that). Scale the
   contents of each column so they fit comfortably on narrow screens. */
@media (max-width: 767.98px) {
    /* Shrink the overall section so the data-deletion page doesn't tower
       over the viewport on mobile. */
    .contact-us-section.data-deletion-section {
        min-height: 0 !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        margin-top: 16px;
        margin-bottom: 16px;
    }
    .contact-us-section.data-deletion-section .data-deletion-card {
        padding: 14px 12px !important;
    }
    .contact-us-section.data-deletion-section .data-deletion-card img {
        max-width: 100%;
        height: auto;
    }
    .contact-us-section.data-deletion-section .col-6 h3 {
        font-size: 0.9rem !important;
        margin: 0.5rem 0 !important;
    }
    .contact-us-section.data-deletion-section .contact-form-card {
        padding: 0.85rem !important;
    }
    .contact-us-section.data-deletion-section .contact-form-card > h1 {
        font-size: 0.95rem !important;
        margin-bottom: 0.5rem !important;
    }
    .contact-us-section.data-deletion-section .contact-form-card .border.rounded {
        padding: 0.45rem !important;
        margin-bottom: 0.5rem !important;
    }
    .contact-us-section.data-deletion-section .contact-form-card .border.rounded p {
        font-size: 0.72rem !important;
        /* Allow long emails / URLs to wrap to a new line instead of
           overflowing the info card on narrow viewports. */
        word-break: break-all;
        overflow-wrap: anywhere;
    }
    /* Email/location rows: stack icon + text vertically so the email gets
       its own full line and doesn't get squashed. */
    .contact-us-section.data-deletion-section .contact-form-card .border.rounded p:has(i) {
        display: block;
    }
    .contact-us-section.data-deletion-section .contact-form-card .btn-submit {
        font-size: 0.78rem !important;
        padding: 0.45rem 0.65rem !important;
    }
    /* Ensure the left column (logo + paragraph) is fully visible —
       remove any forced min-height. */
    .contact-us-section.data-deletion-section .col-6 {
        min-height: 0 !important;
    }
}
/* `.contact-form-card` has top: -240px elsewhere — designed to overlap the
   hero that used to sit above it. The hero is removed on this page, so
   that lift now pushes the card up over the navbar. Reset it. */
.contact-us-section.data-deletion-section .contact-form-card {
    top: 0 !important;
    overflow: visible;
    border-radius: 24px;
    /* Fill the column — was 95% which left a stray gap to the left */
    max-width: 100%;
    width: 100%;
    /* No forced height — let the card size to its actual content. */
    min-height: 0;
    height: auto;
    padding: 1.5rem !important;
}
/* Tighten internal spacing so the card stays compact */
.contact-us-section.data-deletion-section .contact-form-card > h1 {
    font-size: 1.6rem !important;
    margin-bottom: 1rem !important;
}
.contact-us-section.data-deletion-section .contact-form-card .border.rounded {
    padding: 0.85rem !important;
    margin-bottom: 1rem !important;
}
.contact-us-section.data-deletion-section .contact-form-card .text-center {
    margin-top: 0.25rem !important;
}
.contact-us-section.data-deletion-section .contact-form-card .btn-submit {
    margin-top: 0 !important;
}
@media (max-width: 768px) {
    .contact-us-section {
        margin-top: 20px !important;
        padding-top: 0 !important;
    }
}
.contact-card {
    background: #f5f5f5;
    border-radius: 24px;
    padding: 50px 40px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.05);
}
.contact-info-side {
    padding: 30px 40px 30px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.contact-logo {
    width: 140px;
    height: 60px;
    object-fit: contain;
    /* Logical properties: `inline-start` maps to LEFT in LTR and RIGHT in RTL,
       so the logo automatically mirrors with the page direction. */
    object-position: inline-start center;
    margin-bottom: 20px;
    margin-inline-start: -40px;
    margin-inline-end: 0;
    align-self: flex-start;
    display: block;
}
/* RTL fallback for `object-position: inline-start` (not all browsers support
   the keyword on `object-position` yet — flip to explicit `right center`). */
html[dir="rtl"] .contact-logo {
    object-position: right center !important;
}
.contact-caption {
    color: #1D2957;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 14px;
    display: block;
}
.contact-heading {
    color: #1D2957;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 18px;
}
.contact-heading strong {
    font-weight: 800;
}
.contact-description {
    color: #6c7280;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 28px;
}
.contact-method {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.contact-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.contact-icon-img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
}
.contact-submit-icon-img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    display: block;
}
/* Fixed-size image utilities — any uploaded image fits within these bounds without distortion */
.fixed-img-icon { width: 24px; height: 24px; object-fit: contain; display: inline-block; }
.fixed-img-icon-lg { width: 40px; height: 40px; object-fit: contain; display: inline-block; }
.fixed-img-logo { width: 160px; height: 60px; object-fit: contain; object-position: left center; display: block; }
.fixed-img-logo-sm { width: 120px; height: 40px; object-fit: contain; object-position: left center; display: block; }
.fixed-img-thumb { width: 100%; height: 220px; object-fit: cover; display: block; border-radius: 8px; }
.contact-method-text {
    display: flex;
    flex-direction: column;
}
.contact-method-label {
    color: #9ca3af;
    font-size: 0.8rem;
    font-weight: 500;
}
.contact-method-value {
    color: #1D2957;
    font-size: 1rem;
    font-weight: 600;
}
.contact-social {
    display: flex;
    gap: 14px;
    margin-top: 14px;
}
.contact-social a {
    color: #1D2957;
    font-size: 1.2rem;
    transition: opacity 0.2s ease;
}
.contact-social a:hover {
    opacity: 0.7;
}
.contact-form-side {
    background: #ffffff;
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.04);
}
.contact-form .form-row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.contact-form .form-field {
    margin-bottom: 16px;
}
.contact-form .form-label {
    display: block;
    color: #1D2957;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.contact-form .form-input {
    width: 100%;
    padding: 12px 14px;
    background: #f3f4f6;
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 0.95rem;
    color: #1D2957;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.contact-form .form-input::placeholder {
    color: #9ca3af;
}
.contact-form .form-input:focus {
    outline: none;
    border-color: #2563eb;
    background: #fff;
}
.contact-form .form-textarea {
    min-height: 110px;
    resize: vertical;
    font-family: inherit;
}
.contact-form .phone-row {
    display: flex;
    gap: 8px;
}
.contact-form .phone-row .phone-input {
    flex: 1;
}
.contact-submit-btn {
    margin-top: 8px;
    padding: 12px 28px;
    background: #1D2957;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.contact-submit-btn:hover {
    background: #0f1a3c;
}
.contact-submit-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: #1D2957;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.contact-logo {
    flex-shrink: 0;
    max-width: 100%;
}
@media (max-width: 992px) {
    .contact-card {
        padding: 20px 14px;
    }
    .contact-info-side {
        padding: 10px 10px;
    }
    .contact-form-side {
        padding: 16px 14px;
    }
    .contact-heading {
        font-size: 1.3rem;
        margin-bottom: 10px;
    }
    .contact-description {
        font-size: 0.8rem;
        margin-bottom: 14px;
    }
    .contact-method {
        gap: 8px;
        margin-bottom: 10px;
    }
    .contact-icon {
        width: 32px;
        height: 32px;
    }
    .contact-method-label {
        font-size: 0.65rem;
    }
    .contact-method-value {
        font-size: 0.8rem;
    }
    .contact-form .form-label {
        font-size: 0.75rem;
        margin-bottom: 4px;
    }
    .contact-form .form-input {
        padding: 7px 10px;
        font-size: 0.8rem;
    }
    .contact-form .form-field {
        margin-bottom: 10px;
    }
    .contact-form .form-textarea {
        min-height: 70px;
    }
    .contact-submit-btn {
        padding: 8px 18px;
        font-size: 0.85rem;
    }
    .contact-logo {
        width: 100px;
        height: 44px;
        margin-bottom: 10px;
        margin-inline-start: -20px;
        margin-inline-end: 0;
        margin-left: revert;
        margin-right: revert;
    }
    .contact-caption {
        font-size: 0.7rem;
        margin-bottom: 8px;
    }
}
@media (max-width: 768px) {
    .contact-card {
        padding: 20px 12px;
    }
    .contact-info-side {
        padding: 10px 8px;
    }
    .contact-form-side {
        padding: 16px 12px;
    }
    .contact-heading {
        font-size: 1.1rem;
    }
    .contact-caption {
        font-size: 0.7rem;
    }
    .contact-description {
        font-size: 0.75rem;
    }
    .contact-logo {
        width: 100px !important;
        height: 40px !important;
        margin-inline-start: -20px !important;
        margin-inline-end: 0 !important;
        margin-left: revert !important;
        margin-right: revert !important;
    }
    .contact-icon {
        width: 28px;
        height: 28px;
    }
    .contact-method {
        gap: 8px;
        margin-bottom: 12px;
    }
    .contact-method-label {
        font-size: 0.65rem;
    }
    .contact-method-value {
        font-size: 0.75rem;
        word-break: break-all;
    }
    .contact-form .form-row-grid {
        gap: 8px;
    }
    .contact-form .form-label {
        font-size: 0.7rem;
    }
    .contact-form .form-input {
        padding: 7px 9px;
        font-size: 0.75rem;
    }
    .contact-form .form-textarea {
        min-height: 70px;
    }
    .contact-submit-btn {
        padding: 8px 16px;
        font-size: 0.8rem;
        gap: 8px;
    }
    .contact-submit-arrow {
        width: 24px;
        height: 24px;
    }
}
/* Contact Form Card */
        .contact-form-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
            padding: 2.5rem;
            top: -240px;
            position: relative;
            overflow: hidden; 
            z-index: 10000;
            color: #1D2957;
        }
.form-group input{
   background-color: #F5F5F5;
            border: none;
            height: 50px;
}
.form-group input::placeholder, .form-group textarea::placeholder {
  font-size: 1rem;
  color: #1D2957;
  font-weight:700;
}
        textarea.form-control {
            height: 150px;
            resize: vertical;
            background-color: #F5F5F5;
            border: none;
        }

        .btn-submit {
            background-color:#6AC6A0;
            box-shadow: 0px 7px 6.7px 0px #FFFFFF14;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 0.75rem 7rem;
            font-weight: 600;
            font-size: 1.2rem;
            height: 50px;
        }
.country-dropdown select {
    width: 90px; 
    height: 50px;
    background-color: #F5F5F5;
    border: none;
    font-weight: 700;
    color: #1D2957;
    padding-left: 5px;
    padding-right: 5px;
}
.country-dropdown option {
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 30px;
}
/*------------------------------------------------------ industry page ------------------------------------- */
       .text-green{
        color: #34a97c;
       }
       .custom-title {
    position: relative;
    padding-top: 25px; 
}
.custom-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 3.5px;            
    width: 150px;           
    background: #6AC6A0;   
}
.custom-title::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 145px;
    width: 35px;
    height: 3.5px;
    background: #6AC6A0;
    transform: rotate(30deg);
}
.custom-title h4 {
    position: relative;
    padding-bottom: 15px; 
}
.custom-title h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3.5px;
    width: 130px;
     background: #6AC6A0;
}
/* RTL: mirror all green lines to the right side */
html.lang-ar .custom-title::before {
    left: auto;
    right: 0;
}
html.lang-ar .custom-title::after {
    left: auto;
    right: 145px;
    transform: rotate(-30deg);
}
html.lang-ar .custom-title h4::after {
    left: auto;
    right: 0;
}
.image-wrapper {
    position: relative;
}
.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000B2; 
    z-index: 1;
     border-radius: 16px;
}
.img-content {
    position: absolute;
    top: 30%;
    left: 3%;
    z-index: 2;
    padding-inline: 15px;
}
.btn-green{
  background-color: #6AC6A0;
  font-weight: 700;
  color: white;
  font-size: 1.2rem;
  margin-top: 20px;
}
.industry-section{
    margin-top: 60px;
    padding-top: 40px;
    margin-bottom: 50px;
}
.industry-title-col {
    margin-top: -30px;
}
.text-blue{
  color: #1D2957;
}
.card-info i{
  font-size: 3.5rem;
}
/*---------------------------------------- support form page ------------------------------------------------------ */
.support-form {
    width: 100%;
    min-height: 500px;
    background: url('../images/support-from-bg.png') no-repeat center;
    background-size: cover;
    padding: 80px 0;
    position: relative;
}
.support-floating-form {
    position: absolute;
    left: 50%;
    bottom: -260px; 
    transform: translateX(-50%);
    width: 100%;
}
.support-floating-form form {
    position: relative;
    padding: 20px;         
    border-radius: 16px;
    background: white;
    box-shadow: 0px 4px 4px 0px #00000014;
}
.text-muted{
  color: #8e8e8e !important;
}
.support-floating-form form::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: linear-gradient(360deg, #1D2957 0%, #6AC6A0 100%);
    border-radius: 20px;
    z-index: -1;         
}
.support-form {
    margin-bottom: 400px !important;
}
 /*---------------------------------------------- about us page ---------------------------------- */
/* Inner container — sits inside the frame borders */
.video-box .video-inner {
    position: relative;
    z-index: 3;
    border-radius: 12px;
    overflow: hidden;
    /* inset ~14px from all sides so frames peek out around it */
    margin: 14px 0 14px 14px;
}
.video-box .main-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}
.video-box .play-btn {
    width: 100px;
    height: 100px;
    background: #53d2a6;
    border-radius: 50%;
    position: absolute;
    top: -42px;
    right: -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 4px 8px #0002;
    cursor: pointer;
}
.video-box .play-btn i {
    color: white;
    font-size: 32px;
   
}
.video-box .frame {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    z-index: 1;
}
.video-box .frame-blue {
    border: 4px solid transparent;
    border-image: linear-gradient(45deg, #0f244e, #55c7ab) 1;
    border-radius: 50px;
    top: 15px;
    left: -17px;
}
.timeline-section {
    background: #ffffff;
    color: #0f244e;
    margin-bottom: 125px;
    margin-top: -60px;
}
.timeline-section .text-primary { color: #0f244e !important; }
.timeline-line{
  position: absolute;
  left: 0;
  right: 0;
  top: 70px;
  height: 246px;
  z-index: 1;
}
.timeline-items { min-height: 360px; position: relative; }
.timeline-item {
    position: absolute;
    top: 170px;
    transform: translateX(-50%);
    width: 220px;
    z-index: 5;
    text-align: center;
}
.timeline-item.pos-1 { left: 17.6%; }
.timeline-item.pos-2 { left: 36.5%; }
.timeline-item.pos-3 { left: 60.4%; }
.timeline-item.pos-4 { left: 83.7%; transform: translateX(-50%); }
.year-box{
  display: inline-block;
  background: #F5F5F5;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 700;
  color: #0f244e;
  box-shadow: 0 6px 18px rgba(11,18,40,0.06);
  position: relative;
  z-index: 6;
  border: 1px solid rgba(15,36,78,0.05);
}
.connector{
  display: none;
}
.icon-circle {
    display: none;
}
.timeline-icon {
    display: none;
}
.timeline-icon.bottom {
    top: calc(100% + 72px);
}
.timeline-icon.top {
    bottom: calc(100% + 75px);
}
.timeline-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.timeline-icon i {
    background: linear-gradient(135deg, #55c7ab 0%, #0f244e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 20px;
}
.info-box {
    max-width: 280px;
    background: #F5F5F5;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 15px;
    color: #0f244e;
    box-shadow: 0 6px 18px rgba(11, 18, 40, 0.03);
    margin-top: 18px;
    font-weight: 700;
    margin-left: auto;
    margin-right: auto;
    width: 280px;
    line-height: 1.4;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.info-box.top {
    position: absolute;
    bottom: calc(100% + 100px);
    left: 50%;
    transform: translateX(-50%);
}
.info-box.bottom {
    position: absolute;
    top: calc(100% + 90px);
    left: 50%;
    transform: translateX(-50%);
    text-align: left;
}
  .section-title {
            color: var(--primary-blue);
            font-weight: 700;
            margin-bottom: 15px;
            font-size: 1.8rem;
        }
        .section-subtitle {
            color: #666;
            margin-bottom: 40px;
            font-size: 1rem;
        }
        .image-grid-container {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 20px;
        }
        .col-large {
            flex: 1;
            min-width: 280px;
        }
        .large-image-container {
            height: 560px;
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .col-medium {
            flex: 1;
            min-width: 280px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .medium-image-container {
            height: 275px; 
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .col-small {
            flex: 1;
            min-width: 280px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .small-image-container {
            height: 180px; 
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .grid-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.4s ease;
        }
        .image-overlay {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.779), rgba(0, 0, 0, 0.5));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 20px;
            color: white;
        }
        .image-title {
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
        }
         /* team section  */
.team-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9rem;
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
}
.team-item {
  position: relative;
  transition: 0.4s ease;
}
.team-item img {
    width: 245px;
    height: 315px;
    object-fit: cover;
    border-radius: 80% / 60%;
    transition: 0.4s 
ease;
}
.team-item::after {
  content: "";
  position: absolute;
  inset: 0;
    border-radius: 80% / 60%;
  background: rgba(255, 255, 255, 0.55);
  opacity: 1;
  transition: 0.4s ease;
}
.team-item.active img {
  transform: scale(1.15);
}
.team-item.active::after {
  opacity: 0;
}
.team-item.side-cropped {
    clip-path: inset(0% 0% 0 0%);
}
.team-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 25px;
}
.team-arrow-btn {
  width: 45px;
  height: 45px;
  background: #4ECB71;
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 22px;
  font-weight: bold;
}
.active-name {
  font-size: 20px;
  font-weight: bold;
  color: #1D2957;
  min-width: 200px;
  text-align: center;
}
/* Footer — desktop layout (4 columns side by side) */
@media (min-width: 768px) {
  footer > .row {
    flex-wrap: nowrap !important;
    margin: 0 !important;
  }
  footer > .row > .col-4,
  footer > .row > .footer-brand-col {
    /* Brand column now takes the LEFT HALF — pushes the first separator
       and the Quick Links + Support columns over to the right half. */
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 6rem !important;
    padding-right: 1rem !important;
  }
  footer > .row > .col-8 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    flex-wrap: nowrap !important;
    /* Push the first separator (and the Quick Links + Support columns it
       precedes) further to the right, leaving a clear gap between the
       brand paragraph on the left and the separator on the right.
       Scales: ~3rem on tablets up to ~7rem on wide desktops. */
    padding-left: clamp(3rem, 5vw, 7rem) !important;
  }
  footer > .row > .col-8 > .flex-fill {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  footer .row .col-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
  }
  /* Separators between Quick Links and Support */
  footer > .row > .col-8 > .flex-fill.border-start {
    border-left: 1px solid rgba(255, 255, 255, 0.6) !important;
  }
  /* Brand description: cap width so the text wraps into a narrower, taller
     block (more lines, like the target screenshot) instead of stretching
     across the full ~50% column. */
  footer > .row > .col-4 .footer-body-text,
  footer > .row > .footer-brand-col .footer-body-text {
    max-width: clamp(280px, 28vw, 400px);
  }
  /* ── RTL footer (desktop ≥768px): mirror the layout so dividers and
     social icons land on the correct sides. ──
     In RTL flex (row direction), the main axis flows right→left, so
     `flex-start` = visual right (where the items begin) and `flex-end`
     = visual left. We want icons pinned to the right edge of the brand
     column to line up with the right-aligned Arabic text above them. */
  html[dir="rtl"] footer > .row > .col-4 .links-icons,
  html[dir="rtl"] footer > .row > .footer-brand-col .links-icons {
    justify-content: flex-start !important;
  }
  /* In RTL the Quick Links + Support columns reverse visually: QL ends up
     adjacent to Brand, Support at the far-left of col-8. QL's border-left
     correctly becomes the divider between Support and QL — keep it.
     Support's border-left, however, lands at the far-left edge of the
     footer where no section boundary exists. Remove it. */
  html[dir="rtl"] footer > .row > .col-8 > .flex-fill + .flex-fill {
    border-left: 0 !important;
  }
}

/* ── RTL footer — Bootstrap-RTL border cleanup (all widths) ──
   In Arabic mode, lang-toggle.js swaps the Bootstrap CSS file to the RTL
   build, which makes Bootstrap's `.border-start` resolve to `border-right`
   instead of `border-left`. Combined with our custom border-left at
   line 3068 and the ::before separator on Support (mobile only), the
   footer ends up drawing THREE border lines between Support and Quick
   Links plus a stray border on the visual right edge.
   This block strips the duplicates so only ONE clean divider remains
   between Support and QL, with no stray separator on the right. */
html[dir="rtl"] footer > .row > .col-8 > .flex-fill.border-start {
    /* Kill the custom border-left we forced at line 3068 — in RTL the
       Bootstrap-RTL `.border-start` already provides border-right which
       is the correct divider direction. */
    border-left: 0 !important;
}
html[dir="rtl"] footer > .row > .col-8 > .flex-fill.border-start:first-child {
    /* Quick Links (first DOM child = visual right in RTL): kill the
       Bootstrap-RTL border-right that would render as a stray separator
       at the right edge of the columns row. */
    border-right: 0 !important;
}
html[dir="rtl"] footer > .row > .col-8 > .flex-fill + .flex-fill::before {
    /* Support's pseudo-element separator (mobile only) duplicates the
       Bootstrap-RTL border-right on the same edge — kill it in RTL. */
    content: none !important;
    display: none !important;
}

/* Footer — mobile layout */
@media (max-width: 767.98px) {
  footer {
    padding: 30px 0 80px 0 !important;
    overflow: visible !important;
    width: 100% !important;
    height: auto !important;
  }
  footer > .row {
    flex-wrap: wrap !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Brand/description column: full width, 16px left padding for clean left edge */
  footer > .row > .col-4,
  footer > .row > .footer-brand-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 16px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    text-align: left !important;
  }
  /* Logo left-aligned at 16px from screen edge */
  footer > .row > .col-4 > img.mb-4,
  footer > .row > .footer-brand-col > img.mb-4 {
    display: block !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    max-width: 160px !important;
    height: auto !important;
  }
  /* Social icons row: left-aligned, starting at same line as logo + description */
  footer > .row > .col-4 .links-icons,
  footer > .row > .footer-brand-col .links-icons {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  footer .footer-body-text {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  /* Quick Links + Support side-by-side at 50/50 */
  footer > .row > .col-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 16px !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    align-items: stretch !important;
  }
  footer > .row > .col-8 > .flex-fill {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding: 0 12px !important;
    text-align: center !important;
    border-left: 0 !important;
    /* Both columns start at the same top position */
    align-self: flex-start !important;
    margin-top: 0 !important;
  }
  /* QUICK LINKS and SUPPORT headings: identical top spacing and baseline */
  footer > .row > .col-8 > .flex-fill > h4 {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    display: block !important;
    height: auto !important;
  }
  /* Vertical separator between Quick Links and Support */
  footer > .row > .col-8 > .flex-fill + .flex-fill {
    border-left: 0 !important;
    margin: 8px 0 !important;
    margin-top: -2px !important;
    position: relative !important;
  }
  footer > .row > .col-8 > .flex-fill + .flex-fill::before {
    content: "";
    position: absolute;
    /* Logical property: inline-start = LEFT in LTR, RIGHT in RTL. Puts the
       separator at the inner edge of Support (between QL and Support) in both
       directions, instead of always at the left edge of the page. */
    inset-inline-start: 0;
    top: 40px;
    bottom: -40px;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
  }
  /* Quick Links sub-columns: stack into single readable column */
  footer .row .col-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
  }
  /* Center the link lists under their headings */
  footer ul.list-unstyled {
    padding-left: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  footer ul.list-unstyled li,
  footer ul.list-unstyled li a {
    text-align: center !important;
  }
  footer ul.list-unstyled li a {
    display: inline-block !important;
  }
  footer h4 {
    font-size: 1.05rem !important;
    white-space: normal !important;
    text-align: center !important;
  }
  footer ul li,
  footer ul li a {
    font-size: 0.95rem !important;
    white-space: normal !important;
  }
  footer .footer-social-icon img {
    width: 28px !important;
    height: 28px !important;
  }
  /* Copyright bar at bottom — clear of floating chat bubble */
  footer > .mt-1 {
    margin-top: 20px !important;
    padding: 0 16px !important;
  }
  /* ── RTL footer (mobile): flip the brand column to right-aligned ── */
  html[dir="rtl"] footer > .row > .col-4,
  html[dir="rtl"] footer > .row > .footer-brand-col {
    text-align: right !important;
  }
  html[dir="rtl"] footer > .row > .col-4 > img.mb-4,
  html[dir="rtl"] footer > .row > .footer-brand-col > img.mb-4 {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  html[dir="rtl"] footer .footer-body-text {
    text-align: right !important;
    direction: rtl !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
  html[dir="rtl"] footer > .row > .col-4 .links-icons,
  html[dir="rtl"] footer > .row > .footer-brand-col .links-icons {
    /* flex-start in RTL = visual right side (start of right-to-left axis) */
    justify-content: flex-start !important;
  }
  /* Re-anchor each social icon's right margin (Bootstrap's me-3 = margin-right
     1rem) so icons sit cleanly from the right edge */
  html[dir="rtl"] footer .footer-social-icon {
    margin-right: 0 !important;
    margin-left: 1rem !important;
  }
  html[dir="rtl"] footer .footer-social-icon:last-child {
    margin-left: 0 !important;
  }

  footer > .mt-1 p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
}
/* ── Services page: keep 2-column layout at ALL viewport widths ──
   Bootstrap's col-md-* collapse to 100% below 768px (stacks into single column).
   We swapped to col-* on the markup; this block scales fonts/images down so
   the side-by-side layout stays readable on narrow phones. */
@media (max-width: 767.98px) {
    .services-row {
        flex-wrap: nowrap !important;
    }
    .services-row .item h4,
    .services-row h4 {
        font-size: clamp(11px, 2.4vw, 16px) !important;
        line-height: 1.35 !important;
    }
    .services-row h3 {
        font-size: clamp(13px, 2.8vw, 20px) !important;
        line-height: 1.35 !important;
    }
    .services-row ul li {
        font-size: clamp(11px, 2.4vw, 16px) !important;
        line-height: 1.35 !important;
    }
    .services-row img.img-fluid {
        max-height: clamp(140px, 38vw, 260px) !important;
        width: auto !important;
        max-width: 100% !important;
    }
    /* Icon + text on the same line, vertically CENTERED with the text block
       (so when text wraps to 2 lines, the icon sits centered alongside —
       matching the inline "icon · text" look of the desktop full-screen view) */
    .services-row .item {
        align-items: center !important;
        gap: 0.5em !important;
    }
    .services-row .item i {
        font-size: 0.85rem !important;
        margin-top: 0 !important;
        flex-shrink: 0 !important;
    }
    /* Tighter vertical gap between checklist items */
    .services-checklist {
        gap: 12px !important;
        justify-content: flex-start !important;
        min-height: 0 !important;
    }
    .services .col-6,
    .services .col-8,
    .services .col-4 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    /* Equal small vertical gap between the 3 main service rows.
       Was: row 2 wrapper had min-height: 500px which inflated the gap below
       it and made rows 1-2 vs 2-3 visually inconsistent. */
    .services .terms-page-img {
        min-height: 0 !important;
    }
    .services > .container > .row.services-row,
    .services > .container > .terms-page-img > .row.services-row {
        margin-top: 16px !important;
        margin-bottom: 16px !important;
    }
}

/* ── About Us: extra space between the Mission cards block and the
   "Our Story & Journey Timeline" section, on desktop only ── */
@media (min-width: 992px) {
    .timeline-section {
        margin-top: 100px;
    }
}

/* ── About Us: taller dark-blue "LET'S BUILD..." quote band ── */
.qoute .info {
    padding-top: clamp(40px, 6vw, 100px) !important;
    padding-bottom: clamp(40px, 6vw, 100px) !important;
}
/* Restore the Master Code logo in the quote section on small phones.
   The base `.info img { display: none }` rule at ~line 4074 (inside
   @media max-width: 432px) hides ALL images in any `.info` block —
   too broad. Scope this exception to `.qoute .info` only. */
.qoute .info img {
    display: inline-block !important;
}

/* ── About Us: Career Highlights — horizontal carousel on narrow viewports ──
   At <992px the existing layout collapses to a vertical stack because of
   `flex-wrap: wrap` + `min-width: 280px` on each column (style.css:2849-2885).
   Below we re-purpose the same grid as a horizontal swipeable carousel:
   - The grid container scrolls horizontally (hidden scrollbar, snap)
   - `.col-large/medium/small` use `display: contents` so their card children
     float up into the grid as direct flex items — flattening the 3-column
     masonry into a single row of 6 cards
   - Every card gets a fixed ~78vw width and equal height (220px) so the
     next card peeks at the right, signaling scrollability
   Desktop styles are untouched. ───────────────────────────────────────── */
@media (max-width: 991.98px) {
    .career-section .image-grid-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;        /* Firefox */
        -ms-overflow-style: none;     /* legacy Edge / IE */
        padding-bottom: 8px;
    }
    .career-section .image-grid-container::-webkit-scrollbar {
        display: none;                /* Chrome / Safari / new Edge */
    }
    /* Flatten the 3 column blocks so all 6 cards become direct children of
       the scroll container (one continuous horizontal row). */
    .career-section .image-grid-container > .col-large,
    .career-section .image-grid-container > .col-medium,
    .career-section .image-grid-container > .col-small {
        display: contents !important;
    }
    /* Every card = one carousel slot. Equal width/height; the next slot
       peeks at the edge as a scroll hint. */
    .career-section .image-grid-container .image-container,
    .career-section .image-grid-container .large-image-container,
    .career-section .image-grid-container .medium-image-container,
    .career-section .image-grid-container .small-image-container {
        flex: 0 0 clamp(260px, 78vw, 360px) !important;
        width: clamp(260px, 78vw, 360px) !important;
        min-width: clamp(260px, 78vw, 360px) !important;
        max-width: clamp(260px, 78vw, 360px) !important;
        height: 220px !important;
        scroll-snap-align: start;
    }
}

/* ── About Us page: keep 2-column "text | video" layout at ALL widths ── */
.about-section .about-row {
    flex-wrap: nowrap !important;
}
@media (max-width: 1199.98px) {
    .about-section .about-row {
        flex-wrap: nowrap !important;
    }
    .about-section .about-text-col,
    .about-section .about-video-col {
        padding-left: clamp(6px, 1vw, 16px) !important;
        padding-right: clamp(6px, 1vw, 16px) !important;
    }
    /* Extra right padding ONLY on the video col so the play button's
       negative `right` offset stays inside the column at every width. */
    .about-section .about-video-col {
        padding-right: clamp(12px, 2vw, 28px) !important;
    }
    /* Text column scaling */
    .about-section .about-text-col h4 {
        font-size: clamp(11px, 1.5vw, 18px) !important;
        line-height: 1.4 !important;
    }
    .about-section .about-text-col .text-muted {
        font-size: clamp(10px, 1.3vw, 16px) !important;
    }
    /* Video column scaling: keep aspect-ratio, shrink with column.
       Only horizontal centering — vertical position is owned by the new
       all-widths rule below so margin-top doesn't fight Bootstrap's my-5. */
    .about-section .about-video-col .video-box {
        max-width: 100% !important;
        margin: 0 auto !important;
    }
    .about-section .about-video-col .video-inner,
    .about-section .about-video-col video {
        width: 100% !important;
        height: auto !important;
    }
    /* Play button sizing/positioning is owned by the all-widths consolidated
       rule below (single clamp() across the whole viewport range). */
}

/* ── About Us — row alignment, video column padding, and video position.
   These apply at ALL widths (not just mobile) because the play-button
   clipping and the video-drifting-up issues both manifest on desktop too.
   Scoped to `.about-section` so nothing else changes. ── */

/* (1) Top-align both columns. The base rule on `.about-row` uses
       `align-items: center` which centers the video vertically against
       the tall text column, making it drift up on wide screens and
       down on mobile. flex-start locks the video's top edge to the row. */
.about-section .about-row {
    align-items: flex-start !important;
}

/* (2) Reserve right-side space inside the video column for the play
       button's `right: -20px` overhang (desktop) / `right: -6px` (mobile).
       The mobile/tablet media-query block above also sets a smaller
       value — this is the desktop baseline. */
.about-section .about-video-col {
    padding-right: clamp(28px, 3vw, 48px);
}

/* (3) Push the video down to align its top edge with the "We deal With…"
       heading. The text column has 40px inline padding-top plus the
       "About us" h4 stacked above the main heading.
       margin-bottom: 0 removes the my-5 bottom margin so the next section
       doesn't drift; this longhand with !important beats Bootstrap's my-5. */
.about-section .about-video-col .video-box {
    margin-top: clamp(40px, 5vw, 80px) !important;
    margin-bottom: 0 !important;
}

/* (4) Lock .about-section top margin so the various negative-margin overrides
       in @media (max-width: 1024 / 768 / 432 / 325) blocks can't pull the
       section up into the hero. This single rule defeats them all because it
       appears AFTER every one of them in source order and uses !important.
       Beats the `margin-top: 0 !important` at line ~4752 (also via source
       order — that rule fires only at <=768px, this one wins at every width). */
.about-section {
    margin-top: 60px !important;
}

/* (5) Address text: brand-navy and proportionate size at EVERY width
       (was previously mobile-only inside @media 767.98px). The (0,4,0)
       selector reaches into the .d-inline-flex wrapper to hit BOTH EN/AR
       address divs, beating the inline `style="font-size:.95rem"` via
       higher specificity + !important. */
.about-section .about-text-col .d-inline-flex .lang-en,
.about-section .about-text-col .d-inline-flex .lang-ar {
    font-size: clamp(11px, 1vw, 15px) !important;
    color: #1D2957 !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
}

/* (6) Play button: ONE consolidated rule at all widths. Replaces every
       legacy fixed-pixel/per-breakpoint rule. Scaled clamps make the size
       and offsets glide smoothly across the whole viewport range —
       no breakpoint jumps. Beats every legacy rule via (0,3,0) specificity
       + !important + later source order. */
.about-section .about-video-col .play-btn {
    width:  clamp(40px, 5vw, 90px) !important;
    height: clamp(40px, 5vw, 90px) !important;
    top:    clamp(-32px, -2.5vw, -10px) !important;
    right:  clamp(-12px, -1vw, -4px)    !important;
}
.about-section .about-video-col .play-btn i {
    font-size: clamp(14px, 2vw, 32px) !important;
}

/* ── Industries page: keep 2-column layout (title | icons-grid) at ALL widths ── */
.industry-section .industry-row {
    flex-wrap: nowrap !important;
}
.industry-section .industry-icons-col .row {
    flex-wrap: nowrap !important;
}
/* Apply fluid scaling across MOBILE + TABLET widths.
   Below ~1200px the icon sub-columns are ~25% of viewport (~250-300px), so
   default font sizes wrap one-word-per-line. clamp() scales fonts smoothly
   so text reads naturally at every width from 320px up to 1200px. */
@media (max-width: 1199.98px) {
    .industry-section .industry-row,
    .industry-section .industry-icons-col .row {
        flex-wrap: nowrap !important;
    }
    .industry-section .industry-row > .col-6,
    .industry-section .industry-icons-col > .row > .col-6 {
        padding-left: clamp(6px, 1vw, 12px) !important;
        padding-right: clamp(6px, 1vw, 12px) !important;
    }
    /* Title column scaling */
    .industry-section .industry-title-col h5 {
        font-size: clamp(11px, 1.4vw, 18px) !important;
    }
    .industry-section .industry-title-col h3 {
        font-size: clamp(15px, 2.4vw, 32px) !important;
        margin-bottom: clamp(8px, 1.2vw, 16px) !important;
    }
    .industry-section .industry-title-col h4 {
        font-size: clamp(10px, 1.3vw, 16px) !important;
        line-height: 1.5 !important;
    }
    .industry-section .industry-title-col .image-wrapper .img-content h3 {
        font-size: clamp(11px, 1.5vw, 20px) !important;
        line-height: 1.35 !important;
    }
    .industry-section .industry-title-col .image-wrapper .img-content .btn {
        font-size: clamp(10px, 1.3vw, 16px) !important;
        padding: clamp(6px, 0.8vw, 10px) clamp(14px, 1.8vw, 24px) !important;
    }
    /* Icon card scaling */
    .industry-section .industry-icon-col .card-info {
        padding: clamp(6px, 1vw, 12px) clamp(4px, 0.8vw, 10px) !important;
        margin-bottom: clamp(8px, 1.5vw, 20px) !important;
    }
    .industry-section .industry-icon-col .card-info img,
    .industry-section .industry-icon-col .card-info i {
        width: clamp(28px, 3.4vw, 48px) !important;
        height: clamp(28px, 3.4vw, 48px) !important;
        font-size: clamp(1.4rem, 3vw, 2.4rem) !important;
        margin-bottom: clamp(4px, 0.8vw, 10px) !important;
    }
    .industry-section .industry-icon-col .card-info h4 {
        font-size: clamp(11px, 1.6vw, 22px) !important;
        margin-bottom: clamp(4px, 0.8vw, 10px) !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
    .industry-section .industry-icon-col .card-info h5 {
        font-size: clamp(9px, 1.2vw, 16px) !important;
        line-height: 1.4 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
}
/* Mobile-only — push the right (icons) column down so it sits closer to the
   image / title baseline. Above 768px the desktop padding lines up fine. */
@media (max-width: 767.98px) {
    .industry-section .industry-icons-col {
        padding-top: 80px !important;
    }
}

/* footer  */
footer{
   width: 100%;
    min-height: auto;
    background: url('../images/footer-bg.png') no-repeat center;
    background-size: cover;
    padding: 25px 0;
    position: relative;
}
footer ul li a {
  font-size: 1.1rem !important;
}
footer p.footer-body-text {
  font-size: 1.3rem !important;
}
/* ===== Responsive ===== */
    @media (max-width: 1445px) {
.hero {
    min-height: 135vh;
}
.hero::before {
    top: 280px;
}
.about {
    padding: 118px 0;
}
.about-img-wrapper img {
    width: 100%;
    height: auto;
    max-width: 580px;
    object-fit: contain;
    display: block;
}
.why-choose-us {
    padding-bottom: 80px;
}
.info .h5, h5 {
    font-size: 1rem;
}
.border-end  {
    padding-inline: 15px;
}
.hero-inner::before {
    top: 130px;
    right: 0;
    width: 195px;
}
 .services{
    margin-top: 60px;
    padding-top: 40px;
}
.image-wrapper img, .overlay {
    height: 425px;
}
.card-info i {
    font-size: 2.5rem;
}
}

@media (max-width: 1024px) {
    .hero-inner {
    min-height: 85vh;
}
        .hero::before {
        top: 295px;
    }
.navbar-brand img {
    height: 50px;
}
.nav-links ul {
    gap: 1vw;
}
.nav-link.active::after {
    bottom: -16px;
    left: 0;
    right: 0;
    margin: 0;
    height: 6px;
    box-shadow: 0px -3px 19.3px 4px #6AC6A0A3;
}
.h2, h2 {
    font-size: 1.6rem;
}
    .hero-inner::before {
        top: 195px;
        right: 0;
        width: 155px;
    }
.about, .terms, .services, .about-section {
    margin-top: -115px;
    padding-top: 40px;
}
.video-box .play-btn {
    width: 80px;
    height: 80px;
    top: -30px;
    right: -20px;
}
.mission-cards .card {
    height: 200px;
}
.info-box {
    padding: 12px 14px;
    font-size: 17px;
    margin-top: 18px;
    width: 200px;
}
.timeline-section {
    margin-bottom: 120px;
}
.h3, h3 {
    font-size: 1.5rem;
}
.why-choose-us .content{
  padding-inline: 10px;
}
.video-box .frame-blue {
    top: 11px;
    left: -13px;
}
.h4, h4 {
    font-size: 1.2rem;
}
.why-choose-us .container{
  padding-top: 40px;
}
.why-choose-us .container > h4 {
  margin-bottom: 16px;
}
.why-choose-us .container > .row {
  padding-top: 20px;
}
.large-image-container {
    height: 500px;
}
.medium-image-container {
    height: 243px;
}
.small-image-container {
    height: 157px;
}
.team-item img {
    width: 170px;
    height: 225px;
}
.team-wrapper {
    gap: 5rem;
    padding: 40px 0;
}
footer {
    width: 100%;
    min-height: auto;
    padding: 10px 0;
}
    .mb-md-5 {
        margin-bottom: 2rem !important;
    }
    .fs-4 {
    font-size: 1.2rem !important;
}
.h1, h1 {
    font-size: 2rem;
}
.contact-us-section {
    margin-top: -100px;
    padding-top: 85px;
    margin-bottom: -270px;
}
.form-group input {
    height: 40px;
}
textarea.form-control {
    height: 120px;
}
.mail-icon, .phone-icon, .linkedin-icon, .facebook-icon, .insta-icon, .qr-code-icon {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    margin-left: 10px;
}
.industry-section {
    margin-top: 0;
    padding-top: 40px;
    margin-bottom: 50px;
}
    .card-info i {
        font-size: 2rem;
    }
    
.support-floating-form {
    left: 50%;
    bottom: -200px;
    transform: translateX(-50%);
}
.terms-page-img
 {
    min-height: 330px;
}
    .about-img-wrapper img {
        width: 470px;
    }
    .partners-section {
    padding: 35px 0 50px;
}
.service-card {
    width: 270px;
    height: 300px;
}
.overlay h5 {
    font-size: 16px;
}
    .mail-icon, .phone-icon, .linkedin-icon, .facebook-icon, .insta-icon, .qr-code-icon {
              height: 30px;
        width: 30px;
        margin-left: 0px;
    }
    .mail-content h5, .phone-content h5, .links h5{
      font-size: 0.9rem;
    }
    .why-choose-us .icon-overlay i {
    font-size: 25px;
}
.consultant-btn {
    padding: 10px 36px;
    font-size: 1.1rem;
  }
}
@media (max-width: 992px) {
  .timeline-line { top: 220px; }
  .timeline-items { min-height: 320px; }
  .timeline-item { width: 46%; }
  .timeline-item.pos-1 { left: 8%; }
  .timeline-item.pos-2 { left: 52%; }
  .timeline-item.pos-3 { left: 8%; top: calc(220px - 28px + 160px); }
  .timeline-item.pos-4 { left: 52%; top: calc(220px - 28px + 160px); }
      .timeline-item.pos-3 {
        left: 80%;
        top: calc(220px - 28px + 6px);
    }
        .info-box {
        padding: 9px 7px;
        font-size: 14px;
        margin-top: 18px;
        width: 200px;
    }
        .timeline-item.pos-1 {
        left: 13%;
    }
        .timeline-item.pos-4 {
        left: 52%;
        top: calc(220px - 28px + 207px);
    }
        .timeline-items {
        min-height: 380px;
    }
    .h2, h2 {
        font-size: 1.2rem;
    }
    footer {
    padding: 15px 0;
}
.support-floating-form {
    bottom: -170px;
}
.support-form {
    margin-bottom: 255px !important;
}
        .hero-inner::before {
        top: 155px;
        right: 0;
        width: 155px;
    }
        .about-img-wrapper img {
        width: 430px;
    }
        .nav-links ul {
        gap: 0vw;
    }
    .contact-form-card {
    padding: 2rem;
    top: -240px;
}
}
@media (max-width: 768px) {
.hero-inner {
    width: 100%;
    min-height: 85vh;
  }
      .h1, h1 {
        font-size: 1.4rem;
    }
        textarea.form-control {
        height: 80px;
    }
        .form-group input {
        height: 32px;
    }
    .btn-submit {
    padding: 0.40rem 7rem;
    font-size: 1rem;
    height: 40px;
}
  .about, .terms, .services, .about-section {
        margin-top: -55px;
        padding-top: 40px;
    }
    .country-dropdown select {
    width: 90px;
    height: 35px;
    padding-left: 5px;
    padding-right: 5px;
}
        .large-image-container {
        height: 420px;
    }
        .medium-image-container {
        height: 204px;
    }
    .small-image-container {
        height: 190px;
    }
        .mail-icon, .phone-icon, .linkedin-icon, .facebook-icon, .insta-icon, .qr-code-icon {
        border-radius: 50%;
        height: 40px;
        width: 40px;
        margin-left: -14px;
    }
    footer{
      padding: 0px;
    }
    .p-5 {
    padding: 2rem !important;
}
    .h4, h4 {
        font-size: 1rem;
    }
        .fs-4 {
        font-size: 1rem !important;
    }
        .navbar-custom {
        width: 95%;
    }
     .hero {
        min-height: 75vh;
    }
        .hero-inner {
        width: 100%;
        min-height: 75vh;
    }
    .contact-form-card {
    padding: 2.5rem;
    top: -149px;
}
    .contact-us-section {
        margin-top: 0px;
        padding-top: 16px;
        /* was -160px which dragged the footer up over the bottom of the
           form — give the section breathing room so the whole form is
           visible above the footer. */
        margin-bottom: 40px;
        padding-bottom: 24px;
    }
     .partners-logos img {
        margin: 15px 10px;
        max-height: 90px;
      }
          .h3, h3 {
        font-size: 1.2rem;
    }
        .support-floating-form {
        bottom: -130px;
    }
        .about-img-wrapper img {
        width: 345px;
    }
       .why-choose-us .icon-overlay i {
        font-size: 20px;
    }
      .feature-title {
        font-size: 13px;
    }
    .text {
    padding-inline: 60px;
}
        .service-card {
        width: 320px;
        height: 300px;
    }
    .why-choose-us .container {
        padding-top: 35px;
    }
        .why-choose-us {
        padding-bottom: 0px;
    }
    .info-section .section-header h4
 {
    padding-inline: 0px;
}
.d-flex{
  flex-wrap: wrap;
}
.info {
    padding-block: 5px;
}
.info-section {
    min-height: 395px;
    padding: 80px 0;
}
.hero-content {
    margin-top: 20px;
}
       .about {
        padding: 0px 0;
    }
    .navbar-custom {
        z-index: 9999;
    }    .navbar-collapse {
        position: fixed;
        top: 70px;
        left: 2.5%;
        right: 2.5%;
        width: auto;
        background-color: white;
        padding: 15px 0;
        z-index: 9999;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 16px 16px;
        padding-inline: 35px;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .nav-links ul {
        flex-direction: column;
        gap: 20px;
        padding: 0;
        margin: 0;
    }
}

@media (max-width: 576px) {
  .timeline-line { display: none; }
  .timeline-items { min-height: auto; }
  .timeline-item {
    position: static;
    width: 100%;
    transform: none;
    margin-bottom: 28px;
    text-align: center;
  }
  .year-box { margin-bottom: 10px; }
  .connector { display: none; }
  .timeline-icon { display: none; }
  .info-box { position: static; margin: 0 auto; text-align: center; }
}

@media(max-width: 480px){
    .icon-overlay i {
    font-size: 30px;
  }
  .feature-title {
    font-size: 14px;
  }
    .video-box {
        width: 100%;
    }
    .video-box .play-btn {
        width: 55px;
        height: 55px;
        top: -15px;
        right: -15px;
    }
}
@media(max-width: 432px){
        .video-box .play-btn {
        width: 55px;
        height: 55px;
        top: -21px;
        right: -7px;
    }
        .video-box .frame-blue {
        top: 10px;
        left: -7px;
    }
        .mission-cards .card {
        height: 175px;
        margin-bottom: 10px;
    }
    .why-choose-us {
    width: 100%;
    min-height: 300px;
    /* Tightened so there's less empty space above the heading and below
       the hexagons on mobile. */
    padding: 30px 0 20px 0;
    margin-top: 60px;
}
.border-start, .border-end  {
    border: none !important;
}
    .large-image-container {
        height: 204px;
    }
    footer {
    padding: 0px 0;
}
    .team-item img {
        width: 115px;
        height: 150px;
    }
        .team-wrapper {
        gap: 1rem;
        padding: 17px 0;
    }
    .team-arrow-btn {
    width: 30px;
    height: 30px;
    font-size: 16px;
}
       .why-choose-us {
        /* Halved from 120px so there's about half the previous gap above
           the heading (still positive so it sits below the features image). */
        margin-top: 60px !important;
    }
          .about, .terms, .services, .about-section {
        margin-top: -59px;
        padding-top: 0px;
    }
        .hero-inner {
        width: 100%;
        min-height: 80vh;
    }
         .hero-inner::before {
        top: 131px;
        right: 0;
        width: 100px;
    }
        .hero-inner {
        width: 100%;
        min-height: 60vh;
    }
    .hero-inner h2 {
    margin-top: 40px;
}
    .contact-us-section {
        margin-top: 0px;
        padding-top: 2px;
        margin-bottom: 100px;
    }
        .contact-form-card {
        padding: 2.5rem;
        top: 25px;
    }
    .links-icons{
      padding-left: 15px;
    }
    .card-info {
        margin-inline: 10px;
        margin-block: 20px;
    }
 .industry-section .image-wrapper{
    display: block;
}
    .card-info i {
        font-size: 2rem;
    }
      .hero-inner h2 {
        margin-top: 90px;
        font-size: 17px;
        line-height: 23px;
    }
    .terms-page-img img{
      display: block;
    }
        .terms-page-img {
        min-height: 200px;
    }
      .support-form {
        margin-bottom: 150px !important;
    }
       .support-floating-form {
        bottom: -120px;
    }
    .support-form {
    padding: 50px 0;
}
         .hero {
        min-height: 80vh;
    }
        .hero::before {
        top: 190px;
        right: 0;
        width: 140px;
    }
      .about-img-wrapper img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    .hero-content .p-3 {
    padding: 0.5rem !important;
}
        .about {
        margin-top: -107px;
    }
        .why-choose-us .container {
        padding-top: 0px;
        /* was -140px which also pulled the heading up. Reset. */
        margin-top: 0;
    }
    .feature-img {
    height: 180px;
}    .why-choose-us {
        padding-bottom: 10px;
    }
        .partners-logos img {
        margin:0; 
        width: 50%;
        max-height: 100%;
    }
        .why-choose-us .icon-overlay i {
        font-size: 30px;
    }
        .feature-title {
        font-size: 18px;
    }
        .small-img {
        display: none;
    }
    .small-img {
    width: 35px;
    height: 35px;
    }

    .active-img {
    width: 50px;
    height: 50px;
    border: 3px solid #3cb886;
}
.testimonial-box .gap-3 {
    gap: 0rem !important;
}
.nav-btn {
    width: 30px;
    height: 30px;
    margin-inline: 15px;
}
.info img{
  display: none;
}
.info {
        padding-block: 12px;
        padding-inline: 30px;
    }
    .hero-content .p-3{
    padding: 0.5rem !important;
}
.right-side {
    background-color: #ffffff00;
}
.hero .right-side  img, .hero .right-side h2{
    display: none;
}
.hero .consultant-btn{
    width: 100%;
}
    .text {
        padding-inline: 10px;
    }
        .mail-icon, .phone-icon, .linkedin-icon, .facebook-icon, .insta-icon, .qr-code-icon {
        height: 35px;
        width: 35px;
        margin-left: 5px;
    }
}

@media(max-width:376px){
    .video-box .play-btn {
        width: 50px;
        height: 50px;
        top: -23px;
        right: 8px;
    }
    .btn-submit {
        padding: 0.4rem 5rem;
        font-size: 1rem;
        height: 40px;
    }
.country-dropdown{
    width: 100%;
}
        .h3, h3 {
        font-size: 1.2rem;
    }
        .why-choose-us {
        padding-top: 165px;
        padding-bottom: 30px;
    }
        .mb-md-5 {
        margin-bottom: 1rem !important;
    }
        .contact-form-card {
        padding: 1.5rem;
        top: 40px;
    }
         .hero-inner h2 {
        margin-top: 40px;
        font-size: 16px;
        line-height: 22px;
    }
        .text {
        padding-inline: 5PX;
    }
           .service-card {
        width: 280px;
        height: 290px;
    }
        .overlay h5 {
        font-size: 15px;
    }
        .feature-title {
        font-size: 15px;
    }
        .feature-img {
        height: 150px;
    }
        .why-choose-us .icon-overlay i {
        font-size: 25px;
    }    .team-item img {
        width: 170px;
        height: 225px;
    }
    .review-text {
    font-size: 1rem;
    line-height: 1;
}
    .nav-btn {
        width: 20px;
        height: 20px;
        margin-inline: 5px;
    }
        .small-img {
        width: 35px;
        height: 35px;
        display: none;
    }
        .hero {
        min-height: 70vh;
    }
        .about .consultant-btn{
            display: none;
        }
}
@media(max-width:325px){
    .hero-inner {
        min-height: 45vh;
    }
        .navbar-brand img {
        height: 35px;
    }
        .h1, h1 {
        font-size: 1.2rem;
    }
       .hero-inner::before {
        top: 105px;
        right: 0;
        width: 60px;
    }
    .contact-us-section img{
          width: 115px;
    }
        .industry-section {
        margin-top: 0;
        padding-top: 40px;
        margin-bottom: 50px;
    }
    .support-form {
    min-height: 460px;
    padding: 80px 0;
}
         .hero-inner {
        min-height: 50vh;
    }
        .about, .terms, .services, .about-section {
        margin-top: -30px;
        padding-top: 0px;
    }
        .why-choose-us {
        padding-top: 440px;
        padding-bottom: 30px;
    }
    .team-arrows {
    gap: 25px;
    margin-top: 25px;
}
        .why-choose-us {
        margin-top: -310px !important;
    }
        .about {
        margin-top: -70px;
    }
        .partners-logos img {
        width: 100%;
        max-height: 100%;
    }
       .service-card {
        width: 265px;
        height: 295px;
    }.services-section {
    margin-top: -100px;
}
        .mission-cards .card {
        height: 200px;
        margin-bottom: 10px;
    }
           .service-card {
        width: 280px;
        height: 280px;
    }

    .info-section {
        min-height: 100px;
        padding: 20px 0;
        padding-top: 0px;
    }      
        .why-choose-us .icon-overlay i {
        font-size: 20px;
    }
        .partners-logos img {
        width: 50%;
        max-height: 100%;
    }
        .feature-title {
        font-size: 16px;
    }
          .feature-img {
        height: 130px;
    }    .feature-title {
        font-size: 14px;
    }
        .hero {
        min-height: 60vh;
    }
  }

/* ===== Nav-right wrapper ===== */
.nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.navbar-toggler:focus {
    box-shadow: none;
}

/* ===== Responsive Navbar Collapse (< 992px) ===== */
@media (max-width: 991.98px) {
    .navbar-custom {
        z-index: 9999;
    }
    .navbar-collapse {
        position: fixed;
        top: 70px;
        left: 2.5%;
        right: 2.5%;
        width: auto;
        background-color: white;
        padding: 15px 0;
        z-index: 9999;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        border-radius: 0 0 16px 16px;
        padding-inline: 35px;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .nav-links ul {
        flex-direction: column;
        gap: 20px;
        padding: 0;
        margin: 0;
    }
    .nav-grid {
        grid-template-columns: 1fr auto;
        position: relative;
    }
}

/* ===== Hero Card: keep side-by-side at all sizes ===== */
.hero-card {
    flex-wrap: nowrap;
}

/* ===== About Page - Features Section ===== */
.about-features-section {
    padding: 40px 0 80px 0;
}

.features-bg-wrapper {
    background-color: #f5f6f8;
    overflow: hidden;
}

.features-row-divider {
    height: 1px;
    background-color: #dee2e6;
    margin: 0 24px;
}

.feature-card-horizontal {
    height: 100%;
    position: relative;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
}

/* vertical separator: right border on all but last col in each row */
.feature-col:not(:last-child) .feature-card-horizontal {
    border-right: 1px solid #dee2e6;
}

/* on mobile, stack vertically — swap to bottom border */
@media (max-width: 767.98px) {
    /* New approach: do NOT stack. Keep the desktop 3-then-2 layout at every
       width — each card just shrinks. Cards have `col-md-4 col-12` (row 1)
       and `col-md-5 col-12` (row 2). Below Bootstrap's `md` breakpoint the
       `col-12` would force 100% width and stack them, so we override it. */
    .about-features-section .features-bg-wrapper > .row {
        flex-wrap: nowrap !important;
    }
    .about-features-section .col-md-4.feature-col {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
    }
    .about-features-section .col-md-5.feature-col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* Tighten padding and shrink fonts so the smaller cards stay tidy. */
    .about-features-section .feature-card-horizontal {
        padding: clamp(8px, 2.5vw, 24px) !important;
        padding-top: clamp(20px, 8vw, 70px) !important;
    }
    .about-features-section .feature-icon-left {
        margin-right: clamp(4px, 1.5vw, 16px) !important;
    }
    .about-features-section .feature-icon-left img {
        width: clamp(28px, 7vw, 60px) !important;
        height: auto !important;
    }
    .about-features-section .feature-content h4 {
        font-size: clamp(11px, 2.4vw, 18px) !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }
    .about-features-section .feature-content p {
        font-size: clamp(9px, 1.8vw, 14px) !important;
        line-height: 1.3 !important;
    }
}

/* ===== Section Overlap & Shift Fixes ===== */

/* 1. About image: keep visible at all breakpoints (was hidden on tablet) */
@media (max-width: 991px) {
    .about-img-wrapper {
        display: flex !important;
    }
}

/* 2. Mission cards: translateY(-55%) inline pulls them into other sections */
/* The previous per-card translateY(-25%) at <=991px and translateY(-15%) at
   <=767px were stacking on top of the wrapper's translateY(-50px) pull,
   causing cards to cover the "LET'S BUILD…" banner text at medium widths.
   The wrapper's pull is already enough — these per-card transforms are zeroed. */
@media (max-width: 991px) {
    .mission-cards .card {
        transform: none !important;
    }
}
@media (max-width: 767px) {
    .mission-cards .card {
        transform: none !important;
    }
}
@media (max-width: 480px) {
    .mission-cards .card {
        transform: none !important;
        margin-bottom: 15px;
    }
    .mission-section {
        margin-bottom: 0 !important;
        padding-bottom: 20px;
    }
}

/* 3. Service cards: scale proportionally — always 3 per row */
@media (max-width: 1023px) {
    .cards-wrapper {
        gap: 15px;
        overflow: visible;
    }
    .service-card {
        width: calc(33.333% - 10px) !important;
        height: auto !important;
        min-height: 260px;
        flex-shrink: 1;
    }
    /* Direct-child selector only — without `>` this rule was matching the
       icon imgs nested inside .overlay AND .hover-detail too, forcing them
       to min-height: 260px and breaking the hover panel at <=1023px. */
    .service-card > img {
        height: 100%;
        min-height: 260px;
    }
}

/* Testimonial: prevent reviewer row from wrapping */
.testimonial-box .d-flex {
    flex-wrap: nowrap !important;
}

/* 4. Hero: scale card height and nav position proportionally */

/* Card height: fluid between 160px and 320px based on viewport width */
.hero-card {
    height: clamp(220px, 25vw, 320px);
}

/* On screens < 1200px: flow nav-container below the card (no absolute) */
@media (max-width: 1199px) {
    .hero-nav-container {
        position: static;
        padding: 15px 0 10px;
    }
    .hero-nav {
        margin-right: 0;
        padding-right: 0;
    }
    .hero-content { margin-top: 120px; }
}
@media (max-width: 1023px) {
    .hero-content { margin-top: 100px; }
}
@media (max-width: 767px) {
    .hero-content { margin-top: 60px; }
}
@media (max-width: 480px) {
    .hero-content { margin-top: 15px; }
}

/* 5. Why-choose-us: always 4 hexagons per row */
.why-choose-us .col-6 {
    flex: 0 0 25%;
    max-width: 25%;
    width: 25%;
}

/* 8. Trustful Partners: always 4 logos in one row, uniform size regardless of upload dimensions */
.partners-logos {
    flex-wrap: nowrap !important;
    gap: 40px !important;
}
.partners-logos img {
    width: 260px !important;
    height: 160px !important;
    max-width: 260px !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
    object-fit: contain !important;
}

/* 6–7. Maintain desktop column widths for ALL col-md-* at every screen size */
.col-md-1  { flex: 0 0 8.333%;   max-width: 8.333%;  }
.col-md-2  { flex: 0 0 16.666%;  max-width: 16.666%; }
.col-md-3  { flex: 0 0 25%;      max-width: 25%;     }
.col-md-4  { flex: 0 0 33.333%;  max-width: 33.333%; }
.col-md-5  { flex: 0 0 41.666%;  max-width: 41.666%; }
.col-md-6  { flex: 0 0 50%;      max-width: 50%;     }
.col-md-7  { flex: 0 0 58.333%;  max-width: 58.333%; }
.col-md-8  { flex: 0 0 66.666%;  max-width: 66.666%; }
.col-md-9  { flex: 0 0 75%;      max-width: 75%;     }
.col-md-10 { flex: 0 0 83.333%;  max-width: 83.333%; }
.col-md-11 { flex: 0 0 91.666%;  max-width: 91.666%; }

/* ===== Custom Flag Dropdown ===== */
.flag-select { position: relative; display: inline-block; }
.flag-select-btn {
    display: flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid #ced4da; border-radius: 8px; padding: 7px 10px;
    background: #fff; min-width: 88px; white-space: nowrap;
    font-size: .88rem; color: #333; height: 40px;
}
.flag-select-btn:hover { border-color: #999; }
.flag-select-dropdown {
    display: none; position: absolute; top: calc(100% + 4px); left: 0;
    z-index: 9999; background: #fff; border: 1px solid #ddd;
    border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.13); width: 230px;
}
html.lang-ar .flag-select-dropdown {
    left: auto;
    right: 0;
}
.flag-select-dropdown.open { display: block; }
.flag-search {
    width: 100%; border: none; border-bottom: 1px solid #eee;
    padding: 8px 12px; outline: none; border-radius: 8px 8px 0 0; font-size: .85rem;
}
.flag-options-list { max-height: 220px; overflow-y: auto; }
.flag-opt {
    display: flex; align-items: center; padding: 6px 12px; cursor: pointer;
}
.flag-opt:hover { background: #f0f4ff; }
.flag-opt img { width: 28px; height: 20px; object-fit: cover; display: block; }
.flag-sel-img { flex-shrink: 0; width: 22px; height: 16px; object-fit: cover; }

.status-select {
    border: none;
    background: transparent;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 2px 4px;
    outline: none;
    appearance: auto;
}
.status-select.status-opened    { color: #0d6efd; }
.status-select.status-contacted { color: #198754; }
.status-select.status-closed    { color: #fd7e14; }
.status-select.status-cancelled { color: #dc3545; }

/* ============================================================
   MOBILE RESPONSIVE FIXES
   ============================================================ */
@media (max-width: 768px) {

    .wcu-left-deco {
        display: none !important;
    }

    /* Hero: tall enough to contain card + nav inside teal bg */
    /* (legacy rule disabled — superseded by hero responsive rules above) */
    .hero-nav-container {
        position: absolute !important;
        bottom: 14px !important;
        left: 0;
        right: 0;
        padding: 0 16px;
    }
    .hero-nav {
        margin-right: 0 !important;
        padding-right: 0 !important;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .hero-arrow-btn {
        width: 34px !important;
        height: 34px !important;
        flex-shrink: 0;
    }

    /* Hero card: fixed height, side-by-side, properly sized for mobile */
    .hero-card {
        height: 155px !important;
        gap: 8px;
        align-items: stretch !important;
    }
    .hero-card-left {
        flex: 0 0 44% !important;
        max-width: 44% !important;
        height: 90% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    .hero-image-wrapper {
        height: 100% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
    }
    .hero-card-right {
        flex: 0 0 52% !important;
        max-width: 52% !important;
        padding: 8px 10px !important;
        justify-content: center !important;
        overflow: hidden !important;
        height: 75% !important;
    }
    .hero-card-right h2 {
        font-size: 0.65rem !important;
        line-height: 1.3;
        margin-bottom: 5px !important;
    }
    .hero-card-right img[width="150"] {
        width: 55px !important;
        margin-bottom: 3px !important;
    }
    .hero-card-right .consultant-btn {
        font-size: 0.72rem !important;
        padding: 6px 10px !important;
    }
    .hero-services-label {
        font-size: 0.72rem !important;
        padding: 8px 10px !important;
        white-space: nowrap;
    }
    .hero-services-arrow {
        width: 36px !important;
        font-size: 0.85rem !important;
    }
    .hero-services-btn {
        width: 90% !important;
    }

    /* Services page: remove large padding-top on text column */
    .services .col-md-6[style] {
        padding-top: 20px !important;
        min-height: unset !important;
    }
    /* Services page: image above text on mobile (all sections) */
    .services .row .col-md-6:has(img),
    .services .row .col-md-4:has(img),
    .terms-page-img .row .col-md-6:has(img) {
        order: -1 !important;
    }

    /* Hero inner: auto height on mobile so text doesn't overflow */
    .hero-inner,
    .hero-inner[style] {
        min-height: unset !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .hero-inner .container {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .hero-inner h2 {
        margin-top: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
        padding: 0 10px !important;
    }

    /* About section: remove large negative margin gap */
    .about, .terms, .services, .about-section {
        margin-top: 0 !important;
        padding-top: 30px !important;
    }
    .about {
        padding: 20px 0 !important;
    }

    /* Reduce large text in about section */
    .about p, .about-section p {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Why Choose Us: 2 per row instead of 4 */
    .why-choose-us .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    .feature-title {
        font-size: 0.75rem;
    }

    /* Mission cards on mobile: subtle overlap only — don't use the desktop
       translateY(-50%) because mobile cards are tall (text wraps), so 50%
       of their height covers the banner heading. Use a small fixed pull
       so cards start just AFTER the "LET'S BUILD..." text, overlapping
       only the bottom strip of the banner image. */
    .mission-cards-wrap {
        transform: none !important;
        margin-top: -60px !important;
        margin-bottom: 20px !important;
    }
    .mission-section-about {
        padding-bottom: 30px;
    }
    .mission-cards .card {
        height: auto !important;
        min-height: 150px;
        margin-bottom: 15px;
        padding: 1rem !important;
    }
    .mission-cards .card h5 { font-size: 0.9rem; }
    .mission-cards .card p  { font-size: 0.82rem; }

    /* Services section: reduce gap */
    .services-section { padding: 30px 0 !important; }
    .section-header   { margin-bottom: 15px !important; }
    .section-header h2 { font-size: 1.3rem; }
    .section-header p  { font-size: 0.9rem; }

    /* Partners logos: keep one row, horizontal swipe on mobile */
    .partners-logos {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 24px !important;
        overflow-x: auto !important;
    }
    .partners-logos img {
        width: 180px !important;
        max-width: 180px !important;
        min-width: 180px !important;
        height: 110px !important;
        flex: 0 0 auto !important;
        object-fit: contain !important;
    }

    /* Footer: stack columns */
    footer {
        padding: 30px 0 !important;
    }

    /* col-md: stack on mobile */
    .col-md-1, .col-md-2, .col-md-3, .col-md-4,
    .col-md-5, .col-md-6, .col-md-7, .col-md-8,
    .col-md-9, .col-md-10, .col-md-11 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Testimonial: allow wrapping */
    .testimonial-box .d-flex {
        flex-wrap: nowrap !important;
    }

    /* Industry page: remove negative margin so section doesn't overlap hero */
    .industry-section {
        margin-top: 0 !important;
        padding-top: 20px !important;
    }
    .industry-title-col {
        margin-top: 0 !important;
    }

    /* Arabic mode: fix custom-title::after overflow on narrow mobile columns */
    html.lang-ar .custom-title::after {
        right: 80px !important;
    }
    html.lang-ar .custom-title::before {
        width: 80px !important;
    }
}