@media screen and (max-width: 991px){
   
    /* NAVBAR */
    .navbar-toggler{
       
        background-color: #761961;
    }
    .banner form{
        margin: 0;
    }

    /* BANNER */
   .details{
    margin: auto;
   }
   .banner-content ul li{
    
    float: left;
    
   }
   .banner-content ul{
   display: flex;
   align-items: center;
   justify-content: center;
   }
   .banner .banner-content h1{
    font-size: 60px;
   }
   .banner .banner-content p{
    font-size: 20px;
   }
   .banner-content .person-details .d2{
    margin-top: 3rem;
   }


   /* ABOUT */
.about{
    text-align: center;
    padding: 20px 0;
    }
   .about .about-img{
  margin: 0 auto;
  width: 100%;
  height: auto;
   }
   .about .arrow{
    display: none;
    }
   .about p{
    margin-right: 0;
    }
    .about h2{
        font-size: 38px;
        margin: 0 auto;
    }
    .about .underline{
        margin-top: -23px;
        margin-left: auto;
        margin-right: auto;
        width: 220px;
        display: block;
        position: static;
    }
   .about .about-head img{
    margin-left: 281px;
    width: 55px;
    height: 55px;
   }
   .about .sub-head img{
    margin-left: -47px;
    margin-top: -16px;
   }
   .about .sub-head{
    margin-top: 57px;
   }
 





 /* SKILLS */


 .skills{
    padding: 50px 0;
 }

 .skills .underline{
    width: 332px;
    
 }
 .skills .skills-content .skill-bar{
    width: 100%;
    
 }
 .skills h2{
    font-size: 38px;
 }
 .skills .skill-center{
   margin: 0 auto;
 }
 .skills .skills-content .skills-img{
   width: 100%;
   height: auto;
  
}




/* EDUCATION */
.education h2{
    font-size: 38px;
}
.education .underline{
    width: 295px;
   
}
.education .edu-content .edu-img{
    width: 100%;
}
/* PORTFOLIO */ 

.portfolio .underline{
    width: 369px;
}
.portfolio h2{
    font-size: 38px;
}
/* CONTACT */
.portfolio h2{
    font-size: 38px;
}

.contact .line-color:nth-child(2) .underline{
    width: 145px;
}
.contact .sub-head{
    text-align: center;
    margin-top: 55px;
}
.contact .sub-head img{
    margin-top: -17px;
    margin-left: -42px;
}
.contact .mail,.contact .call,.contact p,.contact h2{
    text-align: center;
}
.contact .underline{
    margin-left: auto;
    margin-right: auto;
}





/* skills animation */
 
.skills .skills-content .skill-bar{
    animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

.skills .skills-content .skill-per{
    animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

.skills .skills-content .skill-per::after{
    position: absolute;
   


    color: #761961;
    font-size: 18px;
    top: -28px;
    right: -20px;
    
    opacity: 0;
}


.skills .skills-content .skill-per::after{
    animation: showText 0.5s 1.5s linear forwards ;
}

.skills .skills-content .skill-per::before{
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 0 0 20px #fff;
     background: #761961;
    
    top: -5px;
    right: 0;
    animation: showText 0.5s 1.5s linear forwards;
    opacity: 0;

} 

/* portfolio */

.owl-nav .owl-next{
    display: none;
}
}








@media screen and (min-width: 600px) and (max-width: 991px){
    .banner-content .person-details .d1{
      margin-right: 10px;
    }
    .banner-content .person-details .d2{
        margin-left: 10px;
    }
    
}
@media screen and (min-width: 445px) and (max-width: 768px){
    .banner-content .person-details .details{
        margin-top: 0;
    }
}


@media screen and (min-width: 992px) and (max-width: 1209px){
    .education .edu-img{
        height: 374px;
        width: auto;
    }
    .portfolio .portfolio-content .work-img{
        padding: 0;
    }
    .skills .skills-content .skills-img img{
        width: 390px;
        height: auto;
    }
    .skills .skills-content .skills-img{
       height: 334px;
       width: auto;
    }



   
}

@media screen and (max-width: 662px){
    .portfolio .underline{
        width: 352px;
    }
    .portfolio h2{
        font-size: 35px;
    }
}


   @media screen and (min-width: 992px){
 

   }