/************ All Content ************/
/* 
1. HEADER END
2. checkbox
3. 

*/
/* Font Iner */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); */

/*  Font Be Vietnam Pro */

@font-face {
  font-family: "Be Vietnam Pro";
  /* src: url('../fonts/Graphik-Black.otf'); */
  src: url("../fonts/BeVietnamPro-Thin.ttf") format("opentype");
  font-weight: 100;
}

@font-face {
  font-family: "Be Vietnam Pro";
  /* src: url('../fonts/Graphik-Extralight.otf'); */
  src: url("../fonts/BeVietnamPro-ExtraLight.ttf") format("opentype");
  font-weight: 200;
}

@font-face {
  font-family: "Be Vietnam Pro";
  /* src: url('../fonts/Graphik-Light.otf'); */
  src: url("../fonts/BeVietnamPro-Light.ttf") format("opentype");
  font-weight: 300;
}

@font-face {
  font-family: "Be Vietnam Pro";
  /* src: url('../fonts/Graphik-Regular.otf'); */
  src: url("../fonts/BeVietnamPro-Regular.ttf") format("opentype");
  font-weight: 400;
}

@font-face {
  font-family: "Be Vietnam Pro";
  /* src: url('../fonts/Graphik-Medium.otf'); */
  src: url("../fonts/BeVietnamPro-Medium.ttf") format("opentype");
  font-weight: 500;
}

@font-face {
  font-family: "Be Vietnam Pro";
  /* src: url('../fonts/Graphik-Semibold.otf'); */
  src: url("../fonts/BeVietnamPro-SemiBold.ttf") format("opentype");
  font-weight: 600;
}

@font-face {
  font-family: "Be Vietnam Pro";
  /* src: url('../fonts/Graphik-Bold.otf'); */
  src: url("../fonts/BeVietnamPro-Bold.ttf") format("opentype");
  font-weight: 700;
}

@font-face {
  font-family: "Be Vietnam Pro";
  /* src: url('../fonts/Graphik-Bold.otf'); */
  src: url("../fonts/BeVietnamPro-ExtraBold.ttf") format("opentype");
  font-weight: 800;
}

@font-face {
  font-family: "Be Vietnam Pro";
  /* src: url('../fonts/Graphik-Black.otf'); */
  src: url("../fonts/BeVietnamPro-Black.ttf") format("opentype");
  font-weight: 900;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Be Vietnam Pro";
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Google font */
  font-weight: 500;
  font-family: "Be Vietnam Pro";
  color: rgba(45, 45, 45, 1);
}

a {
  text-decoration: none;
  cursor: pointer;
}

a:hover,
a:focus,
a:visited {
  text-decoration: none;
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0px;
}

ul,
li {
  list-style: none;
  padding: 0px !important;
  margin: 0px;
}

.text-gray {
  color: rgba(129, 129, 129, 1) !important;
}

.text-blue1 {
  color: rgba(45, 51, 225, 1) !important;
}

.text-red1 {
  color: rgba(255, 74, 35, 1) !important;
}

/* Font sizes */
/* .fs-10 {
    font-size: var(--fs-10px);
}

.fs-12 {
    font-size: var(--fs-12px);
}

.fs-14 {
    font-size: var(--fs-14px);
}

.fs-16 {
    font-size: var(--fs-16px);
}

.fs-18 {
    font-size: var(--fs-18px);
}

.fs-20 {
    font-size: var(--fs-20px);
}

.fs-22 {
    font-size: var(--fs-22px);
}

.fs-24 {
    font-size: var(--fs-24px);
}

.fs-26 {
    font-size: var(--fs-26px);
}

.fs-28 {
    font-size: var(--fs-28px);
}

.fs-30 {
    font-size: var(--fs-30px);
} */

.fw-5 {
  font-weight: 500 !important;
}

.fw-4 {
  font-weight: 400 !important;
}

/* header */

header {
  background-color: #ffffff;
  padding: 20px 20px;
}

.headerOne {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.left_header {
  display: flex;
  gap: 14.64px;
  align-items: center;
}

.logo-header {
  /* font-family: DejaVu Sans; */
  font-weight: 700;
  font-size: 20.02px;
  line-height: 23.3px;
  letter-spacing: 4.5%;
  color: rgba(45, 51, 225, 1);
  display: flex;
  gap: 9px;
  align-items: center;
}

.dropdownTheam_borderless {
  position: relative;
}

.dropdownTheam_borderless .dropdown-toggle::after {
  display: none;
}

.dropdownTheam_borderless .dropdown-menu {
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  background-color: rgba(253, 253, 253, 1);
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.dropdownTheam_borderless .btn1 {
  font-weight: 400;
  font-size: 13.33px;
  line-height: 16.84px;
  letter-spacing: 0px;
  text-align: center;
  padding: 0;
  border: 1px solid transparent;
}

.dropdownTheam_borderless .dropdown-menu::after {
  content: " ";
  position: absolute;
  right: 25px;
  top: -14px;
  background-image: url("../images/svg/Polygon.svg");
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 22px;
  height: 16px;
}

.dropdownTheam_borderless .dropdown-menu {
  width: 388px;
  /* border: 1px solid; */
  min-width: auto !important;
  padding: 26px 24px 24px 24px;
  margin-top: 38px !important;
  inset: 0px 0 auto auto !important;
}

/* The address box is anchored to its right edge above, but that edge shifts
   left as the address text gets shorter (narrower button, positioned right
   after the fixed-width logo) — for a short address the 388px-wide panel then
   overflows past the left edge of the viewport. Anchor to the LEFT edge
   instead: it stays right after the logo regardless of text length, so the
   panel always has room to open into the page on the right.
   `.addressBox.dropdownTheam_borderless` is reused as a generic dropdown
   wrapper class (the header's hamburger/profile menu AND the search box use
   the exact same two classes too), so target only the actual address-list
   panel specifically. It was identified by its `.listing-adderess-drop`
   child, but that wrapper turned out to be reused generically too (the
   search box's markup also has a `.listing-adderess-drop` div) — this
   silently hijacked the search dropdown's position with no visible
   connection between the two in this file. `.address_select` (the per-row
   class on each address card) is the one actually unique to this panel. */
.addressBox.dropdownTheam_borderless .dropdown-menu:has(.address_select) {
  inset: 0px auto auto 0 !important;
}

.addressBox.dropdownTheam_borderless .dropdown-menu:has(.address_select)::after {
  right: auto;
  left: 13px;
}

.dropdownTheam_borderless .notification-dropdown .dropdown-menu {
  inset: 0px -12px auto auto !important;
}

/* This same wrapper is also reused for the header's "Search for Helper" box
   (CustomerHeader.jsx / SignedInCustomerHeader.jsx), which intends a narrower
   ~300px panel (its own inline style), but the base .dropdown-menu rule's
   width: 388px still applied since nothing overrode it here — combined with
   the -12px rightward push above, the wider-than-intended panel ran past the
   page's right edge. Scoped via an explicit class (not :has(.searchCust)) —
   :has() chained directly before ::after isn't reliably applied in every
   engine, which silently dropped that rule below while the non-::after one
   worked fine. */
/* Bootstrap's dropdown uses Popper.js, which positions the panel via a
   JS-computed inline `transform` on open — not plain CSS left/right/inset.
   Fighting that with !important CSS never actually changed which edge it
   anchored from (only the box's own width/content visibly changed). The
   `dropdown-menu-end` class (added in JSX) is Bootstrap's own supported way
   to tell Popper to use "bottom-end" placement — anchor the panel's RIGHT
   edge to the toggle — so no manual inset override is needed here at all. */
.dropdown-menu.search-dropdown-menu {
  /* The logged-in header's search-results list (.users-container) is a fixed
     356px wide; with this panel's own p-3 padding (16px each side) that needs
     ~388px to avoid clipping/overflowing it. Capped against the viewport so
     it still can't overflow on a narrow window. */
  width: min(400px, calc(100vw - 48px)) !important;
}

/* The caret's base right: 25px was calibrated for the old 388px-wide panel;
   this one is much wider, so pull the caret in closer to the right edge
   (where the icon now correctly is, via dropdown-menu-end above). */
.dropdown-menu.search-dropdown-menu::after {
  right: 8px !important;
}

.header_inner-canvas .dropdownTheam_borderless .dropdown-menu {
  inset: 0px auto auto 0 !important;
}

.header_inner-canvas .dropdownTheam_borderless .dropdown-menu::after {
  right: auto;
  left: 13px;
}

.label_23px {
  font-weight: 700;
  font-size: 23.04px;
  line-height: 29.11px;
  letter-spacing: 0px;
  color: rgba(29, 36, 44, 1);
}

.left-address_select {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 230px;
  text-align: left;
}

.address_select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.address_select {
  padding: 16px;
  width: 100%;
  border: 1px solid rgba(129, 129, 129, 1);
  /* border: Mixed solid var(--Palatinate-Blue-PALATINATE-BLUE---original, rgba(45, 51, 225, 1)); */
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  color: rgba(45, 45, 45, 1);
  font-weight: 400;
  font-size: 13.33px;
  line-height: 16.84px;
  letter-spacing: 0px;
  position: relative;
}

/* checkbox */
.form-check {
  display: block;
  min-height: auto;
  padding-left: 0;
  margin-bottom: 0;
}

/* .form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("../images/svg/radio_checked.svg");
    background-color: transparent;
    border-color: transparent;
}

.form-check-input[type=radio] {
    --bs-form-check-bg-image: url("../images/svg/radio_unchecked.svg");
    width: 18px;
    height: 18px;

} */

/* default / unchecked */
.form-check-input[type="radio"] {
  --bs-form-check-bg-image: url("../images/svg/radio_unchecked.svg");
  width: 18px;
  height: 18px;
  background-size: 18px 18px; /* helpful if the SVG isn’t 1 em */
  background-color: transparent;
  border-color: transparent;
}

/* checked */
.form-check-input[type="radio"]:checked {
  --bs-form-check-checked-bg-image: url("../images/svg/radio_checked.svg");
  background-color: transparent; /* keeps only the icon */
  border-color: transparent;
}

.form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: none;
  border: 0;
}

.form-check-input[type="checkbox"] {
  /*--bs-form-check-bg-image: url("../images/svg/input_checkbox.svg");
    */
  width: 18px;
  height: 18px;
  background-color: rgba(213, 214, 249, 1);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
}

.form-check .form-check-input {
  float: none;
  margin-left: 0;
}

.form-check-input:checked[type="checkbox"] {
  background-image: url("../images/svg/check-blue2.svg");
}

.form-check-input[type="checkbox"].active {
  background-image: url("../images/svg/check-blue2.svg");
  border: 1px solid;
}

/* End checkbox */

.radio-Box-address {
  display: flex;
  gap: 8px;
  align-items: center;
}

.right-address_select {
  position: absolute;
  right: 8px;
  top: 8px;
}

.listing-adderess-drop .address_select {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(199, 199, 204, 1);
  background-color: white !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  transition: all 0.2s ease;
}

.listing-adderess-drop .address_select.active {
  border: 1.5px solid rgba(45, 51, 225, 1);
  background-color: #FAFAFF !important;
}

.listing-adderess-drop .address-card-content {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-right: 55px;
}

.listing-adderess-drop .address-details-box {
  display: flex;
  flex-direction: column;
  text-align: left;
  min-width: 0;
}

.listing-adderess-drop .address-line1 {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: #1c1c1e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-adderess-drop .address-line2 {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  color: #48484a;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.listing-adderess-drop .right-address-actions {
  position: absolute;
  right: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.listing-adderess-drop .address-actions-menu.dropdown-menu {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  padding: 6px 0 !important;
  margin-top: 4px !important;
  inset: 100% 0 auto auto !important;
  transform: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  background-color: #ffffff !important;
  z-index: 1050 !important;
}

.listing-adderess-drop .address-actions-menu.dropdown-menu::after {
  display: none !important;
}

.listing-adderess-drop .address-actions-menu .dropdown-item {
  padding: 6px 14px !important;
  font-size: 13px !important;
  color: #2d2d2d;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease;
}

.listing-adderess-drop .address-actions-menu .dropdown-item:hover {
  background-color: #f3f4f6 !important;
}

.listing-adderess-drop .address-actions-menu .dropdown-item.text-danger:hover {
  background-color: #fee2e2 !important;
  color: #dc2626 !important;
}

.btn-h-32px {
  height: 32px;
}

.right_header {
  display: flex;
  gap: 12.5px;
  align-items: center;
}

.right_header {
  .box1 {
    display: flex;
    gap: 16px;
    align-items: center;
  }
}

.userdrop {
  display: flex;
  gap: 7px;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0px;
  text-align: center;
  color: rgba(45, 45, 45, 1);
  padding: 0;
}

.img_userdrop {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.object_fit {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.right_header {
  .btn_theam {
    padding: 7.5px 32px;
  }
}

.w-162px {
  width: 162px !important;
}

.listing-menu {
  display: flex;
  flex-direction: column;
  gap: 27px;

  li {
    a {
      font-weight: 400;
      font-size: 13.33px;
      line-height: 16.84px;
      letter-spacing: 0px;
      text-align: center;
      color: rgba(45, 45, 45, 1);
      display: block;

      &:hover {
        color: rgba(45, 51, 225, 1);
      }
    }

    button {
      font-weight: 400;
      font-size: 13.33px;
      line-height: 16.84px;
      letter-spacing: 0px;
      text-align: center;
      color: rgba(45, 45, 45, 1);
      display: block;
      background: none;
      border: none;
      text-align: left;
      padding: 0;

      &:hover {
        color: rgba(45, 51, 225, 1);
      }
    }
  }
}

.btn.active,
.btn {
  border-color: transparent !important;
}

.header_inner-canvas .dropdownTheam_borderless .dropdown-menu {
  margin-top: 12px !important;
  width: 316px;
}

.header_inner-canvas .right_header {
  align-items: start;
}

.userdropmain {
  white-space: nowrap;
  padding: 0;
}

/* End header */

/* Home page */
.px-100 {
  padding-left: 100px;
  padding-right: 100px;
}

section {
  padding-top: 25px;
  padding-bottom: 25px;
}

.hero-sec-index {
  padding-top: 74px;
  padding-bottom: 60px;
  background-color: rgba(253, 253, 253, 1);
}

.left-hero-sec {
  padding-top: 70px;
  padding-bottom: 50px;
}

.faq-sec {
    padding-top: 95px;
    padding-bottom: 80px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 22px;
    width: 100%;
}

.h1-title {
  font-weight: 800;
  font-size: 47.78px;
  line-height: 60.36px;
  letter-spacing: 0px;
  color: rgba(45, 45, 45, 1);
}

.h1-title span {
  color: rgba(45, 51, 225, 1);
  font-weight: 800;
}

.h2-title-30px {
  font-weight: 700;
  font-size: 30px;
  line-height: 37.95px;
  letter-spacing: 0px;
  color: rgba(45, 45, 45, 1);
}

.h2-subtitle-16px {
  font-weight: 400;
  font-size: 16px;
  line-height: 20.21px;
  letter-spacing: 0px;
  color: rgba(129, 129, 129, 1);
}

.hero-sec-index .h1-subtitle {
  max-width: 566px;
  color: rgba(45, 45, 45, 1);
  font-weight: 700;
  font-size: 19.2px;
  line-height: 24.26px;
  letter-spacing: 0px;
}

/* .right-hero-sec img{
    width: 100%;
    height: auto;
} */
.right-hero-sec {
  text-align: right;
}

/* Same card look as the grid/swiper version of these tiles (border, shadow,
   active/hover color swap all come from the shared .card-book_serviceBox
   rules below) — just stacked full-width, one per row, as a horizontal
   row layout instead of the vertical centered layout used in the grid. */
.category-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Mobile category picker: a plain 2-column grid of the same
   .card-book_serviceBox tiles used in the desktop swiper — tapping one
   goes straight to booking, so there's no accordion/expand state here. */
.category-grid-mobile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.category-accordion .card-book_serviceBox .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.category-accordion .category-accordion-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.category-accordion .card-book_serviceBox .card-body .card-title {
  margin: 0 0 2px 0;
}

.category-accordion .card-text {
  margin: 0;
}

.category-accordion-chevron {
  color: rgba(129, 129, 129, 1);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.category-accordion .card-book_serviceBox:hover .category-accordion-chevron,
.category-accordion .card-book_serviceBox.active .category-accordion-chevron {
  color: rgba(253, 253, 253, 1);
}

.category-accordion .card-book_serviceBox.active .category-accordion-chevron {
  transform: rotate(180deg);
}

.category-accordion-body.book_serviceBox-badges {
  margin-top: 12px;
  padding: 0 4px;
}

.card-book_serviceBox .card {
  border: 0.5px solid var(--CARBON-FIBER-ULTRA-LIGH, rgba(192, 192, 192, 1));
  box-shadow: 0px 2px 4.5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  overflow: hidden;
}

.card-book_serviceBox .card-body {
  padding: 16px;

  .card-title {
    font-weight: 700;
    font-size: 19.2px;
    line-height: 24.26px;
    letter-spacing: 0px;
    color: rgba(45, 45, 45, 1);
    margin: 25.93px 0 5.53px 0;
  }

  .card-text {
    color: rgba(129, 129, 129, 1);
    font-weight: 500;
    font-size: 16px;
    line-height: 20.24px;
    letter-spacing: 0px;
  }
}

.card-book_serviceBox.active .card-body,
.card-book_serviceBox:hover .card-body {
  background-color: rgba(27, 31, 135, 1);
  cursor: pointer;
}

.card-book_serviceBox .icon-active {
  display: none;
}

.card-book_serviceBox:hover .icon-active,
.card-book_serviceBox.active .icon-active {
  display: block;
  filter: brightness(0) invert(1);
}

.card-book_serviceBox:hover .icon-unactive,
.card-book_serviceBox.active .icon-unactive {
  display: none;
}

.card-book_serviceBox.active .card-title,
.card-book_serviceBox.active .card-text,
.card-book_serviceBox:hover .card-title,
.card-book_serviceBox:hover .card-text {
  color: rgba(253, 253, 253, 1);
}

.book_serviceBox-badges {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 32px;
  flex-wrap: wrap;

  .book_serviceBox-badge {
    &.btn_theam {
      padding: 10px 22px;
    }
  }
}

.subscribe-box {
  max-width: 566px;
  background: white;
  display: flex;
  justify-content: end;
  border-radius: 24px;
  padding: 5px;
  align-items: center;
}

.subscribe-box button {
  background-color: #2d2df5;
  color: white;
  border: none;
  padding: 20px 40px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  /* font-family: Be Vietnam Pro; */
  font-weight: 600;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0px;
  text-transform: capitalize;
}

.subscribe-box input {
  border: none;
  outline: none;
  padding: 15px 20px;
  flex: 1;
  border-radius: 50px;
  font-size: 16px;
  /* color: gray; */
  /* font-family: Be Vietnam Pro; */
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0px;
  background: transparent;
  /* text-transform: capitalize; */
}

.subscribe-box button:hover {
  background-color: #1e1ed1;
}

@media (max-width: 1024px) {
  .subscribe-box button {
    padding: 18px 12px;
    border-radius: 20px;
    font-size: 16px;
    font-size: 14px;
  }

  .subscribe-box input {
    padding: 15px 10px;
    flex: 1;
    border-radius: 50px;
    font-size: 16px;
    color: gray;
    /* font-family: Be Vietnam Pro; */
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0px;
    text-transform: capitalize;
  }
}

@media (max-width: 575px) {
  .subscribe-box input {
    padding: 15px 6px;
    font-size: 12px;
  }
}

/* End Home page */

/* setting-cust */
.setting-cust-one {
  background-color: rgba(247, 247, 254, 1);
  padding: 32.5px 24px;
  margin-bottom: 20px;
}

.h1-title-39px {
  font-weight: 700;
  font-size: 39.81px;
  line-height: 50.29px;
  letter-spacing: 0px;
  color: rgba(27, 31, 135, 1);
}

.h1-subtitle-16px {
  font-weight: 400;
  font-size: 16px;
  line-height: 20.21px;
  letter-spacing: 0px;
  color: rgba(45, 51, 225, 1);
}

.arrow_back-setting {
  margin-top: 15px;
  display: inline-block;
  cursor: pointer;
}

.theam_setting {
  border: 1px solid
    var(--Palatinate-Blue-Palatinate-Blue-3, rgba(192, 194, 246, 0.5));
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  padding-bottom: 16px;
  overflow: hidden;
}

.theam_setting_main {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  padding: 25px;
  /* min-height: calc(100vh - 20px); */
  min-height: auto;
  position: relative;
  padding-bottom: 48px !important;
}

.bg-white1 {
  background-color: rgba(244, 244, 244, 1);
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.theam_setting ul {
  flex-direction: column;
}

.theam_setting {
  ul {
    li {
      .nav-link {
        width: 100%;
        border-radius: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        padding: 16px 15px 0px 15px;

        .box1 {
          border-bottom: 1px solid
            var(--Palatinate-Blue-Palatinate-Blue-3, rgba(192, 194, 246, 0.5));
          padding-bottom: 15px;
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: space-between;
          gap: 12px;

          .right {
            display: flex;
          }

          h3 {
            font-weight: 700;
            font-size: 19.2px;
            line-height: 24.26px;
            letter-spacing: 0px;
            color: rgba(45, 45, 45, 1);
            text-align: left;
          }

          p {
            font-weight: 400;
            font-size: 11.11px;
            line-height: 15.78px;
            letter-spacing: 0px;
            color: rgba(129, 129, 129, 1);
            text-align: left;
          }

          .icon-active {
            display: none;
          }
        }

        &.active {
          background-color: rgba(45, 51, 225, 1);

          .box1 {
            border-color: transparent;

            .icon-active {
              display: block;
            }

            .icon-unactive {
              display: none;
            }
          }

          h3,
          p {
            color: rgba(253, 253, 253, 1);
          }
        }
      }
    }
  }
}

.company-upload-img,
.photo-upload-img {
  display: flex;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.photo-upload-img {
  width: 113px;
  height: 113px;
  /*background-image: url('../images/uplooad-photo.png');
    */
  justify-content: center;
  margin: auto;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  overflow: hidden;

  .photo-upload-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.userPhoto-sett {
  font-weight: 700;
  font-size: 27.65px;
  line-height: 34.93px;
  letter-spacing: 0px;
  text-align: center;
  color: rgba(45, 45, 45, 1);
  padding: 32px 16px;
  background: #f7f7fe;
}

.mt-84px {
  margin-top: 84px;
}

/* MY ACCOUNT PAGE START */
.sec1_myaccount .title_box1 {
  max-width: 547px;
  margin: auto;
  margin-bottom: 0px;
}

.sec1_myaccount .container_sec1-box {
  padding: 94px 0;
}

.sec1_myaccount .sec1_home_singin {
  margin-bottom: 80px;
}

.photo-upload {
  width: 100%;
  padding: 45px 15.5px 16px 15.5px;
  background-color: rgba(46, 70, 89, 1);
  border-radius: 14px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
}

.photo-upload {
  width: 100%;
  padding: 15px;
}

.upload-photo-name {
  font-size: 20px;
  font-weight: 700;
  line-height: 25.7px;
  color: #ffff;
  margin: 15px 0 20px 0;
  text-align: center;
}

.address-box1 {
  width: 100%;
  padding: 18px;
  border-radius: 10px;
  background-color: rgba(0, 170, 247, 1);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.img-rounded img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.img-rounded {
  background-color: rgb(255, 252, 252);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}

.address-img1 {
  width: 38px;
  height: 38px;
}

.flex-box1 {
  display: flex;
  gap: 10.42px;
  align-items: center;
}

.flex-box1 .right {
  text-align: left;
  color: #ffff;
}

.account-linkbox {
  background-color: rgba(46, 70, 89, 1) !important;
  width: 100%;
  margin-top: 20px;
  padding: 0;
}

.address-box1 .right p:first-child {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 24.32px;
  font-size: 15px;
  font-weight: 600;
  line-height: 22.8px;
}

.address-box1 .right p:nth-child(2) {
  font-size: 12px;
  font-weight: 400;
  line-height: 14.52px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16.94px;
}

.account-linkbox a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 43px;
}

.account-linkbox a.active {
  background-color: rgba(255, 255, 255, 0.11);
}

.account-linkbox a .left {
  display: flex;
  gap: 14px;
}

.account-linkbox a .title p:first-child {
  color: rgba(246, 247, 248, 1);
  margin-bottom: 5px;
}

.account-linkbox a .title p:nth-child(2) {
  color: rgba(246, 247, 248, 0.5);
}

.account-linkbox a .left img {
  width: 35px;
  height: 35px;
}

.account-title-container {
  margin-bottom: 30px;
}

.personal-info-box {
  padding: 20px 20px 0 20px;
}

.box-design {
  border: 1px solid rgba(192, 194, 246, 0.5);
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 14px;
  -ms-border-radius: 14px;
  -o-border-radius: 14px;
}

.title-23px {
  font-weight: 700;
  font-size: 23.04px;
  line-height: 29.11px;
  letter-spacing: 0px;
  color: rgba(45, 45, 45, 1);
}

.lable-1 {
  color: rgba(45, 45, 45, 1);
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
}

.lable-update.lable1 {
  color: rgba(46, 70, 89, 1);
}

.personal-info-box {
  margin-bottom: 18px;
}

.compy-info-photo {
  margin-bottom: 20px;
}

.id-proof-box {
  width: 138px;
  height: 138px;
  padding: 19px 2.5px;
  background-color: white;
  margin-bottom: 26px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
}

.my-acc-update-btn {
  margin-bottom: 69px;
}

.photo-upload-img {
  width: 113px;
  height: 113px;
  justify-content: center;
  margin: auto;
}

.company-upload-img,
.photo-upload-img {
  display: flex;
  align-items: center;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.company-upload-img {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

/* MY ACCOUNT PAGE END */

.applybox {
  display: flex;
  height: auto;
  justify-content: end;
  align-items: end;
  padding-bottom: 16px;

  button {
    width: 106px;
  }
}

.listi-accinfo li button,
.listi-accinfo li .listi-accinfobox {
  background-color: transparent;
  border: 0;
  width: 100%;
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid
    var(--Palatinate-Blue-Palatinate-Blue-3, rgba(192, 194, 246, 1));
}

.listi-notificaion .listi-accinfo {
  gap: 17px;
  display: flex;
  flex-direction: column;
}

.listing-adderessTab .address_select {
  padding: 16px;
  width: 230px;
  height: 140px;
  color: rgba(45, 45, 45, 1);
  background-color: rgba(247, 247, 254, 1);
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  cursor: pointer;
  text-align: start;
  border-radius: 10px;
  white-space: normal;
  word-break: break-all;
  position: relative;
}

.listing-adderessTab .address-Img {
  width: 230px;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  background-color: transparent;
}

.listing-adderessTab .address_select .bottom {
  text-align: left;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.address-name {
  font-weight: 700;
  font-size: 19.2px;
  line-height: 24.26px;
  letter-spacing: 0px;
  color: rgba(27, 31, 135, 1);
}

.listing-adderessTab .listing-adderess-drop {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
  padding: 0;
}

.listi-notificaion .fs-sm {
  color: rgba(129, 129, 129, 1);
  margin: 6px 0 16px 0;
}

.box-notification {
  display: flex;
  flex-direction: column;
}

.listing-taskupdate {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* End setting-cust */

/* footer */
#footer-signin {
  padding: 50px 0 0 0;
  background-color: rgba(45, 45, 45, 1);
  color: rgba(255, 255, 255, 1);
}

.logo-footer {
  width: 143px;
  height: auto;
  margin-bottom: 25px;
}

.footer-signin-left::before {
  display: none;
}

.footer-signin-left {
  display: flex;
}

.footer-signin-center-container {
  justify-content: center;
}

.footer-signin-left p {
  max-width: 367px;
}

.footer-signin-left p,
.footer-signin-right p {
  font-size: 12px;
  font-weight: 400;
  line-height: 22.5px;
  text-align: left;
  color: rgba(255, 255, 255, 1);
}

#footer-signin h5 {
  font-size: 16px;
  font-weight: 700;
  line-height: 22.13px;
  margin-bottom: 15px;
  color: rgba(253, 253, 253, 1);
}

#footer-signin ul {
  display: flex;
  flex-direction: column;
  gap: 3.75px;
  opacity: 50%;
}

#footer-signin ul li {
  display: flex;
  align-items: center;
  gap: 3.75px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22.5px;
}

.footer-signin-center-container {
  display: flex;
  gap: 58px;
}

.footer-signin-center-container .quick-link-footer {
  color: rgba(253, 253, 253, 0.5);
}

.footer-signin-center-container a:hover {
  text-decoration: underline;
}

#footer-signin .footer-signin-right h5 {
  margin-bottom: 10px;
}

.footer-signin-right {
  max-width: 378px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: end;
}

/* .footer-signin-right p { */
/* .footer-signin-right p {
    font-size: 20px;
    font-weight: 300;
    line-height: 30px;
    max-width: 286px;
} */

.ply-apple-btns2 {
  margin-top: 25px;
  display: flex;
  gap: 20px;
}

#footer-signin .row:first-child {
  padding-bottom: 50px;
}

.copyright-2024 {
  font-size: 12px;
  font-weight: 500;
  line-height: 18.78px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
}

.copyright-2024 span {
  font-weight: 700;
  color: rgba(255, 255, 255, 1);
}

.social-links3 .one {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}

.social-links3 .one:hover {
  background-color: black;
}

.social-links3 {
  display: flex;
  gap: 20px;
  margin-top: 25px;
}

.footer-signin-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  background-color: rgba(27, 31, 135, 1);
}

.enter-email .email1:active,
.enter-email .email1:focus-visible {
  border: 0;
  outline: none;
}

.enter-email .email1::placeholder {
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}

.enter-email .email1 {
  border: 0;
  width: 68%;
  background: transparent;
  font-size: 12px;
  font-weight: 400;
  line-height: 15.18px;
  text-align: left;
  color: rgba(255, 255, 255, 1);
}

.enter-email {
  max-width: 370px;
  height: 50px;
  background-color: transparent;
  border: 1px solid rgba(73, 101, 123, 0.15);
  padding: 10px;
  border-radius: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 20px;
  border: 0.75px solid rgba(126, 135, 159, 0.2);
}

.subscriber {
  font-size: 12px;
  font-weight: 500;
  line-height: 28.32px;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(45, 51, 225, 1);
  padding: 8px 15px;
  border: 0;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  position: absolute;
  right: 3.75px;
}

/* Scroll to Top Arrow */
#scrollToTopBtn {
  display: none;
  position: fixed;
  bottom: 22px;
  right: 51px;
  width: 45px;
  height: 45px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  border-radius: 22px;
  background-image: url("../images/svg/arro-scroll.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  z-index: 999;
}

.footer-logo-name img {
  width: 40px;
}

.footer-logo-name {
  font-size: 33.47px;
  font-weight: 800;
  line-height: 39.94px;
  letter-spacing: 0.045em;
  text-align: left;
  color: rgba(10, 186, 181, 1);
}

@media (max-width: 1366) {
  /* FOOTER START */
  .footer-signin-left div:first-child {
    max-width: 300px;
  }

  .footer-logo-name {
    font-size: 22.47px;
    font-weight: 800;
    line-height: 21.94px;
  }

  /* FOOTER END */
}

@media (max-width: 1199px) {
  /* FOOTER START */
  .footer-signin-left div:first-child {
    max-width: 237px;
  }

  .footer-signin-left::before {
    left: -52px;
  }

  #footer-signin .row:first-child {
    padding-bottom: 50px;
  }

  .subscriber {
    padding: 8px 7px;
  }

  /* FOOTER END */
}

@media (max-width: 992px) {
  /* FOOTER START */
  .footer-signin-left::before {
    left: -30px;
  }

  #footer-signin {
    padding: 30px 0 0 0;
  }

  /* FOOTER END */
}

@media (max-width: 575px) {
  /* FOOTER START */
  .footer-signin-left {
    justify-content: start;
    padding-bottom: 20px;
  }

  .footer-signin-center-container {
    justify-content: start;
  }

  .footer-signin-left p {
    max-width: 100%;
  }

  /* FOOTER END */
}

/* Scroll to Top Arrow */

/* end footer */

/* Landing Helper */
.joinusbtn.btn_theam_14px {
  padding: 11px 32px;
}

.box-helper-heroleft {
  max-width: 353px;
}

/* End Landing Helper */

/* signupservice */

.theam_settingHelper .theam_setting ul {
  padding: 16px;
}

.theam_setting ul li .nav-link .box1 h3 {
  text-wrap: nowrap;
}

.theam_settingHelper .theam_setting ul li .nav-link {
  padding: 16px 16px 0 16px;
  border: 0;
}

.theam_settingHelper .theam_setting ul li .nav-link.active {
  background-color: transparent;
}

.theam_settingHelper .theam_setting ul li .nav-link.active h3 {
  color: rgba(45, 51, 225, 1);
}

.theam_settingHelper .theam_setting ul li .nav-link.active .box1 .icon-active {
  display: block;
}

.theam_settingHelper .theam_setting ul li .nav-link .box1 {
  border-bottom: 1px solid
    var(--Palatinate-Blue-Palatinate-Blue-3, rgba(192, 194, 246, 0.5));
}

.theam_settingHelper .theam_setting ul li .box1 h3 {
  color: rgba(129, 129, 129, 1);
}

.headingTheamService {
  margin-bottom: 24px;
}

.headingTheamService p {
  text-align: start;
}

/* End signupservice */

/* Service tab */
.tab-containerCust {
  display: flex;
  gap: 24px;
  align-items: center;
  overflow-x: auto;
}

.tab-containerCust .theam_setting {
  border: 0;
  padding: 0;
}

.tab-containerCust .theam_setting ul {
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 24px;
}

.tab-containerCust .theam_setting ul li button {
  padding: 9px 16px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border: 1px solid
    var(--Nightly-Expedition-NIGHTLY-EXPEDITION, rgba(27, 31, 135, 1));
  position: static;
}

.tab-containerCust .theam_setting ul li button .box1 {
  padding-bottom: 0;
  border-bottom: 0;
}

.tab-containerCust .theam_setting ul li button .icon-active,
.tab-containerCust .theam_setting ul li button .icon-unactive {
  width: 24px;
}

.tab-containerCust .theam_setting ul li button .box1 h3 {
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0px;
}

.tab-containerCust .theam_setting ul .nav-item {
  position: relative;
}

.tab-containerCust .theam_setting ul li .nav-link.active::after {
  content: " ";
  background-color: rgba(27, 31, 135, 1);
  width: calc(100% - 32px);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.tab-containerCust .theam_setting ul li .nav-link.active {
  background-color: rgba(27, 31, 135, 1);
}

.tab-containerCust .theam_setting ul li .nav-link.borderless::after {
  display: none !important;
}

.tab-containerCust .theam_setting ul .nav-item {
  position: relative;
  padding: 8.72px !important;
}

.radiobtnChecked {
  position: absolute;
  right: 0px;
  top: 0px;
}

/* End Service tab */

/* Profile start */
.box-uploadpro {
  display: flex;
  gap: 8px;
  flex-direction: column;
  width: 164px;
}

.uploadGuidline {
  display: flex;
  width: 100%;
  justify-content: center;
  padding-top: 56px;
}

.uploadGuidline .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 126%;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  color: rgba(45, 45, 45, 1);
  max-width: 380px;
}

/* Image galaary */
.gallery-modal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin: 0 auto 20px;
}

.box-avail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* grid-template-columns: 60% 40%; */
  gap: 16px;
}

@media (min-width: 1780px) {
  .box-avail {
    display: grid;
    /* grid-template-columns: repeat(2, 1fr); */
    grid-template-columns: 55% 45%;
    gap: 16px;
  }
}

@media (max-width: 1400px) {
  .box-avail {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 480px) {
  .timebox {
    flex-direction: column;
  }
}

.gallery-modal .galary_img {
  border: 2px solid rgba(45, 51, 225, 1);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin: 0 auto 24px;
}

.galary_img {
  width: 100%;
  height: 100%;
  min-height: 88px;
}

@media (max-width: 767px) {
  .galary_img {
    min-height: 50px;
  }
}

@media (max-width: 480px) {
  .galary_img {
    min-height: 30px;
  }
}

.galary_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
  -webkit-transition: transform 0.3s ease-in-out;
  -moz-transition: transform 0.3s ease-in-out;
  -ms-transition: transform 0.3s ease-in-out;
  -o-transition: transform 0.3s ease-in-out;
}

.galary_img:hover {
  transform: scale(1.02);
  -webkit-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -ms-transform: scale(1.02);
  -o-transform: scale(1.02);
}

.left-drop {
  inset: 0px 0 auto auto !important;
}

.edit-drop .dropdownTheam_borderless .dropdown-menu {
  width: 162px;
  min-width: auto !important;
  padding: 0;
  margin-top: 0px !important;
  gap: 0;
}

.edit-drop .listing-menu {
  gap: 0;
  padding: 8px 0;
}

.edit-drop .listing-menu li a {
  padding: 8px;
  color: rgba(255, 74, 35, 1);

  &:hover {
    background-color: rgba(234, 235, 252, 1);
    color: rgba(45, 45, 45, 1);
  }

  &.active {
    background-color: rgba(234, 235, 252, 1);
    color: rgba(45, 45, 45, 1);
  }
}

/* End Image galaary */
/* Profile end */

/* Area of availability */
.mapbox iframe {
  width: 100%;
  height: 420px;
}

@media (max-width: 575px) {
  .mapbox iframe {
    width: 100%;
    height: 200px;
  }
}

/* .box-setAvailability input:disabled{
        width: 84px;
} */

.box-border-01 {
  border: 1px dashed
    var(--Palatinate-Blue-Palatinate-Blue-3, rgba(192, 194, 246, 1));
  padding: 16px 18px;
}

/* end Area of availability */

/* Finde helper customer */
.progress-container {
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  position: relative;
  height: 8px;
  width: 100%;
  background-color: #abadf3;
  display: flex;
  align-items: center;
}

.progress {
  background-color: #2d33e1;
  height: 100%;
  border-radius: 0;
  width: 0;
  transition: width 0.4s linear;
  position: absolute;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

.percentage {
  background-color: #2d33e1;
  border-radius: 5px;
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
  color: #fff;
  padding: 10px 16px;
  position: absolute;
  top: -60px;
  left: 0;
  transform: translateX(-50%);
  width: auto;
  text-align: center;
  transition: left 0.4s linear;
  font-weight: 700;
  font-size: 19.2px;
  line-height: 126%;
}

.percentage::after {
  background-color: #2d33e1;
  content: "";
  position: absolute;
  top: auto;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  height: 10px;
  width: 10px;
  z-index: -1;
  bottom: -2px;
}

.progress-circle {
  width: 30px;
  height: 30px;
  background-color: #2d33e1;
  border-radius: 50%;
  position: absolute;
}

.start-circle {
  left: -7px;
  border: 3px solid #ffffff;
}

.end-circle {
  right: -7px;
  border: 3px solid #abadf3;
}

.pricebox > div {
  width: 157px;
}

.pricebox {
  width: 100%;
}

/* End Finde helper customer */

/* Notification  */
.notifications-container {
  /* max-width: 688px; */
  background: white;
  border-radius: 4px;
  /* padding: 20px; */
  margin: 30px auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.notif-heading {
  padding: 22px 16px 42px 16px;
}

.notification-item {
  padding: 16px;
  border-radius: 0;
  display: flex;
  align-items: start;
  gap: 8px;
  border-bottom: 1px solid #c0c2f6;
  cursor: pointer;
}

.notification-dropdown .notification-item {
  gap: 10px;
}

.notification-item:hover {
  background-color: #eef2ff !important;
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-icon {
  font-size: 32px;
  color: #2d2df5;
  /* background: #e8e8ff; */
  /* padding: 10px; */
  /* border-radius: 50%; */
  line-height: normal;
}

.notification-content {
  flex: 1;
}

.notification-time {
  font-size: 12px;
  color: #1b1f87;
  color: #818181;
  /* font-family: Be Vietnam Pro; */
  font-weight: 400;
  font-size: 11.11px;
  line-height: 142%;
  letter-spacing: 0px;
}

.notification-text {
  font-size: 14px;
  /* font-family: Be Vietnam Pro; */
  font-weight: 400;
  font-size: 13.33px;
  line-height: 126%;
  letter-spacing: 0px;
  color: #2d2d2d;
}

.notification-bold {
  font-weight: bold;
  color: #2d2d2d;
}

.unread {
  background-color: #eef2ff;
  /* border-bottom: 1px solid #C0C2F6; */
}

.notibtn .dot {
  width: 8px;
  height: 8px;
  position: absolute;
  right: 8px;
  top: 3px;
}

.dot {
  width: 8px;
  height: 8px;
  background-color: #ff4a23;
  border-radius: 50%;
}

/* End Notification  */

/* Calander */
.calendar-container {
  width: 100%;
  padding: 20px;
  background: white;
  border-radius: 10px;
  border: 1px solid #c0c2f6;
}

span#calendar-month {
  color: #2d33e1;
  font-weight: 700;
  font-size: 19.2px;
  line-height: 126%;
}

.calendar-mainheader {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.calendar-mainheader h2 {
  font-weight: 700;
  font-size: 23.04px;
  line-height: 126%;
  letter-spacing: 0px;
  color: rgba(27, 31, 135, 1);
}

.calendar-mainheader a {
  font-weight: 400;
  font-size: 11.11px;
  line-height: 142%;
  letter-spacing: 0px;
  color: rgba(129, 129, 129, 1);
}

.calendar-mainheader a.active {
  color: rgba(45, 45, 45, 1);
  text-decoration: underline;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  color: #3b3b98;
  padding: 10px 0;
}

.calendar-header i {
  width: 24px;
  height: 24px;
  border: 1px solid;
  cursor: pointer;
  color: #3b3b98;
  font-size: 22px;
  transition: color 0.2s ease-in-out;
}

.calendar-header i:hover {
  color: #2d2d86;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-weight: bold;
  color: #777;
}

.calendar-dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-top: 10px;
}

.date {
  padding: 10px;
  cursor: pointer;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 400;
  font-size: 13.33px;
  line-height: normal;
  letter-spacing: 0px;
  text-align: center;
  vertical-align: middle;
  margin: auto;
}

@media (max-width: 1440px) {
  .date {
    padding: 6px;
    height: 30px;
    width: 30px;
  }
}

.date:hover {
  background-color: #eaebfc;
  color: #2d33e1;
}

.date.selected {
  background-color: #eaebfc; /* Use your theme's blue color */
  color: #2d33e1;
  /* font-weight: bold; */
}

.date.disabled {
  color: #adb5bd; /* A light grey for disabled dates */
  cursor: not-allowed;
  pointer-events: none; /* Prevents clicking on disabled dates */
}

.date:not(.disabled):not(.selected):hover {
  background-color: #e9ecef; /* Light grey background on hover */
}

.date-empty {
  /* This element is just for spacing, so it has no visible content */
  cursor: default;
}

.lable-available {
  color: #2d33e1;
  font-weight: bold;
}

.active-date {
  background-color: #2d33e1;
  color: white;
}

.disabled {
  color: #bbb;
}

.time-slots {
  margin-top: 15px;
}

.time-slots div {
  display: inline-block;
  padding: 4px 13px;
  border: 1px solid #d5d6f9;
  border-radius: 8px;
  margin: 5px;
  cursor: default;
  color: rgba(45, 45, 45, 1);
}

.time-slots div:hover {
  background: transparent;
  color: rgba(45, 45, 45, 1);
}

/* End Calander */
.paymentbox {
  width: 200px;
}

.react-tel-input .form-control {
  width: 100% !important;
}

.error-message {
  color: #dc3545 !important;
  padding-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.2;
  text-align: start;
}

.error-message span,
.success-message span {
  color: inherit !important;
}

.success-message {
  color: #4ade80 !important;
  padding-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.2;
  text-align: start;
}

.otp-success-message,
.otp-success-message span {
  color: #15803d !important;
}

.otp-success-message {
  padding-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.2;
}

.subscribe-sec .error-message {
  color: #f87171 !important;
}

.form-control-cust input[type="time"] {
  color-scheme: light;
}

.form-control-cust input[type="date"] {
  color-scheme: light;
}

.form-control-cust input[type="time"]::-webkit-calendar-picker-indicator {
  /* filter: invert(1); */
  cursor: pointer;
}

/* Date Range Picker */

/* wrapper must be relative so the picker + arrow can be positioned */
.date-input-wrapper {
  position: relative;
  display: inline-block; /* or width:100% if inside flex/column */
}

/* A <div> standing in for the read-only date <input> — inputs can never
   wrap, so a long multi-date selection ("17 Sep, 18 Sep, ...") just got
   clipped behind the arrow instead of flowing onto a second line. */
.date-display {
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  cursor: pointer;
  padding-right: 36px; /* keep clear of the arrow icon */
}

.date-placeholder {
  color: #6c757d;
}

/* arrow sits inside the input on the right */
.date-input-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #3a20ff; /* same blue you used elsewhere */
  cursor: pointer;
  pointer-events: auto;
}

/* calendar pop‑up directly under the input */
.picker-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1050;
}

.cursor-pointer {
  cursor: pointer !important;
}

.react-tel-input .form-control {
  background: rgba(247, 247, 254, 1) !important;
  border: none !important;
}

.react-tel-input .country-list .country {
  position: relative;
  padding: 12px 9px 13px 46px !important;
}

.react-tel-input .country-list .search-box {
  background-color: white !important;
}

.react-tel-input .country-list .search {
  padding: 10px 0 6px 10px !important;
}

/* --- UPDATED CSS FOR DOUBLE-SIDED SLIDER --- */
.price-range-container {
  position: relative;
  width: 100%;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.price-range-track {
  position: absolute;
  width: 100%;
  height: 4px;
  background-color: #e9ecef;
  border-radius: 2px;
}

.price-range-progress {
  position: absolute;
  height: 10px;
  background-color: #3b23f3; /* Your theme's primary color */
  /* z-index: 1; */
}

.price-range-thumb {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #3b23f3;
  border: 3px solid #ffffff;
  border-radius: 50%;
  transform: translateX(-50%); /* Center the thumb on the line */
  /* z-index: 2; */
  cursor: grab;
}
.price-range-thumb:active {
  cursor: grabbing;
}

.price-range-thumb .price-range-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -10px); /* Position above thumb */
  background-color: #3b23f3;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.price-range-thumb.active .price-range-tooltip,
.price-range-thumb:hover .price-range-tooltip {
  opacity: 1;
  transform: translate(-50%, -18px); /* Move up on hover/drag */
}

/* Make the number input hide its default arrows */
.pricebox input[type="number"]::-webkit-outer-spin-button,
.pricebox input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pricebox input[type="number"] {
  -moz-appearance: textfield;
}

/* Provider Loader */
.provider-loader {
  width: 3.25em;
  transform-origin: center;
  animation: provider-rotate 2s linear infinite;
}

.provider-loader circle {
  fill: none;
  stroke: #2d33e1;
  stroke-width: 5;
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  animation: provider-dash 1.5s ease-in-out infinite;
}

@keyframes provider-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes provider-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 200;
    stroke-dashoffset: -35px;
  }

  100% {
    stroke-dashoffset: -125px;
  }
}

/* Welcome page */
.container-welcome {
  position: relative;
  background-color: #1b1f87;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 99px;
}

.content {
  flex: 1;
  max-width: 600px;
  z-index: 10;
}

.welcome-title {
  font-size: 47.78px;
  font-weight: 800;
  line-height: 1.263;
  color: #eaebfc;
  margin-bottom: 32px;
  white-space: pre-line;
}

.welcome-subtitle {
  font-size: 20px;
  font-weight: 400;
  color: #f4f4f4;
  margin-bottom: 24px;
}

.welcome-description {
  font-size: 16px;
  font-weight: 400;
  color: #f4f4f4;
  line-height: 1.263;
  margin-bottom: 48px;
  max-width: 453px;
}

.button-container-welcome {
  display: flex;
  gap: 60px;
  align-items: center;
}

.complete-profile-btn {
  background-color: #d5d6f9;
  color: #1b1f87;
  border: none;
  border-radius: 6px;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: "Be Vietnam Pro", sans-serif;
}

.complete-profile-btn:hover {
  background-color: #c0c2f6;
  transform: translateY(-1px);
}

.skip-link {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s ease;
  font-family: "Be Vietnam Pro", sans-serif;
}

.skip-link:hover {
  opacity: 0.8;
}

.illustration {
  position: absolute;
  right: 99px;
  top: 50%;
  transform: translateY(-50%);
  width: 470px;
  height: 470px;
  z-index: 5;
}

.illustration svg {
  width: 100%;
  height: 100%;
}

@media (min-width: 1440px) {
  .welcome-title {
    white-space: unset;
  }

  .content {
    max-width: 50%;
  }

  .welcome-description {
    max-width: 90%;
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .container-welcome {
    padding: 0 50px;
  }

  .illustration {
    right: 50px;
    width: 400px;
    height: 400px;
  }
}

@media (max-width: 1024px) {
  .container-welcome {
    flex-direction: column;
    justify-content: center;
    padding: 50px;
    text-align: center;
  }

  .illustration {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    margin-top: 40px;
    width: 350px;
    height: 350px;
  }

  .welcome-title {
    font-size: 36px;
  }

  .content {
    max-width: 100%;
  }

  .welcome-title {
    white-space: unset;
  }

  .content {
    max-width: 100%;
  }

  .welcome-description {
    max-width: 100%;
  }

  .button-container-welcome {
    justify-content: center;
  }

  .illustration {
    position: static;
    width: 350px;
    height: 350px;
    margin-bottom: 50px;
  }

  .container-welcome {
    height: auto;
  }

  .illustration {
    width: 100%;
    height: auto;
    margin-top: 50px;
    margin-bottom: 30px;
  }
}

@media (max-width: 768px) {
  .container-welcome {
    padding: 30px 20px;
  }

  .welcome-title {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .welcome-subtitle {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .welcome-description {
    font-size: 14px;
    margin-bottom: 32px;
  }

  .button-container-welcome {
    align-items: center;
    width: 100%;
  }

  .complete-profile-btn {
    width: 100%;
    max-width: 300px;
  }

  .complete-profile-btn {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    width: auto;
    max-width: max-content;
  }

  .skip-link {
    font-size: 14px;
    font-weight: 600;
  }

  .button-container-welcome {
    align-items: center;
    width: 100%;
    gap: 18px;
  }
}

@media (max-width: 480px) {
  .welcome-title {
    font-size: 24px;
  }
}


/* footer */
.box-footer-rightSub{
  /* display: inline-flex; */
}
.social-img-box {
  display: inline-flex;
  justify-content: end;
  gap: 16px;
}

.social-img-box .box01 {
  background-color: transparent;
  border: 0;
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
}
.social-img-box .box01 img{
  width: 48px;
}
.appbox {
  margin-top: 55px;
}

.appbox img {
  width: auto;
}

@media(max-width:1440px) {  
    /* Footer */
    .appbox img {
        width: 150px;
        flex-shrink: 0;
    }
 
    /* End */
}
 
@media(max-width:1199px) {
   /* Footer */
    .social-img-box .box01 img {
        width: 26px;
    }
 
    .social-img-box .box01 {
        width: auto;
        height: auto;
    }
 
    .appbox img {
        width: 90px;
    }
 
    /* End */
}
 
 
@media (max-width:991px) {
 /* Footer */
    .footer-signin-right {
        align-items: start;
    }
 
    .appbox {
        margin-top: 16px;
    }
 
    #footer-signin .row:first-child {
        padding-bottom: 30px;
    }
 
    /* End */
}


.preview-img-main {
    width: 100%;
    height: 350px;
    background-color: aliceblue;
    overflow: hidden;
    border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
}
 
.preview-img-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
}
/* Reviews section swiper pagination */
.starRating-sec .swiper {
  padding-bottom: 48px !important;
  overflow: visible !important;
}
.starRating-sec .swiper-pagination {
  bottom: 8px !important;
}
.starRating-sec .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.5) !important;
  opacity: 1 !important;
  width: 10px !important;
  height: 10px !important;
}
/* "I can help you with" divider lines were collapsing to 0 width because
   flex items default to min-width:auto; give them room to grow. */
.lineBox .hr-02 {
  flex: 1 1 auto;
  min-width: 0;
}

/* Helper card had an oversized top gap above the photo/name row. */
.card-features {
  padding-top: 16px;
}

/* .col2's width:100% was resolved against row1's full width (not the space
   left after col1's fixed-width photo), so it overflowed row1 - and the
   card - by the photo's width. Make it fill only the remaining space. */
.card-features .col2 {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}

/* The wishlist heart was absolutely positioned over the top-right corner,
   so a long helper name ran underneath it. Lay it out in the flex row
   instead, next to the (now truncated) name. */
.card-features .rightside ul li:first-child {
  flex-wrap: nowrap;
}
.card-features .rightside ul li:first-child .title-23 {
  flex: 1 1 0%;
  min-width: 0;
}
.card-features .rightside ul li .heart {
  position: static;
  flex: 0 0 auto;
  margin-left: 8px;
}

/* The "View profile" button (.cust-btn) is position:absolute, pinned a
   fixed distance from the card's bottom edge - it ignored how tall the
   "I can help you with" list actually was, so a helper with 4 services
   had their last row drawn over by the button instead of above it. Lay
   the button out with flex so it always sits after the content, and the
   card grows to fit instead of clipping. */
.card-features {
  display: flex;
  flex-direction: column;
}
.card-features > .row {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.card-features .features-btn-wrap {
  /* Bootstrap's "mt-2" utility (removed from the JSX) used !important and
     was overriding this, which is why the button wasn't actually sticking
     to the bottom of the card - every card just used its own content
     height, so buttons landed at different lines. */
  margin-top: auto;
  padding-top: 4px;
}
.card-features .features-btn-wrap .cust-btn {
  position: static;
  width: 100%;
  left: auto;
  bottom: auto;
  transform: none;
}

.starRating-sec .swiper-pagination-bullet-active {
  background: #fff !important;
}