:root {
  --primary: #0d9488;
  --primary-dark: #0f766e;
  --primary-light: #14b8a6;
  --secondary: #0f172a;
  --accent: #f0fdfa;
  --text: #1e293b;
  --text-light: #64748b;
  --font-main: 'Cairo', 'Poppins', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family: var(--font-main); color:var(--text); line-height:1.7; background:#f8fafc; overflow-x:hidden; }
html[lang=fr] { direction:ltr; }
html[lang=ar] { direction:rtl; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 20px; }

@keyframes fadeInUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInScale { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-18px)} }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.4)} 50%{box-shadow:0 0 0 14px rgba(37,211,102,0)} }
@keyframes gradientMove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes blob { 0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%} 50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%} }
@keyframes slideDown { from{opacity:0;transform:translateY(-25px)} to{opacity:1;transform:translateY(0)} }

.anim-up { animation:fadeInUp .85s ease both; }
.anim-scale { animation:fadeInScale .9s ease both; }
.d1{animation-delay:.15s} .d2{animation-delay:.3s} .d3{animation-delay:.45s} .d4{animation-delay:.6s}

.lang-switch { display:flex; gap:6px; background:#f1f5f9; padding:4px; border-radius:50px; }
.lang-btn { padding:6px 14px; border-radius:50px; font-size:.85rem; font-weight:600; cursor:pointer; border:none; background:transparent; transition:.3s; font-family:inherit; }
.lang-btn.active { background:var(--primary); color:#fff; }

header { background:rgba(255,255,255,.95); backdrop-filter:blur(14px); box-shadow:0 2px 20px rgba(0,0,0,.06); position:sticky; top:0; z-index:1000; animation:slideDown .6s ease; }
.header-inner { display:flex; justify-content:space-between; align-items:center; padding:14px 0; gap:16px; }
.logo { display:flex; align-items:center; gap:12px; font-weight:800; font-size:1.12rem; color:var(--primary); }
.logo-icon { width:46px; height:46px; background:linear-gradient(135deg,var(--primary),var(--primary-light)); border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.4rem; transition:.35s; }
.logo:hover .logo-icon { transform:rotate(-12deg) scale(1.1); }
nav ul { display:flex; list-style:none; gap:24px; }
nav a { font-weight:500; font-size:.92rem; transition:.3s; position:relative; }
nav a::after { content:''; position:absolute; bottom:-4px; right:0; width:0; height:2px; background:var(--primary); transition:.3s; }
html[lang=fr] nav a::after { right:auto; left:0; }
nav a:hover { color:var(--primary); } nav a:hover::after { width:100%; }

.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 30px; border-radius:50px; font-weight:600; font-size:.95rem; transition:.35s; cursor:pointer; border:none; position:relative; overflow:hidden; font-family:inherit; }
.btn-primary { background:linear-gradient(135deg,var(--primary),var(--primary-light)); color:#fff; box-shadow:0 6px 25px rgba(13,148,136,.35); }
.btn-primary:hover { transform:translateY(-4px); box-shadow:0 14px 35px rgba(13,148,136,.45); }
.btn-whatsapp { background:#25D366; color:#fff; }
.btn-whatsapp:hover { background:#1da851; transform:translateY(-4px); }

.hero { min-height:94vh; background:linear-gradient(-45deg,var(--primary-dark),var(--primary),var(--primary-dark),var(--primary)); background-size:400% 400%; animation:gradientMove 14s ease infinite; color:#fff; padding:110px 0 90px; position:relative; overflow:hidden; display:flex; align-items:center; }
.hero-blob { position:absolute; width:420px; height:420px; background:rgba(255,255,255,.07); animation:blob 10s ease-in-out infinite,float 9s ease-in-out infinite; filter:blur(2px); }
.hero-blob.b1 { top:-80px; right:-100px; } .hero-blob.b2 { bottom:-60px; left:-80px; width:300px; height:300px; animation-delay:2s; }
.hero-shapes span { position:absolute; background:rgba(255,255,255,.08); border-radius:50%; animation:float 7s ease-in-out infinite; }
.hero-shapes span:nth-child(1){width:70px;height:70px;top:18%;left:8%}
.hero-shapes span:nth-child(2){width:45px;height:45px;top:55%;left:4%;animation-delay:1.2s}
.hero-shapes span:nth-child(3){width:90px;height:90px;top:25%;right:6%;animation-delay:2s}
.hero-shapes span:nth-child(4){width:35px;height:35px;bottom:18%;right:18%;animation-delay:.6s}

.hero-content { display:grid; grid-template-columns:1.15fr .85fr; gap:50px; align-items:center; position:relative; z-index:2; }
.hero-text h1 { font-size:2.85rem; font-weight:800; line-height:1.22; margin-bottom:20px; }
.hero-text p { font-size:1.15rem; opacity:.93; margin-bottom:32px; max-width:510px; }
.hero-buttons { display:flex; gap:14px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:36px; margin-top:44px; padding-top:28px; border-top:1px solid rgba(255,255,255,.18); }
.stat-item h3 { font-size:2.1rem; font-weight:800; } .stat-item span { font-size:.88rem; opacity:.85; }

.hero-visual { position:relative; }
.hero-img-box { border-radius:24px; overflow:hidden; box-shadow:0 35px 70px rgba(0,0,0,.4); animation:float 8s ease-in-out infinite; }
.hero-img-box img { width:100%; height:430px; object-fit:cover; transition:transform .7s; }
.hero-img-box:hover img { transform:scale(1.06); }
.hero-float-card { position:absolute; bottom:-22px; right:18px; background:#fff; color:var(--secondary); padding:16px 22px; border-radius:18px; box-shadow:0 18px 45px rgba(0,0,0,.22); display:flex; align-items:center; gap:14px; animation:fadeInUp 1s .9s ease both; }
html[lang=fr] .hero-float-card { right:auto; left:18px; }
.hero-float-card .stars { color:#fbbf24; font-size:1.15rem; }
.hero-float-card strong { font-size:1.15rem; display:block; }
.hero-float-card small { font-size:.82rem; color:var(--text-light); }

.rating-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  padding: 8px 20px !important;
  border-radius: 50px;
  margin-bottom: 22px;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
  width: max-content !important;
  max-width: none !important;
}
.rating-pill .stars { color:#fbbf24; letter-spacing:1px; flex-shrink:0; white-space:nowrap; }
.rating-pill .rating-score-text { font-weight:600; }

.section { padding:95px 0; }
.section-header { text-align:center; margin-bottom:55px; }
.section-header h2 { font-size:2.25rem; font-weight:800; color:var(--secondary); margin-bottom:12px; }
.section-header p { color:var(--text-light); font-size:1.08rem; max-width:600px; margin:0 auto; }

.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.service-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.08); transition:.4s; border:1px solid #f1f5f9; }
.service-card:hover { transform:translateY(-14px); box-shadow:0 28px 55px rgba(0,0,0,.13); }
.service-card img { width:100%; height:195px; object-fit:cover; transition:transform .55s; }
.service-card:hover img { transform:scale(1.09); }
.service-card .content { padding:26px; }
.service-card h3 { font-size:1.22rem; font-weight:700; margin-bottom:10px; color:var(--secondary); }
.service-card p { color:var(--text-light); font-size:.93rem; }

.about { background:#fff; }
.about-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:55px; align-items:center; }
.about-image { border-radius:24px; overflow:hidden; box-shadow:0 25px 55px rgba(0,0,0,.12); }
.about-image img { width:100%; height:430px; object-fit:cover; transition:transform .6s; }
.about-image:hover img { transform:scale(1.05); }
.about-content h2 { font-size:2rem; font-weight:800; margin-bottom:8px; color:var(--secondary); }
.about-content .subtitle { color:var(--primary); font-weight:600; margin-bottom:18px; font-size:1.08rem; }
.about-content p { color:var(--text-light); margin-bottom:14px; }
.credentials { display:flex; flex-wrap:wrap; gap:10px; margin:26px 0; }
.credential { background:var(--accent); color:var(--primary-dark); padding:8px 18px; border-radius:50px; font-size:.88rem; font-weight:600; transition:.3s; }
.credential:hover { background:var(--primary); color:#fff; transform:translateY(-3px); }

.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.gallery-item { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 10px 40px rgba(0,0,0,.08); transition:.4s; }
.gallery-item:hover { transform:scale(1.035); }
.gallery-item img { width:100%; height:245px; object-fit:cover; transition:transform .5s; }
.gallery-item:hover img { transform:scale(1.08); }
.gallery-caption { padding:16px; text-align:center; font-weight:600; color:var(--secondary); font-size:.95rem; }

.testimonials { background:var(--secondary); color:#fff; }
.testimonials .section-header h2 { color:#fff; }
.testimonials .section-header p { color:rgba(255,255,255,.7); }
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.testimonial-card { background:rgba(255,255,255,.07); border-radius:16px; padding:30px; border:1px solid rgba(255,255,255,.1); transition:.35s; }
.testimonial-card:hover { background:rgba(255,255,255,.13); transform:translateY(-8px); }
.stars { color:#fbbf24; font-size:1.15rem; margin-bottom:14px; }
.testimonial-card p { font-size:.98rem; opacity:.9; margin-bottom:22px; line-height:1.8; }
.testimonial-author { display:flex; align-items:center; gap:12px; }
.author-avatar { width:46px; height:46px; background:var(--primary); border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; }
.author-info h4 { font-weight:700; font-size:.95rem; } .author-info span { font-size:.82rem; opacity:.7; }

.rating-summary { display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:45px; background:rgba(255,255,255,.1); padding:22px 45px; border-radius:18px; max-width:420px; margin-left:auto; margin-right:auto; }
.rating-score { font-size:3.3rem; font-weight:800; color:#fbbf24; }

.cta { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); color:#fff; text-align:center; padding:85px 0; position:relative; overflow:hidden; }
.cta h2 { font-size:2.15rem; font-weight:800; margin-bottom:14px; }
.cta p { font-size:1.12rem; opacity:.9; margin-bottom:30px; max-width:550px; margin-left:auto; margin-right:auto; }
.cta-buttons { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:45px; }
.contact-info h3 { font-size:1.45rem; font-weight:700; margin-bottom:24px; color:var(--secondary); }
.contact-item { display:flex; gap:14px; margin-bottom:24px; align-items:flex-start; }
.contact-icon { width:50px; height:50px; background:var(--accent); border-radius:14px; display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:1.3rem; flex-shrink:0; transition:.3s; }
.contact-item:hover .contact-icon { background:var(--primary); color:#fff; transform:scale(1.1); }
.contact-item h4 { font-weight:700; margin-bottom:3px; } .contact-item p { color:var(--text-light); font-size:.93rem; }

.contact-form { background:#fff; padding:36px; border-radius:20px; box-shadow:0 22px 55px rgba(0,0,0,.09); border:1px solid #f1f5f9; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-weight:600; margin-bottom:7px; font-size:.92rem; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:14px 18px; border:1.5px solid #e2e8f0; border-radius:12px; font-family:inherit; font-size:.98rem; transition:.3s; background:#f8fafc; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 4px rgba(13,148,136,.13); }
.form-group textarea { resize:vertical; min-height:105px; }

.map-container { margin-top:55px; border-radius:20px; overflow:hidden; box-shadow:0 22px 55px rgba(0,0,0,.12); height:400px; border:4px solid #fff; }
.map-container iframe { width:100%; height:100%; border:0; }

footer { background:var(--secondary); color:#fff; padding:55px 0 26px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:36px; margin-bottom:36px; }
.footer-brand .logo { color:#fff; margin-bottom:14px; }
.footer-brand p { opacity:.7; font-size:.92rem; max-width:280px; }
.footer-col h4 { font-weight:700; margin-bottom:18px; font-size:1.05rem; }
.footer-col ul { list-style:none; } .footer-col li { margin-bottom:10px; }
.footer-col a { opacity:.7; transition:.3s; font-size:.92rem; }
.footer-col a:hover { opacity:1; color:var(--primary-light); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:22px; text-align:center; opacity:.6; font-size:.88rem; }

.whatsapp-float { position:fixed; bottom:28px; left:28px; width:64px; height:64px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.85rem; box-shadow:0 8px 28px rgba(37,211,102,.45); z-index:999; transition:.3s; animation:pulse 2.5s infinite; }
.whatsapp-float:hover { transform:scale(1.14); animation:none; }

.lang-ar { display: inline; }
.lang-fr { display: none; }
html[lang=fr] .lang-ar { display: none; }
html[lang=fr] .lang-fr { display: inline; }

/* Block only when they are sole content of a block parent needing full width */
h1 .lang-ar, h1 .lang-fr,
h2 .lang-ar, h2 .lang-fr,
h3 .lang-ar, h3 .lang-fr,
p .lang-ar, p .lang-fr,
.section-header .lang-ar, .section-header .lang-fr,
.stat-item .lang-ar, .stat-item .lang-fr,
.hero-text > p .lang-ar, .hero-text > p .lang-fr {
  /* keep inline inside these too - parent controls layout */
}


/* ========== MOBILE OPTIMIZED ========== */

/* Tablet */

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ========== TABLET ========== */
@media (max-width: 992px) {
  .hero-content,
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .services-grid,
  .gallery-grid,
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .hero-text h1 {
    font-size: 2.1rem;
  }
  .hero {
    min-height: auto;
    padding: 70px 0 50px;
  }
  nav ul {
    display: none;
  }
  .hero-img-box img {
    height: 300px;
  }
}

/* ========== MOBILE ========== */
@media (max-width: 600px) {

  .container {
    padding: 0 14px;
  }

  /* --- HEADER: Single clean row --- */
  header {
    padding: 0 !important;
  }
  .header-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 0 !important;
  }
  .logo {
    font-size: 0.9rem !important;
    gap: 7px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  .logo span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 150px !important;
  }
  .logo-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }
  nav {
    display: none !important;
  }
  .header-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
  /* Hide any book button if residual */
  .header-inner > .btn,
  .header-inner .btn-primary,
  header .btn-primary {
    display: none !important;
  }
  .lang-switch {
    padding: 2px !important;
    gap: 2px !important;
  }
  .lang-btn {
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
    border-radius: 20px !important;
  }

  /* --- HERO --- */
  .hero {
    padding: 36px 0 44px;
    min-height: auto;
  }
  .hero-content {
    gap: 24px;
    text-align: center;
  }
  .hero-text h1 {
    font-size: 1.65rem;
    line-height: 1.3;
  }
  .hero-text p {
    font-size: 0.92rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }

  /* Rating badge - MUST stay one line */
  .rating-pill {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 0.82rem !important;
    padding: 8px 16px !important;
    gap: 5px !important;
    border-radius: 50px !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    max-width: 95vw !important;
  }
  .rating-pill .stars {
    font-size: 0.95rem;
    letter-spacing: 1px;
    flex-shrink: 0;
  }

  .hero-buttons {
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .hero-buttons .btn {
    padding: 12px 24px;
    font-size: 0.9rem;
  }

  /* Stats row - clean */
  .hero-stats {
    justify-content: center;
    gap: 0;
    margin-top: 24px;
    padding-top: 18px;
    flex-wrap: nowrap;
    border-top: 1px solid rgba(255,255,255,.18);
  }
  .stat-item {
    text-align: center;
    flex: 1;
    padding: 0 6px;
  }
  .stat-item h3 {
    font-size: 1.4rem;
  }
  .stat-item span {
    font-size: 0.72rem;
    display: block;
    line-height: 1.3;
  }

  .hero-img-box {
    max-width: 300px;
    margin: 0 auto;
  }
  .hero-img-box img {
    height: 220px;
  }
  .hero-float-card {
    display: none !important;
  }

  /* --- SECTIONS --- */
  .section {
    padding: 48px 0;
  }
  .section-header {
    margin-bottom: 28px;
  }
  .section-header h2 {
    font-size: 1.5rem;
  }
  .section-header p {
    font-size: 0.9rem;
  }

  .services-grid,
  .gallery-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .service-card img {
    height: 160px;
  }
  .service-card .content {
    padding: 16px;
  }
  .service-card h3 {
    font-size: 1.08rem;
  }

  .about-image img {
    height: 240px;
  }
  .about-content h2 {
    font-size: 1.4rem;
  }
  .credentials {
    gap: 7px;
  }
  .credential {
    padding: 6px 12px;
    font-size: 0.78rem;
  }

  .gallery-item img {
    height: 190px;
  }

  .rating-summary {
    padding: 14px 20px;
    gap: 12px;
    max-width: 100%;
  }
  .rating-score {
    font-size: 2.2rem;
  }
  .testimonial-card {
    padding: 20px;
  }

  .cta {
    padding: 44px 0;
  }
  .cta h2 {
    font-size: 1.4rem;
  }
  .cta p {
    font-size: 0.92rem;
  }
  .cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .cta-buttons .btn {
    width: 100%;
    max-width: 270px;
    justify-content: center;
  }

  .contact-form {
    padding: 22px 16px;
  }
  .contact-info h3 {
    font-size: 1.2rem;
  }
  .contact-icon {
    width: 40px;
    height: 40px;
    font-size: 1.05rem;
  }
  .map-container {
    height: 260px;
    margin-top: 30px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
  .footer-brand p {
    max-width: 100%;
    margin: 0 auto;
  }
  .footer-col ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
  }
  .footer-col li {
    margin-bottom: 0;
  }

  .whatsapp-float {
    width: 54px;
    height: 54px;
    font-size: 1.5rem;
    bottom: 18px;
    left: 14px;
  }
}

/* Extra small */
@media (max-width: 380px) {
  .hero-text h1 {
    font-size: 1.45rem;
  }
  .logo span {
    max-width: 110px;
    font-size: 0.85rem;
  }
  .rating-pill {
    min-width: 190px;
    padding: 8px 18px;
    font-size: 0.82rem;
  }
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  .hero-buttons .btn {
    width: 100%;
    max-width: 250px;
    justify-content: center;
  }
  .stat-item h3 {
    font-size: 1.25rem;
  }
}


/* Rating pill: force all children inline on one line */
.rating-pill,
.rating-pill * {
  white-space: nowrap !important;
  display: inline !important;
  vertical-align: middle;
}
.rating-pill {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  width: auto !important;
  max-width: none !important;
}
.rating-pill .stars {
  display: inline !important;
  color: #fbbf24 !important;
}