@charset "utf-8";
/* CSS Document */

body{
	margin:0;
	padding:0;
	background-image:url("2025 Site/Backgrounds/Floral2.png");
	background-position: top,left;
	background-attachment: fixed; 
	background-repeat:no-repeat;
	background-size:cover;
}

#wrapper{
	position:absolute;
	top:0;
	left:0;
	width:100%;
}

.announcements{
	position:absolute;
	top:45%;
	right:10px;
	width:15%;
	z-index: 99999;
	background-color: #FFFFFF;
	text-align:center;
	padding:8px;
	opacity:.90;
	border: .5px solid black;
	display: none;
}

.announcements h2{
	font-family: 'DM Serif', serif;
	font-size: 1em;
	color:#B91A1D;
}

.announcements p{
	font-family: 'Roboto', sans-serif;
	font-size: .8em;
	color:#111111;
}


.header{
	position:relative;
	margin:0 auto;
	width:100%;
	height:90px;
	border-bottom:.5px solid black;
}

.homelogo{
	position:absolute;
	top:-20px;
	left:2%;
	width:13.5%;
	display: block;
}

.menu{
	position:relative;
	margin:110px 25%;
	width:45%;
	display: flex;
	justify-content: space-between;
	gap:20px; 
}

.menu a{
	padding:8px;
	flex:1;
	text-decoration:none;
	font-family:'Roboto', sans-serif;
	font-size: 1em;
	color:#222222;
	text-align: center;
	border:1px solid white;
	transition: all .5s ease;
}

.menu a:hover{
	border: 1px solid #222222;
}

.orderbtns{
	position:absolute;
	top:25px;
	right:5%;
	width:12%;
	display: flex;
	justify-content: space-between;
	gap:20px;
	flex-direction: column;
	z-index: 9999;
}

.orderbtns a:link{text-decoration: none;}

.rstcbtn{
	flex:1;
	padding:10px;
	background-color:#FDD006;
	text-align:center;
	text-decoration:none;
	color:#000000;
	font-family: 'Roboto', sans-serif;
	font-size: .9em;
	text-decoration:none;
	border-radius:50px;
	border:2px solid black;
	transition: .5s ease-in-out;
}

.rstcbtn:hover{
	box-shadow: 2px 2px 1px #000000;
}

.exbtn{
	padding:10px;
	background-color:#FF7100;
	text-align:center;
	text-decoration:none;
	color:#FFFFFF;
	font-family: 'Roboto', sans-serif;
	font-size: .9em;
	text-decoration:none;
	border-radius:50px;
	border:2px solid black;
	transition: .5s ease-in-out;
}

.exbtn:hover{
	box-shadow: 2px 2px 1px #000000;
}

.hmimage{
	position:relative;
	margin:0 auto;
	width:100%;
	height:650px; 
}

.texttagline{
	position:absolute;
	top:24%;
	left:6%;
	width:30%;
	z-index: 999999;
}

.texttagline h1{
	font-family: 'DM Serif', serif;
	font-size: 3em;
	color:#FFFFFF;
	text-shadow: 1px 1px 2px #000000;
}

.texttagline p{
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	color:#FFFFFF;
}

.sliderarea{
	position:relative;
	margin:0px auto;
	width:90%;
	height:400px;
	margin-bottom: 125px; 
}

.sliderarea a:link{
	text-decoration:none;
	color:#FF0000;
}

.sliderflex{
	position:relative;
	margin:0 auto;
	width:100%;
	display: flex;
	justify-content: space-between;
	gap:20px;
	align-items: center;
}

.sliderbox{dflex-basis: 33%;}

.flexleft{
	flex-basis:20%;
}

.flexright{flex-basis:80%;}

.sliderarea h2{
	font-family: 'DM Serif', serif;
	font-size: 2em;
	color:#222222;
	text-shadow: 1px 1px 2px #000000;
}

.sliderarea p{
	font-family: 'Roboto', sans-serif;
	font-size: .9em;
	color:#444444;
}

.reviewsection{
	position:relative;
	margin:150px auto;
	width:80%;
	text-align: center;
}

.footer{
	position:relative;
	bottom:0;
	left:0;
	width:100%;
	height:250px;
	background: linear-gradient(2deg,rgba(217, 217, 217, 1) 0%, rgba(255, 255, 255, 1) 45%, rgba(189, 189, 189, 1) 100%);
	border-top:5px solid #222222;
}

.footer a:link{
	text-decoration: none;
	color:#54B9F1;
}

.footer p{
	font-family: 'Roboto', sans-serif;
	font-size: .8em;
	color:#222222;
}

.footerflex{
	position:relative;
	margin:30px 20%;
	width:80%;
	display: flex;
	justify-content: space-between;
	gap:40px;
}

.footerflex img{margin:0 20px 0 20px;}

.footerbox{flex-basis:50%;}

#sidebar{display: none;}

/*CSS for menu page*/

.menuimage{
	position:relative;
	margin:0 auto;
	width:100%;
	height:450px;
	display: flex;
	background-image: url("2025 Site/Backgrounds/menudesk2.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size:cover;
}

.texttagline2{
	position:relative;
	margin: auto;
	width:30%;
	z-index: 999999;
}

.texttagline2 h1{
	font-family: 'DM Serif', serif;
	font-size: 3em;
	color:#FFFFFF;
	text-shadow: 1px 1px 2px #000000;
}

.texttagline2 p{
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	color:#FFFFFF;
}


.menusection{
	position:relative;
	margin:80px auto;
	width:90%;
	text-align: center;
}


/*CSS For catering*/

.cateringimage{
	position:relative;
	margin:0 auto;
	width:100%;
	height:450px;
	display: flex;
	background-image: url("2025 Site/Backgrounds/CateringDesk2.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size:cover;
}

.cateringcontent a:link{
	text-decoration: none;
	color:#FF0000;
}

.cateringcontent{
	position:relative;
	margin: auto;
	width:80%;
	text-align:center;
}

.cateringcontent h2{
	font-family: 'DM Serif', serif;
	font-size: 2em;
	color:#222222; 
}

.cateringcontent p{
	font-family: 'Roboto', sans-serif;
	font-size: .9em;
	color: #000000;
}




/*CSS for catering page*/

.cateringflex{
	position:relative;
	margin: 20px auto;
	width:80%;
	display: flex;
	justify-content: space-between;
	gap:20px;
}

.perlbcan{
	position:relative;
	margin:25px auto;
	width:80%;
	margin-bottom: 75px;
}

.perlbcan h2{
	font-family: 'DM Serif', serif;
	font-size: 2em;
	color:#222222;
}

.perlbcan p{
	font-family: 'Roboto', sans-serif;
	font-size: .9em;
	color: #000000;
}


.perlbflex{
	position:relative;
	margin:0 auto;
	width:100%;
	display:block;
	 
}

.lbbox{
	flex-basis:50%;
}

table{
	position:relative;
	margin:0 auto;
	wdith:100%;
	font-family: 'Roboto', sans-serif;	 
	font-size:.9em;
	color:#333333;
}

td,th{
	border: 1px solid red;
	text-alig:left;
	padding:8px;
	min-width:180px;
}

.color{
	background:red;
	font-family: 'Roboto', sans-serif;	 
	font-size:1em;
	color:#FFFFFF;
}

.mobscroll{display: none;}

/*CSS for about page*/

.aboutimage{
	position:relative;
	margin:0 auto;
	width:100%;
	height:450Px;
	display: flex;
	background-image: url("2025 Site/Backgrounds/AboutDesk.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size:cover;
}

.aboutcontent{
	position:relative;
	margin:0 auto;
	width:80%;
	text-align:center;
	margin-bottom:125px;
}

.aboutcontent h3{
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	color:#222222; 
}

.aboutcontent p{
	font-family: 'Roboto', sans-serif;
	font-size: .9em;
	color:#222222; 
}


/*CSS for contact page*/

.contactimage{
	position:relative;
	margin:0 auto;
	width:100%;
	height:450Px;
	display: flex;
	background-image: url("2025 Site/Backgrounds/ContactDesk.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size:cover;
}

.contactcontent{
	position:relative;
	margin:0 auto;
	width:60%;
	text-align:center;
	margin-bottom: 125px;
}

.contactcontent h2{
	font-family: 'DM Serif', serif;
	font-size: 2em;
	color:#222222; 
}

.contactcontent p{
	font-family: 'Roboto', sans-serif;
	font-size: .9em;
	color: #000000;
}


 


.mobhmimg{display: none;}
.mobimage{display: none;}
.mobcateringimage{display: none;}
.aboutmobimage{display: none;}



@media screen and (max-width:1680px){
	
	.sliderarea{margin:75px auto;}
	
.hmimage{
	position:relative;
	margin:0 auto;
	width:100%;
	height:495px; 
}

	
.homelogo{ 
	top:-20px;
	left:2%;
	width:15%; 
}
	
.texttagline h1{font-size: 2.6em;}	
	
}

@media screen and (max-width:1600px){
	
.homelogo{ 
	top:-20px;
	left:2%;
	width:16%; 
}
	
.hmimage{
	position:relative;
	margin:0 auto;
	width:100%;
	height:475px; 
}

	
.texttagline{
	position:absolute;
	top:22%;
	left:4%;
	width:35%;
	z-index: 999999;
}

	
}

@media screen and (max-width:1440px){
	
.homelogo{ 
	top:-20px;
	left:2%;
	width:18%; 
}

	
.orderbtns{ 
	top:25px;
	right:5%;
	width:15%; 
}
	
.hmimage{
	position:relative;
	margin:0 auto;
	width:100%;
	height:430px; 
}
.texttagline{
	position:absolute;
	top:19%;
	left:3%;
	width:35%;
	z-index: 999999;
}

.texttagline h1{font-size: 2.2em;}
.texttagline p{font-size: .9em;}	
	
}

@media screen and (max-width:1366px){
	
.hmimage{
	position:relative;
	margin:0 auto;
	width:100%;
	height:400px; 
}
.texttagline{
	position:absolute;
	top:19%;
	left:3%;
	width:35%;
	z-index: 999999;
}

.texttagline h1{font-size: 2.1em;}
.texttagline p{font-size: .9em;}
	
	
}

@media screen and (max-width:1280px){

.hmimage{
	position:relative;
	margin:0 auto;
	width:99.5%;
	height:370px; 
}
.texttagline{
	position:absolute;
	top:19%;
	left:3%;
	width:35%;
	z-index: 999999;
}

.texttagline h1{font-size: 2.1em;}
.texttagline p{font-size: .9em;}
	
.sliderarea{
	position:relative;
	margin:50px auto;
	width:90%;
	height:475px;
	margin-bottom: 25px; 
}

.footerflex{
	position:relative;
	margin:30px 20%;
	width:70%;
	display: flex;
	justify-content: space-between;
	gap:40px; 
}
 
	
}

@media screen and (max-width:1180px){
	
.homelogo{ 
	top:-10px;
	left:2%;
	width:19%; 
}
	
	
.orderbtns{ 
	top:25px;
	right:5%;
	width:16%; 
}
	
	
}

@media screen and (max-width:1076px){
	
.orderbtns a:link{text-decoration: none; font-size: .7em;}
	
.texttagline{
	position:absolute;
	top:18%;
	left:3%;
	width:35%;
	z-index: 999999;
}

.texttagline h1{font-size: 1.5em;}
.texttagline p{font-size: .8em;}
	
.sliderarea{
	position:relative;
	margin:0px auto;
	width:90%;
	height:475px;
	margin-bottom: 25px; 
}


	
}

@media screen and (max-width:1024px){
	
.orderbtns{ 
	top:25px;
	right:2%;
	width:18%; 
}
	
/*CSS For Home page flex*/
	
.texttagline{
	position:absolute;
	top:18%;
	left:3%;
	width:35%;
	z-index: 999999;
}

.texttagline h1{font-size: 1.8em;}
.texttagline p{font-size: .8em;}

	
	
}

@media screen and (max-width:820px){
	
	.sliderflex{flex-direction: column;}	
	.reviewsection{
	position:relative;
	margin:350px auto;
	width:80%;
	text-align: center;
}
	
	.mobhmimg{
		position:relative;
		margin:0 auto;
		width:100%;
		height:625px;
		display: block;
	}
	
	.hmimage{display: none;}
	
/*CSS for home page flex*/
	
.texttagline{
	position:absolute;
	top:22%;
	left:13%;
	width:75%;
	z-index: 999999;
}

.texttagline h1{font-size: 1.3em;}
.texttagline p{font-size: .9em;}
	
.sliderarea{
	margin:-50px auto;
	flex-direction:column;
	width:80%;
	margin-bottom:900px;
}

	
/*CSS for catering page*/

.perlbcan{width:100%;}
	
}

@media screen and (max-width:732px){
	
.header{
	position:relative;
	margin:0 auto;
	width:100%;
	height:150px;
	border-bottom:.5px solid black;
}

	
.hmimage{
	display: none;
}
	
.texttagline{
	position:absolute;
	top:20%;
	left:9%;
	width:75%;
	z-index: 999999;
	display: none;
}

.texttagline h1{font-size: 1em; color:#000000;}
.texttagline p{font-size: .8em; color:#000000;}

	
.homelogo{ 
	top:-10px;
	left:2%;
	width:32%; 
}

	
.menu{
	display: none; 
}

.orderbtns{
	top:20px;width:45%;
}
	
.sliderarea{
	position:relative;
	margin:-300px auto;
	width:90%; 
	margin-bottom: 500px; 
}

.sliderflex{
	position:relative;
	margin:0 auto;
	width:100%;
	display: flex;
	justify-content: space-between;
	gap:20px;
	align-items: center; 
}

.flexleft{
	flex-basis:100%;
}

.flexright{
	width:100%; 	
}

	
#sidebar{
	display:block;
	background:#444444;
	position:fixed;
	width:210px;
	right:-210px;
	top:0; 
	opacity:.90;
	height:100%;
	transition: right 0.3s linear;
	z-index: 9999999;
}
			
#sidebar.visible{
	right:0;
	transition: right 0.3s linear;
			}
			
#sidebar-btn{
	display:inline-block;
	vertical-align:middle;
	width:40px;
	height:15px;
	cursor:pointer;
	margin:15px;
	position:fixed;
	top:90px;
	right:240px;
	z-index: 99999999;
}
			
#sidebar-btn span{
	height:3px;
	background:#FD0006;
	box-shadow: none;
	margin-bottom:5px;
	display: block;
	z-index: 999999;
}
			
#sidebar-btn span:nth-child(2){width:100%;}
#sidebar-btn span:nth-child(3){width:100%;}
	
#sidebar ul{
	margin:0;
	padding:0;				
}
	
	nav{width:100%;}
			
ul li{list-style:none; padding-top:10px; padding-bottom:10px; width:190px;}
	
ul li a{
	font-family:'Roboto', sans-serif;
	font-size:1em;
	font-weight:600;
	color:#FFFFFF;
	border-bottom:.25px solid #FFFFFF;
	display:block;
	width:200px;
	padding:15px 0 15px 10px;
	text-decoration:none; 
}
	
ul li a:hover{width:200px;}

	
/*CSS FOR MENU PAGE*/
	
	.menuimage{display: none;}
	
.mobimage{
	position:relative;
	margin:0 auto;
	width:100%;
	height:400px;
	display: flex;
	background-image: url("2025 Site/Backgrounds/MenuMobile2.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size:cover;
}
	
.menusection{width:100%;}
	
/*CSS for catering page*/
	
	.cateringimage{display: none;}
	
.mobcateringimage{
	position:relative;
	margin:0 auto;
	width:100%;
	height:450Px;
	display: flex;
	background-image: url("2025 Site/Backgrounds/CateringMob2.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size:cover;
}

	
.perlbcan{width:90%;}

#mobcateringmenu{
		position:relative;
		margin:50px auto;
		width:98%;
		overflow:auto;
		white-space: nowrap;
		display:block;
	}
	
	.mobscroll{
		display:block;
		font-family: 'Roboto', sans-serif;
		font-size:1em;
		font-weight: 600;
	}
	
/*CSS for about page*/
	
	.aboutimage{display: none;}
	
.aboutmobimage{
	position:relative;
	margin:0 auto;
	width:100%;
	height:400px; 
	display: flex;
	background-image: url("2025 Site/Backgrounds/AboutMob2.jpg");
	background-position:center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size:cover;
}

	
.aboutcontent img{width:60%;}
	.footer{height:460px;}
	.footerflex{
		margin:30px auto;
		flex-direction: column;
		width:80%;
	}
	.footerbox{flex-basis:100%;}

	
	
}

@media screen and (max-width:452px){
	
	.sliderarea{
	position:relative;
	margin:-350px auto;
	width:90%; 
	margin-bottom: 500px; 
}

	
	.texttagline{display: none;}	
	
	
}