:root{
      --dark:#0e2238;
      --darker:#0a1827;
      --text:#20262d;
      --muted:#687385;
      --gold:#D8B46A;
      --gold-2:#c8a155;
      --light-bg:#f5f7fa;
      --card:#ffffff;
      --shadow:0 12px 30px rgba(10,24,39,.08);
      --radius:14px;
      --radius-sm:10px;
      --max:1200px;
    }

.gallery {
  padding: 60px 0;
  text-align: center;
  background-color: #F3EDE2;
}

.section-title {
  font-size: 2rem;
  margin-bottom: 40px;
  color: #333;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
  justify-items: center;
}

.gallery-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.gallery-grid img:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}


    
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:#F3EDE2;color:var(--text);font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif}
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}
    .container{width:min(var(--max), 92vw);margin-inline:auto}

    /* ========== HERO ========== */
    .hero{
      margin-top:60px;
      position:relative;
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color:#fff;
      overflow:hidden;
      isolation:isolate;
      background:#000;
    }
    .hero::before{
      content:"";
      position:absolute;inset:0;
      /* غيّر رابط الصورة هنا إلى صورة الهيرو (الأم والطفل) */
      background:url('hero.jpg') center/cover no-repeat;
      opacity:.95;
      z-index:-2;
      transform:scale(1.02);
    }
    .hero::after{
      content:"";
      position:absolute;inset:0;
      background:linear-gradient(0deg, rgba(14,34,56,.80), rgba(14,34,56,.25));
      z-index:-1;
    }
    .hero h1{font-weight:800;letter-spacing:.3px;font-size:clamp(28px,4.2vw,56px);margin:0 0 14px}
    .hero p{margin:0 auto 28px;max-width:800px;font-size:clamp(14px,1.6vw,18px);color:#eef3ff}
    .btn{
      display:inline-block;padding:14px 22px;border-radius:8px;
      background:#F3EDE2;color:#6B5843;font-weight:700;box-shadow:var(--shadow);
      transition:.2s ease;cursor:pointer
    }
    .btn:hover{background:#D4AF7A;transform:translateY(-1px)}
    .down{
      position:absolute;left:50%;bottom:24px;translate:-50% 0;color:#fff;opacity:.9;cursor:pointer;
      width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.5);
      display:grid;place-items:center;backdrop-filter:blur(4px)
    }

    /* ========== SECTION HEADINGS ========== */
    section{padding:64px 0}
    h2.section-title{
      font-size:clamp(22px,3.2vw,36px);
      text-align:center;margin:0 0 28px;font-weight:800;color:#6B5843
    }
    h2.section-title1{
      font-size:clamp(22px,3.2vw,36px);
      text-align:center;margin:0 0 28px;font-weight:800;color:#F3EDE2
    }
    .section-sub{max-width:900px;margin:0 auto 36px;text-align:center;color:var(--muted)}


    /* ========== MODELS (تبويبات) ========== */
    .tabs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
    .tab{
      background:#e9edf3;color:#5c6572;border-radius:999px;padding:10px 26px;font-weight:700;
      border:0;cursor:pointer;transition:.2s ease
    }
    .tab.active{background:var(--gold);color:#fff}
    .model-card{
      background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
      display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:stretch;overflow:hidden
    }
    .model-card .media{min-height:320px;background:#6B5843}
    .model-card .media img{width:100%;height:100%;object-fit:cover}
    .model-body{padding:24px}
    .model-title{margin:0 0 8px;font-size:clamp(18px,2.4vw,26px);font-weight:800;color:var(--dark)}
    .model-desc{color:var(--muted);margin:0 0 18px;line-height:1.8}
    .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0 22px}
    .stat{
      background:#f7f9fc;border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px;color:var(--dark)
    }
    .stat .ico{
      width:38px;height:38px;border-radius:10px;background:#fff;display:grid;place-items:center;
      box-shadow:0 4px 12px rgba(14,34,56,.08)
    }
    .stat b{display:block;font-size:18px}
    .btn-dark{background:#D4AF7A}
    .btn-dark:hover{background:#F3EDE2}

    /* ========== FEATURES GRID ========== */
    .features{background:#F3EDE2}
    .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .feature{
      background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);min-height:128px;
      display:flex;gap:14px;align-items:flex-start
    }
    .feature .ico{
      background:#f8f2e6;border-radius:12px;min-width:48px;min-height:48px;display:grid;place-items:center;color:#b4882e;font-weight:800
    }
    .feature h4{margin:2px 0 6px;font-size:18px}
    .feature p{margin:0;color:var(--muted)}

    /* ========== GUARANTEES ========== */
    .guarantees{background:#F3EDE2}
    .g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .g-card{
      background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;position:relative
    }
    .g-card::before{
      content:"";position:absolute;inset:0 0 auto 0;height:6px;border-radius:12px 12px 0 0;background:#6B5843
    }
    .g-card b{font-size:28px;color:#6B5843}
    .g-card h5{margin:10px 0 6px;font-size:18px;color:var(--dark)}
    .g-card p{margin:0;color:var(--muted)}

    /* ========== CONTACT ========== */
    .contact{background:#6B5843;color:#fff;padding:80px 0}
    .form-wrap{
      width:min(720px,92vw);margin:22px auto 0;background:#F3EDE2;border-radius:22px;box-shadow:var(--shadow);
      padding:26px;border:1px solid rgba(255,255,255,.06)
    }
    .field{margin-bottom:14px}
    label{display:block;margin-bottom:6px;color:#6B5843}
    input[type="text"],input[type="email"]{
      width:100%;padding:14px 12px;border-radius:10px;border:1px solid #6B5843;background:#6B5843;color:#F3EDE2;outline:none
    }
    .radios{display:flex;gap:18px;align-items:center;margin:6px 0 12px}
    .submit{width:100%;padding:14px;border:none;border-radius:10px;background:var(--gold);color:#fff;font-weight:800;cursor:pointer}
    .submit:hover{background:var(--gold-2)}

    /* ========== WHATSAPP FLOAT ========== */
    .wa{
      position:fixed;bottom:18px;left:18px;z-index:50;width:54px;height:54px;border-radius:999px;
      background:#25d366;display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.2)
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width:992px){
      .model-card{grid-template-columns:1fr}
      .stats{grid-template-columns:1fr 1fr}
      .grid-3.g-grid{grid-template-columns:repeat(2,1fr)}
      .g-grid{grid-template-columns:1fr}
      .gallery-grid {grid-template-columns: repeat(3, 1fr); /* عمودين بدل واحد */}

    }
    @media (max-width:600px){
      section{padding:48px 0}
      .stats{grid-template-columns:1fr}
       .grid-3{grid-template-columns: repeat(2, 1fr);}
             .g-grid{grid-template-columns:1fr}

          .gallery-grid {grid-template-columns: repeat(3, 1fr); /* عمودين بدل واحد */}

  }
  

  @media (max-width: 768px) {
  .feature {
    flex-direction: column; /* خلى الأيقونة فوق */
    align-items: center;
    text-align: center;
  }

  .feature .ico {
    margin-bottom: 10px;
    min-width: 60px;
    min-height: 60px;
    font-size: 22px; /* تبقى الأيقونة أوضح على الموبايل */
  }

  .feature h4 {
    font-size: 16px;
  }

  .feature p {
    font-size: 14px;
  }

}







    .btn-glow {
  position: relative;
  color: #fff;
  background-color: #6B5843;
  border: 2px solid #D8B46A;
  padding: 12px 28px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  overflow: hidden;
}

.btn-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(90deg, #d8b46a, #fff4d0, #d8b46a);
  background-size: 300%;
  z-index: -1;
  filter: blur(3px);
  animation: borderGlow 3s linear infinite;
}

.btn-glow:hover {
  background-color: #D8B46A;
  color: #2B3A42;
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(216,180,106,0.6);
}

@keyframes borderGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



.btn-glow {
  position: relative;
  color: #fff;
  background-color: #D8B46A;
  border: 2px solid #D8B46A;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.btn-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 2px;
  background: linear-gradient(90deg, #d8b46a, #fff4d0, #d8b46a);
  background-size: 300%;
  z-index: -1;
  filter: blur(3px);
  animation: borderGlow 3s linear infinite;
}

.btn-glow:hover {
  background-color: #fff;
  color: #6B5843;
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(216,180,106,0.6);
}

@keyframes borderGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}