/* ===== Base Styles ===== */

* { margin:0; padding:0; box-sizing:border-box; }
body { 
  font-family:'Poppins', sans-serif; 
  background:#fff; 
  color:#1a1a3d; 
  padding-top:84px; 
  overflow-x:hidden; 
}
@media (max-width:480px) { body { padding-top:72px; } }

/* ===== NexWell Header: Isolated Namespace (.nxw) ===== */
.nxw {
  --accent:#0b3a66;
  --muted:#6b7280;
  --menu-bg: rgba(255,255,255,0.98);
  --menu-border:#cbd5e1;
  --panel-shadow: 0 12px 32px rgba(11,58,102,0.12);
  --radius:12px;
  --gap:24px;
  --text:#111827;
  --transition:200ms ease;
  --header-h:84px;
  --pad-x:32px;
  --z-header:1200;
  --z-mega:1100;
  --z-drawer:1400;
  position:fixed; 
  left:0; 
  right:0; 
  top:0;
  z-index:var(--z-header);
  -webkit-font-smoothing:antialiased; 
  -moz-osx-font-smoothing:grayscale;
  font-family:"Segoe UI", Tahoma, Arial, sans-serif;
  color:var(--text);
  background:linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(255,255,255,0.95));
  border-bottom:1px solid #e6edf3;
}
.nxw *, .nxw *::before, .nxw *::after { box-sizing:border-box; }

/* Layout row */
.nxw-row {
  height:var(--header-h);
  display:flex; 
  align-items:center; 
  gap:28px;
  padding:14px var(--pad-x);
}

/* Brand */
.nxw-brand { 
  display:flex; 
  gap:14px; 
  align-items:center; 
  padding-left:20px; 
}
.nxw-logo {
  width:168px; 
  height:36px; 
  flex:0 0 auto;
  background:url('https://nexwell.ai/logo/60.1756302567959.9QQt-QTEQpr7Y5bfRcn_6HecX3zxivERcScLBRWJ-MI.Vy8iYzY5ZS0xOTgzNzc2NTNmZiI.webp') center/contain no-repeat;
}

/* Nav */
.nxw-nav { 
  display:flex; 
  align-items:center; 
  gap:18px; 
  flex:1; 
  justify-content:space-between; 
  min-width:0; 
}
.nxw-list { 
  display:flex; 
  gap:8px; 
  align-items:center; 
  margin:0; 
  padding:0; 
  list-style:none; 
  flex-wrap:nowrap; 
}
.nxw-item { position:relative; }
.nxw-link {
  display:inline-flex; 
  align-items:center; 
  gap:10px;
  padding:12px 14px; 
  text-decoration:none; 
  color:var(--text);
  font-weight:450; 
  font-size:20px; 
  line-height:1.2;
  border-radius:10px; 
  transition:background var(--transition), color var(--transition);
  cursor:pointer;
}
.nxw-link:focus { 
  outline:2px solid rgba(11,58,102,0.12); 
  outline-offset:2px; 
}
.nxw-link:hover { 
  background:rgba(11,58,102,0.06); 
}
.nxw-caret { 
  width:9px; 
  height:9px; 
  border-right:2px solid var(--muted); 
  border-bottom:2px solid var(--muted); 
  transform:rotate(45deg); 
  display:inline-block; 
}

/* Mega */
.nxw-mega {
  position:absolute; 
  left:50%; 
  top:100%; 
  transform:translateX(-50%) translateY(16px);
  min-width:860px; 
  max-width:1140px; 
  padding:24px;
  background:var(--menu-bg); 
  border:1px solid var(--menu-border); 
  border-radius:var(--radius);
  box-shadow:var(--panel-shadow); 
  display:none; 
  z-index:var(--z-mega);
}
.nxw-grid { 
  display:grid; 
  grid-template-columns:repeat(5,1fr); 
  gap:20px; 
  align-items:start; 
}
.nxw-col h4 { 
  margin:0 0 12px 0; 
  font-size:17px; 
  color:var(--accent); 
  font-weight:800; 
  letter-spacing:0.2px; 
}
.nxw-col ul { 
  margin:0; 
  padding:0; 
  list-style:none; 
}
.nxw-col li { 
  margin:10px 0; 
}
.nxw-col a { 
  text-decoration:none; 
  color:var(--muted); 
  font-size:15.5px; 
  line-height:1.4; 
  transition:color var(--transition); 
}
.nxw-col a:hover { 
  color:var(--text); 
}

/* Actions (right) */
.nxw-actions { 
  display:flex; 
  gap:12px; 
  align-items:center; 
  margin-left:auto; 
}
.nxw-btn {
  padding:10px 16px; 
  border-radius:10px; 
  border:1.5px solid transparent;
  background:transparent; 
  cursor:pointer; 
  font-weight:700; 
  font-size:15.5px;
  width:8.2em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nxw-btn.primary { 
  background:#16263f; 
  color:#fff; 
  border:2px solid black;
}
.nxw-lang-wrapper {
  display:flex;
  gap:10px;
  align-items:center;
}
.nxw-lang {
  padding:10px 12px; 
  border-radius:10px; 
  border:1px solid #e6edf3; 
  background:#fff; 
  font-size:16px;
}
.nxw-actions a { 
  text-decoration:none; 
  color:inherit; 
}

/* Hamburger (visible <980px) */
.nxw-hamburger {
  display:none; 
  width:48px; 
  height:48px; 
  border-radius:10px;
  align-items:center; 
  justify-content:center; 
  border:1px solid #e6edf3; 
  background:#fff; 
  cursor:pointer; 
  flex:0 0 auto;
}
.nxw-bar { 
  width:20px; 
  height:2.5px; 
  background:#222; 
  margin:4px 0; 
}

/* Drawer */
.nxw-drawer { 
  position:fixed; 
  inset:0; 
  background:rgba(0,0,0,0.35); 
  display:none; 
  z-index:var(--z-drawer); 
  align-items:flex-start; 
  justify-content:flex-end; 
}
.nxw-drawer-panel { 
  width:360px; 
  max-width:92%; 
  height:100%; 
  background:#fff; 
  padding:20px; 
  overflow:auto; 
  box-shadow:-8px 0 28px rgba(2,6,23,0.12); 
}
.nxw-drawer-close { 
  float:right; 
  background:transparent; 
  border:0; 
  font-size:20px; 
  cursor:pointer; 
}
.nxw-logo-wrapper {
  padding:6px 0 12px;
}
.nxw-logo-wrapper .nxw-logo {
  width:140px;
  height:32px;
}
.nxw-drawer-menu { 
  margin-top:16px; 
}
.nxw-drawer-item { 
  border-bottom:1px solid #f1f5f9; 
  padding:14px 6px; 
}
.nxw-drawer-item a {
  text-decoration:none;
  color:var(--text);
  font-weight:800;
  font-size:16px;
}
.nxw-drawer-toggle { 
  width:100%; 
  text-align:left; 
  background:none; 
  border:0; 
  padding:0; 
  font-weight:800; 
  font-size:16px; 
  cursor:pointer; 
}
.nxw-sub { 
  margin-top:8px; 
  padding-left:12px; 
  display:none; 
}
.nxw-sub-title {
  display:block;
  margin:12px 0 6px;
  color:var(--accent);
}
.nxw-sub a { 
  display:block; 
  padding:9px 0; 
  color:var(--muted); 
  text-decoration:none; 
  font-size:15.5px; 
}
.nxw-drawer-actions {
  margin-top:18px;
}
.nxw-drawer-actions .nxw-btn {
  width:100%;
  display:block;
  text-align:center;
}
.nxw-drawer-actions .nxw-btn:not(:first-child) {
  margin-top:8px;
}

/* Responsive Header */
@media (max-width:1100px) {
  .nxw-mega { 
    left:12px; 
    right:12px; 
    transform:none; 
    width:auto; 
    min-width:unset; 
    max-width:unset; 
  }
}
@media (max-width:980px) {
  .nxw-nav { display:none; }
  .nxw-hamburger { display:flex; margin-left:auto; }
  .nxw-logo { width:140px; height:32px; }
}
@media (max-width:480px) {
  .nxw-row { padding:10px 14px; height:72px; }
  .nxw-logo { width:128px; height:30px; }
  .nxw-drawer-panel { width:100%; max-width:100%; }
}

/* ===== Hero ===== */
.hero { 
  position:relative; 
  height:300px; 
  width:100%; 
}
.hero img { 
  width:100%; 
  height:100%; 
  object-fit:cover; 
}
.hero::after { 
  content:""; 
  position:absolute; 
  inset:0; 
  background:rgba(0,0,0,.5); 
}
.hero h1 { 
  position:absolute; 
  top:50%; 
  left:50%; 
  transform:translate(-50%,-50%); 
  color:#fff; 
  font-size:36px; 
  font-weight:700; 
  z-index:1; 
  text-align:center; 
}

/* ===== Services ===== */
.service-container { 
  display:flex; 
  flex-wrap:wrap; 
  gap:30px; 
  max-width:1200px; 
  margin:40px auto; 
  padding:0 20px; 
  align-items:flex-start; 
}
.service-container:last-child {
  margin-bottom:50px;
}
.service-image { 
  position:relative; 
  height:220px; 
  width:100%; 
  max-width:300px; 
  border-radius:12px; 
  overflow:hidden; 
}
.service-image img { 
  width:100%; 
  height:100%; 
  object-fit:cover; 
}
.service-image div { 
  position:absolute; 
  bottom:10px; 
  left:15px; 
  color:#fff; 
  font-size:24px; 
  font-weight:800; 
  text-shadow:0 2px 6px rgba(0,0,0,.6); 
}
.service-details { 
  flex:1; 
  max-width:600px; 
}
.service-details h2 { 
  font-size:22px; 
  margin-bottom:10px; 
  color:#0c1f4c; 
}
.service-details p { 
  font-size:15px; 
  color:#666; 
  margin-bottom:15px; 
  line-height:1.5; 
}
.feature-list { 
  display:flex; 
  flex-wrap:wrap; 
  gap:10px 30px; 
  font-size:14px; 
  color:#1a1a3d; 
}
.feature-list div::before { 
  content:"✔"; 
  color:#0056b3; 
  margin-right:6px; 
}
.qr-section { 
  background:#f5f5f7; 
  border-radius:12px; 
  padding:15px; 
  text-align:center; 
  min-width:180px; 
}
.qr-section img { 
  width:80px; 
  margin:0 8px; 
  border-radius:8px; 
  box-shadow:0 2px 6px rgba(0,0,0,.1); 
  transition:transform .3s; 
}
.qr-section img:hover { 
  transform:scale(1.1); 
}
.qr-labels { 
  display:flex; 
  justify-content:center; 
  gap:40px; 
  margin-top:6px; 
  font-size:12px; 
  font-weight:600; 
}
.download-buttons { 
  margin-top:10px; 
  display:flex; 
  justify-content:center; 
  gap:10px; 
}
.download-buttons button { 
  background:#0c1f4c; 
  color:#fff; 
  border:none; 
  padding:6px 15px; 
  font-weight:700; 
  font-size:13px; 
  border-radius:6px; 
  cursor:pointer; 
}
.download-buttons button:hover { 
  background:#092349; 
}

/* ===== Footer ===== */
footer { 
  background:#f9fafb; 
  padding:40px 20px; 
  text-align:center; 
  color:#333; 
  margin-top:50px; 
}
footer .top { 
  max-width:1200px; 
  margin:0 auto; 
  display:flex; 
  flex-wrap:wrap; 
  justify-content:space-between; 
  align-items:center; 
  gap:10px; 
}
.footer-logo {
  font-weight:700; 
  font-size:18px; 
  color:#1a4066;
}
.footer-links {
  display:flex;
  gap:20px;
}
.footer-links a {
  color: black;
  text-decoration: none;
}
footer .social a { 
  font-size:18px; 
  margin:0 8px; 
  color:#333; 
}
footer .bottom { 
  margin-top:20px; 
  font-size:14px; 
  color:#6b7280; 
}

/* ===== Responsive ===== */
@media (max-width:1024px) {
  /* No specific styles for this breakpoint */
}
@media (max-width:768px) {
  .hero h1 { font-size:26px; }
  .service-container { flex-direction:column; align-items:center; }
  .service-details { text-align:center; }
  .qr-section { min-width:100%; }
  footer .top { flex-direction:column; }
}

/* Language Menu */
.lang-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e6edf3;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
  color: var(--text);
  transition: background var(--transition), border-color var(--transition);
}

.lang-toggle:hover {
  background: rgba(11, 58, 102, 0.06);
}

.lang-toggle .caret {
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  display: inline-block;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 160px;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: var(--radius);
  box-shadow: var(--panel-shadow);
  display: none;
  z-index: 1100;
  padding: 8px 0;
}

.lang-menu.open {
  display: block;
}

.lang-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--text);
  font-size: 15px;
  transition: background var(--transition), color var(--transition);
}

.lang-item:hover {
  background: rgba(11, 58, 102, 0.06);
}

.lang-item[data-lang="ar"] {
  direction: rtl;
}

.lang-flag {
  width: 24px;
  height: 18px;
  display: inline-block;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
}

/* Flag icons */
.flag-en {
  background-image: url('https://flagcdn.com/24x18/gb.png');
}
.flag-es {
  background-image: url('https://flagcdn.com/24x18/es.png');
}
.flag-fr {
  background-image: url('https://flagcdn.com/24x18/fr.png');
}
.flag-de {
  background-image: url('https://flagcdn.com/24x18/de.png');
}
.flag-zh {
  background-image: url('https://flagcdn.com/24x18/cn.png');
}
.flag-ja {
  background-image: url('https://flagcdn.com/24x18/jp.png');
}
.flag-ru {
  background-image: url('https://flagcdn.com/24x18/ru.png');
}
.flag-ar {
  background-image: url('https://flagcdn.com/24x18/sa.png');
}
.flag-it {
  background-image: url('https://flagcdn.com/24x18/it.png');
}

/* Mobile menu language styles */
@media (max-width: 980px) {
  .drawer-menu .lang-wrapper {
    margin: 12px 0;
  }
  .drawer-menu .lang-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
  }
  .drawer-menu .lang-item {
    padding: 10px 0;
  }
}