:root {
  --black: #000;
  --mustard: #d7cd00;
  --cream: #f7f4ef;
  --white: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  color: var(--black);
  line-height: 1.7;
  background:#f5f2ed;    
}

h1, h2, h3, h4, h5, h6, h7 {
  font-family: var(--font-main);
  font-weight: 700;
  margin: 0;
  padding: 0; 
  color: var(--mustard);
}

h1{
 color: #000;    

}
section {
  padding: 100px 20px;
}

.container {
  max-width: 1440px;
  margin: auto;
}

.textcenter{text-align:center !important;}

/* HEADER */
header {
  background: var(--black);
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  height: 80px;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
}

nav a {
  text-decoration: none;
  color: var(--white);
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 14px;
}

nav a:hover {
  color: var(--mustard);
}
/* MOBILE MENU BUTTON */

.menu-toggle {
  display: none;
  font-size: 28px;
  color: var(--white);
  cursor: pointer;
}

/* MOBILE STYLES */

@media (max-width: 900px) {

  .menu-toggle {
    display: block;
  }

  nav {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    background: var(--black);
    display: none;
  }

  nav.active {
    display: block;
  }

  nav ul {
    flex-direction: column;
    gap: 0;
    text-align: center;
  }

  nav ul li {
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  nav a {
    display: block;
    padding: 16px;
    font-size: 16px;
  }

}
/* HERO */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 50px;
}

.hero h1 {
  font-size: 56px;
  margin-bottom: 20px;
}

.hero span {
  color: var(--mustard);
}

.button {
  display: inline-block;
  background: var(--mustard);
  color: var(--black);
  padding: 14px 28px;
  text-decoration: none;
  margin-top: 25px;
  font-weight: 500;
}

.button:hover {
  opacity: 0.85;
    color: #fff; 
}

/* DARK SECTION */
.dark {
  background: var(--black);
  color: var(--white);
}

.dark h2 {
  color: var(--mustard);
}

/* MENU + HOURS GRID */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
    width: 100%;
  gap: 60px;
}

/* FLOATING BUTTONS */
.floating {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.floating a {
  background: var(--mustard);
  color: var(--black);
  padding: 12px 16px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

/* FOOTER */
footer {
  background: var(--black);
  color: var(--white);
  text-align: center;
  padding: 30px 0;
  font-size: 14px;
    text-align: left;
}

/* RESPONSIVE */
@media(max-width: 900px) {
  .hero, .grid-2 {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 42px;
  }
}

/* ==============================
   BACK TO TOP BUTTON
   ============================== */
#backToTop {
  position: fixed;
  bottom: 35px;
  right: 35px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
   background: var(--asphalt-grey);
  color: #FFF !important;    
  box-shadow:
  0 0 12px rgba(212,160,23,0.55),
  0 0 28px rgba(212,160,23,0.35);
    
  font-size: 1.4rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 10000;
}

#backToTop:hover {
 background: var(--deep-black);
  color: #FFF !important;  
  box-shadow:
    0 0 12px rgba(239,108,60,0.45),
    0 0 28px rgba(173,69,46,0.25);
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* hidden default state */
#backToTop:not(.show) {
  transform: translateY(60px);
}

/* mobile tweaks */
@media (max-width: 600px) {
      
    #backToTop {
    width: 44px;
    height: 44px;
    bottom: 25px;
    right: 20px;
    font-size: 1.2rem;
  }
}


@keyframes bounceUp {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ============================================================
   GLIGHTBOX – HARLEY THEME OVERRIDES
   ============================================================ */

.glightbox-clean .gslide-description {
    background: transparent;
}

.glightbox-clean .gclose,
.glightbox-clean .gnext,
.glightbox-clean .gprev {
    color: #fff;
    opacity: 0.85;
}

.glightbox-clean .gclose:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gprev:hover {
    color: var(--ember-orange);
    opacity: 1;
}

.glightbox-container {
    background: rgba(0,0,0,0.95);
}

.glightbox img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 20px;
}

.contact-item i {
    font-size: 0.85rem;
    opacity: 0.85;
    min-width: 14px;
}

.contact-item.whatsapp i {
    color: #25D366;
}

@media (max-width: 768px) {

    .footer .container {
        grid-template-columns: 1fr;
        text-align: center;
        font-size: 1em;
    }
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .testimonial-list {
        grid-template-columns: 1fr;
    }
 

    .site-header .logo img {
        height: 48px;
    }
}

.chat-buttons {
    position: fixed;
    bottom: 100px;
    right: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.chat-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-btn img {
    width: 28px;
    height: 28px;
}

.chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
}

.chat-btn.whatsapp {
    background: #25D366;
    color: #FFF !important;
}

.chat-btn.messenger {
    background: #0084FF;
    color: #FFF !important;
}

@media (max-width: 600px) {
    .chat-buttons {
    position: fixed;
    bottom: 25px;
    left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
}

.chat-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.chat-btn img {
    width: 28px;
    height: 28px;
}

.chat-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
}

.chat-btn.whatsapp {
    background: #25D366;
    color: #FFF !important;
}

.chat-btn.messenger {
    background: #0084FF;
    color: #FFF !important;
}
} 

.hours {
  
}

.day {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 1em;
}

.day span:first-child {
  font-weight: 500;
}

.closed {
  color: #d4a017;
  font-weight: 500;
}

.gallery {
  padding: 60px 0;
    
}

.gallery-grid {
  max-width: 1440px; 
  margin: 0 auto;    
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.gallery-grid a {
  display: block;
  overflow: hidden;
  border-radius: 6px;
}

.gallery-grid img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-grid img:hover {
  transform: scale(1.08);
}

/* Responsive */

@media (max-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid img {
    height: 180px;
  }
}

/* =====================================================
MENU TABS
===================================================== */

.menu-tabs{
display:flex;
gap:10px;
margin-bottom:30px;
flex-wrap:wrap;
justify-content:center;
}

.tab-btn{
padding:10px 18px;
background:#eee;
border:none;
cursor:pointer;
font-weight:600;
border-radius:6px;
transition:all 0.2s ease;
}

.tab-btn:hover{
background:#ddd;
}

.tab-btn.active{
background:#000;
color:#fff;
}

.tab-content{
display:none;
}

.tab-content.active{
display:block;
} 
    
    
/* =====================================================
MENU SYSTEM
===================================================== */

.menu-list{
list-style:none;
padding:0;
margin:0;
}

.menu-list li{
display:grid;
grid-template-columns:40px 1fr 40px 180px;
gap:15px;
align-items:start;
padding:18px 10px;
border-bottom:1px solid rgba(255,255,255,0.08);
}

.menu-number{
font-size:13px;
opacity:0.5;
}

.menu-img img{
width:160px !important;
height:120px;
object-fit:cover;
border-radius:8px;
}

.menu-info{
display:flex;
flex-direction:column;
gap:10px;
min-width:0;
}

.menu-item{
font-weight:600;
font-size:1em;
line-height:1.35;
}

.menu-option-name{
font-size:1em;
opacity:0.85;
line-height:1.35;
}

.menu-price-wrap{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:6px;
}

.menu-price{
font-weight:600;
font-size:1em;
line-height:1.35;
min-height:21px;
}

.menu-price.empty-price{
visibility:hidden;
}

.menu-option-price{
font-size:0.9em;
opacity:0.90;
line-height:1.35;
text-align:right;
min-height:18px;
}

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

.menu-list li{
grid-template-columns:20px 1fr 25px 120px;
gap:10px;
}

.menu-img img{
width:50px;
height:50px;
}

.menu-item{
font-size:15px;
}

.menu-option-name{
font-size:12px;
}

.menu-option-price{
font-size:12px;
}

.menu-price{
font-size:14px;
}
}
.menu-img a{
display:block;
cursor:zoom-in;
}

.menu-img img{
transition:transform .2s ease;
}

.menu-img a:hover img{
transform:scale(1.05);
}

/* leader dots */

.menu-item{
display:flex;
align-items:center;
gap:10px;
}

.menu-item::after{
content:"";
flex:1;
border-bottom:1px dotted rgba(255,255,255,0.25);
margin-top:6px;
}

.menu-option-name{
display:flex;
align-items:center;
gap:10px;
}

.menu-option-name::after{
content:"";
flex:1;
border-bottom:1px dotted rgba(255,255,255,0.15);
margin-top:6px;
}

.gallery img:hover{
transform:scale(1.03);
}

.btn{
box-shadow:0 4px 10px rgba(0,0,0,.25);
}

.menu-row{
    display:flex;
    align-items:center;
}