@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

:root{
   --green:#721372;
   --black:#192a56;
   --light-color:#666;
   --box-shadow:0 .5rem 1.5rem rgb(77, 9, 54);
}

*{
   
   font-family: 'Comfortaa', sans-serif;
   margin: 0; padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   outline: none; border: none;
   text-transform: capitalize;
   transition: all .2s linear;
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
   scroll-padding-top: 5.5rem;
   scroll-behavior: smooth;
}
section{
   padding: 2rem 9%;
}

section:nth-child(even){
   background: #eee;
}

.sub-heading{
   text-align: center;
   color: var(--green);
   font-size: 2rem;
   padding-top: 1rem;
}

.heading{
   text-align: center;
   color: var(--black);
   font-size: 3rem;
   padding-bottom: 2rem;
   text-transform: uppercase;
}
.btn{
   margin-top: 1rem;
   display: inline-block;
   font-size: 1.7rem;
   color: #fff;
   background: var(--black);
   border-radius: .5rem;
   cursor: pointer;
   padding: .8rem 3rem;
}

.btn:hover{
   background: var(--green);
   letter-spacing: .1rem;
}
header{
   position: fixed;
   top: 0; left: 0; right: 0;
   background-image: linear-gradient(rgba(214, 16, 125, 0.7),rgba(202, 183, 199, 0.7)),url(stat11.png);
  
   padding: 1rem 7%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 1000;
   box-shadow: var(--box-shadow);
}

header .logo{
   font-size: 2.5rem;
   font-weight: bolder;
}

header .logo img{
   width: 29px;
   margin-top: 2rem;
}


header .navbar a{
   font-size: 1.7rem;
   border-radius: .5rem;
   padding: .5rem 1.5rem;
   color: #fff;
}

header .navbar a.active,
header .navbar a:hover{
   color: #fff;
   background: var(--green);
}
header .icons i,
header .icons a{
   cursor: pointer;
   margin-left: .5rem;
   height: 4.5rem;
   line-height: 4.5rem;
   width: 4.5rem;
   text-align: center;
   font-size: 1.7rem;
   color: var(--black);
   border-radius: 50%;
   background: #eee;
}

header .icons i:hover,
header .icons a:hover{
   color: #fff;
   background: var(--green);
   transform: rotate(360deg);
}

header .icons #menu-bars{
   display: none;
}

#search-form{
   position: fixed;
   top: -110%; left: 0;
   height: 100%; width: 100%;
   z-index: 1004;
   background: rgba(0,0,0,.8);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0.1rem;
}

#search-form.active{
   top: 0;
}


#search-form #search-box{
   width: 50rem;
   border-bottom: .1rem solid #fff;
   padding: 1rem;
   color: #fff;
   font-size: 3rem;
   text-transform: none;
   background: none;
}

#search-form #search-box::placeholder{
   color: #eee;
   
}

#search-form #search-box::-webkit-search-cancel-button{
   -webkit-appearance: none;
   
}

#search-form label{
   color: #fff;
   cursor: pointer;
   font-size: 3rem;
   
}

#search-form label:hover{
   color: var(--green);
   
}
#search-form #close{
   position: absolute;
   color: #fff;
   cursor: pointer;
   top: 2rem; right: 3rem;
   font-size: 5rem;  
}
 .home .home-slider .slide{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 1rem;
   padding-top: 9rem;
 }

 .home .home-slider .slide .content{
   flex:1 1 45rem ;
 }

 .home .home-slider .slide .image{
   flex:1 2 40rem ;
 }

 .home .home-slider .slide .image img{
   width: 90%;
   
 }
 .home .home-slider .slide .content span{
   color: var(--green);
   font-size: 2.5rem;
 }

 .home .home-slider .slide .content h3{
   color: var(--black);
   font-size: 7rem;
 }

 .home .home-slider .slide .content p{
   color: var(--light-color);
   font-size: 2.2rem;
   padding: .5rem 0;
   line-height: 1.5;
 }

 .swiper-pagination-bullet-active{
   background: var(--green);
 }

/*------course------*/
.course{
	width: 100%;
	margin: auto;
	text-align: center;
	padding-top: 50px;
} 
.course h1{
	font-size: 36px;
	font-weight: 600;
}
.para1{
	color: #777;
	font-size: 14px;
	font-weight: 300;
	line-height: 22px;
	padding: 10px;

}
.course .row{
	margin-top: 5%;
	display: flex;
	justify-content: space-between;
}
.course-col{
	flex-basis: 31%;
	background: #fff3f3;
	border-radius: 10px;
	margin-bottom: 5%;
	padding: 20px 12px;
	box-sizing: border-box;
	transition: 0.5s;
}
h3{
	text-align: center;
	font-weight: 600;
	margin: 10px 0;
}
.course-col:hover{
	box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
}
@media(max-width: 700px){
	.row{
		flex-direction: column;
	}
}




 .dishes .box-container{
   display: grid;
   grid-template-columns:repeat(auto-fit, minmax(28rem, 1fr));
   gap: 1.5rem;
 }

 .dishes .box-container .box{
   padding: 2.5rem;
   background: #fff;
   border-radius: .5rem;
   border: .1rem solid rgba(0,0,0,.2);
   box-shadow: var(--box-shadow);
   position: relative;
   overflow: hidden;
   text-align: center;
 }
 .dishes .box-container .box .fa-heart,
 .dishes .box-container .box .fa-eye{
   position: absolute;
   top: 1.5rem;
   background: #eee;
   border-radius: 50%;
   height: 5rem;
   width: 5rem;
   line-height: 5rem;
   font-size: 2rem;
   color: var(--black);
 }

 .dishes .box-container .box .fa-heart:hover,
 .dishes .box-container .box .fa-eye:hover{
   background: var(--green);
   color: #fff;
 }



 .dishes .box-container .box .fa-heart{
   right: -15rem;
 }

 .dishes .box-container .box .fa-eye{
   left: -15rem;
 }

 .dishes .box-container .box:hover .fa-heart{
   right: 1.5rem;
 }

 .dishes .box-container .box:hover .fa-eye{
   left: 1.5rem;
 }

.dishes .box-container .box img{
   height: 17rem;
   margin: 1rem 0;
}

.dishes .box-container .box h3{
   color: var(--black);
   font-size: 2.5rem;
}

.dishes .box-container .box .stars{
   padding: 1rem 0;
}

.dishes .box-container .box .stars i{
   font-size: 1.7rem;
   color: var(--green);
}

.dishes .box-container .box span{
   color: var(--green);
   font-weight: bolder;
   margin-right: 1rem;
   font-size: 2.5rem;
}

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

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

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

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

.about .row .content h3{
   color: var(--black);
   font-size: 4rem;
   padding: .5rem 0;
}

.about .row .content p{
   color: var(--light-color);
   font-size: 1.5rem;
   padding: .5rem 0;
   line-height: 2;
}

.about .row .content .icons-container{
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   padding: 1rem 0;
   margin-top: .5rem;
}

.about .row .content .icons-container .icons{
   background: #eee;
   border-radius: .5rem;
   border: .1rem solid rgba(0,0,0,.2);
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   flex: 1 1 17rem;
   padding: 1.5rem 1rem;
}

.about .row .content .icons-container .icons i{
   font-size: 2.5rem;
   color: var(--green);
}

.about .row .content .icons-container .icons span{
   font-size: 1.5rem;
   color: var(--black);
}


.menu .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap: 1.5rem;
}

.menu .box-container .box{
   background: #fff;
   border: .1rem solid rgba(0,0,0,.2);
   border-radius: .5rem;
   box-shadow: var(--box-shadow);
}

.menu .box-container .box .image{
   height: 25rem;
   width: 100%;
   padding: 1.5rem;
   overflow: hidden;
   position: relative;
}

.menu .box-container .box .image img{
   height: 100%;
   width: 100%;
   border-radius: .5rem;
   object-fit: cover;
}

.menu .box-container .box .image .fa-heart{
   position: absolute;
   top: 2.5rem; right: 2.5rem;
   height: 5rem;
   width: 5rem;
   line-height: 5rem;
   text-align: center;
   font-size: 2rem;
   background: #fff;
   border-radius: 50%;
   color: var(--black);
}

.menu .box-container .box .image .fa-heart:hover{
   background-color: var(--green);
   color: #fff;
}
.menu .box-container .box .content{
   padding: 2rem;
   padding-top: 0;
}

.menu .box-container .box .content .stars{
   padding-bottom: 1rem;
}

.menu .box-container .box .content .stars i{
   font-size: 1.7rem;
   color: var(--green);
}

.menu .box-container .box .content h3{
   color: var(--black);
   font-size: 2.5rem;
}

.menu .box-container .box .content p{
   color: var(--light-color);
   font-size: 1.6rem;
   padding: .5rem 0;
   line-height: 1.5;
   text-align: center;
}

.menu .box-container .box .content .price{
   color: var(--green);
   margin-left: 1rem;
   font-size: 2.5rem;
}


/*-----facilities-----*/

.facilities{
	width: 100%;
	margin: auto;
	text-align: center;
	padding-top: 65px;
   margin-bottom:40px ;
}
.facilities .row{
	margin-top: 5%;
	display: flex;
	justify-content: space-between;
}
.facilities-col{
	flex-basis: 44%;
	border-radius: 10px;
	margin-bottom: 5%;
	text-align: left;
}
.facilities-col img{
	width: 100%;
	border-radius: 10px;
}
.facilities-col p{
padding: 0;
font-size: 2rem;
}
.facilities h1{
   font-size: 4rem;
   color: var(--green);

}

.facilities-col h3{
   font-size: 3rem;
	margin-top: 16px;
	margin-bottom: 15px;
	text-align: left;
	color: #b70ca2;
 }

.order{
   background-image:linear-gradient(rgba(255, 241, 241, 0.7),rgba(206, 41, 19, 0.7)),url(images/off67.png);
   margin-bottom: 20px;
   padding: 0;
   padding-top: 20px;
}


.contact-container1{
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: space-evenly;
}
.contact-left{
   display: flex;
   flex-direction: column;
   align-items: start;
   gap: 20px;
   max-width: 90rem;
   border-radius: .5rem;
   box-shadow: var(--box-shadow);
   border: .1rem solid rgba(0,0,0,.2) ;
   background: #fff;
   padding: 1.5rem;
}
.contact-left-title h2{ 
   font-weight: 600;
   color: #a363aa;
   font-size: 40px;
   margin-bottom: 5px;
}

.contact-left-title hr{
   border: none;
   width: 200px;
   height: 5px;
   background-color:#a363aa ;
   border-radius: 10px;
   margin-bottom: 20px;
}
.contact-inputs{
   width: 400px;
   height: 50px;
   border: 1px solid #caa1c8;
   outline: none;
   padding-left: 25px;
   font-weight: 500;
   color: #666;
   border-radius: 30px;

}

.contact-left textarea{
   height: 140px;
   padding-top:15px ;
   border-radius: 20px;
}

.contact-inputs:focus{
   border: 2px solid #ff994f;
}

.contact-inputs::placeholder{
   color: #a9a9a9;
}

.contact-left button{
   display: flex;
   align-items: center;
   padding: 15px 30px;
   font-size: 16px;
   color: #fff;
   gap: 10px;
   border: none;
   border-radius: 50px;
   background: linear-gradient(270deg, #ff994f,#fa6d86);
   cursor: pointer;
}

.contact-left button img{
   height: 15px;
}

.contact-right img{
   width: 500px;
}

@media (max-width :800px){
   .contact-inputs{
       width: 80vw;
   }
   .contact-right{
       display: none;
   }
   .order{
      background-image:linear-gradient(rgba(255, 241, 241, 0.7),rgba(206, 41, 19, 0.7)),url(images/stat2.png);
      margin-bottom: 20px;
      padding: 0;
      padding-top: 20px;
   }
   
}

.contact{
	position:relative;
	min-height: 100vh;
	padding: 50px 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background-image: url(stat2.png);
	background-size: cover;
}
.contact .content {
	max-width: 800px ;
	text-align: center;
}
.contact .content h2{
	font-size: 46px;
	font-weight: 500;
	color: #800080;
	align-content: center;  
}
.contact .content p{
	font-size: 30px;
	font-weight: 300;
	color: #fff;
}
.container{
width: 100%;
display:flex;
justify-content:center;
align-items: center;
margin-top: 30px;
}
.container .contacInfo{
	width: 50%;
	display: flex;
	flex-direction: column;
}
.container .contactInfo .box{
	position: relative;
	padding: 20px 0;
	display: flex;
}
.container .contactInfo .box .icon{
	min-width: 60px;
	height: 60px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	font-size: 22px;
}
.container .contactInfo .box .icon img{
	width: 20px;
}
.container .contactInfo .box .text {
	display: flex;
	margin-left: 20px;
	font-size: 16px;
	color: #000000;
	flex-direction: column;
	font-weight: 300;
}
 .container .contactInfo .box .text h3{
 	font-weight: 500;
 	color: #800080;
 	text-align: left;
 }
 .map{
 	width: 100%;

 	margin-left: 25px;
 	
 	
 	
 }  
 .map iframe{
 	width: 100%;
 	height: 300px;
 }
 @media (max-width: 800px){
 .contactInfo {
 	align-items: center;
 } 
}
 @media (max-width: 920px){
 .contact{
 	padding: 50px; 

 }

 .container{
 	flex-direction: column;
 }
 .container .contactInfo{
 	margin-bottom: 40px;
 	align-self: center;
 }
 .container .contactForm{
 	width: 100%;
 }

}

/*--------Footer--------*/
footer{
	width: 100%;
	bottom: 0;
	background: linear-gradient(to right, #52063f, #f30ab5, #caa1c8);
	color: #fff;
	padding: 3px 0 4px;
	border-top-left-radius: 25px;
   border-top-right-radius: 25px;
   border-bottom-left-radius: 25px;
   border-bottom-right-radius: 25px;
   margin-top: 25px;
font-size: 13px;
line-height: 15px;
}
.row2{
	width: 85%;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}
.row2 .col{
	flex-basis: 25%;
	padding:20px; 
}
.row2 .col:nth-child(2), .col:nth-child(3){
	flex-basis: 15%;
}
.row2 .col .logo3{
   position: relative;
	font-size: 40px;
	line-height: 100px;
	font-weight: bold;
	color: transparent;
	-webkit-text-stroke:1px #fff;
	background: url(R.png);
	background-position: 0 0;
	animation: back 20s linear infinite;
}

@keyframes back{
	100%{
		background-position: 2000px 0;
	}
}

.col h3{
	width: fit-content;
	margin-bottom: 40px;
	position: relative;
}
.col0{
	flex-basis: 25%;
	padding:10px; 
}
.col0:nth-child(2), .col0:nth-child(3){
	flex-basis: 15%;
}
.row2 .col .logo{
	width: 170px;
	margin-bottom: 30px;
	padding-left: 50px;
}
.col0 h3{
	width: fit-content;
	margin-bottom: 40px;
	position: relative;
}
.email-id1{
	width: fit-content;
	border-bottom: 1px solid #ccc;
   text-transform: lowercase;
}
.email-id{
	width: fit-content;
	border-bottom: 1px solid #ccc;
	margin: 20px 0;
   text-transform: initial;
}
ul li{
	list-style: none;
	margin-bottom: 12px;

}
ul li a{
	text-decoration: none;
	color: #fff;
}
form{
	padding-bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #ccc;
	margin-bottom: 50px;
}
form .fa{
	font-size: 18px;
	margin-right: 10px;

}
form input{
	width: 100%;
	background: transparent;
	color: #ccc;
	border:0;
	outline: none;
}
form button{
	background: transparent;
	border:0;
	outline: none;
	cursor: pointer;
}
form button .fa{
	font-size: 16px;
	color: #ccc;
 
}
 
.sociall img{

	width: 40px;
	margin-right: 15px;
	cursor: pointer;

}
hr{
	width: 90%;
	border:0;
	border-bottom: 1px solid #ccc;
	margin: 20px auto;
}
.copyright{
	text-align: center;
}
.underline{
	width: 100%;
	height: 5px;
	background: #767676;
	border-radius: 3px; 
	position: absolute;
	top: 25px;
	left: 0;
	overflow: hidden;
}
.underline span{
	width: 15px;
	height: 100%;
	background:#fff;
	border-radius: 3px;
	position: absolute;   
	top: 0;
	left: 10px;
	animation: moving 2s linear infinite;
	
}
@keyframes moving{
	0%{
		left: -20px;

	}
	100%{
		left: 100%;
	}
}
@media (max-width: 1111px){
	.col0{
		display: none;
	}
}
@media (max-width: 700px){
	footer{
		bottom: unset;
	}
	.col{
	flex-basis: 100%;
	 
}
.col:nth-child(2), .col:nth-child(3){
	flex-basis: 15%;
}
}
@media (max-width: 550px){
	.social-icon{
		display: flex;
	}
}

.loader-container{
   position: fixed;
   top:0;  left: 0;
   height: 100%;
   width: 100%;
   z-index: 10000;
   background:#fff;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.loader-container img{
   width: 35rem;

}

.loader-container.fade-out{
   top: 110%;
   opacity: 0;
}








/*media queries*/
@media (max-width:991px){
   html{
      font-size: 55%;
   }
   header{
      padding: 1rem 2rem;
   }
   section{
      padding: 2rem;
   }
}

@media (max-width:792px){
   .home-slider{
      margin-top: 5rem;
   }
   }


@media (max-width:768px){
   header .icons #menu-bars{
display: inline-block;
   }
   header .navbar a{
      
      color: var(--box-shadow);
   }
   header{
      background-image: linear-gradient(rgba(214, 16, 125, 0.7),rgba(202, 183, 199, 0.7)),url(stat55.png);
   }
   header .navbar{
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: #fff;
      border-top: .1rem solid rgba(0,0,0,.2);
      border-bottom: .1rem solid rgba(0,0,0,.2);
      padding: 1rem;
      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;
      padding: 1.5rem;
      margin: 1rem ;
      font-size: 2rem;
      background: #eee;
   }
   #search-form #search-box{
      width: 90%;
      margin: 0 1rem;
   }
   .home .home-slider .slide .content h3{
      font-size: 5rem;
    }

}

@media (max-width:450px){
   html{
      font-size: 50%;
   }
   .dishes .box-container .box img{
      height: auto;
      width: 100%;
   }
   .order form .inputBox .input{
      width: 100%;
   }
  
}