/* =========================
   General Reset & Fonts
========================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f9f9f9;
}
a { text-decoration: none; color: inherit; }

/* =========================
   Navbar
========================= */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 50px;
  background: #a62424;
  color: #fff;
}
.navbar .logo img {
  width: 50px;
  margin-right: 10px;
  vertical-align: middle;
}
.navbar .nav-links a {
  margin-left: 20px;
  color: #fff;
  font-weight: 500;
  transition: 0.3s;
}
.navbar .nav-links a.active,
.navbar .nav-links a:hover { text-decoration: underline; }

/* =========================
   Hero Section
========================= */
.hero {
  position: relative;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}
.hero .overlay {
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.4);
}
.hero .hero-content { position: relative; z-index:1; }
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3rem;
  margin-bottom: 10px;
}
.hero p { font-size: 1.3rem; margin-bottom: 20px; }
.hero .btn {
  padding: 12px 25px;
  margin: 5px;
  border-radius: 25px;
  background: #fff;
  color: #a62424;
  font-weight: 700;
  transition: 0.3s;
}
.hero .btn:hover { background: #a62424; color: #fff; }
.btn.secondary {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
.btn.secondary:hover { background: #fff; color: #a62424; border-color: #fff; }

/* Floating particles */
.hero::after {
  content:"";
  position:absolute; top:0; left:0; width:100%; height:100%;
  background: url('spice-particles.png') repeat;
  animation: floatParticles 30s linear infinite;
  opacity:0.08;
  pointer-events:none;
}
@keyframes floatParticles { 0% {background-position:0 0;} 100% {background-position:1000px 0;} }

/* =========================
   Highlights Section
========================= */
.section.highlights { padding: 60px 20px; text-align:center; }
.highlight-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:30px; max-width:1200px; margin:0 auto;
}
.highlight {
  background:#fff; padding:20px; border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1);
  transition: transform 0.4s ease;
}
.highlight:hover { transform: translateY(-10px); }
.highlight .icon { font-size:2rem; margin-bottom:10px; display:block; }
.highlight h3 { margin-bottom:10px; color:#a62424; }
.highlight p { color:#555; }

/* =========================
   About Section
========================= */
.section.about {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  padding:60px 20px;
}
.section.about .text { flex:1; min-width:300px; margin-right:20px; }
.section.about .image { flex:1; min-width:300px; text-align:center; }
.section.about img { max-width:100%; border-radius:12px; transition: transform 0.4s ease; }
.section.about img:hover { transform: scale(1.05); }

/* =========================
   Benefits Section
========================= */
.section.benefits { padding:60px 20px; text-align:center; background:#fff; }
.section.benefits h2 { color:#a62424; margin-bottom:20px; font-size:2rem; }
.section.benefits p { margin-bottom:40px; color:#555; font-size:1.1rem; }
.benefits-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px; max-width:1200px; margin:0 auto;
}
.benefit-item {
  background:#f9f9f9; padding:25px 20px; border-radius:12px;
  box-shadow:0 4px 10px rgba(0,0,0,0.1); text-align:center;
  opacity:0; transform:translateY(20px);
  transition: all 0.6s ease;
}
.benefit-item.visible { opacity:1; transform:translateY(0); }
.benefit-img {
  width:120px; height:120px; object-fit:cover;
  margin-bottom:15px; border-radius:12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow:0 4px 15px rgba(0,0,0,0.1);
}
.benefit-img:hover { transform:scale(1.1); box-shadow:0 8px 20px rgba(0,0,0,0.2); }
.benefit-item:hover { transform: translateY(-10px); box-shadow:0 10px 20px rgba(0,0,0,0.2); }

/* =========================
   Gallery Section
========================= */
.section.gallery { padding:60px 20px; text-align:center; background:#f9f9f9; }
.section.gallery h2 { color:#a62424; margin-bottom:30px; font-size:2rem; }
.gallery-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:20px; justify-items:center;
}
.gallery-grid img {
  width:120px; border-radius:8px;
  transition: transform 0.4s ease;
}
.gallery-grid img:hover { transform: scale(1.2) rotate(5deg); }

/* =========================
   Footer
========================= */
footer { background:#a62424; color:#fff; padding:40px 50px; }
.footer-columns { display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:20px; }
.footer-columns .column { flex:1; min-width:200px; margin-bottom:20px; }
.footer-columns h3 { margin-bottom:10px; }
.footer-columns ul { list-style:none; padding:0; }
.footer-columns ul li { margin-bottom:5px; }
.footer-columns ul li a:hover { text-decoration:underline; }
footer p { text-align:center; font-size:0.9rem; }

/* Responsive */
@media(max-width:768px){
  .navbar { flex-direction:column; align-items:flex-start; }
  .section.about { flex-direction:column; }
}