/* ==========================================================================
   Gulf Pipe Supply & Services — RTL overrides (Arabic pages only)

   Load order on Arabic pages:
     bootstrap.rtl.min.css → bootstrap-icons → style.css → responsive.css
     → animations.css → rtl.css

   This file only flips the physical-direction properties in style.css that
   Bootstrap RTL cannot know about, and sets the Arabic typeface. It does not
   duplicate the design system, and it is never loaded by the English pages.
   ========================================================================== */

:root{
  --gp-font:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* Arabic needs a little more line height and no negative letter-spacing */
body{line-height:1.85}
h1,h2,h3,h4,h5,h6,.gp-display{letter-spacing:0;line-height:1.35}
.gp-eyebrow{letter-spacing:.08em}
.gp-brand-sub,.gp-reg-label,.gp-arrow-link,.gp-stat span,.gp-footer h4,
.gp-contact-item h3,.gp-form-card .form-label,.gp-gal-overlay small{letter-spacing:.04em}
.btn{letter-spacing:0}

/* Registration numbers stay LTR inside RTL text */
.gp-reg-num,
[dir="rtl"] a[href^="tel:"]{direction:ltr;unicode-bidi:embed;display:inline-block}
.gp-reg-num{text-align:right}

/* ---------- Directional arrows -------------------------------------- */
/* Arrow links point right-to-left in Arabic */
.gp-arrow-link:hover i{transform:translateX(-5px)}

/* ---------- Eyebrow rule -------------------------------------------- */
/* flex + gap already mirrors; nothing to do */

/* ---------- Tiles: accent edge moves to the right ------------------- */
.gp-tile{border-left:1px solid var(--gp-line);border-right:3px solid var(--gp-accent)}
.gp-bg-navy .gp-tile{border-left-color:rgba(255,255,255,.12);border-right-color:var(--gp-accent)}

/* ---------- Card number badge --------------------------------------- */
.gp-card-num{left:auto;right:0}

/* ---------- Media frame accent square ------------------------------- */
.gp-media-frame--br::after{right:auto;left:-22px}
.gp-media-frame--bl::after{left:auto;right:-22px}

/* ---------- Floating stat card -------------------------------------- */
.gp-float-card{right:auto;left:-18px}

/* ---------- Stat strip dividers ------------------------------------- */
.gp-stat{border-right:0;border-left:1px solid rgba(255,255,255,.16)}
.gp-stat:last-child{border-left:0}

/* ---------- Process / timeline -------------------------------------- */
.gp-process li{padding:0 3.75rem 2.25rem 0}
.gp-process li::before{left:auto;right:0}
.gp-process li::after{left:auto;right:23px}

/* ---------- Hero carousel controls ---------------------------------- */
.gp-hero .carousel-control-prev{right:auto;left:calc(1.5rem + 60px)}
.gp-hero .carousel-control-next{right:auto;left:1.5rem}
.gp-hero .carousel-indicators [data-bs-target]{margin-inline:0 .55rem}
.gp-hero-media::after{
  background:
    radial-gradient(120% 90% at 70% 55%,rgba(6,18,30,.86) 0%,rgba(6,18,30,.35) 62%,rgba(6,18,30,0) 100%),
    linear-gradient(260deg,rgba(6,18,30,.93) 0%,rgba(6,18,30,.8) 46%,rgba(6,18,30,.42) 100%);
}

/* ---------- Page banner overlay ------------------------------------- */
.gp-banner-media::after{background:linear-gradient(270deg,rgba(6,18,30,.94),rgba(6,18,30,.62))}
.gp-cta-media::after{background:linear-gradient(270deg,rgba(6,18,30,.95),rgba(30,92,148,.72))}

/* ---------- Navigation ---------------------------------------------- */
.gp-nav .nav-link::before{left:.85rem;right:.85rem;transform-origin:right}
.gp-nav .dropdown-menu{text-align:right}
.gp-nav-cta{margin-left:0;margin-inline-start:1rem}
.gp-nav .dropdown-toggle::after{margin-left:0;margin-right:.5rem}

/* ---------- Mobile accordion nav ------------------------------------ */
.gp-mobile-nav .accordion-button::after{
  margin-left:.35rem;margin-right:auto;
}
.gp-mobile-nav .accordion-body a{padding:.6rem 1.6rem .6rem 1.25rem}

/* ---------- Quotes --------------------------------------------------- */
blockquote[style*="border-left"]{
  border-left:0!important;
  border-right:3px solid var(--gp-accent)!important;
  padding-left:0!important;
  padding-right:1.5rem!important;
}

/* ---------- Gallery lightbox ---------------------------------------- */
.gp-lb-close{right:auto;left:1.25rem}
.gp-lb-prev{left:auto;right:1.25rem}
.gp-lb-next{right:auto;left:1.25rem;top:50%;transform:translateY(-50%)}
.gp-lb-prev i,.gp-lb-next i{transform:scaleX(-1)}

/* ---------- Gallery overlay ----------------------------------------- */
.gp-gal-overlay{text-align:right}

/* ---------- Back to top --------------------------------------------- */
.gp-top{right:auto;left:1.25rem}

/* ---------- Developer notes ----------------------------------------- */
.gp-ph-note{border-left:1px solid #f0d3b4;border-right:3px solid #d98b2b}

/* ---------- Language switcher --------------------------------------- */
/* shared component, defined in style.css; nothing directional to flip */

/* ---------- Responsive RTL ------------------------------------------ */
@media (max-width:991.98px){
  .gp-stat{border-left:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .gp-stat:last-child{border-bottom:0}
  .gp-float-card{left:auto}
}
@media (max-width:767.98px){
  .gp-process li{padding-right:3.1rem}
  .gp-process li::after{right:19px}
  .gp-lb-prev{right:.35rem}
  .gp-lb-next{left:.35rem}
  .gp-table-responsive td::before{text-align:right}
}

/*for client logo*/
.clients-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  direction: ltr;
}

.clients-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: max-content;
  animation: clients-scroll 20s linear infinite;
  will-change: transform;
}

/* Stop when mouse is over the slider */
.clients-marquee:hover .clients-track {
  animation-play-state: paused;
}

.gp-client {
  flex: 0 0 auto;
  width: 300px;
  margin-right: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gp-client img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Move continuously to the left */
@keyframes clients-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 767px) {
  .gp-client {
    width: 140px;
    margin-right: 25px;
  }

  .clients-track {
    animation-duration: 18s;
  }
}