/* ===== GENERAL STYLING ===== */
* {margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;}
body {background:#F5F4F1;color:#333333;line-height:1.6;font-size:16px;}

/* ===== HEADER HERO ===== */
header {
  background: url('/images/mecca.jpg') center/cover no-repeat;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  color: #fff;
}

.header-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 59, 102, 0.6); /* Arabian deep blue overlay */
}

.header-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 0 20px;
}

header h1 {
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 15px;
}

header p {
  font-size: 1.2rem;
  margin-bottom: 25px;
  color: #E6F2F1;
}

header .cta-btn {
  padding: 15px 35px;
  background: #00A896; /* Emerald accent */
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 12px;
  text-decoration: none;
  transition: 0.3s;
}

header .cta-btn:hover {
  background: #007F7F; /* Hover */
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* ===== BOOKING & FEATURES SECTION ===== */
#booking {
    max-width:1200px;
    margin:50px auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    padding:0 20px;
}
.booking-left {display:flex;flex-direction:column;justify-content:center;}
.booking-left h2 {font-size:2.4rem;margin-bottom:18px;color:#0D3B66;font-weight:900;}
.booking-left p {font-size:1.05rem;margin-bottom:30px;color:#555555;}
.features {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}
.feature-card {
    background:#fff;
    padding:22px;
    border-radius:18px;
    box-shadow:0 15px 30px rgba(0,0,0,0.1);
    transition:0.3s;
    border-left:6px solid #00A896; /* strong accent */
}
.feature-card:hover {
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(0,0,0,0.15);
}
.feature-card h3 {font-size:17px;color:#0D3B66;font-weight:700;margin-bottom:10px;}
.feature-card p {font-size:14.5px;color:#555555;line-height:1.5;}

/* ===== BOOKING FORM ===== */
.booking-right {
    background:#fff;
    padding:35px;
    border-radius:22px;
    box-shadow:0 20px 40px rgba(0,0,0,0.12);
}
.booking-right h3 {
    text-align:center;margin-bottom:25px;color:#0D3B66;font-size:1.8rem;font-weight:800;
}
.booking-right .form-group {margin-bottom:16px;}
.booking-right label {
    display:block;font-weight:700;margin-bottom:6px;color:#0D3B66;
}
.booking-right input, .booking-right textarea {
    width:100%;
    padding:12px;
    border-radius:10px;
    border:1.4px solid #ccc;
    background:#F5F4F1;
    font-size:1rem;
    transition:all 0.25s;
}
.booking-right input:focus, .booking-right textarea:focus {
    border-color:#00A896;
    box-shadow:0 0 0 3px rgba(0,168,150,0.25);
    outline:none;
}
.booking-right button {
    width:100%;
    padding:14px;
    background:#00A896;
    color:#fff;
    font-weight:700;
    font-size:1.05rem;
    border:none;
    border-radius:12px;
    cursor:pointer;
    margin-top:10px;
    transition:0.3s;
}
.booking-right button:hover {
    transform:translateY(-2px);
    background:#007F7F;
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
}
#successMessage {margin-top:12px;color:#0D3B66;font-weight:700;display:none;}

/* ===== FAQ ===== */
#faq {max-width:1000px;margin:60px auto;padding:0 20px;}
#faq h2 {text-align:center;font-size:2.2rem;margin-bottom:35px;color:#0D3B66;}
.faq-item {
    background:#fff;
    padding:20px;
    margin-bottom:18px;
    border-radius:14px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    cursor:pointer;
    transition:0.3s;
}
.faq-item:hover {transform:translateY(-3px);}
.faq-item h3 {font-size:1.05rem;color:#0D3B66;font-weight:700;}
.faq-item p {display:none;margin-top:10px;font-size:0.95rem;color:#555555;line-height:1.5;}

/* ===== FLOATING WHATSAPP ===== */
.whatsapp-float {
    position:fixed;bottom:20px;right:20px;
    background:#25D366;color:#fff;
    padding:16px 20px;
    border-radius:50px;
    font-size:20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
    text-decoration:none;
    display:flex;align-items:center;justify-content:center;
    transition:0.3s;
}
.whatsapp-float img {width:24px;height:24px;margin-right:8px;}
.whatsapp-float:hover {transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,0.3);}
footer {
  background:#0D3B66;
  color:#fff;
  padding:40px 20px 20px 20px;
}
.footer-container {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  max-width:1200px;
  margin:auto;
}
.footer-left {max-width:500px;margin-bottom:20px;}
.footer-left h3 {font-size:1.8rem;margin-bottom:10px;color:#00A896;}
.footer-left p {font-size:0.95rem;line-height:1.6;color:#E6F2F1;}
.footer-right {min-width:200px;margin-bottom:20px;}
.footer-right h4 {margin-bottom:10px;color:#00A896;font-size:1.1rem;}
.footer-right ul {list-style:none;}
.footer-right ul li {margin-bottom:8px;}
.footer-right ul li a {color:#E6F2F1;text-decoration:none;transition:0.3s;}
.footer-right ul li a:hover {color:#00A896;}
.whatsapp-btn-footer {
  display:inline-block;
  margin-top:10px;
  padding:10px 18px;
  background:#25D366;
  color:#fff;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  transition:0.3s;
}
.whatsapp-btn-footer:hover {background:#007F7F;transform:translateY(-2px);}
.footer-bottom {
  text-align:center;
  padding-top:15px;
  font-size:0.85rem;
  color:#E6F2F1;
  border-top:1px solid rgba(255,255,255,0.2);
  margin-top:20px;
}


/* ===== RESPONSIVE ===== */
@media(max-width:992px){
    #booking{grid-template-columns:1fr;gap:35px;}
    .features{grid-template-columns:1fr;}
}
@media(max-width:480px){
    header h1{font-size:2rem;}
    header p{font-size:1rem;}
    .booking-right{padding:25px;}
}