@font-face {
  font-family: "bold";
  src: url(../fonts/montserrat/static/Montserrat-Bold.ttf);
}
@font-face {
  font-family: "regular";
  src: url(../fonts/montserrat/static/Montserrat-Regular.ttf);
}
@font-face {
  font-family: "light";
  src: url(../fonts/montserrat/static/Montserrat-Light.ttf);
}
.font-bold {
  font-family: "bold";
}
.font-regular {
  font-family: "regular";
}
.font-light {
  font-family: "light";
}
.color-000000 {
  color: #000000;
}
.color-343434 {
  color: #343434;
}
.color-707070 {
  color: #707070;
}
.color-FFFFFF {
  color: #ffffff;
}
.color-FF004F {
  color: #ff004f;
}
.color-138808 {
  color: #138808;
}
.color-1877F2 {
  color: #1877f2;
}
.color-0000EE {
  color: #0000ee;
}
.color-FFD700 {
  color: #ffd700;
}
.bg-color-000000 {
  background-color: #000000;
}
.bg-color-F5F5F5 {
  background-color: #f5f5f5;
}
.bg-color-F8F8F8 {
  background-color: #f8f8f8;
}
.bg-color-FDFDFD {
  background-color: #fdfdfd;
}
.bg-color-FFFFFF {
  background-color: #ffffff;
}
.bg-color-FF004F {
  background-color: #ff004f;
}
.bg-color-138808 {
  background-color: #138808;
}
.bg-color-1877F2 {
  background-color: #1877f2;
}
.bg-color-0000EE {
  background-color: #0000ee;
}
.text-centre {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.no-decoration {
  text-decoration: none;
}
.margin-0 {
  margin: 0rem;
}
.margin-top-100 {
  margin-top: 6.25rem;
}
.margin-top-110 {
  margin-top: 110px;
}
.margin-top-115 {
  margin-top: 115px;
}
.margin-bottom-5 {
  margin-bottom: 5px;
}
.margin-bottom-10 {
  margin-bottom: 10px;
}
.margin-bottom-20 {
  margin-bottom: 1.25rem;
}
.margin-left-20 {
  margin-left: 1.25rem;
}
.margin-left-5 {
  margin-left: 5px;
}
.margin-left-10 {
  margin-left: 1.25rem;
}
.margin-right-20 {
  margin-right: 1.25rem;
}
.margin-right-10 {
  margin-right: 10px;
}
.margin-right-5 {
  margin-right: 5px;
}
.padding-0 {
  padding: 0rem;
}
.padding-bottom-5 {
  padding-bottom: 5px;
}
.padding-bottom-10 {
  padding-bottom: 10px;
}
.padding-bottom-20 {
  padding-bottom: 20px;
}
.border-000000 {
  border: 1px solid #000000;
}
.border-FF004F {
  border: 0.0625rem solid #ff004f;
}
.border-1877F2 {
  border: 0.0625rem solid #1877f2;
}
.border-138808 {
  border: 0.0625rem solid #138808;
}
.border-bottom-000000 {
  border-bottom: 1px solid #000000;
}
.border-bottom-FF004F {
  border-bottom: 2px solid #ff004f;
}
.border-bottom-138808 {
  border-bottom: 1px solid #138808;
}
.border-bottom-1877F2 {
  border-bottom: 1px solid #1877f2;
}
.border-bottom-707070 {
  border-bottom: 0.0625rem solid #707070;
}
.border-bottom-0000EE {
  border-bottom: 0.0625rem solid #0000ee;
}
.box-shadow {
  box-shadow: 0.0625rem 0.0625rem 0.125rem #000000;
}
::placeholder {
  color: #707070;
  opacity: 0.6;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #707070;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #707070;
}
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sm-300 {
  width: 18.75rem;
}
body {
  margin: 0rem;
}
footer .desc-small {
  margin: 0rem;
  padding: 0.3125rem 0rem;
}
.overflow-wrapper {
  overflow-x: hidden;
  margin: 0rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.logo-100 {
  width: 6.25rem;
  height: 6.25rem;
}
.logo-50 {
  width: 3.125rem;
  height: 3.125rem;
}
/* navbar */
.nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fdfdfd;
  z-index: 9999;
}
.nav-banner {
  width: inherit;
  padding: 0.625rem 0rem;
}
.nav-anchor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem 1.25rem;
}
.user-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-icon {
  padding-top: 1.25rem;
}
.notification-icon {
  padding-top: 1.25rem;
}
.user-avatar {
  display: block;
}
.icon-badge {
  display: block;
  height: 1.25rem;
  width: 1.25rem;
  line-height: 1.25rem;
  border-radius: 3.125rem;
  font-size: 0.625rem;
  position: relative;
  top: -2.1875rem;
  right: -1.25rem;
}
.nav-panel,
.search-panel,
.cart-panel,
.notification-panel,
.profile-panel {
  margin: 0rem;
  padding: 0rem;
  height: 0rem;
}
.profile-panel {
  margin: 0rem;
  padding: 0rem;
  height: 0rem;
}
.nav-menu,
.search-menu,
.cart-menu,
.notification-menu,
.profile-menu {
  display: none;
  height: 85vh;
  list-style: none;
  margin: 0rem;
  padding: 0rem;
  font-size: 1.25rem;
}
.sub-nav-menu {
  list-style: none;
  margin: 0rem;
  padding: 0rem;
  font-size: 1.25rem;
}
.nav-item,
.sub-nav-item {
  padding: 1.25rem 0rem 0rem 1.25rem;
}
/*button*/
.btn-primary {
  display: block;
  width: 18.75rem;
  height: 2.5rem;
  line-height: 2.5rem;
  border-radius: 1.5625rem;
  text-transform: uppercase;
  text-decoration: none;
}
.btn-primary:hover {
  cursor: pointer;
}
.btn-secondary {
  text-transform: uppercase;
  text-decoration: none;
}
.btn-secondary:hover {
  cursor: pointer;
}
.btn-msg {
  font-size: 0.625rem;
  padding-top: 0.4375rem;
}
/* feature category */
.featured-categories {
  width: 95vw;
}
.featured-category-title,
.tile-title {
  margin: 0px;
  margin-top: -5px;
}
.featured-category-note {
  letter-spacing: 0.5008px;
}
.featured-category-body {
  display: flex;
  justify-content: center;
  align-items: center;
}
.featured-category-body-reverse {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.featured-category-tile,
.customer-feedback-tile {
  width: 18.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.hero-tile {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.tile-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.desktop-promotion {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promotion-image {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.round-image {
  border-radius: 50%;
  height: 18.75rem;
  width: 18.75rem;
  object-fit: cover;
}
.feedback-tile-desc {
  padding-bottom: 1.25rem;
}
.tile-cta-subscribed,
.tile-cta-signup,
.tile-cta-resend {
  display: none;
}
.subscription-name,
.subscription-otp,
.user-info-hidden {
  display: none;
}
.subscription-inputs,
.subscription-otp {
  /* height: 9.375rem; */
}
.subscription-input-wrapper {
  height: 3.75rem;
}
.subscription-input {
  border: 0.0625rem solid #707070;
  line-height: 1.5;
  padding: 0.3125rem;
  padding-left: 1.25rem;
}
.auth-status {
  height: 40px;
}
.subscription-timer {
  display: none;
}
.subscription-spinner-wrapper {
  display: none;
}
.subscription-spinner {
  width: 1.875rem;
  height: 1.875rem;
}
.name-error,
.tel-error,
.otp-error {
  padding: 0.4375rem;
}
.confirmation-hidden {
  opacity: 0;
}
.subscription-section {
  height: 270px;
}

/*feedback*/
.feedback-section {
  height: 260px;
}
.rating-figures {
  padding-bottom: 0.625rem;
}
.rating-excellent {
  width: 90%;
}
.rating-good {
  width: 70%;
}
.rating-average {
  width: 50%;
}
.rating-poor {
  width: 30%;
}
.rating-bar {
  display: flex;
  padding: 0.3125rem;
}
.rating-title {
  width: 20%;
  height: 0.625rem;
  padding: 0.1875rem;
  font-size: 0.625rem;
  line-height: 0.625rem;
}
.rating-progress-outer {
  width: 60%;
  height: .9375rem;
  border-radius: .625rem;
}
.rating-progress-inner {
  height: .9375rem;
  border-radius: .625rem;
}
.rating-count {
  width: 20%;
  height: 0.625rem;
  padding: 0.1875rem;
  font-size: 0.625rem;
  line-height: 0.625rem;
}
.customer-feedabck {
  padding-bottom: 0.625rem;
}
.review-header {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  padding-bottom: 0.3125rem;
}
.review-image {
  width: 30%;
}
.reviewer-details {
  width: 40%;
}
.review-history {
  width: 30%;
}
.reviewer-rating {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.review-body {
  border-left: 5px solid #ff004f;
  padding-left: 10px;
  font-size: 0.625rem;
}
.subscription-confirmation {
  display: none;
}
.subscription-error,
.subscription-warning {
  display: none;
}
.confirmation-title,
.subscription-error-title {
  text-transform: capitalize;
  padding: 0.3125rem;
}
.confirmation-desc,
.subscription-error-desc {
  text-transform: capitalize;
  padding: 0.3125rem;
}
@media screen and (max-width: 25.875rem) {
  /*ulitity classes*/
  .title-large {
    font-size: 1.875rem;
  }
  .title-regular {
    font-size: 1.5625rem;
  }
  .title-small,
  .hero-text {
    font-size: 20px;
  }
  .desc-large {
    font-size: 20px;
  }
  .desc-regular {
    font-size: 0.9375rem;
  }
  .desc-small {
    font-size: 0.625rem;
  }
  .nav-icon {
    font-size: 1.5625rem;
  }
  .search-icon {
    margin-left: 1.25rem;
    font-size: 1.5625rem;
  }
  .cart-icon {
    margin-left: 1.25rem;
    font-size: 1.5625rem;
  }
  .notification-icon {
    margin-left: 1.25rem;
    font-size: 1.5625rem;
  }
  .profile-icon {
    margin-left: 1.25rem;
    font-size: 1.5625rem;
  }

  .featured-category-body {
    flex-direction: column;
  }
  .featured-category-body-reverse {
    align-items: center;
    flex-direction: column-reverse;
  }
  .featured-category-tile,
  .hero-tile,
  .customer-feedback-tile {
    margin: 0px 10px 20px 10px;
  }
  .subscription-input {
    border-radius: 1.25rem;
  }
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox
  input[type="number"] {
    -moz-appearance: textfield;
  } */
  .promotion-desktop {
    display: none;
  }
}
@media screen and (min-width: 64.0625rem) and (max-width: 120rem) {
  /*utility classes*/
  .title-large {
    font-size: 1.875rem;
  }
  .title-regular,
  .hero-text {
    font-size: 25px;
  }
  .title-small {
    font-size: 20px;
  }
  .desc-large {
    font-size: 1.25rem;
  }
  .desc-regular {
    font-size: 0.9375rem;
  }
  .desc-small {
    font-size: 0.625rem;
  }
  /*component classes*/
  .nav-icon {
    font-size: 1.875rem;
  }
  .search-icon {
    margin-left: 3.125rem;
    font-size: 1.875rem;
  }
  .cart-icon {
    margin-left: 3.125rem;
    font-size: 1.875rem;
  }
  .notification-icon {
    margin-left: 3.125rem;
    font-size: 1.875rem;
  }
  .profile-icon {
    margin-left: 3.125rem;
    font-size: 1.875rem;
  }
  .hero-tile {
    width: 80%;
  }
  .featured-category-tile,
  .hero-tile,
  .customer-feedback-tile {
    margin: 0px 40px 40px 40px;
  }
  .featured-category-body,
  .featured-category-body-reverse {
    flex-wrap: wrap;
  }
  .desktop-promotion {
    display: flex;
  }
  .subscription-input {
    border-radius: 1.875rem;
  }
}