*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    color: white;
}
@font-face {
    font-family: 'Manrope';
    src: url(/static/font/Manrope-VariableFont_wght.ttf);
}

@font-face {
    font-family: 'faculty-glyph';
    src: url(/static/font/FacultyGlyphic-Regular.ttf);
}

@font-face {
    font-family: 'Galvji';
    src: url(/static/font/galvji.ttf);
}

body{
    background-color: var(--black);
}
ul li{
    font-family: 'Manrope';
    font-size: 16px;
    margin-left: 20px;
}
.spacer{
    width: 100%;
    height: 50px;
}

 hr{
    margin: 10px 0;
 }
 .w-50{
    width: 50%;
 }
.w-80{
    width: 80%;
}
.t-c{
    text-align: center;
}
.mt-50{
    margin-top: 50px;
}
.mb-2 {
    margin-bottom: 2%;
}

.mb-5 {
    margin-bottom: 5%;
}
.my-25{
    margin: 25px 0;
}
.my-50{
    margin: 50px 0;
}
.my-5{
    margin: 5px 0;
}
.p-5{
    padding: 5px;
}
.p-10{
    padding: 10px;
}
.p-25{
    padding: 25px;
}
.px-100{
    padding: 0 100px;
}
.px-50{
    padding: 0 50px;
}
.mb-25{
    margin-bottom: 25px;
}
.my-b-25{
    margin: 25px 0;
}
.mb-10{
    margin-bottom: 10px;
}
.galvji{
    font-family: 'Galvji'
}

.orange{
    color: var(--orange);
}
.link{
    padding: 8px 20px;
    border: 1px solid white;
    border-radius: 10px;
    text-decoration: none;
    font-size: 16px;
    font-family: 'faculty-glyph';
    transition: 0.35s ease;
}
.link:hover{
    background: var(--brand);
    border: 1px solid var(--brand);
}
h1{
    font-family: 'faculty-glyph';
    font-size: 60px;
    font-weight: 900;
    line-height: 90px;
}
h2{
    font-family: 'faculty-glyph';
    font-size: 36px;
    font-weight: 900;
    line-height: 54px;
}
h3{
    font-family: 'faculty-glyph';
    font-size: 25px;
    font-weight: 900;
    line-height: 36px;
}
h4{
    font-family: 'faculty-glyph';
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}
h5{
    font-family: 'faculty-glyph';
    font-size: 18px;
    line-height: 27px;
    font-weight: 600;
}
h6{
    font-family: 'faculty-glyph';
    font-size: 12px;
    font-weight: 500;
}
p{
    font-family: 'Manrope';
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

:root {
    --brand:#5A54A4;
    --dark:#4f498d;
    --orange:#F6841F;
    --white:#fff;
    --black:#1B1B1B;
}

.brand{
    color: var(--brand);
}
.bg-brand{
    background: var(--brand);
}
.bg-black{
    background: rgb(41, 41, 41);
}

.top-header{
    display: flex;
    justify-content: center;
    background-color: var(--orange);
    padding: 7px 50px;
}
.top-header p{
    font-size: 14px;
    text-decoration: none;
    font-family: 'Manrope';
    font-weight: 400;
    animation: move 1s linear infinite;
}
 @keyframes move {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

header{
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #165e7218 ;
    display: flex;
    justify-content: space-between;
    z-index: 100;
    align-items: center;
    padding: 0 50px;
    position: absolute;
    overflow: hidden;
}
.mobilemenu{
    display:none;
}
.logo{
    width: 20%;
    display: flex;
    align-items: center;
}
.logo img{
    width: 80px;
    padding: 5px;
}
.button{
    padding: 10px 20px;
    font-family: 'Manrope';
    background-color: var(--brand);
    border: none;
    border-radius: 10px;
    text-transform: uppercase;
    width: auto;
    transition: 0.4s ease;
    text-decoration:none;
    font-size: 14px;
}

nav{
    width: 60%;
    display: flex;
    justify-content: space-between;
}

nav ul{
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    align-items: center;
}
nav ul li{
    list-style: none;
    padding: 15px;
}
nav ul li a{
    font-family: 'faculty-glyph';
    text-decoration: none;
    color: white;
    font-weight: 500;
    font-size: 15px;
}
.active{
    color: var(--orange) !important;
}
nav ul li .relative{
    cursor:pointer
}
.relative{
    position: relative;
}
.submenu{
    padding-top: 60px;
    position: fixed;
    display: flex;
    flex-direction: column;
    top: -100%;
    height: max-content;
    width: auto;
    align-items: baseline;
    z-index: -1 !important;
    background-color: rgba(0,0,0,0.3);
    transform: translateX(-10px);
}
.relative:hover .submenu{
    top: 40px;
}

.relative:hover header{
    overflow: auto;
}

.header-icon{
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    
}
#cart{
    display: none;
}
.header-icon img{
    height: 20px;
    align-self: center;
}
.header-icon ul{
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-end;
}
.header-icon ul li{
    padding: 0 10px;
}
footer{
    position: relative;
}
footer>:first-child{
    padding: 50px;
}
footer .dgr-4{
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    column-gap: 40px;
}

footer ul li{
    list-style: none;
    margin: 20px 0;
}
footer ul li a{
    text-decoration: none;
    font-family: 'Manrope';
    font-size: 15px;
}

.footerlogo{
    width: 100px;
}
.siteinfo>*{
    margin-bottom: 10px;
}
.social-icon{
    width: 20px;
    height: 20px;
}
.copyright{
    background-color: #000;
    text-align: center;
    padding: 5px 0;
    font-size: 13px;
}

.banner{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 80px;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color: #00000083;
    /* background: url(/static/Images/banner.webp); */
}
.banner1{
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    padding: 0 80px;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.banner2{
    padding-top: 90px;
}
.banner2 img{
    width: 100%;
    height: auto;
}

.banner img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: top;
    z-index: -1;
}

.banner1 img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: top;
    z-index: -1;
}
.banner h1{
    margin: 25px 0;
}

.banner p{
    width: 50%;
    margin-bottom: 25px;
}
button{
    padding: 15px 20px;
    font-family: 'faculty-glyph';
    background-color: var(--brand);
    border: none;
    border-radius: 10px;
    text-transform: uppercase;
    width: auto;
    transition: 0.4s ease;
}
button:hover{
    background-color:var(--dark);
}
.container{
    width: 100%;
    padding: 80px 50px;
    position: relative;
    overflow: hidden;
}
.container-fluid{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.d-fl{
    display: flex;
    gap:5px;
}
.d-fl .button {
    height: fit-content;
    padding: 15px;
    border-radius: 4px;
    margin-top: .8rem;
}

#ot-reservation-widget .ot-dtp-picker .ot-button{
    background-color:#5a54a4 !important;
    padding:15px;

}
.d-flex{
    display: flex;
    column-gap: 10px;
}
.fl-direction{
    flex-direction: column;
    justify-content: center;
}
.justify-evenly{
justify-content: space-evenly;
}
.g-2{
    column-gap: 20px;
}
.align-center{
    align-items: center;
}
.justify-between{
    justify-content: space-between;
}
.justify-center{
    justify-content: center;
}
.gap-40{
    gap: 40px;
}
.dgr-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.gap-2{
    gap:20px
}
.dgr-3{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 40px;
}
.dgr-4{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 20px;
}
.accent{
    position: relative;
}
.accent::after{
    content: "";
    width: 50px;
    height: 2px;
    background: var(--orange);
    position: absolute;
    bottom: -10px;
    left: 0;
    transition: 0.5s ease;
}
.accent:hover:after{
    transform: translateX(20px);
}
.category{
    width: 100%;
    height: 250px;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}
.category img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.category h3{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
    left: 0;    
    transition: 0.3s ease;
    z-index: 2;
}
.category p{
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: -20px;
    left: 0;  
    transition: 0.4s ease-in-out;
    z-index: 2;
}
.category:hover h3{
    transform: translateY(-25px);
    
}
.category:hover p{
    transform: translateY(-35px);
}
.category::after{
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(90, 84, 164, 0.9), rgba(90, 84, 164, 0.1));
    position: absolute;
    top: 100%;
    left: 0;
    transition: 0.4s ease-in-out;
}
.category:hover:after{
    top: 0;
}

#readtext{
    text-align: center;
    height: auto;
    width: 100%;
    overflow: hidden;
    padding: 80px 50px;
    align-items: center;
    background-color: rgb(41, 41, 41);
}

.slider-container {
    display: flex;
    overflow: hidden;
    width: 100%;
    position: relative;
    justify-items: flex-start;
    gap: 20px;
    scrollbar-width: none;
    overflow-x: scroll;
}
.dish img{
    width: 100%;
}

.menu-bg{
    background: var(--brand) !important;
    border: 1px solid var(--brand);
}
.review{
    min-width: 23%;
}
.dish {
    min-width: 22%;
    height: max-content;
    box-sizing: border-box;
    padding: 30px 20px;
    background:rgb(41, 41, 41);
    border-radius: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}


.dishimg{
    max-height: 200px;
    max-width: 200px;
}

#prev, #next {
    background: #333;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
}
.dishimg50{
    width: 50%;
}
strike{
    color: red;
}
#prev{
    position: absolute;
    top: 40%;
    left: 0;
}
#next{
    position: absolute;
    top: 40%;
    right: 0;
}
.dish1 {
    min-width: 22%;
    box-sizing: border-box;
    padding: 20px;
    background:rgb(41, 41, 41);
    border-radius: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}
.tag {
    position: absolute;
    top: 5%;
    left: -38%;
    rotate: -45deg;
    background: red;
    width: 100%;
}

.shape{
    width: 50px;
    height: 50px;
    border-radius: 8px;
    background-color: var(--brand);
}
.abtleft {
    background: #292929;
    padding: 70px;
    border-radius: 20px;
    height: 100%;
    overflow: hidden;
    transform: translateX(-20px);
}

.left{
    padding: 50px 70px 50px 70px;
    background:rgb(41, 41, 41);
    border-radius: 20px;
    transform: translateX(-20px);
}
.left>*{
    margin: 25px 0;
}
.right{
    border-radius: 20px;
    overflow: hidden;
    transform: translateX(20px);
}
.right img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#centerlogo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    padding: 20px;
    background: var(--brand);
    z-index: 5;
}
.icon{
    width: 200px;
    transition: 0.5s ease-in-out;
}
.icon:hover{
    scale: 1.1;
}

.special-img{
    width: 95%;
    padding: 10px;
    border-radius: 40px;
    background-color: rgb(41, 41, 41);
    transform: translateX(40px);
    align-items: center;
    display: flex;
}
.o-h{
    overflow: hidden;
}
.special-img img{
    width: 100%;
    border-radius:30px;
}
.week-special{
    padding-left: 80px;
}
.week-special>div>*{
    padding: 20px 0 20px 20px;
}
.item{
    padding: 20px;
    border-radius: 20px;
    transition: 0.5s linear;
    background: transparent;
}
.item:hover{
    background: linear-gradient(to right, rgba(90, 84, 164, 0.9),rgba(90, 84, 164, 0.1), rgba(27, 27, 27, 0.1),  rgba(27, 27, 27, 1));
}
.line{
    position: relative;
}
.line::after{
    content: "";
    position: absolute;
    mask-image: url(https://wdt-sizzlefood.myshopify.com/cdn/shop/t/2/assets/dashed.svg?v=41077589470370601921718102772);
    mask-repeat: repeat-x;
    mask-size: auto;
    width: 100vw;
    height: 2px;
    bottom: 0;
    top: 0;
    margin: auto;
    background-color: #fff;
    animation: pricing-border 30s infinite linear;
}
.fe-price{
    background-color: #1b1b1b;
    z-index: 1;
}
.map{
    border-radius: 40px;
    overflow: hidden;
}
.map>*{
    width: 100%;
    border-radius: 40px;
}
.form{
    background-color: rgb(41, 41, 41);
    border-radius: 40px;
    padding: 20px;
    text-align: center;
}
.form form{
    justify-content: center;
    flex-direction: column;
    display: flex;
    gap: 40px ;
}

.form form input{
    padding: 15px;
    border: 0px solid red;
    outline: 1px solid gray;
    background: transparent;
    border-radius: 10px;
    width: 100%;
    font-size: 15px;
}
.form form input:focus{
    border: 1px solid var(--brand);
    outline: none;
}
#subscribeform{
    position: relative;
    width: 80%;
    display: flex;
    align-items: center;
}
#subscribeform div {
    width: 100%;
    display: flex;
    align-items: center;
}
#subscribeform input{
    padding: 15px;
    border: 0px solid red;
    outline: 1px solid gray;
    background: transparent;
    border-radius: 10px;
    width: 100%;
    font-size: 20px;
}
#subscribeform button{
    position: absolute;
    right: 20px;
    font-size: 15px;
    color: white;
    padding: 10px;
    transition: 0.5s ease;
}
#subscribeform button:hover{
    background-color: white;
    color: var(--brand);
}




@keyframes pricing-border {
    0%{
        -webkit-mask-position-x: 0%;
    }
    
    100% {
        -webkit-mask-position-x: 100%;
    }
}
.vission-mission .icon{
    height: 100px;
    margin-bottom: 25px;
}

.icon1{
    height: 50px;
    border: 1px solid orange;
    padding: 5px;
    border-radius: 50%;
}
.formimage{
    padding: 20px;
    border-radius: 40px;
    background: url(/static/Images/Rectangle_194.webp);
    background-position: center;
    background-size: cover;
    height: 100vh;

}
#contactform{
    padding: 25px;
}
#contactform input{
    width: 100%;
    padding: 15px;
    font-size: 15px;
    background: transparent;
    border-radius: 10px;
    outline: none;
    border: 1px solid rgb(41, 41, 41);
    margin: 15px 0;
    transition: 0.5s ease;
}
#contactform textarea{
    width: 100%;
    padding: 15px;
    font-size: 15px;
    background: transparent;
    border-radius: 10px;
    height: 100px;
    outline: none;
    border: 1px solid rgb(41, 41, 41);
    margin: 10px 0;
}
#contactform input:focus{
    outline: none;
    border: 1px solid var(--brand);
    box-shadow: rgba(90, 84, 164, 0.2) 0px 7px 29px 0px;
}
#contactform textarea:focus{
    outline: none;
    border: 1px solid var(--brand);
    box-shadow: rgba(90, 84, 164, 0.2) 0px 7px 29px 0px;
}
.contact .icon1{
    width: 70px;
    height: 70px;
    padding: 15px;
}
.rating{
    display: flex;
    gap: 5px;
}
.rating img{
    width: auto;
}
.flex-start{
    justify-content: flex-start;
}
.gallery .pr-img{
    padding: 0 20px 20px 0;
    background-color: rgb(41, 41, 41);
    margin-bottom: 20px;
}
.gallery .pr-img img{
    width: 100%;
}
.gallery .images{
    display: flex;
    gap: 10px;
    overflow: hidden;
}
.gallery .images img{
    width: 100px;
    }
.description>*{
    margin-bottom: 20px;
}
.menucat{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--brand);
    padding: 5px 10px;
    margin: 25px 0;
    border-radius: 10px;
}
.menucat img{
    width: 40px;
    cursor: pointer;
    transition: 0.3s ease;
}
.menucat img:hover{
    background-color: rgb(41, 41, 41);
    border-radius: 50%;
    padding: 5px;
}
.rotated{
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}
.menucategory{
    background-color: rgb(41, 41, 41);
    border-radius: 10px;
    gap: 20px;
    position: relative;
    padding: 5px 20px;
    overflow: hidden;
    height: 60px;
    margin: 20px 0;
}
.down{
    display: block;
    padding: 2px;
    cursor: pointer;
    z-index: 2;
}
.menutype{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.menutype img{
    width: 80px;
}

.menucategory .heading{
    display: flex;
    justify-content: space-between;       
}
.caticon{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background:var(--brand);
}
.heading h4{
    font-family: 'manrope';
    font-size: 16px;
    line-height: 24px;
}
.menuitem{
    margin: 10px 0;
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.5);
    padding: 10px 0;
}
.menuitem1{
    display: flex;
    gap: 20px;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
    padding: 10px;
}
.menuitem1>div:first-child{
    width: 20%;
    border-radius: 50%;
    display: flex;
    align-items: center;

}
.menuitem1>*:last-child{
    width: 80%;
}
.menuitem1 > :first-child img{
    width: 100%;
    border-radius: 50%;
    background-color: gold;

}

.marking{
    background-color: var(--brand);
    padding:2px 4px;
    border-radius: 5px;
height: fit-content;
}
.menuitem a, .menuitem1 a{
    text-decoration: none;
}
.flex-price {
  display: flex;
  justify-content: space-between;
}
.flex-price h5 {
  width: 75%;
}
.menutype input[type="radio"]{
    display: none;
}

.menutype label {
    display: inline-block;
    padding: 5px 10px ;
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--brand);
    font-family: 'faculty-glyph';
    text-align: center;
    font-size: 12px;
    margin: 0 5px;
    }

.menutype input[type="radio"]:checked + label {
    background-color: rgb(41, 41, 41);
    border: 1px solid #F6841F;
    }

.filter input[type="radio"], .filter input[type="checkbox"] {
    display: none;
}
  
/* Style the labels to look like buttons */
.filter label {
display: inline-block;
padding: 5px 10px ;
border-radius: 5px;
cursor: pointer;
background-color: var(--brand);
font-family: 'faculty-glyph';
text-align: center;
font-size: 12px;
margin: 0 5px;
}

/* Change the appearance of selected buttons */
.filter input[type="radio"]:checked + label {
background-color: rgb(41, 41, 41);
border: 1px solid #F6841F;
}

.filter input[type="checkbox"]:checked + label {
background-color: rgb(41, 41, 41);
border: 1px solid #F6841F;
}


/* Optional: Hover effect */
.filter label:hover {
background-color: rgb(41, 41, 41);
}
.terms li {
    margin-left: 20px;
    font-family: Manrope;
    margin-top: 5px;
  }

.img-gallery{
    display: flex;
    gap: 10px;
    overflow-x: scroll;
    scrollbar-width: none;
}
.img-gallery img{
    width: 250px;
}
.ourgallery{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 50px;
    gap: 20px;
}
.ourgallery img{
    width: 100%;
}
.abtsherri{
    width: 100%;
    height: auto;
    position: relative;
    margin: 50px 0;
}
.abtsherri .right{
    width: calc(100% - 20px);
}
.d-none{
    display: none;
}
.footer-logo{
    position: absolute;
    bottom: 50px;
    right: 50px;
    display: flex;
    gap: 10px;
}
.footer-logo img{
width:50px
}
.dual{
    display: flex;
}
.dual .content{
    flex: 75%;
    padding: 1rem 1rem 1rem 2rem;
}
.dual .sidebar{
    flex: 35%;
    padding: 2rem;
    border-left: 1px solid white;
}
.booktable {
  padding: 10px 20px;
  font-family: 'Manrope';
  background-color: var(--brand);
  border: none;
  border-radius: 10px;
  text-transform: uppercase;
  width: auto;
  transition: 0.4s ease;
  text-decoration: none;
  font-size: 14px;
  position: fixed;
  bottom: 13px;
}
.booktable1 {
  padding: 10px 20px;
  font-family: 'Manrope';
  background-color: var(--brand);
  border: none;
  border-radius: 10px;
  text-transform: uppercase;
  width: auto;
  transition: 0.4s ease;
  text-decoration: none;
  font-size: 14px;
  position: fixed;
  bottom: 60px;
}

.event-detail {
    display: flex;
    width: 100%;
    gap: 20px;
}
.event-box {
    flex: 50%;
    text-align: end;
    position: relative;
}
.event-box video{
    width: 350px;
    aspect-ratio: 9/16;
}
.event-box p {
    position: absolute;
    left: 50%;
    top: 5%;
    background-color: #4f498d;
    padding: 10px;
    font-size: 20px;
    font-weight: 700;
}
.event-detail .description{
    flex:30%;
    align-self: end;
}
.event-card{
    border-radius: 20px;
    background-color: var(--black);
    padding: 40px;
    box-shadow: rgba(90, 84, 164, 0.2) 0px 7px 29px 0px;
    transition: 0.35s linear;
}
.event-card>*{
    margin: 5px 0;
}
.event-card:hover{
        box-shadow: rgba(90, 84, 164, 0.5) 0px 7px 29px 0px;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
}
#registrationform{
    max-width: 600px;
    border: 0.6px solid rgb(148, 148, 148);
    border-radius: 40px;
    padding: 40px;
}
#registrationform input{
    width: 100%;
    padding: 15px;
    font-size: 15px;
    background: transparent;
    border-radius: 10px;
    outline: none;
    border: 1px solid rgb(41, 41, 41);
    margin: 15px 0;
    transition: 0.5s ease;
}
/* popup */
@keyframes flicker {

    0%,
    100% {
        filter: drop-shadow(0 0 5px #ffcc00) drop-shadow(0 0 10px #ff9900);
        opacity: 1;
        transform: scale(1);
    }

    50% {
        filter: drop-shadow(0 0 12px #ffcc00) drop-shadow(0 0 18px #ff9900);
        opacity: 0.9;
        transform: scale(1.05);
    }
}

.diya-flicker {
    animation: flicker 1.5s ease-in-out infinite;
}

/* Subtle Background Texture Shift (adds sparkle/movement) */
@keyframes texture-shift {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}

/* -------------------------------------------
           2. BASE LAYOUT & OVERLAY
           ------------------------------------------- */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    z-index: 1000;
    font-family: 'Inter', sans-serif;
    backdrop-filter: blur(2px);
    /* Increased blur for dramatic effect */
}
.t-black{
    color:black
}

.popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* -------------------------------------------
           3. POPUP CONTENT (PURPLE & GOLD THEME)
           ------------------------------------------- */
.popup-content {
    /* Combined Background: Pattern + Deep Purple Gradient */
    background-image: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.08) 1px, transparent 1%),
        linear-gradient(135deg, #FFFFFF, #FFFFFF);
    background-size: 20px 20px, 100% 100%;
    animation: texture-shift 60s linear infinite;
    /* Slow sparkle animation */

    border: 4px solid #ffcc00;
    border-radius: 16px;
    max-width: 90%;
    width: 500px;
    padding: 30px;
    /* Enhanced Glow: More prominent gold Diya glow */
    box-shadow: 0 0 40px 8px rgba(255, 153, 0, 1), 0 0 40px 15px rgba(58, 1, 94, 0.7);
    position: relative;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-align: center;
    color: #fff;
}

.popup-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image:
        /* Multiple radial gradients for randomized, gold-colored points of light */
        radial-gradient(circle at 20% 70%, #ffcc00 2px, transparent 0),
        radial-gradient(circle at 80% 30%, #ff9900 1px, transparent 0),
        radial-gradient(circle at 50% 10%, #fff 1px, transparent 0),
        radial-gradient(circle at 30% 90%, #ffcc00 1px, transparent 0),
        radial-gradient(circle at 95% 55%, #ff9900 2px, transparent 0);
    background-repeat: repeat;
    background-size: 150px 150px;
    /* Control spacing of the points */
    animation: texture-shift 120s linear infinite, cracker-pop 1.2s infinite alternate;
    /* Slower shift, faster popping */
    filter: brightness(1.5);
    opacity: 0.15;
}

/* Active content animation */
.popup-overlay.active .popup-content {
    transform: scale(1);
}

/* 4. Gold Gradient Text for Luxury Look */
.gold-gradient {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    /* Extra bold for visibility */
    color: transparent;
    background-image: linear-gradient(180deg, #fff2c4, #ffc72c, #daa520);
    /* Light to dark gold */
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
}

/* 5. Close Button */
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    color: #ffcc00;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 0 8px;
    transition: color 0.2s;
    outline: none;
}

.popup-close:hover {
    color: #fff;
}

#fireworksCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 500;
}


@media screen and (max-width: 992px) {
    .top-header{
        display: none;
    }
    header{
        background-color: #000;
        z-index: 10;
    }
    .mobilemenu{
        display: block;
        flex: 20%;
        position: relative;
    }
    .mobilemenu ul{
        list-style: none;

    }
    .mobilemenu #close{
        display: none;
    }
    .mobilemenu img{
        width: 20px;
        cursor: pointer;
    }
    #menu, #close{
        z-index: 3;
    } 
    .mobile-menu{
        position: fixed;
        top: 0;
        left: -100%;
        width: 50%;
        height: 100%;
        padding: 80px 40px;
        z-index: -1;
        background-color: #000;
        transition: 0.5s ease-in-out;
    }
    .mobile-menu li{
        margin: 10px 0;
    }
    .mobile-menu li a{
        margin: 10px 0;
        text-decoration: none;
        font-family: 'faculty-glyph';
        font-size: 14px;
    }
    #searchform input {
        width: 100%;
        padding: 5px;
    }
    #searchform button {
        width: 100%;
        padding: 5px;
        border-radius: 5px;
        font-size: 13px;
        font-family: 'faculty-glyph';
    }
    
    nav{
        display: none;
    }
    .logo{
        flex: 60%;
        display: flex;
        justify-content: center;
    }
    #search{
        display: none;
    }
    h1{
        font-size: 36px;
        line-height: 54px;
    }
    
    .logo{
        width: 50%;
    }
    .dgr-4{
        grid-template-columns: 1fr 1fr;
    }
    .dgr-2{
        grid-template-columns: 1fr;

    }
    .form{
        padding: 20px;
        border-radius: 20px;
    }
    .banner{
        justify-content:center;
    }
    .banner h1{
        margin: 10px 0;
    }
    .banner img{
        height: 100%;
    } 
    .dgr-3{
        column-gap: 20px;
    }
    .dgr-4{
        gap: 20px;
    }
    .container-fluid{
        height: auto !important;
    }
    .left{
        padding: 20px;
        transform: translateX(0);
    }
    .right{
        transform: translateX(0);
    }
    #centerlogo{
        display: none;
    }
    .week-special{
        padding: 0;
    }
    .special-img{
        width: 100%;
        transform: translateX(0);
    }
    .filter label{
        margin: 5px;
    }
    .menutype img{
        width: 50px;
    }
    .menutype label{
        margin: 5px;
    }
    .menucategory{
        padding: 5px;
    }
    .m-none{
        display: none;
    }
    .d-none{
        display: block;
    }
.dual {
        display: block;
    }
    .dual .content, .dual .sidebar{
        padding: 1rem;
    }

  }
  
@media screen and (max-width: 600px) {
    h2{
        font-size: 25px;
    }

    h3{
        font-size: 22px;
    }
    h4{
        font-size: 16px;
    }
    h5 {
        font-size: 14px;
    }
    .top-header{
        display: none;
    }
    header{
        padding: 5px 20px;
        background-color: #000;
    }
    .mobile-menu{
        padding: 80px 20px;
        z-index: -1;
        background-color: #000;
    }
    .container{
        padding: 15px;
    }
    .dgr-4{
        grid-template-columns: 1fr;
    }
    .dgr-3{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .d-gr2{
        grid-template-columns: 1fr;
    }
    .d-flex{
        flex-wrap: wrap;
    }
    #sherriusp .d-flex{
        flex-wrap: nowrap;
    }

    header{
        width: 100%;
        padding: 0 20px;
    }
    footer .dgr-4{
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    footer>:first-child{
        padding: 15px;
    }
    footer ul li{
        margin: 5px 0;
    }
    .special-img{
        width: 100%;
        transform: translateX(0);
    }
    .px-50, .px-100{
        padding: 10px;
    }
    .week-special>div>*{
        padding: 10px 0;
    }
    .item{
        margin: 20px 0;
        padding-left: 10px !important;
    }
    .banner{
        padding: 20px;
        height: 60vh;
    }
    .banner p{
        width: 100%;
    }
    #readtext{
        padding: 20px;
    }
    .gap-40{
        gap: 10px;
    }
    .link{
        font-size: 15px;
    }
    .dish{
        min-width: 48%;
    }
    .dish>*{
        margin-bottom: 0;
    }
    .dish .button {
        display: block;
        margin-top: 10px;
        padding: 10px 15px;
        font-size: 12px;
        text-decoration: none;
      }
    .gap-2{
        gap:20px;
    }
    .form form{
        gap: 20px;
    }
    .banner1{
        height: 40vh;
    }
   
    .banner1 img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-position: top;
        z-index: -1;
        object-fit: cover;
    }
    .mb-p-10{
        padding: 10px;
    }
    .dishimg{
        max-height: 100px;
    }
    .img-gallery{
        overflow: scroll;
        width: max-content;
    }
    .img-gallery img{
        width: 100px;
    }
    .w-80{
        width: 100%;
    }
    #subscribeform{
        width: 100%;
    }
    .dish1 .d-flex{
        flex-wrap: nowrap;
    }
    #subscribeform input{
        padding: 10px;
        font-size: 16px;
    }
    #subscribeform button{
        font-size: 14px;
    }
    .gallery .pr-img{
        padding: 0;
    }
    .description>*{
        margin-bottom: 5px;
    }
    .dgr-4{
        grid-template-columns: 1fr 1fr;
    }
    .slider-container{
        gap: 10px;
    }
    .abtleft{
        transform: translateX(0);
        padding: 10px;
    }
    .vission-mission{
        padding: 50px 10px;   
    }
    .vission-mission .icon {
        height: 80px;
        margin-bottom: 10px;
      }
    .m-none{
        display: none;
      }
      .d-none{
        display: block;
    }
    .review{
	min-width: 48%;
    }
.menuitem1{
gap:10px;
padding:5px
}
.footer-logo{
right:10px;
}
.event-detail {
    display: flex;
    flex-direction: column;
    }
    .event-detail .description {
    align-self: start;
    }
    .event-box video{
    width: 100%;
	aspect-ratio:12/16;
    }
    .event-box p {
        left: 0;
        top:20px;
        font-size: 15px;
        font-weight: 400;
        padding: 5px 10px;
    }
    .my-20{
        margin: 20px 0;
    }
    .event{
        position: relative;
    }
    .mobile-submenu{
        position: absolute;
        left: -100%;
    }
 #registrationform{
        width: 100%;
        border-radius: 20px;
        padding: 10px;
    }
    .event-card{
        width: 100%;
        padding: 20px;
    }
}