/* Header */

.headTop,
.headBottom {
  background-color: var(--primaryColor);
  color: white;
}

.headTop .container {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}

.headTop .number {
  padding-left: 5px;
  padding-right: 15px;
}

.headTop .number>a {
  text-decoration: none;
  color: white;
}

.headTop .message {
  display: none;
  padding-left: 10px;
  border-left: solid 1px white;
}

.headTop .currency>select {
  appearance: none;
  width: 45px;
  border: none;
  color: white;
  cursor: pointer;
  background-color: var(--primaryColor);
  background: url(/asset/icon/dropdown.png) no-repeat right;
}

.headTop .social {
  border-left: solid 1px white;
  margin-left: 10px;
}

.headTop .social img {
  padding-left: 12px;
}

.headMain {
  background-color: white;
}

.headMain>.container {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

.headMain .end {
  align-self: center;
  display: none;
}

.headMain .menuBtn {
  display: flex;
}

.headMain .end a {
  text-decoration: none;
  color: var(--secondaryColor);
}

.headMain .end>input {
  width: 350px;
  height: 35px;
  border-radius: 40px;
  border: solid 2px var(--primaryColor);
  padding: 5px 10px;
  align-self: center;
}

.headMain .end>input:focus-visible {
  outline: solid 1px var(--primaryColor);
}

.headMain .end .icon {
  position: relative;
  right: 7%;
  padding: 5px 10px;
  cursor: pointer;
  height: 35px;
  align-self: center;
}

.headMain .end .d-flex img {
  height: fit-content;
  align-self: center;
}

.headMain .subHead,
.headMain .mainHead {
  margin: 0px;
}

.headMain .mainHead {
  font-weight: bold;
  margin-top: -5px;
}

.headBottom {
  height: 64px;
}

.headBottom marquee {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 94%;
  padding: 20px 10px;
}

.headBottom .container {
  display: none;
  justify-content: space-between;
  font-weight: bold;
}

.headBottom ul {
  list-style: none;
  padding-left: 0px;
}

.headBottom a {
  color: white;
  text-decoration: none;
}

.headBottom ul a li {
  float: left;
  margin-right: 20px;
  margin-left: 20px;
  padding: 20px 10px;
}

.headBottom .end {
  padding: 20px 0px;
}

.headBottom .end img {
  float: right;
  margin-top: -40px;
}

.catDropDown {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  justify-content: space-between;
  background-color: var(--primaryColor);
  padding: 1.5em 50px;
}

.catDropDown h6 {
  font-weight: bold;
}

.catDropDown a {
  display: block;
  font-weight: normal;
  margin-top: 5px;
}

.catDrop,
.bunDrop {
  float: left;
  padding: 20px 10px;
}

.cursorPointer {
  cursor: pointer;
}

.catDrop:hover .catDropDown {
  display: flex;
}

.bunDropDown {
  position: absolute;
  top: 100%;
  padding: 16px 0px;
  background-color: var(--primaryColor);
  display: none;
}

.bunDropDown li {
  float: none !important;
  padding: 10px 10px !important;
}

.bunDrop:hover .bunDropDown {
  display: block;
}

.offcanvas-body>.headerMenu {
  font-weight: bold;
  background-color: var(--primaryColor);
}

.offcanvas-body>.headerMenu ul {
  list-style: none;
  padding-left: 0px;
  color: white;
}

.offcanvas-body>.headerMenu ul li {
  padding: 10px 0px;
}

.offcanvas-body>.headerMenu a {
  color: white;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

.offcanvas-body>.headerMenu .end img {
  vertical-align: bottom;
}

.hCatDropDown div {
  margin-top: 20px;
}

.hCatDropDown div h6 {
  font-weight: bold;
}

.hCatDropDown div a {
  font-weight: normal;
  margin-left: 20px;
}

.hCatDropDown {
  display: none;
}

.hCatDrop:hover>.hCatDropDown {
  display: block;
}

.hBunDropDown {
  display: none;
}

.hBunDrop:hover>.hBunDropDown {
  display: block;
  margin-top: 20px;
  margin-left: 20px;
}

.header a {
  text-decoration: none;
  color: var(--secondaryColor);
}

.header>input {
  width: 100%;
  height: 35px;
  border-radius: 40px;
  border: solid 2px var(--primaryColor);
  padding: 5px 10px;
  align-self: center;
}

.header>input:focus-visible {
  outline: solid 1px var(--primaryColor);
}

.header .icon {
  position: relative;
  left: 88%;
  bottom: 23.5%;
  padding: 5px 10px;
  cursor: pointer;
}

.header .d-flex img {
  height: fit-content;
  align-self: center;
}

.header .subHead,
.header .mainHead {
  margin: 0px;
}

.header .mainHead {
  font-weight: bold;
  margin-top: -5px;
}

/* Responsive */

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .headTop .message {
    display: inline;
  }

  .headBottom marquee {
    display: none;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .headMain .end {
    display: flex;
  }

  .headMain .menuBtn {
    display: none;
  }

  .headBottom .container {
    display: flex;
  }
}