/* ═══════════════════════════════════════════════════════════════════
   LABEBO — labebo-merged.css  (الملف الموحّد)
   ───────────────────────────────────────────────────────────────────
   هذا الملف يدمج أربعة ملفات CSS بنفس ترتيب التحميل الحالي للموقع:
     1) styles.css
     2) responsive.css
     3) custom.css
     4) labebo-new.css  (النسخة V6 / Clinic OS — نفس المستخدمة بالإندكس)

   النتيجة مطابقة 100% للوضع الحالي (نفس أسبقية الـCSS / cascade).
   تنسيقات النافبار (.lnav / .navbar) والفوتر (.lfooter / .footer)
   و page-hero محفوظة بالكامل لتبقى ملفات الانكلود تشتغل بدون تغيير.

   ملاحظة: خطوط Google Fonts و Font Awesome و Material Symbols تبقى
   روابط CDN منفصلة (لم تُدمج). وبلوك <style> الخاص بكل صفحة يبقى بصفحته.
   ═══════════════════════════════════════════════════════════════════ */



/* ╔════ 1 / 4  ▸  styles.css ════╗ */
/* ================= Theme & Base ================= */
:root{
  /* Updated to match responsive.css - Brighter Green Theme */
  --green-primary:#88C540;  /* Brighter primary green */
  --green-secondary:#6B9F3C; /* Secondary green */
  --green-dark:#236324;     /* Dark green for text/footer */
  --gradient-primary: linear-gradient(135deg, #88C540, #6B9F3C);

  /* Base colors */
  --bg:#fafafa;
  --surface:#ffffff;
  --text:#1f2937;
  --muted:#667085;
  --card:#f9fafc;
  --border:#e5e7eb;
  --ring:0 0 0 3px rgba(136,197,64,.25);
  --shadow-sm:0 6px 18px rgba(0,0,0,.08);
  --shadow-md:0 12px 32px rgba(0,0,0,.12);
  --shadow-lg:0 20px 50px rgba(0,0,0,.15);
  --radius:20px;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,body{
  background:var(--bg);
  color:var(--text);
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  scroll-behavior:smooth;
  line-height:1.6;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0
}

.container{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:1.5rem;
}

/* ================= Animations ================= */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

@keyframes floatSlow {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, -10px) rotate(5deg); }
  50% { transform: translate(-5px, -20px) rotate(-3deg); }
  75% { transform: translate(-10px, -5px) rotate(3deg); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

.animate-on-scroll {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }
.animate-delay-6 { animation-delay: 0.6s; }

/* ================= Navbar ================= */
.navbar{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(35,99,36,0.95);
  backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 8px 24px rgba(136,197,64,.2);
  transition:all 0.3s ease;
}

.navbar.scrolled {
  background:rgba(35,99,36,0.98);
  box-shadow:0 8px 32px rgba(136,197,64,.3);
}

.navbar__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.75rem 0;
  animation: slideInLeft 0.6s ease;
}

.brand{
  display:flex;
  align-items:center;
  gap:0.75rem;
  color:#fff;
  transition:transform 0.3s ease;
}

.brand:hover {
  transform:scale(1.02);
}

.brand__logo{
  height:50px;
  width:auto;
  filter:drop-shadow(0 4px 8px rgba(136,197,64,.3));
  transition:transform .3s ease;
}

.brand__logo:hover{
  transform:rotate(-5deg) scale(1.05);
}

.brand__name{
  font-weight:700;
  letter-spacing:0.5px;
  font-size:1.3rem;
}

/* ================= Navigation Menu ================= */
.nav-menu {
  display:flex;
  align-items:center;
  gap:1.5rem;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-menu__item a {
  color:#fff;
  font-weight:600;
  font-size:0.95rem;
  padding:0.5rem 0;
  position:relative;
  transition:all 0.3s ease;
  display:block;
}

.nav-menu__item a::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:2px;
  background:var(--green-primary);
  transition:width 0.3s ease;
}

.nav-menu__item a:hover::after {
  width:100%;
}

.nav-menu__item a:hover {
  color:var(--green-primary);
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display:none;
  background:transparent;
  border:none;
  color:#fff;
  font-size:1.5rem;
  cursor:pointer;
  padding:0.5rem;
  transition:transform 0.3s ease;
}

.mobile-menu-toggle:hover {
  transform:scale(1.1);
}

@media(max-width:768px) {
  .nav-menu {
    position:fixed;
    top:70px;
    right:-100%;
    width:280px;
    height:calc(100vh - 70px);
    background:rgba(35,99,36,0.98);
    flex-direction:column;
    align-items:flex-start;
    padding:2rem;
    gap:0.5rem;
    transition:right 0.3s ease;
    box-shadow:-5px 0 25px rgba(0,0,0,0.3);
    backdrop-filter:blur(20px);
  }

  .nav-menu.active {
    right:0;
  }

  .mobile-menu-toggle {
    display:block;
  }

  .nav-menu__item {
    width:100%;
  }

  .nav-menu__item a {
    padding:0.75rem 0;
    font-size:1.1rem;
  }

  .nav-menu__item a::after {
    display:none;
  }
}

.actions{
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex-wrap:wrap;
}

/* Language Dropdown */
.lang-dropdown {
  position: relative;
}

.lang-dropdown__trigger {
  border:0;
  background:rgba(255,255,255,.15);
  color:#fff;
  padding:.5rem 0.9rem;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
  transition:all .25s ease;
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:0.9rem;
}

.lang-dropdown__trigger:hover {
  background:rgba(136,197,64,.3);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(136,197,64,.3);
}

.lang-dropdown__menu {
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  background:#fff;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.15);
  min-width:120px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:all .3s ease;
  overflow:hidden;
  border:1px solid var(--border);
}

.lang-dropdown:hover .lang-dropdown__menu,
.lang-dropdown__menu:hover {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.lang-dropdown__item {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.7rem 1rem;
  cursor:pointer;
  transition:all .2s ease;
  color:var(--text);
  font-weight:500;
  border:0;
  width:100%;
  background:transparent;
  text-align:center;
  font-size:0.9rem;
}

.lang-dropdown__item:hover {
  background:var(--green-primary);
  color:#fff;
}

.lang-dropdown__item.active {
  background:rgba(136,197,64,.1);
  color:var(--green-dark);
  font-weight:600;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border:0;
  cursor:pointer;
  border-radius:12px;
  padding:.65rem 1.1rem;
  font-weight:700;
  letter-spacing:.3px;
  transition:all .25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration:none;
  position:relative;
  overflow:hidden;
  font-size:0.9rem;
}

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn:focus-visible{
  outline:none;
  box-shadow:var(--ring);
}

.btn--parent{
  background:var(--gradient-primary);
  color:#fff;
  border:1px solid rgba(136,197,64,0.3);
  box-shadow:0 4px 12px rgba(136,197,64,.3);
}

.btn--parent:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(136,197,64,.5);
}

@media(max-width:768px) {
  .btn--parent .login-text {
    display:none;
  }

  .btn--parent {
    padding:.65rem 0.9rem;
  }
}

/* ================= Hero Section - Modern & Compact ================= */
.hero{
  position:relative;
  isolation:isolate;
  background:linear-gradient(135deg,#e6ffd5,#f2fce2);
  overflow:hidden;
  min-height:400px;
}

/* Hero Background Image - Never transparent */
.hero__bg-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1 !important;
  animation: fadeIn 1.5s ease;
  z-index: 0;
}

/* Funky Animated Shapes for Children */
.funky-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.shape {
  position: absolute;
  opacity: 0.6;
}

.shape-1 {
  top: 10%;
  left: 5%;
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: 50%;
  animation: floatSlow 15s ease-in-out infinite;
  box-shadow:0 8px 20px rgba(136,197,64,.4);
}

.shape-2 {
  top: 60%;
  left: 15%;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: bounce 4s ease-in-out infinite;
  box-shadow:0 8px 20px rgba(255,215,0,.4);
}

.shape-3 {
  top: 30%;
  right: 10%;
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
  border-radius: 20px;
  animation: wiggle 3s ease-in-out infinite;
  transform-origin: center;
  box-shadow:0 8px 20px rgba(255,107,107,.4);
}

.shape-4 {
  bottom: 15%;
  right: 20%;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #4ecdc4, #44b3aa);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  animation: float 6s ease-in-out infinite;
  box-shadow:0 8px 20px rgba(78,205,196,.4);
}

.shape-5 {
  top: 20%;
  left: 40%;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #a78bfa, #8b5cf6);
  border-radius: 10px;
  animation: rotate 20s linear infinite;
  box-shadow:0 8px 20px rgba(167,139,250,.4);
}

.shape-6 {
  bottom: 30%;
  left: 30%;
  width: 55px;
  height: 55px;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  animation: bounce 5s ease-in-out infinite 1s;
  box-shadow:0 8px 20px rgba(251,191,36,.4);
}

.hero__content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:5rem 0 3rem;
  animation: fadeInUp 1s ease;
}

.hero__title{
  font-size:clamp(2.5rem,5vw,4rem);
  font-weight:800;
  line-height:1.15;
  margin-bottom:1.5rem;
  color:var(--green-dark);
  text-shadow:2px 2px 8px rgba(255,255,255,.8);
  animation: slideInLeft 0.8s ease;
}

.lead{
  font-size:clamp(1.1rem,2vw,1.4rem);
  max-width:700px;
  margin:0 auto 2rem;
  color:#2d5a30;
  line-height:1.7;
  text-shadow:1px 1px 3px rgba(255,255,255,.6);
  animation: slideInRight 0.8s ease 0.2s backwards;
}

.hero__cta{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
  animation: fadeInUp 0.8s ease 0.4s backwards;
}

.btn--primary{
  background:var(--gradient-primary);
  color:#fff;
  font-size:1.15rem;
  padding:1rem 2.2rem;
  box-shadow:0 10px 30px rgba(136,197,64,.4);
  border-radius:16px;
}

.btn--primary:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 15px 40px rgba(136,197,64,.6);
}

.btn--secondary{
  background:#fff;
  color:var(--green-dark);
  font-size:1.15rem;
  padding:1rem 2.2rem;
  border:2px solid var(--green-primary);
  box-shadow:0 10px 30px rgba(0,0,0,.1);
  border-radius:16px;
}

.btn--secondary:hover{
  background:var(--green-primary);
  color:#fff;
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 15px 40px rgba(136,197,64,.3);
}

/* Mobile Hero Optimizations */
@media(max-width:768px) {
  .hero {
    min-height:350px;
  }

  .hero__content {
    padding:3rem 0 2rem;
  }

  .hero__bg-image {
    opacity: 1 !important;
    object-position: center;
  }

  .funky-shapes .shape {
    transform: scale(0.6);
    opacity: 0.4;
  }

  .hero__cta {
    gap:0.75rem;
  }

  .btn--primary,
  .btn--secondary {
    padding:0.85rem 1.5rem;
    font-size:1rem;
  }

  /* Hide "Learn More" button on mobile */
  .btn--secondary {
    display:none;
  }
}

/* ================= Section Styling ================= */
.section{
  padding:4rem 0;
  position:relative;
}

.section__head{
  text-align:center;
  max-width:800px;
  margin:0 auto 3rem;
}

.section__head h2{
  font-size:clamp(1.8rem,4vw,2.8rem);
  margin-bottom:1rem;
  color:var(--green-dark);
  font-weight:800;
  line-height:1.2;
}

.muted{
  color:var(--muted);
  font-size:1.1rem;
  line-height:1.8;
}

@media(max-width:768px) {
  .section {
    padding:3rem 0;
  }

  .section__head {
    margin:0 auto 2rem;
  }
}

/* ================= Cards - Modern & Attractive ================= */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:2rem;
}

.card{
  background:#fff;
  padding:2rem;
  border-radius:24px;
  box-shadow:0 8px 24px rgba(136,197,64,.15);
  border:2px solid transparent;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.card::before {
  content:'';
  position:absolute;
  top:var(--mouse-y, 50%);
  left:var(--mouse-x, 50%);
  width:0;
  height:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(136,197,64,.15) 0%, transparent 70%);
  transform:translate(-50%, -50%);
  transition:width 0.5s, height 0.5s;
  pointer-events:none;
}

.card:hover::before {
  width:400px;
  height:400px;
}

.card:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 20px 50px rgba(136,197,64,.25);
  border-color:var(--green-primary);
}

.card__icon-wrap{
  width:85px;
  height:85px;
  margin:0 auto 1.5rem;
  background:var(--gradient-primary);
  border-radius:50%;
  display:grid;
  place-items:center;
  transition:all 0.3s ease;
  box-shadow:0 10px 25px rgba(136,197,64,.3);
}

.card:hover .card__icon-wrap {
  transform:rotate(360deg) scale(1.15);
  box-shadow:0 15px 35px rgba(136,197,64,.5);
}

.card__icon{
  font-size:2.8rem;
  animation:bounce 2s ease-in-out infinite;
}

.card__title{
  font-size:1.4rem;
  margin-bottom:1rem;
  color:var(--green-dark);
  font-weight:700;
}

.card__text{
  color:#4b5563;
  line-height:1.8;
  font-size:1rem;
}

@media(max-width:768px) {
  .cards {
    grid-template-columns:1fr;
    gap:1.5rem;
  }

  .card {
    padding:1.75rem;
    border-radius:20px;
  }

  .card__icon-wrap {
    width:75px;
    height:75px;
  }

  .card__icon {
    font-size:2.5rem;
  }
}

/* ================= Team Section - Perfect Circles ================= */
.team{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:2.5rem;
  margin-top:3rem;
}

.team-member{
  background:#fff;
  padding:2rem;
  border-radius:24px;
  box-shadow:0 8px 24px rgba(136,197,64,.15);
  border:2px solid transparent;
  text-align:center;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  overflow:hidden;
}

.team-member::before {
  content:'';
  position:absolute;
  top:var(--mouse-y, 50%);
  left:var(--mouse-x, 50%);
  width:0;
  height:0;
  border-radius:50%;
  background:radial-gradient(circle, rgba(136,197,64,.08) 0%, transparent 70%);
  transform:translate(-50%, -50%);
  transition:width 0.5s, height 0.5s;
  pointer-events:none;
}

.team-member:hover::before {
  width:500px;
  height:500px;
}

.team-member:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(136,197,64,.25);
  border-color:var(--green-primary);
}

.team-member__photo{
  width:150px;
  height:150px;
  margin:0 auto 1.5rem;
  border-radius:50% !important;
  object-fit:cover;
  border:4px solid var(--green-primary);
  box-shadow:0 10px 25px rgba(136,197,64,.3);
  transition:all 0.3s ease;
}

.team-member:hover .team-member__photo {
  transform:scale(1.1) rotate(5deg);
  box-shadow:0 15px 35px rgba(136,197,64,.5);
}

.team-member__name{
  font-size:1.4rem;
  margin-bottom:0.5rem;
  color:var(--green-dark);
  font-weight:700;
}

.team-member__role{
  color:var(--green-primary);
  font-weight:600;
  margin-bottom:1rem;
  font-size:1.05rem;
}

.team-member__bio{
  color:#4b5563;
  line-height:1.7;
  margin-bottom:1.5rem;
  font-size:0.95rem;
}

.team-member__contact{
  display:flex;
  justify-content:center;
  gap:1rem;
}

.contact-link{
  width:45px;
  height:45px;
  border-radius:50%;
  background:var(--gradient-primary);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:1.3rem;
  transition:all 0.3s ease;
  box-shadow:0 4px 12px rgba(136,197,64,.3);
}

.contact-link:hover{
  transform:translateY(-3px) scale(1.1);
  box-shadow:0 8px 20px rgba(136,197,64,.5);
}

@media(max-width:768px) {
  .team {
    grid-template-columns:1fr;
    gap:2rem;
  }

  .team-member {
    padding:1.75rem;
  }

  .team-member__photo {
    width:130px;
    height:130px;
    border-radius:50% !important;
  }
}

/* ================= How It Works - Modern Steps ================= */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:2rem;
  margin-top:3rem;
}

.step{
  text-align:center;
  padding:2rem 1.5rem;
  position:relative;
  background:#fff;
  border-radius:24px;
  box-shadow:0 8px 24px rgba(136,197,64,.15);
  border:2px solid transparent;
  transition:all 0.3s ease;
}

.step:hover {
  transform:translateY(-5px);
  box-shadow:0 15px 35px rgba(136,197,64,.25);
  border-color:var(--green-primary);
}

.step__number{
  width:70px;
  height:70px;
  margin:0 auto 1.5rem;
  background:var(--gradient-primary);
  color:#fff;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:2rem;
  font-weight:700;
  box-shadow:0 10px 25px rgba(136,197,64,.3);
  transition:all 0.3s ease;
}

.step:hover .step__number {
  transform:scale(1.15) rotate(360deg);
  box-shadow:0 15px 35px rgba(136,197,64,.5);
}

.step h3{
  font-size:1.4rem;
  margin-bottom:1rem;
  color:var(--green-dark);
  font-weight:700;
}

.step p{
  color:#4b5563;
  line-height:1.7;
  font-size:0.95rem;
}

@media(max-width:768px) {
  .steps {
    grid-template-columns:1fr;
    gap:1.5rem;
  }

  .step {
    padding:1.5rem;
  }
}

/* ================= Stats Section ================= */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.stat-card {
  background: #fff;
  padding: 2.5rem;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(136,197,64,.15);
  border: 2px solid transparent;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(136,197,64,.25);
  border-color: var(--green-primary);
}

.stat-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  box-shadow: 0 10px 25px rgba(136,197,64,.3);
}

.stat-value {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--green-dark);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: var(--muted);
  font-size: 1rem;
}

@media(max-width:768px) {
  .stats-grid {
    grid-template-columns:1fr;
    gap:1.5rem;
  }
}

/* ================= Contact Section - Attractive Cards ================= */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.contact-card {
  background: #fff;
  padding: 2.5rem;
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(136,197,64,.15);
  border: 2px solid transparent;
  text-align: center;
  transition: all 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(136,197,64,.25);
  border-color: var(--green-primary);
}

.contact-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  box-shadow: 0 10px 25px rgba(136,197,64,.3);
  transition:all 0.3s ease;
}

.contact-card:hover .contact-icon {
  transform:scale(1.15) rotate(10deg);
  box-shadow: 0 15px 35px rgba(136,197,64,.5);
}

.contact-card h3 {
  color: var(--green-dark);
  font-size: 1.4rem;
  margin-bottom: 1rem;
  font-weight:700;
}

.contact-card p {
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.contact-card a {
  color: var(--green-dark);
  font-weight: 600;
  transition: color 0.3s ease;
}

.contact-card a:hover {
  color: var(--green-primary);
}

@media(max-width:768px) {
  .contact-grid {
    grid-template-columns:1fr;
    gap:1.5rem;
  }

  .contact-card {
    padding:2rem;
  }
}

/* ================= CTA Section ================= */
.cta-section{
  background:var(--gradient-primary);
  color:#fff;
  padding:4rem 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
  animation: float 20s ease-in-out infinite;
}

.cta-section > * {
  position: relative;
  z-index: 1;
}

.cta-section__title{
  font-size:clamp(1.6rem,3vw,2.5rem);
  margin:0 0 1rem;
  line-height:1.2;
  font-weight:700;
}

.cta-section__text{
  max-width:750px;
  margin:0 auto 2rem;
  font-size:1.1rem;
  line-height:1.8;
  opacity:.95;
}

.cta-section__buttons{
  display:flex;
  gap:1rem;
  justify-content:center;
  flex-wrap:wrap;
}

.btn--whatsapp{
  background:#25D366;
  color:#fff;
  font-size:1.1rem;
  padding:1rem 2rem;
  box-shadow:0 10px 28px rgba(37,211,102,.35);
  border-radius:16px;
}

.btn--whatsapp:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 14px 36px rgba(37,211,102,.45);
  background:#22c55e;
}

.btn--email{
  background:#fff;
  color:var(--green-dark);
  font-size:1.1rem;
  padding:1rem 2rem;
  box-shadow:0 10px 28px rgba(0,0,0,.15);
  border-radius:16px;
}

.btn--email:hover{
  transform:translateY(-4px) scale(1.02);
  background:#f0f9ff;
  box-shadow:0 14px 36px rgba(0,0,0,.2);
}

@media(max-width:768px) {
  .cta-section {
    padding:3rem 0;
  }

  .btn--whatsapp,
  .btn--email {
    padding:0.85rem 1.5rem;
    font-size:1rem;
  }
}

/* ================= Slider ================= */
.slider{
  position:relative;
  max-width:900px;
  margin:0 auto;
}

.slider__track{
  position:relative;
  border-radius:20px;
  overflow:hidden;
}

.slider__slide{
  display:none;
  width:100%;
  border-radius:20px;
  box-shadow:0 16px 40px rgba(136,197,64,.2);
  transition:transform 0.3s ease;
}

.slider__slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

.slider__slide:hover {
  transform:scale(1.02);
}

.slider__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  border:2px solid var(--green-primary);
  background:rgba(255,255,255,.98);
  font-size:1.5rem;
  padding:.7rem 1rem;
  color:var(--green-dark);
  cursor:pointer;
  transition:all .25s ease;
  z-index:10;
  box-shadow:0 8px 20px rgba(136,197,64,.3);
}

.slider__btn:hover{
  background:var(--green-primary);
  color:#fff;
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 12px 28px rgba(136,197,64,.5);
}

.slider__btn--prev{left:-50px}
.slider__btn--next{right:-50px}

.slider__dots{
  display:flex;
  justify-content:center;
  gap:.7rem;
  margin-top:1.5rem;
}

.dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#d1d5db;
  border:0;
  cursor:pointer;
  transition:all .25s ease;
}

.dot.is-active,.dot:hover{
  background:var(--green-dark);
  transform:scale(1.2);
}

@media(max-width:768px){
  .slider__btn--prev{left:10px}
  .slider__btn--next{right:10px}
}

/* ================= Video ================= */
.video{
  display:flex;
  justify-content:center;
  margin-top:2rem;
}

.video iframe{
  width:min(900px,90vw);
  aspect-ratio:16/9;
  border-radius:20px;
  border:4px solid var(--green-primary);
  box-shadow:0 16px 40px rgba(136,197,64,.2);
  transition:all 0.3s ease;
}

.video iframe:hover {
  transform:scale(1.02);
  box-shadow:0 20px 50px rgba(136,197,64,.3);
}

/* ================= About Us Section ================= */
.about-content {
  max-width: 850px;
  margin: 0 auto;
}

.about-content p {
  font-size: 1.1rem;
  line-height: 1.9;
  color: #4b5563;
  margin-bottom: 1.5rem;
}

/* ================= Floating WhatsApp Button ================= */
.whatsapp-float{
  position:fixed;
  bottom:30px;
  right:30px;
  width:65px;
  height:65px;
  background:#25D366;
  border-radius:50%;
  display:grid;
  place-items:center;
  box-shadow:0 8px 24px rgba(37,211,102,.4);
  z-index:100;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
  animation:pulse 2s ease-in-out infinite;
}

.whatsapp-float:hover{
  transform:scale(1.15) rotate(10deg);
  box-shadow:0 12px 32px rgba(37,211,102,.5);
  animation:none;
}

.whatsapp-float svg{
  width:32px;
  height:32px;
  fill:#fff;
}

/* ================= Footer ================= */
.footer{
  background:linear-gradient(180deg, var(--green-dark) 0%, #1a4d1b 100%);
  color:#fff;
  padding:4rem 0 2rem;
  position:relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}

.footer__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:3rem;
  margin-bottom:3rem;
}

.footer__section h3{
  font-size:1.25rem;
  margin-bottom:1.2rem;
  font-weight:700;
  letter-spacing:0.3px;
}

.footer__section p{
  opacity:.9;
  line-height:1.7;
}

.footer__links{
  list-style:none;
  padding:0;
  margin:0;
}

.footer__links li{
  margin-bottom:.8rem;
}

.footer__links a{
  display:inline-block;
  opacity:.9;
  transition:all .25s ease;
  padding:.3rem 0;
}

.footer__links a:hover{
  opacity:1;
  transform:translateX(5px);
  color:var(--green-primary);
}

.footer__contact{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.contact-item{
  display:flex;
  align-items:center;
  gap:.8rem;
  opacity:.9;
  transition:all .25s ease;
  padding:.5rem 0;
}

.contact-item:hover{
  opacity:1;
  transform:translateX(5px);
  color:var(--green-primary);
}

.contact-item span:first-child{
  font-size:1.3rem;
}

.footer__bottom{
  text-align:center;
  padding-top:2rem;
  border-top:1px solid rgba(255,255,255,.15);
  opacity:.9;
}

.footer__bottom p{
  margin:.5rem 0;
}

/* ================= RTL Support ================= */
html[dir="rtl"] .cards{text-align:right}
html[dir="rtl"] .footer__links a:hover,
html[dir="rtl"] .contact-item:hover{
  transform:translateX(-5px);
}
html[dir="rtl"] .lang-dropdown__menu {
  right:auto;
  left:0;
}
html[dir="rtl"] .whatsapp-float {
  right: auto;
  left: 30px;
}
html[dir="rtl"] .nav-menu__item a:hover {
  transform:translateX(-5px);
}

/* ================= Inline Display Helper ================= */
.inline {
  display: inline;
}


/* ╔════ 2 / 4  ▸  responsive.css ════╗ */
/* Labebo Responsive - Additional breakpoints */
@media (max-width: 900px) {
  .hidden-mobile { display: none !important; }
}
@media (min-width: 901px) {
  .hidden-desktop { display: none !important; }
}


/* ╔════ 3 / 4  ▸  custom.css ════╗ */
/* ===========================================
   LABEBO CUSTOM STYLES - Complete Responsive
   =========================================== */

/* ============ CSS Variables ============ */
:root {
  --green-primary: #88C540;
  --green-secondary: #6B9F3C;
  --green-dark: #236324;
  --text: #333;
  --muted: #666;
  --card: #f8f9fa;
  --surface: #fff;
  --border: #e0e0e0;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.15);
  --gradient-primary: linear-gradient(135deg, #236324 0%, #88C540 100%);
  --ring: 0 0 0 3px rgba(136, 197, 64, 0.3);
}

/* ============ Navbar Base ============ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--green-dark);
  padding: 15px 0;
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: rgba(35, 99, 36, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
}

.navbar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  gap: 20px;
}

/* ============ Responsive Logo ============ */
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand__logo--large {
  height: 80px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  margin-top: 5px;
  margin-bottom: -20px;
  position: relative;
  z-index: 100;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.2));
  transition: transform 0.3s ease;
}

.brand__logo--large:hover {
  transform: scale(1.03);
}

/* ============ Desktop Navigation ============ */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu__item a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  padding: 10px 5px;
  transition: all 0.3s ease;
  position: relative;
}

.nav-menu__item a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green-primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.nav-menu__item a:hover::after {
  transform: scaleX(1);
}

/* ============ Actions Container ============ */
.actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* ============ Language Dropdown ============ */
.lang-dropdown {
  position: relative;
}

.lang-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lang-dropdown__trigger:hover {
  background: rgba(255,255,255,0.25);
}

.lang-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 100px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 1001;
}

[dir="rtl"] .lang-dropdown__menu {
  right: auto;
  left: 0;
}

.lang-dropdown:hover .lang-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-dropdown__item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lang-dropdown__item:hover {
  background: var(--card);
  color: var(--green-primary);
}

.lang-dropdown__item.active {
  background: var(--green-primary);
  color: #fff;
}

/* ============ Login Dropdown ============ */
.login-dropdown {
  position: relative;
}

.login-dropdown__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--green-primary);
  color: #fff;
  border: none;
  border-radius: 25px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.login-dropdown__trigger:hover {
  background: var(--green-secondary);
  transform: translateY(-2px);
}

.login-dropdown__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  overflow: hidden;
  z-index: 1001;
}

[dir="rtl"] .login-dropdown__menu {
  right: auto;
  left: 0;
}

.login-dropdown:hover .login-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.login-dropdown__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.3s ease;
  border-bottom: 1px solid var(--border);
}

.login-dropdown__item:last-child {
  border-bottom: none;
}

.login-dropdown__item:hover {
  background: var(--card);
  color: var(--green-primary);
}

.login-dropdown__item i {
  width: 20px;
  color: var(--green-primary);
}

/* ============ Mobile Menu Toggle Button ============ */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
  background: rgba(255,255,255,0.2);
}

.mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
  margin: 3px 0;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ============ Mobile Menu Overlay ============ */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: #1a4d1a;
  background: linear-gradient(180deg, #1a4d1a 0%, #236324 50%, #2d7a2d 100%);
  z-index: 9999;
  padding-top: 100px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(100%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

[dir="rtl"] .mobile-menu {
  transform: translateX(-100%);
}

.mobile-menu.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.mobile-menu__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 30px 20px;
  min-height: calc(100vh - 100px);
}

/* ============ Mobile Menu Links ============ */
.mobile-menu__link {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 18px 25px;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  background: rgba(255,255,255,0.08);
  border-radius: 15px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
}

.mobile-menu__link:hover,
.mobile-menu__link:active {
  background: rgba(255,255,255,0.18);
  transform: scale(1.02);
  border-color: rgba(255,255,255,0.3);
}

/* ============ Mobile Language Toggle ============ */
.mobile-lang-toggle {
  display: flex;
  gap: 10px;
  margin-top: 25px;
  padding: 8px;
  background: rgba(0,0,0,0.2);
  border-radius: 30px;
}

.mobile-lang-btn {
  padding: 14px 30px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-size: 1rem;
  font-weight: 600;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mobile-lang-btn:hover {
  color: #fff;
}

.mobile-lang-btn.active {
  background: var(--green-primary);
  color: #fff;
  box-shadow: 0 4px 15px rgba(136, 197, 64, 0.4);
}

/* ============ Mobile Login Links ============ */
.mobile-login-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
  width: 100%;
  max-width: 320px;
}

.mobile-login-links .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 25px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.mobile-login-links .btn--primary {
  background: var(--green-primary);
  color: #fff;
  border: none;
}

.mobile-login-links .btn--primary:hover {
  background: var(--green-secondary);
  transform: translateY(-2px);
}

.mobile-login-links .btn--secondary {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
}

.mobile-login-links .btn--secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}

/* ============ Hero Slider ============ */
.hero-slider {
  position: relative;
  height: 500px;
  min-height: 400px;
  max-height: 600px;
  overflow: hidden;
  margin-top: 80px;
}

.has-slider .hero-slider {
  margin-top: 0;
}

.slider-container {
  position: relative;
  height: 100%;
}

.slides {
  position: relative;
  height: 100%;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(35, 99, 36, 0.8) 0%, rgba(136, 197, 64, 0.4) 100%);
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  max-width: 700px;
  padding: 0 25px;
  width: 100%;
}

.hero-content h1 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
  text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 35px;
  opacity: 0.95;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.slider-nav {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 10;
}

.slider-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-btn:hover {
  background: var(--green-primary);
  border-color: var(--green-primary);
  transform: scale(1.1);
}

.slider-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: var(--green-primary);
  transform: scale(1.3);
}

.dot:hover {
  background: rgba(255, 255, 255, 0.8);
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.btn--primary {
  background: var(--green-primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--green-secondary);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(136, 197, 64, 0.4);
}

.btn--secondary {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.5);
}

.btn--secondary:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}

.btn--whatsapp {
  background: #25D366;
  color: #fff;
}

.btn--whatsapp:hover {
  background: #1da851;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
}

/* ============ Sections ============ */
.section {
  padding: 80px 0;
}

.section--alt {
  background: var(--card);
}

.section__head {
  text-align: center;
  margin-bottom: 50px;
}

.section__head h2 {
  font-size: 2.2rem;
  color: var(--green-dark);
  margin-bottom: 15px;
}

.section__head .muted {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
}

/* ============ Cards ============ */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

.card {
  background: #fff;
  padding: 35px 30px;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.card__icon-wrap {
  width: 70px;
  height: 70px;
  background: var(--gradient-primary);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.card__icon {
  font-size: 2rem;
}

.card__icon-fa {
  font-size: 1.8rem;
  color: #fff;
}

.card__title {
  font-size: 1.3rem;
  color: var(--text);
  margin-bottom: 12px;
}

.card__text {
  color: var(--muted);
  line-height: 1.7;
}

/* ============ Specialization Cards ============ */
.spec-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.spec-cards .card {
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.spec-cards .card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.spec-cards .card:hover::before {
  transform: scaleX(1);
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-primary);
  font-weight: 600;
  margin-top: 15px;
  transition: gap 0.3s ease;
}

.card:hover .card__link {
  gap: 15px;
}

/* ============ Steps ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

.step {
  text-align: center;
  padding: 30px 20px;
}

.step__number {
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  margin: 0 auto 20px;
}

.step h3 {
  color: var(--text);
  margin-bottom: 10px;
}

.step p {
  color: var(--muted);
  line-height: 1.6;
}

/* ============ Video ============ */
.video {
  max-width: 800px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.video iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
}

/* ============ Team ============ */
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.team-member {
  text-align: center;
  padding: 30px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.team-member:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
}

.team-member__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  border: 4px solid var(--green-primary);
}

.team-member__name {
  color: var(--text);
  margin-bottom: 5px;
}

.team-member__role {
  color: var(--green-primary);
  font-weight: 500;
  margin-bottom: 10px;
}

.team-member__bio {
  color: var(--muted);
  font-size: 0.95rem;
}

/* ============ CTA Section ============ */
.cta-section {
  padding: 80px 0;
  background: var(--gradient-primary);
  text-align: center;
}

.cta-section__title {
  font-size: 2rem;
  color: #fff;
  margin-bottom: 15px;
}

.cta-section__text {
  color: rgba(255,255,255,0.9);
  font-size: 1.1rem;
  margin-bottom: 30px;
}

.cta-section__buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ Footer ============ */
.footer {
  background: var(--green-dark);
  color: #fff;
  padding: 60px 0 30px;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer__section h3 {
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.footer__section p {
  color: rgba(255,255,255,0.8);
  line-height: 1.7;
}

.footer__links {
  list-style: none;
  padding: 0;
}

.footer__links li {
  margin-bottom: 12px;
}

.footer__links a {
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer__links a:hover {
  color: var(--green-primary);
}

.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-item:hover {
  color: var(--green-primary);
}

.contact-item i {
  width: 20px;
  color: var(--green-primary);
}

.footer__bottom {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6);
}

/* ============ Social Links ============ */
.social-links {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.social-link {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #236324;
  color: #fff;
  font-size: 18px;
  transition: all 0.3s ease;
}

.social-link:hover {
  transform: translateY(-4px);
}

.social-link:nth-child(1):hover {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.social-link:nth-child(2):hover {
  background: #FF0000;
}

.social-link:nth-child(3):hover {
  background: #1877F2;
}

/* ============ Floating WhatsApp ============ */
.whatsapp-float {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: all 0.3s ease;
}

[dir="rtl"] .whatsapp-float {
  right: auto;
  left: 25px;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.5);
}

/* ============ Page Hero (Sub Pages) ============ */
.page-hero {
  position: relative;
  padding: 150px 0 80px;
  background: var(--gradient-primary);
  text-align: center;
  overflow: hidden;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="3" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="70" r="2" fill="rgba(255,255,255,0.1)"/></svg>');
  background-size: 100px 100px;
}

.page-hero h1 {
  font-size: 2.5rem;
  color: #fff;
  margin-bottom: 15px;
  position: relative;
}

.page-hero p {
  color: rgba(255,255,255,0.9);
  font-size: 1.15rem;
  position: relative;
}

.breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  position: relative;
}

.breadcrumb a,
.breadcrumb span {
  color: rgba(255,255,255,0.8);
  font-size: 0.95rem;
}

.breadcrumb a:hover {
  color: #fff;
}

.breadcrumb i {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.5);
}

/* ============ Service Detail Page ============ */
.service-detail {
  padding: 70px 0;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 50px;
}

.service-content {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.content-block h2 {
  font-size: 1.7rem;
  color: var(--green-dark);
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 3px solid var(--green-primary);
  display: inline-block;
}

.content-block p {
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 15px;
}

/* Conditions Grid */
.conditions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 25px;
}

.condition-item {
  background: var(--card);
  padding: 25px;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.condition-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.condition-icon {
  width: 55px;
  height: 55px;
  background: var(--gradient-primary);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.condition-icon i {
  font-size: 1.4rem;
  color: #fff;
}

.condition-item h4 {
  color: var(--text);
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.condition-item p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

/* Approach Steps */
.approach-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 25px;
}

.approach-step {
  display: flex;
  gap: 20px;
  padding: 22px;
  background: var(--card);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.approach-step:hover {
  transform: translateX(8px);
  box-shadow: var(--shadow-sm);
}

[dir="rtl"] .approach-step:hover {
  transform: translateX(-8px);
}

.step-num {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--green-primary);
  opacity: 0.3;
  line-height: 1;
}

.approach-step h4 {
  color: var(--text);
  margin-bottom: 6px;
}

.approach-step p {
  color: var(--muted);
  margin: 0;
}

/* Benefit List */
.benefit-list {
  list-style: none;
  margin-top: 20px;
  padding: 0;
}

.benefit-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

.benefit-list li i {
  color: var(--green-primary);
}

/* Sidebar */
.service-sidebar {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.sidebar-card {
  background: var(--card);
  padding: 28px;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

.sidebar-card h3 {
  color: var(--text);
  margin-bottom: 12px;
  font-size: 1.2rem;
}

.sidebar-card p {
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.6;
}

.sidebar-card .btn {
  width: 100%;
  justify-content: center;
}

.service-links {
  list-style: none;
  padding: 0;
}

.service-links li {
  margin-bottom: 10px;
}

.service-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  transition: all 0.3s ease;
}

.service-links a:hover {
  background: var(--green-primary);
  color: #fff;
  transform: translateX(5px);
}

[dir="rtl"] .service-links a:hover {
  transform: translateX(-5px);
}

.service-links a i {
  color: var(--green-primary);
  width: 20px;
}

.service-links a:hover i {
  color: #fff;
}

/* ============ Contact Page ============ */
.contact-section {
  padding: 70px 0;
}

.contact-grid-page {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-bottom: 50px;
}

.contact-card-large {
  background: var(--card);
  padding: 35px;
  border-radius: 20px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  display: block;
}

.contact-card-large:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}

.contact-card-large .contact-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.8rem;
}

.contact-card-large .contact-icon.whatsapp {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #fff;
}

.contact-card-large .contact-icon.phone {
  background: var(--gradient-primary);
  color: #fff;
}

.contact-card-large .contact-icon.email {
  background: linear-gradient(135deg, #EA4335, #C5221F);
  color: #fff;
}

.contact-card-large h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: var(--text);
}

.contact-card-large p {
  color: var(--muted);
  margin-bottom: 12px;
}

/* Contact Form */
.contact-form-section {
  background: var(--card);
  padding: 50px;
  border-radius: 24px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full-width {
  grid-column: span 2;
}

.form-group label {
  font-weight: 500;
  color: var(--text);
}

.form-group input,
.form-group textarea,
.form-group select {
  padding: 14px 18px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  transition: all 0.3s ease;
  background: #fff;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--green-primary);
  box-shadow: var(--ring);
}

.form-group textarea {
  resize: vertical;
  min-height: 130px;
}

/* ============ Animations ============ */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease forwards;
  animation-play-state: paused;
}

.animate-on-scroll.animate-delay-1 { animation-delay: 0.1s; }
.animate-on-scroll.animate-delay-2 { animation-delay: 0.2s; }
.animate-on-scroll.animate-delay-3 { animation-delay: 0.3s; }
.animate-on-scroll.animate-delay-4 { animation-delay: 0.4s; }
.animate-on-scroll.animate-delay-5 { animation-delay: 0.5s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============ Container ============ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ============ i18n Language Display ============ */
.i18n { display: none; }
[lang="en"] .i18n--en { display: block; }
[lang="en"] .i18n--en.inline { display: inline; }
[lang="ar"] .i18n--ar { display: block; }
[lang="ar"] .i18n--ar.inline { display: inline; }

/* ===========================================
   RESPONSIVE BREAKPOINTS
   =========================================== */

/* ============ Large Tablets & Small Laptops ============ */
@media (max-width: 1024px) {
  .service-grid {
    grid-template-columns: 1fr;
  }

  .service-sidebar {
    order: -1;
  }

  .conditions-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-content h1 {
    font-size: 2.4rem;
  }

  .section__head h2 {
    font-size: 2rem;
  }
}

/* ============ Tablets ============ */
@media (max-width: 900px) {
  .nav-menu,
  .login-dropdown,
  .lang-dropdown {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .brand__logo--large {
    height: 65px;
    max-width: 150px;
    margin-bottom: -15px;
  }

  .hero-slider {
    height: 450px;
    margin-top: 70px;
  }

  .has-slider .hero-slider {
    margin-top: 0;
  }

  .hero-content h1 {
    font-size: 2.2rem;
  }

  .hero-subtitle {
    font-size: 1.05rem;
  }

  .contact-grid-page {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .section {
    padding: 60px 0;
  }
}

/* ============ Mobile ============ */
@media (max-width: 768px) {
  .brand__logo--large {
    height: 55px;
    max-width: 130px;
    margin-bottom: -12px;
  }

  .navbar {
    padding: 20px 0;
  }

  .hero-slider {
    height: 420px;
    min-height: 380px;
    margin-top: 65px;
  }

  .has-slider .hero-slider {
    margin-top: 0;
  }

  .hero-content {
    padding: 0 20px;
  }

  .hero-content h1 {
    font-size: 1.9rem;
    margin-bottom: 15px;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 25px;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
    padding: 0 30px;
  }

  .hero-buttons .btn {
    width: 100%;
    justify-content: center;
  }

  .slider-nav {
    bottom: 15px;
  }

  .slider-btn {
    width: 38px;
    height: 38px;
  }

  .section {
    padding: 50px 0;
  }

  .section__head h2 {
    font-size: 1.7rem;
  }

  .section__head .muted {
    font-size: 1rem;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .spec-cards {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .team {
    grid-template-columns: 1fr;
  }

  .conditions-grid {
    grid-template-columns: 1fr;
  }

  .approach-step {
    flex-direction: column;
    gap: 15px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.full-width {
    grid-column: span 1;
  }

  .contact-form-section {
    padding: 30px 20px;
  }

  .page-hero {
    padding: 130px 0 60px;
  }

  .page-hero h1 {
    font-size: 2rem;
  }

  .cta-section {
    padding: 60px 0;
  }

  .cta-section__title {
    font-size: 1.7rem;
  }

  .footer__grid {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

  .social-links {
    justify-content: center;
  }

  .footer__contact {
    align-items: center;
  }

  .whatsapp-float {
    width: 52px;
    height: 52px;
    font-size: 26px;
    bottom: 20px;
    right: 20px;
  }

  [dir="rtl"] .whatsapp-float {
    right: auto;
    left: 20px;
  }
}

/* ============ Small Mobile ============ */
@media (max-width: 480px) {
  .brand__logo--large {
    height: 48px;
    max-width: 110px;
    margin-bottom: -10px;
  }

  .mobile-menu-toggle {
    width: 40px;
    height: 40px;
  }

  .hero-slider {
    height: 400px;
    min-height: 350px;
    margin-top: 60px;
  }

  .has-slider .hero-slider {
    margin-top: 0;
  }

  .hero-content h1 {
    font-size: 1.6rem;
  }

  .hero-subtitle {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }

  .btn {
    padding: 12px 22px;
    font-size: 14px;
  }

  .section__head h2 {
    font-size: 1.5rem;
  }

  .card {
    padding: 25px 20px;
  }

  .page-hero {
    padding: 120px 0 50px;
  }

  .page-hero h1 {
    font-size: 1.7rem;
  }

  .page-hero p {
    font-size: 1rem;
  }

  .content-block h2 {
    font-size: 1.4rem;
  }

  .sidebar-card {
    padding: 22px;
  }

  .mobile-menu__link {
    padding: 15px 20px;
    font-size: 1rem;
  }

  .mobile-lang-btn {
    padding: 12px 22px;
    font-size: 0.95rem;
  }

  .cta-section__title {
    font-size: 1.5rem;
  }

  .footer {
    padding: 50px 0 25px;
  }
}

/* ============ Extra Small Mobile ============ */
@media (max-width: 360px) {
  .brand__logo--large {
    height: 42px;
    max-width: 95px;
  }

  .hero-content h1 {
    font-size: 1.4rem;
  }

  .hero-subtitle {
    font-size: 0.9rem;
  }

  .section__head h2 {
    font-size: 1.35rem;
  }

  .mobile-menu__link {
    padding: 12px 15px;
    font-size: 0.95rem;
  }
}
/* ===========================================
   LABEBO - MOBILE MENU FIX
   Add this at the END of your custom.css
   =========================================== */

/* ============ FORCE HIDE DESKTOP ELEMENTS ON MOBILE ============ */
@media (max-width: 900px) {
  .nav-menu,
  .login-dropdown,
  .lang-dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  .mobile-menu-toggle {
    display: flex !important;
  }
}

/* ============ MOBILE MENU - COMPLETE OVERRIDE ============ */
.mobile-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: #1a4d1a !important;
  background: linear-gradient(180deg, #0d2e0d 0%, #1a4d1a 30%, #236324 70%, #2d7a2d 100%) !important;
  z-index: 99999 !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-100%);
  transition: all 0.4s ease;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

[dir="rtl"] .mobile-menu {
  transform: translateY(-100%);
}

.mobile-menu.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

/* ============ MOBILE MENU CONTENT ============ */
.mobile-menu__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 15px !important;
  padding: 120px 25px 40px 25px !important;
  min-height: 100vh !important;
  box-sizing: border-box !important;
}

/* ============ MOBILE MENU LINKS ============ */
.mobile-menu__link {
  display: block !important;
  width: 100% !important;
  max-width: 300px !important;
  padding: 18px 30px !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  text-align: center !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50px !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

.mobile-menu__link:hover,
.mobile-menu__link:active,
.mobile-menu__link:focus {
  background: rgba(255, 255, 255, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  transform: scale(1.03) !important;
  color: #ffffff !important;
}

/* ============ MOBILE LANGUAGE TOGGLE ============ */
.mobile-lang-toggle {
  display: flex !important;
  flex-direction: row !important;
  gap: 0 !important;
  margin-top: 30px !important;
  margin-bottom: 20px !important;
  padding: 6px !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border-radius: 50px !important;
  border: 2px solid rgba(255, 255, 255, 0.15) !important;
}

.mobile-lang-btn {
  padding: 14px 35px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.mobile-lang-btn:hover {
  color: #ffffff !important;
}

.mobile-lang-btn.active {
  background: #88C540 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(136, 197, 64, 0.5) !important;
}

/* ============ MOBILE LOGIN LINKS ============ */
.mobile-login-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  margin-top: 25px !important;
  width: 100% !important;
  max-width: 300px !important;
  padding: 0 !important;
}

.mobile-login-links .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  padding: 18px 30px !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  border-radius: 50px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
}

.mobile-login-links .btn--primary {
  background: #88C540 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 25px rgba(136, 197, 64, 0.4) !important;
}

.mobile-login-links .btn--primary:hover,
.mobile-login-links .btn--primary:active {
  background: #6B9F3C !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 35px rgba(136, 197, 64, 0.5) !important;
}

.mobile-login-links .btn--secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
}

.mobile-login-links .btn--secondary:hover,
.mobile-login-links .btn--secondary:active {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #ffffff !important;
}

/* ============ MOBILE MENU TOGGLE BUTTON ============ */
.mobile-menu-toggle {
  display: none;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: 48px !important;
  height: 48px !important;
  padding: 12px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  z-index: 999999 !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

.mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

.mobile-menu-toggle span {
  display: block !important;
  width: 24px !important;
  height: 3px !important;
  background: #ffffff !important;
  border-radius: 3px !important;
  transition: all 0.3s ease !important;
  margin: 3px 0 !important;
}

.mobile-menu-toggle.active {
  background: rgba(255, 255, 255, 0.2) !important;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px) !important;
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0 !important;
  transform: translateX(-15px) !important;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px) !important;
}

/* ============ NAVBAR ADJUSTMENTS ============ */
@media (max-width: 900px) {
  .navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100000 !important;
    background: #236324 !important;
    padding: 10px 0 !important;
  }

  .navbar__row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 15px !important;
  }

  .brand__logo--large {
    height: 55px !important;
    width: auto !important;
    max-width: 130px !important;
  }

  .actions {
    display: flex !important;
    align-items: center !important;
  }
}

/* ============ SMALL MOBILE ADJUSTMENTS ============ */
@media (max-width: 480px) {
  .mobile-menu__content {
    padding: 110px 20px 30px 20px !important;
    gap: 12px !important;
  }

  .mobile-menu__link {
    padding: 16px 25px !important;
    font-size: 1.05rem !important;
    max-width: 280px !important;
  }

  .mobile-lang-toggle {
    margin-top: 25px !important;
  }

  .mobile-lang-btn {
    padding: 12px 28px !important;
    font-size: 0.95rem !important;
  }

  .mobile-login-links .btn {
    padding: 16px 25px !important;
    font-size: 1rem !important;
  }

  .brand__logo--large {
    height: 48px !important;
    max-width: 110px !important;
  }

  .mobile-menu-toggle {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ============ EXTRA SMALL MOBILE ============ */
@media (max-width: 360px) {
  .mobile-menu__content {
    padding: 100px 15px 25px 15px !important;
    gap: 10px !important;
  }

  .mobile-menu__link {
    padding: 14px 20px !important;
    font-size: 1rem !important;
    max-width: 260px !important;
  }

  .mobile-lang-btn {
    padding: 10px 22px !important;
  }

  .mobile-login-links .btn {
    padding: 14px 20px !important;
    font-size: 0.95rem !important;
  }

  .brand__logo--large {
    height: 42px !important;
    max-width: 95px !important;
  }
}

/* ============ ENSURE PROPER Z-INDEX STACKING ============ */
.navbar {
  z-index: 100000 !important;
}

.mobile-menu {
  z-index: 99999 !important;
}

.mobile-menu-toggle {
  z-index: 999999 !important;
}

.whatsapp-float {
  z-index: 99998 !important;
}
/* ===========================================
   SCREENSHOT GALLERY SLIDER - Pages Only
   =========================================== */

.screenshot-gallery {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8faf5 0%, #ffffff 50%, #f8faf5 100%);
  overflow: hidden;
}

.screenshot-gallery .section__head {
  text-align: center;
  margin-bottom: 50px;
}

.screenshot-gallery .section__head h2 {
  font-size: 2.2rem;
  color: var(--green-dark);
  margin-bottom: 15px;
}

.screenshot-gallery .section__head p {
  color: var(--muted);
  font-size: 1.1rem;
}

.gallery-tabs {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 40px;
}

.gallery-tab {
  padding: 14px 35px;
  border: 2px solid var(--green-primary);
  background: transparent;
  color: var(--green-dark);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}

.gallery-tab:hover {
  background: rgba(136, 197, 64, 0.1);
  transform: translateY(-2px);
}

.gallery-tab.active {
  background: var(--gradient-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 25px rgba(136, 197, 64, 0.4);
}

.gallery-tab i { font-size: 1.1rem; }

.gallery-slider-wrapper {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 70px;
}

.gallery-slider {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.gallery-slides { display: none; }
.gallery-slides.active { display: block; }

.gallery-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.gallery-slide { min-width: 100%; position: relative; }

.gallery-slide img {
  width: 100%;
  height: auto;
  max-height: 550px;
  object-fit: contain;
  display: block;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 55px;
  height: 55px;
  background: var(--surface);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
  z-index: 10;
  color: var(--green-dark);
  font-size: 1.2rem;
}

.gallery-nav:hover {
  background: var(--green-primary);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 10px 30px rgba(136, 197, 64, 0.4);
}

.gallery-nav--prev { left: 0; }
.gallery-nav--next { right: 0; }
[dir="rtl"] .gallery-nav--prev { left: auto; right: 0; }
[dir="rtl"] .gallery-nav--next { right: auto; left: 0; }

.gallery-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.gallery-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--green-primary);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.gallery-dot:hover {
  background: rgba(136, 197, 64, 0.3);
  transform: scale(1.2);
}

.gallery-dot.active {
  background: var(--green-primary);
  transform: scale(1.3);
  box-shadow: 0 0 15px rgba(136, 197, 64, 0.5);
}

.gallery-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--green-primary);
  border-radius: 0 0 20px 20px;
  width: 0%;
  transition: width 0.1s linear;
  z-index: 10;
}

.gallery-features {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.gallery-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--surface);
  border-radius: 50px;
  box-shadow: var(--shadow-sm);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.gallery-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.gallery-feature i {
  color: var(--green-primary);
  font-size: 1.1rem;
}

@media (max-width: 900px) {
  .screenshot-gallery { padding: 60px 0; }
  .gallery-slider-wrapper { padding: 0 50px; }
  .gallery-nav { width: 45px; height: 45px; font-size: 1rem; }
  .gallery-tabs { flex-direction: column; align-items: center; gap: 10px; }
  .gallery-tab { width: 100%; max-width: 280px; justify-content: center; }
  .gallery-features { gap: 15px; padding: 0 15px; }
  .gallery-feature { padding: 10px 16px; font-size: 0.85rem; }
}

@media (max-width: 480px) {
  .screenshot-gallery .section__head h2 { font-size: 1.6rem; }
  .gallery-slider-wrapper { padding: 0 45px; }
  .gallery-nav { width: 38px; height: 38px; font-size: 0.9rem; }
  .gallery-dots { gap: 8px; }
  .gallery-dot { width: 10px; height: 10px; }
  .gallery-feature { width: 100%; justify-content: center; }
}


.animate-on-scroll {
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
}

/* FIX: Fit images inside slider */
.gallery-slide img {
  width: 100% !important;
  height: 500px !important;
  object-fit: cover !important;
  background: #1a1a2e !important;
}

@media (max-width: 900px) {
  .gallery-slide img { height: 350px !important; }
}

@media (max-width: 480px) {
  .gallery-slide img { height: 250px !important; }
}

/* ===========================================
   MODERN LIGHTBOX / IMAGE POPUP
   =========================================== */

.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.active {
  opacity: 1;
  visibility: visible;
}

/* Backdrop with blur and dim */
.lightbox__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}

/* Image container */
.lightbox__content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}

.lightbox.active .lightbox__content {
  transform: scale(1) translateY(0);
}

/* The image itself */
.lightbox__image {
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.1);
  object-fit: contain;
  display: block;
}

/* Close button */
.lightbox__close {
  position: absolute;
  top: -50px;
  right: 0;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #fff;
  font-size: 20px;
}

.lightbox__close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1) rotate(90deg);
}

/* Navigation arrows */
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #fff;
  font-size: 18px;
  z-index: 10;
}

.lightbox__nav:hover {
  background: var(--green-primary);
  border-color: var(--green-primary);
  transform: translateY(-50%) scale(1.1);
}

.lightbox__nav--prev {
  left: -70px;
}

.lightbox__nav--next {
  right: -70px;
}

[dir="rtl"] .lightbox__nav--prev {
  left: auto;
  right: -70px;
}

[dir="rtl"] .lightbox__nav--next {
  right: auto;
  left: -70px;
}

/* Image counter indicator */
.lightbox__counter {
  position: absolute;
  bottom: -45px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.3);
  padding: 8px 20px;
  border-radius: 30px;
  backdrop-filter: blur(10px);
}

/* Caption */
.lightbox__caption {
  position: absolute;
  bottom: -90px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make gallery slides clickable */
.gallery-slide {
  cursor: zoom-in;
}

.gallery-slide img {
  cursor: zoom-in;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-slide:hover img {
  transform: scale(1.02);
}

/* Body scroll lock when lightbox is open */
body.lightbox-open {
  overflow: hidden;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .lightbox__nav {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .lightbox__nav--prev {
    left: 10px;
  }

  .lightbox__nav--next {
    right: 10px;
  }

  [dir="rtl"] .lightbox__nav--prev {
    left: auto;
    right: 10px;
  }

  [dir="rtl"] .lightbox__nav--next {
    right: auto;
    left: 10px;
  }

  .lightbox__close {
    top: 10px;
    right: 10px;
    position: fixed;
  }

  .lightbox__counter {
    bottom: 20px;
  }

  .lightbox__image {
    border-radius: 12px;
  }
}

@media (max-width: 480px) {
  .lightbox__nav {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .lightbox__content {
    max-width: 95vw;
  }

  .lightbox__image {
    max-width: 95vw;
    border-radius: 8px;
  }

  .lightbox__counter {
    font-size: 12px;
    padding: 6px 15px;
  }
}


/* ╔════ 4 / 4  ▸  labebo-new.css (V6 / Clinic OS) ════╗ */
/* ══════════════════════════════════════════════════════
   LABEBO — labebo-new.css  (V6 / Clinic OS redesign)
   Design language extracted from the Stitch "Clinic OS Narrative".
   Brand: Lime Green #88C540 | Forest Green #236324
   Used by: indexnew.php
   NOTE: indexnew.php loads Tailwind via CDN; this file holds the
   custom design tokens, components and the dynamic-slider styles
   reused from the legacy games/video carousels.
   ══════════════════════════════════════════════════════ */

/* ── 0. TOKENS ─────────────────────────────────────── */
:root{
  --primary:#88C540;        /* lime / signal */
  --primary-dark:#236324;   /* forest / brand */
  --primary-deep:#1a4a1b;
  --primary-grad:linear-gradient(135deg,#88C540 0%,#5faa1a 100%);
  --bg:#fafdf8;
  --surface:#ffffff;
  --ink:#1e2a1e;
  --ink-soft:#5a6b58;
  --line:rgba(136,197,64,.15);
  --r-sm:12px; --r:20px; --r-lg:28px; --r-xl:32px;
  --shadow-sm:0 4px 20px rgba(35,99,36,.05);
  --shadow-md:0 12px 30px rgba(35,99,36,.10);
  --shadow-lg:0 20px 50px rgba(35,99,36,.16);
  --ease:cubic-bezier(.25,.46,.45,.94);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Cairo','IBM Plex Sans Arabic',sans-serif;
  background:var(--bg);
  color:var(--ink);
  margin:0;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1{font-weight:800;}
h2,h3{font-weight:700;}
img{max-width:100%;display:block;}
a{text-decoration:none;}

.l-container{max-width:1280px;margin:0 auto;padding:0 24px;}
.text-brand{color:var(--primary);}
.text-dark{color:var(--primary-dark);}

/* ── 1. SHARED PIECES ──────────────────────────────── */
.btn-primary{
  background:var(--primary-grad);
  color:#fff;border:none;border-radius:60px;
  padding:14px 32px;font-family:inherit;font-weight:700;font-size:1rem;
  cursor:pointer;transition:all .3s var(--ease);display:inline-flex;
  align-items:center;gap:10px;text-align:center;justify-content:center;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(136,197,64,.32);}
.btn-ghost{
  background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.22);
  border-radius:60px;padding:14px 28px;font-family:inherit;font-weight:600;
  cursor:pointer;transition:all .3s var(--ease);display:inline-flex;align-items:center;
  gap:10px;backdrop-filter:blur(6px);
}
.btn-ghost:hover{background:rgba(255,255,255,.14);}

.section-tag{
  display:inline-flex;align-items:center;gap:8px;padding:6px 16px;
  background:rgba(136,197,64,.08);border:1px solid rgba(136,197,64,.22);
  border-radius:50px;font-size:.78rem;font-weight:700;color:var(--primary-dark);
  margin-bottom:18px;
}
.section-tag--light{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);color:#fff;}
.section-tag .material-symbols-outlined{font-size:1rem;}

.glass-card{
  background:rgba(255,255,255,.98);backdrop-filter:blur(12px);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  border-radius:var(--r-lg);transition:all .3s ease;
}
.glass-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}

.immersive-dark{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,#1a4a1b 0%,#236324 35%,#2d7a30 65%,#1e5520 100%);
}
.immersive-dark::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(136,197,64,.10) 1px,transparent 1px);
  background-size:32px 32px;
}
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;}
.no-scrollbar::-webkit-scrollbar{display:none;}
.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}

/* ── 2. NAVBAR ─────────────────────────────────────── */
.lnav{
  position:fixed;top:0;left:0;right:0;z-index:1000;height:76px;
  background:rgba(35,99,36,.96);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);transition:all .3s ease;
}
.lnav--scrolled{box-shadow:0 6px 24px rgba(0,0,0,.18);height:68px;}
.lnav__row{display:flex;align-items:center;justify-content:space-between;height:100%;}
.lnav__left{display:flex;align-items:center;gap:42px;}
.lnav__brand{display:flex;align-items:center;gap:10px;}
.lnav__logo{height:44px;width:auto;transition:transform .3s ease;}
.lnav__brand:hover .lnav__logo{transform:scale(1.04);}
.lnav__brandtext{color:#fff;font-weight:800;font-size:1.25rem;}
.lnav__menu{display:flex;gap:30px;list-style:none;margin:0;padding:0;}
.lnav__menu a{color:rgba(255,255,255,.72);font-weight:600;font-size:.92rem;transition:color .25s;}
.lnav__menu a:hover{color:var(--primary);}
.lnav__actions{display:flex;align-items:center;gap:14px;}
.lnav__login{color:#fff;font-weight:600;font-size:.92rem;padding:8px 14px;transition:color .25s;}
.lnav__login:hover{color:var(--primary);}
.lnav__cta{
  background:var(--primary-grad);color:#fff;border-radius:60px;
  padding:11px 26px;font-weight:700;font-size:.92rem;transition:all .3s var(--ease);
}
.lnav__cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(136,197,64,.3);}

/* mobile dropdown */
.mobile-dropdown{position:relative;display:none;}
.mobile-dropdown__trigger{
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);
  border-radius:12px;cursor:pointer;color:#fff;
}
.mobile-dropdown__menu{
  position:fixed;top:72px;left:10px;right:10px;max-height:80vh;overflow-y:auto;
  background:#fff;border-radius:20px;box-shadow:0 16px 50px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:99999;
}
.mobile-dropdown.active .mobile-dropdown__menu{opacity:1;visibility:visible;transform:translateY(0);}
.mobile-dropdown__label{display:block;padding:12px 18px 5px;font-size:.68rem;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.08em;}
.mobile-dropdown__item{display:flex;align-items:center;gap:12px;padding:13px 18px;color:#333;font-size:.95rem;font-weight:600;transition:background .2s;}
.mobile-dropdown__item:hover{background:#f5fbef;}
.mobile-dropdown__item .material-symbols-outlined{color:var(--primary);font-size:1.25rem;}
.mobile-dropdown__divider{height:1px;background:#f0f0f0;margin:6px 14px;}
.mobile-book-cta{display:block;margin:12px 14px;background:var(--primary-grad);color:#fff;border-radius:14px;padding:14px 18px;text-align:center;font-weight:800;}

/* ── 3. HERO + SLIDER ──────────────────────────────── */
.lhero{
  position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;
  padding:118px 0 70px;
  background:#143714;
}
/* Background image slideshow */
.lhero__bg{position:absolute;inset:0;z-index:0;}
.lhero__bgslide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease;}
.lhero__bgslide.active{opacity:1;}
/* Green tint over the photo so text stays readable */
.lhero__overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(20,55,20,.92) 0%,rgba(25,65,22,.82) 42%,rgba(30,80,25,.6) 70%,rgba(15,40,12,.45) 100%);
}
.lhero__inner{position:relative;z-index:10;display:grid;grid-template-columns:1fr 561px;gap:50px;align-items:center;}
.lhero__copy{position:relative;min-width:0;min-height:340px;}        /* fixed copy area so dots don't jump */
.lhero__copy h1,.lhero__copy .lhero__p{overflow-wrap:break-word;max-width:560px;}
.lhero__slide-copy{display:none;animation:heroFade .6s ease;}
.lhero__slide-copy.active{display:block;}
@keyframes heroFade{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.lhero h1{font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.3;margin:0 0 16px;}
.lhero h1 .accent{color:var(--primary);}
.lhero__p{font-size:1.05rem;color:rgba(255,255,255,.85);line-height:1.8;max-width:34rem;margin:0 0 26px;}
.lhero__buttons{display:flex;flex-wrap:wrap;gap:14px;}
.lhero__dots{display:flex;gap:9px;margin-top:30px;}
.lhero__dots button{width:11px;height:11px;border-radius:50%;border:none;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s;padding:0;}
.lhero__dots button.active{background:var(--primary);width:30px;border-radius:6px;}
/* Visual: fixed-ratio stage; each photo absolutely fills it, so a different
   image ratio can NEVER change the hero height (fixes the slide-2 jump). */
.lhero__visual{position:relative;width:100%;height:440px;border-radius:var(--r-xl);overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.4);}
.lhero__photo{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:opacity .9s ease;will-change:opacity;}
.lhero__photo.active{opacity:1;}
.lhero__photo img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;}
.lhero__photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(15,40,12,.45),transparent 55%);}

/* ── 4. EVIDENCE / STATS BAR ───────────────────────── */
.lstats{background:#fff;border-bottom:1px solid var(--line);padding:40px 0;}
.lstats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center;}
.lstats__grid--3{grid-template-columns:repeat(3,1fr);max-width:840px;margin:0 auto;}
.lstats__num{font-size:clamp(2rem,3.4vw,2.7rem);font-weight:800;color:var(--primary-dark);line-height:1;margin-bottom:8px;letter-spacing:-.02em;}
.lstats__num .text-brand{color:var(--primary);}
.lstats__label{font-size:.78rem;font-weight:700;color:var(--ink-soft);letter-spacing:.04em;}

/* ── SECTIONS (tightened spacing — feedback #6) ────── */
.section{padding:64px 0;}
.section--soft{background:#f5fbef;}
.section--tight{padding:48px 0;}
.section__head{text-align:center;max-width:640px;margin:0 auto 38px;}
.section__head--tight{margin-bottom:26px;}

/* ── 5. SECTION HEADERS ────────────────────────────── */
.section__head h2{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--primary-dark);margin:0 0 14px;}
.section__head h2.on-dark{color:#fff;}
.section__head p{color:var(--ink-soft);font-size:1.05rem;line-height:1.8;margin:0;}
.section__head p.on-dark{color:rgba(255,255,255,.8);}

/* ── 6. BENTO HUMAN STORY ──────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:28px;align-items:stretch;}
.bento__main{grid-column:span 8;position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/9;box-shadow:var(--shadow-md);background:#0c2c0d;}
.bento__main iframe,.bento__main video,.bento__main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;}
.bento__main-grad{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.18) 55%,transparent);pointer-events:none;}
.bento__main-cap{position:absolute;right:36px;left:36px;bottom:34px;color:#fff;pointer-events:none;}
.bento__chip{display:inline-block;background:var(--primary);color:#fff;font-size:.72rem;font-weight:800;padding:6px 16px;border-radius:50px;margin-bottom:14px;}
.bento__main-cap h3{font-size:clamp(1.3rem,2.4vw,1.9rem);margin:0 0 6px;}
.bento__main-cap p{font-size:.95rem;color:rgba(255,255,255,.85);margin:0;max-width:36rem;line-height:1.7;}
.bento__side{grid-column:span 4;background:var(--primary-dark);border-radius:var(--r-xl);padding:24px;color:#fff;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.08);}
.bento__side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.bento__side-head h3{font-size:1.12rem;margin:0;}
.bento__reels{position:relative;flex-grow:1;border-radius:18px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.08);}
.bento__reel{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;}
.bento__reel.active{opacity:1;}
.bento__reel iframe,.bento__reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;}
.bento__reel-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.18);}
.bento__dots{display:flex;justify-content:center;gap:9px;margin-top:18px;}
.bento__dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s;padding:0;}
.bento__dots button.active{background:var(--primary);width:26px;border-radius:6px;}

/* ── 7. STEPS — cards with connecting arrows ──────────── */
.lsteps{display:flex;align-items:stretch;justify-content:center;gap:18px;position:relative;z-index:2;max-width:1180px;margin:10px auto 0;}
.lstep{flex:1;min-width:0;position:relative;background:#fff;border:1px solid #edf4e4;border-radius:22px;padding:28px 24px;text-align:center;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;box-shadow:0 12px 32px rgba(35,99,36,.08);}
.lstep:hover{transform:translateY(-6px);border-color:rgba(136,197,64,.5);box-shadow:0 22px 48px rgba(35,99,36,.15);}
.lstep__top{display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
/* bigger green chip holding the icon */
.lstep__chip{position:relative;width:84px;height:84px;border-radius:22px;background:linear-gradient(135deg,#f0f9e2,#e3f3d0);border:1.5px solid rgba(136,197,64,.35);display:flex;align-items:center;justify-content:center;transition:all .35s var(--ease);}
.lstep:hover .lstep__chip{background:var(--primary-grad);border-color:transparent;box-shadow:0 10px 22px rgba(136,197,64,.4);}
.lstep__chip .material-symbols-outlined{font-size:2.5rem;color:var(--primary);transition:color .35s;}
.lstep:hover .lstep__chip .material-symbols-outlined{color:#fff;}
.lstep h4{margin:0 0 8px;color:var(--primary-dark);font-size:1.1rem;}
.lstep__n{color:var(--primary);font-weight:700;font-size:.95rem;opacity:.7;margin-left:2px;}
.lstep p{margin:0;font-size:.86rem;color:var(--ink-soft);line-height:1.75;}
/* connecting arrow between cards */
.lstep__arrow{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:26px;color:rgba(136,197,64,.7);}
.lstep__arrow .material-symbols-outlined{font-size:2.4rem;font-weight:300;}

/* ── 8. SEGMENT ROUTING CARDS ──────────────────────── */
.lsegments{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.lsegment{padding:28px;display:flex;flex-direction:column;}
.lsegment__head{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.lsegment__icon{flex-shrink:0;width:52px;height:52px;border-radius:16px;background:rgba(136,197,64,.12);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;}
.lsegment__icon .material-symbols-outlined{font-size:1.75rem;}
.lsegment h3{font-size:1.4rem;color:var(--primary-dark);margin:0;}
.lsegment p{font-size:.92rem;color:var(--ink-soft);line-height:1.75;margin:0 0 18px;flex-grow:1;}
.lsegment__feat{display:flex;align-items:center;gap:10px;color:var(--primary-dark);font-size:.82rem;font-weight:700;padding-top:14px;border-top:1px solid var(--line);margin-bottom:16px;}
.lsegment__feat .material-symbols-outlined{color:var(--primary);font-size:1.2rem;}
.lsegment__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:14px;background:var(--primary-dark);color:#fff;font-weight:700;font-size:.92rem;transition:all .3s var(--ease);}
.lsegment__btn:hover{background:var(--primary);transform:translateY(-2px);}

/* ── 9. ABOUT — من نحن ─────────────────────────────── */
.labout{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.labout__copy h2{font-size:clamp(1.6rem,2.8vw,2.2rem);color:var(--primary-dark);margin:0 0 16px;}
.labout__copy p{color:var(--ink-soft);font-size:1rem;line-height:1.9;margin:0 0 16px;}
.lbtn-text{display:inline-flex;align-items:center;gap:8px;color:var(--primary-dark);font-weight:700;margin-top:6px;transition:color .25s;}
.lbtn-text:hover{color:var(--primary);}
.labout__gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:16px;}
.labout__img{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);height:160px;}
.labout__img--tall{grid-row:span 2;height:100%;}
.labout__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;}
.labout__img:hover img{transform:scale(1.06);}
.labout__kicker{display:inline-flex;align-items:center;gap:8px;font-size:1rem;font-weight:800;color:var(--primary-dark);margin-bottom:14px;}
.labout__kicker .material-symbols-outlined{color:var(--primary);}

/* Clinic OS essence band */
.labout-essence{display:flex;gap:22px;align-items:flex-start;background:rgba(136,197,64,.07);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 32px;margin:40px 0;}
.labout-essence__icon{flex-shrink:0;width:58px;height:58px;border-radius:16px;background:var(--primary-grad);color:#fff;display:flex;align-items:center;justify-content:center;}
.labout-essence__icon .material-symbols-outlined{font-size:1.8rem;}
.labout-essence h3{margin:0 0 8px;color:var(--primary-dark);font-size:1.2rem;}
.labout-essence p{margin:0;color:var(--ink-soft);line-height:1.9;font-size:.97rem;}

/* Why Labebo */
.labout-why-title{text-align:center;color:var(--primary-dark);font-size:clamp(1.4rem,2.4vw,1.9rem);margin:0 0 30px;}
.labout-why{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:40px;}
.labout-why__card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;box-shadow:var(--shadow-sm);transition:all .3s var(--ease);}
.labout-why__card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.labout-why__emoji{font-size:2rem;display:block;margin-bottom:14px;}
.labout-why__card h4{margin:0 0 10px;color:var(--primary-dark);font-size:1.05rem;}
.labout-why__card p{margin:0;color:var(--ink-soft);font-size:.88rem;line-height:1.8;}

/* Powered by */
.labout-powered{display:flex;align-items:flex-start;gap:14px;background:var(--primary-dark);color:#fff;border-radius:var(--r-lg);padding:26px 30px;}
.labout-powered .material-symbols-outlined{color:var(--primary);font-size:1.6rem;flex-shrink:0;}
.labout-powered p{margin:0;line-height:1.9;font-size:.95rem;color:rgba(255,255,255,.88);}
.labout-powered strong{color:#fff;}

/* Team grid */
.lteam{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.lteam__card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 18px;text-align:center;box-shadow:var(--shadow-sm);transition:all .3s var(--ease);}
.lteam__card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.lteam__avatar{position:relative;width:88px;height:88px;margin:0 auto 14px;}
.lteam__avatar img{width:88px;height:88px;border-radius:50%;object-fit:cover;}
.lteam__initials{width:88px;height:88px;border-radius:50%;background:var(--primary-grad);color:#fff;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;}
.lteam__card h4{margin:0 0 5px;color:var(--primary-dark);font-size:1rem;}
.lteam__role{margin:0 0 10px;color:var(--primary);font-size:.74rem;font-weight:700;}
.lteam__bio{margin:0;color:var(--ink-soft);font-size:.8rem;line-height:1.7;}

/* ── 10. TEAM (partner + therapists) ───────────────── */
.partner-card{display:block;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);padding:26px;margin-bottom:34px;transition:all .3s var(--ease);border:1px solid var(--line);}
.partner-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.partner-card__inner{display:flex;align-items:center;gap:22px;}
.partner-logo-img{width:96px;height:96px;border-radius:18px;object-fit:cover;flex-shrink:0;}
.partner-card__body h3{margin:0 0 6px;color:var(--primary-dark);font-size:1.3rem;}
.partner-card__badge{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;color:var(--primary);background:rgba(136,197,64,.12);padding:4px 12px;border-radius:50px;margin-bottom:8px;}
.partner-card__body p{margin:0;color:var(--ink-soft);font-size:.9rem;line-height:1.7;}
.therapists-title{text-align:center;margin-bottom:26px;}
.therapists-title h3{display:inline-flex;align-items:center;gap:10px;font-size:1.1rem;color:var(--primary-dark);background:#fff;padding:12px 26px;border-radius:50px;box-shadow:var(--shadow-sm);margin:0;}
.therapists-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:34px;}
.therapist-card{display:block;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-sm);padding:26px;text-align:center;transition:all .3s var(--ease);border:1px solid var(--line);}
.therapist-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.therapist-card__avatar{position:relative;width:90px;height:90px;margin:0 auto 16px;}
.therapist-card__avatar img{width:90px;height:90px;border-radius:50%;object-fit:cover;}
.avatar-initials{width:90px;height:90px;border-radius:50%;background:var(--primary-grad);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;}
.exp-badge{position:absolute;bottom:-4px;right:-4px;background:var(--primary-dark);color:#fff;font-size:.62rem;font-weight:700;padding:4px 9px;border-radius:50px;border:2px solid #fff;}
.therapist-card h4{margin:0 0 4px;color:var(--primary-dark);font-size:1.05rem;}
.therapist-card .job{margin:0 0 10px;color:var(--primary);font-size:.82rem;font-weight:700;}
.therapist-card .bio{margin:0;color:var(--ink-soft);font-size:.82rem;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.team-cta{text-align:center;}

/* ── 11. GAMES — text block above, full-width demo below (no overlap) ── */
.gamefull{position:relative;width:100%;}
.gamefull__head{text-align:center;max-width:680px;margin:0 auto 28px;padding:0 24px;}
.gamefull__cta{margin-top:22px;}
/* stage = full width of the section, transparent so the green gradient shows through */
.gamefull__stage{position:relative;width:100%;height:360px;background:transparent;}
.gamefull__frame{position:absolute;inset:0;}
.gamefull__frame iframe{width:100%;height:100%;border:0;display:block;background:transparent;pointer-events:none;}
.gamefull__catch{position:absolute;inset:0;z-index:3;cursor:grab;background:transparent;}
.gamefull__catch:active{cursor:grabbing;}
.gamefull__stage.dragging .gamefull__frame iframe{pointer-events:auto;}
.gamefull__stage.dragging .gamefull__catch{pointer-events:none;}
.gamefull__stage .gamefull__frame:empty::after{content:'';position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border:4px solid rgba(255,255,255,.22);border-top-color:var(--primary);border-radius:50%;animation:demospin .9s linear infinite;}
@keyframes demospin{to{transform:rotate(360deg)}}
@media(max-width:768px){.gamefull__stage{height:300px;}}

.gamestrip{max-width:1040px;margin:42px auto 0;}
.gamestrip__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.gamestrip__head h3{margin:0;color:#fff;font-size:1.2rem;font-weight:800;}
.gamestrip__all{display:inline-flex;align-items:center;gap:5px;color:var(--primary);font-weight:700;font-size:.88rem;text-decoration:none;transition:gap .25s;}
.gamestrip__all:hover{gap:10px;}
.gamestrip__all .material-symbols-outlined{font-size:1.1rem;}
.gamestrip__list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.gamecard{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px;text-decoration:none;transition:all .3s var(--ease);}
.gamecard:hover{background:rgba(255,255,255,.13);transform:translateY(-3px);border-color:rgba(136,197,64,.5);}
.gamecard__thumb{width:56px;height:56px;flex:0 0 auto;border-radius:12px;overflow:hidden;background:rgba(136,197,64,.18);display:flex;align-items:center;justify-content:center;}
.gamecard__thumb img{width:100%;height:100%;object-fit:cover;}
.gamecard__emoji{font-size:1.6rem;}
.gamecard__body{min-width:0;}
.gamecard__body h4{margin:0 0 5px;color:#fff;font-size:.95rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.gamecard__eff{display:inline-block;background:rgba(136,197,64,.9);color:#fff;font-size:.66rem;font-weight:700;padding:3px 10px;border-radius:50px;}
.gamestrip__cta{text-align:center;margin-top:30px;}
.lbtn{display:inline-flex;align-items:center;gap:9px;font-family:inherit;font-weight:800;font-size:1rem;border-radius:60px;padding:15px 34px;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease);border:none;}
.lbtn .material-symbols-outlined{font-size:1.3rem;}
.lbtn--primary{background:var(--primary-grad);color:#fff;box-shadow:0 14px 32px rgba(136,197,64,.4);}
.lbtn--primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 20px 44px rgba(136,197,64,.5);}


/* ── 13. BOOKING ───────────────────────────────────── */
.lbooking{padding:60px 0 0;background:#fff;}
.lbooking__wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:end;max-width:980px;margin:0 auto;}
.lbooking__visual{display:flex;align-items:flex-end;justify-content:center;align-self:stretch;}
.lbooking__visual img{width:100%;max-width:360px;height:auto;display:block;margin-bottom:-1px;filter:drop-shadow(0 18px 30px rgba(35,99,36,.2));}
@media(max-width:860px){
  .lbooking__wrap{grid-template-columns:1fr;gap:8px;max-width:560px;}
  .lbooking__visual{display:none;}
}
.lbooking__card{max-width:none;margin:0 0 48px;position:relative;background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:30px 30px;overflow:hidden;}
.lbooking__card--compact{max-width:520px;padding:30px 28px;}        /* small window — feedback #7 */
.lbooking__card--compact .lbooking__head{margin:0 0 20px;}
.lbooking__card--compact .lbooking__head h2{font-size:clamp(1.35rem,2.2vw,1.7rem);}
.lbooking__card--compact .lbooking__head p{font-size:.9rem;}
.lbooking__card--compact .lbooking__form{gap:12px;}
.lbooking__card--compact .lbooking__submit{padding:13px;font-size:1rem;}
.lbooking__ribbon{position:absolute;top:0;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-weight:800;font-size:.78rem;padding:6px 24px;border-radius:0 0 16px 16px;}
.lbooking__head{text-align:right;margin:0 0 18px;}
.lbooking__head .section-tag{margin-bottom:10px;}
.lbooking__head h2{font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.35;color:var(--primary-dark);margin:0 0 8px;}
.lbooking__head p{color:var(--ink-soft);margin:0;font-size:.88rem;line-height:1.7;}
.lbooking__head strong{color:var(--primary-dark);}
.lbooking__form{display:flex;flex-direction:column;gap:13px;}
.lbooking__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.lbooking__field{display:flex;flex-direction:column;gap:7px;}
.lbooking__field label{font-size:.84rem;font-weight:700;color:var(--primary-dark);}
.lbooking__field input,.lbooking__field select,.lbooking__field textarea{
  width:100%;padding:13px 16px;border-radius:var(--r-sm);border:1px solid #e2eadf;
  background:#f9fdf6;font-family:inherit;font-size:.92rem;transition:all .25s;color:var(--ink);
}
.lbooking__field input:focus,.lbooking__field select:focus,.lbooking__field textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(136,197,64,.16);background:#fff;
}
.lbooking__submit{margin-top:6px;width:100%;background:var(--primary-grad);color:#fff;border:none;border-radius:60px;padding:16px;font-family:inherit;font-weight:800;font-size:1.05rem;cursor:pointer;transition:all .3s var(--ease);display:flex;align-items:center;justify-content:center;gap:10px;}
.lbooking__submit:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(136,197,64,.3);}
.lbooking__privacy{text-align:center;font-size:.78rem;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:8px;margin:4px 0 0;}
.lbooking__privacy .material-symbols-outlined{color:var(--primary);font-size:1rem;}
.lbooking__success{text-align:center;}
.lbooking__success-icon{font-size:3rem;margin-bottom:12px;}
.lbooking__success h3{color:var(--primary-dark);margin:0 0 10px;}
.lbooking__success p{color:var(--ink-soft);margin:0 0 22px;}
.btn-whatsapp{display:inline-flex;align-items:center;gap:10px;background:#25D366;color:#fff;border-radius:60px;padding:14px 28px;font-weight:700;}

/* ── 14. FOOTER ────────────────────────────────────── */
.lfooter{background:#fff;border-top:1px solid var(--line);padding:60px 0 30px;}
.lfooter__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:48px;margin-bottom:44px;}
/* Green footer — feedback #8 */
.lfooter--green{background:linear-gradient(150deg,#1a4a1b,#236324 60%,#1e5520);border-top:none;color:#fff;}
.lfooter--green .lfooter__brand p{color:rgba(255,255,255,.72);}
.lfooter--green .lfooter__col h4{color:#fff;}
.lfooter--green .lfooter__col a{color:rgba(255,255,255,.72);}
.lfooter--green .lfooter__col a:hover{color:var(--primary);}
.lfooter--green .lfooter__social a{border-color:rgba(255,255,255,.22);color:#fff;}
.lfooter--green .lfooter__social a:hover{background:var(--primary);border-color:var(--primary);}
.lfooter--green .lfooter__contact .material-symbols-outlined{color:var(--primary);}
.lfooter--green .lfooter__badge{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);}
.lfooter--green .lfooter__badge .material-symbols-outlined{color:var(--primary);}
.lfooter--green .lfooter__bottom{border-top-color:rgba(255,255,255,.14);}
.lfooter--green .lfooter__bottom p,.lfooter--green .lfooter__bottom a{color:rgba(255,255,255,.7);}
.lfooter--green .lfooter__bottom a:hover{color:var(--primary);}
.lfooter__brand img{height:46px;margin-bottom:18px;}
.lfooter__brand p{font-size:.84rem;color:var(--ink-soft);line-height:1.8;max-width:22rem;margin:0 0 22px;}
.lfooter__social{display:flex;gap:12px;}
.lfooter__social a{width:38px;height:38px;border-radius:50%;border:1px solid #e2eadf;display:flex;align-items:center;justify-content:center;color:var(--primary-dark);transition:all .3s;}
.lfooter__social a:hover{background:var(--primary);color:#fff;border-color:var(--primary);}
.lfooter__col h4{font-size:1rem;color:var(--primary-dark);margin:0 0 20px;}
.lfooter__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.lfooter__col a{font-size:.85rem;color:var(--ink-soft);font-weight:500;transition:color .25s;}
.lfooter__col a:hover{color:var(--primary);}
.lfooter__contact a{display:flex;align-items:center;gap:10px;}
.lfooter__contact .material-symbols-outlined{color:var(--primary);font-size:1.1rem;}
.lfooter__badges{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;}
.lfooter__badge{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;color:var(--primary-dark);background:rgba(136,197,64,.1);border:1px solid var(--line);padding:7px 14px;border-radius:50px;}
.lfooter__badge .material-symbols-outlined{font-size:1rem;color:var(--primary);}
.lfooter__bottom{border-top:1px solid var(--line);padding-top:28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;}
.lfooter__bottom p{font-size:.78rem;color:var(--ink-soft);margin:0;}
.lfooter__bottom .links{display:flex;gap:24px;}
.lfooter__bottom a{font-size:.78rem;color:var(--ink-soft);}
.lfooter__bottom a:hover{color:var(--primary);}

/* ── 15. FLOATS / MOBILE CTA ───────────────────────── */
.whatsapp-float{position:fixed;bottom:88px;left:22px;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;box-shadow:0 8px 24px rgba(37,211,102,.4);z-index:900;transition:transform .3s;}
.whatsapp-float:hover{transform:scale(1.08);}
.mobile-cta{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);padding:14px 16px;display:none;align-items:center;gap:12px;z-index:950;border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.08);}
.mobile-cta .btn-primary{flex:1;padding:13px;}
.mobile-cta__icon{width:50px;height:50px;border-radius:14px;background:rgba(136,197,64,.1);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* ── 16. SCROLL ANIMATIONS ─────────────────────────── */
.animate-on-scroll{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.animate-on-scroll.visible{opacity:1;transform:translateY(0);}
.animate-delay-1{transition-delay:.12s;}
.animate-delay-2{transition-delay:.24s;}

/* ── 17. RESPONSIVE ────────────────────────────────── */
@media(max-width:1024px){
  .lhero__inner{grid-template-columns:1fr;gap:34px;}
  .lhero__visual{order:-1;max-width:560px;margin:0 auto;height:300px;}
  .lhero__copy{min-height:0;}
  .bento__main{grid-column:span 12;}
  .bento__side{grid-column:span 12;}
  .lsteps{flex-wrap:wrap;gap:18px;}
  .lstep{flex:1 1 calc(50% - 18px);}
  .lstep__arrow{display:none;}
  .lstats__grid{grid-template-columns:repeat(2,1fr);gap:30px;}
  .lstats__grid--3{grid-template-columns:repeat(3,1fr);}
  .gamedemo{grid-template-columns:1fr;gap:22px;}
  .labout{grid-template-columns:1fr;gap:32px;}
  .labout-why{grid-template-columns:repeat(2,1fr);}
  .lteam{grid-template-columns:repeat(3,1fr);}
  .lfooter__grid{grid-template-columns:repeat(3,1fr);}
  .lfooter__brand{grid-column:1/-1;}
}
@media(max-width:768px){
  .lnav__menu,.lnav__actions{display:none;}
  .mobile-dropdown{display:block;}
  .section{padding:48px 0;}
  .lsegments{grid-template-columns:1fr;}
  .lstep{flex:1 1 100%;}
  .therapists-grid{grid-template-columns:1fr;}
  .lbooking__row{grid-template-columns:1fr;}
  .lstats__grid--3{grid-template-columns:1fr;gap:24px;}
  .labout__gallery{grid-template-columns:1fr 1fr;}
  .labout-why{grid-template-columns:1fr;}
  .lteam{grid-template-columns:repeat(2,1fr);}
  .labout-essence{flex-direction:column;text-align:center;align-items:center;}
  .gamestrip__list{grid-template-columns:repeat(2,1fr);}
  .gamestrip__head{flex-direction:column;gap:8px;align-items:flex-start;}
  .lfooter__grid{grid-template-columns:repeat(2,1fr);}
  .lfooter__bottom{flex-direction:column;text-align:center;}
  .mobile-cta{display:flex;}
  .whatsapp-float{bottom:92px;}
  body{padding-bottom:78px;}
  .partner-card__inner{flex-direction:column;text-align:center;}
}
@media(max-width:520px){
  .lstats__grid{grid-template-columns:1fr 1fr;}
  .gamestrip__list{grid-template-columns:1fr;}
  .lfooter__grid{grid-template-columns:1fr;}
  .lhero h1{font-size:1.7rem;}
  .lbooking__card--compact{padding:24px 18px;}
}