@media (min-width: 1024px) {
  /* project */

  #project-content {
    display: flex;
    justify-content: space-around;
  }
  #box {
    width: 35%;
  }

  .about-info-div::after {
    content: "";
    top: 21.5%;
    left: 1%;
    position: absolute;
    display: block;
    width: 76%;
    height: 5px;
    border-radius: 10px;
    background-color: white;
    z-index: -1;
  }
}

@media (max-width: 768px) {
  /* home */
  #home {
    border-radius: 10px;
    width: 95%;
    background-size: cover;
  }

  .innerdiv {
    width: 100%;
    margin-left: 4%;
  }

  .homeh1 {
    font-size: 30px;
  }

  .inner-p {
    color: black;
    font-size: 20px;
  }

  .aboutme {
    width: 30%;
  }
  .socialicon {
    right: 20px;
    height: 25%;
  }

  /* project */

  #project-content {
    display: flex;
    justify-content: space-around;
  }
  #box {
    width: 45%;
  }

  /* about */

  .aboutdiv {
    width: 95%;
  }

  .about-show {
    width: 100%;
  }

  .about-info-div {
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
  }

  .first {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .inner-third {
    width: 10%;
  }

  .inner-third {
    width: 85%;
    margin: 20px 0px;
  }

  .cirlce {
    position: absolute;
  }

  #ci1 {
    top: 10%;
    left: 10%;
  }

  #ci2 {
    top: 37%;
    left: 10%;
  }

  #ci3 {
    top: 64%;
    left: 10%;
  }

  #ci4 {
    top: 87%;
    left: 10%;
  }

  .about-info-div::after {
    content: "";
    top: 12%;
    left: 11%;
    position: absolute;
    display: block;
    width: 5px;
    height: 76%;
    border-radius: 10px;
    background-color: white;
    z-index: -1;
  }

  /* contact */
  .contdiv {
    width: 100%;
  }
  .cont-first {
    width: 40%;
  }

  .cont-seco {
    width: 60%;
  }

  /*footer*/
  .footsocialicon {
    width: 20%;
  }
}

@media (max-width: 450px) {
  /* home */
  #home {
    border-radius: 10px;
    width: 95%;
    background-image: url(/image/pone-home.png);
    background-size: contain;
    position: relative;
  }

  .innerdiv {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 25%;
    margin: 0px;
    text-align: center;
  }

  .homeh1 {
    font-size: 25px;
    background-color: green;
  }

  .inner-p {
    color: white;
    font-size: 20px;
  }

  .aboutme {
    font-size: 18px;
    width: 60%;
    color: white;
    margin: 20px auto;
    padding: 10px 0px;
    text-align: center;
    border-radius: 50px;
  }
  .socialicon {
    width: 10%;
    right: 20px;
    height: 20%;
    position: absolute;
    top: 7%;
    left: 0;
  }

  /* project */

  #project-content {
    display: flex;
    justify-content: space-around;
  }
  #box {
    width: 100%;
  }

  /* tech */
  .techdiv {
    width: 100%;
  }
  .upper-tech {
    margin: auto 5px;
  }
  .skilbar {
    width: 100%;
    margin: auto;
  }

  /* about */

  .aboutdiv {
    width: 95%;
  }

  .about-show {
    width: 100%;
  }

  .about-info-div {
    width: 100%;
    display: flex;
    position: relative;
    flex-direction: column;
  }

  .first {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }

  .inner-third {
    width: 75%;
    margin: 20px 0px;
  }

  .cirlce {
    position: absolute;
  }

  #ci1 {
    top: 0%;
    left: 17%;
  }

  #ci2 {
    top: 25%;
    left: 17%;
  }

  #ci3 {
    top: 50%;
    left: 17%;
  }

  #ci4 {
    top: 75%;
    left: 17%;
  }

  .about-info-div::after {
    content: "";
    top: 1%;
    left: 19%;
    position: absolute;
    display: block;
    width: 5px;
    height: 76%;
    border-radius: 10px;
    background-color: white;
    z-index: 1;
  }

  /* contact */

  .cont {
    width: 100%;
    margin: 20px 0px;
  }
  .contdiv {
    width: 100%;
    display: block;
    margin: 10px auto;
  }

  .cont-first {
    text-align: center;
    width: 100%;
    color: white;
  }

  .cont-h1 {
    font-size: 40px;
    margin-bottom: 10px;
  }

  .soc {
    /* background-color: blue; */
    height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .mail {
  }

  .cont-seco {
    width: 100%;
    /* background-color: green; */
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  #inname {
    width: 90%;
    margin: 10px 0px;
    outline: none;
    border: none;
    border-radius: 10px;
    height: 45px;
    color: white;
    padding: 10px;
    background-color: rgba(75, 0, 110, 0.493);
  }

  #inemail {
    width: 90%;
    margin: 10px 0px;
    outline: none;
    border: none;
    color: white;
    border-radius: 10px;
    height: 45px;
    padding: 10px;
    background-color: rgba(75, 0, 110, 0.493);
  }

  #textar {
    width: 90%;
    margin: 10px 0px;
    outline: none;
    border: none;
    color: white;
    border-radius: 10px;
    padding: 10px;
    background-color: rgba(75, 0, 110, 0.493);
  }

  #sub {
    width: 70%;
    height: 45px;
    background: rgb(0, 121, 126);
    background: linear-gradient(
      90deg,
      rgba(0, 121, 126, 1) 0%,
      rgba(73, 0, 141, 1) 50%,
      rgba(88, 0, 132, 1) 75%,
      rgba(132, 0, 127, 1) 100%
    );
    border-radius: 10px;
    border: none;
    cursor: pointer;
    color: white;
  }

  /* footer */
  .footerdiv {
    width: 90%;
    color: white;
    display: flex;
    justify-content: space-between;
    margin: 10px auto;
  }

  .footh3 {
    background: -webkit-linear-gradient(#e600ff, #650077);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .footsocialicon {
    width: 40%;
    display: flex;
    justify-content: space-around;
  }
}