@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap");
body{
margin:0;
font-family:'Playfair Display', serif;
background:url('assets/4f755212-e420-4c12-939b-482ae5fc69ca.jpeg');
background-size:cover;
color:white;
scroll-behavior:smooth;
}
nav{display:flex;justify-content:space-between;padding:15px;background:black;position:fixed;width:100%;z-index:10;}
.nav-logo{width:40px;margin-right:10px;}
.nav-left{display:flex;align-items:center;}
a{color:white;margin:10px;text-decoration:none;}
.btn{background:red;padding:10px 20px;border-radius:5px;}
.hero{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;}
.watermark{position:absolute;opacity:0.3;width:400px;}
section{padding:100px 20px;text-align:center;}
.about{background:black;}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;}
.card{border:1px solid gold;padding:20px;width:200px;transition:0.3s;}
.card:hover{transform:scale(1.05);}
.menu-item{display:flex;justify-content:space-between;border-bottom:1px solid gold;padding:10px;}
.qty{display:flex;align-items:center;}
.qty button{margin:0 5px;}
.float-btn{position:fixed;bottom:20px;right:20px;background:red;padding:15px;border-radius:50%;}


/* CLEAN FINAL MENU */
.menu-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:15px;
padding:20px;
}

.menu-card{
background:rgba(255,255,255,0.05);
border:1px solid gold;
padding:15px;
border-radius:10px;
text-align:center;
}

.order-btn-bottom{
display:block;
margin:40px auto;
padding:14px 30px;
background:red;
color:white;
border:none;
border-radius:8px;
}


.hero-content {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.hero-title {
  font-size: 64px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 2px;
}

.hero-subtitle {
  font-size: 18px;
  margin: 10px 0 20px;
  color: #ddd;
}

.hero-btn {
  background: linear-gradient(135deg, #ff1e1e, #ff4d4d);
  padding: 12px 28px;
  border: none;
  color: #fff;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button, .btn, .hero-btn {
  background: linear-gradient(135deg, #ff1e1e, #ff4d4d);
  transition: all 0.3s ease;
}

button:hover, .btn:hover, .hero-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(255, 0, 0, 0.4);
}

button:active {
  transform: scale(0.95);
}

.order-section {
  text-align: center;
  margin-top: 30px;
}

.order-final {
  font-size: 18px;
  padding: 14px 30px;
}

.menu-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 20px;
  margin: 15px 0;
  transition: 0.3s ease;
}

.menu-item:hover {
  transform: scale(1.02);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.hero-logo{width:120px;margin-bottom:15px;}
.hero-logo{
display:block;
margin:0 auto 20px;
width:140px;
}

#menu{margin-bottom:40px;}


/* MOBILE NAV FIX */
@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 15px;
  }

  .nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  nav div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  }

  nav a {
    font-size: 14px;
  }

  .btn {
    padding: 8px 16px;
    font-size: 14px;
  }
}


/* FINAL MOBILE NAV FIX */
@media (max-width: 768px) {
  nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  nav div:last-child {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  nav a {
    margin-right: 10px;
  }

  .btn {
    margin-left: auto;
  }
}


/* CLEAN MOBILE NAV ALIGNMENT */
@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .nav-left {
    justify-content: center;
  }

  nav div:last-child {
    justify-content: center;
    gap: 15px;
  }

  .btn {
    margin-top: 10px;
  }
}


/* PERFECT MOBILE NAV (FINAL) */
@media (max-width: 768px) {
  nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
  }

  .nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  nav div:last-child {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  nav a {
    font-size: 12px;
  }

  .btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}


/* TRUE CLEAN MOBILE NAV FIX */
@media (max-width: 768px) {
  nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .nav-left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  nav div:last-child {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 8px;
  }

  nav div:last-child .btn {
    flex-basis: 100%;
    text-align: center;
    margin-top: 5px;
  }
}


/* FINAL TIGHT MOBILE POLISH */
@media (max-width: 768px) {
  nav {
    padding: 10px;
  }

  nav div:last-child {
    width: 100%;
    justify-content: center;
  }

  nav a {
    text-align: center;
  }

  .btn {
    width: 90%;
    max-width: 320px;
    margin: 10px auto 0;
    display: block;
  }
}


/* FINAL ALIGNMENT FIX (LEFT LOGO + TITLE) */
@media (max-width: 768px) {
  .nav-left {
    justify-content: flex-start !important;
    width: 100%;
  }

  nav {
    align-items: flex-start !important;
  }
}


/* FINAL MICRO ALIGNMENT (SHIFT LEFT) */
@media (max-width: 768px) {
  nav {
    padding-left: 8px;
    padding-right: 8px;
  }

  nav div:last-child {
    justify-content: flex-start;
    padding-left: 10px;
  }

  .btn {
    margin-left: 10px;
    margin-right: auto;
  }
}


/* FIX NAV SHIFT AGAIN */
@media (max-width:768px){
  nav{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding-left:12px;
  }

  .nav-left{
    justify-content:flex-start;
  }

  nav div:last-child{
    width:100%;
    display:flex;
    justify-content:center;
  }

  .btn{
    display:block;
    margin:10px auto 0;
  }
}


/* APPLY POPPINS */
body, p, a, button, span, div {
  font-family: 'Poppins', sans-serif;
}

/* GOLD THEME */
.btn, button {
  background: #c9a86a !important;
  color: #000 !important;
}

button:hover, .btn:hover {
  background: #e5c88a !important;
}

/* TEXT SECONDARY */
p, span {
  color: #e5e5e5;
}

/* BORDERS GOLD */
.menu-card, .menu-item {
  border: 1px solid #c9a86a !important;
}


/* FORCE BACKGROUND FIX */
html, body {
  background: url('./assets/bg.jpg') no-repeat center center fixed !important;
  background-size: cover !important;
}

/* KEEP HERO BLACK */
.hero {
  background: #000 !important;
}


/* FIX TEXT VISIBILITY */
section:not(.hero):not(.about) {
  color: #000 !important;
}

section:not(.hero):not(.about) p,
section:not(.hero):not(.about) span,
section:not(.hero):not(.about) h2,
section:not(.hero):not(.about) h3 {
  color: #000 !important;
}

/* KEEP NAVBAR WHITE */
nav, nav a {
  color: #fff !important;
}

/* KEEP ABOUT WHITE */
.about {
  color: #fff !important;
}


/* FINAL GUARANTEED MOBILE FIX */
@media (max-width: 768px) {

  nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .nav-left {
    width: 100%;
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
  }

  nav ul, 
  nav div:last-child {
    width: 100%;
    display: flex;
    justify-content: center !important;
    align-items: center;
    gap: 20px;
  }

  .btn {
    display: block !important;
    margin: 12px auto !important;
  }

  .video-container,
  .video-wrapper,
  .album,
  .gallery {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
  }

  video {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* HARD VIDEO CENTER FIX */
@media (max-width:768px){

  .album, .gallery, .video-container, .video-wrapper {
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
  }

  video {
    width:90% !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:block !important;
  }

  /* remove any left shift */
  .album > *, .gallery > * {
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* PREMIUM BLUR OVERLAY */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 0;
}

/* ensure content stays above */
body > * {
  position: relative;
  z-index: 1;
}