@media (max-width: 991px) {
  html {
    font-size: 55%;
  }
}
@media (max-width: 400px) {
  html {
    font-size: 50%;
  }
}

@media (max-width: 1330px) {
  .apple-box {
    width: auto;
  }
  #apple-box1 {
    margin: 0;
  }
  #apple-box2 {
    margin: 0;
  }
}
@media (max-width: 1200px) {
  .heading3 {
    font-size: 7.2rem;
  }
}
@media (max-width: 1100px) {
  .heading3 {
    font-size: 6.5rem;
  }
}
@media (max-width: 1050px) and (min-width: 751px) {
  .heading2 {
    font-size: 4vw;
  }
  .apple {
    width: 4vw;
  }
}
@media (max-width: 900px) {
  #text-b {
    left: 8%;
  }
  #text-s {
    right: 8%;
  }
  .heading3 {
    font-size: 6rem;
  }
}
@media (max-width: 830px) {
  #page-content3 {
    flex-direction: column;
  }
  #side-img-3 {
    margin-top: 15rem;
  }
  .heading3 {
    font-size: 6.5rem;
  }
}

@media (max-width: 750px) {
  .div-container {
    grid-template-columns: repeat(1, 1fr);
  }
  .apple-box {
    max-width: 60rem;
    width: 100%;
  }
  #apple-box1 {
    margin-left: auto;
    margin-right: auto;
  }
  #apple-box2 {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 700px) {
  #text-b {
    left: 4%;
    bottom: 10%;
  }
  #text-s {
    right: 4%;
    top: 8%;
  }
}
@media (max-width: 601px) {
  #btns-container1{
  margin-left: 0;
}
}
@media (max-width: 560px) {
  .heading1 {
    font-size: 12vw;
  }
  #text1 h2 {
    font-size: 10vw;
  }
  .footer {
    flex-direction: column;
  }
}
@media (max-width: 460px) {
  .heading-box {
    flex-direction: column;
  }
}
@media (max-width: 400px) {
  #text-b {
    bottom: 15%;
  }
  #text-s {
    top: 15%;
  }
  .side-img {
    width: 90%;
  }
  .heading3 {
    font-size: 5rem;
  }
  #text4 h2 {
    font-size: 5.5rem;
  }
}
@media (max-width: 350px) {
  .nav-list {
    gap: 2rem;
  }
}