@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

/* ===== القواعد العامة ===== */
*{box-sizing:border-box;transition:all .25s ease}
body{margin:0;font-family:"Cairo",sans-serif;direction:rtl;color:#444;background-color:#111}

/* ===== الهيدر الموحد ===== */
#site-header{
  position:fixed;top:0;right:0;left:0;z-index:999;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 60px;background:rgba(0,0,0,.25);color:#fff;backdrop-filter:blur(6px);
  transition:background .4s ease,box-shadow .4s ease
}
#site-header.scrolled{background:rgba(0,0,0,.9);box-shadow:0 2px 10px rgba(0,0,0,.4)}
#site-header .logo a{
  display: flex;
  align-items: center;
  gap: 45px;
  font-size: 25px;
  font-weight: bold;
  color: #d4af37;
  letter-spacing: 1px;
  text-decoration: none;
}

#site-header .logo img{
  height: 48px;              /* دي اللي بتتحسب في ارتفاع الهيدر */
  width: auto;
  display: block;
  transform: scale(1.8);     /* تكبير بصري للوجو */
  transform-origin: right center; /* عشان يكبر ناحية جوّه الهيدر مش يهرب لبرا */
}

#site-header .logo-text{
  white-space: nowrap;
}
#site-header .site-nav a{color:#fff;text-decoration:none;margin-left:20px;font-weight:500;transition:color .3s ease}
#site-header .site-nav a:hover,#site-header .site-nav a.active{color:#d4af37}

/* ===== السلايدر ===== */
.hero-slider{position:relative;width:100%;height:100vh;overflow:hidden}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.5s ease-in-out}
.hero-slide.active{opacity:1}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff}
.hero-overlay h1{font-size:48px;color:#d4af37;margin-bottom:15px;letter-spacing:1px}
.hero-overlay p{font-size:20px;color:#eee;margin-bottom:25px}
.btn{background:#d4af37;border:none;padding:14px 35px;color:#000;font-weight:bold;border-radius:6px;cursor:pointer;transition:.3s}
.btn:hover{background:#e8cc5e}

/* ===== السهم المتحرك ===== */
.scroll-down{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);z-index:2;opacity:1;transition:opacity .3s ease,transform .3s ease}
.scroll-down.hide{opacity:0;transform:translate(-50%,10px);pointer-events:none}
.scroll-down i{font-size:28px;color:#d4af37;animation:bounce 1.8s infinite;cursor:pointer}
@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(8px)}60%{transform:translateY(4px)}}

/* ===== أزرار التواصل ===== */
.contact-buttons-static{display:flex;justify-content:center;gap:60px;background:#111;padding:60px 0 40px;position:relative;z-index:90}
.contact-btn{display:flex;align-items:center;gap:8px;background:#fff;color:#000;border-radius:40px;padding:10px 25px;font-weight:600;text-decoration:none;font-size:18px;box-shadow:0 4px 12px rgba(0,0,0,.15);transition:all .3s ease}
.contact-btn i{font-size:20px}
.contact-btn:hover{transform:translateY(-4px)}
.contact-btn.whatsapp{border:2px solid #25D366}
.contact-btn.whatsapp i{color:#25D366}
.contact-btn.whatsapp:hover{background:#25D366;color:#fff}
.contact-btn.call{border:2px solid #d4af37}
.contact-btn.call i{color:#d4af37}
.contact-btn.call:hover{background:#d4af37;color:#fff}

/* ===== قسم الخدمات ===== */
.services-section{background:#111;padding:40px 20px 100px;text-align:center}
.services-section .section-title{font-size:36px;color:#d4af37;margin-bottom:60px;position:relative;display:inline-block}
.services-section .section-title::after{content:"";position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:80px;height:3px;background:#d4af37;border-radius:2px}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:35px;max-width:1200px;margin:0 auto}
.service-card{background:#1a1a1a;border-radius:14px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.4);transition:transform .3s ease,box-shadow .3s ease}
.service-card:hover{transform:translateY(-8px);box-shadow:0 0 25px rgba(191,161,74,.6)}
.image-box{width:100%;height:300px;overflow:hidden;position:relative}
.image-box img{width:100%;height:100%;object-fit:cover;background-color:#000;transition:transform .5s ease}
.service-card:hover img{transform:scale(1.08)}
.service-card h3{color:#fff;background:#bfa14a;padding:15px;font-size:20px;font-weight:600;margin:0;transition:background .3s ease}
.service-card:hover h3{background:#d4af37}
.service-text{padding:20px 25px 35px;color:#ddd;font-size:16px;line-height:1.8;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));transition:color .3s ease}
.service-card:hover .service-text{color:#fff}

/* ===== قسم الاستكشاف ===== */
.explore-section{background:#111;padding:40px 20px 10px}
.explore-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.explore-card{position:relative;display:block;border-radius:16px;overflow:hidden;text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.25);isolation:isolate}
.explore-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03);transition:transform .6s ease,filter .6s ease;filter:brightness(.85)}
.explore-overlay{position:relative;z-index:1;padding:28px;min-height:180px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0))}
.explore-overlay h3{margin:0 0 6px;color:#d4af37;font-size:24px;font-weight:700}
.explore-overlay p{margin:0 0 10px;color:#eee;font-size:15px}
.explore-cta{display:inline-block;align-self:flex-start;background:#d4af37;color:#000;font-weight:700;padding:8px 14px;border-radius:10px;font-size:14px;transition:transform .25s ease,background .25s ease}
.explore-card:hover .explore-bg{transform:scale(1.08);filter:brightness(1)}
.explore-card:hover .explore-cta{transform:translateY(-2px);background:#e8cc5e}

/* ===== صفحة المنتجات ===== */
body.products-page{padding-top:0!important;background:#111;color:#fff;font-family:"Cairo","Tajawal",sans-serif}
.products-hero{position:relative;width:100%;height:88vh;min-height:520px;overflow:hidden;isolation:isolate}
.products-hero-bg{position:absolute;inset:0;background:url("../images/products-hero.jpg") no-repeat center center/cover;transform:scale(1.03);transition:transform 1.1s ease}
.products-hero:hover .products-hero-bg{transform:scale(1.06)}
.products-hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.42);display:grid;place-items:center;text-align:center;color:#fff;padding:0 16px}
.products-hero h1{margin:0 0 10px;font-size:clamp(28px,5vw,48px);color:#d4af37;font-weight:800;letter-spacing:.5px}
.products-hero p{margin:0 0 20px;font-size:clamp(14px,2.2vw,18px);color:#eee}
.hero-cta{display:inline-block;background:#d4af37;color:#000;font-weight:700;padding:10px 20px;border-radius:10px;text-decoration:none;transition:transform .25s ease,background .25s ease}
.hero-cta:hover{transform:translateY(-2px);background:#e8cc5e}
.products-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:110px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,#111 100%);pointer-events:none}
.products-section{padding:60px 40px 120px;max-width:1300px;margin:0 auto}
.products-section h2{text-align:center;color:#d4af37;margin-bottom:40px;font-size:32px;font-weight:800;letter-spacing:.5px}
.product-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 30px;
}
.fancy-card{position:relative;height:400px;background-size:cover;background-position:center;border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.25);display:flex;align-items:flex-end;justify-content:center;transition:transform .3s ease}
.fancy-card:hover{transform:translateY(-5px)}
.fancy-card .overlay{background:rgba(0,0,0,.35);width:100%;padding:30px 20px;text-align:center;color:#fff;transition:background .3s ease,transform .3s ease}
.fancy-card:hover .overlay{background:rgba(0,0,0,.45)}
.panel-title{font-size:22px;font-weight:700;color:#f4d87a;margin-bottom:10px}
.fancy-card p{color:#f9f9f9;line-height:1.6}
.cta-btn{display:inline-block;margin-top:15px;background:#d4af37;color:#111;padding:8px 18px;border-radius:8px;font-weight:700;text-decoration:none;transition:background .3s ease,transform .3s ease;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.cta-btn:hover{background:#e8cc5e;transform:translateY(-2px)}
footer{text-align:center;color:#aaa;padding:40px 0;border-top:1px solid rgba(255,255,255,.1)}
@media (max-width:768px){.products-section{padding:40px 20px}.fancy-card{height:320px}}

/* ===== Footer (صفحة المنتجات) ===== */
.footer{background:#000;color:#ccc;padding:60px 20px 20px;text-align:center}
.footer-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;max-width:1200px;margin:0 auto 40px}
.footer-column h3{color:#d4af37;margin-bottom:20px;font-size:22px}
.footer-column p,.footer-column a{color:#ccc;font-size:16px;text-decoration:none;line-height:1.8}
.footer-column a:hover{color:#d4af37}
.social-icons{display:flex;justify-content:center;gap:20px;margin-top:10px}
.social-icons a{color:#d4af37;font-size:26px;transition:color .3s ease}
.social-icons a:hover{color:#e8cc5e}
.footer-bottom{border-top:1px solid #333;padding-top:15px;font-size:14px;color:#888}

/* ===== موبايل عام ===== */
@media (max-width:768px){
  .hero-overlay h1{font-size:32px}
  .hero-overlay p{font-size:16px}
  .btn{padding:10px 25px;font-size:14px}
  .image-box{height:220px}
  .service-card h3{font-size:18px}
  .contact-buttons-static{flex-direction:column;align-items:center;gap:15px}
  .contact-btn{width:70%;justify-content:center}
  .explore-overlay{min-height:140px;padding:20px}
  .explore-overlay h3{font-size:20px}
}

/* ===== Wall Panel Series ===== */
body.wall-panel-page{background:#0f0f0f url("../images/bg/noise-dark.png") repeat;padding-top:0!important}
.series-hero{position:relative;margin-top:72px;height:44vh;min-height:280px;overflow:hidden;border-radius:0 0 22px 22px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.series-hero::before{
  content:"";position:absolute;inset:0;
  background:url("../images/wallpanels/series-hero.jpg") center/cover no-repeat;
  transform:scale(1.02);transition:transform 1.2s ease;filter:brightness(.82)
}
.series-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.0)}
.series-hero .hero-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;text-align:center;height:100%}
.series-hero h1{color:#d4af37;font-size:clamp(26px,4.8vw,52px);margin:0}
.series-hero .accent{width:90px;height:4px;background:#d4af37;border-radius:6px;margin:16px auto 0}
.wp-wrap{max-width:1280px;margin:0 auto;padding:40px 30px 80px}
.wp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.wp-card{background:#111;border-radius:12px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.4);text-align:center;border:1px solid rgba(212,175,55,.1);transition:transform .25s ease,box-shadow .25s ease}
.wp-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(212,175,55,.25)}
.wp-card .thumb{width:100%;aspect-ratio:1/1;background:#000}
.wp-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.wp-card:hover .thumb img{transform:scale(1.05)}
.wp-card h3{color:#f2d675;font-size:15px;font-weight:700;margin:12px 10px 6px}
.wp-card p{color:#ccc;font-size:13px;margin:0 10px 12px;line-height:1.6}
.wp-card a{display:inline-block;background:#d4af37;color:#111;font-weight:700;padding:7px 14px;border-radius:8px;font-size:13px;text-decoration:none;margin-bottom:12px;transition:background .25s ease,transform .25s ease}
.wp-card a:hover{background:#e8cc5e;transform:translateY(-2px)}
@media (max-width:768px){.wp-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}.wp-card h3{font-size:14px}.wp-card p{font-size:12px}}

/* ===== صفحة تفاصيل Wall Panel ===== */
body.wall-panel-details{background:#0f0f0f url("../images/bg/noise-dark.png") repeat;color:#ddd;font-family:"Cairo",sans-serif;padding-top:100px}
.wp-details{max-width:1200px;margin:0 auto;padding:40px 20px 100px}
.wp-top{display:grid;grid-template-columns:.95fr 1.05fr;gap:36px;align-items:center}
@media (max-width:900px){.wp-top{grid-template-columns:1fr;gap:24px}}
.wp-main{position:relative;background:#0a0a0a;border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.4);border:1px solid rgba(212,175,55,.15);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.wp-main img{width:100%;height:100%;object-fit:contain;background:#000;transition:opacity .3s ease,transform .4s ease}
.wp-main:hover img{transform:scale(1.02);opacity:.95}
.wp-info{background:#141414;border:1px solid rgba(212,175,55,.12);border-radius:18px;padding:26px 24px 32px;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.wp-info h2{color:#f2d675;margin:0 0 10px;font-size:22px;font-weight:800;text-align:center}
.wp-info p{color:#ccc;line-height:1.8;font-size:14px;margin-bottom:16px;text-align:center}
.wp-info .meta{font-size:13px;color:#aaa;margin-bottom:18px;text-align:center}
.wp-info h3{color:#d4af37;margin-bottom:10px;font-size:15px;text-align:center}
.thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:14px;margin-bottom:20px}
.color-chip{background:#0e0e0e;border:1px solid rgba(255,255,255,.12);border-radius:10px;text-align:center;padding:8px;cursor:pointer;transition:all .25s ease}
.color-chip:hover{transform:translateY(-3px);border-color:#d4af37;box-shadow:0 0 10px rgba(212,175,55,.25)}
.color-chip.active{border-color:#d4af37;box-shadow:0 0 0 3px rgba(212,175,55,.25)}
.color-chip img{width:100%;height:68px;object-fit:cover;border-radius:8px}
.color-chip small{display:block;margin-top:5px;font-size:12px;color:#ccc}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:10px}
.btn-gold{background:#d4af37;color:#000;font-weight:700;border:none;padding:10px 18px;border-radius:10px;cursor:pointer;transition:background .3s ease,transform .2s ease}
.btn-gold:hover{background:#e8cc5e;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:#ddd;border:1px solid rgba(255,255,255,.15);padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:600;transition:background .25s ease,color .25s ease}
.btn-ghost:hover{background:#222;color:#fff}
@media (max-width:768px){
  body.wall-panel-details{padding-top:80px}
  .wp-top{gap:22px}
  .wp-main{max-height:340px;padding:4px}
  .wp-main img{max-height:320px}
  .wp-info{padding:20px 16px}
  .wp-info h2{font-size:20px}
  .color-chip img{height:60px}
}

/* ===== Fixes: Chipboard page only ===== */
body.chipboard-page .hero{padding-top:100px;box-sizing:border-box;height:65vh;min-height:480px;overflow:hidden;position:relative}
body.chipboard-page .hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);pointer-events:none}
body.chipboard-page .hero h1,body.chipboard-page .hero p{position:relative;z-index:1;text-shadow:0 2px 10px rgba(0,0,0,.45)}
body.chipboard-page .product-section{margin-top:40px}
body.chipboard-page .product-card img{height:200px;object-fit:cover}

/* ================================================================= */
/* ===== صفحة مشروعاتنا ============================================ */
/* ================================================================= */
body.projects-page{background:#111;color:#fff;font-family:"Cairo",sans-serif}
body.projects-page .hero-bg{
  padding-top:100px;height:65vh;min-height:480px;display:flex;flex-direction:column;justify-content:center;align-items:center;
  background:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.5)),url("../images/hero-decor.jpg") center/cover no-repeat;
  text-align:center;color:#fff;position:relative;overflow:hidden
}
body.projects-page .hero-bg h1{color:#d4af37;font-size:42px;margin-bottom:10px;letter-spacing:1px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
body.projects-page .hero-bg p{font-size:18px;color:#eee;opacity:.9}
.intro-section-jana{background:#111;padding:60px 20px 40px;display:flex;justify-content:center}
.intro-box-jana{max-width:950px;text-align:center;line-height:2;color:#eee;font-size:18px;background:linear-gradient(90deg,rgba(191,161,74,.12),rgba(255,255,255,.05));padding:30px 35px;border-radius:14px;box-shadow:0 0 15px rgba(191,161,74,.15)}
.intro-box-jana span{color:#d4af37;font-weight:700}
.intro-box-jana strong{color:#bfa14a;font-weight:600}
.intro-steps-jana{margin-top:18px;color:#ccc;font-size:17px}
.projects-section{max-width:1300px;margin:80px auto;padding:0 30px}
.projects-section h1{text-align:center;color:#d4af37;margin-bottom:50px;font-size:34px;font-weight:800}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px}
.project-card{background:#fff;color:#000;border-radius:14px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;text-align:center}
.project-card:hover{transform:translateY(-6px);box-shadow:0 0 20px rgba(191,161,74,.6)}
.project-card img{width:100%;height:240px;object-fit:cover;display:block}
.project-card h3{background:#bfa14a;color:#fff;margin:0;padding:12px;font-size:16px;font-weight:600}
.section-divider{text-align:center;margin:100px 0 20px;position:relative}
.section-divider::before{content:"";position:absolute;top:50%;left:0;width:100%;height:2px;background:rgba(255,255,255,.1);z-index:0}
.section-divider span{background:#111;padding:0 16px;color:#bfa14a;font-size:22px;font-weight:600;position:relative;z-index:1}
.electric-desc{max-width:950px;margin:40px auto 60px;text-align:center;line-height:1.9;color:#eee;font-size:18px;background:linear-gradient(90deg,rgba(191,161,74,.12),rgba(255,255,255,.05));padding:22px 28px;border-radius:14px;box-shadow:0 0 12px rgba(191,161,74,.2)}
.electric-desc span{color:#bfa14a;font-weight:700}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);justify-content:center;align-items:center;z-index:999}
.modal img{max-width:90%;max-height:85vh;border-radius:12px;box-shadow:0 0 30px rgba(0,0,0,.5);object-fit:contain}
.modal .close{position:absolute;top:20px;right:30px;color:#fff;font-size:40px;cursor:pointer}
.modal .close:hover{color:#bfa14a}
.modal .prev,.modal .next{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:50px;cursor:pointer;padding:10px 20px;user-select:none}
.modal .prev:hover,.modal .next:hover{color:#bfa14a}
.modal .prev{left:30px}.modal .next{right:30px}
@media (max-width:768px){
  .projects-section{margin:40px auto 60px;padding:0 15px}
  .hero-bg{height:350px;background-attachment:scroll}
  .intro-section-jana{padding:40px 15px 30px}
  .intro-box-jana{font-size:16px;padding:20px}
  .project-card img{height:200px}
  .project-card h3{font-size:14px}
}

/* ===== الفوتر الموحّد (للرئيسية/المشاريع عند الحاجة) ===== */
.main-footer{background:#000;color:#ccc;text-align:center;padding:50px 20px 30px;border-top:1px solid rgba(255,255,255,.08)}
.main-footer .footer-content p{margin:0 0 15px;font-size:15px;color:#aaa}
.main-footer .social-icons{display:flex;justify-content:center;gap:22px}
.main-footer .social-icons a{color:#d4af37;font-size:24px;transition:color .3s ease,transform .3s ease}
.main-footer .social-icons a:hover{color:#e8cc5e;transform:translateY(-3px)}

/* ===== الفوتر الكامل ===== */
.footer-section{background:#000;color:#fff;padding:60px 20px 20px;border-top:1px solid rgba(255,255,255,.1);font-family:"Cairo",sans-serif}
.footer-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px;max-width:1200px;margin:0 auto 40px;text-align:center}
.footer-column h3{color:#d4af37;margin-bottom:15px;font-size:20px;font-weight:700}
.footer-column p{color:#ccc;font-size:15px;line-height:1.9;margin:6px 0}
.footer-column span{color:#d4af37;font-weight:600}
.footer-column strong{color:#d4af37;font-weight:700}
.footer-column .social-icons{margin-top:10px;display:flex;justify-content:center;gap:20px}
.footer-column .social-icons a{color:#d4af37;font-size:24px;transition:.3s ease}
.footer-column .social-icons a:hover{color:#e8cc5e;transform:translateY(-3px)}
.footer-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.1);padding-top:15px;color:#999;font-size:14px}

/* ===== Projects: visual polish ===== */
.project-card{will-change:transform,box-shadow}
.project-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 30%,rgba(212,175,55,.18),transparent 60%);
  opacity:0;transition:opacity .35s ease
}
.project-card:hover::after{opacity:.8}

/* reveal base state */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.show{opacity:1;transform:translateY(0)}

/* hero subtle parallax fallback (desktop only) */
@media (min-width:992px){body.projects-page .hero-bg{background-attachment:fixed}}
/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .reveal,.project-card,.project-card::after{transition:none!important}
  body.projects-page .hero-bg{background-attachment:scroll}
}

/* ===== (إضافة خفيفة) تواصل معنا: ضمان مسار صورة الهيرو من نفس ملف الستايل ===== */
body.contact-page{background:#111}
body.contact-page .contact-hero_bg{background:url("../images/contact-hero.jpg") center/cover no-repeat}
/* إخفاء زر القائمة في الشاشات الكبيرة */
#site-header .menu-toggle {
  display: none;
}

/* ===== الموبايل: تعديل الهيدر ===== */
@media (max-width: 768px) {
  #site-header {
    padding: 14px 24px;
    flex-wrap: wrap;
  }

  #site-header .logo a{
    font-size: 18px;
  }

  #site-header .logo img{
    height: 26px;
  }

  #site-header .menu-toggle {
    display: block;
    font-size: 26px;
    cursor: pointer;
    color: #d4af37;
    background: none;
    border: none;
  }

  #site-header .site-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    text-align: center;
    background: rgba(0,0,0,0.9);
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  #site-header.active .site-nav {
    display: flex;
  }

  #site-header .site-nav a {
    margin: 10px 0;
    font-size: 18px;
  }
}
/* ===== Mobile-only: Fix Footer Hidden Issue on iPhone + Samsung ===== */
@media (max-width: 768px) {
  html, body {
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
  }

  /* مساحة أمان تحت الصفحة علشان شريط الهوم/المتصفح */
  body::after {
    content: "";
    display: block;
    height: calc(100px + env(safe-area-inset-bottom));
  }

  /* تأمين الفوتر نفسه */
  footer,
  .footer,
  .footer-section,
  .main-footer {
    position: relative;
    z-index: 10;
    margin-top: 60px !important;
    padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  }
}

/* ===== إصلاح نهائي لمودال المعاينة (بديل الشيبورد) بدون تأثير على باقي الصفحات ===== */

/* لما المودال يفتح نقفل سكرول الصفحة */
body.modal-open {
  height: 100vh;
  overflow: hidden;
}

/* الغلاف العام للمودال */
#previewModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.9);
  justify-content: center;
  align-items: flex-start;
  padding: 40px 16px;

  /* سكرول داخلي عند الحاجة */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* محتوى المودال */
#previewModal .modal-content {
  background: linear-gradient(135deg, #1a1a1a, #111);
  border-radius: 14px;
  max-width: 880px;
  width: 95%;
  margin: 40px auto;
  box-shadow: 0 10px 35px rgba(0,0,0,0.8);
  border: 1px solid rgba(212,175,55,0.15);
  padding-bottom: 100px;
}

/* علشان يوصل لزر واتساب براحة */
#previewModal .modal-info {
  padding-bottom: 40px;
}

/* للموبايل فقط */
@media (max-width: 768px) {
  body.modal-open {
    height: 100vh !important;
    overflow: hidden !important;
  }

  #previewModal {
    padding: 40px 16px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #previewModal .modal-content {
    padding-bottom: 200px !important;
    max-height: none !important;
    overflow-y: visible !important;
  }
}
/* ===== Chipboard mobile: عمودين جنب بعض فقط على الموبايل ===== */
@media (max-width: 768px) {
  body.chipboard-page .products-grid,
  body.chipboard-page .product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 12px;
  }

  /* لو الكارد فيه .media مع aspect-ratio */
  body.chipboard-page .product-card .media {
    position: relative;
    aspect-ratio: 4 / 5;
  }
  body.chipboard-page .product-card .media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* لو الصور متحطّة مباشرة من غير .media */
  body.chipboard-page .product-card img:not(.media img) {
    width: 100%;
    height: 160px; /* بديل 150px لو حابب */
    object-fit: cover;
    display: block;
  }

  /* نصوص وأزرار أخف */
  body.chipboard-page .product-card h3 { font-size: 13px; }
  body.chipboard-page .product-card p { font-size: 12px; }

  body.chipboard-page .product-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.chipboard-page .product-actions button,
  body.chipboard-page .product-actions a {
    width: 100%;
    font-size: 12px;
    padding: 6px 10px;
  }
}
/* ===== زر العودة العام ===== */
.back-section {
  text-align: center;
  margin-bottom: 60px;
}
.back-btn {
  display: inline-block;
  background: #d4af37;
  color: #111;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.2s ease;
}
.back-btn:hover {
  background: #e8cc5e;
  transform: translateY(-2px);
}
.related-products {
  margin: 80px auto 60px;
  text-align: center;
}
.related-products h2 {
  color: #d4af37;
  font-size: 22px;
  margin-bottom: 25px;
  font-weight: 700;
}
.related-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}
.related-card {
  width: 220px;
  background: #141414;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(212,175,55,0.2);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.related-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(212,175,55,0.2);
}
.related-card img {
  width: 100%;
  height: 130px;
  object-fit: cover;
}
.related-card h3 {
  color: #d4af37;
  font-size: 15px;
  padding: 10px;
}
/* ===== فلترة المشاريع ===== */
.projects-filter {
  text-align: center;
  margin: 40px auto 10px;
}

.filter-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  background: rgba(0,0,0,0.25);
  padding: 10px 18px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}

.filter-btn {
  background: transparent;
  color: #d4af37;
  border: 1px solid rgba(212,175,55,0.5);
  border-radius: 6px;
  padding: 8px 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.filter-btn:hover {
  background: #d4af37;
  color: #000;
}

.filter-btn.active {
  background: #d4af37;
  color: #000;
  box-shadow: 0 0 10px rgba(212,175,55,0.3);
}
/* نطبّق الضبط دا على شبكة المشاريع الرئيسية بس */
body.projects-page #grid-executed{
  justify-content: center;
}

body.projects-page #grid-executed .project-card{
  max-width: 420px;   /* أو الرقم اللي يعجبك */
  width: 100%;
}