@media(max-width: 1024px){
  main{
    height: 600px;
  }
  
}
@media only screen and (max-width: 990px) {
  .first {
    height: 850px;
  }
  .first-right{
    margin-top: 60px;
  }
}

@media only screen and (max-width: 800px) {
    .first {
      height: 950px;
    }
    .description{
      margin-top: 180px;
    }
  }
  
@media only screen and (max-width: 767px) {
  .main {
    height: 850px;
  }
 .main .textside{
     padding: 0 60px;
  }
  .skills .skills-content .right .text{
    font-size: 25px;
  }
  
.skills .skills-content .right p{
  text-align: inherit;
}
}
  
@media only screen and (max-width: 697px) {
  .main {
    height: 980px;
    background-image: linear-gradient(to left, #ffffff 65%, #c2f6ef 35%);
  }
  .main .textside{
    padding: 0 60px;
  }
  .skills{
    height: 640px;
  }
  .skills-content{
    background-image: linear-gradient(to right, #ffffff 65%, #c2f6ef 35%);
    height: 500px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }
  .skills .skills-content .column{
    width: 80%;
  }
  .skills .skills-content .left {
     padding-left: 0; 
     padding-top: 60px;
 }
 .skills .skills-content .right{
    padding-right: 0;
    padding-top: 40px;
  } 
  .skills .skills-content .right .text{
    font-size: 23px;
  }
  .skills .skills-content .right p{
  text-align: inherit;
}
}
@media only screen and (max-width: 600px){
  
.main{
  background-image: linear-gradient(to left, #ffffff 65%, #c2f6ef 35%);
  height: 1020px;
}
.main .textside{
  padding-bottom: 20px;
}
.skills-content{
  height: 560px;
  background-image: linear-gradient(to right, #ffffff 65%, #c2f6ef 35%);
}
}

@media only screen and (max-width: 460px){  
  .main{
    height: 1130px;
    background-image: linear-gradient(to left, #ffffff 65%, #c2f6ef 35%);
      }
    .main .textside{
          padding-left: 20px;
      }
      .img{
        height:390px; 
        width:390px;
      }
   .img:hover{
       height: 395px;
       width: 395px;
   }
      .textside p{
          text-align: left;
          font-size: 18px;
      }
      .description{
        margin-top: 100px;
      }
      .aboutInfo{
        width: 93% !important;
      }
      .aboutInfo span{
        padding: 10px 0 10px 5px;
        font-size: 16px;
        letter-spacing: 0.5px;
      }
      .aboutInfo .btnstyle{
        margin: 0 8px;
        padding: 3px 12px;
      }
      .aboutInfo .details span{
        font-size: 15px;
    }
      .skills{
          height: 740px;
      }
      .skills-content{
        flex-direction: column;
        height: 620px;
      }
      .skills .skills-content .right .text{
        font-size: 28px;
    }
    .skills .skills-content .right p{
      font-size: 18px;
  }
      
  }
  @media only screen and (max-width:400px){
      .main{
          height: 1180px;
      }
      .textside p{
        text-align: left;
      }

      .img{
        height:360px; 
        width:360px;
      }
   .img:hover{
       height: 365px;
       width: 365px;
   }
      .description{
        margin-top: 90px;
      }
      .aboutInfo span{
        padding: 10px 0 10px 3px;
        font-size: 15px;
      }
      .aboutInfo .btnstyle{
        margin: 0 5px;
        padding: 3px 11px;
      }
      .aboutInfo .details span{
        font-size: 14.5px;
    }
      .skills .skills-content .left{
        padding-top: 60px;
      }
      .skills{
        height: 760px;
      }
      .skills .skills-content{
        height: 640px;
      }
  }
  @media only screen and (max-width:360px){
    .main{
        height: 1200px;
    }
    .textside p{
      text-align: left;
    }
    .aboutInfo span{
      padding: 10px 0 10px 0;
      font-size: 15px;
    }
    .aboutInfo .btnstyle{
      margin: 0 3px;
      padding: 3px 10px;
    }
    .skills .skills-content .left{
      padding-top: 100px;
    }
    .skills{
      height: 860px;
    }
    .skills .skills-content{
      height: 670px;
    }
}
@media only screen and(max-width:340px){
  .main{
    height: 1310px;
  }
  .skills{
    height: 870px;
  }
  .skills .skills-content{
    height: 700px;
  }
}
@media only screen and (max-width:1200px){
  .even{
    margin-left:18%;
  }
  .odd{
    margin-left:55%
  }
}
@media only screen and (max-width:930px){
  .timelineIcon{
    left: 46.5%;
  }
  .even{
    margin-left:12%;
  }
  .odd{
    margin-left:56%;
  }
}
@media only screen and (max-width:770px){
  .timelineIcon{
    left: 45.69%;
  }
  .even{
    margin-left:4%;
  }
  .odd{
    margin-left:56%;
  }
}
@media only screen and (max-width:660px){
  .timelineIcon{
    left: 45%;
  }
  .education-info{
    max-width: 230px;
  }
 .even{
   margin-left: 8%;
 }
 .odd{
  margin-left:58%;
}
}
@media only screen and (max-width:450px){
  .timelineIcon{
    left: 43%;
  }
  .education-info{
    max-width: 165px;
  }
  .timeline-content:before{
    top: 18%;
  }
 .even{
   margin-left: 4%;
 }
 .odd{
   margin-left: 60%;
 }

}
@media only screen and (max-width:420px){
  .timelineIcon{
    left: 42%;
  }
  .education-info{
    max-width: 155px;
  }
 .even{
   margin-left: 1%;
 }
 .odd{
   margin-left: 61%;
 }

}
@media only screen and (max-width:390px){
  .timelineIcon{
    left: 8.55%;
  }
  .timeline-content{
    padding: 5px 0;
  }
  .timeline-content:before{
    left: 17%;
  }
  .education-info{
    max-width: 220px;
  }
 .even{
   margin-left: 30%;
   border-radius: 0px 20px 20px 20px;
 }
 .odd{
   margin-left: 30%;
 }

}