/** NavBar Styles y**/

li{
  text-decoration: none;
  display: inline;
  font-family: 'Josefin Sans';
  padding: 8px; 
}

ul li a{
  color: #fff;
  text-decoration: none;
}

ul li a:hover{
  text-decoration: none;
  color: #88DE13;
}

h2{
  margin: 20px 0 0 0;
  font-family: 'Josefin Sans';
  color: #fff;
}

header{
  background-color: #000;
  width: 100%;
}

header #logo{
  text-decoration: none;
}

header h1{
  font-family: 'Josefin Sans';
  color: #fff;
  padding-top: 10px;
  position: absolute;
  padding-left: 8px;
}

.container, .row{
  padding: 0;
}

.navbar{
  padding: 8px;
}

.navbar-toggler{
  border-color: #fff;
}

.navbar-toggler-icon{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

button{
  margin-top: 5px;
  margin-right: 8px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1;
}

/** Banner Styles **/

.banner{
  background: url(../img/banner.jpg) no-repeat scroll center center;
  background-size: cover;
  z-index: 1;
  font-family: 'Josefin Sans';
  color: #fff;
}

.banner p{
  font-size: 18px;
}

.banner .butt{
  padding: 5px 42px;
  background-size: 200% auto;
  border-color: #fff;
  color: #fff;
  display: inline-block;
  border-radius: 5px;
  font-size: 15px;
  font-family: 'Josefin Sans';
  margin: 0 auto;
}

.banner .banner-text{
  font-family: 'Josefin Sans';
}

.banner .butt:hover{
  color: #88DE13;
  border-color: #88DE13;
}

.banner .banner-content{
  padding-top: 10px;
}

/** About Me Styles **/

.progress-bar{
  display: inline;
  margin: 3px;
}

.about-me p{
 font-family: 'PT Sans';
}

.about-me h3{
  font-family: 'Josefin Sans';
}

.about-me h6{
  font-family: 'PT Sans';
}

/** Skills Styles **/

.skills{
  background-color: #F3F3F3;
}

.skills .skills-item{
  border-radius: 10px;
  background-color: #fff;
  padding: 35px 35px;
  margin-bottom: 30px;
}

.skills .skills-item:hover{
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
}

.skills h3,h5{
  font-family: 'Josefin Sans';
}

.skills p{
  font-family: 'PT Sans';
  color: #848484;
}

/** Like Section **/

.like-section{
  background-color: #120B46;
}

.like-section h3{
  font-family: 'Josefin Sans';
  color: #fff;
}

.like-section p{
  font-family: 'PT Sans';
  color: #fff;
  padding-top: 5px;
}

.like-section span{
  padding: 0 5px 0 5px;
}

.like-section btn{ 
  font-family: 'PT Sans';
}

.like-section i{
  color: #fff;
  padding-top: 0;
}

.like-section #count{
  color: #fff;
}

/** Projects Section **/

.projects h3,h4{
  font-family: 'Josefin Sans';
}

.projects small,p{
  font-family: 'PT Sans';
}

.projects p{
  color: #848484;
}

.projects .card-body{
  padding-bottom: 2px;
}


/** Experience Styles **/

.experience{
  background-color: #F3F3F3;
}

.experience .experience-item{
  border-radius: 10px;
  background-color: #fff;
  padding: 35px 35px;
  margin-bottom: 30px;
}

.experience .experience-item:hover{
  box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.08);
}

.experience h4{
  font-family: 'Josefin Sans';
}

.experience p, small{
  font-family: 'PT Sans';
}

.experience small{
    color: #848484;
}

.experience .experience-icon{
  color: #848484;
}

.experience .experience-link{
  font-family: 'PT Sans';
}

.experience a{
  text-decoration: none;
}

/** CV Section **/

.cv-section{
  background-color: #180E61;
}

.cv-section h3{
  font-family: 'Josefin Sans';
  color: #fff;
}

.cv-section a{
  padding: 5px 42px;
  background-size: 200% auto;
  border-color: #fff;
  color: #fff;
  display: inline-block;
  border-radius: 5px;
  font-size: 15px;
  font-family: 'Josefin Sans';
  margin: 0 auto;
}

.cv-section a:hover{
  color: #88DE13;
  border-color: #88DE13;
}

/** Contact Styles **/

.contact .info-item{
  position: relative;
}

.contact i{
  position: absolute;
}

.contact .info-text{
  padding-left: 45px;
}

.contact form{
  font-family: 'PT Sans';
}



/** Footer Styles **/

footer{
  background-color: #000;
  color: #fff;
  padding: 10px;
  font-family: 'Josefin Sans';
}

footer ul li{
  display: inline-block;
}

footer ul{
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.titles h3{
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  padding-top: 5px;
}

.footer p{
  font-family: 'PT Sans';
  color: #B6B6B6;
}