/*
Theme Name: B2B Fleet
Theme URI: https://b2bfleetsa.com
Author: B2B Fleet
Description: قالب B2B Fleet لتأجير المركبات التجارية — عربي/إنجليزي، أسطول وآراء وأسئلة شائعة قابلة للتعديل من لوحة التحكم.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: b2bfleet
*/

    /* ══════════════════════════════════════════
   TOKENS
══════════════════════════════════════════ */
    :root {
      --navy: #061F33;
      --navy-mid: #0A2740;
      --navy-light: #0D2F4D;
      --blue: #3B82F6;
      --blue-dim: rgba(59, 130, 246, .12);
      --blue-bdr: rgba(59, 130, 246, .25);
      --orange: #F27A02;
      --orange-dim: rgba(242, 122, 2, .10);
      --white: #FFFFFF;
      --gray: #7A8FA6;
      --body-txt: #A8BCCC;
      --radius: 12px;
    }

    /* ══════════════════════════════════════════
   RESET / BASE
══════════════════════════════════════════ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px
    }

    body {
      font-family: 'Noto Kufi Arabic', sans-serif;
      background: var(--navy);
      color: var(--white);
      overflow-x: hidden;
      line-height: 1.7;
      direction: rtl;
    }

    body.en {
      font-family: 'Barlow', sans-serif;
      direction: ltr
    }

    img {
      display: block;
      max-width: 100%
    }

    a {
      text-decoration: none;
      color: inherit
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px
    }

    /* ══════════════════════════════════════════
   LANGUAGE HELPERS
══════════════════════════════════════════ */
    .ar-b {
      display: block
    }

    .en-b {
      display: none
    }

    .ar-i {
      display: inline
    }

    .en-i {
      display: none
    }

    body.en .ar-b {
      display: none
    }

    body.en .en-b {
      display: block
    }

    body.en .ar-i {
      display: none
    }

    body.en .en-i {
      display: inline
    }

    /* ══════════════════════════════════════════
   SECTION TYPOGRAPHY
══════════════════════════════════════════ */
    .sec-label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--orange);
      letter-spacing: .5px;
      margin-bottom: 10px;
    }

    body.en .sec-label {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 3px;
      text-transform: uppercase;
    }

    .sec-title {
      font-size: clamp(28px, 5vw, 48px);
      font-weight: 800;
      line-height: 1.15;
      color: var(--white);
    }

    body.en .sec-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(30px, 5vw, 52px);
      text-transform: uppercase;
      line-height: 1.05;
    }

    .blue-line {
      width: 44px;
      height: 3px;
      background: var(--blue);
      margin: 14px 0 26px;
    }

    body.en .blue-line {
      margin-right: 0
    }

    /* ══════════════════════════════════════════
   NAVBAR  (sticky, hide-on-scroll-down)
══════════════════════════════════════════ */
    #nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 10px 0;
      transition: transform .35s ease, background .35s ease, padding .3s ease, box-shadow .3s ease;
    }

    #nav.bg {
      background: rgba(6, 31, 51, .97);
      backdrop-filter: blur(14px);
      box-shadow: 0 2px 20px rgba(0, 0, 0, .35);
      border-bottom: 1px solid rgba(59, 130, 246, .15);
    }

    #nav.hide {
      transform: translateY(-100%)
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .nav-logo img {
      height: 44px;
      width: auto;
      border-radius: 6px
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 24px;
      list-style: none;
    }

    .nav-links a {
      font-size: 13px;
      font-weight: 500;
      color: var(--body-txt);
      transition: color .2s;
      white-space: nowrap;
    }

    body.en .nav-links a {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .nav-links a:hover {
      color: var(--blue)
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .lang-btn {
      font-size: 12px;
      font-weight: 700;
      background: transparent;
      border: 1px solid rgba(59, 130, 246, .5);
      color: var(--blue);
      padding: 6px 14px;
      cursor: pointer;
      border-radius: 4px;
      transition: all .2s;
      white-space: nowrap;
    }

    .lang-btn:hover {
      background: var(--blue);
      color: var(--white)
    }

    .nav-cta {
      font-size: 13px;
      font-weight: 700;
      background: var(--orange);
      color: var(--white);
      padding: 9px 20px;
      border-radius: 6px;
      transition: background .2s;
      white-space: nowrap;
    }

    body.en .nav-cta {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .nav-cta:hover {
      background: #D46A00
    }

    /* hamburger */
    .ham {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
    }

    .ham span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--white);
      transition: all .3s;
      border-radius: 2px
    }

    .ham.open span:nth-child(1) {
      transform: translateY(7px) rotate(45deg)
    }

    .ham.open span:nth-child(2) {
      opacity: 0
    }

    .ham.open span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg)
    }

    /* mobile drawer */
    .mob-drawer {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--navy);
      z-index: 999;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 24px;
      padding: 20px;
    }

    .mob-drawer.open {
      display: flex
    }

    .mob-drawer a {
      font-size: 24px;
      font-weight: 700;
      color: var(--white);
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
      width: 100%;
      text-align: center;
      transition: color .2s;
    }

    body.en .mob-drawer a {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 28px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .mob-drawer a:hover {
      color: var(--blue)
    }

    .mob-close {
      position: absolute;
      top: 18px;
      background: none;
      border: none;
      color: var(--white);
      font-size: 28px;
      cursor: pointer;
    }

    body:not(.en) .mob-close {
      left: 20px
    }

    body.en .mob-close {
      right: 20px
    }

    .mob-cta {
      margin-top: 8px;
      font-size: 15px;
      font-weight: 700;
      background: var(--orange);
      color: var(--white);
      padding: 14px 40px;
      border-radius: 8px;
    }

    body.en .mob-cta {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    /* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
    .hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      overflow: hidden;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      background: center 40%/cover no-repeat;
      transform: scale(1.06);
      animation: hzoom 7s ease-out forwards;
    }

    @keyframes hzoom {
      to {
        transform: scale(1)
      }
    }

    .hero-ov {
      position: absolute;
      inset: 0;
    }

    body:not(.en) .hero-ov {
      background: linear-gradient(to left, rgba(6, 31, 51, .15) 0%, rgba(6, 31, 51, .75) 45%, rgba(6, 31, 51, .95) 100%);
    }

    body.en .hero-ov {
      background: linear-gradient(to right, rgba(6, 31, 51, .15) 0%, rgba(6, 31, 51, .75) 45%, rgba(6, 31, 51, .95) 100%);
    }

    .hero > .container {
      width: 100%;
      position: relative;
      z-index: 2;
    }

    .hero-content {
      position: relative;
      z-index: 2;
      padding: 120px 0 72px;
      max-width: 640px;
    }

    body:not(.en) .hero-content {
      margin-right: 0;
      margin-left: auto
    }

    body.en .hero-content {
      margin-left: 0;
      margin-right: auto
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--orange-dim);
      border: 1px solid rgba(242, 122, 2, .35);
      padding: 5px 14px;
      border-radius: 20px;
      margin-bottom: 20px;
      animation: fadeUp .7s .2s both;
    }

    .hero-badge::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--orange);
      animation: pulse 2s infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
        transform: scale(1)
      }

      50% {
        opacity: .4;
        transform: scale(1.6)
      }
    }

    .hero-badge span {
      font-size: 11px;
      font-weight: 700;
      color: var(--orange);
    }

    body.en .hero-badge span {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 3px;
      text-transform: uppercase;
    }

    .hero-title {
      font-size: clamp(40px, 7vw, 78px);
      font-weight: 800;
      line-height: 1.15;
      color: var(--white);
      animation: fadeUp .7s .35s both;
    }

    body.en .hero-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: clamp(46px, 8vw, 90px);
      text-transform: uppercase;
      line-height: 1.0;
    }

    .hero-title .hl {
      color: var(--blue)
    }

    .hero-sub {
      font-size: 15px;
      font-weight: 300;
      color: var(--body-txt);
      margin-top: 16px;
      line-height: 1.8;
      animation: fadeUp .7s .5s both;
    }

    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 18px;
      animation: fadeUp .7s .6s both;
    }

    .htag {
      font-size: 11px;
      font-weight: 600;
      color: var(--orange);
      border: 1px solid rgba(242, 122, 2, .4);
      padding: 4px 12px;
      border-radius: 4px;
    }

    body.en .htag {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .hero-btns {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
      animation: fadeUp .7s .75s both;
    }

    .btn-primary {
      font-size: 14px;
      font-weight: 700;
      background: var(--blue);
      color: var(--white);
      padding: 13px 28px;
      border-radius: 8px;
      transition: background .2s, transform .15s;
    }

    body.en .btn-primary {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .btn-primary:hover {
      background: #2563D6;
      transform: translateY(-2px)
    }

    .btn-ghost {
      font-size: 14px;
      font-weight: 700;
      background: transparent;
      color: var(--white);
      padding: 13px 28px;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, .28);
      transition: all .2s;
    }

    body.en .btn-ghost {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .btn-ghost:hover {
      border-color: var(--blue);
      color: var(--blue)
    }

    .hero-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 32px;
      margin-top: 48px;
      padding-top: 32px;
      border-top: 1px solid rgba(255, 255, 255, .1);
      animation: fadeUp .7s .9s both;
    }

    .hstat-n {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 42px;
      font-weight: 800;
      color: var(--orange);
      line-height: 1;
    }

    .hstat-l {
      font-size: 12px;
      color: var(--gray);
      margin-top: 4px;
    }

    body.en .hstat-l {
      font-family: 'Barlow Condensed', sans-serif;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(22px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    /* ══════════════════════════════════════════
   ABOUT
══════════════════════════════════════════ */
    .about {
      padding: 88px 0;
      background: var(--navy-mid)
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }

    body.en .about-grid {
      direction: ltr
    }

    .about-img {
      position: relative
    }

    .about-img img {
      width: 100%;
      height: 440px;
      object-fit: cover;
      border-radius: var(--radius)
    }

    .about-acc {
      position: absolute;
      bottom: -12px;
      width: 90px;
      height: 90px;
      border: 3px solid var(--orange);
      border-radius: 4px;
      z-index: -1;
    }

    body:not(.en) .about-acc {
      left: -12px
    }

    body.en .about-acc {
      right: -12px
    }

    .about-body p {
      font-size: 15px;
      color: var(--body-txt);
      line-height: 1.85;
      margin-bottom: 16px;
    }

    .about-pills {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 24px;
    }

    .apill {
      padding: 12px 14px;
      border-radius: 8px;
      border: 1px solid rgba(59, 130, 246, .2);
      font-size: 13px;
      font-weight: 600;
      color: var(--white);
      line-height: 1.4;
    }

    body:not(.en) .apill {
      border-right: 3px solid var(--blue)
    }

    body.en .apill {
      border-left: 3px solid var(--blue)
    }

    /* ══════════════════════════════════════════
   FLEET
══════════════════════════════════════════ */
    .fleet {
      padding: 88px 0;
      background: var(--navy)
    }

    .fleet-tabs {
      display: flex;
      gap: 0;
      margin: 32px 0 40px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .ftab {
      font-size: 13px;
      font-weight: 700;
      padding: 11px 22px;
      background: none;
      border: none;
      color: var(--gray);
      cursor: pointer;
      border-bottom: 3px solid transparent;
      margin-bottom: -1px;
      transition: all .2s;
      white-space: nowrap;
    }

    body.en .ftab {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .ftab.active {
      color: var(--blue);
      border-bottom-color: var(--blue)
    }

    .ftab:hover:not(.active) {
      color: var(--white)
    }

    .fleet-panel {
      display: none
    }

    .fleet-panel.active {
      display: block
    }

    .fleet-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .vcard {
      background: var(--navy-mid);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: var(--radius);
      overflow: hidden;
      transition: transform .3s, border-color .3s, box-shadow .3s;
    }

    .vcard:hover {
      transform: translateY(-5px);
      border-color: rgba(59, 130, 246, .35);
      box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
    }

    .vimg {
      width: 100%;
      height: 190px;
      overflow: hidden;
      background: #071A2A
    }

    .vimg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s
    }

    .vcard:hover .vimg img {
      transform: scale(1.05)
    }

    .vinfo {
      padding: 16px;
      border-top: 2px solid transparent;
      transition: border-color .3s;
    }

    .vcard:hover .vinfo {
      border-top-color: var(--blue)
    }

    .vname {
      font-size: 16px;
      font-weight: 700;
      color: var(--white);
      line-height: 1.2;
    }

    body.en .vname {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 19px;
      text-transform: uppercase;
    }

    .vname-en {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      color: var(--gray);
      margin-top: 2px;
      letter-spacing: .5px;
    }

    body.en .vname-en {
      display: none
    }

    .vtag {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      margin-top: 8px;
      padding: 3px 10px;
      border-radius: 20px;
    }

    body.en .vtag {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .vtag.cold {
      background: var(--blue-dim);
      color: #60a5fa;
      border: 1px solid rgba(59, 130, 246, .2)
    }

    .vtag.dry {
      background: var(--orange-dim);
      color: var(--orange);
      border: 1px solid rgba(242, 122, 2, .2)
    }

    .vbtn {
      display: block;
      width: 100%;
      margin-top: 12px;
      font-size: 12px;
      font-weight: 700;
      background: transparent;
      border: 1px solid rgba(59, 130, 246, .3);
      color: var(--blue);
      padding: 9px;
      border-radius: 6px;
      cursor: pointer;
      transition: all .2s;
      text-align: center;
    }

    body.en .vbtn {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .vbtn:hover {
      background: var(--blue);
      color: var(--white)
    }

    /* ══════════════════════════════════════════
   WHY CHOOSE
══════════════════════════════════════════ */
    .why {
      padding: 88px 0;
      background: var(--navy-mid)
    }

    .why-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }

    body.en .why-grid {
      direction: ltr
    }

    .why-img img {
      width: 100%;
      height: 430px;
      object-fit: cover;
      border-radius: var(--radius)
    }

    .adv-list {
      margin-top: 32px
    }

    .adv-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .adv-item:last-child {
      border-bottom: none
    }

    .adv-ico {
      width: 42px;
      height: 42px;
      flex-shrink: 0;
      background: var(--blue-dim);
      border: 1px solid var(--blue-bdr);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .adv-ico svg {
      width: 20px;
      height: 20px;
      stroke: var(--blue);
      stroke-width: 1.8;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round
    }

    .adv-txt h4 {
      font-size: 14px;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 3px;
      line-height: 1.3;
    }

    body.en .adv-txt h4 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .adv-txt p {
      font-size: 13px;
      color: var(--gray);
      line-height: 1.65
    }

    /* ══════════════════════════════════════════
   STATS BAND
══════════════════════════════════════════ */
    .stats-band {
      padding: 52px 0;
      background: linear-gradient(135deg, var(--navy-light), var(--navy-mid));
      border-top: 1px solid rgba(242, 122, 2, .18);
      border-bottom: 1px solid rgba(242, 122, 2, .18);
    }

    .stats-inner {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      text-align: center;
    }

    .sblock {
      position: relative
    }

    .sblock:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 20%;
      bottom: 20%;
      width: 1px;
      background: rgba(242, 122, 2, .2);
    }

    body:not(.en) .sblock:not(:last-child)::after {
      left: 0
    }

    body.en .sblock:not(:last-child)::after {
      right: 0
    }

    .snum {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 58px;
      font-weight: 800;
      color: var(--orange);
      line-height: 1;
    }

    .sdesc {
      font-size: 13px;
      color: var(--gray);
      margin-top: 6px
    }

    body.en .sdesc {
      font-family: 'Barlow Condensed', sans-serif;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    /* ══════════════════════════════════════════
   INDUSTRIES
══════════════════════════════════════════ */
    .industries {
      padding: 88px 0;
      background: var(--navy)
    }

    .ind-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 40px;
    }

    .icard {
      padding: 26px 14px;
      border: 1px solid rgba(255, 255, 255, .05);
      background: var(--navy-mid);
      border-radius: var(--radius);
      text-align: center;
      transition: all .3s;
      cursor: default;
    }

    .icard:hover {
      border-color: rgba(59, 130, 246, .3);
      background: var(--navy-light);
      transform: translateY(-4px);
    }

    .icard:hover .isvg {
      stroke: var(--orange)
    }

    .isvg {
      width: 34px;
      height: 34px;
      stroke: var(--blue);
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      margin: 0 auto 12px;
      display: block;
      transition: stroke .3s;
    }

    .iname {
      font-size: 13px;
      font-weight: 700;
      color: var(--white);
      line-height: 1.3;
    }

    body.en .iname {
      font-family: 'Barlow Condensed', sans-serif;
      text-transform: uppercase;
      letter-spacing: .5px;
      font-size: 12px;
    }

    .iname-sub {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 10px;
      color: var(--gray);
      margin-top: 3px;
      letter-spacing: .5px;
    }

    body.en .iname-sub {
      display: none
    }

    /* ══════════════════════════════════════════
   TESTIMONIALS  INFINITE MARQUEE
══════════════════════════════════════════ */
    .testimonials {
      padding: 80px 0;
      background: var(--navy-mid);
      overflow: hidden;
    }

    .tgrid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 20px;
      margin-top: 40px;
    }

    .tcard {
      background: var(--navy-light);
      border: 1px solid rgba(59, 130, 246, .15);
      border-top: 3px solid var(--blue);
      border-radius: 16px;
      padding: 26px;
      display: flex;
      flex-direction: column;
    }

    .tq {
      font-size: 14px;
      color: var(--body-txt);
      line-height: 1.85;
      margin-bottom: 20px;
      position: relative;
      padding-top: 30px;
      flex: 1;
    }

    .tq::before {
      content: '\201C';
      font-family: 'Georgia', serif;
      font-size: 52px;
      color: var(--blue);
      opacity: .35;
      position: absolute;
      top: -6px;
      line-height: 1;
    }

    body:not(.en) .tq::before {
      right: 0;
      left: auto
    }

    body.en .tq::before {
      left: 0;
      right: auto
    }

    .tauthor {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, .07);
    }

    .tav {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      flex-shrink: 0;
      background: var(--blue-dim);
      border: 1px solid var(--blue-bdr);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 14px;
      font-weight: 800;
      color: var(--blue);
    }

    .tname {
      font-size: 13px;
      font-weight: 700;
      color: var(--white)
    }

    .tstars {
      color: var(--orange);
      font-size: 11px;
      letter-spacing: 1px;
      margin-top: 2px
    }

    /* ══════════════════════════════════════════
   QUOTE FORM
══════════════════════════════════════════ */
    .quote {
      padding: 88px 0;
      background: var(--navy)
    }

    .quote-grid {
      display: grid;
      grid-template-columns: 1fr 1.35fr;
      gap: 64px;
      align-items: start;
    }

    body.en .quote-grid {
      direction: ltr
    }

    .qleft p {
      font-size: 15px;
      color: var(--body-txt);
      line-height: 1.8;
      margin-bottom: 16px
    }

    .qci {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px
    }

    .qci-ico {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      background: var(--blue-dim);
      border: 1px solid var(--blue-bdr);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
    }

    .qci a {
      font-size: 14px;
      color: var(--body-txt);
      display: block;
      transition: color .2s;
    }

    .qci a:hover {
      color: var(--blue)
    }

    .qform {
      background: var(--navy-mid);
      padding: 32px;
      border: 1px solid rgba(255, 255, 255, .06);
      border-top: 3px solid var(--blue);
      border-radius: var(--radius);
    }

    .frow {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
    }

    .fg {
      margin-bottom: 12px
    }

    .fg label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--gray);
      margin-bottom: 6px;
    }

    body.en .fg label {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .fg input,
    .fg select,
    .fg textarea {
      width: 100%;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .1);
      color: var(--white);
      padding: 10px 13px;
      border-radius: 6px;
      font-size: 14px;
      outline: none;
      transition: border-color .2s;
      -webkit-appearance: none;
      font-family: inherit;
    }

    .fg input:focus,
    .fg select:focus,
    .fg textarea:focus {
      border-color: var(--blue)
    }

    .fg select option {
      background: var(--navy-mid)
    }

    .fg textarea {
      resize: vertical;
      min-height: 88px
    }

    .fsub {
      width: 100%;
      font-size: 15px;
      font-weight: 700;
      background: var(--blue);
      color: var(--white);
      border: none;
      padding: 14px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .2s, transform .15s;
      margin-top: 4px;
      font-family: inherit;
    }

    body.en .fsub {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .fsub:hover {
      background: #2563D6;
      transform: translateY(-2px)
    }

    .fnote {
      font-size: 12px;
      color: var(--gray);
      text-align: center;
      margin-top: 8px
    }

    /* ══════════════════════════════════════════
   CONTACT
══════════════════════════════════════════ */
    .contact {
      padding: 80px 0;
      background: var(--navy-mid)
    }

    .cg {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 40px
    }

    .ccard {
      padding: 26px;
      border-radius: var(--radius);
      border: 1px solid rgba(255, 255, 255, .07);
      background: var(--navy);
    }

    .ccard-ico {
      font-size: 22px;
      color: var(--blue);
      margin-bottom: 12px
    }

    .ccard h4 {
      font-size: 11px;
      font-weight: 700;
      color: var(--gray);
      margin-bottom: 10px;
    }

    body.en .ccard h4 {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .ccard a,
    .ccard p {
      display: block;
      font-size: 14px;
      color: var(--white);
      margin-bottom: 4px;
      line-height: 1.6;
      transition: color .2s;
    }

    .ccard a:hover {
      color: var(--blue)
    }

    /* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
    footer {
      background: #040F1A;
      padding: 40px 0 18px;
      border-top: 1px solid rgba(59, 130, 246, .12);
    }

    .footer-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 36px;
      flex-wrap: wrap;
      margin-bottom: 32px;
    }

    .f-logo img {
      height: 40px;
      width: auto;
      border-radius: 6px;
      margin-bottom: 10px
    }

    .f-tagline {
      font-size: 12px;
      color: var(--gray);
      max-width: 200px;
      line-height: 1.65
    }

    .f-links h5 {
      font-size: 10px;
      font-weight: 700;
      color: var(--orange);
      margin-bottom: 12px;
    }

    body.en .f-links h5 {
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    .f-links ul {
      list-style: none
    }

    .f-links li {
      margin-bottom: 7px
    }

    .f-links a {
      font-size: 13px;
      color: var(--gray);
      transition: color .2s
    }

    .f-links a:hover {
      color: var(--blue)
    }

    .footer-bot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 18px;
      border-top: 1px solid rgba(255, 255, 255, .05);
      flex-wrap: wrap;
      gap: 8px;
    }

    .f-copy {
      font-size: 11px;
      color: var(--gray)
    }

    .f-line {
      width: 34px;
      height: 2px;
      background: var(--orange);
      opacity: .55;
      border-radius: 2px
    }

    /* ══════════════════════════════════════════
   WHATSAPP FLOAT
══════════════════════════════════════════ */
    .wa {
      position: fixed;
      bottom: 24px;
      z-index: 998;
      width: 52px;
      height: 52px;
      background: #25D366;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 18px rgba(37, 211, 102, .35);
      transition: transform .2s, box-shadow .2s;
    }

    body:not(.en) .wa {
      left: 24px
    }

    body.en .wa {
      right: 24px
    }

    .wa:hover {
      transform: scale(1.1);
      box-shadow: 0 6px 26px rgba(37, 211, 102, .5)
    }

    .wa svg {
      width: 26px;
      height: 26px;
      fill: white
    }

    /* ══════════════════════════════════════════
   SCROLL REVEAL
══════════════════════════════════════════ */
    .js .rv {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity .65s, transform .65s
    }

    .js .rv.in {
      opacity: 1;
      transform: translateY(0)
    }

    .d1 {
      transition-delay: .1s
    }

    .d2 {
      transition-delay: .2s
    }

    .d3 {
      transition-delay: .3s
    }

    .d4 {
      transition-delay: .4s
    }

    /* ══════════════════════════════════════════
   RESPONSIVE  TABLET
══════════════════════════════════════════ */
    @media(max-width:1024px) {
      .fleet-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .ind-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .why-grid {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .why-img {
        order: -1
      }

      .why-img img {
        height: 280px
      }
    }

    /* ══════════════════════════════════════════
   RESPONSIVE  MOBILE FIRST
══════════════════════════════════════════ */
    @media(max-width:768px) {

      /* nav */
      .nav-links,
      .nav-cta {
        display: none
      }

      .ham {
        display: flex
      }

      .nav-logo img {
        height: 38px
      }

      /* hero */
      .hero-content {
        padding: 100px 0 60px;
        max-width: 100%
      }

      .hero-title {
        font-size: clamp(34px, 9vw, 56px)
      }

      .hero-btns {
        flex-direction: column
      }

      .btn-primary,
      .btn-ghost {
        width: 100%;
        text-align: center;
        padding: 14px
      }

      .hero-stats {
        gap: 20px
      }

      .hstat-n {
        font-size: 34px
      }

      /* about */
      .about-grid {
        grid-template-columns: 1fr;
        gap: 32px
      }

      .about-img img {
        height: 240px
      }

      .about-pills {
        grid-template-columns: 1fr
      }

      /* fleet */
      .fleet-grid {
        grid-template-columns: 1fr
      }

      /* why */
      .why-grid {
        grid-template-columns: 1fr;
        gap: 32px
      }

      /* stats */
      .stats-inner {
        grid-template-columns: 1fr;
        gap: 24px
      }

      .sblock:not(:last-child)::after {
        display: none
      }

      .snum {
        font-size: 48px
      }

      /* industries */
      .ind-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      /* testimonials */
      .tgrid {
        grid-template-columns: 1fr
      }

      /* quote */
      .quote-grid {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .frow {
        grid-template-columns: 1fr
      }

      .qform {
        padding: 20px
      }

      /* contact */
      .cg {
        grid-template-columns: 1fr
      }

      /* footer */
      .footer-top {
        flex-direction: column;
        gap: 28px
      }

      .footer-bot {
        flex-direction: column;
        text-align: center
      }
    }

    @media(max-width:400px) {
      .ind-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .hero-title {
        font-size: 32px
      }
    }

    /* REDUCED MOTION */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
      .js .rv { opacity: 1; transform: none }
    }

    /* FAQ */
    .faq{padding:88px 0;background:var(--navy)}
    .faq-list{max-width:900px;margin-top:8px;display:flex;flex-direction:column;gap:12px}
    .faq-item{background:var(--navy-mid);border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);transition:border-color .2s}
    .faq-item[open]{border-color:var(--blue-bdr)}
    .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-size:15px;font-weight:700;color:var(--white)}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{content:'+';flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--blue-dim);border:1px solid var(--blue-bdr);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;line-height:1;transition:transform .25s}
    .faq-item[open] summary::after{transform:rotate(45deg)}
    .faq-item summary:hover{color:var(--blue)}
    .faq-item p{padding:0 22px 20px;font-size:14px;color:var(--body-txt);line-height:1.85}
    .faq-link{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
    body.en .faq-item summary{font-family:'Barlow',sans-serif;font-weight:600}
    @media(max-width:768px){.faq{padding:64px 0}.faq-item summary{padding:16px 18px;font-size:14px}.faq-item p{padding:0 18px 18px}}

    /* QUOTE SECTION (card style) */
    .quote{background:radial-gradient(ellipse at 80% 0%,rgba(59,130,246,.10),transparent 60%),linear-gradient(180deg,var(--navy) 0%,#0B2A4A 100%)}
    .quote-grid{grid-template-columns:1.1fr 1fr;align-items:center}
    .qbadge{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--orange);background:var(--orange-dim);border:1px solid rgba(242,122,2,.4);padding:8px 18px;border-radius:30px;margin-bottom:22px}
    .qtitle{font-size:clamp(40px,6vw,72px);font-weight:800;line-height:1.2;color:var(--white)}
    body.en .qtitle{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;line-height:1.02}
    .hl-o{color:var(--orange)}
    .qlead{font-size:18px;color:var(--body-txt);line-height:1.9;margin-top:18px}
    .qpills{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
    .qpill{font-size:14px;font-weight:600;color:var(--white);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.18);padding:8px 16px;border-radius:30px}
    .qbtns{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
    .qbtn-wa,.qbtn-ol{font-size:18px;font-weight:800;padding:16px 30px;border-radius:12px;transition:transform .15s,background .2s,border-color .2s}
    .qbtn-wa{background:#22B455;color:#fff;box-shadow:0 10px 26px rgba(34,180,85,.3)}
    .qbtn-wa:hover{background:#1E9E4B;transform:translateY(-2px)}
    .qbtn-ol{border:1.5px solid rgba(255,255,255,.5);color:var(--white)}
    .qbtn-ol:hover{border-color:var(--white);transform:translateY(-2px)}
    body.en .qbtn-wa,body.en .qbtn-ol,body.en .qpill,body.en .qbadge{font-family:'Barlow Condensed',sans-serif;letter-spacing:1px}

    .qcard-wrap{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:14px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
    .qcard{position:relative;background:#fff;border-radius:18px;overflow:hidden;padding:42px 28px 28px}
    .qcard::before{content:'';position:absolute;top:0;left:0;right:0;height:8px;background:repeating-linear-gradient(-45deg,var(--orange) 0 14px,var(--navy) 14px 28px)}
    .qcard h3{font-size:30px;font-weight:800;color:var(--navy);text-align:center;line-height:1.3}
    body.en .qcard h3{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase}
    .qsub{font-size:14px;color:#64748B;text-align:center;margin:6px 0 26px}
    .qgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .qgrid .full{grid-column:1/-1}
    .qcard input,.qcard select,.qcard textarea{width:100%;background:#F8FAFC;border:1px solid #D5DEE8;border-radius:12px;padding:16px;font-size:15px;color:var(--navy);font-family:inherit;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
    .qcard input::placeholder,.qcard textarea::placeholder{color:#94A3B8}
    .qcard input:focus,.qcard select:focus,.qcard textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
    .qcard select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23061F33' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat}
    body:not(.en) .qcard select{background-position:left 14px center;padding-left:36px}
    body.en .qcard select{background-position:right 14px center;padding-right:36px}
    .qcard select option{background:#fff;color:var(--navy)}
    .qcard textarea{min-height:92px;resize:vertical}
    .qbtn{width:100%;margin-top:14px;font-size:19px;font-weight:800;font-family:inherit;color:#fff;background:#22B455;border:none;border-radius:12px;padding:16px;cursor:pointer;box-shadow:0 10px 24px rgba(34,180,85,.3);transition:background .2s,transform .15s}
    .qbtn:hover{background:#1E9E4B;transform:translateY(-2px)}
    body.en .qbtn{font-family:'Barlow Condensed',sans-serif;letter-spacing:1.5px;text-transform:uppercase}
    @media(max-width:1024px){.quote-grid{grid-template-columns:1fr;gap:40px}}
    @media(max-width:768px){.qbadge{font-size:12px}.qcard-wrap{padding:8px;border-radius:22px}.qcard{padding:36px 18px 20px}.qcard h3{font-size:24px}.qlead{font-size:16px}.qbtn-wa,.qbtn-ol{flex:1;text-align:center;font-size:16px;padding:14px 18px}}
    @media(max-width:480px){.qgrid{grid-template-columns:1fr}}

    /* PHONE NUMBERS: always LTR so digits never reverse in Arabic */
    a[href^="tel:"] {
      direction: ltr;
      unicode-bidi: isolate;
    }

    body:not(.en) .qci a[href^="tel:"],
    body:not(.en) .ccard a[href^="tel:"],
    body:not(.en) .f-links a[href^="tel:"] {
      text-align: right
    }

    /* CONTACT PAGE OVERLAY */
    .contact-page{display:none;position:fixed;inset:0;z-index:2000;background:var(--navy);overflow-y:auto;}
    .contact-page.open{display:block}
    .contact-page-inner{min-height:100vh;padding:72px 0 60px;}
    .cp-header{margin-bottom:0}
    .contact-page-close{position:fixed;top:20px;background:none;border:none;color:var(--white);font-size:28px;cursor:pointer;z-index:2001;transition:color .2s;}
    body:not(.en) .contact-page-close{left:32px}
    body.en .contact-page-close{right:32px}
    .contact-page-close:hover{color:var(--blue)}
    .cp-header{text-align:center;margin-bottom:48px;padding-bottom:32px;border-bottom:1px solid rgba(59,130,246,.15);}
    .cp-layout{display:grid;grid-template-columns:1fr 1px 1.4fr;gap:48px;align-items:start;margin-top:48px;max-width:1100px;margin-left:auto;margin-right:auto;}
    body.en .cp-layout{direction:ltr}
    .cp-info p{font-size:15px;color:var(--body-txt);line-height:1.8;margin-bottom:20px;}
    .cp-divider{width:1px;background:rgba(59,130,246,.15);align-self:stretch;}
    @media(max-width:1024px){.cp-layout{grid-template-columns:1fr;gap:36px}.cp-divider{display:none}}
    @media(max-width:768px){.cp-layout{grid-template-columns:1fr}.cp-divider{display:none}}
    /* mobile: form first, intro + contact info below it */
    @media(max-width:1024px){.contact-page .container{display:flex;flex-direction:column}.cp-layout{display:contents}.cp-form{order:1}.cp-header{order:2;margin:48px 0 24px;padding:32px 0 0;border-bottom:none;border-top:1px solid rgba(59,130,246,.15)}.cp-info{order:3}.contact-page-inner{padding-top:64px}}
  
    /* WP admin bar offset */
    body.admin-bar #nav{top:32px}
    @media(max-width:782px){body.admin-bar #nav{top:46px}}
    /* inner pages */
    .page-wrap{padding:140px 0 80px;min-height:70vh}
    .page-wrap h1{font-size:clamp(28px,5vw,44px);font-weight:800;margin-bottom:24px}
    .entry{color:var(--body-txt);font-size:16px;line-height:1.9}
    .entry p,.entry ul,.entry ol{margin-bottom:16px}
    .entry a{color:var(--blue);text-decoration:underline}
    .entry img{border-radius:var(--radius);margin:16px 0;height:auto}
    .post-list article{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.07)}
    .post-list h2{font-size:22px;margin-bottom:8px}
    .post-list h2 a:hover{color:var(--blue)}