/* Add custom Js styles below */ 
document.addEventListener("DOMContentLoaded", () => {
  // مسك أول بانر فيه صورة
  const bannerContainer = document.querySelector("section img")?.parentElement?.parentElement;

  if (bannerContainer) {
    // overlay
    const overlay = document.createElement("div");
    overlay.classList.add("banner-overlay");

    // المحتوى
    overlay.innerHTML = `
      <div class="banner-content">
        <h1 class="banner-title">زرياب | فن السبحة الراقية</h1>
        <p class="banner-text">كل حبّة في سبحة زرياب تحكي قصة، مصنوعة بعناية لترافق لحظاتك الخاصة.</p>
        <a href="#services" class="banner-btn">اعرف أكثر</a>
      </div>
    `;

    // ضيفه
    bannerContainer.style.position = "relative";
    bannerContainer.appendChild(overlay);
  } else {
    console.log("⚠️ مش لاقي البانر");
  }
});