@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,900&display=swap');

@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

html{
	scroll-behavior: smooth;
}
body{
	margin:0;
	font-family: 'Poppins', sans-serif;
}

* {
 box-sizing: border-box;
 margin:0;
}

.container{
	max-width: 1140px;
    margin:auto;
}
.row{
	display: flex;
	flex-wrap: wrap;
}
.section-title{
	flex: 0 0 100%;
	max-width: 100%;
	margin-bottom:40px;
}

.section-title h1{
	display: inline-block;
	font-size:35px;
	text-transform: uppercase;
	font-weight:700;
	color:#000000;
	margin:0 0 10px;
	position: relative;
}
.section-title h1:before{
  content: '';
  left:0;
  position: absolute;
  height:2px;
  right:30%;
  background-color: #febd01;
  bottom:0px;
}

.text-center{
	text-align: center!important;
}
.text-left{
	text-align: left!important;
}
.text-right{
	text-align: right!important;
}
/*Header*/
#myVideo {
	position: absolute;
	width: 100%;
	height:100%;

	top: 52%;
	left: 50%;
	transform: translate(-50%, -50%);
}
header{

position: fixed;
	left:0px;
	right:0px;
	border-bottom: 1px solid #423940;
	padding:0px 15px;
	z-index:11;
	background: rgb(0,0,0);
	background: linear-gradient(90deg, rgba(0,0,0,1) 35%, rgba(167,167,167,0.7651435574229692) 63%, rgba(167,167,167,1) 83%, rgba(0,0,0,1) 100%);
}
header.fixed{
	background-color: #ffffff;
	position: fixed;
	border-color: #eeeeee;
	animation: fixHeader .5s ease;
	z-index: 11;
}

@keyframes fixHeader{
	0%{
		transform: translateY(-100%);
	}
	100%{
	transform: translateY(-%);
	}
}

@keyframes slideinLeft {
  0%   {opacity: 0.0; padding-left:0px;	margin-left: -500px;}
  100% {opacity: 1.0;padding-left:0px;	margin-left: 0px;}
}
@keyframes slideinRight {
  0%   {opacity: 0.0; padding-left:0px;	margin-left: 50px;}
  100% {opacity: 1.0;padding-left:0px;	margin-left: 0px;}
}
@keyframes slideinUp {
  0%   {opacity: 0.0; padding-top:0px;	margin-top: 0px;}
  100% {opacity: 1.0;padding-top:0px;	margin-top: 0px;}
}
@keyframes slideinDown {
  0%   {opacity: 0.0; padding-top: 0px;	margin-top: 0px;}
  100% {opacity: 1.0; padding-top:0px;	margin-top: 0px;}
}
@keyframes fadein {
  0%   {opacity: 0.0;}
  100% {opacity: 1.0;}
}

header .row{
	justify-content: space-between;
	align-items: center;
}
header .brand-name a{
   text-decoration: none;
   font-size: 22px;
   font-weight: 600;
   color:#ffffff;
   text-transform: uppercase;
   position: relative;
}
header.fixed .brand-name a{
	color:#000000;
}
header .navbar ul{

	list-style: none;
	padding:0;
	margin:0;
}
header .navbar ul li{
	display: inline-block;
	margin-left:35px;
}
header .navbar ul li a{
	font-size: 15px;
	text-decoration: none;
	line-height: 72px;
	color:#ffffff;
	display: block;
	font-weight: 600;
	position: relative;
}
header.fixed .navbar ul li a{
  color:#000000;
}

header .navbar ul li a::before{
   content: '';
   height: 3px;
   background-color: #ffffff;
   width:0%;
   position: absolute;
   right:0px;
   bottom:-1px;
   transition: all .5s ease;
}
header.fixed .navbar ul li a::before{
	background-color: #febd01;
}
header .navbar ul li a:hover::before{
	width:100%;
	left:0;
}
header .navbar ul li a.active::before{
	width:100%;
	left:0;
}

/*Home Section*/
.home{
	min-height: 100vh;
	padding:15px;
}

.home .full-screen{
	min-height: 100vh;
}

.home .home-content{

	flex:0 0 100%;
	max-width: 100%;
	display: flex;
	flex-wrap:wrap;
	align-items: center;
}

.home .home-content .block{
	position: absolute;
	background-color: rgba(0, 0, 0, 0.6);;
	flex:0 0 75%;
	max-width:75%;
	padding-left:35px;
	border-left:5px solid #474a46;
	margin-top:50px;
}

.home .home-content .block h6{
	color:#ffffff;
	font-size:18px;
	font-weight: 500;
	margin:0;
	padding:0;
	opacity: 0.0;
	animation-name: slideinLeft;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-fill-mode: forwards;
}
.home .home-content .block h1{
	color:#ffffff;
	font-size:70px;
	font-weight: 600;
	margin:0;
	padding:0;
	opacity: 0.0;
	animation-name: slideinRight;
	animation-duration: 1s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
}
.home .home-content .block h3{
    color:#ffffff;
	font-size:25px;
	font-weight: 500;
	margin:0;
	padding:0;
	opacity: 0.0;
	animation-name: slideinUp;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
}
.home .home-content .block .cv-btn{
	padding-top:20px;
}
.home .home-content .block .cv-btn a{
	position: absolute;
	border-radius:4px;
	color:#ffffff;
	border:1px solid #ffffff;
	padding:12px 25px;
	text-decoration: none;
	display: inline-block;
	font-size:14px;
	text-transform: uppercase;
	font-weight: 600;
	transition: all .5s ease;
	background-color: #585c61;
}
.home .home-content .block .cv-btn a:hover{
	background-color: #ffffff;
	color:#000000;
}

/*About Me*/

.about-me{
 padding:100px 0px;
 background-color: #f5f8fd;
}

.text-uppercase{
	text-transform: uppercase!important;
}
.about-me .section-title p.small{
	display: block;
	font-size: 14px;
	color:#838383;
	font-weight: 400;
	letter-spacing:2px;
}

.about-me .about-content .img{
	flex:0 0 33.33%;
	max-width: 33.33%;
}
.about-me .about-content .img img{
	width: 100%;
	display: block;
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
}

.about-me .about-content .text{
	flex:0 0 66.66%;
	max-width: 66.66%;
	padding-left:30px;
}

.about-me .about-content .text h4{
	font-size: 25px;
	font-weight: 600;
	margin:0 0 5px;
	color:#000000;
}
.about-me .about-content .text h6{
	font-size: 18px;
	font-weight: 500;
	margin:0 0 15px;
	color:#000000;
}
.about-me .about-content .text h6 span{
	color:#febd01;
}

.about-me .about-content .text p{
 font-size: 15px;
 font-weight: 400;
 line-height:24px;
 color:#838383;
 margin:0 0 20px;
}

.about-me .about-content .text .info{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

}
.about-me .about-content .text .info .list{
  flex:0 0 calc(30%);
  max-width: calc(90%);
  margin-top:10px;
  display: flex;
  flex-wrap: wrap;
  border-bottom:1px solid #dee2e6;
  padding-bottom:10px;
}
.about-me .about-content .text .info .list label{
	padding-right:10px;
	color:#000000;
	font-weight: 600;
	font-size:15px;
}
.about-me .about-content .text .info .list p{
	margin:0;
}

.about-me .about-content .text .social-links{
	padding-top:30px;
}
.about-me .about-content .text .social-links a{
	height:30px;
	width:30px;
	background-color: #000000;
	border-radius:3px;
	display: inline-block;
	border:1px solid #000000;
	line-height: 28px;
	text-align: center;
	margin:0 1px;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
.about-me .about-content .text .social-links a:hover{
	background-color: transparent;
}
.about-me .about-content .text .social-links a .fa{
 color: #ffffff;
 font-size:12px;
 -webkit-transition: all .5s ease;
 transition: all .5s ease;
}
.about-me .about-content .text .social-links a:hover .fa{
	color:#000000;
}


/*Services*/

.services{
  background-color: #f5f8fd;
  padding:100px 15px 70px;
}

.services .section-title h1:before{
	left:30%;
}

.services .service-content{
	flex:0 0 100%;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.services .service-content .box{
	background-color: #ffffff;
	padding:30px;
	flex: 0 0 calc(33.33% - 20px);
	max-width: calc(33.33% - 20px);
	margin-bottom:30px;
	border:1px solid #eeeeee;
	text-align: center;
	position: relative;
	border-radius:5px;
}
.services .service-content .box::before{
 content: '';
 height:2px;
 background-color: #febd01;
 position: absolute;
 bottom:0px;
 width:50px;
 left:0;
 right:0;
 margin: auto;
 transition: all .5s ease;
}
.services .service-content .box:hover::before{
	width: 100%;
}
.services .service-content .box .icon{
  height: 60px;
  width: 60px;
  background-color: #febd01;
  margin:15px auto 20px;
  border-radius: 50%;
 text-align: center;
}
.services .service-content .box .icon .fa{
	font-size:25px;
	color:#ffffff;
   line-height: 60px;
}
.services .service-content .box h5{
  font-size: 16px;
  font-weight: 600;
  color:#000000;
  margin:0;
}

.services .service-content .box p{
 font-size: 15px;
 font-weight: 400;
 line-height:24px;
 color:#838383;
 margin:10px 0 10px;
}


/*Skills*/

.skills{
 padding:100px 15px;
 background-color: #ffffff;
}
.skills .skills-content{
	flex: 0 0 50%;
	max-width: 50%;
	padding-right:40px;
}
.skills .img{
	flex: 0 0 50%;
	max-width: 50%;
}
.align-items-center{
	align-items: center;
}
.skills .img img{
  width: 100%;
  display: block;
}
.skills .skills-content .section-title p{
 font-size: 15px;
 font-weight: 400;
 line-height:24px;
 color:#838383;
 margin:15px 0 0;
}

.skills .skills-content .skill-box{
	flex:0 0 100%;
	max-width: 100%;
	margin-bottom:30px;
}

.skills .skills-content .skill-box h6{
	font-size: 16px;
	font-weight: 500;
	color:#000000;
	margin:0 0 8px;
}

.skills .skills-content .skill-box .skill-bar{
	height:5px;
	background-color: #eeeeee;
	position: relative;
}

.skills .skills-content .skill-box .skill-bar .skill-bar-in{
	background-color:#febd01;
	position: absolute;
	left:0;
	top:0;
	height: 100%;
}

.skills .skills-content .skill-box .skill-bar .skill-bar-in span{
	color:#838383;
	font-size: 16px;
	font-weight: 400;
	position: absolute;
	right:0;
	top:-30px;
}

/*lightbox*/
.lightbox{
	position: fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:100;
	background-color: rgba(0,0,0,0.6);
	justify-content: center;
	align-items: center;

}
.lightbox.show{
	display: flex;
}

.lightbox.hide{
	display: none;
}
.lightbox .close-lightbox{
	height:35px;
	width:35px;
	background-color: #ffffff;
	color:#febd01;
	text-align: center;
	line-height: 35px;
	position: absolute;
	right:10px;
	top:10px;
	cursor: pointer;
	border-radius:50%;
	z-index: 101;

}

.lightbox img{
	max-width:90%;
	max-height:80%;
	display: block;
}



/* message text*/
.message-text{
	background-color: #0c0c17;
	padding:40px 15px;
}
.message-text .text{
	flex:0 0 66.66%;
	max-width: 66.66%;
}
.message-text .text h2{
	font-size:25px;
	color:#ffffff;
	font-weight: 700;
	margin:0;
	padding:0;
	line-height:35px;
}
.message-text .button{
	flex:0 0 33.33%;
	max-width: 33.33%;
	text-align: right;
}
.message-text .button a{
    border-radius:4px;
	color:#ffffff;
	border:1px solid #ffffff;
	padding:12px 25px;
	text-decoration: none;
	display: inline-block;
	font-size:14px;
	text-transform: uppercase;
	font-weight: 600;
	transition: all .5s ease;
	background-color: transparent;
}
.message-text .button a:hover{
	background-color: #ffffff;
	color:#000000;
}



/*Testimonials*/

.testimonials{
	padding:100px 0px;
	background-color: #f5f8fd;
}
.testimonials .section-title h1:before{
	left:30%;
}
.testimonials .testimonials-content{
position: relative;
overflow:hidden;
flex: 0 0 100%;
max-width: 100%;
}

.testimonials .testimonials-content .testi-slider .slide{
	background-color: #ffffff;
	margin-bottom:15px;
	border:1px solid #eeeeee;
	padding:40px 20px;
	border-radius:4px;
	display: flex;
	flex-wrap: nowrap;
	float: left;
	width: 100%;
}
.testimonials .testimonials-content .testi-slider .slide .img{
	flex:0 0 128px;
	max-width:128px;
}
.testimonials .testimonials-content .testi-slider .slide p{
 font-size: 15px;
 font-weight: 400;
 line-height:24px;
 color:#838383;
 margin:0;
}
.testimonials .testimonials-content .testi-slider{
	float:left;
	transition: margin 1s ease;
}
.testimonials .testimonials-content .testi-slider .slide h6{
	font-size:16px;
	font-weight: 600;
	color:#000000;
	margin:10px 0 5px;
}

.testimonials .testimonials-content .slide-controls{
	float:left;
	width: 100%;
	text-align: center;
}
.testimonials .testimonials-content .slide-controls div{
	height: 15px;
	width: 15px;
	background-color: #ffffff;
	border-radius:50%;
	border:1px solid #febd01;
	display: inline-block;
	margin:10px 6px;
	cursor: pointer;
}

.testimonials .testimonials-content .slide-controls div.active{
  background-color: #febd01;
}



/*Projectens*/
.Projectens{
	padding:100px 15px;
	background-color: #ffffff;
}

.Projectens .section-title h1:before{
	left:30%;
}

.Projectens .Projectens-content{

	flex: 0 0 100%;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.Projectens .Projectens-content .box{
  flex:0 0 calc(33.33% - 25px);
  max-width: calc(33.33% - 25px);
}

.Projectens .Projectens-content .box .img{
	overflow: hidden;
}
.Projectens .Projectens-content .box .img img{
 width: 100%;
 display: block;
 transition: all .5s ease;
}
.Projectens .Projectens-content .box:hover .img img{
   transform: scale(1.1);
}
.Projectens .Projectens-content .box .info {
	padding:10px 0;
}
.Projectens .Projectens-content .box .info span{
	font-size: 12px;
	color:#838383;
	display: inline-block;
}
.Projectens .Projectens-content .box .info span:nth-child(2){
   border-left:1px solid #dddddd;
   padding-left:8px;
   margin-left:10px;
}
.Projectens .Projectens-content .box h3{
	font-size:22px;
	font-weight:600;
	color:#000000;
	margin:0 0 10px;
	padding:0;

}
.Projectens .Projectens-content .box p{
 font-size: 15px;
 font-weight: 400;
 line-height:24px;
 color:#838383;
 margin:0 0 10px;
}
.Projectens .Projectens-content .box a{
	font-size: 14px;
	color:#febd01;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	display: inline-block;
	border-bottom: 2px solid #febd01;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}

.Projectens .Projectens-content .box a:hover{
	color:#000000;
	border-color: #000000;
}



/*Contact Us*/

.contact-us{
	padding:100px 15px;
	background-color: #f5f8fd;
}
.contact-us .section-title h1:before{
	left:30%;
}

.contact-us .contact-form{
	background-color: #ffffff;
	flex: 0 0 100%;
	max-width: 100%;
	padding:50px;
	border:1px solid #eeeeee;
}

.contact-us .contact-form .text{
	flex: 0 0 100%;
	max-width: 100%;
	padding-bottom: 20px;
}

.contact-us .contact-form .text h2{
	font-size:26px;
	font-weight: 600;
	color:#000000;
	margin:0;
	padding:0;
}
.contact-us .contact-form .text p{
 font-size: 15px;
 font-weight: 400;
 line-height:24px;
 color:#838383;
 margin:0px;
}
.contact-us .contact-form .space-between{
	justify-content: space-between;
}
.contact-us .contact-form .col-6{

 flex: 0 0 calc(50% - 15px);
 max-width: calc(50% - 15px);
}
.contact-us .contact-form .col-12{
	flex: 0 0 100%;
   max-width: 100%;
}

.contact-us .contact-form .form-control{
	height: 45px;
	width: 100%;
	margin-bottom: 15px;
	border:1px solid #ced4da;
	padding:6px 12px;
	font-size: 14px;
	font-weight:400;
	font-family: 'Poppins', sans-serif;
}
.contact-us .contact-form textarea.form-control{
	height: 140px;
}

.contact-us .contact-form .form-control::placeholder{
	color:#838383;
}
.contact-us .contact-form .button{
	flex:0 0 100%;
	max-width: 100%;
}
.contact-us .contact-form .button a{
    border-radius:4px;
	color:#ffffff;
	padding:12px 25px;
	text-decoration: none;

	font-size:14px;
	text-transform: uppercase;
	font-weight: 600;
	transition: all .5s ease;
	background-color:#febd01;
	box-shadow:0px 10px 15px #e8e8e8;
}
.contact-us .contact-form .button a:hover{
	background-color: #000000;
	color:#ffffff;
}



/*Footer*/
footer{
	padding:70px 15px;
	background-color: #0c0c17;
}

footer .logo{
	flex:0 0 100%;
	max-width: 100%;
	text-align:center;
	font-size: 45px;
	color:#ffffff;
	font-weight: 900;
}

footer .social{
	flex:0 0 100%;
	max-width: 100%;
	text-align:center;
	padding-top:15px;
}

footer .social a{
	color:#999999;
	text-decoration: none;
	display: inline-block;
	margin:0px 12px;
	transition:all .5s ease;
	text-decoration: none;
}
footer .social a:hover{
	color:#ffffff;
}

/*copyright*/
.copyright{
   background-color: #0c0c17;
   border-top:1px solid #1d1d27;
   padding:15px;
}
.copyright p{
  color:#838383;
  margin:0;
  text-align: center;
  font-weight: 400;
  font-size:15px;
}

.ham-burger .fa{
  font-size:20px;
  height:30px;
  width:35px;
  background-color: #ffffff;
	color:#000000;
 border-radius:3px;
 line-height: 30px;
 text-align: center;
 cursor: pointer;
 display: none;
 border:1px solid #eeeeee;
}


@media(max-width: 991px){
   .home .home-content .block h1{
   	font-size: 50px;
   }
}

@media(max-width: 767px){
	.home .home-content .block h1{
   	font-size: 40px;
   }
   .home .home-content .block h3{
   	font-size:25px;
   }
	header{
		padding:15px;
		position: fixed;
		background-color: #ffffff;
		border: none;
		border-bottom:1px solid #eeeeee;
	}
 header .brand-name a{
 	color:#000000;
 }
     .ham-burger .fa{
     	display: inline-block;
     }
     .navbar{
     	position: absolute;
        background-color: #ffffff;
        width: 100%;
        right: 0px;
        top:60px;
        padding:15px;
        border-top:1px solid #eeeeee;
        display: none;
        border-bottom:1px solid #eeeeee;
     }
     .navbar.show{
     	display: block;
     }
     header .navbar ul li{
     	display: block;
     	margin-left:0;
     }
     header .navbar ul li a{
     	line-height:42px;
     	color:#000000;
     }
     header .navbar ul li a::before{
     	background-color:#febd01;
     }

     .about-me .about-content .text {
     flex: 0 0 100%;
    max-width: 100%;
    padding-left:0px;
    padding-top: 30px;
  }
  .about-me .about-content .img {
    flex: 0 0 100%;
    max-width: 100%;
}
.services .service-content .box {
    background-color: #ffffff;
    padding: 30px;
    flex: 0 0 100%;
    max-width: 100%;
    }
    .skills .skills-content {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right:0px;
}
.skills .img {
    flex: 0 0 100%;
    max-width: 100%;
}
.portfolio .portfolio-gallery .item {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    padding: 8px;
}
message-text .text {
    flex: 0 0 100%;
    max-width: 100%;
}
.message-text .button {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left;
    padding-top:20px;
}
.Projectens .Projectens-content .box {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom:40px;
}
.contact-us .contact-form{
	padding:40px 20px;
}
.contact-us .contact-form .col-6 {
    flex: 0 0 90%;
    max-width: 90%;
}
}

@media(max-width: 500px){
	.home .home-content .block h1{
   	font-size: 30px;
   }
   .home .home-content .block h3{
   	font-size:20px;
   }

  .home .home-content .block{
  	padding-left:20px;
  }
  .portfolio .portfolio-gallery .item {
    flex: 0 0 100%;
    max-width: 100%;
}
.about-me .about-content .text .info .list p {
    flex: 0 0 100%;
}
.testimonials .testimonials-content .testi-slider{
	text-align: center;
}
.testimonials .testimonials-content .testi-slider .slide .img {
    flex: 0 0 100%;
    max-width: 100%;

}
.testimonials .testimonials-content .testi-slider .slide{
	flex-wrap: wrap;
}
}