if (document.querySelector(".index")) {
let yStyle = document.createElement("style");
yStyle.innerHTML = `
  .y-links ,
  .y-feat{
    margin: 40px 0px 20px;
    padding: 0px 15px;
  }
  .y-links {

  }
  .y-links .y-links-container {
  padding-top: 60px;
      background-image: url(https://i.postimg.cc/L6mXsDkv/Frame-1261153208.png);
    background-size: contain;
    background-repeat: no-repeat;
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 500px));
    gap: 10px;
    justify-content: center;
    align-items: start;
  }
  .y-links-container a:nth-of-type(3) {
    grid-row: span 2;
  }
  .y-links-container a ,
  .y-feat-container a {
    display: flex;
    width: 100%;
    justify-content: center;
    transition: .3s linear;
  }
  .y-links-container a img ,
  .y-feat-container a img{
    max-width: 100%;
  }
  .y-links-container a:hover ,
  .y-feat-container a:hover {
    transform: scale(1.04);  
  }
  
  /* features section styles */
  
  .y-feat .y-feat-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 600px));
    gap: 10px;
    justify-content: center;
    align-items: start;
  }
  
  @media (max-width: 1024px) {
  .y-feat .y-feat-container {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
    .y-feat-container a:nth-of-type(2) {
      grid-row: 1;
      grid-column: span 2;
    
    }    
  }
`;

document.head.appendChild(yStyle);



  let linksCont = document.createElement("div");
  linksCont.classList.add("y-links");
  linksCont.innerHTML = `
  <div class="s-slider-block__title"><div class="s-slider-block__title-right"><h2>أقســــامنا</h2></div></div>
  <div class="y-links-container">
    <a href="https://mtgr-brandat.com/%D8%A3%D8%AD%D8%B0%D9%8A%D9%87/c28155042">
      <img src="https://i.postimg.cc/0yWrFSwn/Frame-1261152897.png" 
 alt="link_1" />
    </a>
    <a href="https://mtgr-brandat.com/%D8%AD%D9%82%D8%A7%D8%A6%D8%A8/c488493785">
      <img src="https://i.postimg.cc/6Q8TXQVX/Frame-1261152898.png" 
alt="link_2" />
    </a>
        <a href="https://mtgr-brandat.com/%D9%85%D9%84%D8%A7%D8%A8%D8%B3/c1536542042">
      <img src="https://i.postimg.cc/qBsq0SKz/Frame-1261152900.png" 
alt="link_3" />
    </a>
        <a href="https://mtgr-brandat.com/%D8%AC%D9%88%D8%A7%D8%B1%D8%A8/c1472477020">
      <img src="https://i.postimg.cc/fRTJ8CJk/Frame-1261152899.png" 
alt="link_4" />
    </a>
        <a href="https://mtgr-brandat.com/%D9%83%D8%A7%D8%A8%D8%A7%D8%AA/c1186331975">
      <img src="https://i.postimg.cc/XJFJrDD1/Frame-1261152901.png" 
alt="link_5" />
    </a>
  </div>
  `;
  document.querySelectorAll(".s-block--fixed-banner")[0].after(linksCont);
  

// features sections

  let ftCont = document.createElement("div");
  ftCont.classList.add("y-feat");
  ftCont.innerHTML = `
  <div class="s-slider-block__title"><div class="s-slider-block__title-right"><h2>أقســــامنا</h2></div></div>
  <div class="y-feat-container">
    <a>
      <img src="https://i.postimg.cc/Y0HSYf5r/Group-1597883088.png" 
 alt="feat_1" />
    </a>
    <a>
      <img src="https://i.postimg.cc/s2bxDRKZ/Frame-1984078075.png" 
alt="feat_2" />
    </a>
        <a>
      <img src="https://i.postimg.cc/3NFxB0hg/Group-1597883089.png" 
alt="feat_3" />
    </a>
  </div>
  `;
  document.querySelector("footer").before(ftCont);

}