body { 
    display: flex;
    position: relative;
    width: 400px;
    height: 860px;
    margin: auto;
    font-family: 'Poppins', sans-serif;
    color: #535353;
    border: 10px rgb(0, 0, 0) solid;
    border-top-width: 20px;
    border-bottom-width: 20px;
    border-radius: 10px;

}

#splash {
    background-image:url(../images/SPLASH/splashbg.jpg);
    width: 390px;
    height: 844px;
    margin: 0 auto 0 auto;
    z-index: 0;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
}

.home {
    overflow-y: auto;
}


.splashcontainer {
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    height: 70%;
}


.foelogo {
    width: 233px;
    margin-top:270px;
    margin-left: 75px;
}

/* .splashbutton {
    width: 200px;
    height: 50px;
    text-align: center;
    margin:auto;
    border-radius: 25px;
    cursor: pointer;
    background: linear-gradient(to right, #8a5eab, #ff0000);
    border: 0px;
    box-shadow:  0px 3px 5px rgba(0, 0, 0, 0.244) ;
    font-family: 'futura';
    font-weight: 540;
    color: white;
} */

.splashbutton:hover {
        color: #8fec1d ;
        background-color: white;
        border: 4px solid #6cf24a;
}

.foetext {
    text-align: center;
    color: rgb(0, 0, 0);
    font-size: 25px;
    font-family: 'Poppins';
    font-weight: 200;
    margin-left: -15px;

}

.covid-19 {
    max-width: 90%;
    position: relative;
    align-items: center;
    display: flex;
    top: 102px;
    left: 20px;

    border-radius: 20px; /* Optional rounded corners */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.027), 0 0 30px rgba(0, 123, 255, 0.285);
    pointer-events: none;
    user-select: none;
}

.tap-header {
    font-size: 20px;
    font-weight: bolder;
    position: relative;
    align-items: center;
    display: flex;
    top: 102px;
    left: 140px;
    pointer-events: none;
    user-select: none;
}


/* page 2 */

/* .foetext2 {
    color: #000000;
    font-size: 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    margin-left: 50px;
    top: -90px;
} */ */

/* #landing {
    width: 390px;
    height: 702px;
    margin: 0 auto 0 auto;
    background-color: white;
    z-index: 0;
    border-radius: 10px;

} */


/* .mainnav {
    width: 100%;
    margin-top: 0px;
} */

/* Center the header content */
.mainnav {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center;    /* Center items horizontally */
    justify-content: center; /* Center items vertically */
    padding: 20px;
    background-color: #f4f4f4; /* Light gray background */
    height: 200px; /* Set a height for the header */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Style the logo */
.account {
    width: 150px; /* Default size */
    height: auto;
    margin-bottom: 10px; /* Spacing between the logo and text */
    transition: all 0.3s ease-in-out; /* Smooth transitions */
}

/* Style the text */
.foetext2 {
    font-size: 1.5rem; /* Default size */
    font-weight: 600;
    color: #333;
    text-align: center;
    transition: all 0.3s ease-in-out; /* Smooth transitions */
    margin-top: -70px;
    margin-left: 60px;
}

.foetext3 {
    position: relative;
    font-size: 1.5rem; /* Default size */
    font-weight: 600;
    color: #333;
    text-align: center;
    transition: all 0.3s ease-in-out; /* Smooth transitions */
    margin-top: 0px;
    margin-left: 60px;
}





.hamburger {
    width: 50px;
    height: 50px;
    justify-content: space-between;
    margin: auto;
    margin-right: 30px;
}

.logo {
    height: 50px;
    margin: auto 0px auto 30px;
    justify-content: space-between;
}

.logo2 {
    width: 90px;
    height: 30px;
    margin: auto 0px auto 30px;
    justify-content: space-between;
}


.logo3 {
    width: 90px;
    height: 50px;
    margin: auto 0px auto 30px;
    justify-content: space-between;
}

.account {
    
    width: 90px;
    justify-content: space-between;
    margin-left: 10px;
    margin-top: 10px;
    padding: 1px;
}

.section2h2 {
    font-size: 35px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
}

.section2p{   
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
margin-top: 40px;  
  font-size: 25px;
  margin-left: 41px;
}

.header2, p {
    top: 20px;
}



/* rest1  */


#logo1>h1:hover {
    color: #9f0404;
}

#logo2>h1:hover {
    color: #9f0404;
}

#logo3>h1:hover {
    color: #9f0404;
}

#logo1 {
    left: 10px;

    height: 190px;
    width: 350px;
    background-image: url(../images/crispy/withlogo.png);
    margin: 20px auto;
    display: flex;
    flex-direction: row;
}

#logo2 {
    left: 10px;

    height: 190px;
    width: 350px;
    background-image: url(../images/fivevines/withlogo.png);
    margin: 20px auto;
    display: flex;
    flex-direction: row;
}

#logo3 {
    left: 10px;

    height: 190px;
    width: 350px;
    background-image: url(../images/ceviche/withlogo.png);
    margin: 20px auto;
    display: flex;
    flex-direction: row;
}

.logo-landing {
    background-color: rgba(255, 255, 255, 0.731); /* Semi-transparent white background */
    border-radius: 15px; /* Apply rounded corners */
    display: inline-block; /* Make the anchor tag behave like a block-level element for padding */
    padding: 10px; /* Add padding around the image */
    text-decoration: none; /* Remove underline from the link */
    max-height: 70%;
    width: 40%;

    backdrop-filter: blur(7px); /* Apply a blur effect to the background */
    margin-top: -5px;

  }
  
  .landing-logo {
    margin-top: 15px;   
    border-radius: 12px; /* Apply rounded corners to the image itself */
    display: block; /* Ensure the image behaves as a block element */
    width: 300px; /* Adjust image size to fit inside the container */
    max-width: 100px; /* Optional: Set a max width for the image */
  }



#logo1>h3 {
    position: relative;
    backdrop-filter: blur(10px); /* Apply a blur effect to the background */

    color: rgb(255, 255, 255);
    font-weight: 500;
    letter-spacing: 1px;
    right: 80px;
    margin-top: 160px;

    border-radius: 8px 8px 8px 8px;
    min-width:90%;
    min-height: 15%;
    
}



#logo2>h3 {
    position: relative;

    backdrop-filter: blur(10px); /* Apply a blur effect to the background */

    color: rgb(255, 255, 255);
    font-weight: 500;
    letter-spacing: 1px;
    right: 80px;
    margin-top: 160px;
    border-radius: 10px 10px 10px 10px;
    min-width:90%;
    min-height: 15%;

}

#logo3>h3 {
    position: relative;

    backdrop-filter: blur(10px); /* Apply a blur effect to the background */

    color: rgb(255, 255, 255);
    font-weight: 500;
    letter-spacing: 1px;
    right: 80px;
    margin-top: 160px;
    border-radius: 10px 10px 10px 10px;
    min-width:90%;
    min-height: 15%;}




#rest1 {
    width: 390px;
    height: 702px;
    margin: 0 auto 0 auto;
    background-color: white;
    border-radius: 20px;
 
}

#rest2 {
    width: 390px;
    height: 702px;
    margin: 0 auto 0 auto;
    background-color: white;
    border-radius: 20px;

}

#rest3{
    width: 390px;
    height: 702px;
    margin: 0 auto 0 auto;
    background-color: white;
    border-radius: 20px;
      
}


.span1 {
    font-weight: 800;
    text-transform: uppercase;
    color: #9f0404;
}



.header1 {
    height: 72px;
    width: 390px;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
 
}

.whitebg {
    background-image: url(../images/reserve/bg.png);
    margin-top: -55px;
}

.bgimg {
    background-image: url(../images/crispy/mainbanner.jpg);
    width: 390px;
    height: 244px;
    background-size: cover;
}

.bgimg2{
    background-image: url(../images/fivevines/mainimg.jpg);
    width: 390px;
    height: 244px;
    background-size: cover;
}

.bgimg3{
    background-image: url(../images/h&s/main1.png);
    width: 390px;
    height: 244px;
    background-size: cover;
}

.landingh1 {
    color: #555555;
    text-align: center;
    text-transform: capitalize;
    font-family: 'Poppins';
    font-size: 24px;
    padding: 10px;
}

.location {
    display: flex;
    flex-direction: row;
    width: 360px;
    margin: -25px auto;
}

.location>img {
    margin-left: 10px;
}

.locationtext {
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    color: #555555;
    font-weight: 400;
    margin: auto;
}

.crispytext {
    width: 360px;
    height: 120px;
    margin: 25px auto;
    display: flex;
    flex-direction: row;
}


.crispytextp {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #555555;

}

.reservebtn {
    border-radius: 5px;
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 10px;
    width: 96px;
    height: 24px;
}

.reservebtn:hover {
    background-color: #ff7272;
}

.reservebutton {
    margin: 10px auto 0px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.cfsp {
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 12px;
    color: #535353;
    margin-top: 15px;
}

.chefimg{
    display: flex;
    flex-direction: column;
}

.chefimg>img {
    margin: auto;
}

.contentchef {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.contentchef >h3 {
    margin: 10px auto;
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 14px;
    color: #535353;
}

.contentp {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    color: #555555;
    width: 360px;
}

.contentdiv {
display: flex;
justify-content: space-around;
margin-top: -15px;
}




/* specials */

.specials {
    width: 390px;
    height: 703px;
    margin: 0px auto 0 auto;
    background-color: white;
    overflow-y: auto;
}

.spimg {
    background-image: url(../images/crispy/mainbanner2.jpg);
    width: 390px;
    height: 237px;
    margin-bottom: 20px;
}

.whitebg2 {
    width: 390px;
    height: 494px;
    background-image: url(../images/reserve/bg.png);
    margin-top: -60px;
}

.tsp {
    text-align: center;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    color: #555555;
    padding-top: 10px;
}

.spfood {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-bottom: 55px;
}

.food1 {
    width: 151px;
    height: 182px;
}

.pfood {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    margin-top: -2px;
}

.h3food {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: #535353;
    margin-top: 5px;
    margin-bottom: 5px;
}

.contentspecials {
    display: flex;
    flex-direction: column;
}

.h3fooddiv {
    display: flex;
    flex-direction: row;
}

.ratediv {
    display: flex;
    flex-direction: row;
    width: 100%;

}

.ratediv>p {
    margin: 25px auto 5px auto;
    text-align: center;

}

.h3food1 {
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 14px;
    color: #f2994a;
    margin-left: 20px;
}



.spfood2 {
    margin-top: 40px;
}


/* footer */

.footer1 {
    height: 71px;
    width: 390px;
    background-color: #ff0000;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-radius: 20px 20px 20px 20px;

}

.footerimg {
    width: 20px;
    margin: auto;
}

.reserveicon {
    width: 18px;
    margin: auto;
}

.icons {
    display: flex;
    flex-direction: column;
    padding: 4px;
    letter-spacing: 1.5px;
    width: 30%;
    border-radius: 15px 20px 20px 15px;

}

.iconstext {
    margin:-10px auto 10px auto;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: rgb(255, 255, 255);
}

.homeBtn {
    color: #ffffff;
    font-size: 12px;
}




/**************** reservation **************/
/* 
.bgimg1 {
    background-image: url(../images/reserve/bg.png);
    height: 703px;
    width: 390px;
    overflow-y: auto;
}

.h1reserve {
    font-family: 'Poppins', sans-serif;
    color: #555555;
    margin-left: 25%;
    font-size: 24px;
}


#rest1 .reservations .sectionContainer {
    color: #9f0404;
    margin-top: 70px;
    
}

#rest1 .reservations h2 {
    border-bottom: solid 1px #9f0404;
    text-align: center;
}

#rest1 input,
#rest1 select,
#rest1 textarea {
    border-color: #868686;
    font-family: 'Poppins', sans-serif;
    padding: 10px;
    display: flex;
    flex-direction: column;
    width: 70%;
}

#rest1 input:focus,
#rest1 select:focus,
#rest1 textarea:focus {
    outline: none;
    background: rgba(237, 0, 0, 0.05);
    font-family: 'Poppins', sans-serif;
}

#rest1 .reserve1 {
    border-color: #fff;
    color: #fff;
    background: #9f0404;
    padding:10px 30px;
    width: 30%;
    margin-left: 20%;
}

#rest1 .reserve1:hover {
    border-color: #000000;
    color: #9f0404;
    background: #fff;
}

form>p {
    margin-left: 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    
}

.submitbtn {
    text-align: center;
    
}

.requests {
    text-align: center;
    margin-bottom: 5px;
}

.requestbox {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: auto;
}

.required {
    margin-left: 30px;
    font-size: 16px;
    font-weight: 600;

} */


#menu  {
    margin: 110px auto;
    position: absolute;
    z-index: 100;
    backdrop-filter: blur(10px);
    width: 392px;
    height: auto;
}


#menu header {
    padding: 15px;
    border-bottom: solid 5px #fff;
    border: 5px solid #ffffff74;
    background-color: white;
    color: #535353;
    font-size: 25px;
    line-height: 100%;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.menuBtn {
    padding: 20px;
    background: #ffffff;
    font-size: 18px;
    line-height: 100%;

}

.menuBtn:hover {
    padding: 22px;   
    background-color: #9f0404;
}

.menuBtn img {
    width: 25px;
    height: auto;
    float: left;
    margin-top: -1px;
}

.menuBtn span {
    display: block;
    margin-top: 2px;
    margin-left: 50px;
    font-size: 16px;
}

.menuBtn:hover span {
    color: #f4f4f4;
    display: block;
    margin-top: 2px;
    margin-left: 50px;
    font-size: 16px;
}


/* smartphone */

/* .smartphone {
    position: absolute;
    width: 390px;
    height: 835px;
    transform: translateX(-50%);
    margin: 30px auto 0 auto;
    border: 10px rgb(0, 0, 0) solid;
    border-top-width: 20px;
    border-bottom-width: 20px;
    border-radius: 36px;
    z-index: 100;
    left: 50%;
    pointer-events: none;
} */

/* .bgdiv {
    position: absolute;
    width: 390px;
    height: 865px;
    margin: 30px auto 0 auto;
    border-radius: 36px;
    z-index: -1;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    background-color: #ffffff;
} */


.divreserve {display: flex;
flex-direction: row;
}



/* rest2  */


.spimg2 {
    background-image: url(../images/fivevines/spmain.png);
    width: 390px;
    height: 237px;
    margin-bottom: 20px;
}

.span2 {
    color: #024d03;
    font-weight: 800;
    text-transform: uppercase;
}

.reservebtn2 {
    border-radius: 5px;
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 10px;
    width: 96px;
    height: 24px;
}

.reservebtn2:hover {
    background-color: #024d03;
    color: white;
}

.header22 {
    height: 72px;
    width: 390px;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
}

.footer11 {
    height: 71px;
    width: 390px;
    background-color: #1d8d10;
    display: flex;
    border-radius: 10px 10px 10px 10px;
    flex-direction: row;
    justify-content: space-around;
    box-shadow: 0px 4px 10px rgba(102, 255, 173, 0.774); /* Adds a subtle shadow */
}

.h3food2 {
    font-family: 'mont';
    font-weight: 700;
    font-size: 14px;
    color: #007a3b;
    margin-left: 20px;
}

/* rest3  */



.header3 {
    height: 72px;
    width: 390px;
    background-color: #ffffff;
    display: flex;
    flex-direction: row;
}

.footer3 {
    height: 71px;
    width: 390px;
    background-color: #6f12cc;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.span3 {
    color: #6f12cc;
    font-weight: 800;
    text-transform: uppercase;
}

.reservebtn3:hover {
    background-color: #9412cc;
    color: white;
}


.reservebtn3 {
    border-radius: 5px;
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 10px;
    width: 96px;
    height: 24px;
}

.h3food3 {
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 14px;
    color: #4c007b;
    margin-left: 20px;
}

.spimg3 {
    background-image: url(../images/h&s/chef.png);
    width: 390px;
    height: 237px;
    margin-bottom: 20px;
}


/* rest 3 reservation */

.reservations {
    height: 703px;
    width: 390px;
    display: flex;
    flex-direction: column;
    background-image: url(../images/reserve/bg.png);
    background-color: rgb(255, 255, 255);

}

.reservemain {
    display: flex;
    flex-direction: column;
    margin: 20px auto;
}

.date {
    display: flex;
    flex-direction: row;
}

input,
select,
textarea {
    border-color: #868686;
    font-family: 'Poppins', sans-serif;
    padding: 5px;
    display: flex;
    flex-direction: column;
}

.ppppp {
    margin: 20px 10px 0px 10px;
}


.date2 {
    margin-right: 25px;
}

.selectguest {
    width: 95%;
}

input,
select {
    margin: 10px 0px 0px 0px;
    width: 95%;
}

.requestbox {
    width: 95%;
    margin: 10px auto;
    height: 100px;
}

.times {
    width: 120%;
}

.submitbtn {
    width: 40%;
    margin: 20px auto;
    text-align: center;
    height: 35px;
}

.emailbox {
    width: 98%;
}

.required {
    margin-bottom: -10px;
}

.h1reserve {
    text-align: center;
    color: #535353;
    margin-bottom: 0px;
}

.sectionContainer {
    display: flex;
    flex-direction: column;
}

.reserve1:hover {
    border-color: #000000;
    color: #8b12cc;
    background: #fff;
}

/* confirmation page */

.confirmed1 {
    width: 390px;
    height: 703px;
    background-image: url(../images/reserve/bg.png);
}

.conformdiv {
    display: flex;
    flex-direction: column;

}

.conh11 {
    font-family: 'Poppins';
    font-weight: 400;
    font-size: 18px;
    text-align: center;
    color: #535353;
    width: 80%;
    margin: 150px auto 10px auto;
}

.imgcon {
    height: 226px ;
    width: 226px;
    margin: 10px auto;
}
.conh22 {
    font-family: 'Poppins';
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    color: #ff0000;
}   

.conp {
    width: 80%;
    text-align: center;
    font-size: 14px;
    margin: auto;
}


/* RESERVE PAGE FOR 1,2 & CONFORMATION PAGE */

.confirmed2 {
    width: 390px;
    height: 703px;
    background-image: url(../images/reserve/bg.png);
}

.confirmed1 {
    width: 390px;
    height: 703px;
    background-image: url(../images/reserve/bg.png);
}

.confirmed {
    width: 390px;
    height: 703px;
    background-image: url(../images/reserve/bg.png);
}



/* subtmit button rest 1,2,3 */
#reserve3 {
    font-family: 'Poppins';
    font-size: 14px;
}

#reserve3:hover {
    border: 2px solid #9f0404;
    border-radius: 5px;
}

#reserve2 {
    font-family: 'Poppins';
    font-size: 14px;
}

#reserve2:hover {
    border: 2px solid #0088ff;
    border-radius: 5px;
}

/* contact page */

#contact2 {
    width: 390px;
    height: 710px;
    position: absolute;
    background-color: #00407A;
    margin: 110px auto;
    z-index: 0;
    top: 0%;

}







/* Light sweep effect for div */
.light-sweep-div {
    position: relative;
    display: inline-block; /* Ensures the effect works correctly */
    overflow: hidden; /* Ensure the effect stays within the div bounds */
    background-color: #333; /* Default background color */
    margin: 10px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Add a subtle shadow */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* Smooth transition for shadow and scale */
  }
  
  .light-sweep-div:hover {
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.7); /* Hover shadow with a neon effect */
    transform: scale(1.05); /* Slight scale-up on hover */
  }

  .light-sweep-div h1 {
    position: relative;
    z-index: 2; /* Ensure content stays above the sweep effect */
    margin: 0;
    padding: 10px;
    font-size: 2rem;
  }
  
  
/* Updated Light Sweep Animation with Gap */
.light-sweep-div::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* Start off-screen */
    width: 100%;
    height: 100%;
    background: linear-gradient(
      120deg,
      rgba(255, 10, 10, 0) 30%, /* Transparent edges */
      rgba(255, 255, 255, 0.663) 50%, /* Bright center */
      rgba(255, 255, 255, 0) 70%
    );
    transform: skewX(-20deg); /* Adds a dynamic skew */
    animation: sweep 10s ease-in-out infinite; /* Increased duration to account for gap */
    z-index: 1; /* Place above div background */
    pointer-events: none; /* Ensure it doesn't interfere with div functionality */
}

@keyframes sweep {
    0% {
        left: -100%; /* Start off-screen */
        opacity: 0; /* Invisible at the start */
    }
    20% {
        opacity: 1; /* Gradually appear */
    }
    50% {
        left: 100%; /* Sweep across */
        opacity: 1; /* Fully visible */
    }
    70% {
        opacity: 0; /* Gradually disappear */
    }
    100% {
        left: 100%; /* Hold off-screen */
        opacity: 0; /* Invisible before restarting */
    }
}

  
  /* Optional styling for .restro1, .restro2, and .restro3 */
  .restro1, .restro2, .restro3 {
    border-radius: 10px;
    text-align: center;
  }
  
  .bgcolor {
    color: #fff;
  }