:root{
      --bg:#f6f5f3;
      --dark:#0b0b0b;
      --muted:#6b6b6b;
      --container:1200px;
      --radius:14px;
    }
    *{box-sizing:border-box;margin:0;padding:0;font-family:'Tajawal', sans-serif;}
    body{background:var(--bg); color:var(--dark); direction:rtl;}

    /* HERO */
    .hero-cinematic{
      position:relative;
      height:78vh;
      min-height:520px;
      background-image:url('images/h4.webp');
      background-size:cover;
      background-position:center;
      border-radius:0 0 30px 30px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .hero-bg-inner{
      position:absolute; inset:0;
      animation:heroZoom 28s ease-in-out infinite alternate;
      transform-origin:center center;
      z-index:0;
    }
    @keyframes heroZoom{
      from{transform:scale(1);}
      to{transform:scale(1.06);}
    }
    .hero-overlay{
      position:relative; z-index:5;
      text-align:center; padding:30px; color:#fff;
    }
    .hero-title{font-size:clamp(34px,6vw,64px);font-weight:800;margin-bottom:12px;text-shadow:0 10px 30px rgba(0,0,0,0.45);}
    .hero-sub{font-size:clamp(16px,1.8vw,22px);opacity:0.95;text-shadow:0 6px 20px rgba(0,0,0,0.28);}
    .cta-btn{
      display:inline-block;
      margin-top:18px;
      padding:12px 28px;
      background:#E98A27;
      color:#000;
      font-weight:700;
      border-radius:6px;
      text-decoration:none;
      transition:0.4s;
    }
    .cta-btn:hover{background:#f6e6c2;}

    /* FRAMED SECTIONS */
    .content-wrapper{max-width:var(--container);margin:-60px auto 80px;padding:0 24px;}
    .framed-section{
      background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98));
      border-radius: var(--radius);
      padding:22px 28px;
      margin-bottom:28px;
      position:relative;
      overflow:hidden;
      box-shadow:0 8px 30px rgba(16,16,16,0.06);
      border:1px solid rgba(0,0,0,0.04);
    }
    .framed-section h2{font-size:20px;margin-bottom:10px;color:var(--dark);font-weight:700;}
    .framed-section p{color:var(--muted);font-size:16px;line-height:1.7;}
    .framed-section::before{
      content:"";
      position:absolute;
      inset:-2px;
      z-index:3;
      pointer-events:none;
      border-radius:calc(var(--radius)+2px);
      background: linear-gradient(90deg, rgba(255,215,128,0.0) 0%, rgba(255,210,120,0.18) 20%, rgba(255,230,170,0.28) 60%, rgba(255,215,128,0.0) 100%);
      mask: linear-gradient(#000 0 0);
      opacity:0.9;
      transform: translateY(12px) scale(0.98);
      transition: transform .9s cubic-bezier(.2,.9,.2,1), opacity .6s;
    }
    .framed-section.revealed::before{transform: translateY(0) scale(1);opacity:1;}

    /* PROJECT GALLERY (Swiper) */
    .swiper-container{width:100%;padding:28px 0; height:300px;}
    .swiper-slide{
      border-radius:12px;
      overflow:hidden;
      position:relative;
      background:#fff;
      box-shadow:0 10px 30px rgba(12,12,12,0.06);
      height:300px;
      transition:transform .6s ease,box-shadow .4s;
    }
    .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block;}
    .swiper-slide:hover{transform: translateY(-8px) rotateX(1deg) rotateY(2deg);box-shadow:0 30px 50px rgba(7,7,7,0.18);}
    .swiper-slide::after{
      content:"";
      position:absolute;
      inset:0;
      transform: translateX(-120%) rotate(12deg);
      background: linear-gradient(120deg, rgba(255,255,255,0.02) 0%, rgba(255,223,120,0.35) 50%, rgba(255,255,255,0.02) 100%);
      mix-blend-mode: screen;
      opacity:0;
      pointer-events:none;
      transition: transform 1.1s ease, opacity .9s;
    }
    .swiper-slide:hover::after{transform: translateX(180%) rotate(12deg);opacity:1;}
    @media(max-width:1000px){.swiper-slide{height:300px;}}
    @media(max-width:640px){.swiper-slide{height:220px;}}
    /* عرض الشرائح على الجوال وتاب */
@media (max-width: 1000px) {
  .swiper-container {padding:16px 0;}
  .swiper-slide {height:210px;}
}
@media (max-width: 680px) {
  .content-wrapper {padding:0 6px;}
  .framed-section {padding:12px 8px;}
  .swiper-container {padding:9px 0;}
  .swiper-slide {
    height:250px;
    border-radius: 10px;
    /* يمكن إضافة هوامش صغيرة بين الشرائح */
    margin-right: 7px;
    margin-left: 7px;
  }
}
/* تحسين الصور داخل السلايدر */
.swiper-slide img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:10px;
  box-shadow:0 3px 16px #0001;
  border:1px solid #fff2;
}

/* تحسين زر السحب للعرض */
.swiper-button-next, .swiper-button-prev {
  width:36px;height:36px;border-radius:50%;background:rgba(255,215,122,0.85)!important;color:#a27d00!important;
  box-shadow:0 1px 8px #de852f3c;
}
.swiper-button-next:after,.swiper-button-prev:after{font-size:17px!important;}
.swiper-pagination {bottom: -18px;}
.swiper-pagination-bullet {background: #ffd77a;opacity: .95;}

.framed-section h2 {
  font-size: 19px;
  margin-bottom: 7px;
  margin-top: 3px;
  text-align: center;
  color: #E98A27;
}

.framed-section p {
  font-size: 15px;
  text-align: center;
  line-height: 1.7;
  color: #7b755b;
  margin-bottom: 4px;
}
.whatsapp-order-btn {
  display: inline-block;
  background: linear-gradient(93deg,#E98A27 70%, #E98A27 100%);
  color: #fff;
  font-weight:800;
  padding: 13px 33px;
  border-radius: 16px;
  font-size: 1.22rem;
  box-shadow:0 4px 16px #25d36628;
  text-decoration: none;
  transition:background .21s, box-shadow .18s;
  margin-bottom: 14px;
}
.whatsapp-order-btn:hover {
  background: #E98A27;
  color: #fff;
  box-shadow:0 8px 28px #128c7e36;
}