.structure, .structure-mobile {
  justify-content: center;
  align-items: center;
}
.structure img, .structure-mobile img {
  width: 100%;
  height: auto;
}

.structure-mobile {
  display: none;
}

.arabic-none {
  display: none;
}

@media (max-width: 480px) {
  .structure {
    display: none;
  }
  .structure-mobile {
    display: block;
  }
  .arabic-none {
    display: none;
  }
}


body[lang="en"]{ 
  .english-none {
  display: none;
}
.arabic-none {
  display: block;
}
.structure-mobile {
  display: none;
}

@media (max-width: 480px) {
 .structure {
    display: none;
  }
 .structure-mobile {
    display: block;
  }
 .english-none {
    display: none !important;
  }
}
}
/* 
i tried this solution easier code but the image is pixlated and not clear
.structure{
background-image: url(../Images/S5p4-img.jpg);  
width: 100%;
height: 50vw;
background-repeat: no-repeat;
background-size: cover;
} */