#heading-offers {
  padding: 0.1em;
  font-family: poppins
}

header {
  position: sticky;
  top: 0px;
  z-index: 100000;
}

#nav-bar{
  background: white;
}

/* #logo a{
  background-image: url(../../icons/logo-img.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
} */

div#user-navigation {
  margin-top: 1em;
}

#section02 {
  display: flex;
  justify-content: space-between;
  align-items: end;
  width: 100%;
}

#left-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  font-family: 'poppins-light';
}


#area-pincode {
  display: flex;
  justify-content: center;
  width: 100%;
  /* box-shadow: 0px 1px 5px #b9b9b9; */
}

#area-pincode:hover{
  box-shadow: 0px 3px 8px rgb(65, 65, 65);
}

#area-pincode .title {
  font-family: poppins;
}

#area-pincode .pin-value {
  text-align: end;
      position: absolute;
    right: -9em;
}

#area-pincode:hover {
  cursor: pointer;
  text-shadow: 1px 2px 4px #0000008f;
}

#right-side-navigation {
  display: flex;
  justify-content: center;
}

/* USER NAVIGATION**************************************   */

#profile {
  width: 2em;
  height: 2em;
  background-image: url(../../icons/profile-icon.png);
}

#profile-data {
  display: block;
  width: 24em;
  background: white;
  height: 150vh;
  max-height: 150vh;
  position: fixed;
  top: 0em;
  right: 0em;
  border: 1px solid #00000026;
  font-family: poppins-light;
  box-shadow: 0px 1px 5px #8b8b8b;
  transition: all 0.2s ease-in-out;
}

#profile-data li:hover {
  box-shadow: 0px 0px 8px #000000c7;
}

#profile-data li#opt01:hover{
  box-shadow: none;
}

.profile-show {
  transform: translateX(0em);
  /* display: block; */
}

.profile-hide {
  transform: translateX(24em);
  /* display: none; */
}

/* #user:active  #profile-data{
  width: 24em;
} */

#profile-data li {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  /* font-family: poppins; */
}

#profile-data li div#profile-div {
  height: 14em;
  width: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column wrap;
}

#profile-data li div#profile-div:hover {
  opacity: 100%;
}

#user-profile-pic {
  width: 8em;
  height: 8em;
  border-radius: 100px;
  background-image: url(../../icons/user-profile-default.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#profile-data #profile-div #user-name {
  text-align: center;
  font-size: 1.5em;
  font-family: poppins;
  color: black;
  font-weight: 1000;
  margin-bottom: -2em;
}

#profile .user-details {
  display: block;
}

#profile-data li#01 {
  margin: 0px 0px;
}

#profile-data li {
      /* border-block: 1px solid rgba(0, 0, 0, 0.37); */
    margin: 0.5em 0px;
    box-shadow: 0px 1px 5px #b9b9b9;
  margin: 2px 0px;
}

#profile-data li a,
#profile-data li p {
  width: 100%;
  background-position: right 5% center;
  background-size: 6%;
  display: flex;
  justify-content: center;
  background-repeat: no-repeat;
  color: black;
  text-decoration: none;
  line-height: 4em;
  font-family: poppins;
  cursor: pointer;
}

.address {
  line-height: 2em;
}

#user-number {
  background-image: url(../../icons/pen.svg);
}

#user-area-pincode {
  background-image: url(../../icons/location.svg);
}

#user-orders {
  background-image: url(../../icons/truck.svg);

}

#user-payment-methods {
  background-image: url(../../icons/credit-card.svg);
}

#user-help {
  background-image: url(../../icons/profile-mail.png);
}


#profile-data #user-wallet{
  background-image: url(../../icons/wallet-icon.svg);
  background-size: 5%;
}
/* ********************************************************** */

#liked-items div {
  width: 2em;
  height: 2em;
  background-image: url(../../icons/wishlist-icon.png);
}


#cart div {
  width: 2em;
  height: 2em;
  background-image: url(../../icons/cart-icon.png);
}

#user-navigation {
  background-color: #FFF1D2;
  min-height: 5em;
}

#reviews {
  position: relative;
  top: 0.4em;
  font-family: bilbo;
  color: black;
  font-size: 120%;
}

#search{
  width: 2em;
  height: 2em;
  background-image: url(../../icons/search-icon.png);
}

#search-area {
  display: none;
  position: fixed;
  top: 0em;
  left: 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-flow: column;
  gap: 0.5em;
  z-index: 100000;
}

#search-container{
  background: white;
}

#search-bar {
line-height: 3em;
    min-width: 35rem;
    width: 100vw;
    max-width: 50rem;
    padding-left: 3em;
    border: none;
    background-image: url(../../icons/search-icon.png);
    background-repeat: no-repeat;
    background-position: left 2% center;
    background-size: 1em;
    font-size: 1.2em;
    font-family: poppins-light;
    letter-spacing: 0.5px;
    border-radius: 0px;
  box-shadow: 0px 1px 4px rgb(184, 184, 184);
}

#search-bar:focus{
  outline: none;
}

#search-suggestion {
  border: 1px solid rgba(223, 223, 223, 0.486);
  border-radius: 0px;
  min-width: 20em;
  min-height: 5em;
  max-height: 36em;
  z-index: 1000;
  display: none;
  background-color: white;
  overflow-y: scroll;
  scrollbar-width: none;
  margin-top: 5px;
}

#search-bar:focus~#search-suggestion,
#search-suggestion:focus {
  display: block;
}

#result-container {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: start;
  flex-flow: column;
  line-height: 2em;
}

#result-container li {
  width: 100%;
  padding-left: 1em;
  font-family: 'poppins-light';
  overflow-x: hidden;
  scrollbar-width: none;
  display: flex;
  flex-flow: row nowrap;
  height: 2em;
  font-size: 1.2em;
  font-weight: lighter;
}

#result-container li:hover {
  box-shadow: 0px 2px 8px rgb(184, 184, 184);
}

#user-navigation #navigation-content {
  display: flex;
  gap: 2em;
  justify-content: center;
  align-items: center;
  min-height: 5em;
  padding: 0em 1em;
  width: 100%;
}

#left-navigation #logo a {
  font-family: logo;
  /* margin-left: 0.2em; */
  text-decoration: none;
  line-height: 1em;
}

.logo-small{
  font-size: 2.5em;
}


#upper-rectangle {
  height: 100%;
  width: 100%;
}


#left-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
}


#right-section {
  display: flex;
  align-items: end;
  flex-flow: column nowrap;
}

#navigation-content {
  height: fit-content
}

/* PRODUCT NAVIGATION *************************************** */

#product-navigation {
  display: flex;
  align-items: center;
  /* outline: 1px solid #868686; */
  height: 4em;
  justify-content: space-between;
  gap: 2em;
  position: sticky;
  top: 1px;
  background-color: transparent;
  /* backdrop-filter: blur(3px);
  overflow-x: hidden;
  overflow-y: hidden; */
  z-index: 100;
  padding: 0em 2em;
}

#product-navigation ul {
  list-style: none;
}

ul#left-navigation-lists,
#right-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  font-family: poppins;
  font-weight: bold;
  /* margin: 0em 3em 0em 1em; */
}

#left-navigation-lists {
  margin-left: 0em;
  line-height: 3em
}

#filters {
  background-image: url(../../icons/filters.svg);
  display: inline-block;
  height: 1.5em;
  width: 1.5em;
}

#tag {
  color: #E69800;
  font-family: poppins;
  font-size: 0.5em;
}

.main-categories {
  font-family: eb-garamond;
  font-weight: bolder;
  font-size: 1.3em;
  height: 2em;
  background-color: #F3F3F3;
}

.sub-category a {
  font-size: 0.8em;
  color: #222222;
  text-decoration: none;
}

.sub-category a:hover {
  text-decoration: underline;
}

.sub-category:hover {
  background-color: white;
  opacity: 100%;
}

.options {
  max-height: 29em;
  overflow-y: auto;
  scrollbar-width: none;
}


/*  Address side bar styling 
*/

ul#address-sidebar {
  position: fixed;
  display: block;
  min-height: 150dvh;
  top: -1em;
  min-width: 24em;
  right: 0em;
  z-index: 20000;
  display: none;
}

ul#address-sidebar:hover {
  opacity: 100%;
}

button#back-to-profile-sidebar {
  height: 2em;
  width: 2em;
  margin-left: 0.3em;
  background-image: url(../../icons/back.png);
  background-size: contain;
  background-repeat: no-repeat;
  outline: none;
  border: none;
  background-color: #fff0;
  border-radius: 30px;
}

button#back-to-profile-sidebar:hover {
  opacity: 60%;
  /* background-color: #e699008e; */
}

button#back-to-profile-sidebar:active {
  opacity: 50%;
  /* background-color: #e699008e; */
}

ul#address-sidebar li {
  min-height: 11em;
  width: 91%;
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 15px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3em;
}

ul#address-sidebar li p {
  font-family: poppins-light;
  font-weight: lighter;
  letter-spacing: 2px;
  padding: 1em;
  line-height: 2em;
}

ul#address-sidebar p#refer-to-add-address-page {
  color: #E69800;
  font-family: poppins;
  font-size: 1.1em;
  margin-top: 3em;
  /* line-height: 3em; */
}

ul#address-sidebar p#refer-to-add-address-page:active {
  opacity: 50%;
}

/* delete button in the address cards */

ul#address-sidebar li div.delete-button {
  height: 1.5em;
  width: 2em;
  /* background-color: #E69800; */
  position: absolute;
  right: 2em;
  margin-bottom: 8em;
  background-image: url(../../icons/delete-icon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  display: none;
}

ul#address-sidebar li:hover div.delete-button {
  display: block;
}

#product-navigation .icon {
  height: 1.5em;
  width: 1.5em;
  background-position: center center;
}


#temp-pin-bttn {
  display: flex;
  justify-content: center;
  align-items: center;
}

#temp-pincode-dialog-bttn {
  background: none;
  border: none;
  font-family: 'poppins';
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1em;
  margin-top: 2em;
}

#temp-pincode-dialog-bttn:active {
  opacity: 50%;
}

#temp-pincode-dialog-bttn {
  cursor: pointer;
}

#temp-pin-global-screen {
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: #22222247;
  visibility: hidden;
}


#temp-pin-dialog-box {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  height: 26em;
  width: 24em;
  background: white;
  flex-flow: column;
  transition: transform 0.5s cubic-bezier(0, 1.05, 0, 0.99);
}

.temp-pindb-hidden {
  transform: translateY(100vh);
}

.temp-pindb-visible {
  transform: translateY(0em);
}

#temp-pin-dialog-box input {
  height: 3em;
  width: 20em;
  border: 2px solid #00000069;
  text-align: center;
  letter-spacing: 3px;
}

#temp-pin-dialog-box button {
  height: 3em;
  width: 7em;
  font-family: 'poppins';
  margin-top: 1em;
  background-color: var(--theme-second);
  color: white;
  border: none;
  border-radius: 5px;
}

#temp-pin-dialog-box button:active {
  opacity: 50%;
}


#temp-pin-dialog-box button:hover {
  background-color: rgb(233, 107, 122);
}

.loading-screen {
  /* visibility: hidden; */
  transform: translateY(100vh);
  transition: all 0.5s cubic-bezier(0, 1.11, 0, 0.96);
}


#login-dialogbox {
  position: fixed;
  top: 0em;
  left: 0em;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: #0000004a;
  z-index: 100000000;
  transform: translateY(100dvh);
  transition: all 0.5s cubic-bezier(0, 1.11, 0, 0.96);
  visibility: hidden;
}


#login-dialogbox #login-container {
  box-shadow: 0px 1px 3px 0px rgb(204 204 204);
  border-radius: 5px;
}

@media screen and (max-width: 540px) {
  #product-navigation {
    border-bottom: none;
  }


  #product-navigation .icon {
    height: 2em;
    width: 2em;
  }

  #filter-container ul {
    /* width: 24em; */
    margin-top: 2.5em;
    /* height: 100dvh; */
  }

  #user-navigation #navigation-content {
    flex-flow: column nowrap;
    align-items: start;
    gap: 0em;
  }

  #category-list {
    margin-left: -5.5em;
  }

  #slider {
    width: 1.5em;
    height: 1.5em;
  }
}

@media screen and (max-width: 1820px) {
  #filter-container ul {
    left: -324px;
  }
}