body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* الحاجات العامة للكمبيوتر */
.text {
  color: rgb(0, 204, 255);
  position: relative;
  left: 50px;
  font-size: 30px;
  top: -40px;
}

#icon {
  color: rgb(0, 255, 200);
}

#bitcoin {
  width: 45px;
  position: relative;
  top: -100px;
}

.about {
  position: absolute;
  top: 100px;
  left: 1200px;
}

ul li {
  display: inline;
  padding-left: 50px;
  position: relative;
  top: -150px;
  left: 900px;
}

#home {
  color: rgb(0, 162, 255);
}

a {
  text-decoration: none;
}

.icons {
  display: inline;
  position: relative;
  top: -185px;
  left: 1700px;
  color: rgb(0, 162, 255);
}

#one,
#two,
#three {
  font-size: 20px;
}

#one {
  padding-right: 30px;
}

#three {
  padding-left: 30px;
}

.imge {
  width: 700px;
  position: relative;
  left: 1100px;
  top: 100px;
}

.banner-btn {
  display: inline-block;
  background: rgb(0, 204, 255);
  padding: 0.8rem 1.2rem;
  color: black;
  font-weight: bold;
  outline: 0.2rem solid rgb(0, 204, 255);
  outline-offset: 4px;
  cursor: pointer;
  margin-top: 2rem;
  border-radius: 50px;
  position: relative;
  right: 400px;
}

.foto {
  background-color: rgba(197, 197, 197, 0.116);
  position: relative;
  top: -150px;
}

.address {
  position: relative;
  top: -480px;
  left: 300px;
  font-size: 60px;
}

.lorem {
  position: relative;
  top: -500px;
  left: 300px;
  font-size: 20px;
}

.foto2 {
  width: 700px;
  position: relative;
  left: 200px;
  top: 40px;
}

.about {
  position: relative;
  top: -600px;
  font-size: 50px;
}

.text2 {
  position: relative;
  top: -620px;
  left: 1195px;
  color: rgb(0, 204, 255);
}

.lorem2 {
  position: relative;
  top: -600px;
  left: 1200px;
}

.lorem3 {
  position: relative;
  top: -580px;
  left: 1200px;
}

.lorems {
  position: relative;
  top: -550px;
  left: 1200px;
}

.true {
  position: relative;
  top: -730px;
  left: 1100px;
  inline-size: 20px;
}

#true1 {
  padding: 20px;
  position: relative;
  background-color: rgba(0, 204, 255, 0.678);
  inline-size: 25px;
  border-radius: 50px;
}

.banner-btn2 {
  display: inline-block;
  background: rgb(0, 204, 255);
  padding: 0.8rem 1.2rem;
  color: black;
  font-weight: bold;
  outline: 0.2rem solid rgb(0, 204, 255);
  outline-offset: 4px;
  cursor: pointer;
  margin-top: 2rem;
  border-radius: 50px;
  position: relative;
  top: -700px;
  left: 1000px;
}

#img2 {
  position: relative;
  left: 1000px;
  width: 100px;
  top: -200px;
}

#img3 {
  position: relative;
  left: 350px;
  width: 100px;
  top: -200px;
}

#img1 {
  position: relative;
  top: -200px;
  width: 100px;
}

.i1 {
  position: relative;
  top: -240px;
  left: 220px;
}

.i2 {
  position: relative;
  left: 780px;
  top: -310px;
}

.i3 {
  position: relative;
  left: 1330px;
  top: -370px;
}

.p1 {
  color: rgb(0, 204, 255);
  position: relative;
  top: -370px;
  left: 220px;
}

.p2 {
  color: rgb(0, 204, 255);
  position: relative;
  top: -410px;
  left: 780px;
}

.p3 {
  color: rgb(0, 204, 255);
  position: relative;
  top: -450px;
  left: 1330px;
}

/* هنا نضيف تعديلات لشاشات أصغر (موبايل) */
@media screen and (max-width: 768px) {
  /* نلغي كل المواضع المطلقة أو النسبية الثقيلة عشان ما تتداخل */
  .text,
  #icon,
  #bitcoin,
  .about,
  ul li,
  .icons,
  .imge,
  .banner-btn,
  .foto,
  .address,
  .lorem,
  .foto2,
  .text2,
  .lorem2,
  .lorem3,
  .lorems,
  .true,
  .banner-btn2,
  #img1,
  #img2,
  #img3,
  .i1,
  .i2,
  .i3,
  .p1,
  .p2,
  .p3 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    margin: 0 auto;
    text-align: center;
  }

  ul li {
    display: block;
    padding-left: 0;
    margin: 10px 0;
  }

  .icons {
    margin: 15px 0;
    text-align: center;
  }

  .imge,
  .foto2 {
    width: 90%;
    height: auto;
  }

  .banner-btn,
  .banner-btn2 {
    margin: 20px auto;
    display: inline-block;
  }

  .address {
    font-size: 32px;
  }

  .about {
    font-size: 28px;
  }

  .text2 {
    color: rgb(0, 204, 255);
    font-size: 20px;
    margin: 10px auto;
  }

  #img1,
  #img2,
  #img3 {
    width: 80px;
    margin: 10px auto;
    display: block;
  }

  .i1,
  .i2,
  .i3,
  .p1,
  .p2,
  .p3 {
    text-align: center;
    position: static !important;
    margin: 10px auto;
  }

  .true i {
    margin: 15px auto;
    display: block;
  }
}