/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
  font-family: Arial, sans-serif; 
  line-height: 1.6; 
  color: #333; 
  scroll-behavior: smooth; 
}

/* Navbar */
header { 
  background: rgba(0,0,0,0.6); 
  position: fixed; 
  width: 100%; 
  top: 0; 
  z-index: 100; 
}
nav { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 1rem 2rem; 
}
nav .logo { 
  color: #fff; 
  font-size: 1.5rem; 
  font-weight: bold; 
  letter-spacing: 1px; 
}
nav ul { display: flex; list-style: none; }
nav ul li { margin-left: 20px; }
nav ul li a { 
  color: #fff; 
  text-decoration: none; 
  transition: 0.3s; 
  font-weight: 500; 
}
nav ul li a:hover { color: #f4b400; }

/* Hero */
.hero { 
  background: url("images/hero-bg.jpg") center/cover no-repeat; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  color: #fff; 
  padding: 0 20px;
}
.hero-content h2 { font-size: 3rem; margin-bottom: 1rem; }
.hero-content p { font-size: 1.2rem; margin-bottom: 1.5rem; }
.btn { 
  background: #f4b400; 
  color: #fff; 
  padding: 10px 20px; 
  border: none; 
  border-radius: 5px; 
  text-decoration: none; 
  font-weight: bold; 
  transition: 0.3s; 
}
.btn:hover { background: #d89a00; }

/* Sections General */
.section { 
  padding: 80px 20px; 
  text-align: center; 
}
.section h2 { 
  margin-bottom: 20px; 
  font-size: 2rem; 
  color: #222; 
}
.cards { 
  display: flex; 
  justify-content: center; 
  gap: 20px; 
  flex-wrap: wrap; 
}
.card { 
  background: #fff; 
  border-radius: 10px; 
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
  padding: 20px; 
  max-width: 300px; 
  transition: transform 0.3s; 
}
.card img { 
  width: 100%; 
  border-radius: 10px; 
  margin-bottom: 10px; 
}
.card:hover { transform: translateY(-5px); }

/* Section Backgrounds */
#about { 
  background: linear-gradient(135deg, #f9f9f9, #ececec); 
}
#destinations { 
  background: linear-gradient(135deg, #e3f2fd, #bbdefb); /* light blue */
}
#packages { 
  background: linear-gradient(135deg, #f1f8e9, #dcedc8); /* light green */
}
#gallery { 
  background: #fafafa; /* soft gray */
}
#plan { 
  background: linear-gradient(135deg, #fce4ec, #f8bbd0); /* pink */
}
#contact { 
  background: linear-gradient(135deg, #fff3e0, #ffe0b2); /* orange */
}

/* Gallery */
.gallery { 
  display: flex; 
  justify-content: center; 
  gap: 15px; 
  flex-wrap: wrap; 
}
.gallery img { 
  width: 300px; 
  border-radius: 10px; 
  transition: transform 0.3s; 
}
.gallery img:hover { transform: scale(1.05); }

/* Generate Plan Section */
.generate-plan { 
  padding: 60px 20px; 
  border-radius: 10px; 
  max-width: 700px; 
  margin: auto; 
}
.generate-plan h2 { 
  font-size: 2rem; 
  margin-bottom: 20px; 
  color: #222; 
}
.generate-plan form { 
  display: flex; 
  flex-direction: column; 
  gap: 15px; 
}
.generate-plan input, 
.generate-plan select { 
  padding: 12px; 
  border: 1px solid #ccc; 
  border-radius: 6px; 
  font-size: 1rem; 
}
.generate-plan button { 
  background: #f4b400; 
  color: #fff; 
  padding: 12px; 
  border: none; 
  border-radius: 6px; 
  font-size: 1rem; 
  cursor: pointer; 
  transition: 0.3s; 
}
.generate-plan button:hover { background: #d89a00; }
.plan-output { 
  margin-top: 20px; 
  padding: 15px; 
  background: #fff; 
  border-radius: 8px; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
  text-align: left; 
}

/* Contact */
.contact form { 
  max-width: 500px; 
  margin: auto; 
  display: flex; 
  flex-direction: column; 
  gap: 10px; 
}
.contact input, 
.contact textarea { 
  padding: 10px; 
  border: 1px solid #ccc; 
  border-radius: 5px; 
}
.contact button { 
  cursor: pointer; 
  background: #f4b400; 
  color: #fff; 
  border: none; 
  padding: 12px; 
  border-radius: 5px; 
  transition: 0.3s; 
}
.contact button:hover { background: #d89a00; }

/* Footer */
footer { 
  background: #222; 
  color: #fff; 
  text-align: center; 
  padding: 15px; 
  font-size: 0.9rem; 
  margin-top: 40px; 
}