.my-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
}

/* sm */
@media (min-width: 640px) {
  .my-container {
    max-width: 640px;
  }
}

/* md */
@media (min-width: 768px) {
  .my-container {
    max-width: 768px;
  }
}

/* lg */
@media (min-width: 1024px) {
  .my-container {
    max-width: 100%;
    padding-inline: 24px;
  }
}

/* xl */
@media (min-width: 1280px) {
  .my-container {
    max-width: 1200px;
    padding-inline: 32px;
  }
}

/* xl */
@media (min-width: 1280px) {
  .my-container {
    max-width: 1400px;
    padding-inline: 40px;
  }
}

.hero-section {
  background-image: url("../images/herobg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  height: 60vh;
}

.srv-robot {
  position: absolute;
  bottom: 5rem;
  left: 15%;
  height: 60%;
  max-height: 400px;
}

/* Tablet */
@media (min-width: 768px) {
  .srv-robot {
    bottom: 6rem;
    left: 6%;
    height: 65%;
    max-height: 450px;
  }
}

/* Laptop */
@media (min-width: 1024px) {
  .srv-robot {
    bottom: 8rem;
    left: 15%;
    height: 64%;
    max-height: 500px;
    width: 18rem;
  }
}


@media(min-width: 1025px) and (max-width: 1279px) {
  .srv-robot {
    bottom: 8rem;
    left: 1% !important;
    height: 60%;
    max-height: 500px;
    width: 18rem;
  }
}

/* Desktop كبير */
@media (min-width: 1280px) {
  .srv-robot {
    bottom: 8rem;
    left: 15%;
    height: 75%;
    max-height: 570px;
    width: 22rem;
  }
}

.srv-char {
  position: absolute;
  bottom: 8rem;
  left: 0%;
  height: 30%;
  max-height: 400px;
}

@media(max-width: 1580px) {
  .srv-robot {
    left: 5%;
  }

  .srv-char {
    display: none !important;
  }
}

.grid-dense {
  display: grid;
  grid-auto-flow: row dense;
}