/* ========== General ========== */
* {margin:0; padding:0; box-sizing:border-box;}
body {font-family:'Inter',sans-serif; background:#111; color:#fff; overflow-x:hidden;}

/* ========== Particles ========== */
.bg-particles {position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:-1;}
.particle {position:absolute; width:4px; height:4px; background:rgba(255,215,0,0.1); border-radius:50%; animation:float 8s infinite ease-in-out;}
@keyframes float {0%,100%{transform:translateY(0px) rotate(0deg);opacity:0.1;}50%{transform:translateY(-25px) rotate(180deg);opacity:0.3;}}

/* ========== Header ========== */
header {
  position: relative;
  height: 100vh;
  background: linear-gradient(45deg, #000000cc, #1a1a1acc); /* vetem gradient, video do mbulojë gjithçka */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}


header::before {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.5) 100%);
}
header h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;

  /* Gradient për Chrome/Safari */
  background: linear-gradient(45deg, #FFD700, #FFA500, #FFC107);
  -webkit-background-clip: text;  /* Chrome, Safari */
  background-clip: text;          /* Standard property for compatibility */
  -webkit-text-fill-color: transparent; /* Chrome, Safari */
  
  /* Backup ngjyra për browser që nuk e mbështesin gradient */
  color: #FFD700;

  text-shadow: 0 0 40px rgba(255,215,0,0.3);
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from{filter:drop-shadow(0 0 20px rgba(255,215,0,0.3));}
  to{filter:drop-shadow(0 0 50px rgba(255,215,0,0.8));}
}
header p {
  font-size:clamp(1rem,3vw,2rem);
  font-weight:300;
  letter-spacing:3px;
  margin-top:1rem;
  opacity:0.9;
}
.scroll-indicator {
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  animation:bounce 2s infinite;
  color:rgba(255,255,255,0.7);
  font-size:1.5rem;
}
@keyframes bounce {
  0%,20%,50%,80%,100%{transform:translateX(-50%) translateY(0);}
  40%{transform:translateX(-50%) translateY(-10px);}
  60%{transform:translateX(-50%) translateY(-5px);}
}

/* ========== Containers ========== */
.container {max-width:1200px; margin:0 auto; padding:4rem 2rem; position:relative;}

/* ========== Main Buttons ========== */
.main-buttons {display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:2rem; margin-bottom:4rem;}
.main-buttons button {
  border:2px solid rgba(255,215,0,0.4);
  position:relative; background-size:cover; background-position:center;
  padding:3rem 2rem; border-radius:20px;
  font-size:2rem; font-weight:600; font-family:'Playfair Display',serif;
  cursor:pointer; height:250px; overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4),0 0 0 1px rgba(255,215,0,0.1);
  transition: all 0.4s ease-in-out;
}
.main-buttons button span {
  position:relative; z-index:2; color:#fff;
  text-shadow:2px 2px 15px rgba(0,0,0,0.8);
  display:flex; align-items:center; justify-content:center;
  height:100%; transition: all 0.3s ease;
}
.main-buttons button::after {
  content:''; position:absolute; top:50%; left:50%;
  width:0; height:0;
  background:radial-gradient(circle, rgba(255,215,0,0.3) 0%, transparent 70%);
  border-radius:50%; transform:translate(-50%,-50%);
  transition: all 0.6s ease;
}
.main-buttons button:hover {
  border-color:rgba(255,215,0,0.8);
  transform:translateY(-15px) scale(1.07);
  box-shadow:0 20px 60px rgba(0,0,0,0.6),0 0 30px rgba(255,215,0,0.4);
}
.main-buttons button:hover::after {width:300px;height:300px;}
.main-buttons button:hover span {color:#FFD700; transform:scale(1.12);}

/* ========== Menu Sections ========== */
.menu-section {display:none; animation: fadeInUp 0.6s ease-in-out;}
.menu-section.active {display:block;}
@keyframes fadeInUp {from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);}}

h2 {
  font-family:'Playfair Display', serif;
  font-size:2.5rem; color:#FFD700;
  text-align:center; margin:3rem 0 2rem;
  position:relative; padding-bottom:1rem;
}
h2::after {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:100px; height:3px;
  background:linear-gradient(90deg, transparent,#FFD700,transparent);
  border-radius:2px;
}
ul {list-style:none; display:grid; gap:1rem;}
ul li {
  background:linear-gradient(135deg, rgba(30,30,30,0.9), rgba(45,45,45,0.9));
  backdrop-filter:blur(10px);
  padding:1.5rem 2rem;
  border-radius:15px;
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid rgba(255,215,0,0.2);
  position:relative; transition:all 0.3s ease;
}
ul li:hover {
  transform:translateY(-5px);
  box-shadow:0 10px 25px rgba(0,0,0,0.5),0 0 0 1px rgba(255,215,0,0.4);
}
.menu-item-name {font-size:1.2rem; font-weight:500; color:#fff;}
.menu-item-price {
  font-size:1.3rem; font-weight:600; color:#FFD700;
  background:rgba(255,215,0,0.1); padding:0.5rem 1rem;
  border-radius:25px; border:1px solid rgba(255,215,0,0.3);
}

/* ========== Footer ========== */
footer {
  text-align:center; padding:3rem 2rem;
  font-size:0.9rem; color:rgba(255,255,255,0.6);
  background:linear-gradient(135deg, #000000cc, #1a1a1acc);
  border-top:1px solid rgba(255,215,0,0.2);
}

/* ========== Responsive ========== */
@media (max-width:768px){
  .main-buttons{grid-template-columns:1fr; gap:1.5rem;}
  .main-buttons button{height:200px; font-size:1.5rem;}
  header h1{font-size:3rem;}
  header p{font-size:1.2rem; letter-spacing:2px;}
}
@media (max-width:480px){
  ul li{flex-direction:column; gap:0.5rem; text-align:center;}
  .container{padding:2rem 1rem;}
}



/* ====== Background Image për dy butonat ====== */

/* Shërbimet e DonStyle */
.main-buttons button:nth-child(1) {
  background-image: url('donstyle1.jpg'); /* vendose foton tënden */
  background-size: cover;
  background-position: center;
}

/* Pije */
.main-buttons button:nth-child(2) {
  background-image: url("https://images.unsplash.com/photo-1551024506-0bccd828d307?auto=format&fit=crop&w=800&q=80");
  background-size: cover;
  background-position: center;
}

#header-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

header::before {
  content:'';
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.5) 100%);
  z-index: -1;
}