@import url('https: //fonts.googleapis.com/css2?family=roboto: wght@100;300;400;500;700&display=swap');
:root{
	--main-color: #d3ad7f;
	--black: #13131a;
	--bg: #010103;
	--border: .1rem solid rgba(255, 255, 255, .3);
}
*{
	font-family: 'Roboto',sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	border: none;
	text-decoration: none;

	transition: .2s linear;
}
html{
	font-size: 62.5%;
	overflow-x: hidden;
	scroll-padding-top: 9rem;
	scroll-behavior: smooth;
}
html::-webkit-scrollbar{
	width: .8rem;
}
html::-webkit-scrollbar-track{
	background: transparent;
}
html::-webkit-scrollbar-thumb{
	background: #fff;
	border-radius: 5rem;
}
body{
	background: var(--bg);
}
a{

	text-decoration: none;
	color:white;
}
.omer{
  
    justify-content: center;
    margin-top: 25px;
    margin-bottom:27px;
    display:none;
}
 @media(max-width: 850px){
  
       .omer {display: flex;
       overflow: hidden;
        
     }
}



.carruseles {
    width: 1000%;
    height: 100%;
    display: flex;

}

.slider-section {
    width: calc(100% / 10);
    height: 100%;
}

.slider-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.btn-left,
.btn-right {
    display: flex;
    position: absolute;
    top: 50%;
    font-size: 1.5rem;
    background-color: transparent;
    border-radius: 50%;
    padding: 5px;
    font-weight: 600;
    cursor: pointer;
    color: #ffffff81;
    transform: translate(0,-50%);
    transition: .5s ease;
    user-select: none;
}

.btn-left:hover,
.btn-right:hover {
    background-color: #333333d4;
    color: #fff;
}

.btn-left {
    left: 10px;
}

.btn-right {
    right: 10px;
}
.headingmob{
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	padding-top: 2.5rem;
	padding-bottom:3.5rem ;
	font-size:4rem ;
	display: none;
}
.mob{
	text-transform: uppercase;
	color: #fed96f;
	display: none;
}
 @media(max-width: 850px){
  
       .headingmob {display: block;
        
     }
     .mob {display: block;
        
     }

}

.btn{
	margin-top: 1rem;
	display: inline-block;
	padding: .9rem 3rem;
	font-size: 1.7rem;
	color: #fff;
	background: #edc563;
	cursor: pointer;
}
.btn:hover{
	letter-spacing: .2rem;
	
}
.header .cart-items-container .btn{
	width: 100%;
	text-align: center;
}
.home{
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: url(../img/112.jpg) no-repeat;
	
	background-position: right;
	
	background-size: cover;
	object-fit: cover;
	
}
section{
	padding: 2rem 7%;
}
.home .content{
	max-width: 60rem;

}
.home .content h3{
	font-size: 6rem;
	
	color: #fff;
}
.home .content p{
	font-size: 2rem;
	font-weight: lighter;
	line-height: 1.8;
	padding: 1rem 0;

	color: #eee
}

.heading{
	text-align: center;
	color: #fff;
	
	padding-bottom:3.5rem ;
	font-size:4rem ;
}

.heading span{
	
	color: #fed96f;
}
.about .row{
	display: flex;
	align-items: center;
	background: var(--black);
	flex-wrap: wrap;

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

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

}
.about .row .content{
	flex: 1 1 45rem;
	padding: 2rem;
}
.about .row .content h3{
	font-size: 3rem;
	color: #fff;
}

.about .row .content p{
	font-size: 2rem;
	color: #ccc;
	padding: 1rem 0;
	line-height: 1.8;
}




.text{
    font-weight: 300;
    opacity: 0.9;
    color: white;
    margin-top: 7px;
    font-size: 16px;

}


.contact-body{
    max-width: 90%;
    margin: 0 auto;
    padding: 0 1rem;
      color: white;
}
.contact-info{
    margin: 0 0;
    text-align: center;
    padding: 0 0;
}
.contact-info span{
       display: flex;
    justify-content: center;


}
.contact-info div{
    margin: 2rem 0;
    


}
.contact-info span .fas{
    font-size: 3rem;
    background-color: whitesmoke;
    color: #edc563;
    border: 5px solid #fed96f;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    justify-content: center;
     align-items: center;
     text-align: center;
display: flex;
     margin: 0.4rem;
     transition: all 0.4s ease;

}
.contact-info div span:nth-child(2){
    font-weight: 500;
    font-size: 2rem;
    margin-top:10px;

}
.contact-info .text{
    padding-top: 0.4rem;
}







.menu .box-container{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
	gap: 4rem;
}
.menu .box-container .box{
	padding: 5rem;
	text-align: center;
	border: var(--border);
}

.menu .box-container .box img{
	height: 20rem;
	margin-bottom:25px;
}
.menu .box-container .box h3{
	color: #fff;
	font-size: 2.5rem;
	padding: 1rem 0;
}
.menu .box-container .box .price{
	color: #fff;
	font-size: 2.5rem;
	padding: 5rem 0;

}
.menu .box-container .box .price span{
	
	font-size: 1.8rem;
	text-decoration: line-through;
	
}
.menu .box-container .box:hover{
	background: whitesmoke;
}
.menu .box-container .box:hover > *{
	color: var(--black);
}
.blogs .box-container{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
	gap:4.5rem;

}
.blogs .box-container .box{
	border: var(--border);
}
.blogs .box-container .box .image{
	height: 25rem;
	overflow:hidden ;
	width: 100%;
}
.blogs .box-container .box .image img{
	height: 100%;
	object-fit: cover;

	width: 100%;
}
.blogs .box-container .box:hover .image img{
	transform: scale(1.2);
}
.blogs .box-container .box .content {
	padding: 2rem;
}
.blogs .box-container .box .content .title{
	font-size: 2.5rem;
	line-height: 1.5;
	color: #fff;
}
.blogs .box-container .box .content .title:hover{
	color: #edc563;
}
.blogs .box-container .box .content span{
	color: var(--main-color);
	display: block;
	padding-top: 1rem;
	font-size: 2rem;
}
.blogs .box-container .box .content p{
	font-size: 1.8rem;
	line-height: 1.8;
	color: #ccc;
	padding: 1rem 0;

}

.contack .row{
	
	
	background: var(--black);
	
	gap: 1rem;
	text-align: center;
	align-items: center;
}
.contack .row .map{
	flex: 15 15 45rem;
	width: 100%;
	object-fit: cover;
}

.contact{
	padding: 10px 0;
	 background: var(--black);;

}
.contact h2{
width: 100%;
		text-align: center;
		margin: 0 auto;
		color: black;
		font-size: 30px;
		font-weight: 600;


}
.contact h2::after{
content: "";
		width: 42px;
		height: 3px;
		background-color: white;
		margin: 0 auto;
		display: block;
		margin-top: 5px;

	
} 
.contact-content{
	margin-top: 62px;
	display: flex;
	justify-content: space-evenly;

}
.contact-item{
	display: flex;
	align-items: center;
	flex-basis: 33%;
	margin-bottom: 100px;
	flex-direction: column;
}
.contact-item i{
	font-size: 27px;
	margin-bottom: 30px;
	color: white;

}
.contact-item p{
	font-size: 17px;
	line-height: 33px;
	color: white;
}
#foot{
	color: whitesmoke;
}
.footer h2{
width: 100%;
		text-align: center;
		margin: 0 auto;
		color: #5b2a02;
		font-size: 30px;
		font-weight: 600;
		padding: 55px 0;
}

.footer{
	background-color: black;

}
.footer-copyright{
	color: #fed96f;
	text-align: center;
	flex-basis: 55%;
	line-height: 2;
	font-size: 18px;
	margin-bottom: 25px;

}
.footer-content{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

}
.yukari{
color: #fed96f;
}
.footer-social i{
	color: whitesmoke;
	margin-bottom: 50px;
font-size: 25px;
padding: 0 40px;


}

















@media(max-width: 991px){
	html{
		font-size: 60%;
	}
	
	section{
	padding: 2rem ;
}

.home{
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: url(../img/ass.jpg) no-repeat;
	
	background-position: center;
	
	background-size: cover;
	object-fit: cover;
	
}


}
@media(max-width: 768px){

	#menu-btn{
		display: inline-block;
	}
	.header .navbar{
		position: absolute;
		top: 100%;
		right: -100%;
		background: #fff;
		background: 30rem;
		width: 100%;
		height:calc(100vh - 9.5rem) ;


	}
	.header .navbar.active{
		right: 0;
		background: #fff;

	}
	.header .navbar a{
		color: var(--black);
		display: block;
		margin: 2rem;
		padding: 1rem;
		font-size: 2rem;
		text-align: center;
		

	}
	
	.home .content h3{
		font-size: 4.8rem;

	}
.home .content p{
	font-size: 1.8rem;
}
}
@media(max-width: 450px){
	html{
		font-size: 50%;
	}

}
@media only screen and (max-width: 800px){
.contact-content{
	flex-direction: column;
}
.contact-item{
	margin-top: 30px;
}
.contact-item p{
	width: 100%;
	text-align: center;
}
}
@media screen and (min-width: 768px){
    .contact-bg .text{
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
    .contact-info{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 992px){
    .contact-bg .text{
        width: 50%;
    }
    .contact-form{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        align-items: center;
    }
}

@media screen and (min-width: 1200px){
    .contact-info{
        grid-template-columns: repeat(4, 1fr);
    }
}