*{
  box-sizing: border-box;
  scroll-behavior: smooth;
  }
*:focus{
  outline: 0px;
  }
body{
	margin: 0;
	padding: 0;
	color: #333;
	font-size: 14px;
	line-height: 25px;
  background-color: midnightblue;
  font-family: 'Montserrat', sans-serif;
}
.headerss{
  background-color: #000080;
  width: 100%;
  height: 80px;
  padding: 10px 100px;
  position: sticky;
  top: 0px;
  z-index: 9999;
  color: white;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  display: none;
}
.main-container{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.minimal{
  font-size: 12px;
  margin-top: -20px;
}
.sub-contact{
  width: 32%;
  padding: 20px;
  border-radius: 0px;
  text-align: center;
}
.sub-contact i{
  font-size: 25px;
  margin-bottom: 10px;
}
.navigation-menu{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 160px 15px;
  color: #fff;
  top: 0px;
  background-color: #000080;
  z-index: 99999999999;
  position: fixed;
  bottom: 0px;
  width: 130px;
}
#minimenu{
  display: none;
}
.logo i{
  font-size: 30px;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}
#hambuger-menu{
  border: 0px;
  background-color: transparent;
  font-size: 30px;
  color: #fff;
  cursor: pointer
}
.sub-menu{
  margin: 30px 0px;
  text-align: center;
}
.sub-menu i{
  font-size: 23px;
}
.sub-menu:hover{
  color: #eee;
  cursor: pointer;
}
.nav-text{
  font-size: 10px;
  margin-top: 0px;
}
.main-social{
  position: fixed;
  bottom: 50px;
  right: 20px;
}
.social{
  color: #fff;
  font-size: 20px;
  padding: 10px;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-align: center;
  line-height: 50px;
  transition: 0.5s;
}
.social:hover{
  color: #000080;
  background-color: rgba(255,255,255, 0.5);
  width: 80px;
  height: 80px;
}
.display-area{
  color: #eee;
  margin-left: 120px;
  width: 100%;
  padding: 50px 200px;
}
#main-header{
  height: 100%;
}
#main-header h1{
  font-size: 60px;
  line-height: 65px;
  margin-top: 15%;
  text-align: left;
}
.sub-heading{
  margin-top: -18px;
  font-size: 20px;
  text-align: left;
}
.image-div img{
  width: 170px;
  height: 170px;
  border-radius: 50%;
  margin-right: 50px;
  margin-top: 50px;
}
.about{
  width: 100%;
  border-radius: 10px;
  background-color: #000080;
  color: #eee;
  padding: 20px;
  display: flex;
  text-align: justify;
  margin-bottom: 100px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.quick-facts{
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.facts{
  background-color: inherit;
  border: 0px;
  border-left: 1px #eee solid;
  transition: 0.5s;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 0px;
}
.facts i{
  font-size: 20px;
  margin-right: 15px;
}
.facts:hover{
  background-color: midnightblue;
  border: 0px;
  border-bottom: 1px #eee solid;
}
.main-interest{
  width: 100%;
  border-radius: 10px;
  background-color: #000080;
  color: #eee;
  padding: 20px;
  display: flex;
  margin-bottom: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.interest{
  background-color: midnightblue;
  border-radius: 8px;
  width: 240px;
  height: 40px;
  line-height: 40px;
  margin: 10px 0px;
  padding: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
#center-contact{
  text-align: center;
  width: 100%;
}
.portfolio{
  width: 170px;
  height: 70px;
  margin: 20px 0px;
  padding: 0px;
  cursor: pointer;
  transition: 0.2s;
}
.portfolio img{
  width: 150px;
  height: 70px;
  border-radius: 5px;
}
.portfolio:hover{
  width: 180px;
  height: 75px;
}
#portfoliobg{
  background-color: #eee;
  border-radius: 5px;
}
.interest:hover{
  cursor: pointer;
  background-color: #000080;
}
.interest-icon{
  color: #eee;
  border-right: 1px #000080 solid;
  font-size: 20px;
  width: 20%;
  text-align: center;
  margin: 10px 5px;
  font-weight: lighter;
}
.service-div{
  background-color: #000080;
  border-radius: 10px;
  padding: 30px;
  width: 49%;
  margin: 20px 0px;
}
.btn-one{
  width: 200px;
  color: #eee;
  background-color: midnightblue;
  padding: 10px;
  cursor: pointer;
  border: 0px;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  transition: 0.01s;
  border-left: 1px #eee solid;
}
.btn-one:hover{
  border-radius: 0px;
  border: 0px;
  border-bottom: 1px #eee solid;
}
input{
  width: 48%;
  background-color: inherit;
  margin: 20px 0px;
  border: 0px;
  border-bottom: 2px midnightblue solid;
  height: 50px;
  color: #eee;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}
textarea{
  width: 100%;
  background-color: inherit;
  margin: 20px 0px;
  border: 0px;
  border-bottom: 2px midnightblue solid;
  height: 120px;
  color: #eee;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}
.work-proces{
  width: 33%;
}
#nprocess{
  font-size: 25px;
  padding: 50px 5px;
  line-height: 30px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  text-align: center;
  justify-content: center;
  align-items : center;
  border : 2px #eee solid;
  margin: 18% 30px;
}
.skill-set{
  height: 150px;
  width: 150px;
  border-radius: 50%;
  border: 12px #eee solid;
  margin: 10px;
  text-align: center;
  padding: 20px 5px;
  position: relative;
}
.skill-set:after{
  content: '';
  display: block;
  position: absolute;
  height: 134px;
  width: 134px;
  top: -8px;
  left: -8px;
  border:4px white solid;
  border-radius: 100%;
}
#pot-img{
  width: 400px;
}
#about, #resume, #portfolio, #blog, #contact{
  display: none;
}
@media screen and (min-width: 950px) and (max-width:1300px){
  #main-header{
    margin-top: 30%;
  }
  #nprocess{
    font-size: 25px;
    padding: 50px 5px;
    line-height: 30px;
    width: 250px;
    margin-top: 12%;
    height: 230px;
  }
  .display-area{
    padding: 50px 50px;
    margin-left: 120px;
    width: 100%;
  }
  .about{
    width: 100%;
  }
  .skill-set{
    margin: 10px 15px;
  }
  #pot-img{
    width: 100%;
   }
  .quick-facts{
    flex-wrap: wrap;
    justify-content: left;
    align-items: left;
  }
  .facts{
    margin-bottom: 20px;
  }
}
@media screen and (min-width: 700px) and (max-width:949px){
  .navigation-menu{
    display: none;
  }
  .headerss{
    display : flex;
  }
  #main-header{
    margin-top: 22%;
  }
  #main-header h1{
    font-size: 45px;
    margin-bottom: 35px;
  }
  .sub-heading{
    font-size: 18px;
  }
  #nprocess{
    display: none;
    width: 0px;
    height: 0px;
  }
  .display-area{
    padding: 30px 20px;
    margin-left: 0px;
    width: 100%;
  }
  .about{
    width: 100%;
  }
  .skill-set{
    margin: 10px 15px;
  }
  #pot-img{
    width: 110%;
  }
  .quick-facts{
    flex-wrap: wrap;
    justify-content: center;
    align-items: left;
  }
  .facts{
    margin-bottom: 20px;
  }
  .interest{
    width : 270px;
  }
  .work-proces{
    width: 48%;
  }
}
@media screen and (min-width: 500px) and (max-width:699px){
.headerss{
    width: 100%;
    height: 80px;
    padding: 10px 20px;
  }
.portfolio{
  margin: 20px 5px;
}
  .navigation-menu{
    display: none;
  }
  .headerss{
    display : flex;
  }
  #main-header{
    margin-top: 5%;
    padding: 10px;
  }
  #main-header h1{
    font-size: 28px;
    margin-bottom: 18px;
  }
  .sub-heading{
    font-size: 18px;
  }
  #nprocess{
    display: none;
    width: 0px;
    height: 0px;
  }
  .display-area{
    padding: 30px 20px;
    margin-left: 0px;
    width: 100%;
  }
  .about{
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .about-content h2, .about-content .minimal{
    text-align: center;
  }
  .image-div img{
    margin-top: -40%;
    margin-left: 17%;
    border: midnightblue 10px solid;
  }
  .main-interest{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .service-div{
    width: 100%;
  }
  .skill-set{
    margin: 10px 5px;
    height: 130px;
    width: 130px;
  }
  .skill-set:after{
    margin: 10px 5px;
    height: 115px;
    width: 113px;
    top: -18px;
    left: -13px;
  }
  #pot-img{
    width: 110%;
  }
  .skill-set h2{
    font-size: 18px;
  }
  .quick-facts{
    flex-wrap: wrap;
    justify-content: left;
    align-items: left;
    width: 100%;
  }
  #towrap{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .facts{
    margin-bottom: 20px;
  }
  .interest{
    width : 180px;
    margin: 10px;
  }
  .work-proces{
    width: 48%;
  }
  .work-proces{
    width: 100%;
  }
  input{
    width: 100%;
  }
  .sub-contact{
    width: 100%;
  }
}
@media screen and (min-width: 200px) and (max-width:499px){
.headerss{
    width: 100%;
    height: 80px;
    padding: 10px 20px;
  }
  .navigation-menu{
    display: none;
    padding: 130px 15px;
  }
  .headerss{
    display : flex;
  }
  #main-header{
    margin-top: 10%;
    padding: 10px;
  }
  #main-header h1{
    font-size: 28px;
    line-height: 34px;
    margin-bottom: 18px;
  }
  .sub-heading{
    font-size: 14px;
  }
  #nprocess{
    display: none;
    width: 0px;
    height: 0px;
  }
  .display-area{
    padding: 30px 20px;
    margin-left: 0px;
    width: 100%;
  }
  .about{
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .about-content h2, .about-content .minimal{
    text-align: center;
  }
  .image-div img{
    margin-top: -40%;
    margin-left: 17%;
    border: midnightblue 10px solid;
  }
  .main-interest{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .service-div{
    width: 100%;
  }
  .skill-set{
    margin: 10px 5px;
    height: 130px;
    width: 130px;
  }
  .skill-set:after{
    margin: 10px 5px;
    height: 115px;
    width: 113px;
    top: -18px;
    left: -13px;
  }
  #pot-img{
    width: 110%;
  }
  .skill-set h2{
    font-size: 18px;
  }
  .quick-facts{
    flex-wrap: wrap;
    justify-content: left;
    align-items: left;
    width: 100%;
  }
  #towrap{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .facts{
    margin-bottom: 20px;
  }
  .interest{
    width : 80%;
    margin: 10px;
  }
  .work-proces{
    width: 48%;
  }
  .work-proces{
    width: 100%;
  }
  input{
    width: 100%;
  }
  .sub-contact{
    width: 100%;
  }
.portfolio{
  width: 120px;
  height: 60px;
  margin: 20px 10px;
  padding: 0px;
  cursor: pointer;
  transition: 0.2s;
}
.portfolio img{
  width: 120px;
  height: 60px;
  border-radius: 5px;
}
.portfolio:hover{
  width: 125px;
  height: 65px;
}
}