@import url('https://fonts.googleapis.com/css2?family=MonteCarlo&family=Sacramento&display=swap');
*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: "Ubuntu",sans-serif;
    box-sizing: border-box;
  }
  
  html{
    scroll-behavior: smooth;
  }
  
  ::selection{
    background-color: #48dbfb60;
  }
  
  ::-webkit-scrollbar{
    width: 10px;
    background-color: #f1f1f1;
  }
  
  ::-webkit-scrollbar-thumb{
    background-color: #353b48;
  }
  
  .navbar{
    position: fixed;
    background-color: transparent;
    width: 100%;
    padding: 30px 0;
    top: 0;
    z-index: 999;
    transition: .3s linear;
  }
  
  .inner-width{
    max-width: 1300px;
    margin: auto;
    padding: 0 40px;
  }
  
  .navbar .inner-width{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .logo{
    width: 44px;
    height: 32px;
    background-image: url('./images/white-logo.png');
    background-size: contain;
  }
  
  .menu-toggler{
    background: none;
    width: 30px;
    border: none;
    cursor: pointer;
    position: relative;
    outline: none;
    z-index: 999;
    display: none;
  }
  
  .menu-toggler span{
    display: block;
    height: 3px;
    background-color: #fff;
    margin: 6px 0;
    position: relative;
    transition: .3s linear;
  }
  
  .navbar-menu a{
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    margin-left: 30px;
    transition: .2s linear;
  }
  
  .navbar-menu a:hover{
    color: #48dbfb !important;
  }
  
  .sticky{
    background-color: #fff;
    padding: 18px 0;
  }
  
  .sticky .logo{
    background-image: url('./images/black-logo.png');
  }
  
  .sticky .navbar-menu a{
    color: #111;
  }
  
  .sticky .menu-toggler span{
    background-color: #111;
  }
  
  #home{
    height: 100vh;
    min-height: 500px;
    background: url('./images/bg1.jpg') no-repeat center;
    background-size: cover;
    background-attachment: fixed;
  }
  
  #home .inner-width{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
  }
  
  #home .content{
    width: 100%;
    color: #fff;
  }
  
  #home .content h1{
    font-size: 60px;
    margin-bottom: 60px;
  }
  
  #home .content h1::after{
    content: "Ankush Rajput";
    color: lightgreen;
    animation: textanim 10s linear infinite;
    font-family: "MonteCarlo",sans-serif;
  }
  
  @keyframes textanim{
    25%{
      content: "A Developer";
      color:lightgreen;
    }
    50%{
      content: "A Programmer";
      color:lightgreen;
    }
    75%{
      content: "An Engineer";
      color:lightgreen;
    }
  }
  
  .sm a{
    color: #fff;
    font-size: 22px;
    margin: 0 10px;
    transition: .2s linear;
  }
  
  .sm a:hover{
    color: lightgreen;
  }
  
  #home .buttons{
    margin-top: 60px;
  }
  
  #home .buttons a{
    display: inline-block;
    margin: 15px 30px;
    color: lightgreen;
    font-size: 15px;
    font-weight: 500;
    width: 180px;
    border: 1px solid lightgreen;
    padding: 14px 0;
    border-radius: 6px;
    transition: .2s linear;
  }
  
  #home .buttons a:hover,
  #home .buttons a:nth-child(2)
  {
    background-color: lightgreen;
    color: #fff;
  }
  
  section{
    padding: 100px 0;
    background-color: #f1f1f1;
  }
  
  .section-title{
    text-align: center;
    margin-bottom: 80px;
    position: relative;
    font-size: 40px;
    padding-bottom: 20px;
    color: #111;
    font-family: "MonteCarlo",sans-serif;
  }
  
  .section-title::before{
    content: "";
    position: absolute;
    width: 80px;
    height: 3px;
    background-color: #111;
    bottom: 0;
    left: calc(50% - 40px);
  }
  
  .section-title::after{
    content: "";
    position: absolute;
    width: 16px;
    height: 10px;
    background-color: #48dbfb;
    border: 4px solid #f1f1f1;
    left: calc(50% - 12px);
    bottom: -7px;
  }
  
  .about-content{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  
  .about-pic{
    width: 200px;
    border-radius: 10%;
    margin-right: 100px;
  }
  
  .about-text{
    flex: 1;
  }
  
  .about-text h3{
    margin: 10px 0;
    color: #444;
    font-size: 16px;
  }
  
  .about-text h3 span:nth-child(1):after,
  .about-text h3 span:nth-child(2):after{
    content: "";
    width: 6px;
    height: 6px;
    background-color: #444;
    display: inline-block;
    border-radius: 50%;
    margin: 0 14px;
  }
  
  .about-text p{
    font-size: 17px;
    text-align: justify;
    line-height: 26px;
    margin-top: 20px;
  }
  
  .skills{
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .skill{
    width: calc(50% - 20px);
    margin: 15px 0;
  }
  
  .skill-info{
    display: flex;
    justify-content: space-between;
  }
  
  .skill-bar{
    height: 3px;
    background-color: #ddd;
    margin-top: 14px;
    position: relative;
  }
  
  .skill-bar::after{
    content: "";
    position: absolute;
    background-color: #48dbfb;
    height: 6px;
    bottom: 0;
  }
  
  .html:after{
    width: 90%;
  }
  
  .css:after{
    width: 80%;
  }

  .boot:after{
    width: 85%; 
  }
  
  .js:after{
    width: 70%;
  }

  .react:after{
    width: 65%;
  }

  .java:after{
    width: 90%;
  }
  
  .hibernate:after{
    width: 70%;
  }
  
  .spring:after{
    width: 80%;
  }
  
  .python:after{
    width: 65%;
  }

  .mysql:after{
    width: 75%;
  }
  
  section.dark{
    background-color: #353b48;
  }
  
  section.dark .section-title{
    color: #f1f1f1;
  }
  
  section.dark .section-title::before{
    background-color: #f1f1f1;
  }
  
  section.dark .section-title::after{
    border: 4px solid #353b48;
    background-color: lightgreen;
  }
  
  .services{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .service{
    width: calc(33% - 20px);
    text-align: center;
    border: 1px solid lightgreen;
    border-radius: 6px;
    margin: 20px 0;
    padding: 40px 20px;
    color: #fff;
    cursor: pointer;
    transition: .3s linear;
  }
  
  .service .icon{
    color: lightgreen;
    font-size: 40px;
    margin-bottom: 20px;
    transition: .3s linear;
  }
  
  .service h4{
    font-size: 16px;
    margin-bottom: 6px;
  }
  
  .service:hover{
    background-color: lightgreen;
  }
  
  .service:hover .icon{
    color: #fff;
  }
  
  .time-line,.works{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .block{
    width: calc(50% - 20px);
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 10px 0;
    padding: 30px;
    position: relative;
  }
  
  .block::before{
    content: "";
    position: absolute;
    width: 1px;
    height: 120%;
    background-color: #ddd;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .block::after{
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #48dbfb;
    left: -28px;
    top: 30px;
    border-radius: 50%;
  }
  
  .block h3{
    font-size: 16px;
    margin: 10px 0;
  }
  
  .block p{
    font-size: 15px;
    color: #444;
  }
  
  .work{
    width: calc(33% - 10px);
    overflow: hidden;
    border-radius: 6px;
    margin: 10px 0;
    cursor: pointer;
    position: relative;
  }
  
  .work img{
    width: 100%;
    height: 100%;
    transition: .4s linear;
  }
  
  .work::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: #48dbfbcc;
    transition: .2s linear;
    opacity: 0;
    transform: scale(0);
  }
  
  .work .info{
    position: absolute;
    z-index: 2;
    bottom: 40px;
    left: 40px;
    color: #fff;
    transition: .4s linear;
    opacity: 0;
  }
  
  .work:hover img{
    transform: scale(1.6) rotate(25deg);
  }
  
  .work:hover::before,
  .work:hover .info
  {
    opacity: 1;
    transform: scale(1);
  }
  
  .contact-info{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 60px;
  }
  
  .contact-info .item{
    width: calc(33% - 20px);
    height: 160px;
    background-color: #353b48;
    color: #fff;
    text-align: center;
    border-radius: 4px;
    cursor: pointer;
    transition: .3s linear;
  }
  .contact-info .item a{
    color: #fff;
  }
  .contact-info i{
    display: block;
    font-size: 40px;
    line-height: 120px;
    height: 100px;
  }
  
  .contact-info .item:hover{
    background-color: #48dbfb;
  }
  
  .contact-form{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  
  .contact-form input, .contact-form textarea{
    width: 100%;
    height: 50px;
    margin: 10px 0;
    background-color: #353b48;
    border: none;
    outline: none;
    padding: 20px;
    border-radius: 4px;
    color: #fff;
  }
  
  .nameZone, .emailZone{
    max-width: calc(50% - 10px);
  }
  
  .messageZone{
    min-height: 200px;
    resize: vertical;
  }
  
  .contact-form .btn{
    width: 180px;
    background-color: transparent;
    color: #48dbfb;
    font-size: 16px;
    border: 2px solid #48dbfb;
    padding: 0;
    margin-left: auto;
    cursor: pointer;
    transition: .3s linear;
  }
  
  .contact-form .btn:hover{
    background-color: #48dbfb;
    color: #fff;
  }
  
  footer{
    background: url('./images/bg1.jpg') no-repeat center;
    color: #fff;
    padding: 80px 0;
    text-align: center;
  }
  
  .copyright{
    margin-bottom: 20px;
    font-size: 17px;
  }

  .copyright .fa-heart-o{
    color: red;
  }
  
  .copyright a{
    font-size: 28px;
    color: #48dbfb;
    font-weight: 500;
    font-family: "MonteCarlo",sans-serif;
  }
  
  .goTop{
    position: fixed;
    z-index: 999;
    bottom: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    background-color: #48dbfb;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: #fff;
    outline: none;
    display: none;
  }
  
  @media screen and (max-width: 980px){
    .menu-toggler{
      display: block;
    }
  
    .navbar-menu{
      position: fixed;
      height: 100vh;
      width: 100%;
      background-color: #353b48;
      top: 0;
      right: -100%;
      max-width: 400px;
      padding: 80px 50px;
      transition: .3s linear;
    }
  
    .navbar-menu a{
      display: block;
      font-size: 30px;
      margin: 30px 0;
    }
  
    .sticky .navbar-menu{
      background-color: #f1f1f1;
    }
    
    .navbar-menu.active{
      right: 0;
    }
  
    .menu-toggler.active span:nth-child(1){
      transform: rotate(-45deg);
      top: 4px;
    }
  
    .menu-toggler.active span:nth-child(2){
      opacity: 0;
    }
  
    .menu-toggler.active span:nth-child(3){
      transform: rotate(45deg);
      bottom: 14px;
    }
  
    .inner-width{
      max-width: 800px;
    }
  
    .about-pic{
      margin: 0 auto 60px;
    }
  
    .about-text{
      flex: 100%;
      text-align: center;
    }
  
    .service{
      width: calc(50% - 20px);
    }
  
    .block{
      width: calc(100% - 20px);
      margin-left: auto;
    }
  
    .work{
      width: calc(50% - 10px);
    }
  
    .contact-info .item{
      width: 100%;
      margin: 10px 0;
    }
  }
  
  @media screen and (max-width: 600px){
    .inner-width{
      padding: 0 20px;
    }
  
    .skill{
      width: 100%;
    }
  
    .service{
      width: 100%;
    }
  
    .work{
      width: 100%;
    }
  
    .nameZone, .emailZone{
      max-width: 100%;
    }
  }