about.css

.about-section {
  grid-area: about;
  width: 100vw;
  height: 1000px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 50px;
  padding-right: 50px;
}

/* ----------text-container------------*/

.about-text {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  right: auto;
  border-radius: 10px;
  padding: 7%;
  width: 50vw;
  height: 650px;
  z-index: +2;
  background-color: #616161;
  box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.6);
}

h3 {
  font-size: 3rem;
  color: var(--withe);
  font-family: Poppins;
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.6);
}

p {
  color: var(--withe);
  font-family: Poppins;
  font-size: 1.6rem;
}

/*----------ship-picture--------------*/

.ship {
  padding: 10px;
  background-color: var(--withe);
  border-radius: 1%;
  z-index: +1;
  width: 520px;
  height: 800px;
  margin-bottom: 20px;
}

/*-----------responsive design-------------*/

@media only screen and (max-width: 1570px) {
  .about-section {
    display: flex;
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 1385px) {
  h3 {
    font-size: 38px;
  }
  p {
    font-size: 27px;
  }
  .about-text {
    height: fit-content;
  }
}

@media only screen and (max-width: 1240px) {
  .about-section {
    margin-top: 150px;
    display: flex;
    justify-content: center;
  }
  .ship {
    height: 600px;
  }
  .about-text {
    height: 400px;
    width: 850px;
  }
}

@media only screen and (max-width: 1140px) {
  .pic {
    display: flex;
    justify-content: center;
  }
  .about-text {
    height: 400px;
    width: 850px;
  }
  .about-section {
    margin-top: 50px;
    display: flex;
    justify-content: center;
  }
  h3 {
    font-size: 38px;
  }
  p {
    font-size: 25px;
  }
}

@media only screen and (max-width: 830px) {
  p {
    font-size: 23px;
  }
}

@media only screen and (max-width: 680px) {
  p {
    font-size: 20px;
  }
  .ship {
    height: 600px;
    width: 400px;
  }
}

@media only screen and (max-width: 620px) {
  .about-section {
    margin-top: -50px;
  }
}

@media only screen and (max-width: 560px) {
  h3 {
    font-size: 30px;
  }
  p {
    font-size: 20px;
  }
  .ship {
    height: 400px;
    width: 300px;
    margin-top: -200px;
  }

  .about-text {
    margin-top: -300px;
  }
  .about-section {
    margin-top: 50px;
  }
}

@media only screen and (max-width: 470px) {
  h3 {
    font-size: 28px;
  }
  p {
    font-size: 18px;
  }
  .ship {
    height: 400px;
    width: 300px;
    margin-top: -20px;
  }

  .about-text {
    margin-top: -150px;
  }
  .about-section {
    margin-top: 0px;
  }
}

@media only screen and (max-width: 430px) {
  h3 {
    font-size: 25px;
  }
  p {
    font-size: 15px;
  }
}

@media only screen and (max-width: 430px) {
  .about-section {
    margin-top: -20px;
  }
  .about-text {
    margin-top: -150px;
  }
}

@media only screen and (max-width: 380px) {
  .about-section {
    margin-top: -50px;
  }
  .about-text {
    margin-top: -100px;
    width: 100vw;
  }
}

@media only screen and (max-width: 325px) {
  h3 {
    font-size: 22px;
  }
  p {
    font-size: 16px;
  }
  .about-section {
    margin-top: -50px;
  }
  .about-text {
    margin-top: -50px;
    min-width: 90vw;
  }
  .ship {
    min-width: 70vw;
    height: 350px;
    margin-top: 50px;
  }
  .pic {
    min-width: 90vw;
  }
}

@media only screen and (max-width: 305px) {
  h3 {
    font-size: 22px;
  }
  p {
    font-size: 16px;
  }
  .ship {
    margin-top: -50px;
  }
  .about-text {
    margin-top: -150px;
  }
}