:root{
	--main-color:#FFDC60;
	--light-black:#6c6c6b;
	--light-color:#fff8dd;
	--light-bg:#f3f3f3;
	--white:#fff;
	--black:#292930;
	--box-shadow: 0 .5rem 1rem rgba(0,0,0,.5);
}

*{
	margin:0;
	padding:0;
	font-family: "Montserrat", sans-serif;
	font-weight: normal;
	text-transform: capitalize;
	text-decoration: none;
	box-sizing: border-box;
	outline: none;
	border: none;
	transition: all .3s cubic-bezier(.3s,1.1s,.7,1.12);
}


*::selection{
	background: var(--main-color);
	color:#fff;
}




*::-webkit-scrollbar{

	width:1rem;
}


*::-webkit-scrollbar-track{
	background: transparent;
}


*::-webkit-scrollbar-thumb{
	background:var(--black);
}


section{
	padding: 1.5rem 1rem;
	max-width: 1200px;
	margin: 0 auto;
}

.btn{
	display:inline-block;
	padding:.5rem 1.5rem;
	margin-top: 1rem;
	font-size: 1rem;
	background:var(--main-color);
	color:var(--black);
	border-radius: 5rem;
	cursor: pointer;
	overflow: hidden;
	transition: .2s linear;
	position: relative;
	z-index:0;
}

.btn:hover{
	background-color: var(--black) !important;
	color:var(--white) !important;
}


.heading{
	text-align: center;
	margin-bottom:1.5rem;
}


.heading span{
	padding:.5rem 1rem;
	background: var(--light-color);
	color:var(--black);
	border-radius: 5rem;
	font-size: 1.2rem;
}

.heading h3{
	font-size: 2rem;
	margin-top: 1rem;
	color:var(--black);
}
header{	
	width:100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--white);
	box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
	position:fixed;
	border-radius: .5rem;
	top:0;
	left:0;
	z-index:1000;


}

.logo {
	
}

.logo span{
	font-weight: bold;
	color:var(--main-color);
}

.menu ul li a{
	font-size: 1.2rem;
	margin-left: 1rem;
	font-weight: 500;
	color: #666;

	
}


.menu ul li a:hover{
	
	color:var(--main-color);
	
}

.menu ul li:first-child a{
	color:#666 !important;
}

.menu ul li:first-child a:hover
{
	color:var(--main-color) !important;
}


.navbar-toggler{
	background-color:var(--main-color) !important;
}

/*--home--*/

.home{
	position:relative;
}

.home .bottom-image{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	
	
}

.home .bottom-image img{
	width:100%;
}

.home .flex{
display: flex;
align-items: center;
flex-wrap: wrap;
gap:2rem;
padding-top: 6rem;

}

.home .flex .image{
	flex:1 1 30rem;
}

.home .flex .image img{
	width:100%;
}
.home .flex .content{
	flex:1 1 30rem;
}

.home .flex .content span{
	font-size: 1rem;
	color:var(--black);
	background:var(--light-color);
	border-radius: 5rem;
	padding: .5rem 1.5rem;
}

.home .flex .content h1{
	font-size: 4rem;
	margin:.5rem 0;
	color:var(--black);
}

.home .flex .content em{
	font-weight: bold;
	color: var(--main-color);
	text-shadow: var(--box-shadow) ;
}

.home .flex .content h3{
	color:var(--black);
	font-size: 1.5rem;
}
/*--home--*/


/*--skills--*/
.skill-container{
	background: var(--black);
}

.skill-container .heading{
	padding-top:2rem;
}


.skill-container .heading span{
	background: var(--white);
}

.skill-container .heading h3{
	color: var(--white);
}


.skill-container .box-container{
	display:grid;
	grid-template-columns: repeat(auto-fit, 20rem);
	gap:1.5rem;
	align-items: center;
	justify-content: center;
}

.skill-container .box-container .box{
	text-align: center;
	padding: 1rem;
	position: relative;
	z-index: 0;
}


.skill-container .box-container .box::before{
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	background: var(--white);
	height:13rem;
	z-index:-1;
	clip-path: polygon(50% 0%, 100% 38%, 100% 100%, 0 100%, 0% 38%);
}


.skill-container .box-container .box img{
	height:4rem;
	margin-bottom: 2rem;
	transition:.2s linear;
}


.skill-container .box-container .box:hover img{
	transform: translateY(-1rem);
}


.skill-container .box-container .box h3{
	font-size: 1.5rem;
	color: var(--black);
	padding:.5rem 0;
}


.skill-container .box-container .box p{
	font-size: 1rem;
	color:var(--light-black);
	line-height: 1.6;
}
/*--skills--*/


/*--about--*/

.about .row{
display:flex;	
flex-wrap: wrap;
gap:2rem;
align-items: center;
}

.about .row .image{
	flex: 1 1 30rem;
}

.about .row .image img{
	width:100%;
}

.about .row .content{
	flex: 1 1 30rem;
}

.about .row .content .heading{
	margin-bottom: 1rem;
}

.about .row .content .description{
	
	color:var(--light-black);
	font-size: 1rem;
	line-height: 1.6;
	padding-bottom: .5rem;
}


.about .row .content .description span{
	color:var(--main-color);
	font-weight: bold;
}

.about .row .content .info{
	margin: .5rem 0;
}

.about .row .content .info h3{
	font-size: 1.5rem;
	color:var(--black);
	background: var(--main-color);
	padding:.5rem 1rem;
	display: inline-block;
}

.about .row .content .info .flex{
	background-color: var(--light-color);
	display:flex;
	flex-wrap: wrap;
	gap:1.5rem;
	padding:1rem;
}


.about .row .content .info .flex p{
	color:var(--black);
	font-size: 1rem;
	flex: 1 1 10rem;
}

.about .row .content .info .flex p span{
	color: var(--light-black);
	font-weight: bold;
}
/*--about--*/


/*--services--*/

.services{
	position:relative;
	background-color: var(--black);
}

.services .heading{
	padding-top:2rem;
}


.services .heading span{
	background: var(--white);
}

.services .heading h3{
	color: var(--white);
}

.services .box-container{
display:grid;
	grid-template-columns: repeat(auto-fit, 20rem);
	gap:1rem;
	align-items: flex-start;
	justify-content: center;
}

.services .box-container .heading{
	padding-top: 2rem;
}

.services .box-container .heading span{
	color:var(--white);
}

.services .box-container .heading h3{
	color:var(--white);
}
.services .box-container .box{
 padding:2rem;
 margin-bottom: 1rem;
 border:.2rem solid rgba(255, 255, 255, .2);
 border-top-right-radius: 5rem;
}

.services .box-container .box .icon{
	display: inline-block;
	position:relative;
	margin-bottom: 1rem;
	height:3rem;
	width:3rem;
	border-radius: 50%;
	background-color: var(--main-color);
	
}



.services .box-container .box .icon i{
position:absolute;
top:50%;
left:50%;
font-size: 1.5rem;
transform:translate(-50%, -50%);
color:var(--black);
}

.services .box-container .box:hover{
	transform: translateY(-1rem);
	transition: .2s linear;
}

.services .box-container .box h3{
	font-size: 1.7rem;
	margin:.5rem 0;
	color:var(--white);
}

.services .box-container .box p{
	font-size: .9rem;
	line-height: 1.6;
	color:var(--light-color);
}
/*--services--*/


/*--projects--*/

.projects .heading{
	margin-bottom:2rem;
}
.projects .box-container{
    display:grid;
	grid-template-columns: repeat(auto-fit, 20rem);
	gap:1rem;
	align-items: flex-start;
	justify-content: center;
}


.projects .box-container .box{
	overflow: hidden;
	position: relative;
	height: 20rem;
	border-radius: .5rem;
	background: var(--light-bg);
}

.projects .box-container .box img{
	height: 100%;
	width:100%;
	object-fit: cover;
	transition: .2s linear;
	border-radius: .5rem;
}

.projects .box-container .box:hover img{
	transform:  scale(.5) translateY(-3rem);
}


.projects .box-container .box h3{
	font-size: 1rem;
	position:absolute;
	color:var(--black);
	font-weight: bold;
	top:-4rem;
	left:50%;
	transform: translateX(-50%);
	text-transform: uppercase;
	transition: .2s linear;
}


.projects .box-container .box:hover h3{
	top:2rem;
}


.projects .box-container .box .btn{
	position:absolute;
	bottom:-6rem ;
	left:50%;
	transform: translateX(-50%);
	margin-top: auto;
}

.projects .box-container .box:hover .btn{
	bottom:2rem;

}


.projects .detail {
	text-align: center;
	justify-content: center;
	align-items: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
}


.projects p{
	font-size: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
/*--projects--*/



/*--reviews--*/
.reviews{
	background: url(../images/bg.png) no-repeat;

		background-attachment: fixed;
}


.reviews .box-container .box{
	display:none;
	text-align: center;
	margin:2rem auto;
	max-width: 30rem;
	
}

.reviews .box-container .box.active{
	display: block;
}

.reviews .box-container .box img{
	height: 5rem;
	width: 5rem;
	object-fit: cover;
	border-radius: 50%;
	border:.3rem solid var(--main-color) ;
	margin-bottom: .5rem;
	animation:fadeUp .2s linear backwards;
}

.reviews .box-container .box h3{
color:var(--black);
font-size: 1.5rem;
animation:fadeUp .2s linear .4s backwards;
}

.reviews .box-container .box span{
color:var(--black);
font-size: .9rem;
display: inline-block;
animation:fadeUp .2s linear .6s backwards;

}


.reviews .box-container .box p{
color:var(--light-black);
font-size: 1rem;
line-height: 1.6;
animation:fadeUp .2s linear 1s backwards;

}

@keyframes fadeUp {
	from{
		transform:translateY(2rem);
		opacity:0;
	}

	to{
		transform:translateY(0);
		opacity:1;
	}
}

.reviews .controls{
	text-align: center;
}

#prev-btn,
#next-btn{
height: 2rem;
width: 2rem;
line-height: 2rem;
font-size: 1.5rem;
background-color: var(--black);
color: var(--white);
border-radius: .5rem;
cursor: pointer;
transition: .2s linear;
}

#prev-btn:hover,
#next-btn:hover{
	background-color: var(--main-color);
	color: var(--black);
	box-shadow: var(--box-shadow);
	transform: translateY(-.3rem);
}
/*--reviews--*/


/*--contact--*/

.contact .row{
	display:flex;
	align-items: center;
	flex-wrap: wrap-reverse;
	gap:2rem;
}

.contact .row .form{
	flex:1 1 20rem;
	text-align: center;
}

.contact .row .form .flex{
	display:flex;
	gap:.5rem;
	flex-wrap:wrap;
}

.contact .row .form .flex .input{
	flex: 1 1 20rem;
}


.contact .row .form .input{
	background-color: var(--light-bg);
	border-radius: .5rem;
	text-transform: none;
	color:var(--black);
	font-size: 1rem;
	padding:1rem 1.1rem;
	border: .1rem solid rgba(0,0,0,.1);
}

.contact .row .form .input::placeholder{
	text-transform: capitalize;
}

.contact .row .form .input:focus{
	background-color: var(--light-color);
}

.contact .row .form textarea{
	height:10rem;
	width:100%;
	resize:none;
	margin-top: .5rem;
}

.contact .row .box-container{
	flex: 1 1 10rem;
}

.contact .row .box-container .box{
	display:flex;
	gap:1rem;
	margin-bottom: 1rem;
}




.contact .row .box-container .box i{
	height:2rem;
	width:2rem;
	line-height: 2rem;
	font-size: 1rem;
	background-color: var(--main-color);
	color:var(--black);
	border-radius: .5rem;
	text-align: center;
}

.contact .row .box-container .box h3{
	font-size: 1.3rem;
	color:var(--black);
	margin-bottom: .5rem;
}

.contact .row .box-container .box a{
	display: block;
	font-size: 1rem;
	color:var(--light-black);
	padding-top: .5rem;
	text-transform: none;
	text-decoration: none;
}

.contact .row .box-container .box a:hover{
	text-decoration: underline;
}
/*--contact--*/


/*--footer--*/

.footer{
	background: var(--black);
}

.footer .flex{
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content:space-between;
	gap:1rem;
}

.footer .flex .share a{
	height: 2rem;
	width:2rem;
	border-radius: .5rem;
	line-height: 2rem;
	font-size: 1.3rem;
	background-color: var(--white);
	color:var(--black);
	text-decoration: none;
	text-align: center;
	margin-right: .5rem;
}

.footer .flex .share a:hover{
	background-color: var(--main-color);
}


.footer .flex .credit{
	color: var(--white);
	font-size: 1rem;
}


.footer .flex .credit span{
	color: var(--main-color);
	
}
/*--footer--*/