/* for home-responsive */
@media (max-width: 1000px) {
  /* content2 */
  .content2 {
    padding: 50px;
  }
  .content2 .content2-right img {
    width: 250px;
    height: 250px;
  }
  .content2 .content2-right .box {
    width: 250px;
    height: 250px;
  }

  /* content3 */
  .content3 {
    padding: 50px 80px;
  }

  /* project-list */
  .projectList .project {
    margin: 50px;
    gap: 50px;
  }
}

@media (max-width: 600px) {
  /* navbar */
  nav .menu {
    z-index: -1;
    height: 100vh;
    position: absolute;
    color: black;
    width: 60vw;
    top: 0;
    right: 0;
    background-image: linear-gradient(to right, #271e8b, #2e3192ef);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 50px;
    box-sizing: border-box;
    transform: translateX(100%);
    transition: 0.25s;
    min-width: 90px;
    transform: translateX(100%);
  }
  nav .hamburger-menu {
    display: block;
  }
  nav .menu.true {
    transform: translateX(0%);
  }

  /* content1 */
  .content1 .content1-body {
    flex-direction: column;
    justify-content: center;
  }
  .content1 .content1-left,
  .content1 .content1-right {
    width: 100%;
    margin: 20px 0;
    text-align: center;
  }

  /* project-list */

  .projectList .project {
    margin: 50px 20px;
    gap: 50px;
  }

  /* content2 */
  .content2 {
    padding: 150px 20px 0 20px;
    flex-direction: column-reverse;
    min-height: 600px;
  }
  .content2 .content2-right {
    margin-bottom: 50px;
  }

  /* content3 */
  .content3 {
    padding: 50px 20px;
    min-height: 700px;
  }
  .content3 .content3-title {
    margin-bottom: 30px;
  }
  .content3-card {
    gap: 20px;
    padding: 0 20px;
  }
  .content3-card .card {
    margin-bottom: 20px;
  }

  /* content4 */
  .content4 {
    padding: 0 20px;
  }
  .content4 .content4-core {
    flex-direction: column-reverse;
  }
  .content4-right {
    width: 100%;
  }
  .content4-footer {
    margin-bottom: 0;
  }
}

@media (max-width: 400px) {
  /* content1 */
  .content1 .content1-body {
    padding: 50px 20px;
  }
}