@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&family=Poppins: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&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: "Roboto", sans-serif; */
}

:root {
  /* --main-bg-color : #FCFCFA; */
  --primary-color: #303030;
  --Secondary-color: #eeffb4;
  --Background-colors-light: #fcfcfa;
  --Background-colors-dark-beige: #f6f6ef;
  --Dark-Grey-color: #7e7e7e;
  --white-color: #ffffff;
  --hover-color: #393939;
  --btn-bg-color: #303030;
  /*=== font ===*/

  --title-bg-fontSize: 30px;
  --title-verybg-fontSize: 100px;
  --title-sm-fontSize: 23px;
  --primary-fontSize: 16px;
  --secondary-fontSize: 14px;
  --grey-color-rba: rgb(255 255 255 / 64%);
}

body {
  scroll-behavior: smooth !important;
  font-family: "Roboto", sans-serif !important;
}

body[dir="rtl"] {
  font-family: "Cairo", sans-serif !important;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #ccc;
}

::-webkit-scrollbar-thumb {
  background-color: #000000;
}


.popupScroll::-webkit-scrollbar {
  width: 4px !important;
  height: 5px !important;
  background-color: transparent !important;
}

.popupScroll::-webkit-scrollbar-thumb {
  background-color: #A9A9A9 !important;
}

ul {
  list-style: none;
}

li {
  list-style: none;
}

a {
  text-decoration: none !important;
}

p,
h1,
h2 {
  margin-bottom: 0px !important;
}

i {
  font-size: 18px;
}

/* ==== Start Spicail Class  */
.p-r-l-0 {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.p-t-b-0 {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.p-l-1 {
  padding-left: 40px !important;
}

.p-l-0 {
  padding-left: 0px !important;
}

.border-b-1 {
  border-bottom: 1px solid rgb(204 204 204 / 25%) !important;
}

.weight-normal {
  font-weight: normal !important;
}

.left-100 {
  left: -250px !important;
}
.right-100 {
  right: 100%;
}

.error {
  font-size: 20px;
  color: red;
  text-align: center;
}

.ltr {
  direction: rtl;
}

.right-0 {
  right: 0px !important;
}

.bg-black {
  background: #000000 !important;
}

.bg-grey {
  background: #dde2e7 !important;
}

.color-white {
  color: var(--white-color) !important;
}

.p-relative {
  position: relative !important;
}

.m-r-1 {
  margin-right: 10px !important;
}

.DeleteOrder {
  cursor: pointer;
}

.ds-block {
  display: block !important;
}

.ds-none {
  display: none;
}

.vs-hidden {
  visibility: hidden;
}

.vs-visible {
  visibility: visible;
}

.o-hidden {
  overflow: hidden;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.swiper-pagination-bullet {
  background: red !important;
}

.direrct-rtl {
  direction: rtl;
}

.direrct-ltr {
  direction: ltr;
}

.p-top-3 {
  padding: 121px 0px !important;
}

.p-fix {
  overflow: hidden;
  height: 100vh;
}

.bor-color {
  border-color: #1E1E1E !important;
}

/* ==== End Spicail Class  */
/* ====  Start Container  ====*/
.main-page {
  background: var(--Background-colors-light);
  height: 100%;
}

.main-container {
  width: 80%;
  margin: 0px auto;
}

/* ====  End Container  ====*/
/* ====  Start aside  ====*/
aside {
  position: fixed;
  top: 0;
  right: -150%;
  height: 100vh;
  background: #FCFCFA;
  z-index: 51;
  width: 375px;
  box-shadow: 0px 0px 2px 0px #00000026;
  transition: right 0.4s ease-in-out;
  overflow-y: scroll;
  padding-bottom: 30px;
}

body:dir(rtl) aside {
  left: -150% !important;
  right: unset !important;
  transition: left 0.4s ease-in-out;
}

body:dir(rtl) .right-0 {
  left: 0 !important;
}



body:dir(rtl) #show-modal-one {
  width: 180px;
}

aside::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: white;
  /* box-shadow: inset 1px 1px 5px #fffee9; */
}

aside::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* box-shadow: 0.65rem 0.65rem 2rem #000000, 0.65rem 0.65rem 2rem #000000,
    0.3px 3px 6px #000000 inset, -0.3px -2px 6px #000000 inset;
  border-radius: 8px; */
}


aside .change {
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px #00000026;
  width: fit-content;
  height: fit-content;
  padding: 10px;
}

.main-nav-icon {
  display: flex;
  justify-content: end;
  align-items: center;
  width: 96%;
  height: 70px;
}

body:dir(rtl) .main-nav-icon {
  justify-content: start;
  width: 100%;
  padding-right: 20px;
}

.aside-content {
  margin-top: 30px;
}

.aside-image {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.aside-crirle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 51;
  width: 140px;
  height: 140px;
}

.aside-avater {
  width: 100px;
  height: 100px;
}

.inside {
  width: 120px;
  height: 120px;
}

.ava-active {
  border: 1px solid #D3F26A;
}

.pending_call_main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: center;
  gap: 20px;
  margin: 0px auto;
  min-height: 70vh;
}
.pending_call_main > p{
  color: #7E7E7E;
  text-align: center;
}

.ava-image img:hover {
  border: 1px solid #D3F26A;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&&*/
.show-model-one {
  position: absolute;
  height: 100%;
  margin: 0px auto;
  width: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  left: 0px;
}

.show-model-one .aside-avater {
  width: 108px !important;
  height: 108px !important;
}

.show-model-one .outside {
  width: 160px;
  height: 160px;
}

.show-model-one .inside {
  width: 130px;
  height: 130px;
}

.show-model-one button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-one {
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
  max-width: 40%;
}

#modal-box-two {
  width: 570px !important;
  padding: 30px 0px 0px 20px;
  background: #FCFCFA;
}

#modal-box-one {
  width: 650px;
}

.show-model-one.active .show-modal {
  display: none;
}

.show-model-one .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-one.active .overlay {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: unset;
  /* width: 100%; */
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.modal-box-delete{
  padding: 15px 0px !important;
}
.show-model-one.active .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
  width: 100%;
  text-align: end;
  padding: 20px 0px;
}

.modal-box .buttons .close-btn {
  margin-top: 0px;
  width: 173px;
  text-align: end;
  padding: 0;
  height: 50px;
  margin-left: 5px;
  /* line-height: 50px; */
  font-size: 20px;
  text-align: center;
}

.modal-box .buttons .close-btn a {
  display: block;
  text-decoration: none;
  width: 100%;
  line-height: 50px;
  background-color: transparent;
  height: 100%;
  font-size: 20px;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 1px;
  margin: 0 1px !important;
}

input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  width: 23px;
  height: 23px;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  z-index: 2;
  cursor: pointer;
}

/*=====  Customizw Adrees Inp  ======*/


.form-group-Adress {
  display: flex;
  flex-direction: column;
  width: 100% !important;
}

.form-group-Adress .Optional {
  color: #A9A9A9;
  font-size: 12px;
}

.form-group-Adress>label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-group-Adress label .fa-circle-info {
  font-size: 12px;
  color: #A9A9A9;
}

.adress-label {
  position: relative;
}

.adress-label .fa-pencil {
  color: #303030;
  font-size: 18px;
  position: absolute;
  right: 12px;
  cursor: pointer;
}
body[dir="rtl"] .adress-label .fa-pencil{
  right: auto;
  left: 12px;
}

.form-control[readonly] {
  background-color: unset;
}

.inp-icon {
  position: relative;
}

.inp-icon img {
  position: absolute;
  width: 23px;
  height: 23px;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
  z-index: 1;

}



.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.pop-form {
  margin-top: 20px;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/





/*&&&&&&&&&&&&  logout              &&&&&&&&&&&&&&*/
.show-model-logout {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
}

.show-model-logout .aside-avater {
  width: 108px !important;
  height: 108px !important;
}

.show-model-logout .outside {
  width: 160px;
  height: 160px;
}

.show-model-logout .inside {
  width: 130px;
  height: 130px;
}

.show-model-logout button,
.show-model-logout a {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-logout {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
  max-width: 40%;
}

#modal-box-two {
  width: 520px !important;
  padding: 30px 20px 0px 20px;
}

#modal-box-logout {
  width: 500px;
}

.show-model-logout.active-logout .show-modal {
  display: none;
}

.show-model-logout .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-logout.active-logout .overlay {
  opacity: 1;
  pointer-events: auto;
}

.cancel {
  background: transparent !important;
  border: 1px solid #EB4141 !important;
  color: #EB4141 !important;
}

.Logout {
  background: #EB4141 !important;

  color: var(--white-color) !important;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: unset;
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-logout.active-logout .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}
body[dir="rtl"] .modal-box .buttons{
  display: flex;
}
body[dir="rtl"] .show-model-pass .buttons{
  justify-content: start !important;
}

.modal-box .buttons {
  margin-top: 0px;
  width: 100%;
  text-align: end;
  padding: 20px 0px;
}

.modal-box .buttons .close-btn {
  margin-top: 0px;
  width: 173px;
  text-align: end;
  height: 50px;
  font-size: 20px;
  text-align: center;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}

.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.pop-form {
  margin-top: 30px;
}

.logout-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 10px;
}

.logout-content .out-icon {
  width: 92px;
  height: 92px;
  background: #E100001C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logout-content h2 {
  font-size: 22px;
  font-weight: 500;
}

.logout-content p {
  color: #7E7E7E;
  font-size: 16px;
  font-weight: 400;
  max-width: 280px;
  text-align: center;
}

.out-icon img {
  width: 52px;
  height: 52px;
}

.main-out .buttons {
  display: flex;
  justify-content: center;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/





/*&&&&&&&&&&&&       Booking     &&&&&&&&&&&&&&*/
.main-popup {
  padding: 23px 3px;
}

#modal-box-booking {
  padding: 0px !important;
  background: var(--Background-colors-light);
}

.show-model-booking .modal-head {
  display: flex;
  align-items: center;
  /* border-bottom: 3px solid #303030; */
  padding: 20px 10px;
  position: relative;
}

body:dir(rtl) .modal-head {
  direction: ltr;
}

.booking-lines {
  position: absolute;
  bottom: 0px;
  height: 3px;

  width: 100%;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.booking-lines span {
  width: calc(100% / 2 - 3px);
  background: #303030;
}

.lines-bg {
  background: #A9A9A9 !important;
}

#modal-box-booking .buttons .close-btn {
  height: 38px;
  font-weight: 400;
  font-size: 19px;
  width: 155px;
}

.pop-title {
  margin-top: 0px !important;
  text-align: center;
  width: calc(100% - 42px);
}

.book-popup-content {
  padding: 20px 20px;
  width: 100%;
  padding-bottom: 0px !important;
  max-height: 76vh;
  overflow-y: scroll;
  padding: 20px 15px 20px;
}

.book-popup-box {
  background: var(--white-color);
  box-shadow: 0px 1px 4px 0px #0000004D;
  width: 100%;
  border-radius: 8px;
  display: flex;
  padding: 10px;
  gap: 10px;
}

.pop-book-form {
  width: 100%;
}

.availability {
  width: calc(100% / 2 - 12px);

}

.availability input {
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  height: 43px;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; /* Remove for WebKit browsers */
  margin: 0; /* Optional: Remove margin */
}

input[type="number"] {
  -moz-appearance: textfield; /* Remove for Firefox */
}
 
.availability input:focus {
  box-shadow: 0px 2px 3px 1px #00000026;
  border-color: #1E1E1E;
}

.notes {
  margin-top: 13px;
}

.pop-book-form label {
  font-weight: 500;
  font-size: 16px;
  color: #666666;
  margin-bottom: 5px;
}

.pop-book-form .buttons .close-btn {
  font-size: 20px;
}

.notes textarea {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
}

.notes textarea:focus {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  border-color: #1E1E1E;
}

#modal-box-booking .fa-xmark {
  padding-right: 10px !important;
}

.book-popup-box {
  margin-bottom: 20px;
}

.book-popup-box input {
  width: 23px;
  height: 23px;
  background: #F2FFC7 !important;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--primary-color)
}

.book-popup-box p {
  font-size: 16px;
  color: var(--primary-color);
}

.show-model-booking {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
}

.show-model-booking .aside-avater {
  width: 108px !important;
  height: 108px !important;
}

.show-model-booking .outside {
  width: 160px;
  height: 160px;
}

.show-model-booking .inside {
  width: 130px;
  height: 130px;
}

.show-model-booking button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-booking {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
  max-width: 40%;
}

#modal-box-two {
  width: 520px !important;
  padding: 30px 20px 0px 20px;
}

#modal-box-booking {
  width: 650px;
}

.show-model-booking.active-booking .show-modal {
  display: none;
}

.show-model-booking .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-booking.active-booking .overlay {
  opacity: 1 !important;
  pointer-events: auto;
}

.cancel {
  background: transparent !important;
  border: 1px solid #EB4141 !important;
  color: #EB4141 !important;
}

.booking {
  background: #EB4141 !important;

  color: var(--white-color) !important;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: unset;
  /* width: 100%; */
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-booking.active-booking .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
  width: 100%;
  text-align: end;
  padding: 20px 0px;
}

.modal-box .buttons .close-btn {
  margin-top: 0px;
  width: 173px;
  text-align: end;
  height: 50px;
  font-size: 20px;
  text-align: center;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.pop-form {
  margin-top: 30px;
}

.pop-form-Profile {
  max-height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0px 10px;
}

body:dir(rtl) .pop-form-Profile form {
  padding: 0px 5px;
}

.booking-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 10px;
}

.booking-content .out-icon {
  width: 92px;
  height: 92px;
  background: #E100001C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-content h2 {
  font-size: 22px;
  font-weight: 500;
}

.booking-content p {
  color: #7E7E7E;
  font-size: 16px;
  font-weight: 400;
  max-width: 280px;
  text-align: center;
}

.out-icon img {
  width: 52px;
  height: 52px;
}

.main-out .buttons {
  display: flex;
  justify-content: center;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/




/*&&&&&&&&&&&&       Booking-lan     &&&&&&&&&&&&&&*/
.booking-lan-image {
  width: 630px;
  /* margin-bottom: 50px; */
}

.booking-lan-content {
  width: 100%;
  padding: 0px 20px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}

.booking-lan-content img {
  width: 100%;
}

.booking-lan-content p {
  font-size: 18px;
  font-weight: 500px;
  max-width: 80%;
  text-align: center;
  padding: 40px 0px 50px;

}

#modal-box-booking-lan {
  padding: 0px !important;
  background: var(--Background-colors-light);
  width: 400px;
}

#modal-box-booking-lan .buttons {
  padding: 0px 0px 0px;
  text-align: center;
}

#modal-box-booking-lan button {
  width: 100% !important;
  height: 51px !important;
  font-size: 22px !important;
}

.show-model-booking-lan .modal-head {
  display: flex;
  align-items: center;
  padding: 20px 10px 0px;
  position: relative;
  background: #ffffff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  direction: ltr;
}

.show-model-booking-lan .modal-box {
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.booking-lines {
  position: absolute;
  bottom: 0px;
  height: 3px;

  width: 100%;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.booking-lines span {
  width: calc(100% / 2 - 3px);
  background: #303030;
}

.lines-bg {
  background: #A9A9A9 !important;
}

#modal-box-booking-lan .buttons .close-btn {
  height: 38px;
  font-weight: 400;
  font-size: 19px;
  width: 155px;
}

.pop-title {
  margin-top: 0px !important;
  text-align: center;
  width: calc(100% - 42px);
}

.book-popup-content {
  padding: 20px 20px;
  width: 100%;
}

.book-popup-box {
  background: var(--white-color);
  box-shadow: 0px 1px 4px 0px #0000004D;
  width: 100%;
  border-radius: 8px;
  display: flex;
  padding: 10px;
  gap: 10px;
}

.form-check-input[type=radio] {
  margin-bottom: 4px !important;
  cursor: pointer;
}

body:dir(rtl) .iti__flag-container {
  left: auto;
  right: 0;
}

.fa-xmark {
  cursor: pointer;
}
.main-form{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.main-form .pass-form{
  display: block !important;
}
#InstaPayContent{
  flex-direction: column;
  gap: 10px;
}

body:dir(rtl) .res-content-form input[name="phone"] {
  padding-left: 0px !important;
  padding-right: 75px !important;
}

/*======== Start Toggle Switch  ==========*/
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 5px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #C8E761;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.show-sub-services {
  position: relative;
}

.show-sub-services:hover .menu-services {
  opacity: 1;
  transition: all ease-in-out 0.5s;
}

.lin-serv {
  font-size: 15px;
}

.menu-services {

  position: absolute;
  width: 100%;
  height: 100px;
  background: red;
  top: 0px;
}

.show-sub-services {
  /* background: red; */
}

/* .show-sub-services:hover .menu-services-main{
  opacity: 1;
} */
.menu-services-main {
  opacity: 0;
  background: red;
  position: absolute;
  top: 87%;
  width: 100%;
  /* z-index: 1000; */
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  transition: opacity ease-in-out 0.5s;
  padding: 10px 1px;
}

.menu-services-main-show {
  opacity: 1;
  z-index: 1;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black' %3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transform: rotate(0deg);
}

.menu-services-According {
  background: #FFFFFF;
  max-height: 200px;
  overflow-y: auto;
  padding: 0px 5px;
}

.menu-services-According::-webkit-scrollbar {
  width: 3px;
  height: 5px;
  background-color: transparent;
}

.cat-img {
  cursor: pointer;
}

.menu-services-According::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

.accordion-button {
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 500;
  padding: 10px !important;
  border-radius: 10px !important;
}

.accordion {
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
}

.accordion-item {
  margin-bottom: 8px;
  border-radius: 10px !important;
  background: #FFF;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
}

.accordion-item .accordion-header {
  margin: 0px !important;
}

.accordion-header {
  margin: 0px !important;
}

.accordion-button::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  content: "";
  background-repeat: no-repeat;
  background-size: 1.25rem;
  transition: transform .2s ease-in-out;
  transform: rotate(-86deg);
}

body:dir(rtl) .accordion-button::after {
  transform: rotate(80deg);
  margin-right: auto;
  margin-left: unset;
}

.accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background: transparent !important;
}

.accordion-button:focus {
  z-index: 3;
  border-color: transparent !important;
  outline: 0;
  box-shadow: none !important;
}

.sub-body:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

.sub-body {
  padding: 10px 0px;
}

.sub-body a {
  display: block;
  padding: 0px 10px !important;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 500;

}

.accordion-body {
  padding: 0px;
  border-top: 1px solid #939393;
  display: flex;
  justify-content: start;
  flex-direction: column;
}

/*============ Start Cutom Check    ============*/
#labelCheck img {
  cursor: pointer !important;
}

/*============ End Cutom Check    ============*/
/*======== End Toggle Switch  ==========*/

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.main-time-picker {
  position: absolute;
  bottom: -60%;
  background: white;
  z-index: 100;
  left: 0px;
  width: calc(200% + 20px);
  border-radius: 15px;

  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

body:dir(rtl) .main-time-picker {
  left: auto;
  right: 0;
}

.time-Picker-Menu-Btn {
  display: flex;
  justify-content: center;
  height: 50px;
  align-items: center;
}

#main-time-picker-Afternoon {
  left: auto;
  right: 0px;
}

#main-time-picker-Night {
  left: auto;
  right: 0px;
}

.time-screen-one {
  width: 100%;
  border-radius: 10px;
}

.time-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #AEAEAE;
}

.time-head h3 {
  font-size: 16px !important;
  font-weight: 400 !important;
}

.time-screen-one .start-time {
  cursor: pointer;
}

.start-time span {
  border-radius: 5px;
  background: #EBEBEB;
  padding: 8px 11px 7px 12px;
  font-size: 16px;
}

.time-picker {
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  justify-content: space-evenly;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 25px;
  position: relative;
  z-index: 1000;
}




/* Target the input type */
input[type="time"] {
  background-color: #f0f0f0;
  /* Change this to your desired color */
  color: #333;
  /* Optional: Adjust text color for visibility */
  padding: 5px;
  border-radius: 5px;
}

/* Remove the native appearance to ensure compatibility across browsers */
input[type="time"]::-webkit-calendar-picker-indicator {
  background-color: #ffcc00;
  /* Dropdown menu background */
  border-radius: 5px;
  padding: 5px;
}

/* For Firefox (if needed, support may vary) */
input[type="time"]::-moz-time-picker {
  background-color: #ffcc00;
  border-radius: 5px;
}




.tp-col {
  display: flex;
  flex-direction: column;
  align-items: inherit;
}

.tp-hr>span,
.tp-min>span {
  border: 1px solid #ccc;
  padding: 4px 4px;
  border-radius: 4px;
  width: 25px;
  text-align: center;
  font-size: 15pt;
}

.tp-up-arrow,
.tp-down-arrow {
  cursor: pointer;
  width: 15px;
  height: 15px;
}

.tp-am-pm {
  cursor: pointer;
  display: block;
  padding: 1px 3px;
  border-radius: 5px;
}

.tp-am-pm:hover {
  background: #eaeaea;
}

.tp-hr,
.tp-min {}







.form-check-input:checked[type=radio] {
  background-image: url(../images/dotradiobtn.png);
  background-size: 70%;
  background-position: center;
  background-color: transparent;
  border-width: 1px;
  margin-bottom: 4px !important;
}

.book-popup-box input:focus {
  border-color: var(--primary-color) !important;
}

.form-check-input:checked {
  border-color: var(--primary-color) !important;
}

.form-check-input {
  margin-bottom: 5px !important;
}

.p-rela .dropdown-menu {
  transform: translate(0px, 75px) !important;
}

.book-popup-box-bg {
  background: #F8FFE1;
}

.book-popup-box label {
  margin-bottom: 0px !important;
  width: 23px;
  height: 23px;
  border-radius: 8px;
  /* background: #F2FFC7 !important;
    cursor: pointer;
    border: 1px solid var(--primary-color); */
}

.book-popup-box label img {
  width: 100%;
  height: 100%;
}

.pop-book-form {
  width: 100%;
}

.pop-book-form form {}

.availability {
  width: calc(100% / 2 - 12px);

}

.availability input {
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  height: 43px;
}

.availability input:focus {
  box-shadow: 0px 2px 3px 1px #00000026;
  border-color: #1E1E1E;
}

/* .availability input{
  color: red !important;
  color: red;
} */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  background: red !important;
  font-size: 200px !important;
}

.form-control::placeholder {
  font-weight: 400 !important;
  /* color: red !important; */
}

.notes {
  margin-top: 13px;
}

.pop-book-form label {
  font-weight: 500;
  font-size: 16px;
  color: #666666;
  margin-bottom: 5px;
}

.pop-book-form .buttons .close-btn {
  font-size: 20px;
}

.notes textarea {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
}

.notes textarea::placeholder {
  font-weight: 400 !important;
}

.notes textarea:focus {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  border-color: #1E1E1E;
}

#modal-box-booking-lan .fa-xmark {
  padding-right: 10px !important;
}

.book-popup-box {
  margin-bottom: 20px;
}

.book-popup-box input {
  width: 23px;
  height: 23px;
  background: #F2FFC7 !important;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--primary-color)
}

.book-popup-box p {
  font-size: 16px;
  color: var(--primary-color);
}

.show-model-booking-lan {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
}

.show-model-booking-lan .aside-avater {
  width: 108px !important;
  height: 108px !important;
}

.show-model-booking-lan .outside {
  width: 160px;
  height: 160px;
}

.show-model-booking-lan .inside {
  width: 130px;
  height: 130px;
}

.show-model-booking-lan button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-booking-lan {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
  max-width: 40%;
}

#modal-box-two {
  width: 520px !important;
  padding: 30px 0px 0px 20px;
}

.show-model-booking-lan.active-booking-lan .show-modal {
  display: none;
}

.show-model-booking-lan .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-booking-lan.active-booking-lan .overlay {
  opacity: 1 !important;
  pointer-events: auto;
}

.cancel {
  background: transparent !important;
  border: 1px solid #EB4141 !important;
  color: #EB4141 !important;
}

.booking {
  background: #EB4141 !important;

  color: var(--white-color) !important;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: unset;
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-booking-lan.active-booking-lan .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
  width: 100%;
  text-align: end;
  padding: 20px 0px;
}

.modal-box .buttons .close-btn {
  margin-top: 0px;
  width: 173px;
  text-align: end;
  height: 50px;
  font-size: 20px;
  text-align: center;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.pop-form {
  margin-top: 30px;
}

.main-out {}

.booking-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 10px;
}

.booking-content .out-icon {
  width: 92px;
  height: 92px;
  background: #E100001C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-content h2 {
  font-size: 22px;
  font-weight: 500;
}

.booking-content p {
  color: #7E7E7E;
  font-size: 16px;
  font-weight: 400;
  max-width: 280px;
  text-align: center;
}

.out-icon img {
  width: 52px;
  height: 52px;
}

.main-out .buttons {
  display: flex;
  justify-content: center;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/








/*&&&&&&&&&&&&       Booking     &&&&&&&&&&&&&&*/
#modal-box-booking {
  padding: 0px !important;
  background: var(--Background-colors-light);
}

.show-model-booking .modal-head {
  display: flex;
  align-items: center;
  /* border-bottom: 3px solid #303030; */
  padding: 20px 10px;
  position: relative;
  direction: ltr;
}

.show-model-booking .modal-box {
  border-radius: 15px !important;
}

.booking-lines {
  position: absolute;
  bottom: 0px;
  height: 3px;

  width: 100%;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.booking-lines span {
  width: calc(100% / 2 - 3px);
  background: #303030;
}

.lines-bg {
  background: #A9A9A9 !important;
}

#modal-box-booking .buttons .close-btn {
  height: 45px;
  font-weight: 400;
  font-size: 19px;
  width: 155px;
}

.pop-title {
  margin-top: 0px !important;
  text-align: center;
  width: calc(100% - 42px);
}

.book-popup-content {
  padding: 20px 20px;
  width: 100%;
}

.book-popup-box {
  background: var(--white-color);
  box-shadow: 0px 1px 4px 0px #0000004D;
  width: 100%;
  border-radius: 8px;
  display: flex;
  padding: 10px;
  gap: 10px;
}

.pop-book-form {
  width: 100%;
}

.pop-book-form form {}

.availability {
  width: calc(100% / 2 - 12px);

}

.availability input {
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  height: 43px;
}

.availability input:focus {
  box-shadow: 0px 2px 3px 1px #00000026;
  border-color: #1E1E1E;
}

.notes {
  margin-top: 13px;
}

.pop-book-form label {
  font-weight: 500;
  font-size: 16px;
  color: #666666;
  margin-bottom: 5px;
}

.pop-book-form .buttons .close-btn {
  font-size: 20px;
}

.notes textarea {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
}

.notes textarea:focus {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  border-color: #1E1E1E;
}

#modal-box-booking .fa-xmark {
  padding-right: 10px !important;
}

.book-popup-box {
  margin-bottom: 20px;
}

.book-popup-box input {
  width: 23px;
  height: 23px;
  background: #F2FFC7 !important;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--primary-color)
}

.book-popup-box p {
  font-size: 16px;
  color: var(--primary-color);
}

.show-model-booking {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
}

.show-model-booking .aside-avater {
  width: 108px !important;
  height: 108px !important;
}

.show-model-booking .outside {
  width: 160px;
  height: 160px;
}

.show-model-booking .inside {
  width: 130px;
  height: 130px;
}

.show-model-booking button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-booking {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
  max-width: 40%;
}

#modal-box-two {
  width: 520px !important;
  padding: 30px 0px 0px 20px;
}

#modal-box-booking {
  width: 650px;
}

.show-model-booking.active-booking .show-modal {
  display: none;
}

.show-model-booking .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-booking.active-booking .overlay {
  opacity: 1 !important;
  pointer-events: auto;
}

.cancel {
  background: transparent !important;
  border: 1px solid #EB4141 !important;
  color: #EB4141 !important;
}

.booking {
  background: #EB4141 !important;

  color: var(--white-color) !important;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: unset;
  /* width: 100%; */
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-booking.active-booking .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
  width: 100%;
  text-align: end;
  padding: 20px 0px;
}

.modal-box .buttons .close-btn {
  margin-top: 0px;
  width: 173px;
  text-align: end;
  height: 50px;
  font-size: 20px;
  text-align: center;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.pop-form {
  margin-top: 20px;
}

.main-out {}

.booking-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 10px;
}

.booking-content .out-icon {
  width: 92px;
  height: 92px;
  background: #E100001C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-content h2 {
  font-size: 22px;
  font-weight: 500;
}

.booking-content p {
  color: #7E7E7E;
  font-size: 16px;
  font-weight: 400;
  max-width: 280px;
  text-align: center;
}

.out-icon img {
  width: 52px;
  height: 52px;
}

.main-out .buttons {
  display: flex;
  justify-content: center;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/





/*&&&&&&&&&&&&     Booking     &&&&&&&&&&&&&&*/

.submit-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-bottom: 50px;
}

.submit-content div {
  width: 92px;
  height: 92px;
  background: #F2FFC7;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;

}

.submit-content img {
  width: 51px;
  height: 51px;
}

.submit-content p {
  color: #7E7E7E;
  max-width: 260px;
  font-size: 15px;
  text-align: center;
}

.submit-content h3 {
  font-weight: 500 !important;
  font-size: 20px !important;
  margin-bottom: 0px !important;
}


#modal-box-submit {
  padding: 0px !important;
  background: var(--Background-colors-light);
  width: 416px;
}

.show-model-submit .modal-head {
  display: flex;
  align-items: center;
  /* border-bottom: 3px solid #303030; */
  padding: 20px 10px;
  position: relative;
}

.booking-lines {
  position: absolute;
  bottom: 0px;
  height: 3px;

  width: 100%;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.booking-lines span {
  width: calc(100% / 2 - 3px);
  background: #303030;
}

.lines-bg {
  background: #A9A9A9 !important;
}

#modal-box-submit .buttons .close-btn {
  height: 38px;
  font-weight: 400;
  font-size: 19px;
  width: 155px;
}

.pop-title {
  margin-top: 0px !important;
  text-align: center;
  width: calc(100% - 42px);
}

.book-popup-content {
  padding: 20px 20px;
  width: 100%;
}

.book-popup-box {
  background: var(--white-color);
  box-shadow: 0px 1px 4px 0px #0000004D;
  width: 100%;
  border-radius: 8px;
  display: flex;
  padding: 10px;
  gap: 10px;
}

.pop-book-form {
  width: 100%;
}

.pop-book-form form {}

.availability {
  width: calc(100% / 2 - 12px);

}

.availability input {
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  height: 43px;
}

.availability input:focus {
  box-shadow: 0px 2px 3px 1px #00000026;
  border-color: #1E1E1E;
}

.notes {
  margin-top: 13px;
}

.pop-book-form label {
  font-weight: 500;
  font-size: 16px;
  color: #666666;
  margin-bottom: 5px;
}

.pop-book-form .buttons .close-btn {
  font-size: 20px;
}

.notes textarea {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
}

.notes textarea:focus {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  border-color: #1E1E1E;
}

#modal-box-submit .fa-xmark {
  padding-right: 10px !important;
}

.book-popup-box {
  margin-bottom: 20px;
}

.book-popup-box input {
  width: 23px;
  height: 23px;
  background: #F2FFC7 !important;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--primary-color)
}

.book-popup-box p {
  font-size: 16px;
  color: var(--primary-color);
}

.show-model-submit {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
}

.show-model-submit .aside-avater {
  width: 108px !important;
  height: 108px !important;
}

.show-model-submit .outside {
  width: 160px;
  height: 160px;
}

.show-model-submit .inside {
  width: 130px;
  height: 130px;
}

.show-model-submit button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-submit {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
  max-width: 40%;
}

#modal-box-two {
  width: 520px !important;
  padding: 30px 0px 0px 20px;
}

.show-model-submit.active-submit .show-modal {
  display: none;
}

.show-model-submit .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-submit.active-submit .overlay {
  opacity: 1 !important;
  pointer-events: auto;
}

.cancel {
  background: transparent !important;
  border: 1px solid #EB4141 !important;
  color: #EB4141 !important;
}

.booking {
  background: #EB4141 !important;

  color: var(--white-color) !important;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: unset;
  /* width: 100%; */
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-submit.active-submit .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
  width: 100%;
  text-align: end;
  padding: 20px 0px;
}

.modal-box .buttons .close-btn {
  margin-top: 0px;
  width: 173px;
  text-align: end;
  height: 50px;
  font-size: 20px;
  text-align: center;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.pop-form {
  margin-top: 30px;
}

.main-out {}

.booking-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 10px;
}

.booking-content .out-icon {
  width: 92px;
  height: 92px;
  background: #E100001C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-content h2 {
  font-size: 22px;
  font-weight: 500;
}

.booking-content p {
  color: #7E7E7E;
  font-size: 16px;
  font-weight: 400;
  max-width: 280px;
  text-align: center;
}

.out-icon img {
  width: 52px;
  height: 52px;
}

.main-out .buttons {
  display: flex;
  justify-content: center;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/






/*&&&&&&&&&&&&     QrCode     &&&&&&&&&&&&&&*/

.qrcode-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-bottom: 50px;
}

.qrcode-content div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 92px; */
  /* background: #F2FFC7;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%; */
  border-radius: 10px;

}

.qrcode-content img {
  width: 83%;
  border-radius: 10px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  background: red;
}

.qrcode-content p {
  color: #7E7E7E;
  max-width: 300px;
  font-size: 15px;
  text-align: center;
}

.qrcode-content h3 {
  font-weight: 500 !important;
  font-size: 20px !important;
  margin-bottom: 0px !important;
}


#modal-box-qrcode {
  padding: 0px !important;
  background: var(--Background-colors-light);
  width: 416px;
}

.show-model-qrcode .modal-head {
  display: flex;
  align-items: center;
  /* border-bottom: 3px solid #303030; */
  padding: 20px 10px;
  position: relative;
  direction: ltr;
}

.booking-lines {
  position: absolute;
  bottom: 0px;
  height: 3px;

  width: 100%;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.booking-lines span {
  width: calc(100% / 2 - 3px);
  background: #303030;
}

.lines-bg {
  background: #A9A9A9 !important;
}

#modal-box-qrcode .buttons .close-btn {
  height: 38px;
  font-weight: 400;
  font-size: 19px;
  width: 155px;
}

.pop-title {
  margin-top: 0px !important;
  text-align: center;
  width: calc(100% - 42px);
}

.book-popup-content {
  padding: 20px 20px;
  width: 100%;
}

.book-popup-box {
  background: var(--white-color);
  box-shadow: 0px 1px 4px 0px #0000004D;
  width: 100%;
  border-radius: 8px;
  display: flex;
  padding: 10px;
  gap: 10px;
}

.pop-book-form {
  width: 100%;
}

.pop-book-form form {}

.availability {
  width: calc(100% / 2 - 12px);

}

.availability input {
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  height: 43px;
}

.availability input:focus {
  box-shadow: 0px 2px 3px 1px #00000026;
  border-color: #1E1E1E;
}

.notes {
  margin-top: 13px;
}

.pop-book-form label {
  font-weight: 500;
  font-size: 16px;
  color: #666666;
  margin-bottom: 5px;
}

.pop-book-form .buttons .close-btn {
  font-size: 20px;
}

.notes textarea {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
}

.notes textarea:focus {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  border-color: #1E1E1E;
}

#modal-box-qrcode .fa-xmark {
  padding-right: 10px !important;
}

.book-popup-box {
  margin-bottom: 20px;
}

.book-popup-box input {
  width: 23px;
  height: 23px;
  background: #F2FFC7 !important;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--primary-color)
}

.book-popup-box p {
  font-size: 16px;
  color: var(--primary-color);
}

.show-model-qrcode {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
}

.show-model-qrcode .aside-avater {
  width: 108px !important;
  height: 108px !important;
}

.show-model-qrcode .outside {
  width: 160px;
  height: 160px;
}

.show-model-qrcode .inside {
  width: 130px;
  height: 130px;
}

.show-model-qrcode button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-qrcode {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
  max-width: 40%;
}

#modal-box-two {
  width: 520px !important;
  padding: 30px 0px 0px 20px;
}

.show-model-qrcode.active-qrcode .show-modal {
  display: none;
}

.show-model-qrcode .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-qrcode.active-qrcode .overlay {
  opacity: 1 !important;
  pointer-events: auto;
}

.cancel {
  background: transparent !important;
  border: 1px solid #EB4141 !important;
  color: #EB4141 !important;
}

.booking {
  background: #EB4141 !important;

  color: var(--white-color) !important;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: unset;
  /* width: 100%; */
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-qrcode.active-qrcode .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
  width: 100%;
  text-align: end;
  padding: 20px 0px;
}

.modal-box .buttons .close-btn {
  margin-top: 0px;
  width: 173px;
  text-align: end;
  height: 50px;
  font-size: 20px;
  text-align: center;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.pop-form {
  margin-top: 30px;
}

.main-out {}

.booking-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 10px;
}

.booking-content .out-icon {
  width: 92px;
  height: 92px;
  background: #E100001C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-content h2 {
  font-size: 22px;
  font-weight: 500;
}

.booking-content p {
  color: #7E7E7E;
  font-size: 16px;
  font-weight: 400;
  max-width: 280px;
  text-align: center;
}

.out-icon img {
  width: 52px;
  height: 52px;
}

.main-out .buttons {
  display: flex;
  justify-content: center;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/






/*&&&&&&&&&&&&  Complete   Process     &&&&&&&&&&&&&&*/







.process-content {
  width: 100%;
  padding: 10px 3px 0px;
}

.process-text {
  padding: 23px 27px 23px;
  background: var(--Background-colors-light);
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
}


.process-text::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: transparent;
}

.process-text::-webkit-scrollbar-thumb {
  background-color: #A9A9A9;
  border-top-right-radius: 200px;
  border-top-left-radius: 200px;
  border-bottom-right-radius: 200px;
  border-bottom-left-radius: 200px;
}


.process-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--white-color);
  box-shadow: 0px 1px 4px 1px #0000004D;
  border-radius: 10px;
  width: 100%;
  padding: 15px;
  /* margin-bottom: 10px; */

}

.process-box h3 {
  text-align: start !important;
}

.process-box .fa-xmark {
  font-size: 17px;
  color: var(--primary-color);
  cursor: pointer;
}

.process-image {
  width: 40px;
  height: 40px;
}

.process-garp {
  background: #F2FFC7;
  width: 67px;
  height: 67px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;

}

.process-img {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 40px !important;
  height: 40px !important;
}

.process-garp img {
 width: 100%;
 height: 100%;
}
.process-garp-image{
  width: 100%;
  height: 100%;
}
.process-garp-body img{
  width: 100%;
  height: 50px;
}
.process-img input[type="file"] {
  background-color: transparent;
  color: white;
  border: 0px solid transparent;
  cursor: pointer;
  opacity: 0;
}
  .process-img input[type="file" i] {
  color: transparent;
  position: absolute;
  z-index: 145;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }

/* Optional: Remove outline when focused */
.process-img input[type="file"]:focus {
  outline: none;
}

/* Change the appearance of the input text */
.process-img input[type="file"]::-webkit-file-upload-button {
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
}

/* Style for Firefox */
.process-img input[type="file"]::-moz-file-upload-button {
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
}



.process-garp-icon {
  display: flex;
  justify-content: end;
  align-items: center;
  background: #00000030;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.process-foot {
  display: flex;
  justify-content: end;

  background: transparent;



  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  overflow: hidden;
}

.process-foot>div {
  margin-top: 0px;
  height: 84px;
  width: 100%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  overflow: hidden;
  text-align: end;
  display: flex;
  justify-content: end;
  align-items: center;
}

.process-foot button {
  width: 174px !important;
  height: 46px !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  margin-right: 30px !important;
}

.process-content p {
  color: #7E7E7E;
  max-width: 260px;
  font-size: 15px;
  /* text-align: center; */
}

.process-content h3 {
  font-weight: 500 !important;
  font-size: 20px !important;
  margin-bottom: 0px !important;
}


#modal-box-process {
  padding: 0px !important;
  background: var(--Background-colors-light);
  width: 580px;
}

.show-model-process {
  border-radius: 15px;
}

#show-model-process .booking-lines span {
  width: calc(100% / 4 - 3px);
}

.show-model-process .modal-head {
  display: flex;
  align-items: center;
  /* border-bottom: 3px solid #303030; */
  padding: 20px 10px;
  position: relative;
}

.booking-lines {
  position: absolute;
  bottom: 0px;
  height: 3px;
  width: 100%;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.booking-lines span {
  width: calc(100% / 2 - 3px);
  background: #303030;
}

.lines-bg {
  background: #A9A9A9 !important;
}

#modal-box-process .buttons .close-btn {
  height: 38px;
  font-weight: 400;
  font-size: 19px;
  width: 155px;
}

.pop-title {
  margin-top: 0px !important;
  text-align: center;
  width: calc(100% - 42px);
}

.book-popup-content {
  padding: 20px 20px;
  width: 100%;
}

.book-popup-box {
  background: var(--white-color);
  box-shadow: 0px 1px 4px 0px #0000004D;
  width: 100%;
  border-radius: 8px;
  display: flex;
  padding: 10px;
  gap: 10px;
}

.pop-book-form {
  width: 100%;
}

.availability {
  width: calc(100% / 2 - 12px);

}

.availability input {
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  height: 43px;
}

.availability input:focus {
  box-shadow: 0px 2px 3px 1px #00000026;
  border-color: #1E1E1E;
}

.notes {
  margin-top: 13px;
}

.pop-book-form label {
  font-weight: 500;
  font-size: 16px;
  color: #666666;
  margin-bottom: 5px;
}

.pop-book-form .buttons .close-btn {
  font-size: 20px;
}

.notes textarea {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
}

.notes textarea:focus {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  border-color: #1E1E1E;
}

#modal-box-process .fa-xmark {
  /* padding-right: 10px !important; */
}

.book-popup-box {
  margin-bottom: 20px;
}

.book-popup-box input {
  width: 23px;
  height: 23px;
  background: #F2FFC7 !important;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--primary-color)
}

.book-popup-box p {
  font-size: 16px;
  color: var(--primary-color);
}

.show-model-process {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
}

.show-model-process .aside-avater {
  width: 108px !important;
  height: 108px !important;
}

.show-model-process .outside {
  width: 160px;
  height: 160px;
}

.show-model-process .inside {
  width: 130px;
  height: 130px;
}

.show-model-process button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-process {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
  max-width: 40%;
}

#modal-box-two {
  width: 520px !important;
  padding: 30px 0px 0px 20px;
}

.show-model-process.active-process .show-modal {
  display: none;
}

.show-model-process .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-process.active-process .overlay {
  opacity: 1 !important;
  pointer-events: auto;
}

.cancel {
  background: transparent !important;
  border: 1px solid #EB4141 !important;
  color: #EB4141 !important;
}

.booking {
  background: #EB4141 !important;

  color: var(--white-color) !important;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: unset;
  /* width: 100%; */
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-process.active-process .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
  width: 100%;
  text-align: end;
  padding: 20px 0px;
}

.modal-box .buttons .close-btn {
  margin-top: 0px;
  width: 173px;
  text-align: end;
  height: 50px;
  font-size: 20px;
  text-align: center;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.pop-form {
  margin-top: 30px;
}

.main-out {}

.booking-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 10px;
}

.booking-content .out-icon {
  width: 92px;
  height: 92px;
  background: #E100001C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-content h2 {
  font-size: 22px;
  font-weight: 500;
}

.booking-content p {
  color: #7E7E7E;
  font-size: 16px;
  font-weight: 400;
  max-width: 280px;
  text-align: center;
}

.out-icon img {
  width: 52px;
  height: 52px;
}

.main-out .buttons {
  display: flex;
  justify-content: center;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/



/*=====  Start policy ====*/
.policy ul li{
  margin: 0 0px;
  opacity: 1;
  visibility: visible;
  -webkit-transform: unset;
  list-style: disc;
}
.policy h1{
  margin-bottom: 20px !important;
}
.policy h2{
  margin-bottom: 20px !important;
  font-size: 26px;
}
.policy h3{
  margin-bottom: 20px !important;
  font-size: 26px;
}
.policy p{
  margin-bottom: 10px !important;
}
/*=====  End policy ====*/




/*&&&&&&&&&&&&  Pyment     &&&&&&&&&&&&&&*/

.pop-payment-form {
  width: 100%;
  padding: 42px 27px 23px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 70vh;
}
.height-none{
  height: unset !important;
}

.payment-box {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
  padding: 5px 27px 23px;
}

.payment-box h3 {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: #303030 !important;
  margin-bottom: 0px !important;
}

.Process>h3 {
  margin-bottom: 20px;
}

.payment-box-content {
  box-shadow: 0px 1px 3px 1px #0000004D;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  padding: 15px;
  margin-bottom: 20px;
}

.payment-box-content>div {
  display: flex;
  justify-content: start;
  gap: 10px;
  align-items: center;
}

.payment-box-content>div h4 {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 0px !important;
}

.payment-box-content>img {
  width: 20px;
  height: 20px;
}

.payment-box-content div>img {
  width: 54px;
  height: 54px;
}

.payment-box-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-box-text p {
  font-size: 14px;
  font-weight: 400;
}

.payment-boxtwo-content {
  display: flex;
  flex-direction: column;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.payment-boxtwo-parag{
  margin-top: 20px;
}
.payment-boxtwo-content>.payment-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.payment-top {
  padding-bottom: 10px;
  border-bottom: 0.5px solid #AEAEAE;
}

.pyment-grap {
  display: block;
  width: 95px;
  height: 59px;
  background: #F2FFC7;
}
.order-describtion{
  width: calc(100% - 95px);
}

.payment-boxtwo-content h4 {
  margin-bottom: 0px !important;
  font-size: 16px;
  font-weight: 500;
  color: 303030;
}

.payment-boxtwo-content div div p {
  font-size: 14px;
  color: 303030;
}

.payment-details {
  padding: 20px 15px;
  background: var(--white-color);
}

.payment-details p {
  display: flex;
  justify-content: space-between;
  font-weight: 500 !important;
  font-size: 14px;
  color: #303030;
  margin-bottom: 10px !important;
}

.payment-total {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-top: 15px;
}

.payment-popup-content .buttons {
  padding: 0px 20px 20px 20px !important;
  display: flex;
  justify-content: end;
  align-items: center;
}

.payment-popup-content .buttons button {
  margin: 0px !important;
  width: 174px !important;
  height: 50px !important;
  font-size: 20px !important;
}

.payment-content {
  width: 100%;
  padding: 10px 3px 0px;
}

.payment-text {
  padding: 23px 27px 23px;
  background: var(--Background-colors-light);
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 400px;
  overflow-y: scroll;
  overflow-x: hidden;
}


.payment-text::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: transparent;
}

.payment-text::-webkit-scrollbar-thumb {
  background-color: #A9A9A9;
  border-top-right-radius: 200px;
  border-top-left-radius: 200px;
  border-bottom-right-radius: 200px;
  border-bottom-left-radius: 200px;
}



.payment-box h3 {
  text-align: start !important;
}

.payment-box .fa-xmark {
  font-size: 17px;
  color: var(--primary-color);
  cursor: pointer;
}

.payment-image {
  width: 40px;
  height: 40px;
}

.payment-garp {
  background: #F2FFC7;
  width: 67px;
  height: 67px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.payment-img {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent !important;
}

.payment-garp img {
  width: 40px;
  height: 40px;
}

.payment-garp-icon {
  display: flex;
  justify-content: end;
  align-items: center;
  background: #00000030;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.payment-foot {
  display: flex;
  justify-content: end;
  background: transparent;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  overflow: hidden;
}

.payment-foot>div {
  margin-top: 10px;
  height: 100px;
  width: 100%;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  overflow: hidden;
  text-align: end;
  display: flex;
  justify-content: end;
  align-items: center;
}

.payment-foot button {
  width: 174px !important;
  height: 50px !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

.payment-content p {
  color: #7E7E7E;
  max-width: 260px;
  font-size: 15px;
  /* text-align: center; */
}

.payment-content h3 {
  font-weight: 500 !important;
  font-size: 20px !important;
  margin-bottom: 0px !important;
}


#modal-box-payment {
  padding: 0px !important;
  background: var(--Background-colors-light);
  width: 580px;
}

.show-model-payment {
  border-radius: 15px;
}

#show-model-payment .booking-lines span {
  width: calc(100% / 4 - 3px);
}

.show-model-payment .modal-head {
  display: flex;
  align-items: center;
  /* border-bottom: 3px solid #303030; */
  padding: 20px 10px;
  position: relative;
}

.booking-lines {
  position: absolute;
  bottom: 0px;
  height: 3px;

  width: 100%;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.booking-lines span {
  width: calc(100% / 2 - 3px);
  background: #303030;
}

.lines-bg {
  background: #A9A9A9 !important;
}

#modal-box-payment .buttons .close-btn {
  height: 38px;
  font-weight: 400;
  font-size: 19px;
  width: 155px;
}

.pop-title {
  margin-top: 0px !important;
  text-align: center;
  width: calc(100% - 42px);
}

.book-popup-content {
  padding: 20px 20px;
  width: 100%;
}

.book-popup-box {
  background: var(--white-color);
  box-shadow: 0px 1px 4px 0px #0000004D;
  width: 100%;
  border-radius: 8px;
  display: flex;
  padding: 10px;
  gap: 10px;
}

.pop-book-form {
  width: 100%;
}

.availability {
  width: calc(100% / 2 - 12px);

}

.availability input {
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  height: 43px;
}

.availability input:focus {
  box-shadow: 0px 2px 3px 1px #00000026;
  border-color: #1E1E1E;
}

.notes {
  margin-top: 13px;
}

.pop-book-form label {
  font-weight: 500;
  font-size: 16px;
  color: #666666;
  margin-bottom: 5px;
}

.pop-book-form .buttons .close-btn {
  font-size: 20px;
}

.notes textarea {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
}

.notes textarea:focus {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  border-color: #1E1E1E;
}

#modal-box-payment .fa-xmark {
  /* padding-right: 10px !important; */
}

.book-popup-box {
  margin-bottom: 20px;
}

.book-popup-box input {
  width: 23px;
  height: 23px;
  background: #F2FFC7 !important;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--primary-color)
}

.book-popup-box p {
  font-size: 16px;
  color: var(--primary-color);
}

.show-model-payment {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
}

.show-model-payment .aside-avater {
  width: 108px !important;
  height: 108px !important;
}

.show-model-payment .outside {
  width: 160px;
  height: 160px;
}

.show-model-payment .inside {
  width: 130px;
  height: 130px;
}

.show-model-payment button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-payment {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
  max-width: 40%;
}

#modal-box-two {
  width: 520px !important;
  padding: 30px 0px 0px 20px;
}

.show-model-payment.active-payment .show-modal {
  display: none;
}

.show-model-payment .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-payment.active-payment .overlay {
  opacity: 1 !important;
  pointer-events: auto;
}
#payment-form{
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  padding: 20px;
}
#payment-form label{
  font-size: 20px;
  font-weight: 600;
}
#payment-form button{
  height: 50px;
  width: 40%;
  align-self: end;
}
#amount{
  padding-left: 20px;
}
#amount:focus-visible{
  border-color: black !important;
  outline: none !important;
}

.cancel {
  background: transparent !important;
  border: 1px solid #EB4141 !important;
  color: #EB4141 !important;
}

.booking {
  background: #EB4141 !important;

  color: var(--white-color) !important;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: unset;
  /* width: 100%; */
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-payment.active-payment .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
  width: 100%;
  text-align: end;
  padding: 20px 0px;
}

.modal-box .buttons .close-btn {
  margin-top: 0px;
  width: 173px;
  text-align: end;
  height: 50px;
  font-size: 20px;
  text-align: center;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.pop-form {
  margin-top: 30px;
}

.main-out {}

.booking-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 10px;
}

.booking-content .out-icon {
  width: 92px;
  height: 92px;
  background: #E100001C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.booking-content h2 {
  font-size: 22px;
  font-weight: 500;
}

.booking-content p {
  color: #7E7E7E;
  font-size: 16px;
  font-weight: 400;
  max-width: 280px;
  text-align: center;
}

.out-icon img {
  width: 52px;
  height: 52px;
}

.main-out .buttons {
  display: flex;
  justify-content: center;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/








/*&&&&&&&&&&&&       vai     &&&&&&&&&&&&&&*/



.vai-text {
  text-align: start;
}

.vai-text h3 {
  text-align: start !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  color: var(--primary-color) !important;
}


#show-model-vai .book-popup-content {
  padding: 0px 35px 20px !important;
}

.vai-text p {
  color: #7E7E7E;
  font-size: 14px;
  max-width: 250px;
}

.vai-text .inp-date {
  display: flex;
  justify-content: end;
}

.inp-date input {
  font-size: 14px;
  width: 130px;
  color: #7E7E7E;
}

.vai-text input {
  border: none;
  box-shadow: 0px 2px 5px 0px #00000026;
  padding: 0px 5px;
  border-radius: 8px;
  height: 33px;
}

.vai-gallary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
  row-gap: 20px;
  position: relative;
}

.vai-gallary .vai-box {
  width: calc(100% / 2 - 10px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  box-shadow: 0px 2px 5px 0px #0000004D;
  border-radius: 15px;
  padding: 27px 15px;
  gap: 20px;
  position: relative;
  cursor: pointer;
}

.vai-box .vai-img {
  width: 83px;
  height: 83px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.cutom-bg1 {
  background: #FFEFC5;
}

.cutom-bg2 {
  background: #FFF9BF;
}

.cutom-bg3 {
  background: #FCE5A5;
}

.cutom-bg3 img {
  margin-bottom: 10px;
}

.cutom-bg4 {
  background: #E4EAFF;

}

.cutom-bg4 img {
  width: 55px !important;
  height: 55px !important;
}

.vai-img img {
  width: 48px;
  height: 48px;
}

.vai-box h3 {
  font-size: 22px;
}

.vai-box h4 {
  font-size: 22px;
  margin-bottom: 0px !important;
}

#modal-box-vai .buttons {
  display: flex;
  justify-content: space-between;
}

#modal-box-vai .buttons button {
  margin: 0px !important;
  width: calc(100% / 2 - 10px) !important;
  border-radius: 8px !important;
  height: 46px !important;
}

#close-btn-vai-back {
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}

#modal-box-vai {
  padding: 0px !important;
  background: var(--Background-colors-light);
  width: 473px;
}

.show-model-vai .modal-head {
  display: flex;
  align-items: center;
  /* border-bottom: 3px solid #303030; */
  padding: 20px 10px;
  position: relative;
}

.show-model-vai .vai-lines {
  position: absolute;
  bottom: 0px;
  height: 2px;

  width: 100%;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.show-model-vai .vai-lines span {
  width: calc(100% / 2 - 0.9px);
  background: #303030;
}

.lines-bg {
  background: #A9A9A9 !important;
}

#modal-box-vai .buttons .close-btn {
  height: 38px;
  font-weight: 400;
  font-size: 19px;
  width: 155px;
}

.pop-title {
  margin-top: 0px !important;
  text-align: center;
  width: calc(100% - 42px);
}

.book-popup-content {
  padding: 5px 20px;
  width: 100%;
}

.book-popup-box {
  background: var(--white-color);
  box-shadow: 0px 1px 4px 0px #0000004D;
  width: 100%;
  border-radius: 8px;
  display: flex;
  padding: 10px;
  gap: 10px;
}

.pop-book-form {
  width: 100%;
}

.pop-book-form form {}

.availability {
  width: calc(100% / 2 - 12px);

}

.availability input {
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  height: 43px;
}

.availability input:focus {
  box-shadow: 0px 2px 3px 1px #00000026;
  border-color: #1E1E1E;
}

.notes {
  margin-top: 13px;
}

.pop-book-form label {
  font-weight: 500;
  font-size: 16px;
  color: #666666;
  margin-bottom: 5px;
}

.pop-book-form .buttons .close-btn {
  font-size: 20px;
}

.notes textarea {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
}

.notes textarea:focus {
  resize: none;
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  border-color: #1E1E1E;
}

#modal-box-vai .fa-xmark {
  padding-right: 10px !important;
}

.book-popup-box {
  margin-bottom: 20px;
}

.book-popup-box input {
  width: 23px;
  height: 23px;
  background: #F2FFC7 !important;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--primary-color)
}

.book-popup-box p {
  font-size: 16px;
  color: var(--primary-color);
}

.show-model-vai {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
}

.show-model-vai .aside-avater {
  width: 108px !important;
  height: 108px !important;
}

.show-model-vai .outside {
  width: 160px;
  height: 160px;
}

.show-model-vai .inside {
  width: 130px;
  height: 130px;
}

.show-model-vai button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-vai {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
  max-width: 40%;
}

#modal-box-two {
  width: 520px !important;
  padding: 30px 0px 0px 20px;
}

/* #modal-box-vai{
  width: 650px;
} */
/* .show-model-vai.active-vai .show-modal {
  display: none;
} */
.show-model-vai .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-vai.active-vai .overlay {
  opacity: 1 !important;
  pointer-events: auto;
}

.cancel {
  background: transparent !important;
  border: 1px solid #EB4141 !important;
  color: #EB4141 !important;
}

.vai {
  background: #EB4141 !important;

  color: var(--white-color) !important;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: unset;
  /* width: 100%; */
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-vai.active-vai .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
  width: 100%;
  text-align: end;
  padding: 20px 0px;
}

.modal-box .buttons .close-btn {
  margin-top: 0px;
  width: 173px;
  text-align: end;
  height: 50px;
  font-size: 20px;
  text-align: center;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.pop-form {
  margin-top: 30px;
}

.main-out {}

.vai-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 10px;
}

.vai-content .out-icon {
  width: 92px;
  height: 92px;
  background: #E100001C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vai-content h2 {
  font-size: 22px;
  font-weight: 500;
}

.vai-content p {
  color: #7E7E7E;
  font-size: 16px;
  font-weight: 400;
  max-width: 280px;
  text-align: center;
}

.out-icon img {
  width: 52px;
  height: 52px;
}

.main-out .buttons {
  display: flex;
  justify-content: center;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/





/*&&&&&&&&&&&&  Delete              &&&&&&&&&&&&&&*/
.show-model-delete {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
}

.show-model-delete .aside-avater {
  width: 108px !important;
  height: 108px !important;
}

.show-model-delete .outside {
  width: 160px;
  height: 160px;
}

.show-model-delete .inside {
  width: 130px;
  height: 130px;
}

.show-model-delete button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-delete {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
  max-width: 40%;
}

#modal-box-two {
  width: 520px !important;
  padding: 30px 20px 0px 20px;
}

#modal-box-delete {
  width: 500px;
}

.show-model-delete.active-delete .show-modal {
  display: none;
}

.show-model-delete .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-delete.active-delete .overlay {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: unset;
  /* width: 100%; */
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-delete.active-delete .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
  width: 100%;
  text-align: end;
  padding: 32px 0px 0px;
}

.modal-box .buttons .close-btn {
  margin-top: 0px;
  width: 173px;
  text-align: end;
  height: 50px;
  font-size: 20px;
  text-align: center;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.pop-form {
  margin-top: 30px;
}

.main-out .buttons {
  gap: 15px;
}

.logout-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 10px;
}

.logout-content .out-icon {
  width: 92px;
  height: 92px;
  background: #E100001C;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logout-content h2 {
  font-size: 22px;
  font-weight: 500;
}

.logout-content p {
  color: #7E7E7E;
  font-size: 16px;
  font-weight: 400;
  max-width: 280px;
  text-align: center;
}

.out-icon img {
  width: 52px;
  height: 52px;
}

.main-out .buttons {
  display: flex;
  justify-content: center;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/


/*&&&&&&&&&&&& second  &&&&&&&&&&&&&&*/
.show-model-two {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
  margin-top: 100px;
}

.show-model-two button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-two .buttons {
  display: flex;
  justify-content: space-between;
  padding: 25px 0px;
}

.show-model-two .buttons .close-btn {
  /* width: 120px;
  height: 30px;
  font-size: 18px;
  font-weight: 500; */
  font-weight: 400 !important;
  color: var(--white-color);
  height: 45px;
}

.show-model-two .buttons .back {
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);

}

.show-model-two {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
}

.show-model-two.active-two .show-modal-two {
  display: none;
}

.show-modal-two {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 51;
  right: 0px;
  bottom: 0px;

}

.show-model-two .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-two.active-two .overlay {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* max-width: 40%  ;
  width: 100%; */
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;

}

.show-model-two.active-two .modal-box {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.ava-image {
  display: grid;
  grid-template-columns: calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(100% / 5);
  gap: 30px;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  max-height: 350px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 20px;
  padding-bottom: 10px;
}

.ava-image::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background-color: #A9A9A9 !important;
}

.ava-image::-webkit-scrollbar-thumb {
  background-color: #A9A9A9;
}

.ava-image>div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.ava-image img {
  width: 82px;
  height: 82px;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0px 2px 5px 1px #00000026;

}

.modal-head {
  display: flex;
  justify-content: end;
  width: 100%;
}

.modal-head i {
  color: var(--primary-color);
  font-size: 30px;
  padding-right: 20px;
  cursor: pointer;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/




/*&&&&&&&&&&&& Change pass  &&&&&&&&&&&&&&*/
.show-model-pass {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
  margin-top: 100px;
}

.show-model-pass button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-pass .buttons {
  display: flex;
  justify-content: space-between;
}

.show-model-pass .buttons .close-btn {
  /* width: 120px;
  height: 30px;
  font-size: 18px;
  font-weight: 500; */
  font-weight: 400 !important;
  color: var(--white-color);
  height: 45px;
}

.show-model-pass .buttons .back {
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);

}

.show-model-pass {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
}

.show-model-pass.active-pass .show-modal-pass {
  display: none;
}

.show-modal-pass {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 51;
  right: 0px;
  bottom: 0px;
}

.show-model-pass .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-pass.active-pass .overlay {
  opacity: 1;
  pointer-events: auto;
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* max-width: 40%  ;
  width: 100%; */
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-pass.active-pass .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.ava-image {
  display: grid;
  grid-template-columns: calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(100% / 5);
  gap: 30px;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  max-height: 350px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 20px;
  padding-bottom: 10px;
}

.ava-image::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background-color: #A9A9A9 !important;
}

.ava-image::-webkit-scrollbar-thumb {
  background-color: #A9A9A9;
}

.ava-image>div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.ava-image img {
  width: 82px;
  height: 82px;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0px 2px 5px 1px #00000026;

}

.modal-head {
  display: flex;
  justify-content: end;
  width: 100%;
}

.modal-head i {
  color: var(--primary-color);
  font-size: 30px;
  padding-right: 20px;
  cursor: pointer;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/




/*&&&&&&&&&&&& Adress Pop UP  &&&&&&&&&&&&&&*/
.show-model-Adress {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
  margin-top: 100px;
}

.show-model-Adress button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-Adress .buttons {
  display: flex;
  justify-content: space-between;
}

.show-model-Adress .buttons .close-btn {
  font-weight: 400 !important;
  color: var(--white-color);
  height: 45px;
}

.show-model-Adress .buttons .back {
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);

}

.show-model-Adress {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
}

.show-model-Adress.active-Adress .show-modal-Adress {
  display: none;
}

.show-modal-Adress {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 51;
  right: 0px;
  bottom: 0px;
}

.show-model-Adress .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-Adress.active-Adress .overlay {
  opacity: 1;
  pointer-events: auto;
}

.slected-Adress {
  margin-top: 20px !important;
  max-height: unset !important;
  overflow-y: unset !important;
  overflow-x: unset !important;
  padding-right: unset !important;
  padding: 0px 5px !important;
  max-height: 400px;
  overflow: auto;
  padding-top: 10px !important;
  display: flex;
  /* justify-content: center; */
  flex-direction: column;
  
}
.slected-Adress > img{
  margin: 0px auto;
}
.main-adress-popup {
  padding: 0px 10px !important;
  width: 100%;
}

.adress-popup-btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 4px #00000026;
  border: 1px solid #303030;
  width: 100%;
  margin-top: 20px;
  border-radius: 8px;
  padding: 10px 0px;
  gap: 15px;
}

.adress-popup-btn .fa-plus {
  font-size: 17px;
  color: #303030;
}

.adress-popup-btn h2 {
  color: #303030;
  margin-top: 0px !important;
}

.adress-popup-Box {
  box-shadow: 0px 0px 4px #00000026;
  border-radius: 15px;
  margin-bottom: 20px;
  width: 100%;
}

#modal-box-Adress {
  margin-top: 30px;
  max-height: 600px !important;
  overflow-y: hidden !important;
  overflow-x: hidden;
  width: 500px;
  background: #FCFCFA;
  padding: 15px;
}

.slected-Adress {
  overflow-y: auto !important;
  /* padding-top: 220px !important; */
}

.adress-box-foot {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

.adress-box-foot div {
  display: flex;
  gap: 10px;
}

.adress-box-foot p {
  color: #303030;
  font-size: 16px;
}

.adressBtn {
  /* height: 100px; */
  margin-top: 30px !important;
  display: flex;
  align-items: end;
  justify-content: end;
  width: 100%;
  padding-right: 10px !important;
}
body[dir="rtl"] .adressBtn{
  justify-content: start !important;
}

.adressBtn button {
  width: 40%;
  height: 50px;
  font-size: 20px !important;
  font-weight: 700;
}

.adress-box-foot label {
  width: 20px;
  height: 20px;
}

.adress-box-foot label img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.adress-box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #a9a9a91a;
}

.adress-box-head .fa-chevron-right {
  color: #7E7E7E;
  font-size: 17px;
}

.adress-box-head p {
  color: #656565;
  font-size: 16px
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-Adress.active-Adress .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}



/*&&&&&&&&&&&& Adress Pop UP  &&&&&&&&&&&&&&*/
.show-model-Adress-EditProfil {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
  margin-top: 100px;
}

.show-model-Adress-EditProfil button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-Adress-EditProfil .buttons {
  display: flex;
  justify-content: space-between;
}

.show-model-Adress-EditProfil .buttons .close-btn {
  font-weight: 400 !important;
  color: var(--white-color);
  height: 45px;
}

.show-model-Adress-EditProfil .buttons .back {
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);

}

.show-model-Adress-EditProfil {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
}

.show-model-Adress-EditProfil.active-Adress-EditProfil .show-modal-Adress-EditProfil {
  display: none;
}

.show-modal-Adress-EditProfil {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 51;
  right: 0px;
  bottom: 0px;
}

.show-model-Adress-EditProfil .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-Adress-EditProfil.active-Adress-EditProfil .overlay {
  opacity: 1;
  pointer-events: auto;
}

.slected-Adress-EditProfil {
  margin-top: 20px !important;
  max-height: unset !important;
  overflow-y: unset !important;
  overflow-x: unset !important;
  padding-right: unset !important;
  padding: 0px 5px !important;
  max-height: 400px;
  overflow: auto;
  padding-top: 10px !important;
  display: flex;
  justify-content: center;
  flex-direction: column;
  
}
.slected-Adress-EditProfil > img{
  margin: 0px auto;
}
.main-adress-EditProfil-popup {
  padding: 0px 10px !important;
  width: 100%;
}

.adress-EditProfil-popup-btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 4px #00000026;
  border: 1px solid #303030;
  width: 100%;
  margin-top: 20px;
  border-radius: 8px;
  padding: 10px 0px;
  gap: 15px;
}

.adress-EditProfil-popup-btn .fa-plus {
  font-size: 17px;
  color: #303030;
}

.adress-EditProfil-popup-btn h2 {
  color: #303030;
  margin-top: 0px !important;
}

.adress-EditProfil-popup-Box {
  box-shadow: 0px 0px 4px #00000026;
  border-radius: 15px;
  margin-bottom: 20px;
  width: 100%;
}

#modal-box-Adress-EditProfil {
  margin-top: 30px;
  max-height: 600px !important;
  overflow-y: hidden !important;
  overflow-x: hidden;
  width: 500px;
  background: #FCFCFA;
  padding: 15px;
}

.slected-Adress-EditProfil {
  overflow-y: auto !important;
  /* padding-top: 220px !important; */
}

.adress-EditProfil-box-foot {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

.adress-EditProfil-box-foot div {
  display: flex;
  gap: 10px;
}

.adress-EditProfil-box-foot p {
  color: #303030;
  font-size: 16px;
}

.adress-EditProfilBtn {
  /* height: 100px; */
  margin-top: 30px !important;
  display: flex;
  align-items: end;
  justify-content: end;
  width: 100%;
  padding-right: 10px !important;
}

.adress-EditProfilBtn button {
  width: 40%;
  height: 50px;
  font-size: 20px !important;
  font-weight: 700;
}

.adress-EditProfil-box-foot label {
  width: 20px;
  height: 20px;
}

.adress-EditProfil-box-foot label img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.adress-EditProfil-box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #a9a9a91a;
}

.adress-EditProfil-box-head .fa-chevron-right {
  color: #7E7E7E;
  font-size: 17px;
}

.adress-EditProfil-box-head p {
  color: #656565;
  font-size: 16px
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-Adress-EditProfil.active-Adress-EditProfil .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.ava-image {
  display: grid;
  grid-template-columns: calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(100% / 5);
  gap: 30px;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  max-height: 350px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 20px;
  padding-bottom: 10px;
}

.ava-image::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background-color: #A9A9A9 !important;
}

.ava-image::-webkit-scrollbar-thumb {
  background-color: #A9A9A9;
}

.ava-image>div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.ava-image img {
  width: 82px;
  height: 82px;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0px 2px 5px 1px #00000026;

}

.modal-head {
  display: flex;
  justify-content: end;
  width: 100%;
}

.modal-head i {
  color: var(--primary-color);
  font-size: 30px;
  padding-right: 20px;
  cursor: pointer;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/



/*&&&&&&&&&&&& Adress Pop UP  &&&&&&&&&&&&&&*/
.show-model-FollowAdress {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
  margin-top: 100px;
}

.show-model-FollowAdress button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-FollowAdress .buttons {
  display: flex;
  justify-content: space-between;
}

.show-model-FollowAdress .buttons .close-btn {
  font-weight: 400 !important;
  color: var(--white-color);
  height: 45px;
}

.show-model-FollowAdress .buttons .back {
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);

}

.show-model-FollowAdress {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
}

.adress-content {
  width: 100% !important;
}

.adress-content .form-group {
  width: 100% !important;
  margin-bottom: 0px !important;
}

.show-model-FollowAdress.active-FollowAdress .show-modal-FollowAdress {
  display: none;
}

.show-modal-FollowAdress {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 51;
  right: 0px;
  bottom: 0px;
}

.show-model-FollowAdress .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-FollowAdress.active-FollowAdress .overlay {
  opacity: 1;
  pointer-events: auto;
}

.slected-FollowAdress {
  max-height: 400px;
  overflow: auto;
}

.FollowAdress-popup-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 4px #00000026;
  border: 1px solid #303030;
  width: 100%;
  margin-top: 20px;
  border-radius: 8px;
  padding: 10px 0px;
  gap: 15px;
}

.FollowAdress-popup-btn .fa-plus {
  font-size: 17px;
  color: #303030;
}

.FollowAdress-popup-btn h2 {
  color: #303030;
  margin-top: 0px !important;
}

.FollowAdress-popup-Box {
  box-shadow: 0px 0px 4px #00000026;
  border-radius: 15px;
  margin-bottom: 20px;
}

#modal-box-FollowAdress {
  width: 500px;
  background: #FCFCFA;
  padding: 30px 15px 30px 15px;
  max-height: 600px;
  overflow-y: hidden;
}

.model-body-contant {
  width: 100%;
  overflow: auto;
  padding: 10px 5px 10px 5px;
}

.model-body-contant>div {
  margin-bottom: 20px !important;
}

/* .marg-b {
  margin-bottom: 20px !important;
} */
.model-body-contant::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: var(--white-color);
}

.model-body-contant::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

#close-btn-FollowAdress-close {
  padding-right: 5px !important;
}

.FollowAdress-box-foot {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

.FollowAdress-box-foot div {
  display: flex;
  gap: 10px;
}

.FollowAdress-box-foot p {
  color: #303030;
  font-size: 16px;
}

.FollowAdressBtn {
  height: 100px;
  display: flex;
  align-items: end;
  justify-content: end;
  width: 100%;
}

.FollowAdressBtn button {
  width: 40%;
  height: 50px;
  font-size: 20px !important;
  font-weight: 700;
}

.FollowAdress-box-foot label {
  width: 20px;
  height: 20px;
}

.FollowAdress-box-foot label img {
  width: 20px;
  height: 20px;
}

.FollowAdress-box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #a9a9a91a;
}

.FollowAdress-box-head .fa-chevron-right {
  color: #7E7E7E;
  font-size: 17px;
}

.FollowAdress-box-head p {
  color: #656565;
  font-size: 16px
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-FollowAdress.active-FollowAdress .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.ava-image {
  display: grid;
  grid-template-columns: calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(100% / 5);
  gap: 30px;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  max-height: 350px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 20px;
  padding-bottom: 10px;
}

.ava-image::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background-color: #A9A9A9 !important;
}

.ava-image::-webkit-scrollbar-thumb {
  background-color: #A9A9A9;
}

.ava-image>div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.ava-image img {
  width: 82px;
  height: 82px;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0px 2px 5px 1px #00000026;

}

.modal-head {
  display: flex;
  justify-content: end;
  width: 100%;
}

.modal-head i {
  color: var(--primary-color);
  font-size: 30px;
  padding-right: 20px;
  cursor: pointer;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/











/*&&&&&&&&&&&& Adress Pop UP  &&&&&&&&&&&&&&*/
.show-model-FollowAdress-FromEdit {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #e3f2fd;
  margin-top: 100px;
}

.show-model-FollowAdress-FromEdit button {
  color: #fff;
  border: none;
  background: var(--btn-bg-color);
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  width: 109px;
  height: 31px;
  border-radius: 8px;
}

.show-model-FollowAdress-FromEdit .buttons {
  display: flex;
  justify-content: space-between;
}

.show-model-FollowAdress-FromEdit .buttons .close-btn {
  font-weight: 400 !important;
  color: var(--white-color);
  height: 45px;
}

.show-model-FollowAdress-FromEdit .buttons .back {
  background: transparent;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);

}

.show-model-FollowAdress-FromEdit {
  width: fit-content;
  height: fit-content;
  top: 44px;
}

.modal-box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  background: var(--white-color);
}

.adress-content {
  width: 100% !important;
}

.adress-content .form-group {
  width: 100% !important;
  margin-bottom: 0px !important;
}

.show-model-FollowAdress-FromEdit.active-FollowAdress-FromEdit .show-modal-FollowAdress-FromEdit {
  display: none;
}

.show-modal-FollowAdress-FromEdit {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 51;
  right: 0px;
  bottom: 0px;
}

.show-model-FollowAdress-FromEdit .overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
  top: 0px;
  left: 0px;
}

.show-model-FollowAdress-FromEdit.active-FollowAdress-FromEdit .overlay {
  opacity: 1;
  pointer-events: auto;
}

.slected-FollowAdress-FromEdit {
  max-height: 400px;
  overflow: auto;
}

.FollowAdress-popup-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 4px #00000026;
  border: 1px solid #303030;
  width: 100%;
  margin-top: 20px;
  border-radius: 8px;
  padding: 10px 0px;
  gap: 15px;
}

.FollowAdress-popup-btn .fa-plus {
  font-size: 17px;
  color: #303030;
}

.FollowAdress-popup-btn h2 {
  color: #303030;
  margin-top: 0px !important;
}

.FollowAdress-popup-Box {
  box-shadow: 0px 0px 4px #00000026;
  border-radius: 15px;
  margin-bottom: 20px;
}

#modal-box-FollowAdress-FromEdit {
  width: 500px;
  background: #FCFCFA;
  padding: 30px 15px 30px 15px;
  max-height: 600px;
  overflow-y: hidden;
}

.model-body-contant {
  width: 100%;
  overflow: auto;
  padding: 10px 5px 10px 5px;
}

.model-body-contant>div {
  margin-bottom: 20px !important;
}

/* .marg-b {
  margin-bottom: 20px !important;
} */
.model-body-contant::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: var(--white-color);
}

.model-body-contant::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

#close-btn-FollowAdress-FromEdit-close {
  padding-right: 5px !important;
}

.FollowAdress-box-foot {
  display: flex;
  justify-content: space-between;
  padding: 15px;
}

.FollowAdress-box-foot div {
  display: flex;
  gap: 10px;
}

.FollowAdress-box-foot p {
  color: #303030;
  font-size: 16px;
}

.FollowAdressBtn {
  height: 100px;
  display: flex;
  align-items: end;
  justify-content: end;
  width: 100%;
}

.FollowAdressBtn button {
  width: 40%;
  height: 50px;
  font-size: 20px !important;
  font-weight: 700;
}

.FollowAdress-box-foot label {
  width: 20px;
  height: 20px;
}

.FollowAdress-box-foot label img {
  width: 20px;
  height: 20px;
}

.FollowAdress-box-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #a9a9a91a;
}

.FollowAdress-box-head .fa-chevron-right {
  color: #7E7E7E;
  font-size: 17px;
}

.FollowAdress-box-head p {
  color: #656565;
  font-size: 16px
}

.modal-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  border-radius: 24px;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%) scale(1.2);
  z-index: 12;
}

.show-model-FollowAdress-FromEdit.active-FollowAdress-FromEdit .modal-box {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.form-check--groupe #selcted-borid-insta{
  cursor: pointer;
  padding-left: 20px !important;
}
.form-check--groupe #selcted-borid-stripe{
  cursor: pointer;
  padding-left: 20px !important;
}

.modal-box i {
  font-size: 70px;
  color: #4070f4;
}

.modal-box h2 {
  margin-top: 20px;
  font-size: 25px;
  font-weight: 500;
  color: #333;
}

.modal-box h3 {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.modal-box .buttons {
  margin-top: 0px;
}

.modal-box button {
  font-size: 14px;
  padding: 6px 12px;
  margin: 0 10px;
}


.aside-edit {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  z-index: 51;
  cursor: pointer;
}

.ava-image {
  display: grid;
  grid-template-columns: calc(100% / 5) calc(100% / 5) calc(100% / 5) calc(100% / 5);
  gap: 30px;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  max-height: 350px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-right: 20px;
  padding-bottom: 10px;
}

.ava-image::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background-color: #A9A9A9 !important;
}

.ava-image::-webkit-scrollbar-thumb {
  background-color: #A9A9A9;
}

.ava-image>div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.ava-image img {
  width: 82px;
  height: 82px;
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0px 2px 5px 1px #00000026;

}

.modal-head {
  display: flex;
  justify-content: end;
  width: 100%;
}

.modal-head i {
  color: var(--primary-color);
  font-size: 30px;
  padding-right: 20px;
  cursor: pointer;
}

/*&&&&&&&&&&&&&&&&&&&&&&&&&
*/

.aside-text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  gap: 30px;
}

.card {
  border: 0px !important;
  padding: 10px 0px 0px 0px !important;

}

.row {
  padding: 0px 2px !important;
}

.aside-sub-content {
  width: 100%;
  padding: 40px 20px;
}

.aside-box {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
}

.aside-box h4 {
  color: var(--Dark-Grey-color);
  font-weight: 500;
  font-size: 16px;
}

.aside-box-row {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  background: var(--white-color);
  /* background: #ccc; */
  border-radius: 15px;
  box-shadow: 0px 1px 2px 1px #0000004D;
}

body:dir(rtl) .aside-box-row i {
  transform: rotateY(180deg);
}

.aside-box-img {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
}

.aside-box-img-lan {
  display: block;
  width: 100%;
}

.aside-lan {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.aside-lan-child {
  width: 100%;
  justify-content: start !important;
  padding: 10px 0px 10px 10px;
  font-size: 16px;
  font-weight: 400;
}

body:dir(rtl) .aside-lan-child {
  padding: 10px 10px 0px 10px;
}

.aside-lan-child-frist {
  margin-bottom: 10px;
  border-bottom: 0.5px solid #AEAEAE;
}

.col {
  padding: 0px !important;
}

.aside-lan>div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.aside-box-img img {
  height: 18px;
  width: 18px;
}

.aside-box-img a {
  color: var(--primary-color);
  font-size: 16px;
  font-weight: 400;
}

.aside-box-row>a,
.aside-box-row>div {
  color: unset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
  padding: 10px;
}
.aside-box-row>a{
  border-bottom: 0.5px solid #AEAEAE;
}
.aside-box-row>div:not(:last-child) {
  border-bottom: 0.5px solid #AEAEAE;
}

.aside-box-row>div i {
  font-size: 14px;
}

.bg-user-ID_true {
  background: #EDFFAE !important;
}

/* ====  End aside  ====*/

/* ====  Start Header  ====*/

.header-container {
  background: var(--Background-colors-light);
  height: 70px;
  width: 100% !important;
  position: fixed;
  box-shadow: 0px 0px 10px 1px #e5e5e5;
  z-index: 9;
}

.bar1,
.bar2,
.bar3 {
  width: 30px;
  margin: 4px 0 !important;
  height: 3.2px;
  background-color: #333;
  transition: 0.4s;
}

.aside-over-ley {
  position: fixed;
  top: 0;
  right: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  z-index: 50;
  display: none;
}

.change .bar3 {
  transform: translate(0, -5px) rotate(46deg) !important;
}

.change .bar1 {
  transform: translate(0, 10px) rotate(-45deg);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

.main-head {
  display: flex;
  justify-content: center;
}

header {
  display: flex;
  align-items: center;
  height: 70px;
  position: fixed;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}

.navbar {
  background: transparent;
  justify-content: space-between;
  width: 100%;
  padding-top: 0px;
  padding-bottom: 0px;
}

.navbar-brand {
  height: 46px;
  display: flex;
  align-items: center;
  width: fit-content;
  margin-right: 0px !important;
}
.navbar-brand-foot{
  width: 110px;
  display: block;
}
.navbar-brand-foot img {
  width: 100%;
}
.navbar-brand img {
  height: 100%;
}

.container-fluid {
  justify-content: center;
  width: 20%;
}

.navbar-collapse {
  justify-content: center;
  width: 50%;
  flex-basis: unset;
}

.navbar-nav {
  justify-content: space-evenly;
  gap: 70px;
}


.line-link {
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;

}

body:dir(rtl) .line-link {
  height: 30px;
}

.line-link::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: -100%;
  background: var(--primary-color);
  z-index: 100;
  height: 2px;
  width: 100%;
  transition: left 0.2s ease-in-out;
}

.line-link:hover::after {
  left: 0px;
}

.nav-link {
  padding: 0px !important;
  font-size: var(--primary-fontSize);
  font-weight: 500;
  color: var(--Dark-Grey-color);
}

.fa-globe {
  color: #303030;
}

.nav-link:focus {
  color: var(--primary-color);
}

.nav-link:hover {
  color: var(--primary-color);
}

.navbar-light .navbar-nav .nav-link.active {
  color: var(--primary-color);
}

.navbar-light .navbar-nav .nav-link.active:after {
  color: var(--primary-color);
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  background: var(--primary-color);
  z-index: 100;
  height: 2px;
  width: 100%;
  transition: left 0.2s ease-in-out;
  font-weight: 700;
}

header .btn {
  border: 0px;
  width: 101px;
  height: 40px;
  font-size: var(--primary-fontSize);
}

.btn {
  background: var(--btn-bg-color);
  color: var(--white-color);
  border: none;
}

header .btn-outline-success:hover {
  background: var(--hover-color);
}

body:dir(rtl) .btn-outline-success {
  width: 130px;
}

.btn:hover {
  background: var(--hover-color);
}

.btn:focus {
  box-shadow: none;
  border: none;
}

.header-right {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 20%;
  justify-content: end;
}

.frameuser {
  width: 28px;
  height: 28px;
}

.pop-form {
  width: 100%;
}

.pop-form::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: var(--white-color);
}

.pop-form::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

.change-pass .input-group {
  flex-direction: column !important;
}

.change-pass .input-group label {
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--Dark-Grey-color);
  font-weight: 500;
}

.change-pass .form-control {
  width: 100%;
  height: 43px !important;
}

.change-pass .form-control::placeholder {
  font-size: 14px !important;
}

.main-pass-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0px 5px !important;
}

.show-model-pass .buttons {
  justify-content: end !important;
}

.pop-form .fa-eye-slash {
  font-size: 15px;
  color: var(--primary-color);
  cursor: pointer;

}

/*===============    12 / 29 ==================*/
header .nav-item .custom-menu {
  width: 200px !important;
  left: -96% !important;
}

header .nav-item .custom-menu span {
  color: #000000 !important;
}

.main-orderlist-mobile {
  min-height: 100vh;

}

.orderlist-content-mobile {
  /* background: red; */
}


/*===============    12 / 29 ==================*/
header .dropdown-menu {
  min-width: unset;
  left: 0px !important;
}

.dropdown-menu {
  border-radius: 10px !important;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important;
  padding-bottom: 0px !important;
  padding-top: 0px !important;
  color: #0000000D !important;
}

.dropdown-item:hover {
  background: #0000000D !important;
}

.dropdown-menu li:not(:last-child) {
  border-bottom: 0.5px solid #AEAEAE !important;

}

.dropdown-menu li {
  cursor: pointer;
  color: #000 !important;
}

.dropdown-menu li a {
  display: block;
  padding: 10px 15px !important;
}

.input-group-text {
  cursor: pointer;
}

.custom-menu .dropdown-item {
  text-align: start;
  color: #0000000D !important;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #000000 !important;
}

.custom-menu .dropdown-item span {
  font-size: 14px;
  font-weight: 400;
}

.custom-menu .dropdown-item i {
  font-size: 18px;
  padding-right: 5px;
  color: var(--primary-color);
  font-weight: 400;
}

.custom-menu .dropdown-item img {
  width: 26px;
  height: 22px;
  padding-right: 5px;
}

.dropdown-item:focus {
  color: #000 !important;
}

.custom-menu .dropdown-item span {
  font-size: 14px;
  font-weight: 400;
}

header .nav-btn {
  box-shadow: 0px 1px 4px 0px #00000013;
  width: 80px;
  height: 33px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: var(--secondary-fontSize);
}

header .dropdown-menu {
  width: 100%;
  text-align: center;
  margin-top: 5px !important;
}

header .dropdown-toggle {
  width: 100%;
  height: 100%;
}

.dropdown {
  width: 60px;
  height: 40px;
}

/* ====  End Header  ====*/
/* ====  Start Landing  ====*/
.chat {
  direction: ltr;
  position: fixed;
  z-index: 100;
  right: 120px;
  bottom: 30px;
  width: 21.6%;
  min-width: 350px;
  height: 600px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  background: #F6F6EF;
  padding: 0px 0px;
  z-index: 10000;
}

.chat-head {
  direction: ltr;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: #FCFCFA;
  box-shadow: 0px 4px 43.6px 0px #FFF;
  padding: 13px 30px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom: 1px solid #F2F2F2;
}

.chat-head i {
  font-size: 20px;
  color: #000000;
}

.chat-head h2 {
  font-size: 22px;
  font-weight: 600;
}

.chat-logo-graph {
  background: #D3F26A;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chat-head span {
  font-size: 14px;
  font-weight: 600;
}

.chat-body {
  max-height: 461px;
  padding: 0px 13.5px 30px;
  overflow-y: auto;
  margin: 0px 1.5px;
}




.chat-body::-webkit-scrollbar {
  width: 4px;
  height: 5px;
  background-color: #f6f6ef;
}

.chat-body::-webkit-scrollbar-thumb {
  background-color: #ccc;

}

.chat-screen {
  display: none;
}

.chat-row {
  display: flex;
  align-items: end;
  flex-direction: column;
  width: 100%;
}

.chat-row>.chat-row--content {
  display: flex;
  align-items: end;
  gap: 20px;
  width: 100%;
}

.user-grap {
  width: 28px;
  height: 28px;
  background: #D3F26A;
  border-radius: 50%;
}

.chat-date {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 40px 0px 0px;
}

.chat-row p {
  width: calc(88.2% - 50px);
  background: #EEEEEE;
  border-radius: 25px 25px 25px 0px;
  padding: 25px;
  position: relative;
  font-size: 16px;
}

.chat-time {
  position: absolute;
  bottom: -21.5px;
  right: 30px;
  z-index: 100;
  color: #7E7E7E;
  font-size: 12px;
  font-weight: 400;
}

.chat-date {
  color: #7E7E7E;
  font-size: 12px;
  font-weight: 400;
}

.chat-icon,
.chat-close {
  position: fixed;
  bottom: 30px;
  right: 40px;
  width: 58px;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  z-index: 100000;
}

.chat-icon img {
  width: 30px;
  height: 30px;
}

.chat-icon i {
  color: var(--white-color);
  font-size: 30px;
}

.chat-row-right {
  display: flex;
  justify-content: end;
  align-items: center;
  justify-content: end;
  align-items: center;
  /* margin-bottom:; */
  width: 100%;
  margin: 20px 0px 40px;
}

.chat-head-box {
  display: flex;
  align-items: center;
}

.chat-row-right p {
  background: #EDFFAE;
  padding: 13px 22px;
  border-radius: 25px 0px 25px 25px;
  font-size: 16px;
  color: var(--primary-color);
  font-weight: 400;
  position: relative;
  width: 80%;
}

.chat-inp {
  position: absolute;
  width: 100%;
  bottom: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
  background: #F6F6EF;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  z-index: 100;
  /* padding: 10px 0px !important; */
}

.chat-inp-groupe {
  position: relative;
  width: 100%;
  /* background: red; */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.chat-inp input {
  outline: none;
  border: none;
  height: 45px;
  width: 92.6%;
  border-radius: 25px;
  background: #FFF;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  padding: 0px 50px 0px 20px;
}

.chat-inp input::placeholder {
  color: rgba(0, 0, 0, 0.20);
  font-size: 16px;
  font-weight: 400;
}

.chat-inp .send-icon {
  position: absolute;
  right: 0px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary-color);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--white-color);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.chat-inp i {
  font-size: 17px;
}

.terms-container {
  min-height: 73vh;
}

/*============  Start  chat-page   =================*/
.chat-screen {
  display: none;
}

.chat-page {
  position: unset;
  width: 100%;
  /* max-width: unset; */
  height: 100vh;
  /* display: flex;
  justify-content: center;
  align-items: center; */
  background: transparent;
  box-shadow: unset;
  border-radius: 0px;
  overflow: hidden;
  /* position: relative; */
  width: 100%;
}

.chat-page .chat-head {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
  left: 0px;
  z-index: 1000;
  /* width: 100%; */
  justify-content: space-between;
  align-items: center;
}

.chat-page .chat-head a {
  display: block;
  color: var(--primary-color);
}

.chat-page .chat-head i {
  cursor: pointer;
  font-size: 20px;
}

.chat-head .chat-head-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: transparent;
  height: unset;
  border-radius: 0px;
}

.chat-page-content {
  height: 100%;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  border-radius: 25px;
  background: #F6F6EF;
  padding: 0px 0px;
  border-radius: 0px;
}

.chat-page .chat-inp {
  position: unset;
  position: absolute;
  bottom: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.chat-page .chat-inp .send-icon {
  right: 40px;
}

.chat-page .chat-inp input {
  height: 50px;
}

.chat-page .chat-body {
  max-height: 84vh;
  background: #F6F6EF;
  margin-top: 69px;
  /* background: blue; */
}

/*============  End  chat-page   =================*/
/* .af-home-title{
  font-size: 42px !important;
  width: 100% !important;
  text-align: start !important;
} */
.landing {
  background: var(--Background-colors-light);
  padding-top: 180px;
  padding-bottom: 80px;
}

.landing .lan-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lan-image {
  width: 44.4%;
  height: 100%;
}

.lan-image img {
  width: 100%;
  height: 100%;
}

.lan-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 44%;
}

.lan-content h2 {
  font-size: 64px;
  font-weight: 600;
}

.lan-content p {
  font-size: var(--secondary-fontSize);
  color: var(--primary-color);
}

.lan-content .btn {
  height: 50px;
  width: 203px;
  font-size: 18px;
}

.lan-link {
  width: 40%;
  padding: 13px 0px;
}

/* ====  End Landing  ====*/
/* ====  Start Services  ====*/
.services {
  background: var(--white-color);
  padding-top: 100px;
  padding-bottom: 100px;
}

.serv-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.serv-content {
  width: 100%;
}

.serv-contant h2 {
  padding-left: 0px !important;
}

.main-swiper {
  width: 100%;
  position: relative;
  /* padding: 0px 70px; */
}
.services-title{
  width: 100%;
}

.swiper {
  position: unset !important;
  padding: 0px 50px;
  width: 60%;
}

swiper-container {
  width: 100%;
  height: 100%;
  position: unset;
}

swiper-slide {
  text-align: center;
  font-size: 18px;
  /* background: #fff; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0px;
  /* width: 300px !important;
  height: 300px */
}

swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  /* object-fit: cover; */
}

.swiper-pagination-bullet {
  background: red !important;
}

.main-title {
  font-size: 58px;
  margin-bottom: 45px !important;
  color: var(--primary-color);
  font-weight: 600;
}

/* ====  End Services  ====*/
/* ====  Start Reasons  ====*/
.reasons {
  background: var(--Background-colors-light);
  padding-top: 100px;
  padding-bottom: 100px;
}

.reas-title {
  display: flex;
}

.reas-title span {
  color: #D3F26A;
  margin-left: 10px !important;
}

.res-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.res-box {
  min-width: 99%;
  height: 90%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  background: var(--white-color);
  box-shadow: 0px 0px 4px 0px #00000026;
  padding: 40px 0px;
  border-radius: 8px;
}

.res-box h3 {
  margin-bottom: 0px;
}

body:dir(rtl) .res-box h3 {
  font-size: 19px;
}

.res-box p {
  max-width: 280px;
  text-align: center;
  color: var(--Dark-Grey-color);
  font-size: var(--secondary-fontSize);
}

.res-img-left {
  height: 30px;
  left: -9px;
  top: 3px;
}

.res-img-center img {
  height: 27px;
  left: -15px !important;
  top: 6px;
}

.res-img-right img {
  height: 40px !important;
  left: -12px;
  top: 7px;
}

.res-box img {
  position: relative;
  z-index: 1;
  position: absolute;
  box-shadow: unset !important;
}

.res-icon {
  position: relative;

}

.res-box .bg-cricle {
  background: #d3f26a;
  height: 50px;
  width: 50px;
  display: block;
  border-top-left-radius: 13px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 5px;
}

/* ====  End Reasons  ====*/
/* ====  Start App  ====*/
.app {
  background: var(--white-color);
  padding-top: 100px;
  padding-bottom: 100px;
}

.app-bg {
  position: absolute;
  top: -55px;
  left: -36px;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.app .main-app-content>h2 {
  position: relative;
  z-index: 8;
  text-align: center;
}

.main-app-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  position: relative;
  padding-bottom: 100px;
}

.app-content {
  display: flex;
  justify-content: center;
  gap: 20px;
  width: 100%;
  position: relative;
  z-index: 4;
}

.app-box {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  border: 2px solid var(--primary-color);
  padding: 12px 0px;
  border-radius: 10px;
  width: 250px;
  cursor: pointer;
}

.app-box img {
  height: 40px;
}

.custom-text {
  width: 48%;
}

.custom-text h3 {
  width: 100%;
}

.app-box-img {
  margin-right: 10px;
}

.app-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.app-text span {
  font-size: 15px;
  font-weight: 500;
  display: block;
  width: 100%;
}

.app-text h3 {
  font-weight: bolder;
  margin-bottom: 0px;

}

.notifications {
  padding-top: 80px;
  padding-bottom: 80px;
  background: var(--Background-colors-light);
}

.notif-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 70% !important;
}

.notif-container>img {
  width: 30%;
}

.notifications-content {
  width: 60%;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}

.notifications-content h2 {
  font-size: 58px;
  margin-bottom: 15px !important;
  position: relative;
  width: 100%;
}

.notifications-content h2 img {
  position: absolute;
  height: 70px;
  left: -45px;
  top: -31px;
}

.notifications-content p {
  font-size: 15px;
  width: 81%;
  display: flex;
  align-items: center;
  gap: 5px;
  /* justify-content: center; */
  margin-top: 6px;
}

.notifications .cricle {
  display: block;
  width: 8px;
  height: 8px;
  background: #d3f26a;
  border-radius: 50%;
}

.notif-bottom {
  display: flex;
  justify-content: end;
}

.content-abso {
  width: 90%;
}

.keep {
  max-width: 91%;
}

.notif-img {
  width: 30%;
  position: relative;
}

.notif-img img {
  width: 100%;
}

.notif-img .phoneWifi {
  position: absolute;
  height: 92px;
  width: 92px;
  top: -30px;
  left: -39px;
}

.notifications-bottom p {
  font-size: var(--secondary-fontSize);
  font-weight: 400;
  max-width: 61%;
}

.notif-bg {
  background: var(--white-color);
}

/* ====  End App  ====*/
/* ====  Start StartSection  ====*/
.start {
  background: #eeffb4;
  padding-top: 80px;
  padding-bottom: 80px;
}

.start-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.start-container h2 {
  margin-bottom: 0px !important;
}

.start-container a {
  margin-top: 20px !important;
}

.start-container p {
  font-size: 18px;
  max-width: 32%;
  text-align: center;
}

.start-container a {
  height: 50px;
  font-size: 20px;
  line-height: 25px;
  width: 230px;
  margin-top: 30px;
}

/* ====  End StartSection  ====*/
/* ====  Start footer  ====*/
footer {
  background: var(--primary-color);
  padding-top: 80px;
  padding-bottom: 80px;
}

.foot-container {
  display: flex;
  justify-content: space-between;
  width: 80%;
}

.main-foot-box {
  width: 80%;
}

.foot-box-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 40%;
}

.foot-icon {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 10px !important;
}

.foot-icon div {
  width: 32px;
  height: 32px;
  background: #454545;
  color: var(--white-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.foot-icon div i {
  font-size: var(--primary-fontSize);
}

.foot-box h2 {
  font-size: 20px;
  color: var(--white-color);
}

.logo-fot h2 {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.logo-fot .navbar-brand {
  height: 41px !important;
}

/*===============    12 / 29 ==================*/

.foot-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 20px;
  row-gap: 20px;
  column-gap: 30px;
}

.foot-icon {
  column-gap: 15px !important;
}

.foot-icon a {
  background: #454545;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white-color);
  transition: all ease-in-out 0.4s;
}

.foot-icon a i {
  font-size: 16px !important;
}

.foot-icon a:hover {
  background: #FFFFFF;
  color: #000000;
}

.foot-links-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.foot-links-right>a {
  color: #FCFCFA;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}

/*===============    12 / 29 ==================*/

.foot-links .cricle {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d3f26a;
  display: block;
}

.foot-links-col {
  flex-direction: column;
}

.foot-links-col a {
  color: #ffff;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 10px;
}

.foot-links-col i {
  font-size: var(--secondary-fontSize);
  color: #d3f26a;
}

.main-foot-box {
  display: flex;
  justify-content: space-between;
  width: 50%;
}

/* ====  End footer  ====*/
/* ====  Start Catogery Services  ====*/
.ser-catogery {
  min-height: 70vh;
}

.cat-search {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.cat-search-body {
  width: 50%;
  position: relative;
}

.cat-inp-icon {
  position: relative;
}

.cat-gall-content {
  display: grid;
  grid-template-columns: calc(100% / 4 - 10px) calc(100% / 4 - 10px) calc(100% / 4 - 10px) calc(100% / 4 - 10px);
  justify-content: space-between;
  row-gap: 15px;
  padding-bottom: 50px;
}

.cat-gallary h2 {
  margin: 25px 0px !important;
}

.cat-gallary img {
  width: 100%;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}

.cat-gallary h3 {
  color: var(--primary-color);
  font-size: 22px;
  font-weight: 500;
  margin-top: 15px;
  text-align: center;
}

.cat-search-body i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  font-size: 25px;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 100%;
  font-size: 16px;
  border: 1px solid #ddd;
  width: 100%;
  border-radius: 10px;
  border: 1px solid #D3F26A;
  background: #FFF;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  height: 46px;
  padding-left: 50px;
  outline: none;
}
body:dir(rtl) #myInput {
  padding-right: 20px;
}

#myInput:focus {
  box-shadow: 0px 1px 2px 0px #d2f26aa1, 0px 1px 3px 1px #d2f26aa1 !important;
  border-color: #D3F26A !important;
  outline: none;
}

#myInput::placeholder {
  color: #A9A9A9;
  font-size: 16px;
  font-weight: 400;
}

#myUL {
  padding: 10px 0px 0px 0px;
  background: #fff;
  position: absolute;
  top: 48px;
  width: 100%;
  z-index: 100;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  opacity: 0;
}

#myul-child {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  max-height: 300px !important;
  overflow-y: auto;
  padding: 0px 0px;
  width: 100%;
}

#myul-child::-webkit-scrollbar {
  width: 3px;
  height: 5px;
  background-color: transparent;
}

#myul-child::-webkit-scrollbar-thumb {
  background-color: #ccc;
}

#myul-child .grap {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  background: #F2FFC7;
  display: block;
}

#myul-child li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background: #FFF !important;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: flex;
  align-items: center;
  gap: 15px;
  color: #303030;
  font-size: 14px;
  font-weight: 500;
}

#myul-child li a:hover:not(.header) {
  background-color: #eee;
}

/* ====  End Catogery Services  ====*/

/* ==== Start Services Page   ====*/
.serv-landing {
  background: #FFFFFF;
  padding-top: 140px;
  padding-bottom: 60px;
}

.serv-landing .mySwiper {
  overflow: hidden;
  border-radius: 8px;
  padding-top: 15px;
}

.serv-landing .serv-container {
  flex-direction: row;
}


.service-container {
  display: flex;
  justify-content: space-between;
  flex-direction: row !important;
  align-items: start;
  width: 75%;
}

.serv-slider {
  width: 46%;
  position: relative;
}

.serv-slider swiper-slide {
  cursor: pointer;
  border-radius: 8px;
  padding: 0px !important;

}

.serv-slider swiper-slide img {
  border-radius: 8px;
}

.serv-contant {
  width: 60%;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.serv-head {
  font-size: 42px !important;
  font-weight: 600 !important;
  padding-left: 60px !important;
  line-height: 75px;
}

.text-star {
  width: 100% !important;
  text-align: start;
}

.serv-contant p {
  font-size: 16px;
}

.serv-contant .btn {
  line-height: 22px;
  height: 52px;
  font-size: 19px;
}

.serv-contant .btn:focus {
  border: none;
  box-shadow: none;
}

.serv-pop-image {
  width: 100%;
  display: flex;
  justify-content: center;
}

.serv-pop-image img {
  width: 95%;
}

.serv-popup p {
  margin-top: 30px;
  margin-bottom: 50px !important;
}

.serv-popup .buttons {
  justify-content: center;
  width: 100%;
  padding: 0px;
}

.serv-popup .buttons .close-btn {
  width: 100%;
}

.serv-show-model .modal-box {
  padding: 20px 10px !important;
}

.serv-popup .fa-xmark {
  padding: 35px 15px;
}

/* ==== End Services Page   ====*/
/* ==== Satrt catogery   ====*/
.catogery {
  background: var(--Background-colors-light);
  padding-top: 60px;
  padding-bottom: 60px;
}

.cat-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.catogery swiper-slide {
  border-radius: 8px;
  cursor: pointer;
}

.catogery swiper-slide img {
  border-radius: 8px;
}

.cat-slider {
  padding: 0px 5%;
  position: relative;
  /* transition: padding-left 0.4s linear; */
  border-radius: 8px;
  overflow: hidden;
}

.cat-slider .swiper-container {
  overflow: hidden;
}

.cat-slider .swiper {
  overflow: hidden;
}

.cat-slider swiper-slide {
  overflow: hidden;
  border-radius: 8px;
  padding: 0px 0px !important;
}

.cat-slider swiper-container {
  overflow: hidden;
  border-radius: 8px;
}

.prevBtn,
.nextBtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white-color);
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.prevBtn p,
.nextBtn p {
  width: 30px;
  background: #eeffb4;
  height: 130px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  cursor: pointer;
}

.prevBtn {
  width: 60px;
  background: var(--Background-colors-light);
}

.nextBtn {
  right: 0;
}

.prevBtn {
  transition: 0.4s linear;
  left: -12px;
}

.btn-prev-disable {
  left: -90px;
}

.padding-l-60 {
  padding-left: 60px;
}

/* ==== End catogery   ====*/
/* ==== Start ServicesDetails Page ====*/
.del-serv-container {
  justify-content: space-between;
  width: 61% !important;
}

.del-contant {
  /* align-items: end; */
  width: 42.8%;
}

.services-slider {
  width: 46%;
}

.del-top-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.num-pay {
  display: flex;
  align-items: center;
  gap: 10px;
}

.america>span {
  font-size: 14px;
  color: var(--Dark-Grey-color);
}

.america h2 {
  font-size: 32px;
  margin: 10px 0px !important;
}

.num-pay h2 {
  font-size: 34px;
  font-weight: 500;
}

.num-pay span {
  color: #7e7e7e;
  font-size: 18px;
}

.america p {
  background: #f6f6ef;
  height: 30px;
  width: 65px;
  border-radius: 13px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.america-star {
  color: #646464;
  font-size: 16px;
}

.america p i {
  font-size: 14px;
  color: #ffef5e;
}

.del-char {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px !important;
}

.del-bootom-text .del-char .del-btn {
  background: #f2ffc7;
  border-radius: 82px;
  font-size: 20px;
  width: 102px;
  height: 34px;
  display: block;
  text-align: center;
  line-height: 34px;
  font-weight: 500;
}

.del-contant {
  gap: 39px;
}

.requir {
  font-weight: 500;
  color: #7e7e7e;
  font-size: 20px;
}

.txt-larg {
  max-width: 340px;
  font-size: 20px !important;
  margin-left: 10px;
}

.booknow {
  width: 100%;
  background: var(--primary-color);
  color: var(--white-color);
  display: flex;
  justify-content: center;
  height: 64px;
  align-items: center;
  border-radius: 8px;
  font-size: 26px;
}

/* ==== End ServicesDetails Page   ====*/
/* ==== Start About Page   ====*/
.about-container {
  /* margin-top: 30px; */
  align-items: start !important;
}

.about-content {
  width: 48.7%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: space-between;
  margin-top: 28px;
  width: 57.7%;
}

.about-image {
  width: 39.4%;
  height: 100%;
}

.about-image img {
  height: 100%;
  width: 100%;
}

.about-content div h3 {
  font-size: 40px;
  color: rgba(89, 89, 89, 1);
}

.about-content h2 {
  margin: 25px 0px !important;
  font-size: 60px;
  font-weight: 600;
}

.about-content p {
  font-size: 21px;
  line-height: 41px;
}

.qute {
  color: #d3f26a;
}

/* ==== End About Page   ====*/
/* ==== Start mission  ====*/
.mission {
  background: var(--white-color);
  padding-top: 80px;
  padding-bottom: 80px;
}

.miis-title {
  text-align: center;
}

.miss-content {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.miss-box {
  width: 58%;
  display: flex;
  align-items: center;
  gap: 20px;
}

.miss-box p {
  width: 33px;
  height: 33px;
  background: #d3f26a;
  border-radius: 50%;
}

.miss-box p img {
  width: 33px;
  height: 33px;
}

.miss-box span {
  font-size: 22px;
}

/* ==== End mission   ====*/
/* ==== Start values   ====*/
.values {
  background: var(--Background-colors-light);
  padding-top: 80px;
  padding-bottom: 80px;
}

.val-title {
  margin-bottom: 75px !important;
}

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

.val-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  border-radius: 8px;
  box-shadow: 0px 5px 10px 1px #abbed166;
  width: calc((100% / 4) - 10px);
  position: relative;
  padding-top: 50px;
}

.val-img {
  width: 58px;
  height: 58px;
  background: #eeffb4;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
}

.val-img--star {
  width: 30px;
  height: 30px;
}

.val-img--quality {
  width: 28.99px;
  height: 20.8px;
}

.val-img--convenience {
  width: 26.59px;
  height: 27.05px;
}

.val-img--innovation {
  width: 24.29px;
  height: 34px;
}

.val-box h2 {
  font-size: 26px;
  font-weight: 700;
}

.val-box p {
  font-size: 16px;
  text-align: center;
  max-width: 265px;
  min-height: 130px;
  padding: 0px 8px;
}

.part-container {
  padding-top: 80px;
  padding-bottom: 50px;
}

.partners-slider {
  height: 100px;
}

.partners-slider img {
  width: 40px;
}

.partners .title-small {
  font-size: 16px !important;
  color: var(--Dark-Grey-color);
  font-weight: 400;
  margin: 5px 0px 25px 0px;
}

/* ==== End values   ====*/
/* ==== Start Orderlist   ====*/

.main-slider-text {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 300px);
}


.order-container {
  align-items: start !important;
  justify-content: space-between;
  overflow-y: hidden;
  width: 65% !important;
}

.order-slider {
  width: 400px !important;
  /* background: red !important; */
}

.order-slider swiper-slide img {
  width: 100%;
}

.order-contant span {
  font-size: 14px;
  font-weight: 500;
}

.order-contant h2 {
  font-size: 32px !important;
}

.order-contant {
  gap: 40px !important;
  width: calc(100% - 440px);
}

.scren-order .swiper-pagination {
  background: red !important;
}
.no-order{
  height: 74vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
.no-order img{
  height: 300px;
}
.no-order h2{
  font-size: 24px;
  font-weight: bold;
}

.no-order p{
  color: #7E7E7E;
  font-size: 16px;
  max-width: 300px;
  text-align: center;
}
.no-order a{
  display: block;
  background: #303030;
  color: #ffffff;
  width: 10%;
  height: 45px;
  border-radius: 8px;
  text-align: center;
  line-height: 45px;
}
.scren-order swiper-slide {
  padding: 0px !important;
}

.scren-order swiper-container {
  border-radius: 8px;
  overflow: hidden;
}

.swiper-container {
  height: 100%;
}

.order-contant .num-pay {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.order-contant .num-pay p {
  background: #FFF4D3;
  padding: 2px 15px;
  border-radius: 82px;
}

.order-contant .num-pay p span {
  font-size: 14px;
  font-weight: 500;
  color: #F49003;
}

.order-contant .booknow {
  width: 100% !important;
  /* margin-top: 58px; */
}

.order-contant .txt-larg {
  font-size: 16px !important;
}

.pay-text {
  display: flex;
  align-items: end;
  gap: 10px;
}

.main-orderlist {
  width: 250px;
  position: relative;
  /* padding: 0px 30px; */
}

.slider-line {
  position: absolute;
  height: 100%;
  width: 2px;
  background: #00000036;
  right: -31px;
  top: 0px;
  z-index: 1000;
}

.main-orderlist h2 {
  font-size: 20px;
  margin-bottom: 0px !important;
  padding-left: 3px;
}

.orderlist {
  height: 80vh;
  overflow: hidden;
  padding-bottom: 20px;
}

.swiper-order-con {
  padding: 0px 2px;
}

.orderlist h2 {
  font-size: 20px;
  font-weight: 500;
}

.orderlist-slider {
  height: 100%;
  width: 250px;
  /* background: #cccccc60;
  position: relative; */
}

.orderlist .swiper-slide {
  display: block;
  text-align: start;
  border-radius: 15px;
  /* box-shadow: 0px 1px 2px 0px #0000004D; */
  margin: 0px 0px;
  height: 160px !important;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  /* height: 100% !important; */
  padding: 0px 0px !important;
}

.orderlist .swiper-slide:nth-child(1) {
  margin-top: 10px;
}

.orderlist-box {
  border-radius: 15px;
}

.list-box-title {
  display: flex;
  justify-content: space-between;
  padding: 15px 15px 5px 15px;
}

.title-frist {
  background: #F2FFC7;
  font-size: 14px;
  color: #94A850;
  border-radius: 82px;
  width: 38%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  padding: 4px 0px;
}

.title-frist span {
  font-size: 14px;
  font-weight: 500;
  /* padding: 5px; */
  color: var(--primary-color);
}

.order-price {
  font-size: 14px;
  font-weight: 400;
}

.order-price span {
  font-weight: 500;
  font-size: 16px;
  color: var(--primary-color);
}

.list-box-text {
  padding: 15px 10px;
  border-bottom: 1px solid #dbd6d6;
}

.list-box-text p {
  font-size: 13px;
  font-weight: 400;
}

.list-box-text p span {
  font-size: 14px;
  font-weight: 400;
  color: var(--primary-color) !important;
}

.list-box-text img {
  width: 15px;
  height: 15px;
}

.list-box-text .fa-clock {
  font-size: 15px;
}

.order-pending {
  padding: 10px;
}

.order-pending p {
  font-size: 16px;
}

.order-pending img {
  width: 15px;
  height: 15px;
}

/* ==== Start Register   ====*/
.resgister {
  display: flex;
  height: 100vh;
  align-items: start;
  background-color: var(--Background-colors-light);
  overflow: hidden;
}

.res-image {
  width: calc(50%);
  min-height: calc(100vh + 50px);
  background-image: url(../images/signup.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
}

.res-image .over-ley {
  position: absolute;
  top: 0;
  left: 0;
  background: #000000DB;
  min-height: calc(100vh + 50px);
  width: 100%;
  z-index: 1;
}

.res-image-text {
  min-height: calc(100vh + 50px);
  position: relative;
  color: var(--white-color);
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: start;
  height: 100%;
  width: fit-content;
  flex-direction: column;

}

.res-image-text h2 {
  font-size: 84px;
  font-weight: 700;
  width: fit-content;
}

.res-easy {
  color: #D3F26A;
}

.res-form {
  padding: 70px 30px;
  width: 50%;
  height: 100vh;
  overflow-y: scroll;
}

.res-content-form {
  display: flex;
  width: 100%;
  align-items: start;
  justify-content: space-between;

}

.res-content-form:not(:last-child) {
  margin-bottom: 15px;
}

.res-content-form .form-group {
  width: calc(100% / 2 - 12px);
}

.res-content-form input[type="text"],
input[type="date"],
input[type="number"],
.res-content-form input[type="password"],
.res-content-form input[type="email"] {
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  height: 43px;
}
.res-content-form input[type="text"]:read-only{
  color: #c1c1c1 !important;
  background: #f5f5f5 !important;
}
.bag-white{
  background : #fff !important;
}
.form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label{
  color: unset !important;
}

.form-check-input.is-invalid, .was-validated .form-check-input:invalid{
  border-color: unset !important;
}
.form-check-input.is-invalid~.form-check-label, .was-validated .form-check-input:invalid~.form-check-label{
  color: unset !important;
}
.form-check-input.is-valid, .was-validated .form-check-input:valid {
  border-color: unset !important;
}
.form-check-input.is-valid:checked, .was-validated .form-check-input:valid:checked {
  border-color: unset !important;
  background-color: unset !important;
}
.form-check-input.is-valid:focus, .was-validated .form-check-input:valid:focus{
  box-shadow: unset !important;
}
.res-content-form input:focus {
  box-shadow: 0px 2px 3px 1px #00000026;
  border-color: #1E1E1E;
}
.not-effect input:focus{
  box-shadow: 0px 1px 3px 1px #25252526;
  border-color: #ced4da ;
}

.res-content-form input::placeholder {
  color: #C3C3C3 !important;
  font-size: 16px;
  font-weight: 300 !important;
}

.res-content-form label {
  color: #666666;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}

.form-check--groupe {
  display: flex;
  justify-content: space-between;
}

.form-check--groupe .form-check {
  border: 1px solid #A9A9A9;
  width: calc(100% / 2 - 5px);
  box-shadow: 0px 1px 3px 1px #00000026;
  border-radius: 8px;
  height: 43px;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 10px;
  padding-left: 35px !important;
}

body:dir(rtl) .form-check--groupe .form-check {
  justify-content: space-between;
  padding-right: 15px !important;
  padding-left: 10px !important;
}

.form-check--groupe .form-check-label {
  margin-bottom: 0px;
}

.res-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
}

.res-text p {
  color: #7E7E7E;
  font-size: 20px;
  width: 53%;
  text-align: center;
}

.from-btn {
  display: flex;
  justify-content: center;
  align-items: center;
}
.Reset-it{
  gap: 8px;
  margin-top: 15px;
}
.Reset-it a{
  color: #016BDD;
  font-weight: 700;
}

.from-btn button {
  width: 300px;
  height: 56px;
  border-radius: 8px;
  margin-top: 30px;
  font-size: 20px;
  font-weight: 500;
}

.from-btn button:focus {
  background: var(--btn-bg-color) !important;
  box-shadow: none !important;
}

.form-select {
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  height: 43px;
}
.vervy-inp {
  height: 50px !important;
  padding: 0px !important;

}
.vervy-inp input{
  text-align: center !important;
}
.was-validated .form-control:valid{
padding-right: 0px;
text-align: start;
}

.form-select:focus {
  box-shadow: 0px 2px 3px 1px #00000026;
  border-color: #1E1E1E;
}

.not-flex {
  display: block;
  width: calc(100% / 2 - 12px);
}
body:dir(rtl) .not-flex {
  order: -1;
}


.resgister .form-control {
  width: 100%;
}

.not-flex .btn {
  position: absolute;
  top: 30px;
  height: 100%;

}

.p-rela {
  padding-left: 2px;

}
body:dir(rtl) .p-rela .iti__country-list {
  width: 290px !important;
}



.p-rela button {
  position: relative;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 43px !important;
  gap: 5px;
  background: transparent !important;
  box-shadow: none !important;
  width: fit-content !important;
}

.p-rela .show {
  width: 100%;
}

.p-rela .form-control {
  padding-left: 100px;
}

.p-rela img {
  width: 24px;
  height: 16px;
}

.p-rela span {
  font-weight: 600;
  font-size: 16px;
  color: var(--primary-color);
}

.p-rela .dropdown-toggle::after {
  display: none;
}

.p-rela i {
  font-size: 14px;
  color: #7E7E7E;
}

.or {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

.or>div {
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

}

.or span {
  height: 1px;
  width: 200px;
  background: var(--Dark-Grey-color);
}

.or p {
  position: absolute;
  top: -20px;
  font-size: 18px;
  font-weight: 400;
  background-color: var(--Background-colors-light);
  height: 21px;
  text-align: center;
}

.form-icon {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.form-icon>div {
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-icon>div a {
  width: calc(100% / 3 - 10px);
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #A9A9A9;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0px 0px 3px 1px #00000021;
  color: black;
}
.form-icon>div span {
  width: calc(100% / 2 - 10px);
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #A9A9A9;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0px 0px 3px 1px #00000021;
  color: black;
  background: transparent;
}
.form-select:disabled{
  background: transparent !important;
}
#Create-Btn .btn-primary:disabled{
  background: #393939;
}
#run:disabled{
  background: #393939;
}
.non-hover:hover{
background: transparent !important;
border-color: #A9A9A9 !important;
}
.over-btn:hover{
  background: var(--hover-color);
}
.form-icon img {
  width: 24px;
  height: 24px;
}

.form-icon i {
  font-size: 23px;
}

/* ==== End Register   ====*/
/* ==== Start Verify   ====*/
.ver-from {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 70px 10px !important;
}

.ver-inf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 380px;
  margin: 0px auto;
}

.ver-inf .form-group {
  width: calc(100% / 6 - 10px) !important;
  height: 54px;
}

.ver-inf .form-group input {
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  text-align: center;
  height: 100%;
}

.ver-text {
  margin-bottom: 30px;
}

.ver-text p {
  font-size: 18px;
  width: 85%;
}

.ver-b-text {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.ver-b-text span {
  color: #121212;
  font-size: 14px;
}

.ver-b-text .resend {
  color: #016BDD;
  font-weight: 500;
}

/* ==== End Verify   ====*/
/* ==== Start Password   ====*/
.createpass form {
  width: 100%;
}

.pass-form {
  display: flex;
  justify-content: center;
  align-items: center;
}


.pass-form .input-group {
  position: relative;
  width: 400px;
}

.pass-form span {
  position: absolute;
  right: 0px;
  bottom: 0px;
  height: 43px;
  z-index: 10;
  background: transparent;
  border: none;
}

.pass-form input {
  box-shadow: 0px 1px 3px 1px #25252526;
  border-radius: 8px;
  height: 49px;
  border-radius: 8px !important;
  padding-right: 50px;
}

.pass-form input::placeholder {
  font-size: 19px;
  font-weight: 400;
  color: #C3C3C3;
}

.pass-form input:focus {
  box-shadow: 0px 1px 3px 1px #20202026;
  border-color: #20202026;
}

.createpass .from-btn button {
  width: 400px;
}

/* ==== End Password   ====*/
/* ==== Start Reset Password   ====*/
.resetpassword .res-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* width: 100%; */
}

.resetpassword .res-content-form {
  align-items: center !important;
  justify-content: center !important;
}

.resetpassword .input-group {
  width: 400px;
}

.resetpassword input {
  height: 49px !important;
}

.resetpassword button {
  height: 49px !important;
}

.resetpassword .btn {
  top: 1px;
}

/* ==== End Reset Password   ====*/
/* ==== Start Enter-email   ====*/
.enter-email .res-content-form .form-group {
  width: 100%;
}

/* ==== End Enter-email  ====*/
/* ==== Start errorpage   ====*/
.errorpage {
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

.error-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
}

.lottie-animation {
  width: 100%;
}

.error-content>h2 {
  font-size: 59px;
  font-weight: bold;
}

.error-content p {
  font-size: 16px;
  max-width: 420px;
  line-height: 27px;
  text-align: center;
  margin-bottom: 15px !important;
}

.error-content a {
  font-size: 16px;
  color: var(--white-color);
  background: #3f3f3f;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  border-radius: 20px;
  transition: background-color 0.2s ease-in-out;
}

.error-content a:hover {
  background-color: var(--btn-bg-color);
}

/* ==== End errorpage   ====*/



/*===========    Start country code      ==========*/
.iti {
  width: 100%;
}

.iti__selected-flag {
  z-index: 10;
  /* position: unset; */
}

.iti--separate-dial-code .iti__selected-flag {
  color: white;
  background-color: transparent !important;
}

.iti--separate-dial-code .iti__selected-dial-code {
  color: black;
}

.mySwipercat-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mySwipercat-box h2 {
  font-size: 20px;
  color: var(--primary-color);
}

.iti__country-list {
  width: 400px !important;
  white-space: normal;
}

.pending_call {
  width: 200px;
}


/*===========     End country code      ==========*/
/*===========     Start Order Details     ==========*/
/*===============    12 / 29 ==================*/
.orderDetails-container {
  width: 90% !important;
  min-height: 70vh;
}

.orderDetails .pyment-grap {
  width: 66px !important;
  height: 66px !important;
}

.orderDetails-container .pop-payment-form {
  padding: 0px !important;
}

#close-btn-Adress-close {
  padding-right: 5px !important;
}

/*===============    12 / 29 ==================*/
#close-chat-mob {
  display: none !important;
}

/*===========     End Order Details     ==========*/

@media (max-width: 1661px) {
  .del-serv-container {
    width: 72% !important;
  }

  .del-contant {
    width: 51% !important;
  }
}

@media (max-width: 1605px) {
  .about-content h2 {
    font-size: 54px;
  }

  .order-container {
    width: 70% !important;
  }
}

@media (max-width: 1487px) {
  .order-container {
    width: 80% !important;
  }
}

@media (min-width: 1441px) {

  header {
    width: 70%;
  }

  .main-container {
    width: 70%;
  }

  .foot-container {
    width: 80%;
  }

  .lan-content {
    width: 49%;
  }

  .notif-container {
    width: 60% !important;
  }

  .service-container {
    display: flex;
    justify-content: space-between;
    align-items: start;
    width: 70% !important;
  }

  .services-slider {
    width: 500px !important;
  }

  .serv-contant h2 {
    font-size: 39px;
  }

  .serv-head {
    font-size: 35px;
  }

  .about-content {
    width: 49%;
    margin-top: 40px;
  }

  .about-content p {
    line-height: 44px;
  }

  .miss-box {
    width: 55%;
  }

  .miss-box span {
    font-size: 22px;
  }

  .val-box p {
    max-width: 280px;
    min-height: 130px;
  }

}

@media (max-width: 1440px) {
  .services-slider {
    width: 500px !important;
  }

  .serv-contant h2 {
    font-size: 39px;
  }

  .serv-head {
    font-size: 30px;
  }

  .order-container {
    width: 90%;
  }
}

@media (max-width: 1366px) {}

@media (max-width: 1366px) {
  .scren-order .order-container {
    width: 85% !important;
  }

  .del-serv-container {
    width: 73% !important;
  }

}

@media (max-width: 1356px) {
  .lan-content h2 {
    font-size: 50px;
  }

  .serv-contant h2 {
    font-size: 37px;
  }

  .serv-head {
    font-size: 29px;
  }

  .services-slider {
    width: 500px !important;
  }

  .service-container {
    width: 80%;
  }

  .about-content p {
    font-size: 18px;
    line-height: 33px;
  }
}

@media (max-width: 1250px) {
  /*===============    12 / 29 ==================*/

  .del-serv-container {
    /* background: red; */
    width: 80% !important;
  }

  .del-contant {
    width: 51% !important;
  }

  .main-foot-box {
    width: 60%;
  }

  /*===============    12 / 29 ==================*/

  .services-slider {
    width: 500px !important;
  }

  .del-contant {
    width: 43%;
  }

  .main-slider-text {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .order-slider {
    width: 550px !important;
  }

  .order-contant {
    width: 80%;
  }

  .order-contant .txt-larg {
    max-width: 100% !important;
  }

  .main-orderlist {
    width: 40%;
  }

  .orderlist-slider {
    width: 300px;
  }

  .orderlist {
    height: 109vh;
    overflow: hidden;
    padding-bottom: 20px;
  }

  .order-container {
    width: 80% !important;
  }

  .main-slider-text {
    /* width: 40%; */
  }

  .main-orderlist {
    display: flex;
    flex-direction: column;
    align-items: end;
  }

  .main-orderlist h2 {
    align-self: center;
    width: 250px;
  }

  .order-contant .booknow {
    width: 100% !important;
  }

}

@media (max-width: 1200px) {
  body:dir(rtl) .p-rela .iti__country-list {
    width: 610px !important;
  }
  /*===============    12 / 29 ==================*/
  .pop-form-Profile form {
    height: 300px;
  }

  .cat-search-body {
    width: 60%;
  }

  .main-pass-form {
    gap: 0px;
  }

  /*===============    12 / 29 ==================*/

  .main-container {
    width: 85%;
  }

  header {
    width: 85%;
  }

  .notif-container {
    width: 70% !important;
  }

  .start-container p {
    max-width: 42%;
  }

  .serv-contant h2 {
    font-size: 36px;
  }

  .serv-head {
    font-size: 28px;
  }

  .about-image {
    width: 37.4%;
  }

  .about-content {
    width: 55%;
    margin-top: 20px;
  }

  .about-content h2 {
    font-size: 47px;
  }

  .about-content div h3 {
    font-size: 35px;
  }

  .res-image-text h2 {
    font-size: 60px;
  }

  /* .res-form{
    width: 100%;
  } */
  .res-content-form {
    flex-direction: column;
    width: 100%;
  }

  .pop-form {
    margin-top: 30px;
    max-height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 20px;
  }

  .change-pass {
    padding-right: 0px !important;
    max-height: unset !important;
    overflow: auto !important;

  }

  .pop-form::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: var(--white-color);
  }

  .pop-form::-webkit-scrollbar-thumb {
    background-color: #ccc;
  }



  .modal-box {
    padding: 30px 0px 30px 20px;
  }

  .resetpassword .res-content-form .input-group {
    width: 400px !important;
  }

  .resetpassword .res-content-form .non-w {
    width: 100% !important;
  }

  .form-group,
  .input-group {
    width: 100% !important;
    margin-bottom: 20px;
  }

  .res-content-form {
    margin-bottom: 0px !important;
  }

  .adress-content {
    margin-bottom: 0px !important;
  }

  .adress-content .form-group {
    width: 100% !important;
    margin-bottom: 0px !important;
  }

  .res-content-form .form-group {
    /* margin-bottom: 0px !important; */
  }

  .res-content-form .marg-b {
    margin-bottom: 20px !important;
  }

  .resetpassword .from-btn button {
    margin-top: 0px;
  }

  .resetpassword .ver-text h1 {
    font-size: 35px;
  }

  .res-text {
    margin-bottom: 40px;
  }

  .res-text p {
    width: 75%;
    font-size: 18px;
  }

  #modal-box-one {
    width: 550px;
  }

  #modal-box-pass {
    width: 450px !important;
    padding-left: 0px !important;
    padding: 20px 18px !important;
  }

  .change-pass form {
    padding-left: 1px;
  }

  #modal-box-logout {
    padding: 30px 20px;
  }

  .pop-book-form {
    padding: 2px 0px !important;
  }

  .book-popup-content {
    max-height: 434px;
    overflow-y: scroll;
    padding: 20px 15px 20px;
    /* padding-bottom: 200px !important; */
  }

  .pop-book-form {
    padding: 30px 0px;
  }

  .book-popup-content::-webkit-scrollbar {
    width: 3px;
    height: 5px;
    background-color: transparent !important;
  }

  .book-popup-content::-webkit-scrollbar-thumb {
    background-color: #ccc !important;
    scroll-padding: 200px !important;
  }

  #show-model-booking .buttons {
    padding-top: 10px !important;
  }

  .mar-b-o {
    margin-bottom: 0px !important;
  }

  .cat-gallary h3 {
    font-size: 20px;
  }
  .createpass .from-btn button{
    width: 100%;
  }

}

@media (max-width: 1140px) {
  .del-serv-container {
    width: 85% !important;
  }

  /*===============    12 / 29 ==================*/

  .serv-head {
    font-size: 35px !important;
  }

  /*===============    12 / 29 ==================*/

}

@media (max-width: 1110px) {
  .landing {
    padding-top: 150px;
  }

  .about-image {
    width: 37.4%;
  }

  .about-content {
    width: 56%;
    margin-top: 20px;
  }

  .about-content h2 {
    font-size: 47px;
  }

  .about-content div h3 {
    font-size: 38px;
  }

  .about-content p {
    font-size: 17px;
    line-height: 29px;
  }

  .order-container {
    width: 92% !important;
  }

  .order-contant {
    width: 90% !important;
  }
}

@media (max-width: 1100px) {
  .pop-payment-form{
    padding: 60px 27px 23px;
  }
  .serv-head {
    font-size: 35px;
    line-height: 60px;
  }

  .services-slider {
    width: 433.5px !important;
  }

  .del-contant {
    gap: 22px;
    width: 49%;
  }

  .txt-larg {
    font-size: 18px !important;
  }

  .booknow {
    height: 60px;
    font-size: 23px;
  }

  .serv-contant {
    gap: 36px;
  }

  .serv-contant h2 {
    font-size: 32px;
  }

  .serv-head {
    font-size: 25px;
    padding-left: 44px;
  }

  .cat-container {
    gap: 13px;
  }

  .miss-box {
    width: 65%;
  }

  .miss-box span {
    font-size: 20px;
  }

  .val-box p {
    max-width: 265px;
    min-height: 150px;
  }

  .serv-contant .btn {
    font-size: 16px;
    height: 50px;
  }

  .cat-gall-content {
    display: grid;
    grid-template-columns: calc(100% / 3 - 15px) calc(100% / 3 - 15px) calc(100% / 3 - 15px);
    justify-content: space-between;
    row-gap: 22px;
    padding-bottom: 50px;
  }

}

@media (max-width: 1060px) {

  /*===============    12 / 29 ==================*/
  .cat-search-body {
    width: 70%;
  }

  .main-foot-box {
    width: 65%;
  }

  /*===============    12 / 29 ==================*/
  .scren-order .main-slider-text {
    width: 470px;
  }

  .scren-order .order-slider {
    width: 470px !important;
  }

  .scren-order .order-contant {
    width: 100% !important;
  }

  .scren-order .del-serv-container {
    flex-direction: row !important;
  }

  .scren-order swiper-slide {
    /* width: 100% !important; */
  }

  .lan-content h2 {
    font-size: 45px;
  }

  .res-content {
    gap: 20px;
  }

  .res-box h3 {
    font-size: 20px;
  }

  .res-box p {
    padding: 0px 10px;
  }

  .about-content {
    margin-top: 10px;
  }

  .about-content div h3 {
    font-size: 31px;
  }

  .about-content h2 {
    font-size: 50px;
  }

  .about-content {
    width: 58%;
  }
}

@media (max-width: 932px) {
  .scren-order .main-slider-text {
    width: 410px !important;
  }

  .scren-order .order-slider {
    width: 410px !important;
  }
}

@media (min-width: 992px) {
  .dis-nne {
    display: none;
  }

  .nav-icon {
    display: none;
  }

  .order-gallary {
    display: none;
  }

}

@media (max-width: 991px) {
  body:dir(rtl) .p-rela .iti__country-list {
    width: 610px !important;
  }
  /*===============    12 / 29 ==================*/
  .nav-icon {
    cursor: pointer;
  }

  .del-contant {
    width: 80% !important;
  }

  .del-top-text {
    width: 100%;
  }

  .logo-fot h2 {
    justify-content: start !important;
  }

  .foot-container {
    flex-direction: column !important;
    gap: 40px;
  }

  .main-foot-box {
    width: 100%;
  }

  .orderlist {
    display: none;
  }

  .serv-landing .serv-container {
    flex-direction: column !important;
    /* background: red; */
  }

  .iti__country-list {
    max-width: 300px;
  }

  .main-container {
    width: 92%;
  }

  .Process .payment-box-content {
    background: #ffffff !important;
  }

  .Process .pop-payment-form {
    display: none;
  }
  .Process .Order-details-Mobile{
    display: flex;
    gap: 10px;
    height: unset !important;
  }
  .main-orderlist {
    width: 100%;
    order: 1;
  }

  .main-orderlist h2 {
    width: 100%;
  }

  .payment-box {
    padding: 0px;
  }

  #payment-box-content {
    padding: 0px 10px 20px 10px !important;
  }

  .order-gallary {
    width: 100%;
    display: grid;
    grid-template-columns: calc(50% - 7px) calc(50% - 7px);
    padding: 20px 10px;
    justify-content: space-between;
    row-gap: 14px;
  }

  .order-gallary>a {
    color: #000000;
  }

  .orderlist-box {
    background: #ffff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15) !important;
  }

  .serv-slider {
    width: 100%;
  }

  .serv-contant {
    gap: 28px;
    width: 68%;
    order: 1;
    align-items: center;
  }

  .serv-head {
    text-align: center;
  }

  .cat-search-body {
    width: 60%;
  }

  .serv-landing {
    padding-bottom: 40px;
  }

  .cat-search {
    margin-top: 40px;
  }

  /*===============    12 / 29 ==================*/

  .header-right {
    display: none !important;
  }

  .container-fluid {
    width: 100%;
  }

  .notif-container {
    width: 85%;
  }

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

  .lan-content h2 {
    font-size: 40px;
  }

  .content-abso {
    width: 100%;
  }

  .notifications-content h2 {
    font-size: 36px;
  }

  .notifications-content p {
    font-size: var(--secondary-fontSize);
    width: 100%;
  }

  .lan-content {
    width: 60%;
  }

  .dis-none {
    display: none;
  }

  .start-container p {
    max-width: 59%;
  }

  .lan-content .btn {
    height: 47px;
    width: 190px;
    font-size: 16px;
    line-height: 22px;
  }

  .serv-head {
    font-size: 32px;
  }

  .booknow {
    width: 100%;
    height: 50px;
    font-size: 18px;
  }

  .del-contant {
    gap: 20px !important;
    width: 41%;
  }

  .txt-larg {
    font-size: 16px !important;
    max-width: 80% !important;
  }

  .services-slider {
    /* height: 387.4px; */
    width: 80% !important;
  }



  .serv-contant h2 {
    font-size: 32px;
  }

  .serv-contant .btn {
    font-size: 15px;
    height: 48px;
  }

  .serv-head {
    font-size: 24px;
  }

  .about-image {
    width: 39.4%;
  }

  .about-content {
    margin-top: 25px;
    width: 52%;
  }

  .about-content div h3 {
    font-size: 28px;
  }

  .about-content h2 {
    font-size: 40px;
  }

  .about-content p {
    font-size: 16px;
    line-height: 30px;
  }

  .miss-box {
    width: 59%;
  }

  .miss-box span {
    font-size: 16px;
  }

  .val-content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    row-gap: 50px;
  }

  .val-box {
    flex-wrap: wrap;
    width: calc((100% / 2) - 30px);
  }

  .val-box p {
    max-width: 90%;
    min-height: 120px;
  }

  .resetpassword .ver-text h1 {
    font-size: 30px;
  }

  .resetpassword .res-content-form .input-group {
    width: 70% !important;
  }

  .createpass .from-btn button {
    width: 70%;
  }
  .pass-form{
    width: 70%;
    margin: 0px auto;
  }
  .pass-inp{
  width: 100% !important;
  }


  .order-slider {
    width: 400px !important;
  }

  .order-contant {
    width: 400px !important;
  }

  .main-slider-text {
    width: 480px !important;
  }

  .order-slider {
    width: 480px !important;
  }

  .order-contant h2 {
    font-size: 22px !important;
  }

  .del-bootom-text .del-char .del-btn {
    font-size: 20px;
  }

  .order-contant .requir {
    font-size: 16px;
  }

  .order-contant .txt-larg {
    font-size: 14px !important;
  }

  .booknow {
    font-size: 17px;
  }

  .main-slider-text {
    gap: 20px;
  }

  .order-contant .num-pay p span {
    font-size: 13px;
  }

  .main-slider-text .del-contant {
    gap: 17px !important;
  }

  .del-serv-container {
    flex-direction: column !important;
  }

}

@media (max-width: 900px) {
  .landing {
    padding-top: 120px;
  }

  .about-image {
    width: 46.4%;
  }

  .about-content {
    width: 47%;
  }

  .about-content div h3 {
    font-size: 25px;
  }

  .about-content h2 {
    font-size: 34px;
  }

  .about-content p {
    font-size: 16px;
    line-height: 27px;
  }

  .scren-order .orderlist-slider {
    width: 100%;
  }

  .scren-order .orderlist {
    width: 100% !important;
  }
}

@media (max-width: 983px) {
  .res-text p {
    width: 90%;
    font-size: 18px;
  }

  .res-image-text h2 {
    font-size: 55px;
  }

  .from-btn button,
  .or>div,
  .form-icon>div {
    width: 260px;
  }

  .from-btn button {
    width: 300px;
    height: 50px;
    margin-top: 0px;
    font-size: 18px;
  }

  .form-icon>div a {
    width: calc(100% / 3 - 10px);
    height: 40px;
  }

  .form-icon i {
    font-size: 20px;
  }

  .form-icon img {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 888px) {
  .main-slider-text {
    width: 420px !important;
  }

  .order-slider {
    width: 420px !important;
  }

  .order-contant {
    width: 420px !important;
  }

  /*===============    12 / 29 ==================*/
  .serv-contant {
    width: 80%;
  }
  .ver-inf{
    width: 350px;
  }
  .ver-inf .form-group {
    width: calc(90% / 6 - 0px) !important;
    height: 54px;
  }
  /*===============    12 / 29 ==================*/
  .ver-from {
    padding: 70px 5px !important;
  }
  
}

@media (max-width: 840px) {
  .main-orderlist {
    align-items: start;
  }

  .main-orderlist h2 {
    align-self: start;
    width: 100%;
  }

  .orderlist-slider {
    width: 300px;
  }

  /*===============    12 / 29 ==================*/

  .main-orderlist {
    /* width: 35%; */
  }

  /*===============    12 / 29 ==================*/

}

@media (max-width: 800px) {

  /*===============    12 / 29 ==================*/
  .serv-contant {
    width: 90%;
  }

  .cat-search-body {
    width: 70%;
  }

  /*===============    12 / 29 ==================*/
}

@media (max-width : 796px) {

  .orderlist-slider {
    width: 250px;
  }

  .scren-order .main-slider-text {
    width: 350px !important;
  }

  .scren-order .order-slider {
    width: 350px !important;
  }

  .cat-gall-content {
    display: grid;
    grid-template-columns: calc(100% / 2 - 15px) calc(100% / 2 - 15px);
    justify-content: space-between;
    row-gap: 20px;
    padding-bottom: 50px;
  }

}

@media (max-width: 820px) {
  .serv-head {
    font-size: 20px;
  }

  .about-image {
    width: 49.4%;
  }

  .res-text p {
    width: 95%;
  }

  .resetpassword .ver-text h1 {
    font-size: 28px;
  }

  .resetpassword .res-text p {
    font-size: 15px;
    margin-top: 10px;
  }

  .txt-larg {
    max-width: 90% !important;
  }
}

@media (max-width: 769px) {
  .services-title h2{
    font-size: 23px;
  }
  .modal-box .buttons .close-btn a {
    line-height: 40px;
  }
  .notif-container>img ,
  .notif-img{
    width: 44%;
}
  .del-contant {
    width: 90% !important;
  }

  .notif-container {
    width: 84% !important;
  }

  .landing .lan-container {
    flex-direction: column;
    gap: 30px;
  }

  .lan-content {
    order: 1;
    gap: 0px;
  }

  .lan-content p {
    margin: 20px 0px !important;
  }

  .lan-content .second {
    margin-top: 20px;
  }

  .lan-image {
    width: 65.4%;
  }

  .lan-content {
    width: 100%;
    align-items: center;
  }

  .lan-content h2 {
    font-size: 60px;
  }

  .services,
  .reasons,
  .app,
  .notifications,
  .start,
  footer {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .notif-bg {
    padding-bottom: 0px !important;
  }

  .main-app-content {
    padding-bottom: 70px;
  }

  .main-swiper {
    max-height: 273.5px;
    height: unset;
  }

  .app-content {
    gap: 10px;
    flex-direction: column;
    align-items: center;
  }

  .notif-container {
    flex-direction: column;
    gap: 30px;
  }

  .notifications-content {
    width: 74%;
    text-align: center;
    align-items: center;
  }

  .notifications-content h2 {
    width: fit-content;
  }

  .notifications-content p {
    justify-content: center;
  }

  .notif-img {
    order: 1;
  }

  .content-abso {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .notif-img .phoneWifi {
    height: 70px;
    width: 70px;
    top: -25px;
    left: -41px;
  }

  .start-container h2 {
    margin-bottom: 15px !important;
  }

  .start-container p {
    max-width: 76%;
    font-size: 16px;
  }

  footer {
    position: relative;
  }

  .foot-icon {
    width: 100%;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
  }

  .foot-container {
    flex-direction: column;
  }

  .main-foot-box {
    /* margin-left: 43px; */
    width: 100%;
    margin-bottom: 20px;
  }

  .app-bg {
    position: absolute;
    top: -55px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .serv-head {
    font-size: 18px;
    padding-left: 30px;
  }

  .serv-contant {
    gap: 13px;
  }

  .serv-contant p {
    font-size: 14px;
  }

  .serv-contant .btn {
    height: 43px;
    font-size: 15px;
    padding: 0px;
  }

  .serv-contant .lan-link {
    /* width: 175px; */
  }

  .serv-landing {
    padding-top: 120px;
    padding-bottom: 40px;
  }

  .service-container {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .services-slider {
    width: 90% !important;
    height: unset !important;
  }

  .del-contant {
    width: 90%;
    gap: 30px;
  }

  .txt-larg {
    max-width: 100%;
  }

  .serv-contant {
    gap: 22px;
  }

  .serv-contant h2 {
    /* font-size: 19px; */
  }

  .about-image {
    width: 290px;
  }

  .about-content {
    width: 50%;
  }

  .about-container {
    flex-direction: row !important;
  }

  .about-content div h3 {
    font-size: 20px;
  }

  .about-content h2 {
    font-size: 28px;
    margin: 18px 0px !important;
  }

  .about-content p {
    font-size: 13px;
    line-height: 21px;
  }

  .miss-box {
    width: 68%;
  }

  .val-content {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    row-gap: 50px;
  }

  .val-box {
    flex-wrap: wrap;
    width: calc((100% / 2) - 20px);
  }

  .val-box p {
    max-width: 95%;
    min-height: 120px;
    font-size: 14px;
  }

  .val-title {
    margin-bottom: 65px !important;
  }

  .resgister {
    position: relative;
  }

  .res-image-text {
    display: none;
  }

  .res-form {
    position: relative;
    z-index: 10;
    width: 100% !important;
  }

  .ava-image {
    display: grid;
    grid-template-columns: calc(100% / 5) calc(100% / 5) calc(100% / 5);
  }

  #modal-box-two {
    width: 500px !important;
  }

  #modal-box-one {
    width: 550px;
  }

  .modal-box .buttons .close-btn {
    height: 40px;
    width: 135px;
  }

  .serv-popup .buttons .close-btn {
    /* height: 40px; */
    width: 100% !important;
  }

  #modal-box-logout {
    width: 500px;
  }

  #modal-box-process {
    width: 500px;
    max-width: unset !important;
  }

  .res-image {
    display: none;
  }

  .main-slider-text {
    width: 400px !important;
  }

  .order-slider {
    width: 360px !important;
  }

  .order-contant {
    width: 360px !important;
  }

  .orderlist-slider {
    width: 280px;
  }

  .chat {
    bottom: 18px;
    right: 81px;
    min-width: 330px;
  }

  .chat-icon,
  .chat-close {
    bottom: 18px;
    right: 18px;
    width: 45px;
    height: 45px;
  }

  .chat-icon img {
    width: 22px;
    height: 22px;
  }

  .chat-icon i {
    font-size: 22px;
  }

  .chat-row p {
    max-width: calc(100% - 50px);
    padding: 20px;
  }
}

@media (max-width: 742px) {
  .orderlist-slider {
    width: 260px;
  }

}

@media (max-width: 742px) {
  .orderlist-slider {
    width: 240px;
  }
}

@media (max-width : 718px) {
  .scren-order .main-slider-text {
    display: none;
  }

  .scren-order .orderlist {
    display: none;
  }

  .scren-order .main-orderlist {
    width: 100% !important;
  }

  /*===============    12 / 29 ==================*/

  .order-gallary {
    width: 100%;
    display: grid;
    grid-template-columns: calc(50% - 7px) calc(50% - 7px);
    padding: 20px 10px;
    justify-content: space-between;
    row-gap: 14px;
  }

  .serv-contant {
    width: 100%;
  }

  /*===============    12 / 29 ==================*/

  .order-gallary .orderlist-box {
    background: var(--white-color);
    box-shadow: 0px 1px 2px 1px #ccc;
  }
}


@media (max-width: 650px) {
  .order-gallary {
    width: 100%;
    display: grid;
    grid-template-columns: 100%;
    padding: 20px 10px;
    justify-content: space-between;
    row-gap: 20px;
  }
}

@media (max-width: 610px) {
  .pending_call_main > h2{
    text-align: center;
  }
  .pending_call_main > p{
    text-align: center;
  }
  .orderlist {
    display: none;
  }

  .main-slider-text {
    display: none;
  }

  /*=========    custom gallary      =========*/
  /*===============    12 / 29 ==================*/
  .america {
    text-align: start !important;
  }

  /*===============    12 / 29 ==================*/

  .main-orderlist {
    width: 100% !important;
  }

  .cat-search-body {
    width: 80%;
  }

  /*===============    12 / 29 ==================*/

  /* ==== End Orderlist   ====*/

  .cat-gall-content {
    display: grid;
    grid-template-columns: 90%;
    justify-content: center;
    row-gap: 20px;
    padding-bottom: 50px;
  }

  body:dir(rtl) .cat-gallary>h2 {
    padding-right: 30px;
  }

}

@media (max-width: 688px) {
  .about-image {
    max-width: 277px;
    width: unset;
  }

  .about-content {
    margin-top: 15px;
    width: 52%;
  }

  .about-content div h3 {
    font-size: 16px;
  }

  .about-content h2 {
    font-size: 23px;
    margin: 12px 0px !important;
  }

  #modal-box-booking {
    width: 500px !important;
  }

  .main-slider-text {
    width: 340px !important;
  }

  .order-slider {
    width: 340px !important;
  }

  .order-contant {
    width: 340px !important;
  }

  .order-contant span {
    font-size: 12px;
  }

}

@media (max-width: 650px) {

  .main-slider-text {
    width: 300px !important;
  }

  .order-slider {
    width: 300px !important;
  }

  .order-contant {
    width: 300px !important;
  }

}


@media (max-width: 600px) {

  .services-title h2{
    margin-left: 43px;
    font-size: 20px;
  }
  .mySwipercat-box h2{
    font-size: 18px;
  }
  .foot-links-col{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .modal-box .buttons .close-btn a {
    font-size: 16px;
  }

  .adress-popup-btn h2 {
    font-size: 18px;
  }

  #close-btn-Adress {
    font-size: 18px !important;
    width: 100%;
  }

  .adressBtn {
    height: 80px;
  }

  .slected-Adress {
    padding: 0px 5px !important;
  }

  .main-adress-popup {
    padding: 0px 10px !important;
  }

  .close-btn-adress {
    width: 60% !important;
  }

  #close-btn-Adress-close {
    padding-right: 5px !important;
  }

  #close-btn-FollowAdress {
    font-size: 18px !important;
  }

  .main-swiper {
    /* padding: 0px 60px; */
    max-height: unset;
  }

  .main-foot-box {
    width: 100%;
    flex-direction: column;
    /* justify-content: start; */
    gap: 60px;
  }

  .main-swiper {
    /* padding: 0px 35px; */
  }

  .landing {
    padding-bottom: 70px;
  }

  .lan-content h2 {
    font-size: 50px;
  }

  .lan-content .btn {
    height: 45px;
    width: 150px;
    font-size: 16px;
    line-height: 18px;
  }

  .service-container {
    flex-direction: column;
    gap: 30px;
  }

  .serv-contant {
    order: 1;
  }

  .serv-landing {
    padding-top: 120px;
  }

  .serv-slider {
    width: 90%;
  }

  .serv-contant {
    width: 90%;
    align-items: center;
    text-align: center;
  }

  .serv-head {
    font-size: 30px;
    padding-left: 41px;
  }

  .serv-contant .lan-link {
    /* width: 230px; */
  }

  .serv-contant .btn {
    /* height: 51px; */
    /* font-size: 20px; */
  }

  .serv-contant p {
    font-size: 16px;
    max-width: 300px;
    line-height: 30px;
  }

  .del-contant {
    align-items: start;
    width: 90%;
  }

  .del-bootom-text {
    width: 100%;
  }

  .del-top-text {
    width: 100%;
  }

  .del-char {
    width: 100%;
    max-width: unset !important;
  }

  .txt-larg {
    max-width: unset !important;
    width: 100%;
    text-align: start;
  }

  .booknow {
    width: 100%;
  }

  #modal-box-two {
    width: 400px !important;
  }
}

@media (max-width: 600px) {
  .lan-content h2 {
    font-size: 40px;
  }

  .landing {
    padding-bottom: 50px;
  }

  .serv-landing .serv-container {
    flex-direction: column;
  }

  .services,
  .reasons,
  .app,
  .notifications,
  .start,
  footer {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .lan-content .second {
    margin-top: 9px;
  }

  .main-title {
    font-size: 30px;
    margin-bottom: 20px !important;
  }

  .start-container a {
    height: 45px;
    width: 150px;
    font-size: 16px;
    line-height: 18px;
  }

  .main-app-content {
    padding-bottom: 40px;
  }

  .res-box {
    padding: 40px 0px 10px;
  }

  .res-box p {
    min-height: 63px;
  }

  .notifications-content {
    width: 90%;
  }

  .cat-slider {
    padding: 0px 42px;
  }

  .serv-container {
    flex-direction: column;
  }

  .serv-contant h2 {
    font-size: 30px;

  }

  .about-container {
    flex-direction: column !important;
    align-items: center;
    gap: 30px !important;
  }

  .about-image {
    max-width: unset;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .about-image img {
    width: 70%;
  }

  .about-content {
    width: 100%;
    order: 1;
    text-align: center;
    align-items: center;
  }

  .about-content div h3 {
    font-size: 32px;
  }

  .about-content h2 {
    font-size: 45px;
  }

  .about-content p {
    font-size: 16px;
    line-height: 29px;
    max-width: 84%;

  }

  .mission,
  .values {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .miss-box {
    width: 100%;
  }

  .val-content {
    gap: 13px;
    row-gap: 50px;
  }

  .val-box {
    width: calc((100% / 2) - 13px);
  }

  .val-title {
    margin-bottom: 60px !important;
  }

  .part-container {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .lottie-animation {
    width: 80%;
  }

  .error-content>h2 {
    font-size: 47px;
  }

  .error-content p {
    max-width: 326px;
    line-height: 25px;
  }

  aside {
    width: 300px;
  }

  .modal-box {
    max-width: 80%;
  }

  .modal-box .buttons .close-btn {
    height: 35px;
    width: 120px;
    font-size: 16px;
  }

  #modal-box-one {
    width: 450px;
  }

  #modal-box-pass {
    width: 450px !important;
  }

  #modal-box-booking {
    width: 450px !important;
  }

  #show-model-vai .book-popup-content {
    padding: 20px 20px 20px !important;
  }

  #modal-box-process {
    width: 450px;
    max-width: unset !important;
  }

  .main-foot-box {
    margin: 0px !important;
    gap: 30px;
  }

  .foot-icon {
    justify-content: center !important;
  }

  .foot-links {
    justify-content: start;
  }

  footer {
    padding-top: 70px;
    padding-bottom: 90px;
  }


  .explore-container {
    width: 100% !important;
  }


  .cat-slider {
    padding: 0px 0px;
    overflow: auto;
  }

  .cat-slider swiper-container {
    overflow: auto;
  }

  .cat-slider swiper-slide {
    width: 66.5%;
  }

  .cat-slider swiper-slide:first-child {
    margin-left: 43px;
  }

  .cat-container {
    width: 100%;
  }

  .chat-screen {
    display: flex;
  }
}

@media (max-width: 530px) {
  .title-frist {
    background: #F2FFC7;
    font-size: 16px;
  }

  .list-box-text p span {
    font-size: 16px;
  }

  .foot-icon {
    column-gap: 30px;
  }
}

@media (max-width: 500px) {
  .notif-container>img ,
  .notif-img{
    width: 50%;
}
  /*===============    12 / 29 ==================*/
  .chat {
    position: fixed;
    z-index: 100;
    right: 50%;
    transform: translateX(50%);
    bottom: 30px;
    width: 80%;
    min-width: 350px;
    height: 524px;
    z-index: 10000;
    overflow: hidden;
  }

  #close-chat-mob {
    display: block !important;
  }

  .main-time-picker {
    position: absolute;
    bottom: -60%;
    background: white;
    z-index: 100;
    left: -10px;
    width: calc(100% + 20px);
  }

  .serv-contant {
    gap: 16px !important;
  }

  .serv-head {
    line-height: 40px;
    font-size: 28px !important;
  }

  .serv-landing {
    padding-bottom: 30px;
  }

  .cat-search {
    width: 100%;
  }

  /*===============    12 / 29 ==================*/

  .lan-content h2 {
    font-size: 35px;
  }

  .lan-content p {
    margin: 16px 0px !important;
    text-align: center;
  }

  .main-title {
    font-size: 25px;
  }

  .notifications-content h2 {
    font-size: 30px;
  }

  .res-box h3 {
    font-size: 18px;
  }

  .res-box {
    padding: 40px 0px 20px;
  }

  .notifications-content {
    width: 100%;
  }


  .serv-head {
    font-size: 25px;

  }

  .serv-contant p {
    font-size: 16px;
    max-width: 280px;
    line-height: 30px;
  }

  .catogery {
    background: var(--Background-colors-light);
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .txt-larg {
    font-size: 14px !important;
    line-height: 22px;
  }

  .del-bootom-text .del-char .del-btn {
    font-size: 16px;
  }

  .requir {
    font-size: 16px;
  }

  .serv-head {
    padding-left: 43px;
  }

  .services-slider {
    width: 100% !important;
  }

  .del-contant {
    width: 100% !important;
  }

  .serv-contant h2 {
    font-size: 24px;
  }

  .about-image img {
    width: 75%;
  }

  .about-content div h3 {
    font-size: 30px;
  }

  .about-content h2 {
    font-size: 39px;
  }

  .val-content {
    row-gap: 50px;
  }

  .val-box {
    width: calc((100% / 1));
    box-shadow: 0px 0px 10px 1px #abbed166;
  }

  .val-box h2 {
    font-size: 20px;
  }

  .val-box p {
    max-width: 90%;
    min-height: 80px;
  }

  .mission,
  .values {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .lottie-animation {
    width: 90%;
  }

  .error-content>h2 {
    font-size: 40px;
  }

  .error-content p {
    max-width: 294px;
    line-height: 23px;
  }

  .error-content a {
    font-size: 14px;
    width: 178px;
    height: 40px;
  }

  aside {
    width: 270px;
  }

  .ava-image {
    display: grid;
    grid-template-columns: calc(114% / 4) calc(152% / 4);
        column-gap: 60px;
  }

  #modal-box-two {
    width: 300px !important;
  }

  #modal-box-one {
    width: 400px;
  }

  #modal-box-pass {
    width: 400px !important;
  }

  #modal-box-logout {
    width: 400px;
  }

  .vai-gallary .vai-box {
    width: calc(100% / 1);
  }

  #modal-box-vai .buttons .close-btn {
    font-size: 17px;
  }

  #modal-box-vai .buttons button {
    margin: 0px !important;
    width: calc(100% / 2 - 10px) !important;
    height: 39px !important;
  }

  #modal-box-booking-lan {
    width: 300px !important;
  }

  .booking-lan-image {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }

  .booking-lan-content p {
    font-weight: 500;
    font-size: 14px;
    padding: 20px 0px 30px;
  }
  .booking-lan-content img{
    width: 80%;
  }
  #modal-box-booking-lan button {
    width: 80% !important;
    height: 40px !important;
    font-size: 16px !important;
  }

  #modal-box-booking-lan .modal-head {
    padding: 11px 10px;
  }

  #modal-box-booking .buttons .close-btn {
    width: 100% !important;
    height: 47px !important;
  }

  .book-popup-content {
    overflow-x: hidden;
  }

  .book-popup-box p {
    font-size: 14px;
  }

  #modal-box-process {
    width: 380px;
    max-width: unset !important;
  }

  .process-foot>div {
    justify-content: center;
  }

  .process-foot button {
    width: 87% !important;
    height: 43px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
  }

  .ava-image img {
    width: 95px;
    height: 95px;
  }

  .process-content h3 {
    font-size: 18px !important;
  }

  .process-content p {
    font-size: 14px !important;
  }

  #modal-box-payment {
    max-width: 90% !important;
  }

  .payment-box {
    /* padding: 5px 15px 23px; */
  }

  #modal-box-payment .buttons .close-btn {
    width: 100% !important;
  }

  .payment-popup-content .buttons {
    padding: 0px 15px 20px 15px !important;
  }

  /*===============    12 / 29 ==================*/

  .foot-links a {
    /* min-width: calc(32% - 5px); */
  }

  /*===============    12 / 29 ==================*/

  .iti__country-list {
    width: 300px;
  }
}

@media (max-width: 426px) {
  .services-title h2{
    margin-left: 4%;
  }
  aside .change {
    padding: 5px;
  }
  .bar1,
.bar2,
.bar3 {
  width: 22px;
}
  .pass-form{
    width: 90%;
  }
  .modal-box-delete .buttons{
    padding: 5px 10px;
    flex-direction: column;
    align-items: center;
  }
  .modal-box-delete .buttons button{
    width: 100% !important;
  }
  .modal-box-delete h2{
    margin-top: 10px;
  }
  .createpass .from-btn button {
    width: 90%;
}
  /*===============    12 / 29 ==================*/
  #close-btn-Adress-close {
    padding-right: 0px !important;
  }

  .slected-Adress {
    padding: 0px 0px !important;
  }

  .main-adress-popup {
    padding: 0px 0px !important;
  }

  .adressBtn {
    height: 75px;
  }

  .close-btn-adress {
    width: 100% !important;
  }

  .foot-links-right {
    grid-template-columns: 1fr 1fr;
  }

  .serv-contant {
    gap: 10px !important;
  }

  .serv-head {
    line-height: 30px;
    font-size: 18px !important;
  }

  .serv-landing {
    padding-bottom: 20px;
  }

  .serv-contant p {
    max-width: 320px;
    text-align: center;
    line-height: 25px;
    font-size: 14px !important;
  }

  .lan-link {
    width: 50%;
  }

  /*===============    12 / 29 ==================*/
  .lan-content h2 {
    font-size: 30px;
  }

  .main-title {
    font-size: 25px;
    margin-bottom: 25px !important;
  }

  .serv-contant {
    gap: 9px;
  }



  .main-swiper {
    padding: 0px 0px;
  }

  .serv-slider {
    width: 100%;
  }

  .include-slider swiper-slide {
    max-width: 80% !important;
    border-radius: 18px;
  }

  .include-slider swiper-slide img {
    border-radius: 18px;
  }

  .service-container {
    gap: 23px;
  }

  .cat-slider {
    padding: 0px 0px;
  }

  .america h2 {
    font-size: 26px;
  }

  .num-pay h2 {
    font-size: 26px;
  }

  .num-pay span {
    font-size: 16px;
  }

  .del-bootom-text .del-char .del-btn {
    font-size: 18px;
  }

  .requir {
    font-size: 16px;
  }

  .txt-larg {
    text-align: start !important;
  }

  .serv-head {
    padding-left: 4%;
  }

  .cat-slider swiper-slide:first-child {
    margin-left: 4%;
  }

  .about-content div h3 {
    font-size: 26px;
  }

  .about-content h2 {
    font-size: 33px;
  }

  .val-content {
    row-gap: 50px;
  }

  .val-box {
    width: calc((100% / 1));
  }

  .val-box p {
    max-width: 99%;
    min-height: 84px;
  }

  .val-title {
    margin-bottom: 60px !important;
  }

  .lottie-animation {
    width: 95%;
  }

  .error-content p {
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 7px;
  }

  .error-content a {
    font-size: 14px;
    width: 158px;
  }

  .resetpassword .ver-text h1 {
    font-size: 23px;
  }

  .resetpassword .res-text p {
    font-size: 14px;
    margin-top: 10px;
  }


  .res-text {
    margin-bottom: 20px;
}
.resetpassword .res-content-form .input-group{
  width: 90% !important;
}
  .resetpassword .from-btn button {
    width: 90%;
    font-size: 16px;
    height: 44px !important;
  }

  #modal-box-logout {
    max-width: unset;
    width: 300px;
    padding: 20px 10px;
  }

  .logout-content {
    margin-bottom: 10px;
  }

  .logout-content .out-icon {
    width: 72px;
    height: 72px;
  }

  .out-icon img {
    width: 37px;
    height: 37px;
  }

  .modal-box h2 {
    font-size: 20px;
  }

  .logout-content p {
    color: #7E7E7E;
    font-size: 15px;
    font-weight: 400;
    max-width: 255px;
  }

  .book-popup-box p {
    font-size: 15px;
  }

  .res-content-form input[type="text"],
  .res-content-form input[type="password"],
  .res-content-form input[type="email"] {
    height: 37px;
  }

  .form-check--groupe .form-check {
    height: 36px;
  }

  .res-content-form label {
    font-size: 15px;
  }

  .form-group input::placeholder {
    font-size: 14px !important;
  }

  .form-select {
    font-size: 14px;
    height: 35px;
  }

  .p-rela button {
    height: 36px !important;
    padding-left: 0px !important;
  }

  .availability input {
    height: 36px;
  }

  #modal-box-vai .buttons button {
    margin: 0px !important;
    width: calc(95% / 2 - 10px) !important;
    height: 39px !important;
  }

  #modal-box-process {
    width: 310px;
    max-width: unset !important;
  }

  .process-text {
    padding: 0px 15px 20px;
  }

  .title-frist {
    font-size: 14px;
  }

  .list-box-text p span {
    font-size: 14px;
  }

  .chat-row p {
    max-width: calc(98.2% - 50px);
    padding: 15px;
  }

  .chat-page .chat-inp .send-icon {
    right: 33px;
  }

  .chat-inp input {
    /* width: 80%; */
  }

  .iti__country-list {
    width: 218px !important;
  }
  .qrcode-content p {
    max-width: 90%;
  }
  .Order-details-Mobile h2{
    font-size: 15px;
  }
  .Order-details-Mobile p{
    font-size: 13px;
    text-align: center;
  }
}

@media (max-width: 376px) {
  .foot-links-right>a,
  .foot-links-col a{
    font-size: 13px;
  }
  .booking-lan-content img{
    width: 75%;
  }
  .ver-inf{
    width: 300px;
  }
  .ver-inf .form-group {
    width: calc(90% / 6 - 0px) !important;
    height: 54px;
  }
  .ava-image {
    grid-template-columns: calc(114% / 4) calc(170% / 4);
    column-gap: 48px;
  }

  .pending_call_main{
    gap: 13px;
  }
  .pending_call_main > h2{
    font-size: 18px;
  }
  .pending_call_main > p{
    font-size: 16px;
  }
  .chat {
    width: unset !important;
    min-width: unset !important;
    width: 93% !important;
  }

  .include-slider swiper-slide {
    max-width: 80% !important;
  }

  .serv-head {
    font-size: 21px;
  }

  .serv-contant {
    gap: 8px;
  }

  .serv-contant h2 {
    font-size: 20px;
  }

  .about-content h2 {
    font-size: 29px;
  }

  .about-content div h3 {
    font-size: 22px;
  }

  .val-box p {
    max-width: 99%;
    min-height: 90px;
  }

  .miss-box span {
    font-size: 14px;
  }

  .error-content>h2 {
    font-size: 32px;
  }

  .error-content a {
    font-size: 14px;
    width: 136px;
  }

  .resetpassword .ver-text h1 {
    font-size: 20px;
  }

  #modal-box-logout {
    max-width: unset;
    width: 280px;
  }

  .book-popup-box p {
    font-size: 13px;
  }

  #modal-box-submit {
    width: 270px !important;
    max-width: unset !important;
  }

  #show-model-submit .modal-head {
    padding: 10px !important;
  }

  .submit-content div {
    width: 80px;
    height: 80px;
  }

  .submit-content img {
    width: 40px;
    height: 40px;
  }

  #modal-box-process {
    width: 290px;
    max-width: unset !important;
  }

  .payment-boxtwo-content div div p {
    font-size: 13px;
  }

  .payment-box-text p {
    font-size: 12px;
  }

  .main-orderlist h2 {
    align-self: center;
  }

  .del-contant {
    gap: 15px !important;
  }

  .foot-icon {
    width: 100%;
    justify-content: center;
  }
}