/* ===============================
   GLOBAL
================================ */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
}

/* ===============================
   TOP BAR
================================ */
.top-bar {
  height: 20px;
  background: linear-gradient(to right, #1b2c44, #0a1a2f);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  width: 100%;
}

.top-bar i {
  margin-right: 6px;
}

.top-bar a {
  color: #fff;
  text-decoration: none;
}

/* ===============================
   NAVBAR
================================ */
.main-navbar {
  background: #000;
  min-height: 80px;
  display: flex;
  align-items: center;   /* ✅ CENTERED like screenshot */
  padding: 0 20px;
}

/* LOGO */
#mainlogo {
  height: 70px;          /* ✅ screenshot size */
  width: auto;
}

/* MENU */
.main-navbar .navbar-nav {
  margin-left: auto;
  gap: 24px;             /* even spacing like screenshot */
}

.navbar-nav .nav-item {
  padding: 0;
}

.nav-link {
  color: #fff !important;
  font-weight: 500;
  font-size: 15px;
  white-space: nowrap;
}

.nav-link:hover {
  color: #00d4ff !important;
}

/* SEARCH ICON */
.nav-search i {
  font-size: 16px;
  margin-left: 10px;
}

/* ===============================
   DROPDOWN (DESKTOP HOVER)
================================ */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
  }

  .navbar .dropdown-menu {
    margin-top: 0;
    border-radius: 0;
  }
}

/* REMOVE DROPDOWN ARROW */
.navbar .dropdown-toggle::after {
  display: none;
}

/* ===============================
   MOBILE / TABLET
================================ */
@media (max-width: 991px) {

  /* Hide top bar like screenshot */
  .top-bar {
    display: none;
  }

  .main-navbar {
    padding: 10px 15px;
  }

  #mainlogo {
    height: 38px;
  }

  .navbar-nav {
    padding-top: 10px;
    gap: 0;
  }

  .nav-link {
    padding: 10px 0;
    font-size: 16px;
  }
}

@media (max-width: 575px) {
  #mainlogo {
    height: 34px;
  }
}
/* ================= MOBILE HEADER CONTROL ================= */
@media (max-width: 768px) {

  /* Hide language, login, cart */
  .user-actions {
    display: none !important;
  }

  /* Center contact info */
  .contact-info {
    width: 100%;
    text-align: center;
    font-size: 14px;
  }

  .contact-info i {
    margin-right: 4px;
  }
}