/* Base css start */

/* google font cdn */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  /* font family */
  --nevanta: "Nevanta";
  --inter: "inter", sans-serif;
}
ol,
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style-type: none;
}

a,
button {
  transition: all 0.3s;
}
a {
  text-decoration: none;
}
button {
  border: none;
}
select {
  -webkit-appearance: none;
  appearance: none;
}
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-inline: 20px;
}
body {
  /* font-family: var(--nevanta); */
  font-family: var(--inter);
  color: #757575;
}
h2 {
  font-size: 28px;
  line-height: 1.4;
}
h3 {
  font-size: 24px;
  line-height: 1.4;
}
h4 {
  font-size: 22px;
  line-height: 1.4;
}
h5 {
  font-size: 18px;
  line-height: 1.5;
}
h6 {
  font-size: 14px;
  line-height: 1.4;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #2e2e2e;
}
.common-para strong {
  color: #3b3b3b;
}
section {
  padding: 20px 16px;
}
.app {
  max-width: 768px;
}
.app--bg-off-white {
  background-color: #f5f5f5;
}
.app-icon-btn {
  width: 60px;
  height: 60px;
  background-image: linear-gradient(to bottom right, #ef8846, #f5b48a);
}
.app-icon-btn img {
  width: 24px;
}
.app-btns {
  gap: 12px;
}
.app-btn {
  height: 60px;
  background-image: linear-gradient(to right bottom, rgb(239, 136, 70), rgb(245, 180, 138));
  padding-inline: 24px 12px;
  font-size: 18px;
  line-height: 1;
  color: #fff;
}
.app-btn__icon {
  width: 36px;
}
.app-btn--white {
  background: #fff;
  color: #2e2e2e;
  border: 1px solid #b0b0b0;
}
.app-btn--black {
  background: #2e2e2e;
  color: #fafafa;
}
.app-btn--sm {
  height: 40px;
  font-size: 16px;
  padding-inline: 16px 10px;
}
.app-btn--sm .app-btn__icon {
  width: 24px;
}
.app-btn--xs {
  height: 32px;
  padding-inline: 12px;
  font-size: 14px;
  gap: 6px;
}
.app-btn--outline {
  background: transparent;
  border: 1px solid #949494;
  color: #2e2e2e;
}
.app-btn--gray {
  background-color: #f5f5f5;
  background-image: unset;
  border: 1px solid #dedede;
  color: #3b3b3b;
}
.app-btn--dark-gray {
  background-color: #00000070;
  background-image: unset;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.app-btn--disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.6;
}
.app-btn--black.app-btn--disabled {
  color: #858585;
  opacity: 1;
}

.app__btn-list {
  gap: 12px;
}
.app-text-btn-container {
  color: #ef8846;
}
.app-text-btn {
  color: transparent;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(116.33deg, #ef8846 -5.31%, #f5b48a 111.9%);
}
.app-text-btn--sm {
  font-size: 12px;
  line-height: 1.4;
}
.app__back-btn {
  color: #575757;
  line-height: 1.4;
  padding-block: 10px;
}
.app__back-btn img {
  width: 18px;
}
.app__back-btn--white {
  color: #fff;
}
.app__radio-btn {
  height: 60px;
  border: 1px solid #ebebeb;
  color: #bfbfbf;
  transition: all 0.3s;
}
.app__radio-container {
  cursor: pointer;
}
.app__radio-btn-icon {
  width: 24px;
  height: 24px;
}
.app__radio-btn-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 2px solid #bfbfbf;
  border-radius: 50%;
  position: absolute;
  transition: all 0.3s;
}
.app__radio-btn-icon::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #3b3b3b;
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s;
}
.app__radio-container input:checked ~ .app__radio-btn {
  color: #575757;
}
.app__radio-container input:checked ~ .app__radio-btn .app__radio-btn-icon::before {
  border-color: #3b3b3b;
}
.app__radio-container input:checked ~ .app__radio-btn .app__radio-btn-icon::after {
  opacity: 1;
}

.app__radion-btn--orange .app__radio-btn-icon::after {
  background: linear-gradient(116.33deg, #ef8846 -5.31%, #f5b48a 111.9%);
}
.app__radio-container input:checked ~ .app__radion-btn--orange .app__radio-btn-icon::before {
  border-color: #ef8846;
}

.selectable-btns {
  gap: 12px 8px;
}
.selectable-btns label {
  width: calc(50% - 4px);
}
.selectable-btn {
  padding: 7px;
  background-color: #fff;
  border: 1px solid #ebebeb;
  gap: 6px;
  color: #757575;
  cursor: pointer;
  transition: all 0.3s;
  overflow: hidden;
}
.selectable-btn__icon {
  width: 32px;
  height: 32px;
  background-color: #f5f5f5;
  border-radius: 50%;
  transition: all 0.3s;
}
.selectable-btn__icon img {
  width: 18px;
}
.selectable-btn__icon-dark {
  display: none;
}
.selectable-btn__text {
  min-width: 0;
}
.selectable-btn-input:checked ~ .selectable-btn {
  background-color: #2e2e2e;
  color: #fff;
}
.selectable-btn-input:checked ~ .selectable-btn .selectable-btn__icon {
  background-color: #f5f5f5;
}
.selectable-btn-input:checked ~ .selectable-btn .selectable-btn__icon-dark {
  display: block;
}
.selectable-btn-input:checked ~ .selectable-btn .selectable-btn__icon-light {
  display: none;
}
.selectable-btn--lg {
  height: 60px;
  color: #858585;
}
.selectable-btn-input:checked ~ .selectable-btn--lg {
  border-color: #3b3b3b;
  background-color: #3b3b3b;
  font-weight: 600;
}

.section__title {
  font-size: 22px;
  line-height: 1;
}
.rating__icon {
  width: 20px;
}
.rating__label {
  font-size: 20px;
  line-height: 1;
  color: #575757;
}
.rating--sm .rating__label {
  font-size: 14px;
}
.rating--sm .rating__icon {
  width: 16px;
}

.alert-msg {
  font-size: 14px;
  line-height: 1;
}
.alert-msg__icon {
  width: 14px;
}
.divider {
  height: 1px;
  background-color: #dedede;
}
/* custom class start */
.pointer-events-none {
  pointer-events: none;
}
.text-xs {
  font-size: 12px;
  line-height: 1;
}
.text-sm {
  font-size: 14px;
  line-height: 1;
}
.pt-32 {
  padding-top: 32px;
}
.text-off-white {
  color: #ebebeb;
}
.gradient-text {
  color: transparent;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(116.33deg, #ef8846 -5.31%, #f5b48a 111.9%);
}
/* custom class end */

.sort-btn {
  font-size: 14px;
  line-height: 1;
  border: 1px solid #dedede;
  padding: 7px 13px;
  background-color: #ebebeb;
  color: #3b3b3b;
}
.sort-btn img {
  width: 16px;
}

/* range slider start */
.range-sliders {
  gap: 10px;
}
.range-slider {
  gap: 10px;
  z-index: 1;
}
.range-slider__label {
  font-size: 14px;
  color: #949494;
  min-width: 38px;
}
.range-slider__track {
  height: 2px;
  border-radius: 2px;
  background-color: #ebebeb;
  width: 100%;
  overflow: hidden;
}
.range-slider__track-move {
  height: 100%;
  background-color: #3b3b3b;
  width: 30%;
}

.range-slider__btn {
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background-color: #3b3b3b;
  padding: 8px 14px;
}
/* range slider end */

/* form condition start */
.condition {
  cursor: pointer;
}
.condition__label {
  font-size: 12px;
  line-height: 1;
  color: #3b3b3b;
}
.condition__checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid #757575;
  border-radius: 4px;
  color: #fff;
  transition: all 0.3s;
  margin-right: 6px;
}
.condition__checkbox svg {
  width: 12px;
  opacity: 0;
  transition: all 0.3s;
}
.condition__input:checked ~ .condition__checkbox {
  background-image: linear-gradient(to right bottom, rgb(239, 136, 70), rgb(245, 180, 138));
  border: none;
}
.condition__input:checked ~ .condition__checkbox svg {
  opacity: 1;
}
/* form condition end */

.info-btn img {
  width: 16px;
}
.dot {
  width: 4px;
  height: 4px;
  background-color: #bfbfbf;
}

/* Base css end */

/* navbar start */
.app__navbar {
  padding: 20px 16px;
  background-color: #f5f5f5;
}
.app__navbar-nav {
  background-image: linear-gradient(45deg, #ef8846 0%, #f5b48a 100%);
}
.app__nav-link-group {
  height: 60px;
  background-color: #2e2e2e;
  padding-inline: 17px;
  min-width: 60px;
}
.app__nav-link img {
  width: 24px;
}
.app__nav-link--active {
  width: 60px;
  height: 60px;
  background-color: #fff;
}
/* navbar end */

/* app preload start */
.app__preload::after {
  content: "";
  width: 185%;
  height: 149%;
  position: absolute;
  top: -383px;
  left: -116px;
  background: radial-gradient(circle at center, #f29d67 0%, #f77f32 53%, #aa6132 76%, #5b2900 96%);
  border-radius: 50%;
  filter: blur(220px);
  transform: rotate(-10deg);
  z-index: -1;
}
.app__logo {
  width: 215px;
}
/* app preload end */

/* app tabs start */
.app__tab {
  color: #858585;
  height: 40px;
  padding-inline: 16px;
  background-color: #fff;
  border: 1px solid #ebebeb;
  gap: 6px;
}
.app__tab.active {
  background-color: #3b3b3b;
  border-color: #3b3b3b;
  color: #fff;
  font-weight: 600;
}
.app__tab-number {
  height: 18px;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  background-color: #ef4444;
  padding-inline: 4px;
  min-width: 18px;
}
/* app tabs end */

/* app dropdown start */
.app__dropdown-toggle::after {
  display: none;
}
.app__dropdown-toggle {
  padding-block: 12px;
}
.app__dropdown-menu {
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0px 4px 6px 0px #00000017;
  min-width: 200px;
}
.app__dropdown-menu .dropdown-item {
  padding: 0;
  line-height: 1;
  color: #3b3b3b;
  background-color: transparent;
}
.app__dropdown-menu li:not(:last-child) {
  margin-bottom: 12px;
}
.app__dropdown-menu .dropdown-item img {
  width: 20px;
}
/* app dropdown end */

/* swiper pagination start */
.swiper-pagination {
  gap: 6px;
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background-color: #000;
  opacity: 0.16;
  margin: 0 !important;
  border-radius: 4px;
  transition: all 0.3s;
}
.swiper-pagination-bullet-active {
  width: 44px;
  background-color: #2e2e2e;
  opacity: 1;
}
/* swiper pagination end */

/* onboarding section start */
.onboarding {
  height: 100vh;
}
.onboarding__thumb {
  border-radius: 0 0 40px 40px;
  overflow: hidden;
}
.onboarding__content {
  background-image: linear-gradient(to bottom, #666666, #000000);
  border-radius: 40px 40px 0 0;
  padding: 28px;
  min-height: 322px;
  gap: 40px;
}
.onboarding__desc {
  color: #b0b0b0;
}
.skip-btn {
  color: #bfbfbf;
}
.skip-btn:hover {
  color: #ef8846;
}
.dot-btn {
  height: 8px;
  width: 20px;
  background-color: #575757;
  border-radius: 20px;
}
.dot-btn--active {
  width: 60px;
  background-color: #fff;
}
/* onboarding section end */

/* selection section start */
.selection {
  padding: 32px 16px 16px;
}
.selection__card {
  height: 420px;
  border-radius: 40px;
  overflow: hidden;
  transform: scale(0.86) !important;
  transition: all 0.3s;
  margin-left: -18px;
}
.selection__card.swiper-slide-active {
  transform: scale(1) !important;
  margin-left: 0;
}
.app-card__content {
  background-image: linear-gradient(to bottom, #0000 60%, #000 100%);
}
/* selection section end */

/* signup section start */

.signup {
  height: 100vh;
  background-size: cover;
  background-position: center;
}
.signup--welcome::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, #0000 35%, rgba(0, 0, 0, 0.7) 70%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.signup__thumb {
  height: 260px;
}
.signup__thumb::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 0;
  left: 0;
}
.signup__form {
  background-color: #f5f5f5;
  padding: 36px 16px;
  border-radius: 40px 40px 0 0;
  margin-top: -60px;
}
.form__input-muted {
  opacity: 0.32;
  pointer-events: none;
}
.form__label {
  line-height: 1;
  color: #3b3b3b;
  margin-bottom: 10px;
}
.form__label-icon {
  width: 18px;
  flex-shrink: 0;
}
.form__label span {
  transform: translateY(1px);
}
.form__input-field {
  height: 60px;
  border: 1px solid #ebebeb;
  padding-inline: 16px 48px;
  color: #575757;
  transition: all 0.3s;
  caret-color: #ef8846;
}
.form__input-field--textarea {
  min-height: 120px;
  resize: none;
  border-radius: 24px;
  padding: 21px 16px;
}
.form__input-field::placeholder {
  color: #bfbfbf;
}
.form__input-icon {
  width: 24px;
}
.form__card-icon {
  width: 32px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid #ebebeb;
  background-color: #fafafa;
}
.form__card-icon img {
  height: 7px;
}
.form__input-field:focus {
  border-color: #666666;
  outline: none;
}
.form__signup-options h6 {
  font-size: 14px;
  line-height: 1.4;
  color: #b0b0b0;
}
.form__signup-options-btns {
  gap: 12px;
}
.form__signup-options-btn {
  width: 56px;
  height: 56px;
  background-color: #fff;
  border: 1px solid #ebebeb;
}
.form__signup-options-btn img {
  width: 24px;
}
.form__footer-text {
  font-size: 14px;
  line-height: 1;
  color: #8c8c8c;
}
.otp-resend-time {
  margin-top: 10px;
  gap: 6px;
  font-size: 12px;
  color: #b0b0b0;
}
.otp-resend-time img {
  width: 16px;
}
.form__check {
  font-size: 12px;
  line-height: 1.4;
  color: #949494;
  cursor: pointer;
}
.form__checkbox {
  width: 14px;
  height: 14px;
  background-color: #949494;
  border-radius: 4px;
}
.form__checkbox img {
  width: 7px;
  opacity: 0;
  transition: all 0.3s;
}
.form__check input:checked ~ .form__checkbox img {
  opacity: 1;
}
/* signup section end */

/* complete-profile section start */
.complete-profile {
  background-color: #f5f5f5;
  padding: 32px 16px 20px;
  gap: 40px;
}
.complete-profile__avatar-container {
  width: 180px;
  height: 180px;
  margin-bottom: 32px;
}
.profile-img-upload-btn {
  width: 32px;
  height: 32px;
  background-color: #fff;
}
.profile-img-upload {
  bottom: 12px;
  right: 12px;
  cursor: pointer;
}
.profile-img-upload-btn img {
  width: 18px;
}
.clear-btn {
  color: #757575;
}
.form__input-field--select {
  appearance: none;
}
.add-btn {
  gap: 6px;
}
.add-btn img {
  width: 16px;
}
.upload-box {
  padding: 22px;
  min-height: 140px;
  border-radius: 24px;
  border: 1px dashed #ebebeb;
}
.upload-box__icon {
  width: 32px;
  height: 32px;
  background-color: #3b3b3b;
}
.upload-box__icon img {
  width: 18px;
}
.upload-box__title {
  color: #757575;
  margin-bottom: 6px;
}
.upload-box__subtitle {
  font-size: 10px;
  line-height: 11px;
  color: #949494;
}
.upload-preview {
  margin-top: 20px;
  gap: 12px;
}
.upload-preview__card {
  width: 180px;
  height: 120px;
}
.upload-preview__card--sm {
  width: 96px;
}
.upload-preview__img {
  border-radius: 20px;
}
.close-btn {
  width: 28px;
  height: 28px;
  background-color: #dedede;
  border: 3px solid #f5f5f5;
  top: -9px;
  right: -9px;
}
/* complete-profile section end */

/* theme modal start */
.theme-modal--bottom .modal-dialog {
  height: auto;
  margin-top: auto;
  position: fixed;
  bottom: 0;
}
.theme-modal .modal-content {
  background-color: #f5f5f5;
  border: none;
  color: #757575;
}
.theme-modal--bottom .modal-content {
  border-radius: 32px 32px 0 0;
}
.theme-modal .modal-header {
  padding: 36px 16px 20px;
}
.theme-modal .modal-body {
  padding: 20px 16px;
}
.modal__btn {
  margin-top: 40px;
}
.modal-backdrop {
  --bs-backdrop-opacity: 0.64;
}
.theme-modal--style-2 .modal-dialog {
  max-width: 398px;
  width: calc(100% - 32px);
}
.theme-modal__desc {
  color: #949494;
}
.theme-modal__desc a {
  color: #0088ff;
}
.theme-modal__icon {
  width: 88px;
}
/* theme modal end */

/* header section start */

.header {
  background: linear-gradient(45deg, #ef8846 0%, #f5b48a 100%);
  padding: 20px 16px 16px;
}
.header__profile-img {
  width: 48px;
  aspect-ratio: 1 / 1;
}
.header__profile-title {
  font-size: 20px;
  line-height: 1;
}
.header__profile-location {
  font-size: 14px;
  line-height: 1;
  color: #f5f5f5;
}
.header__profile-location img {
  width: 16px;
}
.header__action-btn {
  height: 48px;
  width: 48px;
  background-color: #ffffff;
}
.header__action-btn-icon {
  width: 24px;
}
.header__subtitle {
  font-size: 28px;
  line-height: 1.4;
  color: #ffffffd6;
}
.search__input {
  padding-inline: 44px 60px;
}
.search__icon {
  left: 14px;
  width: 22px;
  pointer-events: none;
}
.search__filter-btn {
  width: 44px;
  height: 44px;
  background-color: #3b3b3b;
}
.search__filter-btn img {
  width: 22px;
}
.header--style-2::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(245, 245, 245, 0) 53.93%, #f5f5f5 100%);
}
.header--profile::before {
  content: "";
  width: 362px;
  height: 177px;
  background-color: #f5f5f5;
  filter: blur(200px);
  position: absolute;
  top: 99px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -1;
}
.header--style-2 {
  background-color: #d4d19c;
  background-image: unset;
  min-height: 400px;
  background-size: cover;
  background-position: center;
}
.header__actions {
  top: 32px;
}
.action-btn {
  width: 60px;
  height: 60px;
  background-color: #f5f5f5;
  box-shadow: 0px 4px 6px 0px #00000017;
  top: 94px;
  right: 16px;
  z-index: 99;
}
.action-btn--white-outline {
  background-color: #fff;
  border: 1px solid #ebebeb;
}
/* header section end */

/* service section start */
.service__card {
  background-color: #6fb2fd;
  padding: 20px;
  border-radius: 23px;
  min-height: 286px;
}
.service__card-subtitle {
  font-size: 24px;
  line-height: 1.3;
}
.service__list {
  gap: 10px;
}
.service__list-item {
  gap: 6px;
  color: #fafafa;
  font-size: 13px;
  line-height: 1;
}
.service__list-icon {
  width: 16px;
}
.service__card-img {
  width: 263px;
}
.service__card--purple {
  background-color: #7b86f3;
}
.service__category-item {
  padding: 7px 19px 7px 7px;
  border: 1px solid #ebebeb;
  font-size: 18px;
  color: #2e2e2e;
}
.service__category-icon {
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;
}
.service__category-icon img {
  width: 20px;
}
.service__category {
  margin-right: -16px;
  padding-right: 16px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.service__category::-webkit-scrollbar {
  display: none;
}
.service__provider {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid #ebebeb;
  min-height: 182px;
}
.service__provider-name {
  font-size: 20px;
  line-height: 1.3;
}
.service__provider-designation {
  font-size: 12px;
  line-height: 1;
  color: #949494;
}
.service__provider-rating img {
  width: 12px;
}
.service__provider-action-btn {
  width: 40px;
  height: 40px;
  background-color: #f5f5f5;
}
.service__provider-action-btn img {
  width: 20px;
}
.service__provider-header {
  margin-bottom: 35px;
}
.service__provider-price h6 span {
  color: #757575;
}
.service__provider-rate-status {
  font-size: 12px;
  line-height: 1.5;
  color: #757575;
}
.service__provider-img {
  width: 245px;
}
.service__items .service__provider-img {
  width: 280px;
}

.service__card--active {
  min-height: 210px;
  gap: 32px;
  border: 1px solid #ebebeb;
  background-color: #fff;
}
.service__card.service__card--active::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 27%, rgb(255, 255, 255) 64%);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.service__order-id {
  font-size: 12px;
  line-height: 1;
  color: #757575;
}
.service__status-btn {
  font-size: 14px;
  line-height: 1;
  padding: 10px 12px;
  color: #fff;
  background-image: linear-gradient(to right bottom, #4b7992 0%, #9fcae0 100%);
}
.service__status-btn--scheduled {
  background-image: linear-gradient(204.63deg, #924b85 0.17%, #e09fcd 147.99%);
}
.service__status-btn--cancelled {
  background-image: linear-gradient(204.63deg, #ff3434 0.17%, #e09f9f 147.99%);
}
.service__status-btn--completed {
  background-image: linear-gradient(204.63deg, #4b9259 0.17%, #9fe09f 147.99%);
}
.service__list--gray li {
  color: #4a4a4a;
}
.service__card--active .service__list-item {
  gap: 3px;
  font-size: 14px;
}
.service__card--active .service__list-icon {
  width: 14px;
}
.service__card--active .service__list {
  gap: 6px;
}
.service__card-profile {
  gap: 6px;
}
.service__card-profile-img {
  width: 34px;
  aspect-ratio: 1 / 1;
}
.service__card-profile-name {
  line-height: 1;
}
.service__card-profile-rating {
  font-size: 12px;
  line-height: 1;
  color: #575757;
}
.service__card-profile-rating img {
  width: 12px;
}
.service__map::after {
  content: "";
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 87%);
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
}
.service__card--provider {
  border: 1px solid #ebebeb;
}
.service__card--provider .service__card-profile p {
  font-size: 14px;
  line-height: 1;
}
.service__card--provider .service__card-profile-img {
  width: 48px;
}
.send-msg-btn {
  font-size: 14px;
  line-height: 1;
  color: #fff;
  background-color: #2e2e2e;
  padding: 12px 18px;
}

.service--list {
  padding-top: 32px;
}
.service__title-icon {
  width: 28px;
  aspect-ratio: 1 / 1;
  background-color: #fafafa;
}
.service__title-icon img {
  width: 18px;
}
.service--list .service__card-title {
  font-size: 20px;
  line-height: 1.3;
}
.service__card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: #fafafa;
  max-width: 216px;
}
.service--list .service__card {
  gap: 44px;
  min-height: 0;
}
.service__items {
  gap: 12px;
}
.service__card--dark-purple {
  background-color: #8a55a3;
}
.service__card--orange {
  background-color: #ec7e64;
}
.service__card--green {
  background-color: #2ab289;
}
.service__card--dark-blue {
  background-color: #5565a3;
}
.service__card--golden {
  background-color: #c5ab76;
}
.service__card--pink {
  background-color: #c9657e;
}

.service--cleaning .service__card--active {
  min-height: 240px;
}
.service__card--active .service__title-icon {
  background-color: #2e2e2e;
}
.service__card--active .service__title-icon img {
  width: 16px;
}
.service__card--active .service__card-desc {
  color: #757575;
  width: 200px;
}

.service__overview-icon {
  width: 18px;
}
.service__overview-title {
  font-size: 20px;
  line-height: 1;
}
.service__overview-title span {
  font-weight: 400;
  color: #757575;
  font-size: 14px;
}
.service__overview-subtitle {
  font-size: 14px;
  line-height: 1;
}
.service__overview {
  gap: 20px;
}
.service__overview .divider {
  background-color: #ebebeb;
  width: 1px;
}

.service--requested-details {
  padding-top: 32px;
}
.service__wrapper {
  gap: 32px;
}
.service__list--gray li strong {
  color: #2e2e2e;
}
.timeline__steps {
  gap: 6px;
}
.timeline__progress {
  height: 10px;
  background-color: #dedede;
}
.timeline__progress .progress-bar {
  background: linear-gradient(116.33deg, #ef8846 -5.31%, #f5b48a 111.9%);
}
.timeline__step-label {
  font-size: 14px;
  line-height: 1;
}
.timeline__step-icon {
  width: 16px;
  display: none;
}
.timeline__step--completed {
  color: #4a4a4a;
}
.timeline__step--completed .timeline__step-icon {
  display: block;
}
/* service section end */

/* profile section start */

.profile__img {
  max-width: 430px;
}
.profile {
  padding-top: 32px;
}
.profile__location {
  font-size: 14px;
  line-height: 1;
  color: #575757;
}
.profile__location-icon {
  width: 16px;
}
.profile__info-title {
  color: #575757;
}
.profile__links {
  border-radius: 24px;
  border: 1px solid #ebebeb;
  padding-inline: 20px;
}
.profile__link {
  padding-block: 20px;
  font-size: 18px;
  line-height: 1;
  color: #3b3b3b;
  border-bottom: 1px solid #ebebeb;
}
.profile__link-icon {
  width: 24px;
}
.profile__links li:last-child .profile__link {
  border: none;
}
/* profile section end */

/* reviews section start */
.reviews__card {
  width: 296px;
  min-height: 274px;
  border: 1px solid #ebebeb;
  border-radius: 24px;
  background-color: #d4d19c;
}
.reviews__card-thumb {
  height: 211px;
  margin-bottom: -48px;
}
.reviews__card-thumb img {
  max-width: 100%;
  height: 100%;
}
.reviews__card::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 40.88%, #ffffff 72.04%);
  position: absolute;
  top: 0;
  left: 0;
}
.reviews__card::before {
  content: "";
  width: 100%;
  height: 155px;
  background-color: #fff;
  filter: blur(200px);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.reviews__card-content {
  padding: 0 20px 20px;
}
.reviews__card-title {
  font-size: 16px;
  line-height: 1;
}
.reviews__card .rating__icon {
  width: 12px;
}
.reviews__card .rating__label {
  font-size: 14px;
}
.reviews__card-desc {
  font-size: 14px;
}
.reviews__card--blue {
  background-color: #84b7bc;
}
/* reviews section end */

/* request-service section start */
.request-service {
  padding-top: 12px;
}
.calendar__day {
  min-width: 50px;
  height: 72px;
  background-color: #fff;
  border: 1px solid #ebebeb;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s;
}
.calendar__day-name {
  font-size: 12px;
  line-height: 1;
  color: #949494;
}
.calendar__day-date {
  font-size: 24px;
  line-height: 1;
  color: #3b3b3b;
}
input:checked ~ .calendar__day {
  background-color: #3b3b3b;
  border-color: #3b3b3b;
}
input:checked ~ .calendar__day .calendar__day-name {
  color: #f5f5f5;
}
input:checked ~ .calendar__day .calendar__day-date {
  color: #fff;
}
.calendar__day--style-2 {
  min-width: 0;
  height: 60px;
  width: 100%;
}
.calendar__day--style-2 .calendar__day-name {
  font-size: 24px;
  color: #3b3b3b;
}
.progress-segment {
  height: 6px;
  background-color: #dedede;
}
.progress-segment--active {
  background-color: #3b3b3b;
}
.repeated-service-disabled {
  opacity: 0.32;
  pointer-events: none;
}
.payment-options {
  gap: 12px;
}
/* request-service section end */

/* confirm request section start */
.confirm-request {
  padding-top: 32px;
}
.service-info__thumb {
  width: 140px;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
}
.service-info .service__list--gray li {
  font-size: 14px;
  color: #757575;
}
.thumbs {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.thumb {
  border-radius: 20px;
}
.thumb--two-row {
  grid-row: 1 / 3;
}
.additional-details__list {
  gap: 12px;
}
.additional-details__row {
  line-height: 1;
}
.additional-details__data {
  flex: 1;
  color: #3b3b3b;
}
.additional-details__label {
  width: 120px;
}
.additional-details__row--total-price {
  color: #575757;
}
.service-info__thumb--sm {
  width: 104px;
}
/* confirm request section end */

/* notification section start */

.notification__block-title {
  color: #3b3b3b;
}
.notification__list {
  border-radius: 24px;
  border: 1px solid #ebebeb;
}
.notification__item {
  gap: 12px;
}
.notification__user-avatar {
  width: 48px;
  aspect-ratio: 1 / 1;
}
.notification__user-status {
  bottom: -2px;
  right: -2px;
  background-color: #3b3b3b;
  width: 16px;
  height: 16px;
}
.notification__user-status img {
  width: 8px;
}
.notification__title {
  line-height: 1;
}
.notification__time {
  font-size: 12px;
  line-height: 1;
  color: #949494;
}
.notification__msg {
  font-size: 12px;
  line-height: 1.4;
}
.notification__msg span {
  color: #3b3b3b;
}
/* notification section end */

/* payment method section start */
.payment-method__list {
  padding: 20px;
  border-radius: 24px;
  border: 1px solid #ebebeb;
  gap: 20px;
}
.payment-method__item .app__radio-btn {
  height: auto;
}
.payment-method__icon {
  width: 48px;
  height: 48px;
  background-color: #f5f5f5;
  border: 1px solid #ebebeb;
}
.payment-method__item .app__radio-btn {
  font-size: 18px;
  color: #2e2e2e !important;
}
.payment-method__item p {
  color: #757575 !important;
}
/* payment method section end */

/* feedback section start */
.feedback__title {
  font-size: 26px;
  line-height: 1.3;
  color: #141414;
}
.feedback__emoji {
  width: 140px;
}
.feedback__content h5,
.feedback__content p {
  line-height: 1;
}
.feedback__option-inner {
  width: 70px;
  height: 103px;
  border: 1px solid #ebebeb;
  padding-block: 16px;
  font-size: 14px;
  line-height: 1;
  color: #949494;
  cursor: pointer;
}
.feedback__option-emoji {
  width: 48px;
  aspect-ratio: 1 / 1;
}
.feedback__option--active {
  padding: 2px;
  background-image: linear-gradient(116.33deg, rgba(239, 136, 70, 0.24) -5.31%, rgba(245, 180, 138, 0.24) 111.9%);
}
.feedback__option--active .feedback__option-inner {
  width: 84px;
  height: 131px;
  padding-block: 18px;
  color: #3b3b3b;
  font-weight: 500;
  border-color: #f29f6a;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.feedback__option--active .feedback__option-emoji {
  width: 60px;
}
/* feedback section end */

/* map section start */
.map {
  height: 100vh;
}
.map__zoom-range {
  -webkit-appearance: none;
  appearance: none;
  width: 114px;
  height: 4px;
  background: #ebebeb;
  border-radius: 999px;
  outline: none;
}
.map__zoom-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(116.33deg, #ef8846 -5.31%, #f5b48a 111.9%);
  cursor: pointer;
  margin-top: -7px;
  border: 0;
}
.map__zoom-range::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(116.33deg, #ef8846 -5.31%, #f5b48a 111.9%);
  cursor: pointer;
  margin-top: -7px;
  border: 0;
}
.map__zoom-range::-webkit-slider-runnable-track,
.map__zoom-range::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: #ebebeb;
}
.map__zoom {
  padding: 14px 20px 14px 12px;
  gap: 12px;
  box-shadow: 0px 4px 6px 0px #00000017;
}
.map__zoom-icon {
  width: 24px;
}
.map__action-btn {
  width: 52px;
  height: 52px;
  background-color: #fff;
  box-shadow: 0px 4px 6px 0px #00000017;
}
.map__action-btn img {
  width: 24px;
}
.map__card {
  background-color: #f5f5f5;
  padding: 36px 16px 20px;
  border-radius: 40px 40px 0 0;
  box-shadow: 0px 4px 6px 0px #00000017;
}
.map--style-2 .map__card {
  border-radius: 40px;
}
.map__destination-item {
  gap: 10px;
  line-height: 1;
}
.map__destination {
  gap: 36px;
}
.map__destination-icon {
  width: 16px;
  height: 16px;
  border: 1px solid #000000;
}
.map__destination-icon--fill {
  background: linear-gradient(116.33deg, #ef8846 -5.31%, #f5b48a 111.9%);
  border: 0;
}
.map__destination-item p {
  color: #3b3b3b;
}
.map__destination-duration {
  font-size: 20px;
  color: #2e2e2e;
}
.map__destination-item:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 24px;
  background-color: #ebebeb;
  position: absolute;
  left: 7.5px;
  top: 24px;
}
/* map section end */

/* task list start */
.task-list {
  padding: 20px;
  border: 1px solid #ebebeb;
  border-radius: 24px;
}
.task-list__item:not(:last-child) {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #ebebeb;
}
.task-list__title {
  line-height: 1;
  color: #2e2e2e;
  margin-bottom: 6px;
}
.task-list__date {
  font-size: 14px;
  line-height: 1;
  color: #949494;
}
.task-list__text {
  opacity: 0.4;
}
.task-list__item--completed .task-list__text {
  opacity: 1;
}
/* task list end */

/* insights section start */
.insights {
  padding-top: 40px;
}
.insights__gauge-text h3 {
  font-size: 48px;
  line-height: 1;
  color: #3b3b3b;
}
.insights__gauge-text p {
  font-size: 14px;
  color: #757575;
}
.insights__card {
  padding: 20px;
  border: 1px solid #ebebeb;
  border-radius: 24px;
  gap: 40px;
}
.insights__cards .row {
  --bs-gutter-x: 12px;
  --bs-gutter-y: 12px;
}
.insights__card-title {
  color: #575757;
}
.insight__card-value span {
  color: #2e2e2e;
  font-size: 32px;
  line-height: 1;
}
.insight__card-value small {
  font-size: 18px;
  line-height: 1;
}

.insights__meter {
  margin-top: 6px;
}
/* .insights__bar {
  height: 20px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ef4444 0%, #fde047 40%, #fde047 60%, #22c55e 100%);
} */
.insights__bar-img {
  height: 20px;
  border-radius: 10px;
}

.insights__knob {
  position: absolute;
  left: 90%;
  top: -16px;
}
.insights__knob img {
  width: 24px;
}
.insights__knob::after {
  content: "";
  width: 1px;
  height: 15px;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -11px;
}
.insights__ticks {
  font-size: 10px;
  line-height: 1;
}

/* insights section end */

/* calendar section start */
.schedule-calendar-container::before,
.schedule-calendar-container::after {
  content: "";
  width: 100%;
  height: 100px;
  position: absolute;
  left: 0;
}
.schedule-calendar-container::before {
  background: linear-gradient(0deg, rgba(245, 245, 245, 0) -4.2%, #f5f5f5 84.37%);
  top: 0;
}
.schedule-calendar-container::after {
  background: linear-gradient(180deg, rgba(245, 245, 245, 0) -4.2%, #f5f5f5 84.37%);

  bottom: 0;
}
/* calendar section end */

/* chats section start */
.chats__container {
  height: 100vh;
}

.chats {
  height: calc(100% - 116px);
}
.chats::after {
  content: "";
  height: 64px;
  width: 100%;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 79.56%);
  position: absolute;
  bottom: -20px;
  left: 0;
}
.customer-support-btn {
  color: #575757;
  gap: 6px;
}
.customer-support-btn img {
  width: 18px;
}
.chats__list {
  padding-bottom: 20px;
  margin-right: -16px;
  padding-right: 16px;
}
.chats__item {
  gap: 20px;
}
.chats__profile {
  gap: 12px;
}
.chats__profile-avatar {
  width: 64px;
  aspect-ratio: 1 / 1;
}
.chats__profile-name {
  line-height: 1;
}
.chats__profile-msg {
  font-size: 12px;
}
.chats__status-icon {
  width: 12px;
}
.chats__time {
  font-size: 12px;
  color: #949494;
  line-height: 1;
}
.chats__notification-count {
  font-size: 8px;
  line-height: 1;
  background: linear-gradient(116.33deg, #ef8846 -5.31%, #f5b48a 111.9%);
  padding-inline: 5.5px;
  height: 16px;
  min-width: 16px;
}
/* chats section end */

/* chat-window section start */
.chat-window {
  height: 100vh;
}
.chat-window__main {
  padding: 32px 16px 20px;
  flex: 1;
}
.chat-window .app__back-btn img {
  width: 22px;
}
.chat-window__profile-avatar {
  width: 36px;
  aspect-ratio: 1 / 1;
}
.chat-window__profile {
  flex: 1;
}
.chat-window__profile-name {
  color: #3b3b3b;
  font-size: 16px;
}
.chat-window__action-btn img {
  width: 24px;
}
.chat-window__body {
  flex: 1;
  margin-right: -16px;
  padding-right: 16px;
}
.chat-window__date {
  font-size: 12px;
  line-height: 1;
  color: #666666;
  padding: 7.5px 14px;
  background-color: #ebebeb;
  margin-top: 16px;
}
.chat-window__msg-container {
  margin-top: 16px;
}
.chat-window__msg {
  width: fit-content;
  font-size: 14px;
  line-height: 1;
  padding: 12px 16px;
  color: #fff;
  background-color: #3b3b3b;
  border-radius: 4px 20px 20px 4px;
  margin-bottom: 2px;
}
.chat-window__msg:last-child {
  margin-bottom: 0;
}
.chat-window__msg--outgoing {
  background-image: linear-gradient(116.33deg, #ef8846 -5.31%, #f5b48a 111.9%);
  border-radius: 20px;
}
.chat-window__msg--incoming:first-child {
  border-top-left-radius: 20px;
}
.chat-window__msg--incoming:last-child {
  border-bottom-left-radius: 20px;
}
.chat-window__time {
  font-size: 12px;
}

.chat-window__footer {
  flex-shrink: 0;
  padding: 20px 16px;
  gap: 12px;
}
.chat-window__add-icon {
  width: 32px;
}
.chat-window__input-field {
  font-size: 16px;
  line-height: 1;
  padding: 15px 54px 15px 16px;
  min-height: 0;
  border: 1px solid #dedede;
  transition: all 0.3s;
  color: #3b3b3b;
  border-radius: 24px;
  resize: none;
}
.chat-window__input-field::placeholder {
  color: #949494;
}
.chat-window__input-field:focus {
  outline: none;
  border-color: #bfbfbf;
}
.chat-window__send-btn {
  right: 12px;
  bottom: 15px;
}
.chat-window__send-btn img {
  width: 24px;
  transform: rotate(45deg);
}
.chat-window__input-field:placeholder-shown ~ .chat-window__send-btn {
  opacity: 0;
}

.chat-window__welcome-thumb {
  width: 350px;
  margin-bottom: 6px;
}
.chat-window__welcome-thumb::after {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(245, 245, 245, 0) 55%, #F5F5F5 100%);
  position: absolute;
  bottom: 0;
  left: 0;
}
.chat-window__welcome-content h3 {
  line-height: 1.6;
}
.chat-window__welcome-content p {
  font-size: 14px;
  line-height: 1.6;
}

.call-screen {
  padding-top: 80px;
  gap: 12px;
}
.call-screen__user-avatar {
  width: 220px;
  aspect-ratio: 1 / 1;
}
.call-screen__time {
  font-size: 14px;
  line-height: 1.6;
}
.call-nav {
  max-width: 400px;
  padding: 12px;
  background-color: #DEDEDE;
}
.call-nav--video {
	background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(32px);
	backdrop-filter: blur(32px);
}
.call-nav__btn {
  width: 60px;
  height: 60px;
  background-color: #fff;
}
.call-nav__btn img {
  width: 24px;
}
.call-nav__btn--decline {
  background-color: #EF4444;
}
.call-nav__btn--decline img {
  transform: rotate(135deg);
}
.call-screen__video {
	max-width: 768px;
	margin: auto;
	z-index: -1;
}
.call-screen__video::after {
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(360deg, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.4) 85.78%);
  position: absolute;
  top: 0;
  left: 0;
}

.call-screen__self {
  width: 160px;
  height: 220px;
  bottom: 0;
  right: 16px;
}
/* chat-window section end */