*{
	padding::0;
	margin: 0;
	box-sizing: border-box;
}
header{
      width: 100%;
      height: 100vh;
      background: url('img/b1.png'), url('img/bg1.jpeg');
      background-size: 50% 100%, cover; 
      background-position: right,center;
      background-repeat: no-repeat,no-repeat;
      clip-path: polygon(50% 0%, 100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
      background-attachment: fixed;
}
.logo{
	color:white;
	font-size: 50px;
	padding-left: 100px;
	letter-spacing: 5px;
}
.menu a{
	color: white;
	text-decoration: none;
	padding: 10px 20px;
	margin: 5px;
	font-size: 20px;
	font-weight: bold;
}
.menu{
	margin-right: 100px;
}
nav{
	width: 100%;
	height: 70px;
	justify-content: space-between;
	align-items: center;
}
.logo span{
	color: #e74c3c;
}
.menu a:hover{
	background: #e74c3c;
	transition: 0.4;
	text-decoration: none;
	color: white; 
}
.text{
	color: white;
	margin-left: 100px;
	margin-top: 100px;
	max-width: 450px;
}
.text h1{
	font-size: 50px;
	margin: 10px 0px;
}
.text p{
	font-size: 25px;
}
.c-btn{
	border: none;
	outline: none;
	color: white;
	background: #e74c3c;
	padding: 10px;
	margin-top: 20px;
}
#about{
	padding: 100px 50px;
}
.section-info{
	font-weight: bold;
	text-align: center;
}
.section-info h1{
	font-size: 50px;
}
.section-info p{
	font-size: 25px;
	color: #e74c3c;
}
.about-row{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.about-left-col{
	flex-basis: 50%;
}
.about-left-col img{
	width: 100%;
	padding: 50px;
}
.about-right-col{
	flex-basis: 50%;
}
#p-title{
	font-size: 20px;
	font-weight: bold;
	

}
.about-right-col p{
	font-size: 20px;
	text-align: justify;
	padding-right: 48px;
	
}
#skills{
	padding: 100px 50px;
	background: url('img/bg2.jpg');
	background-size: cover;
	color: white;
    background-attachment: fixed;
}
.skills-row{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background: rgb(45,52,54);
	padding: 50px;
}
.skills-left-col{
	flex-basis: 50%;
	text-align: justify;
}
..skills-left-col p{
	font-size: 20px;
}
.skills-right-col{
	flex-basis: 50%;
}
progress{
	width: 80%;
}
.progress-div{
	width: 70%;
	margin: auto;
}
.progress-div p{
	margin-bottom: 10px;
	font-size: 20px;
	padding-left: 80px;
	text-align: justify;
}
#service{
	padding: 100px 50px;
}
.service-row{
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}
.service-box{
	flex-basis: 25%;
	text-align: center;
	box-shadow: 2px 3px 5px grey;
	padding: 20px;
	margin-top: 20px;
}
.service-box:hover{
	background: #e74c3c;
	color: white;
	transition: 0.4;
}
.service-box img{
	width: 60%;
}
#contact{
	padding: 100px 50px;
	background:linear-gradient(160deg,#e74c3c 45%, white 0%);
}
.contact-row{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.contact-left-col{
	flex-basis: 50%;
}
.contact-right-col{
	flex-basis: 50%;
}
.contact-right-col form{
    text-align: center;

}
.contact-right-col form h2{
	margin-bottom: 20px;
}
.contact-right-col form input{
	width: 60%;
	padding: 10px;
    margin-bottom: 10px;
}
.contact-right-col form textarea{
	width: 60%;
	padding: 10px;
}
#Footer{
	background: #e74c3c;
	color: white;
	display: flex;
	padding: 20px;
	justify-content: space-around;
	align-items: center;
	font-size: 8px;
}
.btn:focus, .btn:active, button:focus, button:active {
  outline: none !important;
  box-shadow: none !important;
}

#image-gallery .modal-footer{
  display: block;
}

.thumb{
  margin-top: 15px;
  margin-bottom: 15px;
}
@media only screen and (max-width: 770px){
	header{
		background: url('../img/bg1.jpeg');
		background-size: cover;
	}
	.menu{display: none;
	}
	.logo{
		padding-left: 50px;
	}
	.text{
		margin-left: 50px;
	}
	.about-left-col{
	flex-basis: 100%;
	}
	.about-left-col img{
		width: 100%;
		padding: 50px;
	}
	.about-right-col{
		flex-basis: 100%;
	}
	.skills-left-col{
	flex-basis: 100%;
	
   }
   .skills-right-col{
	flex-basis: 100%;
	
   }
   .progress-div{
	width: 100%;
	margin: auto;
   }
   progress{
   	 width: 80%;
   }
   .progress-div p{
	margin-bottom: 10px;
	font-size: 20px;
	padding-left: 20px;
	text-align: justify;
   }
   .service-box{
   	 flex-basis: 100%;
   	 margin-top: 20px;
   }
   .service-box img{
	width: 60%;
  }
  .contact-left-col{
	flex-basis: 100%;
}
.contact-right-col{
	flex-basis: 100%;
}
.about-right-col p{
	font-size: 20px;
	text-align: justify;
	padding-right: 0px;
	
}
}