* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.navBar {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 5;
  padding: 0.5rem 0;
  padding-right: 1rem;
  transition: 0.3s ease-in all;
}
.navBar span {
  color: white;
  margin: 0 1rem;
  cursor: pointer;
  position: relative;
}
.navBar span::before {
  position: absolute;
  display: inline;
  content: "";
  width: 0;
  height: 0.1rem;
  background-color: white;
  bottom: -0.3rem;
  transform: translate(-50%, -50%);
  left: 50%;
  transform-origin: center;
  transition: ease-in 0.1s width;
}
.navBar span:hover::before {
  width: 120%;
}
.navBar span i {
  padding-left: 0.5rem;
}
.navBar span .fevSpanContent,
.navBar span .cartSpanContent {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  background-color: white;
  right: 0;
  top: 1rem;
  width: 25rem;
  border: 1px solid black;
  border-radius: 3px;
  padding: 1rem 0.5rem 0.4rem 0.5rem;
  transition: 0.2s ease-in all;
  max-height: 20rem;
  overflow-y: scroll;
}
.navBar span .fevSpanContent .fevLog,
.navBar span .cartSpanContent .fevLog {
  background-color: white;
  width: 100%;
  color: black !important;
  display: flex;
  flex-direction: row;
  position: relative;
  border: 1px solid rgb(255, 102, 0);
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 0.5rem;
  height: -moz-fit-content;
  height: fit-content;
}
.navBar span .fevSpanContent .fevLog .fevContent,
.navBar span .cartSpanContent .fevLog .fevContent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 0.8rem;
}
.navBar span .fevSpanContent .fevLog img,
.navBar span .cartSpanContent .fevLog img {
  max-width: 10rem;
  aspect-ratio: 4/2;
}
.navBar span .fevSpanContent .fevLog .fevLogPrice,
.navBar span .cartSpanContent .fevLog .fevLogPrice {
  color: black;
  padding: 0.5rem 0;
}
.navBar span .fevSpanContent .fevLog .fevLogName,
.navBar span .cartSpanContent .fevLog .fevLogName {
  color: black;
  font-size: 1rem;
  font-weight: 600;
}
.navBar span .fevSpanContent .fevLog .fevLogName .fevLogYear,
.navBar span .cartSpanContent .fevLog .fevLogName .fevLogYear {
  font-weight: 400;
}
.navBar span .fevSpanContent .fevLog .fevLogYear,
.navBar span .cartSpanContent .fevLog .fevLogYear {
  font-size: 0.8rem;
  color: black;
  margin: 0;
  padding-left: 0.5rem;
}
.navBar span .fevSpanContent .fevLog .fevLogFevBtn,
.navBar span .cartSpanContent .fevLog .fevLogFevBtn {
  color: red;
  position: absolute;
  right: 0.5rem;
  top: 0.2rem;
  transform: scale(1.1);
}
.navBar span .fevSpanContent .fevLog .fevLogBtn,
.navBar span .cartSpanContent .fevLog .fevLogBtn {
  width: 100%;
  padding: 0.3rem;
  font-size: 0.7rem;
  margin-bottom: 0.2rem;
  border-radius: 0px;
}
.navBar span .fevSpanContent .cartItemsContainer,
.navBar span .cartSpanContent .cartItemsContainer {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 0.3rem;
  max-height: 15.7rem;
  overflow: auto;
  margin-bottom: 0.3rem;
  overflow-y: scroll;
  /* Hide scrollbar for Firefox */
  scrollbar-width: none;
  /* Hide scrollbar for IE/Edge */
  -ms-overflow-style: none;
}
.navBar span .fevSpanContent .cartItemsContainer::-webkit-scrollbar,
.navBar span .cartSpanContent .cartItemsContainer::-webkit-scrollbar {
  display: none;
}
.navBar span .fevSpanContent .cartItemsContainer .cartItemBtnContainer,
.navBar span .cartSpanContent .cartItemsContainer .cartItemBtnContainer {
  display: flex;
  width: 100%;
}
.navBar span .fevSpanContent .cartItemsContainer .cartItemBtnContainer .carItemViewMore,
.navBar span .cartSpanContent .cartItemsContainer .cartItemBtnContainer .carItemViewMore {
  width: 100%;
  border: 1px solid orangered;
  background-color: transparent;
  width: 100%;
  padding: 0.3rem 0.1rem;
  font-size: 0.7rem;
  width: 100%;
  margin: 0 auto;
  margin-left: 0.5rem;
  margin-bottom: 0.2rem;
  border-radius: 0px;
  cursor: pointer;
}
.navBar span .fevSpanContent .cartItemContent,
.navBar span .cartSpanContent .cartItemContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.5rem;
}
.navBar span .fevSpanContent .cartItem,
.navBar span .cartSpanContent .cartItem {
  background-color: white;
  width: 100%;
  color: black !important;
  position: relative;
  border: 1px solid rgb(255, 102, 0);
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 0.5rem;
  height: 6.5rem;
  display: flex;
  flex-direction: row;
}
.navBar span .fevSpanContent .cartItem img,
.navBar span .cartSpanContent .cartItem img {
  max-width: 10rem;
  aspect-ratio: 4/2;
}
.navBar span .fevSpanContent .cartItem .cartItemPrice,
.navBar span .cartSpanContent .cartItem .cartItemPrice {
  color: black;
  padding: 0.5rem 0;
  text-align: center;
}
.navBar span .fevSpanContent .cartItem .cartItemName,
.navBar span .cartSpanContent .cartItem .cartItemName {
  color: black;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}
.navBar span .fevSpanContent .cartItem .cartItemName .cartItemYear,
.navBar span .cartSpanContent .cartItem .cartItemName .cartItemYear {
  font-weight: 400;
}
.navBar span .fevSpanContent .cartItem .cartItemYear,
.navBar span .cartSpanContent .cartItem .cartItemYear {
  font-size: 0.8rem;
  color: black;
  margin: 0;
  padding-left: 0.5rem;
}
.navBar span .fevSpanContent .cartItem .cartItemBtn,
.navBar span .cartSpanContent .cartItem .cartItemBtn {
  width: 100%;
  padding: 0.3rem;
  font-size: 0.7rem;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 0.2rem;
  border-radius: 0px;
}
.navBar span .fevSpanContent .cartCheckOutBtn,
.navBar span .cartSpanContent .cartCheckOutBtn {
  width: 100%;
  border-radius: 0;
  padding: 0.5rem 0.3rem;
  letter-spacing: 0.1rem;
}
.navBar span:nth-child(1):hover i {
  color: red;
}

.navBarScrolled {
  background: linear-gradient(189deg, rgb(254, 127, 34) 0%, rgba(154, 93, 49, 0) 60%, rgba(254, 126, 34, 0) 100%);
}

.navBar span div.spanClicked {
  opacity: 1;
  visibility: visible;
  top: 3rem;
}

@media screen and (max-width: 700px) {
  .navBarScrolled {
    background: none;
    background-color: #fe7f22;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  .navBar {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 5;
    padding: 0.5rem 0;
    padding-right: 1rem;
    transition: 0.3s ease-in all;
    margin-top: 0.01rem;
  }
  .navBar span {
    color: white;
    margin: 0 1rem;
    cursor: pointer;
    position: static;
    color: black;
  }
  .navBar span::before {
    position: absolute;
    display: inline;
    content: "";
    width: 0;
    height: 0.1rem;
    background-color: white;
    bottom: -0.3rem;
    transform: translate(-50%, -50%);
    left: 50%;
    transform-origin: center;
    transition: ease-in 0.1s width;
  }
  .navBar span:hover::before {
    width: 0;
  }
  .navBar span i {
    padding-left: 0.5rem;
  }
  .navBar span .fevSpanContent,
  .navBar span .cartSpanContent {
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    background-color: white;
    left: 50%;
    top: 1rem;
    width: 98dvw;
    border: 1px solid black;
    border-radius: 3px;
    padding: 1rem 0.5rem 0.4rem 0.5rem;
    transition: 0.2s ease-in all;
    max-height: 20rem;
    overflow-y: scroll;
    transform: translateX(-50%);
    overflow: auto;
    /* or scroll */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
  }
  .navBar span .fevSpanContent::-webkit-scrollbar,
  .navBar span .cartSpanContent::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
  }
  .navBar span .fevSpanContent .cartItemsContainer,
  .navBar span .cartSpanContent .cartItemsContainer {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 0.3rem;
    max-height: 15.7rem;
    overflow: auto;
    margin-bottom: 0.3rem;
    height: auto;
    overflow-y: scroll;
    overflow: auto;
    /* or scroll */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
  }
  .navBar span .fevSpanContent .cartItemsContainer::-webkit-scrollbar,
  .navBar span .cartSpanContent .cartItemsContainer::-webkit-scrollbar {
    display: none;
  }
  .navBar span .fevSpanContent .cartItemsContainer .cartItemContent,
  .navBar span .cartSpanContent .cartItemsContainer .cartItemContent {
    height: -moz-fit-content;
    height: fit-content;
    min-height: -moz-fit-content;
    min-height: fit-content;
  }
  .navBar span .fevSpanContent .cartItem,
  .navBar span .cartSpanContent .cartItem {
    background-color: white;
    width: 100%;
    color: black !important;
    position: relative;
    border: 1px solid rgb(255, 102, 0);
    overflow: hidden;
    border-radius: 3px;
    margin-bottom: 0.5rem;
    height: auto;
    display: flex;
    flex-direction: row;
  }
  .navBar span .fevSpanContent .fevLog,
  .navBar span .cartSpanContent .fevLog {
    background-color: white;
    width: 100%;
    color: black !important;
    display: flex;
    flex-direction: row;
    position: relative;
    border: 1px solid rgb(255, 102, 0);
    overflow: hidden;
    border-radius: 3px;
    margin-bottom: 0.5rem;
    height: -moz-fit-content;
    height: fit-content;
  }
  .navBar span .fevSpanContent .fevLog .fevContent,
  .navBar span .cartSpanContent .fevLog .fevContent {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 0.8rem;
  }
  .navBar span .fevSpanContent .fevLog img,
  .navBar span .cartSpanContent .fevLog img {
    max-width: 10rem;
    aspect-ratio: 4/2;
  }
  .navBar span .fevSpanContent .fevLog .fevLogPrice,
  .navBar span .cartSpanContent .fevLog .fevLogPrice {
    color: black;
    padding: 0.5rem 0;
  }
  .navBar span .fevSpanContent .fevLog .fevLogName,
  .navBar span .cartSpanContent .fevLog .fevLogName {
    color: black;
    font-size: 1rem;
    font-weight: 600;
  }
  .navBar span .fevSpanContent .fevLog .fevLogName .fevLogYear,
  .navBar span .cartSpanContent .fevLog .fevLogName .fevLogYear {
    font-weight: 400;
  }
  .navBar span .fevSpanContent .fevLog .fevLogYear,
  .navBar span .cartSpanContent .fevLog .fevLogYear {
    font-size: 0.8rem;
    color: black;
    margin: 0;
    padding-left: 0.5rem;
  }
  .navBar span .fevSpanContent .fevLog .fevLogFevBtn,
  .navBar span .cartSpanContent .fevLog .fevLogFevBtn {
    color: red;
    position: absolute;
    right: 0.5rem;
    top: 0.2rem;
    transform: scale(1.1);
  }
  .navBar span .fevSpanContent .fevLog .fevLogBtn,
  .navBar span .cartSpanContent .fevLog .fevLogBtn {
    width: 100%;
    padding: 0.3rem;
    font-size: 0.7rem;
    margin-bottom: 0.2rem;
    border-radius: 0px;
  }
}/*# sourceMappingURL=navBar.css.map */