@media only screen and (max-width: 1600px) {
  .contact {
    width: 70vw;
  }
}

/* for 1000 px display size */
@media only screen and (max-width: 1000px) {
  .home_container .home_content {
    /* background-color: lightblue; */
    width: 500px;
    margin-left: 100px;
  }

  .main-container .sidebar {
    position: fixed;
    top: 0;
    left: -500px;
  }

  .sidebar .sidebar-title .x-mark {
    display: inline;
    pointer-events: all;
  }

  .hamburger {
    display: inline-block;
  }

  /* about section  */
  .about_container .content {
    margin-left: 100px;
  }

  .personal_details {
    display: block;
    width: 300px;
  }

  .personal_details ul li {
    padding: 5px 20px;
    border-bottom: 1px solid black;
  }

  .about_container button {
    left: 100px;
  }

  /* education section starts here  */
  .education_main_content .education_box {
    width: 100%;
  }

  .education_main_content .education_box::before {
    left: 93.5px;
  }

  /* skill section */

  .technicalBar {
    margin-left: -120px;
  }

  .technicalBar .box {
    padding: 10px;
    min-width: 60%;
  }

  /* project section start here  */
  .projects h1 {
    margin-left: 100px;
  }

  .projects .gallery_container {
    margin-left: 100px;
    justify-content: flex-start;
  }

  /* <!-- contact us form  --> */
  .contact {
    margin-left: 100px;
    padding-top: 30px;
    width: 80vw;
  }
}

/* for 800 px display size */
@media only screen and (max-width: 800px) {
  .home_container .home_content {
    margin-left: 30px;
  }

  /* about section  */
  .about_container .content {
    margin-left: 30px;
  }

  .about_container button {
    left: 30px;
  }

  /* education section starts here  */
  .education_main_content {
    .education_main_content .education_box {
      font-size: large;
    }

    .education_main_content .education_box::before {
      left: 24.5px;
    }

    /* skill section */
    .technicalBar {
      margin-left: -145px;
      font-size: small;
    }

    .technicalBar .box {
      padding: 10px;
      min-width: 60%;
    }

    /* project section start here  */
    .projects h1 {
      margin-left: 50px;
    }

    .projects .gallery_container {
      margin-left: 50px;
      justify-content: flex-start;
    }
  }

  /* <!-- contact us form  --> */
  .contact {
    margin-left: 10px;
    padding-top: 30px;
    width: 95vw;
  }

  .contact h2 {
    font-size: 2rem;
  }

  .contact h3 {
    font-size: 1rem;
  }
}

/* for 630 px display size */
@media only screen and (max-width: 630px) {
  .home_container .home_content {
    font-size: small;
  }

  .home_container .home_image {
    width: 173px;
    height: 226px;
    border-radius: 50%;
    margin: 0 40px;
  }

  .home_container .home_image img {
    width: 173px;
    border-radius: 50%;
  }

  .home_container .home_btn {
    padding: 8px 10px;
    margin-top: 30px;
    font-size: 10px;
  }

  /* about section  */
  .about_container .content {
    font-size: small;
  }

  .about_container .content h1 {
    font-size: 2rem;
  }

  .about_container button {
    padding: 8px 10px;
    margin-top: 30px;
    font-size: 10px;
  }

  /* education section starts here  */
  .education_main_content {
    border-left: 3px solid blueviolet;
  }

  .education_main_content .education_box {
    width: 100%;
    font-size: small;
    padding: 10px 15px;
  }

  .education_main_content .education_box::before {
    left: 27px;
    height: 10px;
    width: 10px;
  }

  /* skill section */
  .technicalBar {
    margin-left: -130px;
  }

  .technicalBar .box {
    padding: 10px;
    min-width: 60%;
  }

  .technicalBar .heading {
    font-size: 2rem;
  }

  /* project section start here  */
  .projects h1 {
    margin-left: 30px;
    font-size: 2rem;
  }

  .projects .gallery_container {
    margin-left: 30px;
    justify-content: flex-start;
  }

  .gallery_item {
    flex-basis: 20%;
    min-width: 400px;
    min-height: 150px;
  }

  /* <!-- contact us form  --> */
  .contact {
    margin-left: 5px;
    padding-top: 30px;
    width: 95vw;
  }
  .Languages {
    /* margin-left: 15px; */
  }
  .contact .c2 {
    margin-left: 18px;
  }
  .contact h2 {
    font-size: 1.75rem;
  }

  .contact h3 {
    font-size: 0.85rem;
  }
}

/* for 450 px display size */
@media only screen and (max-width: 450px) {
  .hamburger {
    height: 30px;
    width: 30px;
    font-size: 20px;
  }
  .home_container {
    height: 60vh;
  }

  .home_container .home_content {
    font-size: 10px;
  }

  .home_container .home_image {
    width: 127px;
    border-radius: 50%;
    margin: 0 20px;
  }

  .home_container .home_image img {
    width: 127px;
    border-radius: 50%;
  }

  /* about section  */
  .about_container {
    margin-top: -98px;
  }

  .about_container .content {
    font-size: 10px;
  }

  .about_container .content h1 {
    font-size: 1.5rem;
  }

  .about_container .content h2 {
    font-size: 0.75rem;
  }

  /* education section starts here  */
  .education_main_content {
    border-left: 3px solid blueviolet;
  }

  .education_main_content .education_box {
    width: 110%;
    font-size: 0.6rem;
    padding: 10px 15px;
  }

  .education_main_content .education_box::before {
    left: 27px;
    height: 10px;
    width: 10px;
  }

  /* skill section */
  .technicalBar {
    margin-left: 15px;
    display: block;
  }

  .technicalBar .box {
    padding: 10px;
    min-width: 60%;
  }

  .technicalBar .heading {
    font-size: 1.5rem;
  }

  .technicalBar .box .bar {
    font-size: 15px;
  }

  .technicalBar .box .bar span {
    font-size: 15px;
  }

  .technicalBar .tools {
    padding: 0;
  }

  /* project section start here  */
  .projects h1 {
    margin-left: 30px;
    font-size: 1.5rem;
  }

  .projects .gallery_container {
    margin-left: 30px;
    justify-content: flex-start;
  }

  .gallery_item {
    flex-basis: 20%;
    min-width: 300px;
    min-height: 150px;
  }
  /* <!-- contact us form  --> */
  .contact {
    margin-left: 0px;
    padding-top: 30px;
  }

  .contact h2 {
    font-size: 1.5rem;
  }
  .contact .c2 {
    margin-left: 18px;
  }
  .contact h3 {
    font-size: 0.65rem;
  }
  .contact_box i {
    font-size: 1rem;
    color: var(--orange);
  }
  .form-control {
    font-size: 10px;
    padding: 15px;
  }
  form div button {
    padding: 10px 20px;
    font-size: 0.65rem;
  }
  .contact .c2 {
    margin-left: 25px;
  }
}