@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-weight: bold; */
}
.font-regular {
  font-family: "regular";
}
.font-light {
  font-family: "light";
  /* font-weight: lighter; */
}
.color-000000 {
  color: #000000;
}
.color-36454F {
  color: #36454F;
}
.color-343434 {
  color: #343434;
}
.color-707070 {
  color: #707070;
}
.color-999999 {
  color: #999999;
}
.color-FFFFFF {
  color: #ffffff;
}
.color-FF004F {
  color: #ff004f;
}
.color-138808 {
  color: #138808;
}
.color-1877F2 {
  color: #1877f2;
}
.color-0000EE {
  color: #0000ee;
}
.color-0000EE-blur {
  color: #0000ee;
  opacity: 0.5;
}
.color-FFD700 {
  color: #ffd700;
}
.color-facebook {
  color: #4267b2;
}
.color-twitter {
  color: #1da1f2;
}
.color-youtube {
  color: #ff0000;
}
.color-insta {
  color: #fa7e1e;
}
.bg-color-000000 {
  background-color: #000000;
}
.bg-color-36454F{
  background-color: #36454F;
}
.bg-color-F2F0F5 {
  background-color: #f2f0f5;
}
.bg-color-F5F5F5 {
  background-color: #f5f5f5;
}
.bg-color-F8F8F8 {
  background-color: #f2f0f5;
}
.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;
}
.bg-color-facebook {
  background-color: #4267b2;
}
.bg-color-twitter {
  background-color: #1da1f2;
}
.bg-color-youtube {
  background-color: #ff0000;
}
.bg-color-insta {
  background-color: #fa7e1e;
}
.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-115 {
  margin-top: 7.1875rem;
}
.margin-bottom-5 {
  margin-bottom: .3125rem;
}
.margin-bottom-10 {
  margin-bottom: .625rem;
}
.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: .625rem;
}
.margin-right-5 {
  margin-right: .3125rem;
}
.padding-0 {
  padding: 0rem;
}
.padding-5 {
  padding: .3125rem;
}
.padding-20 {
  padding: 1.25rem;
}
.padding-top-5 {
  padding-top: .3125rem;
}
.padding-top-10 {
  padding-top: .625rem;
}
.padding-top-20 {
  padding-top: 1.25rem;
}
.padding-bottom-5 {
  padding-bottom: .3125rem;
}
.padding-bottom-10 {
  padding-bottom: .625rem;
}
.padding-bottom-20 {
  padding-bottom: 1.25rem;
}
.border-FF004F {
  border: 0.0625rem solid #ff004f;
}
.border-1877F2 {
  border: 0.0625rem solid #1877f2;
}
.border-138808 {
  border: 0.0625rem solid #138808;
}
.border-bottom-FFFFFF {
  border-bottom: 1px solid #ffffff;
}
.border-bottom-FF004F {
  border-bottom: .125rem solid #ff004f;
}
.border-bottom-138808 {
  border-bottom: .0625rem solid #138808;
}
.border-bottom-1877F2 {
  border-bottom: .0625rem 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 2px #36454F;
}
::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;
}
.h-300 {
  height: 18.75rem;
}
body {
  /* margin: 0rem; */
}
/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
footer {
  width: 95vw;
}
.overflow-wrapper {
  overflow-x: hidden;
  margin: 0rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.logo-100 {
  width: 6.25rem;
  height: 5.3125rem;
}
.logo-50 {
  width: 3.125rem;
  height: 3.125rem;
}
/* navbar */
.nav {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000000;
  z-index: 9999;
}
.nav-banner {
  padding: 0.625rem 0rem;
}
.nav-anchor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .625rem 1.25rem;
  /* border-bottom: .125rem solid #ffffff; */
  /* box-shadow: 0px .0625rem .125rem #999999; */
}
.user-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-icon {
  /* padding-top: 10px; */
}
.notification-icon {
  /* padding-top: 10px; */
}
.user-avatar {
  display: block;
}
.icon-badge {
  display: inline-block;
  height: 20px;
  width: 1.25rem;
  line-height: 1.25rem;
  border-radius: 3.125rem;
  font-size: 0.625rem;
  position: relative;
  top: -15px;
  right: 15px;
}
.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: 90vh;
  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;
}
/*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 */
.title-rating {
  display: flex;
  align-items: center;
}
.featured-category-title,
.tile-title {
  margin: 0px;  
}
.featured-category-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.featured-category-body-reverse {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
}
.featured-category-tile,
.customer-feedback-tile,
.auth-tile {
  width: 18.75rem;
  border-radius: 10px;
}
.hero-tile {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 1.25rem 0rem;
  border-radius: .625rem;
}
.hero-section {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.tile-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.round-image {
  height: 18.75rem;
  width: 18.75rem;
  object-fit: cover;
  /* border-radius: 50%; */
}
.feedback-tile-desc {
  padding-bottom: 1.25rem;
}
.tile-cta-subscribe,
.tile-cta-subscribed {
  /* height: 100px; */
}
.tile-cta-subscribed {
  display: none;
}
.subscription-inputs,
.subscription-otp {
  height: 3.75rem;
}
.subscription-name,
.subscription-otp,
.user-info-hidden {
  display: none;
}
.subscription-lnk-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.subscription-input {
  border: 0.0625rem solid #707070;
  line-height: 1.5;
  padding: 0.3125rem;
  padding-left: 1.25rem;
}
.auth-status {
  height: 7.375rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.auth-status-blank {
  height: 4.375rem;
}
.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: 250px; */
}
.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: 0.9375rem;
  border-radius: 0.625rem;
}
.rating-progress-inner {
  height: 0.9375rem;
  border-radius: 0.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: .3125rem solid #ff004f;
  padding-left: .625rem;
  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;
}

/*project*/
.project {
  display: flex;
}
.project-logo img {
  width: 3.125rem;
  height: 3.125rem;
}
.project-title {
  margin: 0px;
}
.social-wrapper {
  width: 70%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.social-account {
  width: 20px;
}
.user-action-lnks {
  display: flex;
  align-items: center;
  justify-content: center;
}
.more-review {
  padding-top: 10px;
}
.figure-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.com,
.in {
  display: flex;
  align-items: center;
}
@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: 1.25rem;
  }
  .desc-large {
    font-size: 1.25rem;
  }
  .desc-regular {
    font-size: 15px;
  }
  .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-categories {
    width: 95vw;
  }
  .title-desc {
    text-align: center;
  }
  .title-rating .title-rating-figures {
    text-align: center;
  }
  .title-rating {
    justify-content: center;
  }

  .featured-category-tile,
  .customer-feedback-tile,
  .hero-tile,
  .auth-tile {
    /* padding: 20px 0px; */
  }
  .round-image {
    /* border-radius: 50%; */
  }
  .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;
  } */
}
@media screen and (min-width: 64.0625rem) and (max-width: 120rem) {
  /*utility classes*/
  .title-large {
    font-size: 1.875rem;
  }
  .title-regular {
    font-size: 1.5625rem;
  }
  .title-small,
  .hero-text {
    font-size: 1.25rem;
  }
  .desc-large {
    font-size: 1.25rem;
  }
  .desc-regular {
    font-size: .9375rem;
  }
  .desc-small {
    font-size: .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;
  }
  .featured-categories {
    width: 50vw;
    border-radius: 10px;
  }
  .hero-tile {
    width: 100%;
  }
  .logo-title-desc {
    display: flex;
    align-items: flex-end;
  }
  .title-rating {
    justify-content: flex-end;
  }
  .title-cta-desktop {
    width: 25%;
  }
  .title-desc {
    margin-left: 1.25rem;
  }
  .title-desc {
    text-align: left;
  }
  .featured-category-tile,
  .customer-feedback-tile {
    /* box-shadow: 2px 2px 3px #707070;
    background-color: #ffffff; */
  }
  .featured-category-tile,
  .customer-feedback-tile,
  .hero-tile,
  .auth-tile {
    /* padding: 20px 0px; */
  }
  .subscription-input {
    border-radius: 1.875rem;
  }
}