if (document.querySelector(`[lang="ar"] .index`)) {
    const style = document.createElement('style');
    style.textContent = `
        
        
        .page-header{
          background-color:#032946 !important;
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 30px;
            margin-top: 40px;
            padding: 20px;
            width: 100%;
        }

        .image-anchor {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            transition: transform 0.3s ease;
            width: 100%;
        }

        .image-anchor:hover {
            transform: scale(1.05);
        }

        .image-anchor img {
            width: 200px;
            height: 200px;
            object-fit: cover;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin-bottom: 15px;
        }

        .image-title {
            color: #614834;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            margin-top: 10px;
        }

        /* Media Queries */
        @media (max-width: 1200px) {
            .image-grid {
                gap: 20px;
            }
            .image-anchor img {
                width: 150px;
                height: 150px;
            }
        }

        @media (max-width: 992px) {
            .image-grid {
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(2, auto);
            }
            .image-anchor img {
                width: 100px;
                height: 100px;
            }
        }

        @media (max-width: 768px) {
            .image-grid {
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(2, auto);
                gap: 15px;
                max-width: 100%;
                padding: 10px;
            }
            .image-anchor img {
                width: 90px;
                height: 90px;
            }
            .image-title {
                font-size: 14px;
            }
        }

        @media (max-width: 576px) {
            .image-grid {
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(2, auto);
                gap: 10px;
                max-width: 100%;
                padding: 5px;
            }
            .image-anchor img {
                width: 80px;
                height: 80px;
            }
            .image-title {
                font-size: 12px;
            }
            .container {
                padding: 0;
            }
        }

        @media (max-width: 400px) {
            .image-grid {
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(2, auto);
                gap: 5px;
                max-width: 100%;
                padding: 5px;
            }
            .image-anchor img {
                width: 70px;
                height: 70px;
            }
            .image-title {
                font-size: 11px;
            }
        }
    `;
    document.head.appendChild(style);

    // Create HTML structure
    function createHTML() {
        // Create image grid container
        const imageGridContainer = document.createElement('div');
        imageGridContainer.innerHTML = `
            <div class="container">
                <div class="image-grid">
        <a href="/%D8%A7%D9%84%D8%A7%D9%81%D9%8A%D8%A7%D8%B4-%D8%A7%D9%84%D8%B0%D9%83%D9%8A%D8%A9-Smart-houses/c1511806730" class="image-anchor">
            <img src="https://i.postimg.cc/RFPp7wz6/Group-3555.png" alt="الافياش الذكية" loading="lazy">
            <div class="image-title">الافياش الذكية</div>
        </a>
        <a href="/%D8%A7%D9%84%D8%B1%D9%8A%D9%85%D9%88%D8%AA-%D8%A7%D9%84%D8%B0%D9%83%D9%8A-smart-houses/c203926637" class="image-anchor">
            <img src="https://i.postimg.cc/MZFrX0Dg/Group-588.png" alt="الريموت الذكي" loading="lazy">
            <div class="image-title">الريموت الذكي</div>
        </a>
        <a href="/%D8%A7%D9%84%D8%A7%D9%82%D9%81%D8%A7%D9%84-%D8%A7%D9%84%D8%B0%D9%83%D9%8A%D9%87-Smart-houses/c844795244" class="image-anchor">
            <img src="https://i.postimg.cc/MHNs4xHz/Group-81.png" alt="الاقفال الذكية" loading="lazy">
            <div class="image-title">الاقفال الذكية</div>
        </a>
        <a href="/%D8%A7%D9%84%D8%B3%D9%88%D9%8A%D8%AA%D8%B4%D8%A7%D8%AA-%D8%A7%D9%84%D8%B0%D9%83%D9%8A%D8%A9-Smart-houses/c1618767459" class="image-anchor">
            <img src="https://i.postimg.cc/sXf0GwbC/Group-888.png" alt="السويتشات الذكية" loading="lazy">
            <div class="image-title">السويتشات الذكية</div>
        </a>
        <a href="/%D8%A7%D9%84%D9%85%D8%B3%D8%A7%D8%B1%D8%AD-%D8%A7%D9%84%D9%85%D9%86%D8%B2%D9%84%D9%8A%D9%87-Smart-houses/c95816040" class="image-anchor">
            <img src="https://i.postimg.cc/T1p7ChRk/Group-8887.png" alt="المسارح المنزلية" loading="lazy">
            <div class="image-title">المسارح المنزلية</div>
        </a>
    </div>
            </div>
        `;

        // Append image grid after the first fixed banner
        const fixedBanner = document.querySelector('.s-block--fixed-banner');
        if (fixedBanner) {
            fixedBanner.after(imageGridContainer);
        }
    }

    // Initialize the app
    document.addEventListener('DOMContentLoaded', () => {
        createHTML();
    });
 }
 
 
 else if (document.querySelector(".product-index ")) {
    const style = document.createElement('style');
    style.textContent = `
        
        
        .page-header{
          background-color:#032946 !important;
        }
        
        `;
        
    }
  
  
  if (document.querySelector(`[lang="en"] .index`)) {
    const style = document.createElement('style');
    style.textContent = `
        
        
        .page-header{
          background-color:#032946 !important;
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 30px;
            margin-top: 40px;
            padding: 20px;
            width: 100%;
        }

        .image-anchor {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            transition: transform 0.3s ease;
            width: 100%;
        }

        .image-anchor:hover {
            transform: scale(1.05);
        }

        .image-anchor img {
            width: 200px;
            height: 200px;
            object-fit: cover;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin-bottom: 15px;
        }

        .image-title {
            color: #614834;
            font-size: 16px;
            font-weight: bold;
            text-align: center;
            margin-top: 10px;
        }

        /* Media Queries */
        @media (max-width: 1200px) {
            .image-grid {
                gap: 20px;
            }
            .image-anchor img {
                width: 150px;
                height: 150px;
            }
        }

        @media (max-width: 992px) {
            .image-grid {
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(2, auto);
            }
            .image-anchor img {
                width: 100px;
                height: 100px;
            }
        }

        @media (max-width: 768px) {
            .image-grid {
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(2, auto);
                gap: 15px;
                max-width: 100%;
                padding: 10px;
            }
            .image-anchor img {
                width: 90px;
                height: 90px;
            }
            .image-title {
                font-size: 14px;
            }
        }

        @media (max-width: 576px) {
            .image-grid {
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(2, auto);
                gap: 10px;
                max-width: 100%;
                padding: 5px;
            }
            .image-anchor img {
                width: 80px;
                height: 80px;
            }
            .image-title {
                font-size: 12px;
            }
            .container {
                padding: 0;
            }
        }

        @media (max-width: 400px) {
            .image-grid {
                grid-template-columns: repeat(5, 1fr);
                grid-template-rows: repeat(2, auto);
                gap: 5px;
                max-width: 100%;
                padding: 5px;
            }
            .image-anchor img {
                width: 70px;
                height: 70px;
            }
            .image-title {
                font-size: 11px;
            }
        }
    `;
    document.head.appendChild(style);

    // Create HTML structure
    function createHTML() {
        // Create image grid container
        const imageGridContainer = document.createElement('div');
        imageGridContainer.innerHTML = `
            <div class="container">
                <div class="image-grid">
        <a href="/%D8%A7%D9%84%D8%A7%D9%81%D9%8A%D8%A7%D8%B4-%D8%A7%D9%84%D8%B0%D9%83%D9%8A%D8%A9-Smart-houses/c1511806730" class="image-anchor">
            <img src="https://i.postimg.cc/RFPp7wz6/Group-3555.png" alt="smart plugs" loading="lazy">
            <div class="image-title">smart plugs</div>
        </a>
        <a href="/%D8%A7%D9%84%D8%B1%D9%8A%D9%85%D9%88%D8%AA-%D8%A7%D9%84%D8%B0%D9%83%D9%8A-smart-houses/c203926637" class="image-anchor">
            <img src="https://i.postimg.cc/MZFrX0Dg/Group-588.png" alt="smart remotes" loading="lazy">
            <div class="image-title">smart remotes</div>
        </a>
        <a href="/%D8%A7%D9%84%D8%A7%D9%82%D9%81%D8%A7%D9%84-%D8%A7%D9%84%D8%B0%D9%83%D9%8A%D9%87-Smart-houses/c844795244" class="image-anchor">
            <img src="https://i.postimg.cc/MHNs4xHz/Group-81.png" alt="smart locks" loading="lazy">
            <div class="image-title">smart locks</div>
        </a>
        <a href="/%D8%A7%D9%84%D8%B3%D9%88%D9%8A%D8%AA%D8%B4%D8%A7%D8%AA-%D8%A7%D9%84%D8%B0%D9%83%D9%8A%D8%A9-Smart-houses/c1618767459" class="image-anchor">
            <img src="https://i.postimg.cc/sXf0GwbC/Group-888.png" alt="smart swithces" loading="lazy">
            <div class="image-title">smart swithces</div>
        </a>
        <a href="/%D8%A7%D9%84%D9%85%D8%B3%D8%A7%D8%B1%D8%AD-%D8%A7%D9%84%D9%85%D9%86%D8%B2%D9%84%D9%8A%D9%87-Smart-houses/c95816040" class="image-anchor">
            <img src="https://i.postimg.cc/T1p7ChRk/Group-8887.png" alt="home theaters" loading="lazy">
            <div class="image-title">home theaters</div>
        </a>
    </div>
            </div>
        `;

        // Append image grid after the first fixed banner
        const fixedBanner = document.querySelector('.s-block--fixed-banner');
        if (fixedBanner) {
            fixedBanner.after(imageGridContainer);
        }
    }

    // Initialize the app
    document.addEventListener('DOMContentLoaded', () => {
        createHTML();
    });
 }
 
 
 else if (document.querySelector(".product-index ")) {
    const style = document.createElement('style');
    style.textContent = `
        
        
        .page-header{
          background-color:#032946 !important;
        }
        
        `;
        
    }