/* ============================================================
   HATEEM TRAVELS - Logo Image + Phone Button Styles
   ============================================================ */

/* ---- NAV IMAGE LOGO ---- */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.nav-logo img {
  height: 60px;
  width: auto;
  display: block;
  border-radius: 6px;
  transition: opacity 0.2s ease;
}
.nav-logo img:hover { opacity: 0.88; }

/* ---- FOOTER IMAGE LOGO ---- */
.footer-logo {
  height: 64px;
  width: auto;
  display: block;
  margin-bottom: 1.2rem;
  border-radius: 8px;
  filter: drop-shadow(0 2px 8px rgba(201,168,76,0.25));
}

/* ---- PHONE BUTTON ---- */
.nav-phone-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--green); color: #fff !important;
  border-radius: 8px; padding: 0.55rem 1rem;
  font-size: 0.82rem; font-weight: 700; white-space: nowrap;
  border: none; text-decoration: none; transition: var(--transition);
  box-shadow: 0 2px 8px rgba(74,124,63,0.3);
}
.nav-phone-btn i { font-size: 0.85rem; }
.nav-phone-btn:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(74,124,63,0.4);
}

/* ---- WHATSAPP BUTTON (Header) ---- */
.nav-wa-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: #25D366; color: #fff !important;
  border-radius: 8px; padding: 0.55rem 1rem;
  font-size: 0.82rem; font-weight: 700; white-space: nowrap;
  text-decoration: none; transition: var(--transition);
  box-shadow: 0 2px 8px rgba(37,211,102,0.35);
}
.nav-wa-btn i { font-size: 1rem; }
.nav-wa-btn:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,211,102,0.45);
}

/* ---- NAV CTA GROUP ---- */
.nav-cta { display: flex; align-items: center; gap: 0.6rem; flex-wrap: nowrap; }

/* Compact on medium & mobile screens */
@media (max-width: 1100px) {
  .nav-wa-btn span,
  .nav-phone-btn span { display: none; }
  .nav-wa-btn, .nav-phone-btn {
    padding: 0;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    justify-content: center;
    flex-shrink: 0;
  }
  .nav-wa-btn i, .nav-phone-btn i { font-size: 1.05rem; margin: 0; }
}

@media (max-width: 600px) {
  .nav-logo img { height: 44px; }
  .nav-cta { gap: 0.45rem; }
  .nav-wa-btn, .nav-phone-btn { width: 38px; height: 38px; }
  .nav-wa-btn i, .nav-phone-btn i { font-size: 0.95rem; }
}

@media (max-width: 360px) {
  .nav-logo img { height: 38px; }
  .nav-cta { gap: 0.35rem; }
  .nav-wa-btn, .nav-phone-btn { width: 36px; height: 36px; }
  .nav-wa-btn i, .nav-phone-btn i { font-size: 0.9rem; }
}