body{
    font-family: sans-serif;
    background-color:  rgba(20, 18, 18, 0.986);
    color: white;
}

ul{
    list-style-type: none;
    margin:0;
    padding:0;
    overflow: hidden;
    background-color: transparent;
}
li{
    float:left;
}

li a{
    display: block;
    color: white;
    text-align: center;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    cursor: pointer;
    background-color: rgb(238, 89, 34);
}

.header-section{
    height: 670px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)),url('../images/steve-harvey-U4wcrDteZ2Y-unsplash.jpg');
    background-repeat: no-repeat;
}


.header-info{
    text-align: left;
    margin: 100px 200px;
    width:40%;
   
  }

  .header-info h2{
    color: rgb(238, 89, 34);
    font-size: 2.0 rem;

  }

  
  .header-info h6{
    font-size: large;
    color:white;
  }

  .header-info h6 span{
    color: rgb(238, 89, 34);
  }

  .header-info p{
    color: white;
    font-size: large;
  }




.about-header {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    font-size: 2.0rem;
    text-align: center;
    color: rgb(238, 89, 34);
}
.about-section {
    text-align: center; 
    width:70%;
    margin-left:20%;
    margin-right:20%;

}

.about-box{
    display: flex;
}
.about-img{
    height:170px;
    width: 250px;
    float:left;
    border-radius: 70% ;
    border-right: 4px solid rgb(238, 89, 34);
    margin-right:5%

}

.about-content{
    text-align: left;
    color: white;
}

#project-section{
    text-align: center;
    margin-left:5%;
    margin-right:5%;
  }

  .project-heading h1{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    /* font-weight: bolder; */
    font-size: 2rem;
    text-align: center;
    color: rgb(238, 89, 34);
    
  }
  
  .project-img{
    /* width: 300px; */
    height: 300px;
  }
  
  
  
  .project-box{
    padding: 10px;
    margin: 10px;
   width:30%;
   justify-content: center;
   background-color: rgba(20, 18, 18, 0.986);
    display: flex;
    flex-direction: column;
    /* border: 2px solid black; */
  
  }
  
  .project-box button{
    font:inherit;
    font-weight: 600;
    padding: 0.6rem 2rem;
    background:rgb(238, 89, 34) ;
    color:  white;
    border:1px solid;
    transition: 100ms ease;
    position: static;
    width: 40%;
    margin: 2rem;
  
  }
  .project-box button:hover{
    background-color: black;
  }

  .project-box button a{
      color :white;
      text-decoration:none;
  }

  .project-box p a{
    color:rgb(238, 89, 34) ;
    text-decoration: none;
  }


section #contactForm .form-control {
    border: 0;
    background: none;
    border: 2px solid #FFFFFF;
    color: white;
    font-family: cursive;
}
#contact{
  margin: 20px 0;
}

#contact h2{
  color:rgb(238, 89, 34);
}

#contactForm button:hover{
  background-color: rgb(238, 89, 34);
}



  
  @media(min-width:768px){
    #services-list{
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    .project-list{
      display: flex;
      justify-content: space-around;
  
    }
    
  }
  
  @media(max-width:768px){
    .header-section{
      height:50%;
      width:auto;
      font-size:10px;
    }
    .header-info{
      width:30%;
    }
    .project-box{
      margin: 20%;
    }
    .services-box{
      margin:20%;
    }
    .project-box button{
      width:auto;
      margin: 20%;
    }
    .header-info button{
      width:100%;
      font-size: 7px;
    }
  }