/*this is the body*/


body{
    background-color: black;
    color: orange;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}


.logo{
	background-color: white;
  width: 100%  ;

   
	
}

/*this is for the navigation bar for every page*/
nav {

  position: sticky;
  top: 0;
	background-color: white;
	font-size: 25px;
	text-align: center;
	padding: 1%;
   vertical-align: middle;
   border-bottom: 4px solid orange ;
}

nav a {
	text-decoration: none;
	color: black;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	padding: 1%;
}
/*this is the hover the the page linkis on the nav bar and other links*/
a:hover {
	color: orange;
}

/*this is the code parralax scroll on the home page*/
.parallax {

  background-image: url("web_dev_giff.gif");

  
  min-height: 300px;  
  width: 100%;

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/*this is what the company is about on the home page*/
.about{
	display: flex;
    flex-direction: column;
    align-items: center;
	
    
    background-color: white;  
	border: 5px solid orange;
    padding: 20px;            
    width: 85%;            
    margin: 20px auto;

	color: black;
	font-size: 27px;
	
}
/*this is for the examples showing on the home page*/
.examples{
	  display: flex;
    flex-direction: column;
    align-items: center;



    background-color: white;  
	border: 5px solid orange;
    padding: 20px;            
    width: 85%;            
    margin: 20px auto;

	color: black;
	font-size: 27px;	
}

/*this is for the  boxes for the employee of the month page */
.team {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
	
    
   background-image: url(STRIPE.png);
	border: 5px solid orange;
    padding: 20px;            
    width: 30%;            
    margin: 20px;
 height: 700px; 
	color: black;
	font-size: 20px;
	       
}

/*this is for the boxes on the teams page of our employees */
.muhammad {
  display: inline-flex;
  flex-direction: column;
  align-items: center;

  
  background-color: white;  
border: 5px solid orange;
  padding: 20px;            
  width: 30%;            
  margin: 20px;
  height: 700px;

color: black;
font-size: 20px;
       
}

.muhammad img {
  width: 85%;
  height: 510px;
border-radius: 20px;
}	

/*this is for the scroll bar to style it out */
::-webkit-scrollbar{
	width: 10px;
}

::-webkit-scrollbar-thumb{
	background: orange;
}

/*this is for the forms on our job aplication form */
form {
  max-width: 900px;
  margin: 10px ;
  padding: 20px;
  border: 1px solid orange;
  border-radius: 25px;
  border-width: 4px;
  font-family: sans-serif;
  background-color: rgb(42, 42, 42);
  
}

label {
  display: block;
  width: 100%;
  margin-bottom: 15px;
 color: black;
}

 button {
  display: block;
  width: 20%;
  margin-bottom: 15px;
 color: white;
}

input {
  display: block;
  width: 95%;
  margin-bottom: 15px;
 color: black;
}


input {
  padding: 8px;
  border: 1px solid #ddd;
  background-color: white;
}

button {
  padding: 10px;
  background-color: orange;
  color: white;
  border: none;
  cursor: pointer;
}
h2 {
	color: white;
}


/*all this below is for the links on our courses page */


.skills{
  background-color: white;
  color: black;
  font-size: 80%;
   border-top: 2px solid orange;
  border-bottom: 5px solid orange;
}

.w3school{
	background-color: white;
	margin-top: 20px;
	text-align: center;
	
	color: black;
	font-size: 25px;
  border-top: 4px solid orange;
  border-bottom: 4px solid orange;
  margin-bottom: 20px;


  }
 
  
   .w3school a {
    text-decoration: none;
    color: black;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    padding: 1%;
  }
  
  a:hover {
    color: orange;
  }

  

#course_background{
  background-color:rgb(42, 42, 42);
}



.courses{
  width: 100%;
  
}


.courses img{
  width: 30%;
 
  
}

footer{
  background-color: white;
  color: black;
  font-size: 25px;
}