/* H M Pharma Machines — one header system for every public page. */
:root {
  --hm-header-max: 1260px;
  --hm-header-navy: #082330;
  --hm-header-ink: #0b2734;
  --hm-header-cream: #f7f5ef;
  --hm-header-orange: #f27622;
  --hm-header-orange-dark: #d65e0b;
  --hm-header-line: #d9dfdc;
}

.topbar {
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--hm-header-navy) !important;
  color: #fff !important;
}

.topbar .topbar-inner {
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 22px !important;
  width: 100% !important;
  max-width: var(--hm-header-max) !important;
  min-height: 38px !important;
  margin: 0 auto !important;
  padding: 6px 24px !important;
}

.topbar .topbar-inner::before {
  content: "ESTABLISHED 2011  ·  AHMEDABAD, INDIA" !important;
  display: block !important;
  margin-right: auto !important;
  color: #9fd3ea !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.topbar a {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.015em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.topbar a:hover,
.topbar a:focus-visible {
  color: #ffb783 !important;
}

body > header,
body > .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--hm-header-cream) !important;
  box-shadow: 0 2px 14px rgba(8, 35, 48, 0.1) !important;
}

body > header > .header-inner,
body > .site-header > .header-inner {
  box-sizing: border-box;
  position: relative;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: var(--hm-header-max) !important;
  min-height: 88px !important;
  margin: 0 auto !important;
  padding: 10px 24px !important;
}

.brand {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

.brand img {
  display: block !important;
  width: auto !important;
  height: 58px !important;
  max-width: 124px !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
}

body > header .header-inner > nav,
body > .site-header .header-inner > nav,
body > header .header-inner > #siteNav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}

body > header .header-inner > nav > a,
body > .site-header .header-inner > nav > a,
body > header .nav-dropdown-toggle,
body > .site-header .nav-dropdown-toggle {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 12px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--hm-header-ink) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 750 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.055em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

body > header .header-inner > nav > a:hover,
body > .site-header .header-inner > nav > a:hover,
body > header .nav-dropdown-toggle:hover,
body > .site-header .nav-dropdown-toggle:hover,
body > header .header-inner > nav > a:focus-visible,
body > .site-header .header-inner > nav > a:focus-visible,
body > header .nav-dropdown-toggle:focus-visible,
body > .site-header .nav-dropdown-toggle:focus-visible {
  background: rgba(242, 118, 34, 0.07) !important;
  color: var(--hm-header-orange) !important;
  outline: none !important;
  box-shadow: inset 0 -2px 0 var(--hm-header-orange) !important;
}

body > header .header-inner > nav > a.active,
body > header .header-inner > nav > a.active-section,
body > header .header-inner > nav > a[aria-current="page"],
body > header .header-inner > nav > a[aria-current="location"],
body > .site-header .header-inner > nav > a.active,
body > .site-header .header-inner > nav > a.active-section,
body > .site-header .header-inner > nav > a[aria-current="page"],
body > .site-header .header-inner > nav > a[aria-current="location"],
body > header .nav-dropdown-toggle.active,
body > .site-header .nav-dropdown-toggle.active {
  border-radius: 0 !important;
  background: rgba(242, 118, 34, 0.08) !important;
  color: var(--hm-header-orange) !important;
  box-shadow: inset 0 -2px 0 var(--hm-header-orange) !important;
}

body > header .header-inner > nav > .nav-cta,
body > .site-header .header-inner > nav > .nav-cta {
  min-height: 44px !important;
  margin-left: 10px !important;
  padding: 12px 17px !important;
  border: 1px solid var(--hm-header-orange) !important;
  border-radius: 7px !important;
  background: var(--hm-header-orange) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(242, 118, 34, 0.18) !important;
}

body > header .header-inner > nav > .nav-cta:hover,
body > .site-header .header-inner > nav > .nav-cta:hover,
body > header .header-inner > nav > .nav-cta:focus-visible,
body > .site-header .header-inner > nav > .nav-cta:focus-visible {
  border-color: var(--hm-header-orange-dark) !important;
  background: var(--hm-header-orange-dark) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(214, 94, 11, 0.24) !important;
}

.menu-toggle {
  box-sizing: border-box;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 74px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 10px 13px !important;
  border: 1px solid var(--hm-header-line) !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: var(--hm-header-ink) !important;
  font: 700 0.78rem/1 Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

@media (max-width: 1100px) {
  .topbar .topbar-inner {
    gap: 16px !important;
    padding-inline: 20px !important;
  }

  .topbar .topbar-inner::before {
    display: none !important;
  }

  body > header > .header-inner,
  body > .site-header > .header-inner {
    min-height: 74px !important;
    padding: 8px 20px !important;
  }

  .brand img {
    height: 50px !important;
    max-width: 108px !important;
  }

  .menu-toggle {
    display: inline-flex !important;
  }

  body > header .header-inner > nav,
  body > .site-header .header-inner > nav,
  body > header .header-inner > #siteNav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 20px 18px !important;
    border-top: 1px solid var(--hm-header-line) !important;
    background: var(--hm-header-cream) !important;
    box-shadow: 0 15px 24px rgba(8, 35, 48, 0.14) !important;
  }

  body > header .header-inner > nav.open,
  body > .site-header .header-inner > nav.open,
  body > header .header-inner > #siteNav.open {
    display: flex !important;
  }

  body > header .header-inner > nav > a,
  body > .site-header .header-inner > nav > a,
  body > header .nav-dropdown-toggle,
  body > .site-header .nav-dropdown-toggle {
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 43px !important;
    padding: 11px 10px !important;
    text-align: left !important;
  }

  body > header .header-inner > nav > .nav-cta,
  body > .site-header .header-inner > nav > .nav-cta {
    justify-content: center !important;
    margin: 8px 0 0 !important;
  }

  .nav-dropdown {
    display: block !important;
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  .topbar .topbar-inner {
    justify-content: center !important;
    gap: 12px !important;
    min-height: 35px !important;
    padding-inline: 12px !important;
  }

  .topbar a {
    font-size: 0.64rem !important;
  }

  .topbar a[href^="mailto:"] {
    display: none !important;
  }
}
