/* Reset */
* {margin:0; padding:0; box-sizing:border-box;}
body {
  font-family: 'Inter', sans-serif;
  background: linear-gradient(135deg, #eef2f3, #ffffff);
  color:#2d3436;
  line-height:1.6;
  transition: background 0.4s, color 0.4s;
}

/* Dark Mode */
body.dark-mode {
  background: linear-gradient(135deg, #1e272e, #2d3436);
  color:#f1f2f6;
}
body.dark-mode .navbar {background: rgba(30,39,46,0.8);}
body.dark-mode .feature-card,
body.dark-mode .booking-form,
body.dark-mode .chatbox {background: rgba(45,52,54,0.9);}
body.dark-mode footer {background:#2d3436; color:#b2bec3;}
body.dark-mode .nav-links a {color:#f1f2f6;}
body.dark-mode .nav-links a:hover {color:#74b9ff;}
body.dark-mode .btn {background: #4A6CF7; color:#fff;}
body.dark-mode .feature-card {background:#1f1f1f; border:1px solid #333;}
body.dark-mode .chatbox {background:#1c1c1c; border:1px solid #444;}

/* Navbar */
.navbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:20px 50px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  position: sticky; top:0; z-index:100;
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.logo {font-size:1.8rem; font-weight:700; color:#4a90e2;}
.nav-links {list-style:none; display:flex; gap:25px;}
.nav-links a {
  text-decoration:none; color:#2d3436; font-weight:600; transition:0.3s;
}
.nav-links a:hover {color:#4a90e2;}
.dark-toggle {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #4A6CF7;
  margin-right: 15px;
  transition: transform 0.3s ease, color 0.3s ease;
}
.dark-toggle:hover {transform: scale(1.2); color: #357ab8;}

/* Buttons */
.btn {
  background: linear-gradient(135deg, #4a90e2, #6c5ce7);
  color:#fff; padding:10px 22px; border-radius:30px;
  text-decoration:none; font-weight:600; transition:0.3s;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.btn:hover {transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,0.25);}
.btn-primary {background: linear-gradient(135deg, #00b894, #00cec9);}
.btn-primary:hover {background: linear-gradient(135deg, #00cec9, #00b894);}

/* Hero */
.hero {
  display:flex; justify-content:center; align-items:center;
  padding:100px 50px; gap:60px; flex-wrap:wrap;
  background: linear-gradient(135deg,#e3f2fd,#f9f9ff);
}
body.dark-mode .hero {background: linear-gradient(135deg,#2d3436,#1e272e);}
.hero-content {max-width:500px;}
.hero-content h1 {
  font-size:2.8rem; margin-bottom:20px;
  background: linear-gradient(90deg,#4a90e2,#6c5ce7);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-content p {margin-bottom:25px; font-size:1.2rem; color:#555;}
body.dark-mode .hero-content p {color:#dfe6e9;}
.hero-image img {width:300px; animation: float 4s ease-in-out infinite;}
@keyframes float {0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);}}

/* Features */
.features {padding:80px 50px; text-align:center;}
.features h2 {font-size:2rem; margin-bottom:40px; color:#4a90e2;}
.features-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
}
.feature-card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
  padding:30px; border-radius:20px;
  box-shadow:0 6px 20px rgba(0,0,0,0.08);
  transition:transform 0.3s, box-shadow 0.3s;
}
.feature-card:hover {
  transform:translateY(-10px);
  box-shadow:0 10px 28px rgba(0,0,0,0.12);
}
.feature-card h3 {margin-bottom:15px; display:flex; align-items:center; gap:10px;}
.feature-card i {color:#4a90e2; font-size:1.4rem;}

/* Booking */
.booking {
  padding:80px 50px; text-align:center;
  background:linear-gradient(135deg,#f9f9ff,#eef2f3);
}
body.dark-mode .booking {background:linear-gradient(135deg,#2d3436,#1e272e);}
.booking h2 {font-size:2rem; margin-bottom:30px; color:#4a90e2;}
.booking-form {
  display:grid; gap:15px; max-width:450px; margin:0 auto;
  background:#fff; padding:30px; border-radius:20px;
  box-shadow:0 6px 20px rgba(0,0,0,0.1);
}
body.dark-mode .booking-form {background:#2f3640;}
.booking-form input, .booking-form select {
  padding:12px; border-radius:10px; border:1px solid #ddd;
  font-size:1rem;
}
body.dark-mode .booking-form input, 
body.dark-mode .booking-form select {background:#353b48; color:#f1f2f6; border:1px solid #444;}

/* Assistant */
.assistant {padding:80px 50px; background:#fff; text-align:center;}
body.dark-mode .assistant {background:#1e272e;}
.assistant h2 {margin-bottom:25px; color:#6c5ce7;}
.chatbox {
  max-width:600px; margin:0 auto; padding:25px;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
  border-radius:20px; box-shadow:0 4px 15px rgba(0,0,0,0.08);
}
body.dark-mode .chatbox {background: rgba(45,52,54,0.95);}
.message {
  margin:12px 0; padding:12px 18px; border-radius:12px; max-width:75%;
  font-size:0.95rem; line-height:1.4;
}
.bot {background:linear-gradient(135deg,#e3f2fd,#dfe6e9); text-align:left;}
body.dark-mode .bot {background:linear-gradient(135deg,#636e72,#2d3436);}
.user {
  background:linear-gradient(135deg,#00cec9,#00b894);
  color:#fff; margin-left:auto; text-align:right;
}

/* Footer */
footer {
  padding:25px; text-align:center; background:#f1f3f6; margin-top:40px;
  color:#636e72;
}
body.dark-mode footer {background:#2d3436; color:#b2bec3;}
.hero-image img {
  max-width: 220px;   /* صغّري العرض */
  height: auto;       
  filter: invert(33%) sepia(97%) saturate(2500%) hue-rotate(200deg) brightness(95%) contrast(90%);
}