/* reset css start */
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600;700&family=Roboto&family=Playfair+Display&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/* === Arabic Font Override === */
html[lang="ar"] body,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] span,
html[lang="ar"] a,
html[lang="ar"] li,
html[lang="ar"] div {
  font-family: 'Cairo', sans-serif !important;
}
html[lang="ar"] .highlight { color:#3E2312; font-weight:600; position:static; }
html[lang="ar"] .arabic_text { text-align:right !important; margin-right:10px; }
html[lang="ar"] .arabic_section { text-align:right !important; }

html, body {
  overflow-x: hidden;
}

:root{
  --heading-font:'Poppins',sans-serif;
  --body-font:'Poppins',sans-serif;
  --heading:232 33% 31%;
  --body:223 22% 41%;
  --border:0 0% 92%;
  --base-h:17; --base-s:100%; --base-l:60%;
  --base:var(--base-h) var(--base-s) var(--base-l);
  --base-100:var(--base-h) var(--base-s) calc(var(--base-l) + 20%);
  --base-200:var(--base-h) var(--base-s) calc(var(--base-l) + 15%);
  --base-300:var(--base-h) var(--base-s) calc(var(--base-l) + 10%);
  --base-400:var(--base-h) var(--base-s) calc(var(--base-l) + 5%);
  --base-500:var(--base-h) var(--base-s) calc(var(--base-l) - 5%);
  --base-600:var(--base-h) var(--base-s) calc(var(--base-l) - 8%);
  --base-700:var(--base-h) var(--base-s) calc(var(--base-l) - 10%);
  --base-800:var(--base-h) var(--base-s) calc(var(--base-l) - 15%);
  --base-900:var(--base-h) var(--base-s) calc(var(--base-l) - 20%);
  --accent-h:260; --accent-s:92%; --accent-l:10%;
  --accent-50:var(--accent-h) var(--accent-s) calc(var(--accent-l) + 25%);
  --accent-100:var(--accent-h) var(--accent-s) calc(var(--accent-l) + 20%);
  --accent-200:var(--accent-h) var(--accent-s) calc(var(--accent-l) + 15%);
  --accent-300:var(--accent-h) var(--accent-s) calc(var(--accent-l) + 5%);
  --accent-400:var(--accent-h) var(--accent-s) calc(var(--accent-l) + 3%);
  --accent:var(--accent-h) var(--accent-s) var(--accent-l);
  --accent-600:var(--accent-h) var(--accent-s) calc(var(--accent-l) - 3%);
  --accent-700:var(--accent-h) var(--accent-s) calc(var(--accent-l) - 5%);
  --accent-800:var(--accent-h) var(--accent-s) calc(var(--accent-l) - 15%);
  --accent-900:var(--accent-h) var(--accent-s) calc(var(--accent-l) - 20%);
  --primary:245 82% 67%;
  --primary-dark:245 82% 60%;
  --secondary:210 7% 56%;
  --success:147 67% 47%;
  --success-dark:147 67% 30%;
  --danger:360 78% 62%;
  --danger-dark:360 78% 58%;
  --danger-darker:360 78% 50%;
  --warning:29 100% 63%;
  --warning-dark:29 100% 58%;
  --warning-darker:29 100% 50%;
  --info:200 90% 53%;
  --info-dark:200 90% 50%;
  --dark:206 70% 11%;
  --dark-h:0; --dark-s:0%; --dark-l:13%;
  --darker:var(--dark-h) calc(var(--dark-s)) calc(var(--dark-l) + (100% - var(--dark-l)) * 0.1);
  --white:0 0% 100%;
  --light-h:218; --light-s:49%; --light-l:97%;
  --light-50:var(--light-h) var(--light-s) calc(var(--light-l) + 33%);
  --light-100:var(--light-h) var(--light-s) calc(var(--light-l) + 20%);
  --light-200:var(--light-h) var(--light-s) calc(var(--light-l) + 15%);
  --light-300:var(--light-h) var(--light-s) calc(var(--light-l) + 10%);
  --light-400:var(--light-h) var(--light-s) calc(var(--light-l) + 2%);
  --light:var(--light-h) var(--light-s) var(--light-l);
  --light-600:var(--light-h) var(--light-s) calc(var(--light-l) - 2%);
  --light-700:var(--light-h) var(--light-s) calc(var(--light-l) - 10%);
  --light-800:var(--light-h) var(--light-s) calc(var(--light-l) - 15%);
  --light-900:var(--light-h) var(--light-s) calc(var(--light-l) - 20%);
}

.w-80 {

width: 80%;

}

.mb-10
 {
    margin-bottom: 30px !important;
}

 .border {
    border-radius: 5px !important;
  }
@keyframes jump { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

html{ scroll-behavior:smooth; scroll-padding-top:100px; }

body{
  font-family:'Poppins',sans-serif;
  color:#6f6f6f; font-size:16px; padding:0; margin:0;
  font-weight:400; position:relative; line-height:1.7;
}
section.container{ max-width:1454px; margin:0 auto; width:100%; }
img{ max-width:100%; height:auto; }
ul,ol{ padding:0; margin:0; list-style:none; }
button{ cursor:pointer; border:none; }
button:focus, *:focus{ outline:none; }
span{ display:inline-block; }
a:hover{ color:#3E2312; }
.red{ background-color:red; color:#fff; }
p.sub-text{ font-size:50px !important; }
/* reset css end */

#affect{
  transition: all 0.2s ease-in-out;
}

/* blog */
.blog-sidebar{
  padding:20px; border-radius:3px; top:110px; border:1px solid #dddddd8f;
}

/* Hero Section */
.highlight{ position:relative; color:#3E2312; font-weight:600; }
.highlight::after{
  content:''; position:absolute; left:0; bottom:.1em; width:100%; height:5px;
  background-color:#3E2312; border-radius:50px; transform:scaleX(1); transform-origin:left; z-index:-1;
}

/* how it work – p two lines */
.two-line-text{
  width:180px; text-align:center; word-break:break-word; white-space:normal;
  min-height:2.5em; margin:0 auto;
}
.triangle-bg{ top:0; left:0; width:139px; z-index:0; pointer-events:none; }
.star-bg{ top:0; left:0; width:350px !important; z-index:0; pointer-events:none; }

section.py-5.position-relative{ z-index:1; }

/* =========================
   Brand logos with color overlay (no background tile)
   ========================= */

/* Container that defines the logo box size */
.brand-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px; /* small breathing room around each logo */
}

.brand-logo {
  width: 90px;              /* natural image width */
  height: 90px;              /* natural image height */
  max-width: none;           /* do not limit width */
  max-height: none;          /* do not limit height */
  filter: grayscale(100%);   /* make the image itself gray */
  opacity: 0.8;              /* optional: slightly dim */
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.brand-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}



.markSlider .row {
  justify-content: center;         /* center the logos */
}

.markSlider .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.markSlider .swiper {
  padding: 8px 0;
}


/* responsive */
@media (max-width:780px){
  p.sub-text{ font-size:20px !important; }
 
   .arabic_text {
    text-align: center !important;
  }

}



@media (max-width:575.98px){
  .brand-wrap{
    width:120px;
    height:120px;
  }
   .arabic_text {
    text-align: center !important;
  }
}

 @media (max-width: 767.98px) {
  html[lang="ar"] .arabic_text {
    text-align: center !important;
    margin-right: 0 !important;
    display: block;          /* ensures full width */
    width: 100%;             /* helps centering in flex/RTL contexts */
  }
}

/* ===== WHAT WE OFFER — final polish ===== */
.whatweoffer {
  position: relative;    
  --logo-size: 200px;   
  --ring-gap: 6px;     
  --ring-pull: 28px;  

  background-image: url("/assets/ptop/bgservesis.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;   /* full width & height */
  background-position: center;  /* centers the image */
}
/* Top color bar */
.whatweoffer .wow-topbar{
  position:absolute; inset:0 0 auto 0; height:220px;
  background:#FF5A3C; z-index:0;
}

/* keep triangle behind content */
.whatweoffer .triangle-bg{ top:0; left:0; width:139px; z-index:0; pointer-events:none; opacity:.35; }
.whatweoffer .container{ z-index:1; }

/* "نقدم لك" as a button */
.whatweoffer .small-title {
    font-size: 14px;
    line-height: 1;
    color: #fff;
    background: #FF5A3C;
    padding: 10px 35px !important;
    border-radius: 5px;
    display: inline-block;
}

/* bring heading block closer */
.whatweoffer .heading-wrap { margin-bottom: 12px !important; }

/* Big main line like the mock */
.whatweoffer .sub-text{
  color:#3E2312 !important;
  font-weight:700 !important;
  line-height:1.25;
  font-size:clamp(22px, 5vw, 48px) !important;   /* desktop ~48 */
  margin:6px auto 2px;                            /* tight spacing */
}

/* Small gray sub line directly under it */
.whatweoffer .lead-2{
  color:#6f6f6f !important;
  font-weight:400 !important;
  line-height:1.6;
  font-size:clamp(13px, 1.8vw, 17px);
  margin-top:4px;
  margin-bottom:0;
}

/* Center logo + surrounding features */
.features-ring{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: repeat(3, auto);
  column-gap: var(--ring-gap);
  row-gap: var(--ring-gap);
  align-items:center;
  justify-items:center;
}


.features-ring .center-logo{ grid-column:2; grid-row:2; z-index:2; }
.features-ring .center-logo img{ width: var(--logo-size) !important; }


.feature-card{ z-index:1; }
.feature-card .icon-wrap{ width:64px; height:64px; border-radius:14px; }

/* place first four around the logo */
.feature-card.pos-tl{ grid-column:1; grid-row:1; }
.feature-card.pos-tr{ grid-column:3; grid-row:1; }
.feature-card.pos-bl{ grid-column:1; grid-row:3; }
.feature-card.pos-br{ grid-column:3; grid-row:3; }
.feature-card.pos-auto{ grid-column: span 1; }

/* helper (unchanged) */
.two-line-text{
  width:180px; text-align:center; word-break:break-word; white-space:normal;
  min-height:2.5em; margin:0 auto;
}

/* ===== Responsive ===== */
@media (max-width: 991.98px){
  .features-ring{
    grid-template-columns: auto;
    grid-template-rows:auto;
    gap:18px;
  }
  .features-ring .center-logo{
    grid-column:1 / -1; grid-row:auto; order:-1;
    margin-bottom:8px;
  }
  .feature-card.pos-tl,
  .feature-card.pos-tr,
  .feature-card.pos-bl,
  .feature-card.pos-br,
  .feature-card.pos-auto{ grid-column:auto; grid-row:auto; }
  .feature-card .icon-wrap{ width:60px; height:60px; }
}

@media (max-width: 575.98px){
  .features-ring{ grid-template-columns:1fr; gap:14px; }
  .whatweoffer .sub-text{ font-size:22px !important; line-height:1.35; }
  .whatweoffer .lead-2{ font-size:14px; }
}

@media (max-width: 575.98px){
  .features-ring{
    grid-template-columns: auto; /* two columns instead of 1 */
    gap: 16px;
  }
  .features-ring .center-logo{
    grid-column: 1 / -1;
    order: -1;
    margin-bottom: 12px;
  }

  /* smaller cards on phones */
  .feature-card .icon-wrap{
    width: 55px;
    height: 55px;
  }
  .feature-card h6{
    font-size: 14px;
  }
  .feature-card p{
    font-size: 12px;
  }
}


.ptopsystm .small-title {
    font-size: 14px;
    line-height: 1;
    color: #fff;
    background: #FF5A3C;
    padding: 10px 35px !important;
    border-radius: 5px;
    display: inline-block;
}

/*Cards*/
/* Remove default Swiper arrows */
.swiper-button-next::after,
.swiper-button-prev::after {
  display: none !important;
}

/* Custom arrows outside container */
.custom-prev, 
.custom-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}

/* Fix image height */
.card-img-fixed {
width: 370px !important;
    height: 220px;
    object-fit: fill;
    max-width: 350px;
    max-height: 220px;
    border-radius: 5px;
}
/* Default: small devices - no justify */
#card_section {
  justify-items: unset !important;
}

/* Big devices (desktop and up) */
@media (min-width: 992px) {
  #card_section {
    justify-items: center !important;
  }
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: #e8512e !important ;
  }

  .swiper-button-next, .swiper-button-prev {

    margin:0 !important;
}

footer ul {
  display: flex;
  justify-content: center; /* center items */
  gap: 30px; /* space between links */
  flex-wrap: wrap; /* so it doesn’t overflow on mobile */
}

footer ul li {
  margin: 0; /* reset margins */
}

/*/////////////////floating images////////////////////*/
#hero {
  position: relative;  
}

#hero::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -85px;
    width: 277px;
    height: 256px;
    background: url(/assets/ptop/Unionbig.png) no-repeat bottom left;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}
/* Medium screens */
@media (max-width: 1200px) {
  #hero::after {
   display: none;
  }
}

/* Tablets */
@media (max-width: 768px) {
     #hero::after {
     display: none;
    }
}

/* Phones */
@media (max-width: 480px) {
  #hero::after {
display: none;
  }
}

/*Cloud*/

#right_cloud{
    position: absolute;
    bottom: 50%;
    right: 5%;
    width: 100px;
    height: 100px;
    pointer-events: none;
    z-index: 0;
}

#left_cloud{
    position: absolute;
    bottom: 10%;
    left: 5%;
    width: 100px;
    height: 100px;
    pointer-events: none;
    z-index: 0;
}

#rocket
 {
    position: absolute;
    bottom: -30%;
    right: -5%;
    width: 31%;
    height: auto;
    pointer-events: none;
    z-index: 0;
}

@media (max-width: 768px) {
   #rocket
 {
   
    bottom: -10%;
}
}

#ptop_systm {
  position: relative;  
}

#ptop_systm:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: -85px;
    width: 277px;
    height: 256px;
    background: url(/assets/ptop/Unionbig.png) no-repeat bottom left;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}
/* Medium screens */
@media (max-width: 1200px) {
  #ptop_systm:after {
   display: none;
  }
}

/* Tablets */
@media (max-width: 768px) {
     #ptop_systm::after {
     display: none;
    }
}

/* Phones */
@media (max-width: 480px) {
  #ptop_systm::after {
display: none;
  }
}