@media screen and(max-width:1280px) {
  * {
    margin: 0px;
    padding: 0px;
  }

}

/*for TABLET (max-width:1024px)*/
@media screen and (max-width:1024px) {
  * {
    margin: 0px;
    padding: 0px;
  }

  .left {
    height: auto;
    padding: 15px;
  }

  .section2 .right {
    height: 250px;
    width: 30%;
  }

  .nav-bar span {
    font-size: 13px;
    margin-left: 0px
  }

  .section3 .left {
    margin-top: 60px;
  }

  .section3 .right {
    height: auto;
  }

  #skills {
    margin-top: 100px
  }

  .section4 {
    margin: top 0px;
  }

  .clg,
  .school {
    height: 150px;
    padding: 10px;
  }

  .about {
    width: 90%;
  }
  .pro1{
    height: auto;
}
 .pro2{
  height:180px;
 }

/*for mini tablet 820px*/
@media screen and (max-width:820px) {
  * {
    margin: 0px;
    padding: 0px;
  }

  .left {
    height: auto;
    width: 55%;
  }
 .nav-bar span a {
  font-size:10px:
 }

  .right {
    margin-top: 0px;
  }

  #a2 {
    font-size: 50px;
  }

  #a3 {
    font-size: 30px;
  }

  .section2 .right {
    height: 250px;
    width: 40%;
    margin-top: 70px;
    padding: 0px;
  }

  .section3 .left {
    display: none;
  }

  .right3 {
    height: auto;
    width: auto;
    margin: initial;
  }

  #skills {
    margin: auto;
  }

  .section4 {
    margin: auto;
  }

  .section4 .right4 {
    display: grid;
    grid-template-columns: repeat(3, 2fr);
    gap: 30px;
    color: #ff9f1c;
    font-weight: bold;
    font-size: 25px;
    margin: auto
  }

  .about {
    width: 100%;
  }

  .clg,
  .school {
    padding: 10px;
    gap: 15px;
    height: 120px;
    margin-top: 20px;
  }

  .edu {
    width: 230px;
  }

  .skill {
    width: 230px;
  }
  .proj{
    flex-direction: column;
  }
  .projects{
    display: flex;
    align-items: center;
  }

  .clg p,
  .school p {
    font-size: 14px;
  }
  .pro1{
    height: auto;
  }
 .pro2{
  height:180px:
 }
}

/*for phones max width 480px*/
@media screen and (max-width:480px) {

  body {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  .section1 {
    width: auto;
    overflow-x: hidden;

  }

  .nav-bar {
    width: 100%;
    overflow-x: hidden;
    gap: 100px;
    justify-content: center;

  }

  .about {
    margin-top: 100px;
  }

  .section2 {
    flex-direction: column;
    margin-top: 100px;
    height: 100%;
    width: auto;
    overflow: hidden;
    padding: 20px;
    display: flex;
    gap: 80px;
  }

  .nav-bar span {
    display: none;
  }

  .nav-bar p {
    display:none;
    justify-content: space-evenly;
  }

  .section2 .left {
    width: 90%;
    padding: 15px;
  }

  .section2 .right {
    height: 200px;
    width: 60%;
    margin: auto;

  }

  .section3 {
    width: auto;
    padding: 0px;
  }

  .section3 .right3 {
    height: auto;
    width: auto;
    overflow-x: hidden;

  }

  .clg,
  .school {
    height: 100px;
    padding: 5px;
    gap: 10px;
    width: 90%;
  }

  .skills {
    width: 230px;
    align-items: center;
    text-align: center;
  }

  .lang {
    grid-template-columns: repeat(2, 1fr);
  }

  .section4 {
    margin-left: 20px;
    width: auto;
    overflow-x: hidden;

  }

  .section4 .right4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    width: auto;
    overflow-x: hidden;
    margin-top: 10px;
  }

  
  .pro{
    width: 230px;
  }

  .project {
    margin-top: 10px;
  }
  .pro1{
   height:auto;
   width:350px;
  }
  .pro2{
    height:170px;
    width: 350px;
  }
  .pro2 p{
     padding: 0px;
     align-items: center;
  }
  .pro1 h1{
    font-size: 21px;
  }
  .pro1 p{
    font-size: 12px;
  }
  .section5 {
    width: auto;
    overflow-x: hidden;
  }

  .project {
    display: grid;
    margin-top: 10px;
    gap: 30px;
  }
 #visit{
  margin-top:0px;
 }

  .section6 {
    width: auto;
    overflow-x: hidden;
   
  }
  .con-main{
    width:100%;
    font-size: 15px;
    margin-top: 30px;
  }
  .con-main h1{
    font-size:19px;
  }
  .con-main p{
    font-size: 13px;
  }

  .section7 {
    width: auto;
    height: 100%;
    overflow-x: hidden;
  }

  .section6 .detail {
    display: none;
  }

  .foot {
    width: auto;
    height: 60px;
    overflow-x: hidden;
  }

  .footer {
    width: auto;
    height: 50px;
    overflow-x: hidden;
    overflow-y: hidden;
    font-size: 11px;
  }










}