/* css/styles.css — CLEAN (no duplicates, no conflicts) */
:root{
 --fr-blue:#0055A4;
  --fr-red:#EF4135;
  --fr-white:#fff;
  --partners-speed:28s;
  --clients-speed:28s;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:'El Messiri',sans-serif;
  font-family:'Marhey',cursive;  
  font-family:Roboto,Arial,sans-serif;
 

  background:linear-gradient(120deg,var(--fr-blue)0%,var(--fr-white)46%,var(--fr-red)100%);
  color:#123;
}
a{color:inherit}

/* ========== NAVBAR ========== */
.navbar{
  width:100%;
  position:fixed;
  top:0;left:0;
  background:rgba(255,255,255,.96);
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  z-index:60;

  /* ✅ keep hide/show feature */
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}
.navbar.navbar--hidden{
  transform: translateY(-110%);
  box-shadow: none;
}

.nav-inner{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
}

.mini-logo{width:52px;height:auto}
.brand{font-weight:900;color:var(--fr-blue);font-family:Montserrat, sans-serif}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  font-size:28px;
  cursor:pointer;
  color:var(--fr-blue);
  margin-left:auto;
}

.navlinks{
  margin-left:14px;
  display:flex;
  gap:10px;
  align-items:center;
}
.navlinks a{
  padding:8px 10px;
  text-decoration:none;
  color:var(--fr-blue);
  font-weight:600;
  border-radius:6px;
}

.header-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:12px;
}
.socials-header{display:flex;gap:8px;align-items:center}
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:50%;
  background:linear-gradient(130deg,var(--fr-blue),var(--fr-red));
  color:#fff;
  text-decoration:none;
  font-size:14px;
  box-shadow:0 2px 12px rgba(0,0,0,.12);
}
.phone{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:8px;
  background:#f1f8ff;
  color:var(--fr-blue);
  text-decoration:none;
}

/* ========== LAYOUT ========== */
.main{max-width:1100px;margin:100px auto 40px auto;padding:0 16px}
.hero{
  background:linear-gradient(90deg,var(--fr-blue),#ffffff00,var(--fr-red));
  padding:36px;
  border-radius:16px;
  text-align:center;
  color:#fff;
  box-shadow:0 6px 30px rgba(0,0,0,.07);
}
.logo-box img{width:240px;
    max-width:100%;
    height:auto;

    background:transparent;

    border-radius:18px;

    padding:6px;

    object-fit:contain;

    transition:.3s;

    filter:
    drop-shadow(0 0 12px rgba(212,163,115,.25))
    drop-shadow(0 0 28px rgba(212,163,115,.15));}
.section{padding:30px 8px;margin-top:28px}
.section.center{text-align:center}
.section h2{color:var(--fr-blue)}
.lead{opacity:.95}

/* ========== OFFERS CARDS ========== */
.cards{
  display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;
    align-items:stretch;
}
.card{
  background:#f7f8fa;
    border-radius:25px;
    padding:30px;
    min-height:220px;
    transition:.3s;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(11,35,70,.10)}
.card img{
  width:250px;height:250px;
  object-fit:cover;
  border-radius:10px;
  margin:18px auto 12px;
  box-shadow:0 8px 20px rgba(2,6,23,.06);
}
.cards .card h3{
  width:calc(100% - 32px);
  margin:12px auto;
  padding:12px 16px;
  background:linear-gradient(90deg,var(--fr-blue),var(--fr-red));
  color:#fff;
  font-size:18px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  border-radius:10px;
  box-shadow:0 10px 26px rgba(2,6,23,.09);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cards .card:hover h3{transform:translateY(-4px);box-shadow:0 14px 36px rgba(2,6,23,.11)}
.card p{margin:0;padding:12px 18px 18px;color:#173a57;line-height:1.45;font-size:14px}

/* ========== PARTNERS SLIDER ========== */
.partners-slider{
  overflow:hidden;
  margin:14px auto;
  padding:10px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
}
.partners-track{
  display:flex;
  gap:24px;
  align-items:center;
  width:max-content;
  animation:scroll var(--partners-speed) linear infinite;
}
@keyframes scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.partner-item{
  flex:0 0 auto;
  padding:8px 12px;
  border-radius:8px;
  background:linear-gradient(180deg,#fff,#f6fbff);
  box-shadow:0 4px 20px rgba(0,0,0,.04);
}
.partner-item img{max-height:44px;max-width:160px;filter:grayscale(40%)}

/* ========== CLIENTS SLIDER ========== */
.clients-slider{
  overflow:hidden;
  margin:14px auto;
  padding:10px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
}
.clients-track{
  display:flex;
  gap:18px;
  align-items:stretch;
  width:max-content;
  animation:clientsScroll var(--clients-speed) linear infinite;
}
@keyframes clientsScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.clients-slider:hover .clients-track{animation-play-state:paused}

.client-card{
  flex:0 0 auto;
  min-width:280px;
  max-width:340px;
  background:linear-gradient(180deg,#fff,#f7fbff);
  padding:14px;
  border-radius:12px;
  border:1px solid #eef6ff;
  box-shadow:0 4px 18px rgba(0,0,0,.04);
  text-align:left;
}
.client-logo{height:52px;display:flex;align-items:center;justify-content:flex-start;margin-bottom:8px}
.client-logo img{max-height:52px;max-width:140px;object-fit:contain}
.client-title{font-weight:900;color:var(--fr-blue);margin-bottom:6px}
.client-card p{margin:6px 0;color:#234;font-size:.95rem}
.client-card .note{margin-top:8px;padding-top:8px;border-top:1px dashed #e6eefc;color:#456}

.stars{display:flex;gap:3px;margin:6px 0 10px}
.star{font-size:16px;line-height:1;opacity:.25}
.star.on{opacity:1}

/* ========== FAQ ========== */
details{
  background:#fff;
  padding:12px;
  border-radius:8px;
  margin-bottom:10px;
  box-shadow:0 4px 18px rgba(0,0,0,.04);
  text-align:left;
}
details summary{font-weight:700;color:var(--fr-blue);cursor:pointer}

/* ========== FORMS ========== */
.contact-form{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.contact-form label{display:block;text-align:left;color:var(--fr-blue);font-weight:600}
.contact-form input,.contact-form textarea{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:2px solid #e6f0fb;
  background:#fbfcff;
}
.btn{
  background:linear-gradient(90deg,var(--fr-blue),var(--fr-red));
  color:#fff;
  padding:11px 18px;
  border:none;
  border-radius:9px;
  font-weight:700;
  cursor:pointer;
}

/* ========== FOOTER + MAP ========== */
.footer-inner{
  display:flex;
  gap:24px;
  justify-content:space-between;
  max-width:1100px;
  margin:18px auto;
  padding:18px;
  background:linear-gradient(180deg,#fff,#f7fbff);
  border-radius:10px;
}
.footer-inner .col{flex:1}
.site-footer{margin-top:30px;padding:10px}
.copyright{text-align:center;margin-top:8px;color:#fff}

.map-responsive{
  position:relative;
  overflow:hidden;
  padding-bottom:56.25%;
  height:0;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.05);
}
.map-responsive iframe{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  border:0;
}

/* =========================
   REVIEWS (MANUAL SLIDER)
   ========================= */
.reviews-nav{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:10px;
}
.r-btn{
  width:40px;
  height:40px;
  border:none;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  cursor:pointer;
  font-size:20px;
}

.reviews-viewport{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.reviews-viewport::-webkit-scrollbar{display:none}

.review-card{
  flex:0 0 auto;
  width:320px;
  background:#fff;
  padding:14px;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  scroll-snap-align:start;
}

.review-head{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

.review-avatar{
  width:54px;
  height:54px;
  border-radius:50%;
  overflow:hidden;
  background:#eef6ff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:var(--fr-blue);
  flex:0 0 auto;
}
.review-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.review-name{
  font-weight:900;
  color:#123;
  line-height:1.1;
}
.review-comment{
  color:#234;
  font-size:.98rem;
  line-height:1.5;
}

.r-stars{display:flex;gap:3px;margin-bottom:6px}
.r-star{opacity:.25}
.r-star.on{opacity:1}

/* ========== ADMIN NAVBAR (optional) ========== */
.admin-navbar .navlinks a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
}
.admin-navbar .navlinks a i{font-size:.95em}
.admin-navbar .navlinks a.logout{color:#c62828}
.admin-navbar .navlinks a.logout:hover{color:#a30000}

/* ========== MOBILE ========== */
@media (max-width: 900px){
  body{background:linear-gradient(180deg,var(--fr-blue),var(--fr-white),var(--fr-red))}
  .main{max-width:100%;margin:90px 0 30px 0;padding:0 10px}

  .card{width:100%;max-width:360px}

  /* navbar responsive */
  .navbar{padding:6px 0}
  .nav-inner{
    max-width:100%;
    padding:6px 12px;
    flex-wrap:wrap; /* ✅ allow second line */
  }
  .mini-logo{width:40px}
  .nav-toggle{display:block;margin-left:auto}

  /* ✅ socials + phone shown under navbar */
  .header-right{
    width:100%;
    display:flex;
    justify-content:center;
    gap:10px;
    margin:8px 0 0;
    flex-wrap:wrap;
  }
  .social-link{width:34px;height:34px;font-size:14px}
  .phone{font-size:14px;padding:7px 10px}

  /* mobile menu */
  .navlinks{
    position:fixed;
    top:58px;
    left:0;
    width:100%;
    background:#fff;
    display:none;
    flex-direction:column;
    padding:10px 0;
    border-bottom:1px solid #eee;
    z-index:999;
  }
  .navlinks a{
    padding:12px;
    text-align:center;
    font-size:18px;
    border-radius:0;
  }
  .navlinks.active{display:flex}

  .footer-inner{flex-direction:column;gap:16px;text-align:center}

  /* reviews cards */
  .review-card{width:280px}
}

/* ========== REDUCE MOTION ========== */
@media (prefers-reduced-motion: reduce){
  .partners-track,.clients-track{animation:none}
}



@media (max-width:900px){
  .main{padding-top:80px;}
}


/* === Reviews Manual Slider (one-row horizontal) === */
.reviews-wrap{max-width:1100px;margin:0 auto}

.reviews-nav{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:0 0 10px;
}

.r-btn{
  width:42px;height:42px;
  border:none;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  cursor:pointer;
  font-size:22px;
  color:var(--fr-blue);
}
.r-btn:active{transform:scale(.98)}

.reviews-viewport{
  display:flex;
  flex-wrap:nowrap;          /* ✅ مهم: سطر واحد */
  gap:14px;
  overflow-x:auto;           /* ✅ تحريك يمين/يسار */
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:8px 6px;
  scrollbar-width:none;
}
.reviews-viewport::-webkit-scrollbar{display:none}

.review-card{
  flex:0 0 auto;
  width:340px;
  background:#fff;
  padding:14px;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  scroll-snap-align:start;
  text-align:left;
}

.review-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.review-avatar{
  width:54px;height:54px;border-radius:50%;
  overflow:hidden;background:#eef6ff;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;color:var(--fr-blue);
  flex:0 0 auto;
}
.review-avatar img{width:100%;height:100%;object-fit:cover}

.review-name{font-weight:900;color:#123;line-height:1.1}
.review-comment{color:#234;font-size:.98rem;line-height:1.5}

.r-stars{display:flex;align-items:center;gap:3px;margin-top:6px}
.r-star{opacity:.25}
.r-star.on{opacity:1}

@media (max-width:900px){
  .review-card{width:280px}
}





/* === Reviews arrows: mobile-friendly === */
.reviews-nav{
  position:relative;
  z-index:5;
  display:flex;
  justify-content:center;
  gap:12px;
  margin:10px 0 12px;
}

.r-btn{
  width:52px;
  height:52px;
  border:none;
  border-radius:999px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  cursor:pointer;
  font-size:26px;
  line-height:1;
  touch-action:manipulation; /* مهم للهاتف */
}

.r-btn:active{ transform:scale(.96); }






/* === Review avatar size control === */
.review-avatar{
  width:130px;   /* كبّر أو صغّر هنا */
  height:130px;  /* كبّر أو صغّر هنا */
  border-radius:80%;
  overflow:hidden;
  background:#eef6ff;
  flex:0 0 auto;
}

.review-avatar img{
  width:100%;
  height:100%;
  object-fit:cover; /* ممتاز للصور */
}