:root{
  --red-700:#7f1d1d; --red-900:#450a0a;
  --ink:#333; --muted:#666; --bg:#fff;
  --surface:#fef2f2; --chip:#ffefef;
  --radius:16px; --shadow:0 10px 30px rgba(127,29,29,.16);
  --soft:0 6px 16px rgba(0,0,0,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
body{margin:0;font-family:'Cairo',Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.8;overflow-x:hidden}

/* نحافظ على نفس العرض بدون تغيير HTML */
.container,
.header-content,
.section-title,
.services-grid,
.cert-grid,
.countries-grid,
.features-grid,
.steps-container,
.contact-section{
  width:min(calc(100% - 2rem), 1200px);
  margin-inline:auto;
}




/* Header */
#header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:1000;
  background:rgba(255,255,255,.98);
  box-shadow:0 2px 12px rgba(127,29,29,.10);
  transition:background .2s ease, box-shadow .2s ease;
}
#header.scrolled{ background:#fff; box-shadow:0 6px 20px rgba(127,29,29,.18) }
.header-content{
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(.6rem,2vw,1rem) clamp(.8rem,3vw,1.5rem);
  gap:clamp(.6rem,2vw,1.2rem);
}
.logo-section{display:flex; align-items:center; gap:.8rem}
.logo-img{
  inline-size:clamp(40px,6vw,56px); block-size:clamp(40px,6vw,56px);
  border-radius:12px; object-fit:cover; border:2px solid var(--red-700);
  box-shadow:0 6px 16px rgba(127,29,29,.18);
}
.logo-text h1{margin:0;color:var(--red-700);font-weight:800;font-size:clamp(18px,3.6vw,28px)}
.logo-text p{margin:0;color:var(--muted);font-size:clamp(11px,2.6vw,13px)}
#license-text{font-weight:800;color:var(--red-700);font-size:clamp(12px,2.8vw,14px)}
.header-contact{display:flex;align-items:center;gap:clamp(.5rem,3.6vw,1.4rem)}
.contact-item{display:flex;align-items:center;gap:.5rem;font-weight:700}
.contact-item i{color:var(--red-700);font-size:clamp(16px,4vw,20px)}
/* Make contact links look like plain text */
.contact-item{ text-decoration:none; color:inherit }

/* Compact header on mobile to avoid tall wrap */
@media (max-width: 768px){
  .header-content{ padding:.5rem .75rem; }
  .logo-section{ gap:.5rem; }
  .logo-text{ min-width:0; }
  .logo-text h1{ font-size:16px; line-height:1.25; white-space:normal; overflow:visible; text-overflow:clip; max-width:100% }
  /* Keep header compact: move license to hero on mobile */
  .logo-text p{ display:none }
  .header-contact{ gap:.5rem }
  .header-contact .contact-item span{ display:none }
  /* Ensure content clears taller header when title wraps */
  main{ padding-block-start: 104px; }
}
@media (max-width: 480px){
  /* Hide secondary contact to keep header single-line */
  .header-contact .contact-item:nth-child(2){ display:none }
}

/* مساحة آمنة تحت الهيدر الثابت */
main{ padding-block-start: var(--header-h, 76px); }

/* Hero */
.hero{
  position:relative; isolation:isolate; text-align:center; color:#fff;
  min-block-size:min(100svh, 780px); display:grid; place-items:center;
  background:
    linear-gradient(0deg, rgba(0,0,0,.42), rgba(0,0,0,.42)),
    url('../assets/bannerimage.jpeg') center/cover no-repeat;
  overflow:hidden;
}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
.hero::before{inline-size:44svh;block-size:44svh;inset-block-start:-18svh;inset-inline-end:-18svh;background:rgba(255,255,255,.12);animation:float 7s ease-in-out infinite}
.hero::after {inline-size:36svh;block-size:36svh;inset-block-end:-14svh;inset-inline-start:-14svh;background:rgba(255,255,255,.06);animation:float 9s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-content{padding:clamp(1.2rem,4vw,2.5rem)}
.hero h2{margin:0 0 .8rem;font-weight:800;font-size:clamp(26px,6vw,44px);line-height:1.25}
.hero p{font-size:clamp(14px,3.2vw,19px);max-inline-size:min(90ch,900px);margin-inline:auto;margin-block:0 1.2rem;color:rgba(255,255,255,.95)}
.license-mobile{display:none}
@media (max-width: 768px){
  .license-mobile{display:block;font-size:12px;line-height:1.6;color:rgba(255,255,255,.9);margin-top:.5rem}
}
.cta-buttons{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:clamp(.6rem,2.6vw,1rem) clamp(1rem,4vw,2.2rem);
  border-radius:999px;font-weight:800;font-size:clamp(14px,2.8vw,18px);
  border:3px solid #fff;color:#fff;background:transparent;transition:.2s;
}
.btn-primary{background:#fff;color:var(--red-700)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.2)}
.btn-secondary:hover{background:#fff;color:var(--red-700);transform:translateY(-3px)}

/* Sections */
section{ padding-block: clamp(48px, 6vw, 100px) }
.bg-light{ background:#fafafa }
.dark-band{ background:linear-gradient(135deg,var(--red-700),var(--red-900)); color:#fff }
.dark-band .section-title h2::after{ background:rgba(255,255,255,.9) }
.dark-band .section-title p{ color:rgba(255,255,255,.95) }

.section-title{text-align:center;margin-block-end:clamp(28px,4vw,60px)}
.section-title h2{
  display:inline-block;margin:0 0 .6rem;font-weight:800;
  font-size:clamp(22px,5vw,38px);color:currentColor;
}
.section-title h2::after{
  content:"";display:block;inline-size:80px;block-size:4px;
  margin:10px auto 0;border-radius:2px;background:currentColor;opacity:.9;
}
.section-title p{color:var(--muted);max-width:70ch;margin-inline:auto;font-size:clamp(14px,2.8vw,18px)}

/* Grids / Cards */
.services-grid,
.cert-grid,
.countries-grid,
.features-grid,
.steps-container{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:clamp(14px,3vw,30px);
}
/* Center countries grid content */
.countries-grid{ justify-content:center; justify-items:center; text-align:center }
.service-card,.cert-card,.country-card,.feature-item,.step-card,.contact-box{
  background:#fff;border-radius:var(--radius);
  border:2px solid transparent;box-shadow:var(--soft);
  padding:clamp(16px,3.2vw,36px);
  position:relative; overflow:hidden; /* enable hover sheen */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  will-change: transform;
}

/* Subtle sheen sweep on hover for all grid cards */
.service-card::before,
.cert-card::before,
.country-card::before,
.feature-item::before,
.step-card::before,
.contact-box::before{
  content:""; position:absolute; inset:-2px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 100%);
  transform:translateX(-150%);
  transition: transform .8s ease;
}
.service-card:hover::before,
.cert-card:hover::before,
.country-card:hover::before,
.feature-item:hover::before,
.step-card:hover::before,
.contact-box:hover::before{ transform:translateX(150%) }

/* Services */
.service-icon{
  inline-size:clamp(56px,8vw,80px); block-size:clamp(56px,8vw,80px);
  display:grid;place-items:center;border-radius:50%;margin:0 auto 16px;color:#fff;
  background:linear-gradient(135deg,var(--red-700),var(--red-900)); font-size:clamp(22px,5vw,34px);
}
.service-card:hover{transform:translateY(-6px);border-color:var(--red-700);box-shadow:var(--shadow)}
.service-card h3{margin:.2rem 0 .4rem;font-size:clamp(18px,3.6vw,22px)}
.service-card p{color:var(--muted);font-size:clamp(13px,2.8vw,16px)}

/* Certifications */
.cert-card{background:linear-gradient(135deg,#fff,#fef2f2);border-color:#fee2e2;min-block-size:clamp(200px,32vw,260px);text-align:center}
.cert-card:hover{transform:translateY(-4px) scale(1.02);border-color:var(--red-700);box-shadow:var(--shadow)}
.cert-logo{display:block;inline-size:auto;block-size:clamp(40px,8vw,56px);object-fit:contain;margin:0 auto 16px}
.cert-card h3{color:var(--red-700)}
.cert-card p{color:var(--ink)}
/* On dark band, the section sets color:#fff; force cards to use dark red text */
.dark-band .cert-card{ color:var(--red-700) }

/* Countries */
.country-flag{font-size:clamp(36px,7vw,60px);margin-block-end:10px;display:flex;align-items:center;justify-content:center}
.country-flag img{inline-size:clamp(60px,10vw,80px);block-size:clamp(44px,8vw,60px);border-radius:8px;object-fit:cover;box-shadow:0 6px 16px rgba(0,0,0,.1);border:2px solid rgba(0,0,0,.06);transition:transform .25s ease, filter .25s ease, box-shadow .25s ease}
.country-card:hover{transform:translateY(-6px) scale(1.02);border-color:var(--red-700);box-shadow:0 12px 30px rgba(127,29,29,.16)}
.country-card h3{font-size:clamp(16px,3.2vw,20px)}
/* Remove global sheen effect on country cards */
.country-card::before{ display:none }
/* Flag micro‑interaction */
.country-card:hover .country-flag img{ transform:translateY(-2px) scale(1.06); filter:saturate(1.1); box-shadow:0 10px 24px rgba(0,0,0,.15) }
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .country-flag img, .country-card{ transition:none }
}

/* (reverted) removed animated gradient border + tilt */
/* Mobile: make countries section full-width and non-centered */
@media (max-width: 600px){
  .countries-grid{
    width:100%;                 /* override container width cap */
    grid-template-columns:1fr;  /* single column */
    justify-items:stretch;      /* cards take full width */
    padding-inline:12px;        /* small side padding */
  }
}

/* Five columns for countries on wide screens */
@media (min-width: 1200px){
  .countries-grid{ grid-template-columns: repeat(5, 1fr); gap: 18px; }
}

/* Why us */
.feature-item{display:flex;gap:clamp(12px,2.8vw,20px);background:var(--surface)}
.feature-item:hover{background:#fff;box-shadow:0 10px 30px rgba(127,29,29,.12);transform:translateX(-4px)}
.feature-icon{
  inline-size:clamp(44px,7vw,60px);block-size:clamp(44px,7vw,60px);
  display:grid;place-items:center;color:#fff;border-radius:12px;
  background:var(--red-700);font-size:clamp(18px,5vw,28px)
}
.feature-content h3{margin:.2rem 0;font-size:clamp(16px,3.2vw,20px)}
.feature-content p{color:var(--muted);font-size:clamp(13px,2.8vw,15px)}

/* Steps */
.step-number{
  inline-size:clamp(56px,10vw,80px);block-size:clamp(56px,10vw,80px);
  display:grid;place-items:center;margin:0 auto 14px;color:#fff;font-weight:800;border-radius:50%;
  background:linear-gradient(135deg,var(--red-700),var(--red-900));box-shadow:0 10px 30px rgba(127,29,29,.25);
  font-size:clamp(20px,6vw,32px);
}
.step-card h3{font-size:clamp(16px,3.6vw,20px);margin:.2rem 0 .4rem}
.step-card p{color:var(--muted);font-size:clamp(13px,2.8vw,16px)}

/* Contact */
.contact-section{
  background:linear-gradient(135deg,var(--red-700),var(--red-900));
  color:#fff;border-radius:clamp(16px,4vw,30px);
  padding:clamp(28px,6vw,80px) clamp(20px,6vw,60px);text-align:center;
}
.contact-info{display:flex;flex-wrap:wrap;gap:clamp(12px,4vw,32px);justify-content:center;margin-block-start:clamp(12px,3vw,24px)}
.contact-box{background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.28);backdrop-filter: blur(10px);color:#fff;text-align:center;cursor:pointer}
.contact-box:hover{transform:translateY(-4px);background:rgba(255,255,255,.22)}
.contact-box i{font-size:clamp(20px,6vw,40px)}
.contact-box h3{font-size:clamp(14px,3vw,18px);margin:.4rem 0}
.contact-box p{font-size:clamp(16px,4vw,24px);font-weight:800;margin:0}
.contact-box a{font-size:clamp(16px,4vw,24px);font-weight:800;margin:0;color:#fff;text-decoration:none}

/* Mobile: center contact boxes and limit width */
@media (max-width: 600px){
  .contact-info{ flex-direction: column; align-items: center; }
  .contact-box{ width: 100%; max-width: 360px; margin-inline: auto; }
}

/* Footer */
footer{background:#1a1a1a;color:#fff;text-align:center;padding:clamp(24px,4vw,40px)}
.footer-info{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;margin:0 0 12px}
.footer-info-item{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);padding:8px 12px;border-radius:999px}
.footer-info-item a,.footer-info-item span{color:#fff;text-decoration:none;font-weight:800}
.footer-social{display:flex;justify-content:center;gap:12px;margin-block-end:12px}
.footer-social a{inline-size:40px;block-size:40px;display:inline-grid;place-items:center;color:#fff;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);transition:transform .2s,background .2s,border-color .2s}
.footer-social a:hover{transform:translateY(-3px);background:rgba(255,255,255,.15);border-color:#fff}
/* Footer map */
.footer-map{ width:min(calc(100% - 2rem), 900px); margin-inline:auto; margin-top:12px; margin-bottom:20px; text-align:center }
.footer-map .map-frame{ inline-size:100%; block-size:280px; border:0; border-radius:var(--radius); box-shadow:var(--soft) }
@media (max-width: 768px){ .footer-map .map-frame{ block-size:220px } }
.footer-map .map-link a{ color:var(--red-700); font-weight:800; text-decoration:none }
.footer-map .map-link a:hover{ text-decoration:underline }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}

/* Mobile alignment fixes */
@media (max-width: 768px){
  /* Center header/nav content */
  .header-content{ justify-content:center; text-align:center }
  .logo-section{ justify-content:center }
  .header-contact{ justify-content:center }

  /* Center common blocks just in case */
  .section-title, .service-card, .country-card, .step-card, .contact-box{ text-align:center }

/* Map embed */
  .feature-item{ flex-direction:column; align-items:center; text-align:center }
}

/* Keep phone numbers visible while keeping header compact */
@media (max-width: 768px){
  .header-content{ flex-direction: column; align-items: center; }
  .header-contact{ flex-wrap: wrap; gap: .4rem .8rem; justify-content: center; }
  .header-contact .contact-item span{ display: inline; }
  .contact-item{ font-size: 14px; }
  .contact-item i{ font-size: 16px; }
}
@media (max-width: 480px){
  .header-contact .contact-item:nth-child(2){ display: flex; }
}