/*********************************************
Start All Pages Website Content
*************************************************/
/* 1 ====> Modal */
/* 2 ====> Button Scroll Top */
/* 3 ====> loader Pages */
/* 4 ====> NavBar */
/* 5 ====> Header */
/* 6 ====> Main */
/* 7 ====> Reviews */
/* 8 ====> Products */
/* 9 ====> Banner */
/* 10 ====> MainTwo */
/* 11 ====> testimonials */
/* 12 ====> Contact */
/* 13 ====> Footer */
/* 14 ====> About Page */
/* 15 ====> Modal User File */
/* 16 ====> Contact Page */
/* 17 ====> Privacy Policy Page */
/* 18 ====> Best Product Page */
/* 19 ====> Faq Page */
/* 20 ====> Wallet Page */
/* 21 ====> Wallet Shipping */
/* 22 ====> Wallet Convert Pdf */
/* 23 ====> Wallet Card */
/* 24 ====> Invoice Page */
/* 25 ====> Notification Page */
/* 26 ====> Booking Page */
/* 27 ====> More Estate Page */
/* 28 ====> View Product Page */
/* 29 ====> Rigster Page */
/* 30 ====> Login Page */
/* 31 ====> Confirm Code Page */
/* 32 ====>  Media */
/*********************************************
End All Pages Website Content
*************************************************/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    font-family: "Tajawal", sans-serif;
    list-style: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  :root {
    --white-01-color: #ffffff;
    --white-02-color: #f7f7f7;
    --white-03-color: #f0f0f0;
    --off-white-color: #f5f5f8;
    --green-01-color: #6db991;
    --turquoise-color: #0ecaac;
    --silver-color: #212121;
    --silver-01-color: #b1b1b1;
    --warning-01-color: #ffd00a;
    --red-color: #ff0000;
    --black-01-color: #000000;
    /* --gray-01-color: #858585; */
    --gray-01-color: #212121;
    --blue-01-color: #383476;
    --blue-dark-color: #1c1a3b;
    --border-01-color: 1px solid #dfe9f1;
    --border-02-color: 1px solid #eaeaea;
    --border-03-color: 1px solid #2a2f36;
    --border-04-color: 1px solid #e4e4e4;
    --box-shadow: 0 5px 26px 0 rgb(68 88 144 / 17%);
    --box-shadow-1: 6px 10.392px 24px 0px rgb(0 0 0 / 8%);
    --box-shadow-2: 2px 3px 24px 0px rgb(106 105 194 / 8%);
  }
  
  body {
    background: var(--white-03-color);
    /* overflow: hidden; */
    min-height: 100vh;
  }
  
  html {
    font-size: 62.5%;
    /* overflow-x: hidden; */
    /* scroll-behavior: smooth; */
  }
  
  /* ==== Start Scroll web ==== */
  /* ::-webkit-scrollbar {
    width: 5px;
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: var(--turquoise-color);
  }
  
  ::-webkit-scrollbar-track {
    width: 5px;
    background-color: var(--bg-0100-color);
  } */
  
  /* ===== End Scroll Web === */
  
  /* ===== To remove height light */
  ::selection {
    color: none;
    background: none;
  }
  
  /* For Mozilla Firefox */
  ::-moz-selection {
    color: none;
    background: none;
  }
  
  /* ===== To remove height light */
  img,
  video {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }
  
  /* ======= Helper ======= */
  .padding {
    padding: 100px 0;
    position: relative;
  }
  
  .shape {
    position: absolute;
    z-index: -1;
  }
  
  .logo img {
    width: 120px;
  }
  
  /* start Button */
  .btn {
    padding: 10px 25px;
    border: none;
    background: var(--turquoise-color);
    border-radius: 6px;
    cursor: pointer;
    box-shadow: var(--box-shadow);
    margin-top: 25px;
  }
  
  .btnBlue {
    background: var(--blue-01-color) !important;
    padding: 14px 40px;
  }
  
  .btn a {
    font-size: 16px;
    color: var(--white-01-color);
    font-weight: 400;
  }
  
  /* End Button */
  /* ==================
  Start section Info
  =======================*/
  .section__Info {
    width: fit-content;
  }
  
  .section__Info .titleTop {
    font-size: 20px;
    color: var(--black-01-color);
    font-weight: 400;
    position: relative;
    margin-left: 40px;
  }
  
  .section__Info .titleTop::before,
  .section__InfoPages .titleTop::after {
    content: "";
    position: absolute;
    width: 32px;
    height: 3px;
    background: var(--blue-01-color);
    bottom: 50%;
    transform: translateY(50%);
    left: -37px;
    border-radius: 5px;
  }
  
  .section__Info .title {
    font-size: 35px;
    font-weight: bold;
    color: var(--black-01-color);
    padding: 10px 0;
  }
  
  .section__Info .text {
    font-size: 17px;
    color: var(--gray-01-color);
    font-weight: 400;
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.8;
  }
  
  .section__Info .text img {
    width: 15px;
  }
  
  .section__InfoPages {
    padding-bottom: 30px;
  }
  
  .section__InfoPages .text {
    max-width: 900px;
  }
  
  .section__InfoPages .titleTop::after {
    left: 70px;
  }
  
  .section__InfoPages .titleTop::after,
  .section__InfoPages .titleTop::before {
    bottom: 42%;
  }
  
  /* =====================
  End section Info
  =======================*/
  
  /* ================================
  Start Modal
  ===================================*/
  .modal,
  .wallet__Account__Modal {
    position: fixed;
    top: 0;
    right: 0%;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s;
  }
  
  .modal {
    z-index: 1100 !important;
  }
  
  .wallet__Account__Modal {
    right: -120%;
  }
  
  .overlayWallet {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: transparent;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
    background-color: rgba(0, 0, 0, 0.25);
    height: 100%;
  }
  
  .modal.active {
    opacity: 1;
    visibility: visible;
  }
  
  .modal .modal-container {
    max-height: 90vh;
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);
    position: relative;
  }
  
  .modal .modal-container .icon__close {
    width: 40px;
    height: 40px;
    background: #fff;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    color: #000;
    border-radius: 50%;
    position: absolute;
    left: -60px;
    top: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  @media (max-width: 600px) {
    .modal .modal-container {
      width: 90%;
    }
  }
  
  .modal .modal-container-header {
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .modal .modal-container-header .imgModal {
    margin: auto;
  }
  
  .modal .modal-container-title {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    font-weight: 700;
    font-size: 1.125;
  }
  
  .modal .modal-container-body {
    padding: 24px 32px 51px;
    overflow-y: auto;
  }
  
  .modal .rtf>*+* {
    margin-top: 1em;
  }
  
  .modal .rtf>*+ :is(h2) {
    margin-top: 2em;
  }
  
  .modal .rtf> :is(h2)+* {
    margin-top: 0.75em;
  }
  
  .modal .modal-container-body {
    text-align: center;
  }
  
  .modal .modal-container-body .title {
    font-size: 27px;
    font-weight: bold;
    color: var(--blue-01-color);
  }
  
  .modal .modal-container-body .text {
    font-size: 20px;
    color: var(--black-01-color);
    font-weight: 400;
    line-height: 1.8;
  }
  
  .modal .footerModal {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0 30px 0;
  }
  
  .modal .footerModal .btnFooterModal {
    padding: 10px 80px;
    background: var(--blue-01-color);
  }
  
  .modal .footerModal .btnFooterModal a {
    font-weight: bold;
    font-size: 16px;
  }
  
  /* =============================
  End Modal
  ================================*/
  
  /* ===== Start Button Scroll ===== */
  .btnScroll {
    position: fixed;
    right: -80px;
    bottom: 30px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    background-color: var(--turquoise-color);
    cursor: pointer;
    z-index: 995;
    transition: all 0.5s;
    border-radius: 4px;
    box-shadow: var(--box-shadow);
    border: var(--border-04-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .btnScroll i {
    font-size: 15px;
    color: #ffffff;
  }
  
  .btnScroll.active {
    right: 30px;
  }
  
  /* ====== End Button Scroll ===== */
  /* ======= Start Loader ========== */
  
  .loader {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100vh;
    background: var(--white-02-color);
    bottom: 0;
    z-index: 100000;
    transition: all 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .loader.hidden {
    animation: hidden 1s;
    animation-fill-mode: forwards;
  }
  
  @keyframes hidden {
    100% {
      visibility: hidden;
      opacity: 0;
    }
  }
  
  /* ===
  Spinner
  ===*/
  .sk-cube-grid {
    width: 80px;
    height: 80px;
  }
  
  .sk-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: var(--blue-01-color);
    float: right;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  }
  
  .sk-cube-grid .sk-cube1 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  
  .sk-cube-grid .sk-cube2 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  
  .sk-cube-grid .sk-cube3 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
  }
  
  .sk-cube-grid .sk-cube4 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
  
  .sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  
  .sk-cube-grid .sk-cube6 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  
  .sk-cube-grid .sk-cube7 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
  }
  
  .sk-cube-grid .sk-cube8 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
  
  .sk-cube-grid .sk-cube9 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
  }
  
  @-webkit-keyframes sk-cubeGridScaleDelay {
  
    0%,
    70%,
    100% {
      -webkit-transform: scale3D(1, 1, 1);
      transform: scale3D(1, 1, 1);
    }
  
    35% {
      -webkit-transform: scale3D(0, 0, 1);
      transform: scale3D(0, 0, 1);
    }
  }
  
  @keyframes sk-cubeGridScaleDelay {
  
    0%,
    70%,
    100% {
      -webkit-transform: scale3D(1, 1, 1);
      transform: scale3D(1, 1, 1);
    }
  
    35% {
      -webkit-transform: scale3D(0, 0, 1);
      transform: scale3D(0, 0, 1);
    }
  }
  
  /* ===== End Loader ===== */
  /* ================================
  Start Home Page
  ================================= */
  #Home {
    background: var(--blue-01-color);
  }
  
  .header,
  .header .allHeader {
    position: relative;
    z-index: 995;
  }
  
  .header .allHeaderBg {
    background: var(--blue-01-color);
  }
  
  .header .allHeader.active {
    position: fixed;
    width: 100%;
    top: 0;
    background: #2c2966;
    transition: all 0.5s;
  }
  
  .header .allHeader .mainHeader.active {
    height: 70px;
  }
  
  .header .allHeader .mainHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
  }
  
  .allMenuLinks .overlay {
    display: none;
  }
  
  .header .allHeader .mainHeader .menuLinks .List,
  .header .allHeader .mainHeader .leftMenu .listLeftMenu,
  .header .allHeader .mainHeader .leftMenu .ItemListLeftMEnuUser a {
    display: flex;
    gap: 15px;
    align-items: center;
  }
  
  .header .allHeader .mainHeader .leftMenu a {
    position: relative;
  }
  
  .badgeItem {
    width: 10px;
    height: 10px;
    background: var(--red-color);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    display: block;
  }
  
  /* === Star drop menu ==== */
  .dropMenuNot {
    border: var(--border-01-color);
    position: absolute;
    width: 320px;
    right: 100%;
    transform: translateX(50%);
    top: 50px;
    z-index: 100;
    background: #fff;
    padding: 10px 15px;
    border-radius: 18px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
  }
  
  .header .allHeader .mainHeader .leftMenu .listLeftMenu .ItemListLeftMEnu .dropMenuNot.active {
    opacity: 1;
    visibility: visible;
  }
  
  .dropMenuNot01 .notOne .right__Not .img {
    display: flex;
    align-items: center;
  }
  
  .dropMenuNot::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: -10px;
    right: 43%;
    width: 16px;
    height: 16px;
    border-right: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    background-color: #ffffff;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
  }
  
  .dropMenuNot01::after {
    right: 44%;
  }
  
  .dropMenuNot .mainDropMenu .top__Menu {
    border-bottom: var(--border-04-color);
    padding-bottom: 15px;
    align-items: center;
  }
  
  .messageNum {
    width: 25px;
    height: 25px;
    text-align: center;
    background: var(--red-color);
    border-radius: 50%;
    font-size: 16px !important;
    font-weight: bold !important;
    color: var(--white-01-color);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .dropMenuNot .mainDropMenu .center_Menu {
    padding: 15px 0;
    overflow: hidden scroll;
    height: 300px;
  }
  
  .dropMenuNot .mainDropMenu .center_Menu .notOne .img img {
    width: 60px;
    height: 50px;
  }
  
  .dropMenuNot .mainDropMenu .center_Menu .notOne .mainInfo,
  .dropMenuNot .mainDropMenu .top__Menu {
    display: flex;
    justify-content: space-between;
  }
  
  .dropMenuNot .mainDropMenu .center_Menu .notOne {
    border-bottom: var(--border-04-color);
    padding: 10px 10px 10px 0;
    cursor: pointer;
  }
  
  .dropMenuNot .mainDropMenu .center_Menu .notOne .right__Not,
  .dropMenuNot .mainDropMenu .center_Menu .notOne .dateNot {
    display: flex;
    gap: 15px;
  }
  
  .dropMenuNot .mainDropMenu .center_Menu .notOne .right__Not .info {
    width: 100%;
  }
  
  .dropMenuNot .mainDropMenu .center_Menu .notOne .right__Not .info .textName,
  .dropMenuNot .mainDropMenu .top__Menu .title {
    font-size: 15px;
    font-weight: bold;
    color: var(--blue-01-color);
  }
  
  .dropMenuNot .mainDropMenu .center_Menu .notOne .right__Not .info {
    border-left: var(--border-04-color);
    padding-left: 10px;
  }
  
  .dropMenuNot .mainDropMenu .center_Menu .notOne .right__Not .info .text {
    font-size: 12px;
    font-weight: 400;
    color: var(--silver-color);
    padding-top: 5px;
  }
  
  .dropMenuNot .mainDropMenu .center_Menu .notOne .right__Not .img {
    font-size: 20px;
    color: var(--turquoise-color);
  }
  
  .dropMenuNot .mainDropMenu .center_Menu .notOne .dateNot img {
    width: 15px;
    height: 15px;
  }
  
  .dropMenuNot .mainDropMenu .center_Menu .notOne .dateNot {
    gap: 5px;
    padding-top: 5px;
    align-items: center;
  }
  
  .dropMenuNot .mainDropMenu .center_Menu .notOne .dateNot .dateText {
    font-size: 11px;
    color: var(--silver-color);
    font-weight: 400;
  }
  
  .dropMenuNot .mainDropMenu .bottom___Drop_Not {
    border: var(--border-04-color);
    width: 100%;
    padding: 13px 10px;
    text-align: center;
    background: var(--white-01-color);
    border-radius: 14px;
    box-shadow: 0px 1px 1px 0px #b1b1b1;
  }
  
  .dropMenuNot .mainDropMenu .bottom___Drop_Not .linkAll {
    color: var(--blue-01-color) !important;
    font-size: 16px !important;
    font-weight: bold !important;
  }
  
  /* ==================
  Start drop user
  ========================*/
  .dropmenuUser {
    width: 350px;
    right: -22%;
    transform: translateX(0);
    top: 52px;
  }
  
  .dropmenuUser.active {
    visibility: visible;
    opacity: 1;
  }
  
  .dropmenuUser::after {
    right: initial;
    left: 90%;
    top: -8px;
  }
  
  @media screen and (max-width: 1200px) {
    .dropmenuUser {
      right: -10%;
    }
  }
  
  @media screen and (max-width: 450px) {
    .dropmenuUser {
      right: -50%;
      top: 45px;
    }
  
    .dropmenuUser::after {
      left: 88%;
    }
  }
  
  @media screen and (max-width: 390px) {
    .dropmenuUser {
      right: -100%;
    }
  
    .dropmenuUser::after {
      left: 80%;
    }
  }
  
  @media screen and (max-width: 360px) {
    .dropmenuUser {
      right: -100% !important;
    }
  
    .dropmenuUser::after {
      left: 79%;
    }
  }
  
  .dropmenuUser .topInfoUser {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: var(--border-04-color);
    padding-bottom: 25px;
  }
  
  .dropmenuUser .topInfoUser .infoUserOne,
  .dropmenuUser .topInfoUser .infoUserOne .map {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .dropmenuUser .topInfoUser .infoUserOne img {
    width: 70px;
    height: 70px;
  }
  
  .dropmenuUser .topInfoUser .infoUserOne .name {
    font-size: 16px;
    color: var(--blue-01-color);
    font-weight: bold;
  }
  
  .dropmenuUser .topInfoUser .infoUserOne .map {
    padding-top: 8px;
  }
  
  .dropmenuUser .topInfoUser .infoUserOne .map .textLoac {
    font-size: 14px;
    color: var(--gray-01-color);
    font-weight: 400;
  }
  
  .dropmenuUser .topInfoUser .infoUserOne .map .iconmap {
    color: var(--turquoise-color);
    font-size: 16px;
  }
  
  .dropmenuUser .topInfoUser .btnUser {
    background: var(--blue-01-color);
    margin: 0;
    border-radius: 12px;
    padding: 8px 25px;
  }
  
  .dropmenuUser .centerInfoUser {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 30px 0;
  }
  
  .dropmenuUser .centerInfoUser .mainOnerate {
    border: var(--border-04-color);
    border-color: var(--off-white-color);
    border-radius: 12px;
    width: 100%;
    padding: 15px 10px;
    background: var(--off-white-color);
  }
  
  .dropmenuUser .centerInfoUser .mainOnerate .rateOne {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .dropmenuUser .centerInfoUser .mainOnerate .rateOne .iconStarRate {
    font-size: 20px;
    color: var(--turquoise-color);
  }
  
  .dropmenuUser .centerInfoUser .mainOnerate .rateOne .numRate {
    font-size: 17px;
    color: var(--blue-dark-color);
    font-weight: bold;
  }
  
  .dropmenuUser .centerInfoUser .mainOnerate .textRate {
    font-size: 14px;
    color: var(--black-01-color);
    font-weight: bold;
    padding-top: 10px;
  }
  
  .dropmenuUser .contentUser .contOne {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .dropmenuUser .contentUser .contOne .cont__Info,
  .dropmenuUser .contentUser .contOne .left__Cont,
  .dropmenuUser .bottomUser a {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .dropmenuUser .contentUser .contOne .cont__Info img {
    width: 50px;
    height: 50px;
  }
  
  .dropmenuUser .contentUser .contOne .cont__Info .title {
    font-size: 16px;
    font-weight: 400;
    color: var(--blue-01-color);
  }
  
  .dropmenuUser .contentUser .contOne .left__Cont .arrowIcon {
    font-size: 20px;
    color: var(--blue-01-color);
  }
  
  .dropmenuUser .contentUser .contOne .left__Cont .numWallet {
    font-size: 16px;
    color: var(--turquoise-color);
    font-weight: bold;
  }
  
  .dropmenuUser .bottomUser a {
    font-size: 16px !important;
    color: var(--silver-color) !important;
    font-weight: 400 !important;
    padding: 15px 5px;
  }
  
  /* ==================
  End drop user
  ========================*/
  @media screen and (max-width: 390px) {
    .dropMenuNot01 {
      right: 0;
    }
  
    .dropMenuNot01::after {
      right: 51% !important;
    }
  }
  
  @media screen and (max-width: 360px) {
    .dropMenuNot {
      width: 93vw;
      right: 51%;
    }
  
    .dropMenuNot01 {
      width: 85vw;
      right: 0;
    }
  
    .dropMenuNot .mainDropMenu .center_Menu .notOne .right__Not .info .textName,
    .dropMenuNot .mainDropMenu .center_Menu .notOne .right__Not .info .text {
      font-size: 12px;
    }
  
    .dropMenuNot .mainDropMenu .center_Menu .notOne {
      align-items: flex-start;
      gap: 25px;
    }
  
    .dropMenuNot .mainDropMenu .center_Menu .notOne .dateNot .dateText {
      font-size: 10px;
    }
  
    .dropMenuNot::after {
      right: 46%;
    }
  
    .dropMenuNot01::after {
      right: 51%;
    }
  }
  
  /* ==== En ddrop menu === */
  .header .allHeader .mainHeader .menuLinks .List .itemList .itemLink,
  .header .allHeader .mainHeader .leftMenu .listLeftMenu a {
    color: var(--white-01-color);
    font-size: 16px;
    font-weight: bold;
    margin-left: 15px;
  }
  
  .header .allHeader .mainHeader .leftMenu .listLeftMenu a {
    text-transform: uppercase;
    font-weight: 400;
  }
  
  .header .allHeader .mainHeader .menuLinks .List .itemList .itemLink.active {
    color: var(--turquoise-color);
    position: relative;
  }
  
  .header .allHeader .mainHeader .menuLinks .List .itemList .itemLink.active::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 2px;
    background: var(--turquoise-color);
    right: 50%;
    bottom: -7px;
    transform: translateX(50%);
    border-radius: 6px;
  }
  
  .header .allHeader .mainHeader .leftMenu .listLeftMenu .ItemListLeftMEnu {
    display: flex;
    position: relative;
  }
  
  .header .allHeader .mainHeader .leftMenu .listLeftMenu .userImg {
    width: 50px;
    height: 50px;
  }
  
  .header .allHeader .mainHeader .leftMenu .listLeftMenu .iconArrow {
    width: 15px;
    height: 15px;
  }
  
  .header .allHeader .mainHeader .leftMenu .listLeftMenu a {
    margin: 0;
  }
  
  .header .allHeader .mainHeader .leftMenu .listLeftMenu .toggle {
    font-size: 17px;
    color: #fff;
    margin-left: 10px;
    border: var(--border-04-color);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 4px;
    display: none;
  }
  
  /* === Start Content Header ==== */
  .header .contentHeader .all__Content__Header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 407px;
    padding-left: 70px;
  }
  
  .header .contentHeader .all__Content__Header .content__info {
    max-width: 455px;
  }
  
  .header .contentHeader .all__Content__Header .content__info .title {
    font-size: 45px;
    font-weight: bold;
    color: var(--white-01-color);
  }
  
  .header .contentHeader .all__Content__Header .content__info .text {
    font-size: 17px;
    font-weight: 400;
    line-height: 1.7;
    padding: 10px 0;
    color: var(--white-01-color);
  }
  
  .header .contentHeader .all__Content__Header .content__info .btnInfo {
    padding: 10px 40px;
  }
  
  .header .contentHeader .all__Content__Header .img__content {
    width: 1200px;
    position: absolute;
    right: -67px;
    z-index: -1;
  }
  
  .bottom__Content {
    height: 170px;
    background: #fff;
    margin-left: 200px;
    border-radius: 30px 0 0 0;
  }
  
  .bottom__Content .allFormInputs {
    padding: 30px 50px;
  }
  
  .bottom__Content .allFormInputs .titleSec {
    font-size: 20px;
    font-weight: bold;
    color: var(--black-01-color);
    padding-bottom: 15px;
  }
  
  .bottom__Content .allFormInputs .mainForms {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .bottom__Content .allFormInputs .mainForms .formOne {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    border: var(--border-04-color);
    width: 236px;
    padding: 10px;
    border-radius: 6px;
    background: #f7f7f7;
  }
  
  .bottom__Content .allFormInputs .mainForms .formOne .input {
    border: none;
    padding: 3px;
    outline: none;
    background: transparent;
    width: 100%;
    text-align: left;
  }
  
  .bottom__Content .allFormInputs .mainForms .formOne .input::placeholder {
    font-size: 15px;
    font-weight: 400;
    color: var(--gray-01-color);
  }
  
  .bottom__Content .allFormInputs .mainForms .btnSubmit {
    margin: 0;
    color: var(--white-01-color);
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    padding: 15px 55px;
  }
  
  input[type="date"] {
    display: block;
    position: relative;
    font-size: 1.5rem;
    background: left 1rem center no-repeat;
    cursor: pointer;
  }
  
  ::-webkit-datetime-edit-text {
    opacity: 0;
  }
  
  ::-webkit-clear-button,
  ::-webkit-inner-spin-button {
    display: none;
  }
  
  ::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 2.5rem;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
  
    opacity: 0;
    cursor: pointer;
  
    color: rgba(0, 120, 250, 1);
    background: rgba(0, 120, 250, 1);
  }
  
  .header .bottom__Content {
    position: relative;
    z-index: 1;
  }
  
  .contentHeader .swiper {
    overflow: unset;
  }
  
  .swiper-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    display: flex;
    align-items: center;
    width: fit-content;
  }
  
  .contentHeader .swiper-horizontal>.swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    left: 2%;
    bottom: -100px;
    z-index: 1000;
    transform: translateX(50%);
  }
  
  .swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer;
    background: transparent;
    border: 1px solid #fff;
    transition: all 0.5s;
  }
  
  .swiper-pagination-clickable .swiper-pagination-bullet-active {
    background: var(--turquoise-color);
    border-color: var(--turquoise-color);
    width: 34px;
    height: 6px;
    border-radius: 4px;
  }
  
  @media screen and (max-width: 2480px) {
    .contentHeader {
      padding-top: 157px;
    }
  }
  
  @media screen and (max-width: 1401px) {
    .contentHeader {
      padding-top: 0px;
    }
  }
  
  @media screen and (max-width: 1359px) {
    .contentHeader {
      padding-top: 141px;
    }
  
    .header .bottom__Content {
      height: 186px;
    }
  }
  
  @media screen and (max-width: 1024px) {
    .header .bottom__Content {
      height: 170px;
    }
  }
  
  @media screen and (max-width: 1168px) {
    .header .bottom__Content .allFormInputs .mainForms .formOne {
      width: 200px;
    }
  
    .header .bottom__Content .allFormInputs .mainForms .btnSubmit {
      padding: 15px 40px;
    }
  }
  
  @media screen and (max-width: 1023px) {
    .header .bottom__Content {
      height: 100% !important;
      padding: 40px 20px;
    }
  
    .bottom__Content .allFormInputs .mainForms {
      flex-direction: column !important;
    }
  
    .bottom__Content .allFormInputs .mainForms .formOne {
      width: 100% !important;
    }
  
    .bottom__Content .allFormInputs .mainForms .btnSubmit {
      width: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .header .contentHeader .all__Content__Header .img__content {
      top: -75px;
      width: 900px;
    }
  
    .header .contentHeader .all__Content__Header .content__info .text {
      max-width: 350px;
      font-size: 14px;
    }
  
    .header .contentHeader .all__Content__Header {
      padding-left: 16px;
    }
  }
  
  @media screen and (max-width: 768px) {
    .header .contentHeader .all__Content__Header .img__content {
      display: none;
    }
  
    .header .contentHeader {
      padding: 0;
    }
  
    .header .contentHeader .all__Content__Header {
      justify-content: center;
      text-align: center;
    }
  
    .header .contentHeader .all__Content__Header .content__info {
      max-width: 100%;
      padding: 0 50px;
    }
  
    .header .contentHeader .all__Content__Header .content__info .text {
      max-width: 100%;
    }
  
    .header .contentHeader .all__Content__Header {
      padding: 0;
    }
  
    .header .bottom__Content {
      padding: 25px 0;
      margin-left: 150px;
    }
  }
  
  @media screen and (max-width: 550px) {
  
    .contentHeader .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal {
      bottom: 0;
      left: initial;
      right: 50%;
      margin-bottom: 25px;
    }
  
    .header .bottom__Content {
      padding: 25px 0;
      margin: 0 15px;
      border-radius: 30px 30px 0 0px;
    }
  
    .header .bottom__Content .allFormInputs {
      padding: 20px 15px;
    }
  
    .header .contentHeader .all__Content__Header .content__info .title {
      font-size: 25px;
    }
  
    .header .contentHeader .all__Content__Header .content__info .text {
      font-size: 14px;
    }
  }
  
  @media screen and (max-width: 450px) {
    .header .contentHeader {
      padding: 50px 0 0 0;
    }
  
    .header .contentHeader .all__Content__Header {
      height: 100%;
    }
  
    .contentHeader .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal {
      bottom: 0;
      left: initial;
      right: 50%;
      margin-bottom: 25px;
    }
  
    .header .contentHeader .all__Content__Header .content__info {
      padding: 0 12px;
    }
  
    .header .bottom__Content {
      padding: 25px 0;
      margin: 70px 12px 0 12px;
      border-radius: 30px 30px 0 0px;
    }
  
    .header .bottom__Content .allFormInputs {
      padding: 20px 15px;
    }
  
    .header .contentHeader .all__Content__Header .content__info .title {
      font-size: 20px;
    }
  
    .header .contentHeader .all__Content__Header .content__info .text {
      font-size: 12px;
    }
  
    .header .bottom__Content .allFormInputs .mainForms .btnSubmit {
      margin-top: 25px;
      width: 100%;
    }
  
    .contentHeader .swiper-horizontal>.swiper-pagination-bullets,
    .swiper-pagination-bullets.swiper-pagination-horizontal {
      margin-bottom: -40px;
    }
  }
  
  /* ==== End Content Header  ==== */
  /* ===================
  Start main
  ========================*/
  /* ================
  Start Section main
  =================*/
  .main .allMainInfo .top__Main__Info {
    padding: 50px 0;
    position: relative;
  }
  
  .main .allMainInfo .top__Main__Info .mainSlideOne {
    position: relative;
    border-radius: 18px;
  }
  
  .main .allMainInfo .top__Main__Info .mainSlideOne::after,
  .productOne .mainProduct .image__Product::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: calc(100% - 4px);
    background: rgb(0 0 0 / 37%);
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 18px;
  }
  
  .productOne .mainProduct .image__Product::after {
    border-radius: 13px !important;
  }
  
  .main .allMainInfo .top__Main__Info .mainSlideOne .info__main__Slide {
    position: absolute;
    z-index: 1;
    bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 50px;
  }
  
  .main .allMainInfo .top__Main__Info .mainSlideOne .info__main__Slide .title {
    font-size: 35px;
    color: var(--white-01-color);
    font-weight: bold;
  }
  
  .main .allMainInfo .top__Main__Info .mainSlideOne .info__main__Slide .linkmainSlide {
    font-size: 17px;
    color: var(--turquoise-color);
    margin-top: 13px;
    cursor: pointer;
  }
  
  .swiper-button-next:after,
  .swiper-button-prev:after {
    display: none;
  }
  
  .butonsSwiper .swiper-button-prev {
    left: auto !important;
    right: 45px !important;
  }
  
  .butonsSwiper .swiper-button-next {
    left: auto;
    right: 0;
  }
  
  .swiper-button-prev.swiper-button-disabled svg {
    opacity: 0.35;
  }
  
  .swiper-button-prev,
  .swiper-button-next {
    top: -29px;
  }
  
  .initialize {
    padding-bottom: 80px;
  }
  
  .swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .main {
    position: relative;
  }
  
  .bg {
    position: absolute;
    background: var(--blue-01-color);
    width: 100%;
    bottom: 0;
    z-index: -1;
    height: calc(100% - 450px);
  }
  
  .main .mainInfo .allMainInfo .bottom__Main__Info {
    display: flex;
    align-items: center;
    gap: 0px;
    padding-top: 50px;
  }
  
  .main .mainInfo .allMainInfo .bottom__Main__Info .section__Info,
  .main .mainInfo .allMainInfo .bottom__Main__Info .textLeft {
    flex: 1 1 20rem;
  }
  
  .main .mainInfo .allMainInfo .bottom__Main__Info .titleTop {
    color: var(--turquoise-color);
  }
  
  .main .mainInfo .allMainInfo .bottom__Main__Info .titleTop::before {
    background: var(--turquoise-color);
  }
  
  .main .mainInfo .allMainInfo .bottom__Main__Info .title {
    color: var(--white-01-color);
    font-size: 35px;
  }
  
  .main .mainInfo .allMainInfo .bottom__Main__Info .textLeft .text {
    font-size: 18px;
    font-weight: 400;
    color: var(--white-01-color);
    line-height: 1.8;
  }
  
  /* ================
  end Section main
  =================*/
  /* ============
  Start section reviews
  ======================*/
  .reviews .all__Reviews {
    display: flex;
    gap: 50px;
    border-bottom: var(--border-04-color);
    padding-bottom: 80px;
  }
  
  .reviews .all__Reviews .info__Reviews .mainInfoReviews {
    display: flex;
    gap: 50px;
  }
  
  .reviews .all__Reviews .info__Reviews .mainInfoReviews .counterUp {
    padding: 10px 0;
  }
  
  .reviews .all__Reviews .info__Reviews .mainInfoReviews .counterUp:nth-child(2) {
    border-left: var(--border-03-color);
    border-color: #ddd;
    padding-left: 50px;
  }
  
  .reviews .all__Reviews .info__Reviews .mainInfoReviews .counterUp .numCounter {
    font-size: 20px;
    font-weight: bold;
    color: var(--blue-01-color);
  }
  
  .reviews .all__Reviews .info__Reviews .feature {
    margin-top: 50px;
  }
  
  .reviews .all__Reviews .info__Reviews .mainInfoReviews .counterUp .text,
  .reviews .all__Reviews .info__Reviews .feature .allFeature .featureOne .featOne .infoFeat .text {
    font-size: 17px;
    font-weight: 400;
    color: var(--gray-01-color);
  }
  
  .reviews .all__Reviews .info__Reviews .feature .allFeature .featureOne {
    display: flex;
    gap: 15px;
  }
  
  .reviews .all__Reviews .info__Reviews .feature .allFeature .featureOne .featOne {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
    border: var(--border-04-color);
    padding: 15px;
    border-radius: 4px;
  }
  
  .reviews .all__Reviews .info__Reviews .feature .title {
    font-size: 17px;
    font-weight: bold;
    color: var(--blue-01-color);
  }
  
  .reviews .all__Reviews .info__Reviews .feature .allFeature {
    margin-top: 25px;
  }
  
  .reviews .all__Reviews .info__Reviews .feature .allFeature .featureOne .featOne {
    width: 300px;
  }
  
  .reviews .all__Reviews .info__Reviews .feature .allFeature .featureOne .featOne .infoFeat .text {
    font-size: 12px;
    padding: 10px 0;
  }
  
  .reviews .all__Reviews .btnReviews {
    padding: 10px 50px;
  }
  
  .reviews .all__Reviews .image {
    position: relative;
  }
  
  .buttonAnim {
    position: absolute;
    top: 50%;
    right: 46%;
    transform: translate(50%, -50%);
    z-index: 1;
    cursor: pointer;
  }
  
  .buttonAnim a {
    width: 45px;
    height: 45px;
    line-height: 46px;
    border-radius: 50px;
    background: var(--turquoise-color);
    color: var(--white-01-color);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    margin: 0 auto;
    font-size: 15px;
  }
  
  .buttonAnim a::after {
    background: var(--white-01-color);
    content: "";
    position: absolute;
    z-index: 0;
    right: 50%;
    top: 50%;
    transform: translateX(50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    animation: animButton 1.5s ease-out infinite;
  }
  
  /*  Animation */
  @keyframes animButton {
    0% {
      transform: translateX(50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
  
    100% {
      transform: translateX(50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }
  
  @-webkit-keyframes animButton {
    0% {
      transform: translateX(50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
  
    100% {
      transform: translateX(50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }
  
  /* ====================
  End section reviews
  =======================*/
  /* ====================
  Start Section PRoducts
  =====================*/
  .products .section__Info .mainSection__info {
    display: flex;
  }
  
  .products .products_Slide {
    padding-bottom: 80px;
  }
  
  .products .products_Slide .swiper-pagination-clickable .swiper-pagination-bullet,
  .main01 .swiper-pagination-clickable .swiper-pagination-bullet {
    border-color: #000;
  }
  
  .swiper-pagination-clickable .swiper-pagination-bullet-active {
    border-color: var(--turquoise-color) !important;
  }
  
  .products .mainSection__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .products .mainSection__info .linkMore {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .products .mainSection__info .linkMore {
    font-size: 22px;
    color: var(--black-01-color);
    font-weight: bold;
  }
  
  .products .mainSection__info .linkMore svg {
    margin-top: 7px;
  }
  
  .products .allProducts {
    padding: 30px 0 0 0;
  }
  
  .productOne .mainProduct .image__Product {
    position: relative;
  }
  
  .productOne .mainProduct .badge {
    width: 63px;
    height: 63px;
    background: var(--turquoise-color);
    font-size: 11px;
    font-weight: bold;
    color: var(--white-01-color);
    border-radius: 50%;
    line-height: 13px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--box-shadow-1);
    position: absolute;
    bottom: -24px;
    right: 24px;
    z-index: 1;
  }
  
  .productOne .mainProduct .infoProduct .titleInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: var(--border-04-color);
    padding: 10px 0;
  }
  
  .productOne .mainProduct .infoProduct .titleInfo .titleText {
    font-size: 15px;
    color: var(--silver-color);
    font-weight: bold;
  }
  
  .productOne .mainProduct .titleProduct {
    font-size: 17px;
    color: var(--black-01-color);
    font-weight: bold;
    padding-top: 15px;
  }
  
  .productOne .mainProduct .mainCart {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 0;
  }
  
  .productOne .mainProduct .mainCart .btn__cart {
    margin: 0;
    padding: 10px 40px;
  }
  
  .iconWishList {
    width: 40px;
    height: 40px;
    background: #dddddd;
    text-align: center;
    line-height: 40px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .iconWishList .iconHeart {
    font-size: 17px;
    color: var(--gray-01-color);
  }
  
  .iconWishList.active .iconHeart {
    color: var(--red-color);
  }
  
  .toastify {
    display: flex;
    align-items: center;
    border-radius: 6px;
    font-size: 15px;
    font-weight: bold;
  }
  
  /* ====================
  End Section PRoducts
  =====================*/
  /* ==================
  Start section banner
  ====================*/
  .banner {
    padding: 50px 0;
    background: var(--blue-01-color);
  }
  
  .banner .allBanner {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .banner .allBanner .info__banner .title {
    font-size: 45px;
    color: var(--white-01-color);
    font-weight: bold;
  }
  
  .banner .allBanner .info__banner .text {
    font-size: 20px;
    font-weight: 400;
    color: var(--white-01-color);
  }
  
  .banner .allBanner .info__banner .btnBanner {
    margin-top: 100px;
  }
  
  .banner .allBanner .imagesBanner img {
    height: 100%;
    border-radius: 16px;
  }
  
  .banner .allBanner .imagesBanner .imgFlex__ban {
    display: flex;
    flex-direction: column;
    gap: 15px;
    transform: translateY(35px);
  }
  
  .banner .allBanner .imagesBanner {
    display: flex;
    gap: 15px;
  }
  
  /* ==================
  End section banner
  ====================*/
  /* ===================
  Start main Two
  =====================*/
  #mainTwo .textRed {
    font-weight: bold;
    color: var(--red-color);
  }
  
  /* ===================
  End main Two
  ====================*/
  /* ==================
  Start Section testimonials
  =======================*/
  .testimonials {
    background: var(--blue-01-color);
    padding-top: 50px;
  }
  
  .testimonials .section__Info .titleTop,
  .testimonials .section__Info .title {
    color: var(--white-01-color);
  }
  
  .testimonials .section__Info .titleTop::before {
    background: var(--white-01-color);
  }
  
  .testimonials .allTestimonials .testimonialOne {
    padding: 25px 0;
  }
  
  .testimonials .allTestimonials .testimonialOne .main__Testimonail {
    display: flex;
    align-items: center;
  }
  
  .testimonials .allTestimonials .testimonialOne .main__Testimonail .image__User {
    background: #4c4984;
    overflow: hidden;
    box-shadow: var(--box-shadow-2);
    border-radius: 16px;
    width: 280px;
    height: 200px;
  }
  
  .testimonials .allTestimonials .testimonialOne .main__Testimonail .image__User img {
    transform: translateY(5px);
  }
  
  .testimonials .allTestimonials .testimonialOne .main__Testimonail .info__Testimonail {
    padding: 0 20px;
  }
  
  .testimonials .allTestimonials .testimonialOne .main__Testimonail .info__Testimonail .titleName {
    font-size: 22px;
    font-weight: bold;
    color: var(--white-01-color);
  }
  
  .testimonials .allTestimonials .testimonialOne .main__Testimonail .info__Testimonail .rate {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
  }
  
  .testimonials .allTestimonials .testimonialOne .main__Testimonail .info__Testimonail .rate .stars .iconStar {
    font-size: 16px;
    color: var(--warning-01-color);
  }
  
  .testimonials .allTestimonials .testimonialOne .main__Testimonail .info__Testimonail .rate .text {
    font-size: 16px;
    color: var(--white-01-color);
    font-weight: bold;
  }
  
  .testimonials .allTestimonials .testimonialOne .main__Testimonail .textMessage {
    font-size: 16px;
    font-weight: 400;
    color: var(--white-01-color);
    line-height: 1.8;
  }
  
  /* =======================
  End Section testimonials
  ========================*/
  /* ===================
  Start Section contact
  =======================*/
  .contact .all__Contact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
  }
  
  .contact .all__Contact .form__Contact {
    flex: 1 1 45rem;
  }
  
  .contact .all__Contact .section__Info {
    flex: 1 1 15rem;
  }
  
  .contact .all__Contact .section__Info .title {
    padding: 10px 0;
  }
  
  .contact .all__Contact .allForm__Contact {
    padding: 15px 30px;
  }
  
  .contact .all__Contact .formOne {
    display: flex;
    align-items: center;
    border-bottom: var(--border-04-color);
    border-color: var(--silver-01-color);
    background: var(--white-03-color);
    padding: 20px 0;
    margin-bottom: 10px;
  }
  
  .contact .all__Contact .formOne img {
    width: 20px;
    height: 20px;
  }
  
  .contact .all__Contact .formOne input {
    width: 100%;
    padding: 0px 10px;
    font-size: 16px;
    color: var(--gray-01-color);
    font-weight: 400;
    border: none;
    outline: none;
    background: transparent;
  }
  
  .contact .all__Contact .allForm__Contact .btnSubmitForm {
    padding: 12px 45px;
  }
  
  /* ===================
  End Section contact
  =======================*/
  /* ===================
  End main
  ========================*/
  /* ==============================
  Start Footer
  ================================*/
  .footer {
    background: var(--blue-01-color);
    padding: 50px 0 20px 0;
    margin-top: 100px;
  }
  
  .footer .allFooter {
    padding-bottom: 30px;
  }
  
  .footer .allFooter,
  .footer .bottomFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
  }
  
  .footer .allFooter .footerOne img {
    width: 167.5px;
  }
  
  .footer .allFooter .footerOne,
  .footer .allFooter .footerOne .listLinks {
    display: flex;
    align-items: center;
    gap: 25px;
  }
  
  .footer .allFooter .footerOne {
    gap: 50px;
  }
  
  .footer .allFooter .footerOne .listLinks .itemLinkFooter .itemLinkOne {
    font-size: 16px;
    color: var(--white-01-color);
    font-weight: 400;
  }
  
  .footer .allFooter .footerTwo .titleFoote {
    font-size: 13px;
    color: var(--turquoise-color);
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .footer .allFooter .footerTwo .linksApp,
  .footer .allFooter .footerTwo .linksApp .itemApp .linkApp,
  .footer .bottomFooter .icons__Social {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .footer .allFooter .footerTwo .linksApp {
    gap: 25px;
  }
  
  .footer .allFooter .footerTwo .linksApp .itemApp .linkApp {
    font-size: 13px;
    color: var(--white-01-color);
    font-weight: 400;
  }
  
  .footer .allFooter .footerTwo .linksApp img {
    width: 25px;
  }
  
  .footer .bottomFooter {
    border-top: var(--border-01-color);
    border-color: var(--silver-01-color);
    padding: 30px 0 0 0;
  }
  
  .footer .bottomFooter .titleCopy {
    font-size: 17px;
    color: var(--white-01-color);
    font-weight: 400;
  }
  
  .footer .bottomFooter .icons__Social .icon__social__one .icon__SocialLink {
    border: var(--border-04-color);
    font-size: 17px;
    color: var(--white-01-color);
    width: 40px;
    height: 40px;
    text-align: center;
  
    border-radius: 50px;
    display: block;
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .footer .bottomFooter .icons__Social .icon__social__one .icon__SocialLink:hover {
    color: var(--turquoise-color);
    border-color: var(--turquoise-color);
  }
  
  /* ==============================
  End Footer
  ================================*/
  
  /* ===============================
  End Home Page
  ================================ */
  /* =============================
  Start Page About
  =======================================*/
  #about .all__Reviews {
    border-top: var(--border-04-color);
    padding-top: 100px;
  }
  
  /* Start Modal popup */
  .modalPadding .modal-container-body {
    padding: 0px 51px 15px 32px;
  }
  
  .modalPadding .modal-container-body .text {
    font-size: 16px;
  }
  
  /* End Modal popup */
  
  /* Modal Wallet */
  #ModalUserFile .topIcons,
  .sameModal .topIcons {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  #ModalUserFile .topIcons .iconRemove {
    color: var(--red-color);
  }
  
  #ModalUserFile .allWalletAccount {
    width: 42rem;
  }
  
  #ModalUserFile .dateBirth {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  
  #ModalUserFile .content_Wallet__AccountTop {
    margin: 15px 0;
  }
  
  #ModalUserFile .content_Wallet__AccountTop .cardItem {
    display: flex;
    gap: 10px;
    background: var(--blue-01-color);
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
  }
  
  #ModalUserFile .content_Wallet__AccountTop .cardItem .titleInfo {
    font-size: 10px;
    color: var(--white-03-color);
    font-weight: 400;
  }
  
  #ModalUserFile .content_Wallet__AccountTop .cardItem .num {
    font-size: 20px;
    color: var(--white-01-color);
    font-weight: bold;
  }
  
  #ModalUserFile .content_Wallet__AccountTop .cardItem .cardItemLeft {
    border-left: var(--border-04-color);
    padding-left: 15px;
    width: 50%;
  }
  
  #ModalUserFile .content_Wallet__AccountTop .cardItem .cardItemRight {
    width: 50%;
  }
  
  #ModalUserFile .dateBirth span,
  #ModalUserFile .content_Wallet__Account .title,
  .content_Wallet__AccountTop .title {
    font-size: 14px;
    color: var(--blue-01-color);
    font-weight: bold;
  }
  
  #ModalUserFile .wallet__Card {
    flex-wrap: nowrap;
  }
  
  #ModalUserFile .wallet__Card .wallet__Card__One {
    justify-content: unset;
  }
  
  #ModalUserFile .wallet__Card__One {
    width: 150px;
  }
  
  #ModalUserFile .wallet__Card .wallet__Card__One p {
    font-size: 9px;
  }
  
  input[type="checkbox"] {
    position: relative;
    cursor: pointer;
  }
  
  .wallet__Card__One input[type="checkbox"]:before,
  .wallet__Card__01 input[type="checkbox"]:before {
    content: "";
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    right: 0;
    background-color: #e9e9e9;
    border: var(--border-04-color);
    border-color: #c9c9c9;
    border-radius: 3px;
  }
  
  .wallet__Card__One input[type="checkbox"]:checked:before,
  .wallet__Card__01 input[type="checkbox"]:checked:before {
    content: "";
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    right: 0;
    border-radius: 3px;
  }
  
  .wallet__Card__01 input[type="checkbox"]:checked:before {
    border-color: var(--blue-01-color);
    background: var(--blue-01-color);
  }
  
  .wallet__Card__One.active input[type="checkbox"]:before {
    border-color: var(--blue-01-color);
    background: var(--blue-01-color);
  }
  
  .wallet__Card__One input[type="checkbox"]:after,
  .wallet__Card__01 input[type="checkbox"]:checked:after {
    content: "";
    display: block;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 0 2px 2px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: 1px;
    right: 6px;
    opacity: 0;
  }
  
  .wallet__Card__01 input[type="checkbox"]:checked:after {
    opacity: 1;
  }
  
  .wallet__Card__One.active input[type="checkbox"]:after {
    opacity: 1;
  }
  
  /* =============================
  End Page About
  =======================================*/
  /* =============================
  Start Page Conatct
  =======================================*/
  .contactPage .all__Contact {
    padding: 100px 0 30px 0;
  }
  
  .contactPage .section__Info .titleTop::after {
    left: 105px;
  }
  
  /* =============================
  End Page Conatct
  =======================================*/
  /* =============================
  Start Page Terms
  =======================================*/
  .padding-top {
    padding-top: 70px;
  }
  
  .privacyPolicyTerms .section__InfoPages .titleTop::after {
    left: 163px;
  }
  
  #termsUse .section__InfoPages .titleTop::after {
    left: 150px;
  }
  
  .privacyPolicyTerms .section__InfoPages .title {
    font-size: 25px;
  }
  
  .privacyPolicyTerms .allTermsPrivacy .mainTerms .termsOne {
    margin-bottom: 15px;
  }
  
  .privacyPolicyTerms .allTermsPrivacy .mainTerms .termsOne .title {
    font-size: 20px;
    color: var(--blue-01-color);
    font-weight: bold;
    line-height: 1.7;
  }
  
  .privacyPolicyTerms .allTermsPrivacy .mainTerms .termsOne .text {
    font-size: 16px;
    color: var(--gray-01-color);
    font-weight: 400;
    padding: 10px 0;
    line-height: 2;
  }
  
  /* =============================
  End Page Terms
  =======================================*/
  /* ==============================
  Start Page Best Product
  ======================================*/
  /* Start search Hostel */
  .search__Hostel .row__Search .bottom__Content {
    margin: 0;
    border-radius: 30px;
  }
  
  .search__Hostel .row__Search .bottom__Content .formOneSearch {
    border: none;
    border-left: var(--border-04-color);
    border-radius: 0;
    background: transparent;
  }
  
  .search__Hostel .row__Search .bottom__Content .btn {
    padding: 13px 35px;
  }
  
  .bestProduct .section__Info .titleTop::after {
    left: 104px;
  }
  
  .left___Section__Content,
  .main__sectionInfo {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .main__sectionInfo {
    justify-content: space-between;
  }
  
  @media screen and (max-width: 630px) {
    .main__sectionInfo {
      justify-content: flex-start;
      flex-direction: column;
      align-items: flex-start;
    }
  
    #booking .main__sectionInfo {
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
    }
  
    #booking .dropMenuOneFilter .dropdown_with-chk__button {
      width: 130px;
    }
  
    #booking .dropMenuOneFilter .dropdown_with-chk__button img {
      width: 20px;
      height: auto;
    }
  
    #booking .dropMenuOneFilter .dropdown_with-chk__list {
      width: 130px;
    }
  
    #booking .dropMenuOneFilter .dropdown_with-chk__list-item label {
      right: 0;
    }
  }
  
  /* End Search Hostel */
  /* Start Drop menu filter */
  .dropMenuOneFilter .dropdown_with-chk {
    max-width: 343px;
    position: relative;
  }
  
  .dropMenuOneFilter .dropdown_with-chk__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    line-height: 18px;
    color: #444444;
    cursor: pointer;
    width: 150px;
    text-align: right;
    border: var(--border-04-color);
    border-color: var(--blue-01-color);
    border-radius: 12px;
    background: transparent;
    height: 45px;
    padding: 10px 15px;
  }
  
  .dropMenuOneFilter .dropdown_with-chk__button .textImg {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: bold;
    color: var(--blue-01-color);
  }
  
  .dropMenuOneFilter .dropdown_with-chk__button .iconDrop {
    color: var(--blue-01-color);
  }
  
  .dropMenuOneFilter .dropdown_with-chk__list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    position: absolute;
    left: 0;
    top: 50px;
    box-shadow: 0px 10px 20px 0px #88919d4d;
    border: var(--border-04-color);
    border-color: var(--blue-01-color);
    border-radius: 4px;
    background: var(--white-01-color);
    overflow: hidden;
    width: 150px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: 200ms ease;
    border-radius: 13px;
  }
  
  .dropMenuOneFilter .dropdown_with-chk__list_visible {
    opacity: 1;
    visibility: visible;
  }
  
  .dropMenuOneFilter .dropdown_with-chk__list-item {
    margin: 0;
    padding: 0;
    padding: 15px;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    position: relative;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    line-height: 18px;
    color: var(--blue-01-color);
    font-weight: bold;
    transition: 200ms ease;
    isolation: isolate;
    cursor: pointer;
  }
  
  .dropMenuOneFilter .dropdown_with-chk__list-item input[type="checkbox"],
  .dropMenuOneFilter .dropdown_with-chk__list-item input[type="radio"] {
    pointer-events: none;
  }
  
  .dropMenuOneFilter .dropdown_with-chk__list-item label {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 22px;
    padding-right: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: -1;
    flex-direction: row-reverse;
  }
  
  .dropMenuOneFilter .dropdown_with-chk__list-item_active {
    background: #f5f8fa;
  }
  
  .dropMenuOneFilter .dropdown_with-chk__list-item:hover {
    background: #f5f8fa90;
  }
  
  .dropMenuOneFilter .dropdown_with-chk__input_hidden {
    display: none;
  }
  
  .dropMenuOneFilter input[type="checkbox"] {
    appearance: none;
    position: relative;
    min-width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #e6eaed;
    transition: 600ms ease;
    cursor: pointer;
  }
  
  .dropMenuOneFilter input[type="checkbox"]:checked {
    background: #fedd2e;
    border: 1px solid #fedd2e;
    transition: 300ms ease;
  }
  
  .dropMenuOneFilter input[type="checkbox"]:checked::after {
    opacity: 1;
    visibility: visible;
    transition: 600ms ease;
  }
  
  .dropMenuOneFilter .dropdown_with-chk__button img {
    width: 25px;
    height: 25px;
  }
  
  /* End Drop menu Filter */
  
  .allBestProduct .allProducts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 15px;
  }
  
  .btnMoreProduct {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: var(--blue-01-color);
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    cursor: pointer;
    margin-top: 35px;
  }
  
  .btnMoreProduct .iconArrow {
    color: var(--turquoise-color);
  }
  
  .allBestProduct .productOne {
    display: none;
  }
  
  .allBestProduct .productOne.active {
    display: block;
  }
  
  .allBestProduct .productOne:nth-child(1),
  .allBestProduct .productOne:nth-child(2),
  .allBestProduct .productOne:nth-child(3),
  .allBestProduct .productOne:nth-child(4),
  .allBestProduct .productOne:nth-child(5),
  .allBestProduct .productOne:nth-child(6),
  .allBestProduct .productOne:nth-child(7),
  .allBestProduct .productOne:nth-child(8),
  .allBestProduct .productOne:nth-child(9) {
    display: inline-block;
    transition: 0.2s ease;
  }
  
  /* ==== Start Badge Product ========= */
  .productOne {
    position: relative;
  }
  
  .ribbon {
    position: absolute;
    padding: 1px 0 0 0.5em;
    width: 100px;
    font-size: 2em;
    margin: 0 -0.625em 0 0;
    line-height: 1.875em;
    color: #fff;
    border-radius: 0.156em 0 0 0.156em;
    background: #ff0000;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.5);
    z-index: 10;
    right: 13px;
    top: 20px;
    text-align: center;
  }
  
  .ribbon .at {
    width: 10px;
    border: 19px solid #ff0000;
    border-left-color: transparent;
    transform: rotate(0deg);
    display: block;
    position: absolute;
    top: 0;
    left: -23px;
  
    z-index: -1;
  }
  
  .ribbon:before,
  .ribbon:after {
    position: absolute;
    content: "";
    display: block;
  }
  
  .ribbon:before {
    width: 0.469em;
    height: 100%;
    padding: 0 0 0.438em;
    top: 0;
    right: -0.469em;
    background: inherit;
    border-radius: 0 0.313em 0.313em 0;
  }
  
  .ribbon:after {
    width: 0.313em;
    height: 0.313em;
    background: rgba(0, 0, 0, 0.35);
    bottom: -0.313em;
    right: -0.313em;
    border-radius: 0 0.313em 0.313em 0;
    box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.3);
  }
  
  @media (max-width: 820px) {
    .ribbon:before {
      right: -0.398em;
    }
  
    .ribbon:before,
    .ribbon:after {
      font-size: 0.714em;
    }
  }
  
  /* ==== End Badge Product ========= */
  
  /* Start Loader */
  .loaderMore {
    --clr: #383476;
    /* color of spining  */
    width: 40px;
    height: 40px;
    position: relative;
    display: none;
  }
  
  .loaderMore.active {
    display: block;
  }
  
  .loaderMore:before,
  .loaderMore:after {
    content: "";
    position: absolute;
    top: -10px;
    right: -10px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 10px solid transparent;
    border-top-color: var(--clr);
  }
  
  .loaderMore:before {
    z-index: 100;
    animation: spin01 1s infinite;
  }
  
  .loaderMore:after {
    border-color: var(--white-01-color);
  }
  
  @keyframes spin01 {
    0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }
  
    100% {
      -webkit-transform: rotate(-360deg);
      -ms-transform: rotate(-360deg);
      -o-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
  }
  
  /* End Loader */
  /* screen 1023 */
  @media screen and (max-width: 1023px) {
    .search__Hostel .row__Search .bottom__Content {
      height: 100%;
    }
  
    .search__Hostel .row__Search .bottom__Content .formOneSearch {
      width: 100%;
      border: var(--border-04-color);
      border-radius: 8px;
      background: var(--white-02-color);
    }
  
    .search__Hostel .bottom__Content .allFormInputs {
      padding: 30px;
    }
  }
  
  /* ==============================
  End Page Best Product
  ======================================*/
  /* ==============================
  Start Page Faq
  ======================================*/
  #SearchFaq .formOneSearch {
    width: 100%;
  }
  
  #SearchFaq .bottom__Content {
    height: 150px;
  }
  
  .FAQ .all__Faq .faqOne {
    border: var(--border-04-color);
    background: var(--white-01-color);
    padding: 35px 15px;
    border-radius: 15px;
    margin-bottom: 20px;
  }
  
  .FAQ .all__Faq .faqOne .mainFaq {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  .FAQ .all__Faq .faqOne .btnFaq {
    border-left: var(--border-04-color);
    padding-left: 15px;
  }
  
  .FAQ .all__Faq .faqOne .iconFaq {
    width: 30px;
    height: 30px;
  }
  
  .FAQ .all__Faq .faqOne button.course-accordion {
    background-color: transparent;
    color: var(--blue-01-color);
    cursor: pointer;
    padding: 8px;
    width: 100%;
    border: none;
    outline: none;
    font-size: 22px;
    font-weight: bold;
    transition: 0.4s;
    font-family: "Raleway";
    line-height: 1.5em;
    text-transform: none;
    letter-spacing: 0px;
    font-weight: 600;
    font-style: normal;
    text-align: left;
  }
  
  .FAQ .all__Faq .faqOne .btnFaq .faqText {
    font-size: 16px;
    color: var(--gray-01-color);
    font-weight: 400;
    padding: 10px 0;
  }
  
  .FAQ .all__Faq .faqOne .course-panel {
    background-color: var(--white-01-color);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    width: 100%;
    margin: 15px 0px 0 60px;
    max-width: fit-content;
  }
  
  .FAQ .all__Faq .faqOne .course-panel p {
    font-size: 15px;
    line-height: 1.6em;
    letter-spacing: 0.4px;
    font-weight: 400;
    font-style: normal;
    color: rgba(0, 0, 0, 0.88);
  }
  
  .FAQ .all__Faq .faqOne .course-panel.active {
    overflow: visible;
  }
  
  @media screen and (max-width: 1023px) {
  
    /*=====================
    Start Page Faq
    ======================*/
    #SearchFaq .bottom__Content .allFormInputs .mainForms {
      flex-direction: unset !important;
    }
  
    /*=====================
    End Page Faq
    ======================*/
    .opinions .all__Opinions .opinionOne .top__Content .date .dateTime {
      margin-top: 2.6px;
    }
  }
  
  /* Screen 767 */
  @media screen and (max-width: 767px) {
  
    /*=====================
    Start Page Faq
    ======================*/
    .FAQ .all__Faq .faqOne .iconFaq {
      width: fit-content;
      height: auto;
    }
  
    /*=====================
    End Page Faq
    ======================*/
  }
  
  /* Screen 450 */
  @media screen and (max-width: 450px) {
  
    /*=====================
    Start Page Faq
    ======================*/
    #SearchFaq .bottom__Content {
      height: 100%;
    }
  
    #SearchFaq .bottom__Content .allFormInputs .mainForms {
      flex-direction: column !important;
    }
  
    #SearchFaq .bottom__Content .btn {
      width: 100%;
    }
  
    .FAQ .all__Faq .faqOne .course-panel p,
    .FAQ .all__Faq .faqOne .btnFaq .faqText {
      font-size: 12px;
    }
  
    /*=====================
    End Page Faq
    ======================*/
  }
  
  /* ==============================
  End Page Faq
  ======================================*/
  /* ==============================
  Start Page Wallet
  ======================================*/
  /* Start modal Wallet */
  #modalWallet .modal-container-header {
    padding: 15px;
  }
  
  .wallet__Account__Modal.active,
  #modalWallet_Shipping.active {
    visibility: visible;
    right: 0;
    opacity: 1;
  }
  
  .wallet__Account__Modal .allWalletAccount {
    background: #fff;
    width: 38rem;
    position: absolute;
    right: -120%;
    top: 0;
    height: 100vh;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  
  .wallet__Account__Modal.active .allWalletAccount {
    right: 0;
  }
  
  .wallet__Account__Modal .allWalletAccount .arrow__Wallet__account,
  .wallet__Account__Modal .allWalletAccount .remove__Wallet__account,
  .sameModal .iconDots {
    padding: 6px 22px;
    border: var(--border-04-color);
    width: fit-content;
    border-radius: 8px;
    font-size: 17px;
    color: var(--blue-01-color);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
  }
  
  .wallet__Account__Modal .content_Wallet__Account {
    padding: 25px 0;
  }
  
  .wallet__Account__Modal .content_Wallet__Account .title,
  .wallet__Account__Modal .content_Wallet__Account .info__Content__One h1 {
    font-size: 20px;
    color: var(--blue-01-color);
    font-weight: bold;
    padding: 10px 0;
  }
  
  .wallet__Account__Modal .content_Wallet__Account .info__Content__One {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    border-bottom: var(--border-04-color);
    padding: 10px 0;
  }
  
  .wallet__Account__Modal .content_Wallet__Account .info__Content__One .info p {
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-01-color);
  }
  
  .wallet__Account__Modal .content_Wallet__Account .info__Content__One h1 {
    padding: 0;
  }
  
  .wallet__Account__Modal .content_Wallet__Account .info__content .info__Content__One img {
    width: 35px;
  }
  
  .wallet__Account__Modal .allWalletAccount .btnTransformationModal,
  #invoice .invoice__Wallet .btnInvoice,
  #booking .btnBooking {
    padding: 10px 60px;
    background: var(--blue-01-color);
    margin-bottom: 15px;
  }
  
  /* End Modal Wallet */
  /* Start modal Wallet_Shipping */
  
  #modalWallet_Shipping .allWalletAccount {
    width: 40rem;
    overflow-y: auto;
  }
  
  #modalWallet_Shipping .allWalletAccount::-webkit-scrollbar,
  #modalWallet_Shipping .allWalletAccount::-webkit-scrollbar-track,
  #modalWallet_Shipping .allWalletAccount::-webkit-scrollbar-thumb {
    display: none;
  }
  
  .wallet__Card {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0 25px 0;
  }
  
  .wallet__Card .wallet__Card__One {
    border: var(--border-04-color);
    display: flex;
    align-items: center;
    padding: 10px 8px;
    background: var(--white-03-color);
    cursor: pointer;
    border-radius: 6px;
    gap: 5px;
    height: 50px;
    width: 100px;
  }
  
  .wallet__Card .wallet__Card__One.active,
  #viewProductModal .details .allDetails .detailsOne.active {
    border-color: var(--blue-01-color);
  }
  
  .wallet__Card .wallet__Card__One:nth-child(1) img {
    width: 50px;
    height: auto;
  }
  
  .wallet__Card .wallet__Card__One .text,
  #viewProductModal .details .allDetails .detailsOne label .text {
    font-size: 12px;
    font-weight: bold;
    color: var(--blue-01-color) !important;
  }
  
  /* End modal Wallet_Shipping */
  /* Start modalWallet_ConvetPdf */
  
  #modalWallet_ConvetPdf .allWalletAccount,
  .sameModal .allWalletAccount {
    width: 40rem;
    overflow-y: auto;
  }
  
  #modalWallet_ConvetPdf .textDateInfo,
  #modalWallet_ConvetPdf .textDateInfo .timer,
  #modalWallet_ConvetPdf .card__walletPdf .cardOnePdf,
  #modalWallet_ConvetPdf .card__walletPdf .cardOnePdf .info .mainRate,
  .middleInfo .middleInfoOne,
  .middleInfo .middleInfoOne .info .mainInfo {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  #modalWallet_ConvetPdf .textDateInfo img {
    width: 20px;
  }
  
  #modalWallet_ConvetPdf .textDateInfo {
    font-size: 12px;
    font-weight: 400;
    color: var(--gray-01-color);
  }
  
  /*  Start wallet Card */
  #modalWallet_ConvetPdf .card__walletPdf {
    border-top: var(--border-04-color);
    border-bottom: var(--border-04-color);
    padding: 15px 0;
    margin: 15px 0;
  }
  
  #modalWallet_ConvetPdf .card__walletPdf .cardOnePdf {
    align-items: flex-start;
  }
  
  #modalWallet_ConvetPdf .card__walletPdf .cardOnePdf img {
    width: 70px;
  }
  
  #modalWallet_ConvetPdf .card__walletPdf .cardOnePdf .info .title,
  #modalWallet_ConvetPdf .card__walletPdf .cardOnePdf .info .mainRate .textRate {
    font-size: 16px;
    color: var(--black-01-color);
    padding: 0;
  }
  
  #modalWallet_ConvetPdf .card__walletPdf .cardOnePdf .info .mainRate {
    padding-top: 10px;
  }
  
  #modalWallet_ConvetPdf .card__walletPdf .cardOnePdf .info .mainRate .iconStar,
  .sameModal .sec__Content .contentOne .iconStar {
    font-size: 14px;
    color: var(--warning-01-color);
  }
  
  /*  End wallet Card */
  /* Start middle info */
  .middleInfo .middleInfoOne,
  .middleInfoPayment .tablePayment {
    background: var(--white-03-color);
    padding: 15px;
    border-radius: 6px;
  }
  
  .middleInfo .middleInfoOne img {
    width: 30px;
  }
  
  .middleInfo .middleInfoOne .info .mainInfo {
    font-weight: 400;
    color: var(--gray-01-color);
  }
  
  .middleInfo .middleInfoOne .info .mainInfo .iconLoacation {
    margin-right: 5px;
  }
  
  .middleInfoPayment .tablePayment,
  .middleInfoPayment .tablePayment table {
    width: 100%;
  }
  
  .middleInfoPayment .tablePayment tbody tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
  }
  
  .middleInfoPayment .tablePayment tbody .borderTop {
    border-top: var(--border-04-color);
    margin-top: 12px;
  }
  
  .middleInfoPayment .tablePayment tbody tr td {
    font-size: 15px;
    font-weight: 400;
    color: var(--gray-01-color);
  }
  
  .middleInfoPayment .tablePayment tbody tr .payText {
    font-size: 13px;
  }
  
  .middleInfoPayment .tablePayment tbody .price {
    color: var(--turquoise-color);
    font-weight: bold;
  }
  
  .middleInfoPayment .tablePayment tbody .price span {
    color: var(--gray-01-color);
  }
  
  /* End middle info */
  
  #modalWalletRate .imgModal {
    width: 70px;
  }
  
  #modalWalletRate .modal-container-body {
    padding: 0px 90px 20px 90px;
  }
  
  #modalWalletRate .numRates {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 0;
  }
  
  #modalWalletRate .numRates .numOneRate {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 17px;
    color: var(--blue-01-color);
    border-radius: 8px;
    background: var(--white-03-color);
    border: var(--border-04-color);
    font-weight: bold;
    cursor: pointer;
  }
  
  #modalWalletRate .numRates .numOneRate.active {
    background: var(--blue-01-color);
    border-color: var(--blue-01-color);
    color: var(--white-01-color);
  }
  
  #modalWalletRate .textRate {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  #modalWalletRate .textRate .textOne {
    font-size: 15px;
    color: var(--blue-01-color);
    font-weight: 400;
  }
  
  /* End modalWallet_ConvetPdf */
  
  /* start Top Wallet */
  .wallet__Section .top__Wallet {
    background: var(--blue-01-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
    padding: 30px;
  }
  
  .wallet__Section .top__Wallet img,
  .wallet__Card .wallet__Card__One img {
    width: auto;
    height: auto;
  }
  
  .wallet__Section .top__Wallet .right__Wallet .title {
    font-size: 25px;
    font-weight: bold;
    color: var(--white-01-color);
  }
  
  .wallet__Section .top__Wallet .right__Wallet .numWallet {
    font-size: 20px;
    color: var(--white-01-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .wallet__Section .top__Wallet .right__Wallet .numWallet .number {
    font-size: 70px;
  }
  
  .wallet__Section .date__Wallet {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    font-size: 17px;
    color: var(--off-white-color);
    font-weight: 400;
  }
  
  .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet,
  .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet .btn a {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet .btnAccount {
    background: var(--white-01-color);
  }
  
  .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet .btn {
    border-radius: 13px;
  }
  
  .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet .btnAccount a {
    color: var(--blue-01-color);
    font-weight: bold;
  }
  
  .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet .btnTransformation {
    background: #6d6a8f;
    border: var(--border-04-color);
  }
  
  .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet .btnTransformation a {
    color: var(--white-01-color);
    font-weight: bold;
  }
  
  /* End Top Wallet */
  /* Start all__Wallet */
  .all__Wallet .section__InfoPages .titleTop::after {
    left: 110px;
  }
  
  .all__Wallet .main__Wallet .walletOne {
    border: var(--border-04-color);
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 15px;
    background: var(--white-01-color);
    border-radius: 16px;
    margin-bottom: 15px;
  }
  
  .all__Wallet .main__Wallet .walletOne img {
    width: 25px;
    height: 25px;
  }
  
  .all__Wallet .main__Wallet .walletOne .info__Wallet {
    display: flex;
    align-items: center;
  }
  
  .all__Wallet .main__Wallet .walletOne .info__Wallet .iconWallet {
    padding: 0 30px;
  }
  
  .all__Wallet .main__Wallet .walletOne .info__Wallet .topInfoWallet {
    border-left: var(--border-04-color);
    padding: 0 15px;
    width: 100%;
  }
  
  .all__Wallet .main__Wallet .walletOne .info__Wallet .title {
    font-size: 20px;
    font-weight: bold;
    color: var(--blue-01-color);
    padding: 10px 0;
  }
  
  .all__Wallet .main__Wallet .walletOne .info__Wallet .textWallet {
    font-size: 16px;
    color: var(--gray-01-color);
    line-height: 1.8;
  }
  
  .all__Wallet .main__Wallet .walletOne .info__Wallet .textWallet .LinkWalletText {
    color: var(--blue-01-color);
    font-weight: bold;
    text-decoration: underline;
  }
  
  .all__Wallet .main__Wallet .walletOne .dateTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .all__Wallet .main__Wallet .walletOne .info__Wallet {
    width: 100%;
  }
  
  .all__Wallet .main__Wallet .walletOne .info__Wallet .priceWallet,
  .sameModal .main__booking__bottom .priceWallet {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
  }
  
  .all__Wallet .main__Wallet .walletOne .info__Wallet .priceWallet .priceNum,
  .sameModal .main__booking__bottom .priceWallet .priceNum {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    color: var(--gray-01-color);
  }
  
  .all__Wallet .main__Wallet .walletOne .date__Wallet {
    color: var(--gray-01-color);
  }
  
  /* End all__Wallet */
  
  /* Screen 768px */
  @media screen and (max-width: 768px) {
  
    /* ==============================
  Start Page Wallet
  ======================================*/
    .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet .btn a {
      font-size: 13px;
    }
  
    .wallet__Section .top__Wallet .right__Wallet .numWallet {
      font-size: 15px;
    }
  
    .wallet__Section .top__Wallet .right__Wallet .numWallet .number {
      font-size: 37px;
    }
  
    .wallet__Section .top__Wallet .right__Wallet .title {
      font-size: 20px;
    }
  
    /* ==============================
  End Page Wallet
  ======================================*/
  }
  
  /* Screen 550px */
  @media screen and (max-width: 550px) {
  
    /* ==============================
  Start Page Wallet
  ======================================*/
    .wallet__Section .top__Wallet {
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
    }
  
    .wallet__Section .date__Wallet {
      justify-content: flex-start;
      padding: 10px 0;
    }
  
    .wallet__Section .right__Wallet {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
    }
  
    .wallet__Section .top__Wallet .right__Wallet .title {
      font-size: 15px;
    }
  
    .wallet__Section .top__Wallet .right__Wallet .numWallet .number {
      font-size: 30px;
    }
  
    /* .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet {
      display: block;
    } */
    .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet .btn {
      width: 100%;
    }
  
    .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet .btn a {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
  
    .all__Wallet .main__Wallet .walletOne {
      padding: 15px 0;
    }
  
    .all__Wallet .main__Wallet .walletOne .info__Wallet .iconWallet {
      padding: 0 15px;
    }
  
    .all__Wallet .main__Wallet .walletOne .info__Wallet .textWallet,
    .all__Wallet .main__Wallet .walletOne .date__Wallet {
      font-size: 11px;
    }
  
    .all__Wallet .main__Wallet .walletOne .info__Wallet .title {
      font-size: 14px;
    }
  
    /* ==============================
  End Page Wallet
  ======================================*/
  }
  
  /* ====================================================
  End Page Wallet
  =============================================================*/
  
  /* ===========================================
  Start Page invoice
  ==================================================*/
  #invoice .section__InfoPages .titleTop::after {
    left: 67px;
  }
  
  #invoice .invoice__Wallet,
  #invoice .invoice__Wallet .btnInvoice a,
  #booking .invoice__Wallet,
  #booking .invoice__Wallet .btnBooking a {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  #invoice .invoice__Wallet .btnInvoice,
  #booking .btnBooking {
    padding: 10px 40px;
  }
  
  #invoice .invoice__Wallet .btnInvoice a,
  #booking .invoice__Wallet .btnBooking a {
    justify-content: center;
    gap: 10px;
  }
  
  /* ===========================================
  End Page invoice
  ==================================================*/
  /* ===========================================
  Start Page notifications
  ==================================================*/
  #notifications .section__InfoPages .titleTop::after {
    left: 90px;
  }
  
  #notifications .main__Notifications,
  #conversations .main__Conver {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    flex-wrap: wrap;
    gap: 15px;
  }
  
  #notifications .main__Notifications .btnNotifi {
    padding: 10px 50px;
    margin: 0;
  }
  
  #notifications .main__Notifications .btnNotifi02 {
    padding: 10px 35px;
    background: transparent;
    border: var(--border-04-color);
    box-shadow: none;
    margin-left: 10px;
  }
  
  #notifications .main__Notifications .btnNotifi02 a {
    color: var(--blue-01-color);
  }
  
  /* ===========================================
  End Page notifications
  ==================================================*/
  
  /* ===========================================
  Start Page conversations
  ==================================================*/
  #conversations .walletOne .info__Wallet .iconWallet img {
    width: 85px;
    height: auto;
  }
  
  #conversations .all__Wallet .section__InfoPages .titleTop::after {
    left: 85px;
  }
  
  #conversations .chat {
    position: absolute;
    right: 7%;
    top: 43%;
    z-index: 100;
  }
  
  #conversations .chat .main__Chat {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
  }
  
  #conversations .chat .main__Chat .chatOne {
    width: 300px;
    height: auto;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 8px;
    /* display: none; */
  }
  
  #conversations .chat .main__Chat .chatOne img {
    width: 15px;
    cursor: pointer;
  }
  
  #conversations .chat .main__Chat .chatOne .top__chat,
  #conversations .chat .main__Chat .chatOne .bottom__chat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--blue-01-color);
    color: var(--white-01-color);
    padding: 10px;
    border-radius: 8px;
  }
  
  #conversations .chat .main__Chat .chatOne .top__chat .right__Content,
  #conversations .chat .main__Chat .chatOne .top__chat .left__Content,
  #conversations #ChatUser .MessageChat_info {
    display: flex;
    gap: 12px;
    align-items: center;
  }
  
  #conversations .chat .main__Chat .chatOne .top__chat .left__Content .icon {
    font-size: 18px;
    cursor: pointer;
  }
  
  #conversations .chat .main__Chat .chatOne .top__chat .left__Content .iconClose {
    background: #fff;
    color: var(--blue-01-color);
    border-radius: 50px;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 14px;
  }
  
  #conversations .chat .main__Chat .chatOne .right__Content p {
    text-align: left;
    color: var(--silver-color);
  }
  
  #conversations .chat .main__Chat .chatOne .top__chat .right__Content img {
    width: 40px;
    height: 40px;
    border: var(--border-04-color);
    border-radius: 6px;
  }
  
  #conversations .chat .main__Chat .chatOne .infoMessageService .title {
    font-size: 16px;
    font-weight: bold;
    color: var(--blue-01-color);
    padding-bottom: 8px;
  }
  
  #conversations .chat .main__Chat .chatOne .textDay,
  #conversations .chat .main__Chat .chatOne p {
    text-align: center;
    font-size: 12px;
    color: var(--gray-01-color);
    font-weight: 400;
    padding-bottom: 10px;
  }
  
  #conversations .chat .main__Chat .chatOne .textMessage,
  #conversations .chat .main__Chat .chatOne .textMessageUser {
    text-align: left;
  }
  
  #conversations .chat .main__Chat .chatOne .textOne {
    display: flex;
    flex-direction: column;
  }
  
  #conversations .chat .main__Chat .chatOne .textOne .textSend {
    background: var(--blue-01-color);
    padding: 10px 15px;
    width: fit-content;
    color: #fff;
    border-radius: 50px;
  }
  
  #conversations .chat .main__Chat .chatOne .textMessageServices {
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
  }
  
  #conversations .chat .main__Chat .chatOne .textMessageServices .textSend {
    background: var(--white-03-color);
    color: var(--gray-01-color);
  }
  
  #conversations .chat .main__Chat .chatOne .timeSend {
    font-size: 14px;
    color: var(--gray-01-color);
    font-weight: 400;
    margin-right: 15px;
    margin-top: 5px;
  }
  
  #conversations .chat .main__Chat .chatOne .middle__chat {
    padding: 25px 15px;
  }
  
  #conversations .chat .main__Chat .chatOne .bottom__chat {
    background: var(--white-03-color);
    border-radius: 50px;
    margin: 10px 15px;
    padding: 8px 20px;
  }
  
  #conversations .chat .main__Chat .chatOne .bottom__chat input {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    padding: 5px 10px;
  }
  
  #conversations .chat .main__Chat .chatOne .bottom__chat .file {
    display: none;
  }
  
  #conversations #ChatUser .right__Content .text {
    color: var(--turquoise-color);
  }
  
  #conversations #ChatUser .MessageChat_info {
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: var(--border-04-color);
  }
  
  #conversations #ChatUser .MessageChat_info img {
    width: 50px;
  }
  
  #conversations #ChatUser .MessageChat_info .btnBookChat {
    padding: 5px 10px;
    margin: 0;
    margin-top: 6px;
  }
  
  #conversations #ChatUser .MessageChat_info .btnBookChat a,
  #conversations #ChatUser .MessageChat_info .title {
    font-size: 14px;
  }
  
  #conversations #ChatUser .MessageChat_info p {
    padding: 0 !important;
    text-align: left !important;
  }
  
  #conversations #ChatUser .infoMessageUser {
    padding-bottom: 20px;
  }
  
  #modal__Conversations .flex__content .allFlexContent {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 0;
    border-top: var(--border-04-color);
    margin-top: 15px;
  }
  
  #modal__Conversations .flex__content .allFlexContent .flex_Content_one {
    background: var(--white-03-color);
    width: fit-content;
    padding: 10px 25px;
    font-size: 12px;
    font-weight: 400;
    color: #000;
    border-radius: 6px;
  }
  
  #modal__Conversations .flex__content .allFlexContent .flex_Content_one .numPer {
    color: var(--turquoise-color);
    font-weight: bold;
  }
  
  #modal__Conversations .flex__content .textInfo,
  #modal__Conversations .end_Content .allText .textEnd {
    font-size: 12px;
    font-weight: 400;
    color: var(--gray-01-color);
    line-height: 1.8;
  }
  
  #modal__Conversations .end_Content .title {
    font-size: 16px;
    color: var(--blue-01-color);
    padding: 10px 0;
    font-weight: bold;
  }
  
  #modal__Conversations .end_Content .allText .textEnd {
    padding-bottom: 10px;
    position: relative;
  }
  
  #modal__Conversations .end_Content .allText .textEnd::after,
  .main__condition .infoOne .text::after,
  #modalConditions .content .text::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    background: var(--turquoise-color);
    left: -25px;
    top: 34%;
    transform: translate(50%, -50%);
    border-radius: 50%;
  }
  
  /* ===========================================
  End Page conversations
  ==================================================*/
  
  /* ===========================================
  Start Page booking
  ==================================================*/
  
  #booking .all__Wallet .section__InfoPages .titleTop::after {
    left: 71px;
  }
  
  #booking .bookingOne .info__Wallet .iconWallet {
    padding: 0;
    margin: 0 15px;
  }
  
  #booking .bookingOne .info__Wallet .iconWallet img {
    width: 120px !important;
    height: 100px !important;
    border-radius: 13px;
  }
  
  #booking .bookingOne .info__Wallet .textConfirm {
    font-size: 16px;
    color: var(--turquoise-color);
    margin-left: 7px;
  }
  
  #booking .bookingOne .info__Wallet .textInfoTop {
    font-size: 16px;
    color: var(--gray-01-color);
    font-weight: 400;
  }
  
  #booking .main__booking__bottom,
  .sameModal .main__booking__bottom {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  #booking .main__booking__bottom .bookingWall .textBook {
    color: var(--black-01-color);
    padding-top: 5px;
  }
  
  #booking .invoice__Wallet,
  #booking .main__booking__bottom {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  #booking .main__booking__bottom {
    gap: 30px;
  }
  
  /* Start modal booking */
  
  .sameModal .allWalletAccount {
    width: 42rem;
  }
  
  .sameModal .iconDots,
  .sameModal .content_Wallet__AccountTop .title,
  .sameModal .content_Wallet__AccountTop .text {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .sameModal .iconDots img {
    width: 20px;
    height: 20px;
  }
  
  .sameModal .content_Wallet__AccountTop {
    padding: 10px 0 15px 0;
  }
  
  .sameModal .content_Wallet__AccountTop .title,
  .sameModal .content_Wallet__AccountTop .text {
    justify-content: flex-start;
    gap: 10px;
    padding: 15px 0 10px 0;
  }
  
  .sameModal .content_Wallet__AccountTop .title .confirm {
    background: var(--green-01-color);
    padding: 1px 10px;
    color: var(--white-01-color);
    font-size: 14px;
    border-radius: 4px;
    height: 23px;
    line-height: 22px;
  }
  
  .sameModal .content_Wallet__AccountTop .text .iconlocation {
    color: var(--gray-01-color);
  }
  
  .sameModal .content_Wallet__AccountTop .text {
    padding: 0;
  }
  
  .sameModal .sec__Content .contentOne,
  .sameModal .sec__Content .contentOne .allRate {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  .sameModal .sec__Content {
    padding: 25px 0;
    border-top: var(--border-04-color);
  }
  
  .sameModal .sec__Content .contentOne .title {
    font-size: 16px;
    font-weight: bold;
    color: var(--blue-01-color);
  }
  
  .sameModal .sec__Content .contentOne img {
    width: 45px;
  }
  
  .sameModal .sec__Content .contentOne .numRate {
    color: var(--gray-01-color);
    font-size: 14px;
  }
  
  .sameModal .main__booking__bottom .priceWallet img {
    width: 20px;
  }
  
  .sameModal .main__booking__bottom .priceWallet .iconClock {
    font-size: 17px;
    color: var(--gray-01-color);
  }
  
  .sameModal .main__booking__bottom .priceWallet .priceNum {
    font-size: 10px;
  }
  
  .sameModal .main__booking__bottom .dayNightNum {
    margin-left: 38px;
  }
  
  .sameModal .middleInfoPayment {
    margin-top: 15px;
  }
  
  .sameModal .middleInfoPayment02 {
    border-top: var(--border-04-color);
    padding: 10px 0;
    margin-top: 40px;
  }
  
  .sameModal .middleInfoPayment .title {
    font-size: 15px;
    color: var(--blue-01-color);
    font-weight: bold;
  }
  
  .sameModal .middleInfoPayment .titleDetailsPay {
    margin-bottom: 12px;
  }
  
  .sameModal .tabOne,
  .sameModal .tabOne .rightTab,
  .sameModal .imagesBottom .mainImages {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .sameModal .tabOne {
    justify-content: space-between;
    background: var(--white-03-color);
    padding: 10px;
    margin: 10px 0;
    border-radius: 8px;
  }
  
  .sameModal .tabOne img {
    width: 30px;
  }
  
  .sameModal .tabOne .text {
    font-size: 15px;
    color: var(--blue-01-color);
    font-weight: bold;
  }
  
  .sameModal .iconArrow {
    font-size: 16px;
    color: var(--gray-01-color);
  }
  
  .sameModal .imagesBottom .title {
    font-size: 16px;
    color: var(--black-01-color);
    font-weight: bold;
  }
  
  .sameModal .imagesBottom .mainImages {
    margin: 20px 0 10px 0;
  }
  
  .sameModal .imagesBottom .mainImages img {
    width: 100px;
  }
  
  .sameModal .dropdown {
    background: #fff;
    position: absolute;
    z-index: 100;
    width: 224px;
    right: 20px;
    top: 80px;
    box-shadow: var(--box-shadow);
    padding: 15px;
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
  }
  
  .sameModal .dropdown.active {
    opacity: 1;
    visibility: visible;
  }
  
  .sameModal .dropdown::after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-right: 10px solid #ff3c3c00;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #fdfdfd;
    margin: -10px 30px 0 0;
    top: 0;
    right: 0;
  }
  
  .sameModal .dropdown .linkEdit {
    width: 100%;
    display: flex;
    padding: 10px;
    align-items: center;
    background: #f8f8fb;
    margin-bottom: 5px;
    font-size: 14px;
    color: var(--blue-01-color);
    font-weight: bold;
    gap: 10px;
  }
  
  .sameModal .dropdown .text {
    font-size: 12px;
    color: var(--gray-01-color);
    font-weight: 400;
    padding: 10px 0;
  }
  
  .sameModal .dropdown .text a {
    color: var(--blue-01-color);
    text-decoration: underline;
    font-weight: bold;
  }
  
  .sameModal .dropdown .linkEdit .warning {
    color: var(--red-color);
  }
  
  .sameModal .dropdown img {
    width: 15px;
  }
  
  /* End modal booking */
  
  @media screen and (max-width: 550px) {
    #booking .all__Wallet .main__Wallet .walletOne .info__Wallet {
      flex-direction: column;
    }
  
    #booking .all__Wallet .main__Wallet .walletOne .info__Wallet .title {
      font-size: 10px;
    }
  
    #booking .main__booking__bottom .bookingWall .text,
    #booking .main__booking__bottom .bookingWall span {
      font-size: 12px !important;
    }
  }
  
  /* ===========================================
  End Page booking
  ==================================================*/
  /* ===================================
  Start Page More Estate
  ===================================*/
  .allEstate {
    display: flex;
    flex-flow: row nowrap;
    gap: 15px;
  }
  
  .allEstate .right__Estate_DropDwons {
    width: 100%;
    min-width: 300px;
    max-width: 290px;
  }
  
  .allEstate .allBestProduct {
    max-width: calc(100% - 300px);
  }
  
  .allEstate .allBestProduct .allProducts {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
  }
  
  .allEstate .allBestProduct .allProducts .productOne {
    position: relative;
    flex: 1 1 22rem;
  }
  
  /* Screen 1128px */
  @media screen and (max-width: 1024px) {
  
    /* ============================================
  Start page More Estate
  =========================================*/
    .allEstate {
      flex-flow: column;
      gap: 50px;
    }
  
    .allEstate .right__Estate_DropDwons,
    .allEstate .allBestProduct,
    .right__Estate_DropDwons .dropdown-box {
      width: 100%;
      max-width: 100%;
      min-width: 100%;
    }
  
    .right__Estate_DropDwons .content .tabOne__Info {
      height: 40px;
    }
  
    .allEstate .right__Estate_DropDwons {
      margin-top: 40px;
    }
  
    /* ============================================
  End page More Estate
  =========================================*/
  }
  
  .right__Estate_DropDwons .allDropDowns {
    background: var(--white-01-color);
  }
  
  .right__Estate_DropDwons .dropdown-box {
    width: 300px;
    background: #fff;
    height: 100%;
    font-family: sans-serif;
    cursor: pointer;
  }
  
  .right__Estate_DropDwons .opener,
  .right__Estate_DropDwons .topTitleDropDowns {
    width: 100%;
    background: var(--white-01-color);
    padding: 18.3px 15px;
    border-bottom: var(--border-04-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .right__Estate_DropDwons .opener .rightBox img {
    width: 17px;
  }
  
  .right__Estate_DropDwons .tabOne__Info svg,
  .right__Estate_DropDwons .rightBox svg {
    width: 17px !important;
    height: 17px !important;
  }
  
  .right__Estate_DropDwons .topTitleDropDowns {
    background: var(--off-white-color);
    padding: 12px 12px;
    border: 0;
  }
  
  .right__Estate_DropDwons .topTitleDropDowns .btnFilterRemove {
    padding: 6px 12px;
    margin: 0;
    background: var(--blue-01-color);
  }
  
  .right__Estate_DropDwons .topTitleDropDowns .btnFilterRemove a {
    font-size: 12px;
  }
  
  .right__Estate_DropDwons .opener .iconPlus {
    font-size: 14px;
    padding: 4px 10px;
    transition: 0.5s ease;
    color: var(--gray-01-color);
    background: var(--off-white-color);
  }
  
  .right__Estate_DropDwons .iconBox {
    font-size: 17px;
    color: var(--turquoise-color);
  }
  
  .right__Estate_DropDwons .rightBox {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .right__Estate_DropDwons .rightBox .title {
    color: var(--black-01-color);
  }
  
  .right__Estate_DropDwons .content {
    width: 100%;
    min-height: 0;
    max-height: 0;
    background: var(--white-01-color);
    color: lightgrey;
    overflow: hidden;
    padding: 0 5px;
    transition: 0.5s ease;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  
  .right__Estate_DropDwons .content .tabOne__Info {
    border: var(--border-04-color);
    padding: 8px 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--gray-01-color);
    font-weight: 400;
    border-radius: 8px;
    width: fit-content;
  }
  
  .right__Estate_DropDwons .content .tabOne__Info.active {
    border-color: var(--turquoise-color);
  }
  
  .right__Estate_DropDwons .content .tabOne__Info.active .iconBox01,
  .right__Estate_DropDwons .content .tabOne__Info.active svg {
    color: var(--turquoise-color);
    fill: var(--turquoise-color) !important;
  }
  
  .right__Estate_DropDwons .rightBox svg rect {
    fill: var(--turquoise-color);
    stroke: var(--turquoise-color);
  }
  
  .right__Estate_DropDwons .rightBox .svg rect {
    fill: transparent;
    stroke: transparent;
  }
  
  .right__Estate_DropDwons .content .tabOne__Info.active .text {
    color: var(--blue-01-color);
  }
  
  .right__Estate_DropDwons .content-active {
    padding: 15px;
    max-height: 200px;
    min-height: 100px;
    transition: 0.5s ease;
  }
  
  .right__Estate_DropDwons .counterOne {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;
    border-bottom: var(--border-04-color);
    padding-bottom: 10px;
  }
  
  .right__Estate_DropDwons .counterOne .text {
    font-weight: bold;
    color: var(--gray-01-color);
    font-size: 14px;
  }
  
  .right__Estate_DropDwons .counter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    gap: 8px;
  }
  
  .right__Estate_DropDwons .counter__btn {
    font-size: 16px;
    font-weight: 700;
    border: 1;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    padding: 3px 12px;
    color: var(--blue-01-color);
    background: var(--off-white-color);
    transition: all 0.5s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .right__Estate_DropDwons .counter__input {
    width: 30px;
    text-align: center;
    background: transparent;
    border: none;
    font-size: 20px;
    font-weight: bold;
  }
  
  .right__Estate_DropDwons .counter__btn--minus.disabled,
  .right__Estate_DropDwons .counter__btn--plus.disabled {
    border: 1px solid #c4c4c4;
    color: #c4c4c4;
    cursor: not-allowed;
  }
  
  .right__Estate_DropDwons .counter__btn.active,
  .right__Estate_DropDwons .counter__btn:hover {
    background: var(--blue-01-color);
    color: var(--white-01-color);
  }
  
  .right__Estate_DropDwons .bottom {
    text-align: center;
    background: var(--off-white-color);
    padding: 10px 0;
    font-size: 17px;
    color: var(--blue-01-color);
    border-radius: 5px;
    margin-top: 33px;
  }
  
  .right__Estate_DropDwons .bottom .iconArrow {
    color: var(--turquoise-color);
  }
  
  .right__Estate_DropDwons .wrapper {
    width: 400px;
    background: #fff;
    border-radius: 10px;
  }
  
  .right__Estate_DropDwons .price-input {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }
  
  .right__Estate_DropDwons .price-input .field {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
  }
  
  .right__Estate_DropDwons .price-input .field span {
    font-size: 17px;
    font-weight: 400;
    color: var(--blue-01-color);
  }
  
  .right__Estate_DropDwons .field input {
    width: 100%;
    height: 100%;
    outline: none;
    font-size: 19px;
    border-radius: 5px;
    border: none;
    -moz-appearance: textfield;
  }
  
  .right__Estate_DropDwons .textRight {
    margin-right: 65px;
  }
  
  .right__Estate_DropDwons input[type="number"]::-webkit-outer-spin-button,
  .right__Estate_DropDwons input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  
  .right__Estate_DropDwons .price-input .separator {
    width: 130px;
    display: flex;
    font-size: 19px;
    align-items: center;
    justify-content: center;
  }
  
  .right__Estate_DropDwons .slider {
    height: 5px;
    position: relative;
    background: #ddd;
    border-radius: 5px;
  }
  
  .right__Estate_DropDwons .slider .progress {
    height: 100%;
    right: 25%;
    left: 25%;
    position: absolute;
    border-radius: 5px;
    background: var(--blue-01-color);
  }
  
  .right__Estate_DropDwons .range-input {
    position: relative;
  }
  
  .right__Estate_DropDwons .range-input input {
    position: absolute;
    width: 100%;
    height: 5px;
    top: -5px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }
  
  .right__Estate_DropDwons input[type="range"]::-webkit-slider-thumb {
    height: 17px;
    width: 17px;
    border-radius: 5px;
    background: var(--blue-01-color);
    pointer-events: auto;
    -webkit-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  }
  
  .right__Estate_DropDwons input[type="range"]::-moz-range-thumb {
    height: 17px;
    width: 17px;
    border: none;
    border-radius: 5px;
    background: var(--blue-01-color);
    pointer-events: auto;
    -moz-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
  }
  
  /* ===================================
  End Page More Estate
  ===================================*/
  /* =============================
  Start Page View Product
  =============================*/
  
  .cardProduct .all__CardProduct {
    display: flex;
    gap: 35px;
    border-bottom: var(--border-04-color);
    border-width: 2px;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct {
    overflow-x: hidden;
    width: 550px;
    height: 500px;
    position: relative;
    cursor: pointer;
  }
  
  .cardProduct .all__CardProduct .info .title {
    font-size: 25px;
    color: var(--blue-01-color);
    font-weight: bold;
    padding-top: 33px;
  }
  
  .cardProduct .all__CardProduct .info .allText .title {
    padding: 0;
  }
  
  .cardProduct .all__CardProduct .info .rate,
  .cardProduct .all__CardProduct .info .mainPrice,
  .cardProduct .all__CardProduct .info .allText,
  .cardProduct .all__CardProduct .info .allText .textOne,
  .cardProduct .all__CardProduct .info .buttonsOne {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .cardProduct .all__CardProduct .info .mainPrice {
    padding: 15px 0;
    border-bottom: var(--border-04-color);
  }
  
  .cardProduct .all__CardProduct .info .rate .icon {
    color: var(--gray-01-color);
  }
  
  .cardProduct .all__CardProduct .info .rate .text,
  .cardProduct .all__CardProduct .info .numRate,
  .cardProduct .all__CardProduct .info .allText .content .title,
  .cardProduct .all__CardProduct .info .allText .content .num {
    font-size: 16px;
    color: var(--gray-01-color);
    font-weight: 400;
  }
  
  .cardProduct .all__CardProduct .info .rate {
    padding: 20px 0;
  }
  
  .cardProduct .all__CardProduct .info .rate .rateStar .icon,
  .opinions .all__Opinions .opinionOne .rateOpinion .iconStar {
    color: var(--warning-01-color);
    font-size: 16px;
  }
  
  .cardProduct .all__CardProduct .info .mainPrice .priceOne {
    font-size: 16px;
    font-weight: bold;
    color: var(--turquoise-color);
  }
  
  .cardProduct .all__CardProduct .info .mainPrice .linePrice {
    color: var(--red-color);
    text-decoration: line-through;
  }
  
  .cardProduct .all__CardProduct .info svg {
    width: 20px;
  }
  
  .cardProduct .all__CardProduct .info .allText {
    gap: 30px;
  }
  
  .cardProduct .all__CardProduct .info .buttonsOne01 {
    padding: 15px 0;
  }
  
  .cardProduct .all__CardProduct .info .buttonsOne .iconWishList {
    padding: 10px 12px;
    width: initial;
    height: initial;
    line-height: initial;
  }
  
  .cardProduct .all__CardProduct .info .buttonsOne .share {
    font-size: 17px;
    color: var(--blue-01-color);
  }
  
  .cardProduct .all__CardProduct .info .buttonsOne .btnBook {
    margin: 0;
    width: 100%;
    padding: 9px;
  }
  
  .cardProduct .all__CardProduct .info .buttonsOne .btnBook .iconMessage {
    margin-right: 10px;
  }
  
  .cardProduct .all__CardProduct .info .buttonsOne .infoButton .title,
  .cardProduct .all__CardProduct .info .buttonsOne .infoButton .text {
    font-size: 14px;
    color: var(--turquoise-color);
    font-weight: 400;
    padding: 0;
  }
  
  .cardProduct .all__CardProduct .info .buttonsOne .infoButton {
    width: 40%;
  }
  
  .cardProduct .all__CardProduct .info .buttonsOne .infoButton .text {
    color: var(--gray-01-color);
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .gallery {
    width: 100%;
    max-width: 620px;
    margin: 0px auto;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .gallery-slider {
    width: 100%;
    margin: 0 0 10px 0;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .gallery-slider .swiper-slide {
    width: auto;
    height: 400px;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .gallery-slider .swiper-slide img {
    display: block;
    width: auto;
    height: 100%;
    margin: 0 auto;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .gallery-thumbs {
    width: 100%;
    padding: 0;
    overflow: hidden;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .gallery-thumbs .swiper-slide {
    width: 100px;
    height: 100px;
    text-align: center;
    overflow: hidden;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .gallery-thumbs .swiper-slide img {
    width: auto;
    height: 100%;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .swiper-container {
    width: 100%;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .swiper-slide {
    background-size: cover;
    background-position: center;
    border-radius: 13px;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .gallery-top {
    height: 68%;
    width: 100%;
    margin-bottom: 15px;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
  }
  
  .cardProduct .all__CardProduct .imgCardProduct .gallery-thumbs .swiper-slide {
    height: 80px;
    background-position: top;
    margin: -6px 0;
    border-radius: 13px;
  }
  
  .cardProduct .swiper-button-prev {
    top: 155px;
    left: initial;
    right: initial;
    font-size: 20px;
    color: var(--blue-01-color);
  }
  
  /* End Card Product */
  
  /* start Card View */
  .card_View .all__Card__View,
  .rates .allRate {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
  }
  
  .card_View .all__Card__View .card__View__One,
  .rates .allRate .rateOne {
    background: #e9e9e9;
    padding: 15px;
    border-radius: 6px;
  }
  
  .card_View .all__Card__View .card__View__One .icon {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
  }
  
  .card_View .all__Card__View .card__View__One .icon .iconBox {
    color: var(--turquoise-color);
    font-size: 16px;
  }
  
  .card_View .all__Card__View .card__View__One .icon img {
    width: 20px;
  }
  
  .card_View .all__Card__View .card__View__One .icon .title,
  .card_View .textBottom .titleText,
  .main__condition .infoOne .title,
  .rates .allRate .rateOne .titleBottom,
  .opinions .all__Opinions .opinionOne .titleName {
    font-size: 16px;
    color: var(--blue-01-color);
    font-weight: bold;
  }
  
  .card_View .all__Card__View .card__View__One .text,
  .card_View .textBottom .text,
  .conditionBook .main__condition .infoOne text {
    font-size: 13px;
    color: var(--gray-01-color);
  }
  
  .card_View .textBottom {
    padding: 25px 0 0 0;
  }
  
  .card_View .textBottom .text {
    padding: 10px 0;
    line-height: 2;
    max-width: 850px;
  }
  
  /* End Card View */
  /* start condition Book */
  .conditionBook {
    display: flex;
    gap: 45px;
    padding: 25px 0;
  }
  
  .conditionBook .map iframe {
    height: 400px;
  }
  
  .main__condition .infoOne {
    padding-bottom: 10px;
  }
  
  .main__condition .infoOne .text {
    font-size: 14px;
    line-height: 1.6;
    padding: 10px 0;
    position: relative;
  }
  
  .main__condition .infoOne .text::after {
    top: 50%;
  }
  
  .main__condition01 .infoOne .text {
    padding: 5px;
    font-size: 13px;
  }
  
  .main__condition01 .infoOne .textOne {
    max-width: 500px;
  }
  
  .main__condition01 .infoOne .allText {
    display: flex;
    align-items: center;
    gap: 15px;
  }
  
  /* End condition Book */
  /* Start slider__Products */
  .slider__Products {
    margin: 100px 0;
  }
  
  .slider__Products .section__Info .title {
    font-size: 20px;
    color: var(--blue-01-color);
  }
  
  .slider__Products .all__Slider__Product,
  .rates .allRate {
    margin-top: 18px;
    padding-bottom: 40px;
    border-bottom: var(--border-04-color);
    border-width: 2px;
  }
  
  .slider__Products .all__Slider__Product .productOne .mainProduct .image__Product::after {
    height: 100%;
  }
  
  .slider__Products .all__Slider__Product .owl-nav {
    position: absolute;
    top: -50px;
    display: flex;
    gap: 10px;
  }
  
  .owl-carousel .owl-nav button.owl-next,
  .owl-carousel .owl-nav button.owl-prev {
    font-size: 20px !important;
    color: var(--blue-01-color) !important;
  }
  
  .owl-carousel,
  .bx-wrapper {
    direction: rtl !important;
  }
  
  .owl-carousel,
  .owl-item {
    direction: ltr;
  }
  
  /* End slider__Products */
  /* Start section Rates */
  .rates {
    padding: 50px 0;
  }
  
  .section__InfoPages .title01 {
    color: var(--blue-01-color);
  }
  
  .rates .allRate .rateOne {
    text-align: center;
  }
  
  .rates .allRate .rateOne .titleTop {
    font-size: 16px;
    color: var(--black-01-color);
    font-weight: 400;
    padding: 10px 0;
  }
  
  .rates .allRate .rateOne .progressbar {
    display: inline-block;
    width: 100px;
    margin: 15px;
  }
  
  .rates .allRate .rateOne .circle {
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    display: inline-block;
    position: relative;
    text-align: center;
  }
  
  .rates .allRate .rateOne .circle canvas {
    vertical-align: middle;
  }
  
  .rates .allRate .rateOne .circle div {
    position: absolute;
    top: 30px;
    right: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
  }
  
  .circle strong i {
    font-style: normal;
    font-size: 0.6em;
    font-weight: normal;
  }
  
  .circle span {
    display: block;
    color: #aaa;
    margin-top: 12px;
  }
  
  /* End section Rates */
  /* Start section opinion */
  .opinions .all__Opinions .opinionOne {
    border: var(--border-04-color);
    background: var(--white-01-color);
    padding: 30px;
    border-radius: 13px;
    margin-bottom: 15px;
  }
  
  .opinions .all__Opinions .opinionOne .top__Content,
  .opinions .all__Opinions .opinionOne .top__Content .date,
  .opinions .all__Opinions .opinionOne .rateOpinion,
  .opinions .all__Opinions .opinionOne .user__Message {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
  }
  
  .opinions .all__Opinions .opinionOne .top__Content .date,
  .opinions .all__Opinions .opinionOne .rateOpinion {
    justify-content: initial;
    font-size: 16px;
    color: var(--gray-01-color);
  }
  
  .opinions .all__Opinions .opinionOne .top__Content .date {
    align-items: unset;
  }
  
  .opinions .all__Opinions .opinionOne .top__Content .date i {
    display: flex;
    align-items: center;
  }
  
  .opinions .all__Opinions .opinionOne .rateOpinion {
    padding-top: 10px;
  }
  
  .opinions .all__Opinions .opinionOne .textOpinion {
    font-size: 16px;
    color: var(--gray-01-color);
    font-weight: 400;
    padding: 10px 0 20px 0;
  }
  
  .opinions .all__Opinions .opinionOne .user__Message {
    justify-content: initial;
    padding: 30px 30px 10px 30px;
    border-top: var(--border-04-color);
    gap: 25px;
  }
  
  .opinions .all__Opinions .opinionOne .user__Message .images {
    display: flex;
    gap: 10px;
  }
  
  .opinions .all__Opinions .opinionOne .user__Message img {
    width: 40px;
  }
  
  .opinions .all__Opinions .opinionOne .user__Message .imgUser {
    width: 60px;
  }
  
  /* End section opinion */
  /* Start viewProductModal */
  #viewProductModal .allWalletAccount {
    width: 45rem;
  }
  
  #viewProductModal .content_Wallet__AccountTop .title {
    padding: 15px 0 0 0;
  }
  
  #viewProductModal .middleInfoPayment02 {
    margin-top: 20px;
  }
  
  #viewProductModal .sec__Content {
    border-top: none;
    border-bottom: var(--border-04-color);
    padding: 0;
  }
  
  #viewProductModal .tabOne,
  #viewProductModal .walletPay {
    background: transparent;
    border-bottom: var(--border-04-color);
  }
  
  #viewProductModal .tabOne img {
    padding: 8px;
    border-radius: 6px;
    background: var(--turquoise-color);
  }
  
  #viewProductModal .tabOne .iconArrow,
  #viewProductModal .titlePay,
  #viewProductModal .walletPay .text a {
    color: var(--blue-01-color);
    font-size: 16px;
  }
  
  #viewProductModal .walletPay {
    padding-bottom: 15px;
  }
  
  #viewProductModal .walletPay .text,
  #viewProductModal .details .allDetails .detailsOne label .text {
    font-size: 12px;
    color: var(--gray-01-color);
    font-weight: bold;
  }
  
  #viewProductModal .details {
    padding: 10px 0;
  }
  
  #viewProductModal .details .allDetails,
  #viewProductModal .details .allDetails .detailsOne label {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  #viewProductModal .details .allDetails .detailsOne label .text {
    font-weight: 500;
    cursor: pointer;
  }
  
  #viewProductModal .details .allDetails .detailsOne label a {
    color: var(--blue-01-color);
  }
  
  #viewProductModal .details .allDetails .detailsOne {
    background: var(--white-03-color);
    border-radius: 8px;
    margin: 8px 0;
    cursor: pointer;
    width: 100%;
    border: var(--border-04-color);
  }
  
  #viewProductModal .details .allDetails label {
    padding: 12px 8px;
    height: 100%;
  }
  
  #viewProductModal .details .allDetails .detailsOne:hover {
    border-color: var(--blue-01-color);
  }
  
  #viewProductModal .codeDiscount .form {
    background: var(--white-03-color);
    padding: 10px;
    margin: 10px 0;
    border-radius: 8px;
  }
  
  #viewProductModal .codeDiscount form {
    display: flex;
    align-items: center;
  }
  
  #viewProductModal .codeDiscount input {
    width: 100%;
    border: none;
    padding: 7px 10px;
    outline: none;
    border-radius: 8px 0 0px 8px;
  }
  
  #viewProductModal .codeDiscount .btnDiscount {
    margin: 0;
    padding: 6px 15px;
    border-radius: 0 8px 8px 0;
  }
  
  #viewProductModal .button {
    padding: 0;
    padding-top: 40px;
  }
  
  /* End viewProductModal */
  /* Start Modal Condition */
  #modalConditions {
    z-index: 10000;
  }
  
  #modalConditions .modal-container-header img {
    width: 50px;
  }
  
  #modalConditions .content {
    text-align: left;
  }
  
  #modalConditions .content .title,
  #modalConditions .checkPrive .title {
    font-size: 16px;
  }
  
  #modalConditions .content .text {
    font-size: 14px;
    position: relative;
    padding-bottom: 5px;
  }
  
  #modalConditions .content {
    border-bottom: var(--border-04-color);
    padding-bottom: 15px;
  }
  
  #modalConditions .content .text::after {
    top: 40%;
  }
  
  #modalConditions .checkPrive {
    display: flex;
    background: var(--white-03-color);
    padding: 10px;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
  }
  
  /* End Modal Condition */
  
  /* ===========================
  End Page View Product
  ============================*/
  
  /* ==========================================
  Start page Registre
  ============================================*/
  /* ============
  Start section register
  ======================*/
  .htmlRig {
    overflow: hidden;
  }
  
  body.register {
    background: var(--blue-01-color);
    overflow: hidden;
  }
  
  .register {
    position: relative;
    height: 100vh;
  }
  
  .register .container {
    position: relative;
  }
  
  .all__register .header {
    margin-top: 40px;
  }
  
  .register .all__register {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  
  .register .shape01 {
    left: -75px;
    top: 60px;
    width: fit-content;
  }
  
  /* ========
  Start form register 
  =======*/
  .form__register {
    border: var(--border-01-color);
    width: 546px;
    background: var(--white-01-color);
    padding: 50px 30px;
    border-radius: 0 0 6px 6px;
  }
  
  .form__register .form__reg {
    direction: ltr;
    padding: 30px 0;
  }
  
  .form__register .form__reg .info .title {
    font-size: 40px;
    font-weight: 700;
    color: var(--black-01-color);
    padding: 10px 0;
  }
  
  .form__register .form__reg .info {
    font-size: 16px;
    font-weight: 400;
    color: var(--black-01-color);
  }
  
  .form__register .formInput {
    padding: 20px 0;
  }
  
  .form__register .formInput .all__form__Input,
  .form__register .formInput .all__form__Input .formOne {
    display: flex;
    align-items: center;
  }
  
  .form__register .formInput .all__form__Input {
    gap: 15px;
  }
  
  .form__register .formInput .all__form__Input .formOne input {
    width: 100%;
    padding: 8px;
    border: none;
    outline: none;
  }
  
  .form__register .formInput .all__form__Input .formOne {
    border-bottom: var(--border-02-color);
  }
  
  .form__register .formInput .all__form__Input .formOne #numberRig {
    width: 370px;
  }
  
  .form__register .formInput .all__form__Input .formOne .icon {
    font-size: 17px;
    color: var(--turquoise-color);
  }
  
  .form__register .formInput .all__form__Input .formSelect input {
    width: 60px;
    cursor: pointer;
    outline: none;
  }
  
  .iti__flag-container {
    display: flex;
    justify-content: flex-end;
  }
  
  .iti__country-list {
    margin-top: 35px;
  }
  
  .iti__selected-flag {
    gap: 10px;
  }
  
  .iti__country.iti__highlight,
  .iti__country {
    display: flex;
  }
  
  .form__register .flag {
    width: 22px;
  }
  
  .form__register .formInput .all__form__Input .formSelect .iconChevron {
    font-size: 14px;
    color: var(--gray-01-color);
    cursor: pointer;
  }
  
  .form__register .formInput .bottomForm {
    display: flex;
    flex-direction: column;
    width: fit-content;
    justify-content: center;
    align-items: center;
  }
  
  .form__register .formInput .bottomForm .btnLog {
    padding: 10px 100px;
    background: var(--blue-01-color);
  }
  
  .form__register .formInput .bottomForm .btnLog a {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .form__register .formInput .bottomForm .btnLog a i {
    font-size: 15px;
    margin-top: 4px;
  }
  
  .form__register .formInput .bottomForm .textValidate {
    font-size: 14px;
    color: var(--gray-01-color);
    font-weight: 400;
    margin-top: 10px;
  }
  
  /* Chrome, Safari, Edge, Opera */
  .form__register .formInput .all__form__Input .formOne input::-webkit-outer-spin-button,
  .form__register .formInput .all__form__Input .formOne input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  /* Firefox */
  .form__register .formInput .all__form__Input .formOne input[type="number"] {
    -moz-appearance: textfield;
  }
  
  .form__register .top__button .btnHome {
    padding: 0;
    width: 140px;
    height: 40px;
    margin: 0;
  }
  
  .form__register .loginLinkPath {
    text-align: center;
    padding-top: 50px;
  }
  
  .form__register .loginLinkPath .linkPath {
    font-size: 14px;
    font-weight: bold;
    color: var(--blue-01-color);
  }
  
  /* ========
  End form register 
  *=======/
  
  
  /* ============
  End section register
  ======================*/
  
  /* ========================================== 
   End page Register
  ============================================*/
  /*============================================
  Start Page Confirm Code
  ==============================================*/
  #confirmCode .btnArrow {
    width: fit-content;
    height: auto;
    padding: 7px 22px;
    margin: 0;
    background: transparent;
    border: var(--border-04-color);
    box-shadow: none;
  }
  
  #confirmCode .btnArrow a {
    color: var(--gray-01-color);
    font-size: 14px;
  }
  
  #confirmCode .main__Form__Register {
    margin-top: -20px;
  }
  
  #confirmCode .form__register .form__reg .info .title {
    font-size: 30px;
  }
  
  #confirmCode .form__register .form__reg .info .numberUser {
    color: var(--turquoise-color);
    font-weight: bold;
  }
  
  #confirmCode .form__register .formInput .all__form__Input .formOne .formVerification {
    display: flex;
  }
  
  #confirmCode .form-control {
    display: block;
    height: 50px;
    margin-left: 0.5rem;
    text-align: center;
    font-size: 20px;
    min-width: 0;
  }
  
  #confirmCode .form-control:last-child {
    margin-left: 0;
  }
  
  #confirmCode .form__register .formInput .all__form__Input .formOne .formVerification input {
    border: none;
    border-color: transparent;
    background: transparent;
    border-bottom: 1.5px solid #cccccc;
    text-align: center;
    font-size: 20px;
    margin-left: 10px;
    font-weight: bold;
    transition: all 0.5s;
  }
  
  #confirmCode .form__register .formInput .all__form__Input .formOne .formVerification input:focus {
    border-color: var(--turquoise-color);
  }
  
  
  #confirmCode .form__register .formInput .all__form__Input {
    flex-direction: column;
    gap: 30px;
  }
  
  #confirmCode .form__register .formInput .all__form__Input .formOne {
    border: none;
  }
  
  #confirmCode .form__register .formInput .all__form__Input #countdown {
    font-size: 17px;
    font-weight: bold;
  }
  
  #confirmCode .form__register .formInput .all__form__Input .timer__down .card {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
  }
  
  #confirmCode .form__register .formInput .all__form__Input .timer__down .card .text {
    font-size: 16px;
    font-weight: bold;
  }
  
  #confirmCode .form__register .formInput .resendCode {
    text-align: center;
    margin: 20px 0;
  }
  
  #confirmCode .form__register .formInput .resendCode .resendLinkCode {
    font-size: 16px;
    font-weight: 500;
    color: var(--turquoise-color);
    text-decoration: underline;
  }
  
  /*============================================
  End Page Confirm Code
  ==============================================*/
  
  /*============================================
  Start Page Login
  ==============================================*/
  #login__Section .all__register .main__Form__Register {
    width: 100%;
  }
  
  #login__Section .form__register .formInput .all__form__Input {
    flex-direction: column;
    align-items: normal;
    gap: 20px;
  }
  
  #login__Section .form__register .formInput .all__form__Input .formOne {
    padding: 0 10px;
  }
  
  #login__Section .form__register .formInput .btnLog {
    margin-top: 50px;
  }
  
  #login__Section .form__register .formInput .checkInput {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    font-size: 14px;
    color: var(--blue-01-color);
    font-weight: 400;
    padding-top: 25px;
    cursor: pointer;
  }
  
  #login__Section .form__register .formInput .checkInput label {
    text-decoration: underline;
    cursor: pointer;
  }
  
  #login__Section .form__register .loginLinkPath {
    padding: 0;
  }
  
  #login__Section .form__register .form__reg .info .title {
    font-size: 30px;
  }
  
  /*============================================
  End Page Login
  ==============================================*/
  /* ==============================
  Start Media
  ==================================*/
  
  /* Screen 1104px */
  @media screen and (max-width: 1104px) {
  
    /* Start Page Register */
    body.register {
      overflow-y: auto;
    }
  
    .register .all__register {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
    }
  
    .register .all__register .header {
      margin-right: auto;
    }
  
    .all__register .main__Form__Register {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90vh;
    }
  
    .all__register .form__register {
      height: auto;
    }
  
    .all__register .main__Form__Register .form__register {
      margin: auto;
    }
  
    .register .shape01 {
      height: 100vh;
    }
  
    /* End Page Register */
  }
  
  @media screen and (max-width: 1023px) {
    .btnScroll {
      bottom: 70px;
    }
  
    .messageNum {
      line-height: 30px;
      display: block;
    }
  
    /* ============ */
    .testimonials .allTestimonials .testimonialOne .main__Testimonail .image__User {
      width: 100%;
    }
  
    /* =========== */
    /* ========= Start footer ======== */
    .contact .all__Contact {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .contact .all__Contact {
      display: block;
    }
  
    .contact .all__Contact .allForm__Contact {
      padding: 0;
      width: 100%;
      margin-top: 25px;
    }
  
    .contact .all__Contact .form__Contact {
      flex: 0;
    }
  
    /* ========= End footer ======== */
  }
  
  /* Screen 991px */
  @media screen and (max-width: 991px) {
  
    /* =====================
    Start Header
    =========================*/
    .header .allHeader .mainHeader .menuLinks .List,
    .header .allHeader .mainHeader .leftMenu .listLeftMenu,
    .header .allHeader .mainHeader .leftMenu .ItemListLeftMEnuUser a {
      gap: 8px;
    }
  
    .header .allHeader .mainHeader .menuLinks .List .itemList .itemLink,
    .header .allHeader .mainHeader .leftMenu .listLeftMenu a {
      font-size: 14px;
      margin-left: 8px;
    }
  
    .bg {
      height: calc(100% - 350px);
    }
  
    .dropMenuNot01::after {
      right: 41%;
    }
  
    /* =================
    End Header
    ====================*/
  
    /* =======================
    Start Section reviews
    ===========================*/
    .reviews .all__Reviews {
      flex-direction: column;
      justify-content: center;
    }
  
    .reviews .all__Reviews .image {
      margin: auto;
    }
  
    .reviews .all__Reviews .info__Reviews .mainInfoReviews {
      justify-content: center;
    }
  
    .reviews .all__Reviews .info__Reviews .feature .allFeature .featureOne .featOne {
      width: 100%;
    }
  
    /* ========================
    End Section reviews
    =========================*/
    /* ===========================================
  Start Page notifications
  ==================================================*/
    #notifications .main__Notifications .btn {
      padding: 10px 20px !important;
      margin: 0;
    }
  
    #notifications .main__Notifications .btn a {
      font-size: 14px;
    }
  
    #notifications .main__Notifications .textWallet {
      font-size: 12px;
    }
  
    /* ===========================================
  End Page notifications
  ==================================================*/
    /* ===========================================
  Start Page View Product
  ===========================================*/
    .cardProduct .all__CardProduct,
    .conditionBook {
      flex-direction: column;
    }
  
    .cardProduct .all__CardProduct {
      gap: 0;
    }
  
    .cardProduct .all__CardProduct .imgCardProduct {
      margin: auto;
    }
  
    .conditionBook .map iframe {
      width: 100%;
      height: 500px;
    }
  
    .main__condition .infoOne {
      padding-left: 25px;
    }
  
    .cardProduct .swiper-button-prev {
      display: none;
    }
  
    .cardProduct .all__CardProduct .imgCardProduct {
      width: 720px;
      height: 600px;
    }
  
    .cardProduct .all__CardProduct .imgCardProduct .gallery-thumbs .swiper-slide {
      height: auto;
    }
  
    .cardProduct .all__CardProduct {
      padding-bottom: 35px;
    }
  
    /* ===========================================
  End Page View Product
  ===========================================*/
  }
  
  /* Screen 768px */
  @media screen and (max-width: 768px) {
    .paddingBottom {
      padding: 100px 0 0 0;
    }
  
    .btnScroll {
      bottom: 20px;
    }
  
    /* =========================
    Start Home Page
    ============================*/
    /* =========== Start Header ======= */
  
    .allMenuLinks .overlay {
      height: 100vh;
      left: -120%;
      transition: all 0.3s;
      display: block;
      z-index: 1001;
    }
  
    .header .allHeader .mainHeader .menuLinks {
      position: fixed;
      top: 0;
      left: -120%;
      background: #2c2966;
      bottom: 0;
      height: 100vh;
      box-shadow: var(--box-shadow-1);
      width: 26.6rem;
      z-index: 1003;
      transition: all 0.5s;
    }
  
    .header .allHeader .mainHeader .menuLinks.active {
      left: 0;
    }
  
    .allMenuLinks .overlay.active {
      left: 0;
    }
  
    .header .allHeader .mainHeader .menuLinks .List {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      gap: 50px;
    }
  
    .header .allHeader .mainHeader .leftMenu .listLeftMenu .toggle {
      display: flex;
    }
  
    /* ======== End Header =========== */
    /* ========= Start section main ======== */
    .main .mainInfo .allMainInfo .bottom__Main__Info {
      flex-direction: column;
      padding: 0;
      gap: 20px;
    }
  
    .main .mainInfo .allMainInfo .bottom__Main__Info .section__Info .title,
    .section__Info .title {
      font-size: 20px;
    }
  
    .main .mainInfo .allMainInfo .bottom__Main__Info .section__Info,
    .main .mainInfo .allMainInfo .bottom__Main__Info .textLeft {
      flex: 1;
      margin-right: auto;
    }
  
    .section__Info .text {
      font-size: 14px;
    }
  
    .testimonials .allTestimonials .testimonialOne .main__Testimonail .image__User {
      height: 100%;
    }
  
    /* ========= End section main ======== */
    /* ========= Start Section banner====== */
    .banner .allBanner {
      flex-direction: column;
    }
  
    /* ========= end Section banner ====== */
  
    /* ===========================
    End Home Page
    =============================*/
  
    /* ==========================
  Start Footer
  =============================*/
    .footer .allFooter .footerOne {
      gap: 20px;
    }
  
    .footer .allFooter .footerOne .listLinks .itemLinkFooter .itemLinkOne {
      font-size: 12px;
    }
  
    /* ============================
  End Footer
  =============================*/
    /* ==============================
  Start Page Best Product
  ======================================*/
    .search__Hostel .bottom__Content .allFormInputs {
      padding: 30px 15px;
    }
  
    /* ==============================
  End Page Best Product
  ======================================*/
  
    /* ===========================================
  Start Page View Product
  ===========================================*/
  
    .conditionBook .map iframe {
      height: 400px;
    }
  
    .cardProduct .all__CardProduct .imgCardProduct {
      width: 100%;
    }
  
    .main__condition01 .infoOne .allText {
      flex-direction: column;
      align-items: flex-start;
    }
  
    /* ===========================================
  End Page View Product
  ===========================================*/
  
    /* Start Page Register */
    .all__register .form__register {
      width: 100%;
    }
  
    /* End Page Register */
    /* ===================
    Start Page Login
    ====================*/
    .modal .modal-container .icon__close {
      top: 10px;
      left: 10px;
      border: var(--border-01-color);
    }
  
    /* ====================
    End Page Login
    =======================*/
    /* ===============================
    Start Page Bookings
    ===========================*/
    #booking .main__booking__bottom {
      gap: 15px;
    }
  
    .all__Wallet .main__Wallet .walletOne .info__Wallet .title {
      font-size: 14px;
    }
  
    .all__Wallet .main__Wallet .walletOne .info__Wallet .priceWallet .priceNum {
      font-size: 12px;
    }
  
    /* =============================
    End Page Bookings
    ================================*/
  }
  
  /* Screen 550px */
  @media screen and (max-width: 550px) {
  
    .swiper-button-prev,
    .swiper-button-next {
      top: -55px;
    }
  
    /* =======================
    Start Section reviews
    ===========================*/
  
    .reviews .all__Reviews .info__Reviews .feature .allFeature .featureOne {
      flex-direction: column;
    }
  
    .reviews .all__Reviews .info__Reviews .feature .allFeature .featureOne:nth-child(2) {
      margin-top: 15px;
    }
  
    .reviews .all__Reviews .info__Reviews .feature .allFeature .featureOne .featOne {
      margin: 0;
    }
  
    /* ========================
    End Section reviews
    =========================*/
  
    /* ==========================
  Start Footer
  =============================*/
    .footer .allFooter .footerOne {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .footer .allFooter .footerOne .listLinks .itemLinkFooter .itemLinkOne {
      font-size: 14px;
    }
  
    /* ============================
  End Footer
  =============================*/
    /* =============================
  Start Page Terms
  =======================================*/
  
    .privacyPolicyTerms .section__InfoPages .title {
      font-size: 16px;
    }
  
    .privacyPolicyTerms .allTermsPrivacy .mainTerms .termsOne .title {
      font-size: 13px;
    }
  
    .privacyPolicyTerms .allTermsPrivacy .mainTerms .termsOne .text {
      font-size: 11px;
    }
  
    /* =============================
  End Page Terms
  =======================================*/
  
    /* ===========================================
  Start Page View Product
  ===========================================*/
    .cardProduct .all__CardProduct .info .title {
      font-size: 16px;
    }
  
    .card_View .textBottom .text {
      max-width: 100%;
    }
  
    .main__condition .infoOne .text,
    .card_View .all__Card__View .card__View__One .icon .title,
    .card_View .textBottom .titleText,
    .main__condition .infoOne .title,
    .rates .allRate .rateOne .titleBottom,
    .opinions .all__Opinions .opinionOne .titleName,
    .opinions .all__Opinions .opinionOne .textOpinion {
      font-size: 12px;
    }
  
    .opinions .all__Opinions .opinionOne .user__Message {
      padding: 30px 10px 10px 10px;
      align-items: flex-start;
      flex-direction: column;
    }
  
    .cardProduct .all__CardProduct .info .rate .text,
    .cardProduct .all__CardProduct .info .numRate,
    .cardProduct .all__CardProduct .info .allText .content .title,
    .cardProduct .all__CardProduct .info .allText .content .num,
    .cardProduct .all__CardProduct .info .buttonsOne .infoButton .text {
      font-size: 10px;
    }
  
    #viewProductModal .details .allDetails01 {
      flex-direction: column;
      gap: 0 !important;
    }
  
    .sameModal .middleInfoPayment .title {
      font-size: 12px;
    }
  
    /* ===========================================
    End Page View Product
    ===========================================*/
  
    /* Start Page Register */
    .form__register .formInput .all__form__Input .formOne #numberRig {
      width: 300px;
    }
  
    .all__register .form__register {
      padding: 30px;
    }
  
    .form__register .formInput .bottomForm {
      width: initial;
    }
  
    /* End Page Register */
  }
  
  /* Screen 489px */
  @media screen and (max-width: 489px) {
  
    /*  */
    .swiper-button-prev,
    .swiper-button-next {
      top: 15px;
    }
  
    .bg {
      height: calc(100vh - 300px);
    }
  
    .main .allMainInfo .top__Main__Info .mainSlideOne .info__main__Slide {
      padding: 0 10px;
    }
  
    .main .allMainInfo .top__Main__Info .mainSlideOne .info__main__Slide .title {
      font-size: 22px;
    }
  
    .main .allMainInfo .top__Main__Info {
      padding: 50px 0 0 0;
    }
  
    .swiper-pagination-bullets.swiper-pagination-horizontal {
      margin-bottom: 40px;
    }
  
    /*  */
    /* =========================
    Start Home Page
    ============================*/
    .header .allHeader .mainHeader .leftMenu .listLeftMenu svg {
      width: 20px;
    }
  
    .header .allHeader .mainHeader .leftMenu .listLeftMenu .userImg {
      width: 30px;
      height: 30px;
    }
  
    .header .allHeader .mainHeader .leftMenu .listLeftMenu .iconArrow {
      width: 10px;
      height: 10px;
    }
  
    .section__InfoPages .text {
      max-width: 100%;
      font-size: 14px;
    }
  
    /* ========================
  Start section products
  ====================*/
    .products .mainSection__info {
      flex-direction: column;
      align-items: flex-start;
    }
  
    /* ====================
  End Sction Products
  ======================*/
  
    /* ========= Start Section banner====== */
    .banner .allBanner .info__banner .title {
      font-size: 25px;
    }
  
    .banner .allBanner .info__banner .text {
      font-size: 18px;
      line-height: 1.8;
      padding: 10px;
    }
  
    .banner .allBanner .info__banner .btn {
      margin: 15px 0;
    }
  
    /* ========= end Section banner ====== */
    /* ====== Sart section testimonial ==== */
    .testimonials .swiper-button-prev,
    .testimonials .swiper-button-next {
      top: 30px;
    }
  
    .testimonials .allTestimonials .testimonialOne .main__Testimonail {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .testimonials .allTestimonials .testimonialOne .main__Testimonail .info__Testimonail {
      padding: 15px 0 0 0;
    }
  
    .testimonials .allTestimonials .testimonialOne .main__Testimonail .info__Testimonail .titleName {
      font-size: 18px;
    }
  
    .testimonials .allTestimonials .testimonialOne .main__Testimonail .textMessage {
      font-size: 12px;
    }
  
    .testimonials .allTestimonials .testimonialOne .main__Testimonail .info__Testimonail .rate .stars .iconStar {
      font-size: 12px;
    }
  
    /* ====== End Section testimonial ==== */
  
    /* ===========================
    End Home Page
    =============================*/
    /* ========================
  Start Page invoice
  ======================*/
  
    #invoice .invoice__Wallet .btnInvoice {
      padding: 10px 25px;
    }
  
    #modalWalletRate .modal-container-body {
      padding: 0 40px 20px 40px;
    }
  
    #modalWalletRate .numRates .numOneRate {
      width: 30px;
      height: 30px;
      line-height: 30px;
    }
  
    #modalWalletRate .textRate {
      justify-content: space-around;
    }
  
    #booking .section__Info .title {
      font-size: 14px;
    }
  
    .wallet__Account__Modal .allWalletAccount {
      padding: 25px 12px;
    }
  
    /* ========================
  End Page  invoice
  ======================*/
  
    /* Start Page Register */
    .form__register .formInput .all__form__Input .formOne #numberRig {
      width: 220px;
    }
  
    /* End Page Register */
    /* =====================
    Start Page Confirme Code
    ========================*/
    #confirmCode .form__register .form__reg .info .title,
    #login__Section .form__register .form__reg .info .title {
      font-size: 20px;
    }
  
    .right__Estate_DropDwons .wrapper {
      width: 100%;
    }
  
    /* =====================
    End Page Confirme Code
    ========================*/
    /* ====================
    Start Page Login
    ========================*/
    #login__Section .form__register .formInput .checkInput {
      padding-top: 15px;
      font-size: 10px;
    }
  
    /* ====================
    End Page Login
    ======================= */
    /* =====================
    Start Page Wallet
    =======================*/
    .allWalletAccount {
      width: 100% !important;
    }
  
    .wallet__Card .wallet__Card__One {
      justify-content: flex-start;
      padding: 10px;
  
      width: 48%;
      gap: 15px;
    }
  
    /* .wallet__Card .wallet__Card__One img {
      width: 100px;
    } */
    .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet .btn a {
      gap: 3px;
      font-size: 10px;
    }
  
    /* =====================
    End Page Wallet
    =======================*/
  }
  
  /* Screen 390px */
  @media screen and (max-width: 393px) {
  
    /* =======================
    Start Home Page
    ========================*/
    .header .allHeader .mainHeader .logo img {
      width: 90px;
    }
  
    .bg {
      height: calc(100vh - 185px);
    }
  
    /* ==========================
  Start Footer
  =============================*/
    .footer .allFooter .footerOne .listLinks .itemLinkFooter .itemLinkOne {
      font-size: 10px;
    }
  
    .footer {
      padding: 30px 0;
    }
  
    /* ============================
  End Footer
  =============================*/
  
    /* =======================
    End Home Page
    =========================*/
    /* ========================
    Start Page Best Product
    ===========================*/
    .allBestProduct .allProducts {
      grid-template-columns: 1fr;
    }
  
    .dropMenuOneFilter .dropdown_with-chk__list-item label {
      right: -10px;
    }
  
    /* ========================
    End Page Best Product
    ===========================*/
  
    /* ============================
    Start Page conversations
    ==========================*/
    #conversations .chat {
      right: 10px;
    }
  
    #conversations .chat .main__Chat .chatOne {
      width: 270px;
    }
  
    #modal__Conversations .flex__content .allFlexContent .flex_Content_one {
      font-size: 10px;
      padding: 10px;
    }
  
    .sameModal .content_Wallet__AccountTop .title,
    .sameModal .content_Wallet__AccountTop .text {
      gap: 5px;
    }
  
    /* ===========================
    End Page conversations
    =============================*/
    /* Start Page Register */
    .form__register .formInput .all__form__Input .formOne #numberRig {
      width: 180px;
    }
  
    .form__register .formInput .all__form__Input .formSelect input::placeholder,
    .form__register .formInput .all__form__Input .formSelect .iconChevron {
      font-size: 12px;
    }
  
    /* End Page Register */
    /* ==================
    Start Modal
    ========================*/
    .modal .modal-container-body .title {
      font-size: 19px;
    }
  
    .modal .modal-container-body .text {
      font-size: 13px;
    }
  
    /* ==================
    End Modal
    ========================*/
  
    /* =======================
    Start Page  Wallet
    ===========================*/
    .all__Wallet .main__Wallet .walletOne .info__Wallet .title,
    .all__Wallet .main__Wallet .walletOne .info__Wallet .priceWallet .priceNum {
      font-size: 12px;
    }
  
    /* =======================
    End Page  Wallet
    ===========================*/
  }
  
  /* Screen 360 */
  @media screen and (max-width: 360px) {
  
    /* =======================
    Start Home Page
    ========================*/
    .bg {
      height: calc(100vh - 150px);
    }
  
    .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet {
      display: block;
      width: 75vw;
    }
  
    .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet .btn a {
      font-size: 15px;
      gap: 8px;
    }
  
    .sameModal .main__booking__bottom .dayNightNum {
      margin-left: 18px;
    }
  }
  
  /* Screen 320px */
  @media screen and (max-width: 320px) {
  
    /* ====================
    Start Home Page
    =======================*/
    .header .allHeader .mainHeader .leftMenu .listLeftMenu {
      gap: 2px;
    }
  
    .bg {
      height: calc(100vh + 55px);
    }
  
    /* ========================
    End Home Page
    =======================*/
  
    /* ========================
    Start Page Best Product
    ===========================*/
  
    .dropMenuOneFilter .dropdown_with-chk__list,
    .dropMenuOneFilter .dropdown_with-chk__button {
      width: 125px;
    }
  
    .wallet__Section .top__Wallet .left__Wallet .buttons__Wallet .btn {
      margin: 10px auto 0 auto;
    }
  
    /* ========================
    End Page Best Product
    ===========================*/
  
    /* Start modal Rate */
  
    #modalWalletRate .textRate {
      justify-content: space-between;
    }
  
    /* End Modal Rate */
    /* Start Page Register */
    .form__register .formInput .all__form__Input .formOne #numberRig {
      width: 100%;
    }
  
    .all__register .form__register {
      padding: 15px;
    }
  
    .form__register .form__reg .info {
      font-size: 12px;
    }
  
    /* End Page Register */
    .sameModal .main__booking__bottom .dayNightNum {
      margin-left: 0px;
    }
  }
  
  /* ====================================
  End Media
  ======================================*/