*{
	font-family: 'Nunito', sans-serif;
	margin: 0;
	padding: 0;
}
/*header start*/
.content-header{
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
}
.content-header section{
	display: flex;
	justify-content: space-around;
	text-align: center;
	color: gray;
	padding: 20px;
	background-color: white;
	position: relative;
}
.content-header .logo a{
	text-decoration: none;
	color: gray;

}
.content-header .menu a{
	text-decoration: none;
	color: gray;
	font-size: 20px;
	padding-left: 20px;
}
.content-header .menu a:hover{
	color: red;
	text-decoration: underline;
}
.content-header .icons{
	font-size: 150%;
	cursor: pointer;
}
.content-header .icons div:hover{
	color: red; 
}
#menu-btn{
	display: none;
}
/*header end*/

/*user start*/
.user-account{
   position: fixed;
   top: 0;
   right: -1100%;
   width: 100%;
   z-index: 1100;
   background-color: #efeded;
   height: 100vh;
   overflow-y: scroll;
   border-left: 1px solid black;
}

.user-account.active{
   right: 0;
}
.user-account section{
	text-align: center;
}
.user-account .close{
	text-align: right;
	text-decoration: underline;
	font-size: 50px;
	margin: 20px;
	color: red;
}
.user-account .close i:hover{
	color: black;
	cursor: pointer;
}
.user-account .titre{
	margin: 0px 80px;
    background-color: #80808014;
    padding: 15px;
    font-size: 20px;
    color: #ff000094;
    border-radius: 10px;
}
.user-account .display-orders{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: center;
    text-align: center;
    margin: 40px 80px;
    padding: 35px;
    background-color: #80808014;
    border-radius: 10px;
    column-gap: 10px;
}
.user-account .display-orders p{
	background-color: white;
    text-align: center;
    padding: 15px 30px;
    font-size: 17px;
    border-radius: 10px;
    box-shadow: 4px 4px #9e9e9e1f;
}
.user-account .display-orders span{
	color: red;
}
.user-account .forms{
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
   border-radius: 10px;
   margin: 40px 80px;
    
}
.user-account .forms form{
	display: grid;
	grid-template-columns: 1fr;
	text-align:center ;
	justify-content: space-between;
	background-color: #80808014;
	padding: 30px;
}
.user-account .forms h2{
	margin-bottom: 25px;
}
.user-account .forms input{
	margin-bottom: 14px;
    height: 35px;
    border: none;
    border-radius: 5px;
    padding-left:15px;
}
.user-account .forms .submit{
	background-color: #ff000094;
	color: white;
}
.user-account .forms .submit:hover{
	background-color: gray;
}
/*user end*/

/*order start*/
.my-orders{
	position: fixed;
	top: 0;
	right: -1000%;
	z-index: 1100;
	background-color: #efeded;
	margin-left: 73%;
	height: 100vh;
	overflow-y: scroll;
	border-left: 1px solid black;
}
.my-orders.active{
   right: 0;
}
.my-orders .close-order{
	text-align: right;
	text-decoration: underline;
	font-size: 50px;
	color: red;
}
.my-orders .close-order i:hover{
	color: black;
	cursor: pointer;
}
.my-orders .title{
	text-align: center;
}
.my-orders .box{
	background-color: white;
    display: grid;
    grid-template-rows: 1fr;
    margin: 30px;
    padding: 20px;
    border-radius: 6px;
    box-shadow:  4px 2px #c1b9b957;
}
.my-orders .box p{
	font-size: 20px;
	line-height: 1.5;
	color: gray;
}
.my-orders .box span{
	color: #000000c7;
}
/*order end*/


/*shopping-cart start*/
.shopping-cart{
	background-color: #efeded;
	margin-left: 73%;
	height: 100vh;
	overflow-y: scroll;
	position: fixed;
	z-index: 1100;
	top: 0;
	right: -1110%;
	border-left: 1px solid black;

}
.shopping-cart.active{
	right: 0;
}
.shopping-cart .close-shopping-cart{
	text-align: right;
	text-decoration: underline;
	font-size: 45px;
	color: red;
}
.shopping-cart .close-shopping-cart i:hover{
	color: black;
	cursor: pointer;
}
.shopping-cart .box-content img{
	width: 25%;
}
.shopping-cart .box-content{
	background-color: white;
	display: flex;
	position: relative;
	align-items: center;
	gap: 10px;
	margin: 30px;
	padding: 8px;
	box-shadow: 3px 3px #c1b9b957;
	border-radius: 5px;
}
.shopping-cart .box-content i{
    position: absolute;
    top: 10px;
    right:15px;
    font-size: 1.2rem;
    cursor: pointer;
    color: red;
}
.shopping-cart .box-content i:hover{
	color: gray;
}
.box-content .form-content{
	font-size: 20px;
}
.box-content .form-content input{
	height: 27px;
    padding-left: 4px;
    margin: 7px 0px 7px 4px;
}
.box-content .form-content button{
	height: 30px;
    margin: 7px 0px 7px 4px;
    padding: 6px;
    background-color: gray;
    color: white;
    border: none;
    border-radius: 3px;
    box-shadow: 3px 3px #c1b9b957;
}
.box-content .form-content button:hover{
	background-color: #ff00008a;
}
.shopping-cart .order-submit{
	background-color: red;
	color: white;
	text-align: center;
	
	margin-top: 3px;
	margin-left: 30px;
	margin-bottom: 10px;
	padding: 7px 100px;
	border: none;
	font-size: 20px;
	box-shadow: 5px;
}
.shopping-cart .order-submit:hover{
	background-color: gray;
}
/*shopping-cart end*/

/*home start*/
.home{
	background-image: url(../images/home-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	margin-top: 85px;
}
.home .home-bg .homr-content .image img{
	width: 90%;
}
.home .home-bg .homr-content .image{
	flex: 1 1 40rem;
	animation: fadeRight .4s linear;
}
.home .home-bg .homr-content .text-content.active{
	display: flex;
}
.home .home-bg .homr-content .content-1{
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	text-align: center;
	padding: 60px;
}
.home .home-bg .homr-content h3{
	font-size: 65px;
	color: white;
	text-align: center;
}
.home .home-bg .homr-content .content-2{
	display: none;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	padding: 60px;
}
.home .home-bg .homr-content .fa-angle-left{
	background-color: white;
	font-size: 20px;
	padding: 15px 20px;
	border-radius: 5px;
	
}
.home .home-bg .homr-content .fa-angle-right{
	background-color: white;
	font-size: 20px;
	padding: 15px 20px;
	border-radius: 5px;
}
.home .home-bg .homr-content .text-content{
	text-align: center;
}
.home .home-bg .homr-content .text-content div:hover{
	color: white;
	background-color: red;
}
/*home end*/

/*about start*/
.about{
	background-color: #eee;
	text-align: center;
	padding-left: 15%;
	padding-right: 15%;
	padding-bottom: 1%;
}
.about h1{
	font-size: 35px;
	padding-top: 25px;
	padding-bottom: 25px;
}
.about .about-content {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 25px;
	padding-bottom: 25px;
	
}
.about .about-content div{
	background-color: white;
	border-radius: 10px;
	padding: 20px 10px;
	box-shadow: 9px 7px #0000000a;
}
.about .about-content .text-about img{
	width: 100%;
	padding-bottom: 10px;
}
.about .about-content .text-about p{
	padding-top: 15px;
	padding-bottom: 20px;
	text-align: center;
}
.about .about-content .text-about a{
	text-decoration: none;
	color: white;
	background-color: #ff0505d6;
	padding: 10px 90px;
	border-radius: 6px;
}
.about .about-content .text-about a:hover{
	background-color: gray;
}
/*about end*/

/*our menu start*/
.our-menu{
	background-color: #eee;
	text-align: center;
	padding-left: 15%;
	padding-right: 15%;
	padding-bottom: 2%;
}
.our-menu h1{
	font-size: 35px;
	padding-bottom: 25px;
}

.our-menu .our-menu-content{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 25px;
}
.our-menu .content-add-cart img{
	width: 100%;
}
.our-menu .content-add-cart{
	background-color: white;
	border-radius: 10px;
	padding: 15px 10px 20px 10px;
	box-shadow: 9px 7px #0000000a;
}
.our-menu .content-add-cart .price{
	background-color: #4c4a4a;
   text-align: left;
   margin-right: 83%;
   color: white;
   padding: 8px;
   box-shadow: 3px;
   border-radius: 5px;
}
.our-menu .content-add-cart span{
	font-size: 23px;
}
.our-menu .content-add-cart .content-input {
	margin-top: 9px;
}
.our-menu .content-add-cart .content-input .number{
	width: 50px;
	height: 32px;
	padding-left: 3px;
}
.our-menu .content-add-cart .content-input .submit{
	width: 170px;
	height: 37px;
	margin-left: 7px;
	border: none;
	background-color: #ff0505d6;
	color: white;
	border-radius: 5px;
	font-size: 15px;
}
/*our menu end*/

/*order menu start*/
.ORDER-NOW{
	background-color: #eee;
	text-align: center;
	padding-left: 15%;
	padding-right: 15%;
	padding-bottom: 2%;
}
.ORDER-NOW h1{
	font-size: 35px;
	padding-bottom: 25px;
}
.ORDER-NOW .content-order-now{
	padding: 50px;
	background-color: white;
}
.ORDER-NOW .content-order-now .display-orders{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 12px;
	background-color: #efeded;
	padding: 30px 50px;
	border-radius: 6px;
}
.ORDER-NOW .content-order-now .display-orders p{
	background-color: white;
	color: gray;
	padding:13px 22px;
	border-radius: 5px;
}
.ORDER-NOW .content-order-now .display-orders span{
	color: red;
}
.ORDER-NOW .input-order-now form{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-top: 15px;
}
.ORDER-NOW .input-order-now form p{
	text-align: left;
	margin-bottom: 6px;
}

.ORDER-NOW .input-order-now form input{
	width: 100%;
	height: 37px;
	padding-left: 5px;
	background-color: #efeded;
	border: none;
	border-radius: 5px;
}
.ORDER-NOW .input-order-now select{
	width: 100%;
	height: 37px;
	padding-left: 5px;
	background-color: #efeded;
	border: none;
	border-radius: 5px;
}
.ORDER-NOW .submit-order-now{
	width: 101%;
    height: 41px;
	border: none;
	background-color: #ff0505d6;
	color: white;
	border-radius: 5px;
	font-size: 25px;
	margin-top: 20px;
	text-align: center;
}
.ORDER-NOW .submit-order-now:hover{
	background-color: gray;
	cursor: pointer;
}
/*order now end*/

/*FAQ start*/
.faq{
	background-color: #eee;
	text-align: center;
	padding-left: 25%;
	padding-right: 25%;
	padding-bottom: 2%;
}
.faq h1{
	font-size: 35px;
	padding-bottom: 25px;
}
.faq .accordion-container .accordion-active .accordion-heading{
	background-color: #4c4a4a;
	color: white;
	display: flex;
	justify-content: space-between;
	text-align: center;
	padding: 8px;
	font-size: 20px;
	cursor: pointer;
}
.faq .accordion-container .accordion-active .accrodion-content{
	background-color: white;
	text-align: left;
	padding: 10px;
	color: gray;
}
.faq .accordion-container .accordion .accordion-heading{
	background-color: #4c4a4a;
	color: white;
	display: flex;
	justify-content: space-between;
	text-align: center;
	padding: 8px;
	margin-top: 17px;
	font-size: 20px;
	cursor: pointer;
}
.faq .accordion-container .accordion .accrodion-content{
	background-color: white;
	text-align: left;
	padding: 10px;
	color: gray;
	display: none;
}
/*FAQ end*/

/*footer start*/
.footer{
	background-color: #eee;
	text-align: center;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 2%;
	padding-top: 30px;
}
.footer .content-footer{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 10px;
}
.footer .content-footer .information{
	background-color: white;
	padding: 30px;
	border-radius: 5px;
	box-shadow: 2px 2px #cd161629;
}
.footer .content-footer .information i{
	background-color: red;
   color: white;
   font-size: 20px;
   padding: 15px;
	border-radius: 29px;
	margin-bottom: 10px;
}
.footer .content-footer .information h3{
	margin-bottom: 10px;
}
.fin{
	margin-top: 25px;
	border-top: 1px solid gray;
}
.fin p{
	padding: 20px;
	font-size: 20px;
	background: linear-gradient(40deg,red,gray);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}
/*footer end*/

/*media query*/

@media (max-width:1245px){
	.about .about-content {
	   grid-template-columns: 1fr 1fr;
	   gap: 25px;
   }
   .our-menu .our-menu-content{
	   grid-template-columns:1fr 1fr;
	   gap: 25px;
   }
   .ORDER-NOW{
   	padding-left: 5%;
   	padding-right: 5%;
   }
   .ORDER-NOW .content-order-now{
	   padding: 20px;
	   margin-bottom: 35px;
   }
   .ORDER-NOW .content-order-now .display-orders{
	   padding: 30px 30px;  
   }
   .my-orders{
   	margin-left: 70%;
   	font-size: 25px;
   }
   .my-orders h2{
   	font-size: 20px;
   }
   .my-orders .box p{
	font-size: 15px;
   }
}


@media(max-width: 830px){
	.about{
		padding-left: 23%;
		padding-right: 23%;
	}
	.about .about-content {
	   grid-template-columns: 1fr;
	   gap: 25px;
   }
   .footer .content-footer{
	   grid-template-columns: 1fr 1fr;
	   gap: 10px;
   }
   .user-account .display-orders{
   	grid-template-columns: 1fr;
   	gap: 15px;
   }
   .user-account .forms{
	   grid-template-columns: 1fr;
	   gap: 20px;
   }
   .my-orders{
   	margin-left: 55%;
   	font-size: 25px;
   }
   .my-orders h2{
   	font-size: 20px;
   }
   .my-orders .box p{
	font-size: 15px;
   }
}
@media (max-width: 768px){
	#menu-btn{
		display:inline-block ;
	}
	.content-header section{
		justify-content: space-between;
	}
	.content-header .menu{
      position: absolute;
      top:99%; left:0; right:0;
      background-color: white;
      border-top: 1px solid gray;
      border-bottom: 1px solid gray;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }
   .menu.active{
   	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }
   .content-header .menu a{
   	display: block;
   	text-align: left;
   	padding: 10px;
   }

   .home .home-bg .homr-content .content-1{
	   display: block;
	   align-items: center;
	   text-align: center;
	}
	.home .home-bg .homr-content .content-1 h3{
		font-size:40px;
   }

   .about .about-content {
	   display: grid;
	   grid-template-columns: 1fr ;
	   gap: 25px;
   }
   .our-menu{
   	padding-left: 20%;
   	padding-right: 20%;
   }
   .our-menu .our-menu-content{
	   display: grid;
	   grid-template-columns:1fr;
	   gap: 25px;
   }
   .ORDER-NOW{
   	padding-left: 15px;
   	padding-right: 15px;
   }
   .ORDER-NOW .content-order-now{
	   padding: 20px;
	   margin-bottom: 35px;

   }
   .ORDER-NOW .content-order-now .display-orders{
	   display: grid;
	   grid-template-columns: 1fr;
	   padding: 30px 30px;  
   }
   .ORDER-NOW .input-order-now form{
   	display: grid;
   	grid-template-columns: 1fr;
   	gap: 10px;
   }
   .faq{
   	padding-left: 5%;
   	padding-right: 5%;
   }
   .footer .content-footer{
	   grid-template-columns: 1fr;
	   gap: 10px;
   }
   .my-orders{
   	margin-left: 50%;
   	font-size: 35px;
   }
   .my-orders h2{
   	font-size: 20px;
   }
   .my-orders .box p{
	font-size: 15px;
   }
}   

@media (max-width: 530px){
	.about{
		padding-left: 15%;
		padding-right: 15%;
	}

   .my-orders{
   	margin-left: 55%;
   	font-size: 25px;
   }
   .my-orders h2{
   	font-size: 20px;
   }
   .my-orders .box p{
	font-size: 15px;
   }
}
@media (max-width:400px){
	.about{
		padding-left: 5%;
		padding-right: 5%;
	}
	.our-menu{
		padding-left: 5%;
		padding-right: 5%;
	}
	.user-account .titre{
		margin: 0px 20px;
		
	}
	.user-account .display-orders{
		margin: 40px 20px;
	}
	.user-account .forms{
	   margin: 40px 20px;
		
	}
	.my-orders{
		margin-left: 0%;
	}
	.shopping-cart{
		margin-left: 0%;
	}
}