@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Raleway", sans-serif;
	text-decoration: none;
	outline: none;
	border: none;
	text-transform: capitalize;
	transition: all .2s linear;
}
:root{
	--yellow : #eacf4f;
	--white : #fff;
	--black : #000;
	--light-color: #aaa;
	--border : 0.2rem solid rgba(255,255,255,0.3); 
}

@mixin title-text{
	font-size: $title-text;
	text-transform: uppercase;
	color: var(--white);
}
@mixin grap-text{
	font-size: $title-text;
	line-height: 2;
	color: var(--light-color);
}
@mixin grid{
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax($val, 1fr));
	gap: 2rem;
}


html{
	font-size: 62.5%;
	scroll-behavior: smooth;
	scroll-padding-top: 8rem;
	overflow-x: hidden;
}
html::-webkit-scrollbar{
	width: 1rem;
}
html::-webkit-scrollbar-track{
	background: transparent;
}
html::-webkit-scrollbar-thumb{
	background: var(--yellow);
	border-radius: 5rem;
}

body{
	background: url(../images/background.jpg);
	background-attachment: fixed;
	background-position: center;
	overflow-x: hidden;
}
section{
	padding: 3rem 9%;
}
.heading{
	text-align: center;
	margin-bottom: 3rem;
}
.heading h3{
	font-size: 3rem;
	font-size: 3rem;
	text-transform: uppercase;
	color: var(--white);
}
.btn{
	display: inline-block;
	margin-top: 1rem;
	cursor: pointer;
	color: var(--white);
	border: var(--border);
	background: no-repeat;
	font-size: 1.7rem;
	padding: 1rem 3rem;
}
.btn:hover{
	color: var(--black);
	background: var(--white);

}


/* Header */

.header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: var(--black);
	padding: 3rem 9%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.header .icons{
	font-size: 2.5rem;
	cursor: pointer;
	color: var(--white);
}
.header .icons:hover{
	color: var(--yellow);
}
.header #menu-btn{
	display: none;
}
.header .navbar a{
	color: var(--white);
	font-size: 2rem;
	margin: 0 2rem;
}
.header .navbar a:hover{
	text-decoration: underline;
	text-underline-offset: 1rem;
	color: var(--yellow);
}
.header .navbar .space{
	display: inline-block;
	width: 16rem;
}
.header .logo{
	position: absolute;
	top: 3rem;
	left: 51.5%;
	transform: translateX(-50%);
}
.header .logo img{
	width: 15rem;	
}
.header .search-form{
	height: 7rem;
	padding: 0 2rem;
	border-top: var(--border);
	display: flex;
	align-items: center;
	background: var(--black);
	position: absolute;
	top: 99%;
	left: 0;
	right: 0;
	clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
.header .search-form.active{
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.header .search-form input{
	width: 100%;
	background: none;
	text-transform: none;
	font-size: 1.6rem;
	color: var(--white);
}
.header .fa-times{
	transform: rotate(180deg);
}


/* home section */
.home{
	margin-top: 7rem;
	background: url(../images/home-bg.png) no-repeat;
	background-position: center;
	background-size: cover;
}
.home .content{
	max-width: 70rem;
	text-align: center;
	margin: 0 auto;
}
.home .content img{
	width: 100%;
}
.home .content h3{
	font-size: 4rem;
	text-transform: uppercase;
	color: var(--white);
}
.home .content p{
	font-size: 1.7rem;
	line-height: 2;
	color: var(--light-color);
	padding: 2rem 0;
}
/* service section */
.service{
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(31rem, 1fr));
	gap: 2rem;
}
.service .box{
	text-align: center;
	padding: 2rem;
}
.service .box i{
	height: 7rem;
	width: 7rem;
	line-height: 7rem;
	font-size: 2.5rem;
	color: var(--black);
	background: var(--yellow);
	border-radius: 50%;
}
.service .box h3{
	padding: 1rem 0;
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--white);
}
.service .box p{
	font-size: 1.5rem;
	line-height: 2;
	color: var(--light-color);
}
.menu .box-container{
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(31rem, 1fr));
	gap: 2rem;
}
.menu .box-container .box{
	text-align: center;
}
.menu .box-container .box img{
	height: 25rem;
}
.menu .box-container .box img:hover{
	transform: translateY(1rem);
}
.menu .box-container .box .content{
	padding: 1rem 0;
}
.menu .box-container .box .content .stars{
	margin-bottom: 2rem;
}
.menu .box-container .box .content .stars i{
	color: var(--yellow);
	font-size: 1.7rem;
}
.menu .box-container .box .content h3{
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--white);
}
.menu .box-container .box .content .price{
	font-size: 2rem;
	line-height: 2;
	color: var(--light-color);
}
/* about section */
.about{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 3rem;
}
.about .image{
	flex: 1 1 40rem;
}
.about .image img{
	width: 100%;
}
.about .content{
	flex: 1 1 40rem;
}
.about .content .title{
	font-size: 2.5rem;
	text-transform: uppercase;
	color: var(--white);
}
.about .content p{
	font-size: 1.5rem;
	line-height: 2;
	color: var(--light-color);
	padding: 2rem 0;
}
.about .content .icons{
	display: flex;
	flex-wrap: wrap;
	gap:1.5rem;
	margin-bottom: 2rem;
	margin-top: 1rem;
}
.about .content .icons h3{
	flex: 1 1 16rem;
	font-size: 1.5rem;
	text-transform: uppercase;
	color: var(--white); 
}
.about .content .icons h3 i{
	padding-right: 0.5rem;
	color: var(--yellow);
}
/* reviews section */
.reviews .box-container{
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(31rem, 1fr));
	gap: 2rem;
}
.reviews .box-container .box{
	text-align: center;
	padding: 2rem;
}
.reviews .box-container .box img{
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	margin-bottom: 1rem;
}
.reviews .box-container .box h3{
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--white);
}
.reviews .box-container .box p{
	font-size: 1.3rem;
	line-height: 2;
	color: var(--light-color);
	padding: 1rem 0;
}
.reviews .box-container .box .stars{
	padding-top: 0.5rem;
}
.reviews .box-container .box .stars i{
	color: var(--yellow);
	font-size: 1.7rem;
}
/* contact section */
.contact .row{
	display: flex;
	flex-wrap: wrap;
	gap:3rem;
}
.contact .row .map{
	flex: 1 1 40rem;
}
.contact .row .form{
	flex: 1 1 40rem;
}
.contact .row .form .icons-container{
	display: flex;
	flex-wrap: wrap;
	gap:2rem;
	margin-bottom: 3rem;
}
.contact .row .form .icons-container .icons{
	flex: 1 1 15rem;
	text-align: center;
}
.contact .row .form .icons-container .icons i{
	width: 6rem;
	height: 6rem;
	line-height: 6rem;
	border-radius: 50%;
	background-color: var(--yellow);
	color: var(--black);
	font-size: 2rem;
	margin-bottom: 0.5rem;
}
.contact .row .form .icons-container .icons h3{
	padding: 1rem 0;
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--white);
}
.contact .row .form .icons-container .icons p{
	font-size: 1.4rem;
	line-height: 2;
	color: var(--light-color);
}
.contact .row .form form{
	text-align:center;
}
.contact .row .form form .box{
	padding: 1.2rem 1.4rem;
	font-size: 1.6rem;
	color: var(--white);
	background:none;
	border: var(--border);
	text-transform: none;
	width: 100%;
	margin: 0.7rem 0;
}
.contact .row .form form .box:focus{
	border-color: var(--yellow);
}
.contact .row .form form textarea{
	height: 15rem;
	resize: none;
}

/* blogs section */
.blogs .box-container{
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(31rem, 1fr));
	gap: 2rem;

}
.blogs .box-container .box{
	position: relative;

}
.blogs .box-container .box .image{
	height: 25rem;
	overflow: hidden;
	position: relative;
}
.blogs .box-container .box:hover .image img{
	transform: scale(1.1);
}

.blogs .box-container .box .image .icons{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 2rem;
	background:var(--black);
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	transform: translateY(10rem);
}
.blogs .box-container .box:hover .image .icons{
	transform: translateY(0);
}
.blogs .box-container .box .image .icons a{
	font-size: 1.5rem;
	color: var(--white);
}
.blogs .box-container .box .image .icons a i{
	padding-right: .5rem;
	color: var(--yellow);
}
.blogs .box-container .box .image .icons a:hover{
	color: var(--yellow);
}
.blogs .box-container .box .image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.blogs .box-container .box .content{
	text-align: center;
	padding: 2rem;
}
.blogs .box-container .box .content h3{
	text-align: center;
	padding: 2rem;
	font-size: 2rem;
	text-transform: uppercase;
	color: var(--white);
}
.blogs .box-container .box .content p{
	font-size: 1.5rem;
	line-height: 2;
	color: var(--light-color);
	padding: 1.5rem;
}
	
/* footer section*/
.footer{
	text-align: center;
	background: linear-gradient(transparent, var(--black));
}
.footer .links a{
	margin: 1rem;
}
.footer .credit{
	font-size: 2rem;
	line-height: 2;
	color: var(--light-color);
}
.footer .credit span a{
	color: var(--yellow);
}

@media (max-width: 1200px){
	.header{
		padding: 3rem;
	}
	section{
		padding: 3rem 2rem;
	}
}
@media (max-width: 991px){
	html{
		font-size: 55%;
	}
	.header{
		justify-content: flex-end;
		gap: 2rem;
	}
	.header .logo{
		transform: translateX(0);
		left: 3rem;
	}
	.header #menu-btn{
		display: inline-block;
	}
	.header .navbar{
		position: absolute;
		top: 99%;
		left: 0;
		right: 0;
		background-color: var(--black);
		clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
	}
	.header .navbar.active{
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
	.header .navbar a {
		display: block;
		margin: 3rem 2rem;
	}
	.header .navbar .space{
		display: none;
	}
}
@media (max-width: 768px){
	.home .content h3{
		font-size: 2.5rem;
	}
}
@media (max-width: 450px){
	html{
		font-size: 50%;
	}
}