*:root { --primary-color: #3E2C41; --secondry-color: #4A5568; --text-color: #ffff; --text-color2: #2a2a2a; --text-color3: #000; --gradient-bg-color: linear-gradient(0deg, var(--primary-color) 0%, #3E2C41 100%); --gradient-bg-color2: linear-gradient(0deg, var(--secondry-color) 0%, #4A5568 100%); --app-content-background-color: #B76F5A; --app-color: #B76F5A; --background: linear-gradient(135deg, #3E2C41, #B76F5A);

}

.mobile-header-background { background: var(--background); height: 100%; /* border-bottom-left-radius: 110px; */ /* border-bottom-right-radius: 110px; */
}

.navgation__area { font-size: 11px; position: fixed; z-index: 11; bottom: 0; left: 0; width: 100%; background: #fff; /* height: 56px; */ border-top: 1px solid rgba(0, 0, 0, 0.12); /* overflow: hidden; */ display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: space-around; justify-content: space-around; box-sizing: border-box;
}

.navgation__area .start__navarea { width: 100%; display: flex; padding: 5px 0px;
}

.navgation__area .start__navarea .navs-btn:visited { -webkit-text-decoration: none; text-decoration: none; outline: none;
}

.navs-btn2 { color: var(--primary-color); white-space: nowrap; text-decoration: none; text-align: center;
}

.start__navarea .navs-btn { position: relative; display: inline-flex; flex-direction: column; -webkit-box-pack: center; -webkit-box-flex: 1; justify-content: center; -webkit-box-align: center; align-items: center; flex-flow: 1; height: 100%; margin-top: 7px; width: 100%; text-decoration: none; color: #1a1919;
}

.start__navarea .actives { /* background: linear-gradient(0deg, #2c2e58 0%, rgb(8, 4, 24) 100%) !important; */ background: linear-gradient(0deg, #3E2C41 0%, rgb(8, 4, 24) 100%) !important; color: #fff !important; border: 2px solid #fff; border-radius: 20px; z-index: 100; /* width: 280px; height: 60px; */ /* top: -2rem; */ /* border-radius: 50%; */ /* background: #fff; */ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 8px 16px 0 rgba(0, 0, 0, 0.2); /* color: #000 !important; */ font-weight: 600;
}

.start__navarea .actives-carts { background: linear-gradient(0deg, #3E2C41 0%, rgb(8, 4, 24) 100%) !important; color: #fff !important; border: 2px dashed #fff; /* border-radius: 20px; */ z-index: 100; width: 280px; height: 60px; top: -2rem; border-radius: 50%; /* background: #fff; */ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 8px 16px 0 rgba(0, 0, 0, 0.2); /* color: #000 !important; */ font-weight: 600;
}

.start__navarea .actives-carts>.nav__items .icon .bi { font-size: 22px; overflow: hidden; color: #fff !important;
}

.start__navarea .actives>.nav__items .icon .bi { font-size: 22px; overflow: hidden; color: #fff !important;
}

.start__navarea .navs-btn .nav__items { height: 27px; align-items: center; justify-content: center; text-align: center;
}

.start__navarea .navs-btn .nav__items .icon { position: relative;
}

.start__navarea .navs-btn .nav__items .icon .cart-items { position: absolute; top: -2px; right: -7px; padding: 1px 6px; border-radius: 50px; background: #ef4023; color: #fff;
}

.start__navarea .actives>.text { font-weight: 700; overflow: hidden; color: #fff !important;
}

.start__navarea .navs-btn .nav__items .icon { height: 24px; width: 24px;
}

.start__navarea .navs-btn .nav__items .icon .bi { font-size: 22px; overflow: hidden; color: #8a8989;
}

.start__navarea .navs-btn .nav__items .icon .fas { position: relative; top: 6px; font-size: 20px; overflow: hidden; color: #8a8989;
}

.start__navarea .navs-btn .nav__items .icon .fa { position: relative; top: 6px; font-size: 20px; overflow: hidden; color: #8a8989;
}

/* #mobile-container .navgation__area a .active .icon .bi,
#mobile-container .navgation__area a { color: rgb(221, 66, 92);
} */

#mobile-container .navgation__area a { color: var(--primary-color); text-decoration: none;
}

/* #mobile-container .navgation__area a .active .icon .bi,
#mobile-container .navgation__area a { color: var(--primary-color);
} */

#mobile-container .navbar { overflow: hidden; background-color: #ffffff; position: fixed; bottom: 0; width: 100%; display: flex; height: 56px; border-top: 2px solid #d6d6d6; border-bottom: 2px solid #d6d6d6; justify-content: space-around; box-sizing: border-box; /* box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 6px; */
}


#mobile-container .navbar a { position: relative; flex-grow: 1; margin-top: 4px; width: 100%; box-sizing: border-box; align-items: center; display: block; color: black; padding: 16px 18px; text-decoration: none;
}

/* #mobile-container .navbar a .active { background-color: #0b0446; color: #fff;
} */
#mobile-container .navbar a .active .icon,
#mobile-container .navbar a .active .con { color: var(--primary-color);
}

#mobile-container .navbar a .nav-items .icon { height: 27px; align-items: center; justify-content: center; text-align: center; font-size: 22px; /* color: var(--primary-color); */

}

#mobile-container .navbar a .nav-items .con { font-size: 10px;
}

.mobile-head { justify-content: space-between; display: flex; align-items: center; text-align: center; padding: 4px; /* float: right; */ margin: 0 auto;
}

.mobile-head .name-spa { font-weight: 700; font-size: 25px; /* background-color: #ffffff; */ padding: 3px; border-radius: 30px; display: block; margin: 0 auto; justify-content: center; align-items: center; text-align: center;
}

.mobile-head .langus .bi { font-size: 20px; text-decoration: none; color: #fff; z-index: 200;
}

.mobile-head .iconplus .bi { font-size: 20px; text-decoration: none; color: #fff; z-index: 200;
}

.mobile-head .add__to__cart { float: right;
}

.mobile-head .add__to__cart .bi { font-size: 20px; text-decoration: none; color: #fefefe; z-index: 200; border: 1px solid var(--text-color); border-radius: 50px; padding: 7px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.mobile-head .langus,
.iconplus,
.call-icon { font-size: 20px; text-decoration: none; color: var(--secondry-color); z-index: 200;
}

.calls__icon { width: 40px; height: 40px;
}

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

.find-spa p { font-size: 20px; font-weight: 600; text-shadow: 1px 1px 10px #2a2a2a; color: #fff; text-transform: capitalize; margin-top: 10px; text-align: center;
}

.find-spa h5 { font-weight: 600; text-shadow: 1px 2px 4px #ffffff;
}

.mobile_search .search__dtl__area { border: 1px solid rgb(255, 255, 255); border-radius: 30px; box-shadow: rgba(255, 255, 255, 0.05) 0px 6px 24px 0px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px; background-color: #fff;
}

.mobile_search .search__dtl__area a { text-decoration: none;
}

.mobile_search .search__dtl__area a span { display: flex; flex-direction: column;
}

.mobile_search .search__dtl__area a>.desti { position: relative; color: #7e7c7c; text-decoration: none; font-size: 12px; left: 10px; font-family: 'Inter', sans-serif;
}

.mobile_search .search__dtl__area a>.searchs { position: relative; color: black;
}

.search__dtl__area a .searchs>input { outline: none; border: none; box-sizing: border-box; box-shadow: none; text-indent: 10px;
}

.data__room__area { display: flex; flex-direction: row;
}

.mobile_search .data__room__area { border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 0px 6px 0 0; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 20px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;

}

.data__room__area .datatime__area { display: flex; flex-direction: column;
}

.data__room__area .datatime__area .dt { font-size: 12px; position: relative; color: #7e7c7c; font-family: 'Inter', sans-serif;

}
.data__room__area .rooms___area .rg { font-size: 12px; position: relative; color: #7e7c7c; font-family: 'Inter', sans-serif;
}
.data__room__area .datatime__area .form-controls { outline: none; box-shadow: none; border: none;
}

.date__time { color: #1a1919;
}

.data__room__area .datatime__area { width: 60%; border-right: 2px solid #d6d6d6;
}

.data__room__area .datatime__area input { width: 95%;
}

.data__room__area .rooms___area { display: flex; flex-direction: column; padding-left: 10px; font-family: 'Inter', sans-serif;
}

.data__room__area .rooms___area .room__dtl { font-family: 'Inter', sans-serif; font-size: 15px; color: #1a1919;
}


.search___btn .pinBtn { width: 170px; height: 50px; border-radius: 40px; border: 1px solid rgba(255, 255, 255, 0.349); background: var(--gradient-bg-color); display: flex; align-items: center; justify-content: center; cursor: pointer; transition-duration: .3s; overflow: hidden; margin: 0px auto; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgb(255, 255, 255) 0px -3px 0px inset;
}

.search___btn .pinBtn .IconContainer { width: 38px; height: 38px; background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(255, 255, 255, 0.651)); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-left: 6px; margin-top: -4px; z-index: 2; transition-duration: .3s;
}

.search___btn .pinBtn .IconContainer .bi { color: #000;
}

.search___btn .pinBtn .icon { border-radius: 1px;
}

.search___btn .pinBtn .text { height: 100%; width: 100px; display: flex; align-items: center; justify-content: center; color: white; z-index: 1; transition-duration: .3s; font-size: 1.04em; font-weight: 600; margin: 0 auto;
}

.search___btn .pinBtn:hover .IconContainer { width: 144px; border-radius: 40px; transition-duration: .3s;
}

.search___btn .pinBtn:hover .text { transform: translate(10px); width: 0; font-size: 0; transition-duration: .3s;
}

.search___btn .pinBtn:active { transform: scale(0.95); transition-duration: .3s;
}

.search___btn { text-decoration: none;
}


.data__room__area .dropdown-menu { width: 100%; max-width: 500px; background-color: #000;
}

.tabcontents { display: none;
}

.rooms-card { padding-bottom: 0;
}

.rooms-card span { display: flex; padding-left: 7px;
}

.rooms-card span p { font-size: 18px; font-weight: 700; font-family: Georgia, 'Times New Roman', Times, serif; text-shadow: 1px 2px 8px #ffffff; color: #000;
}

.rooms-card .close { font-size: 28px; font-weight: 800; /* border: 1px solid #000; border-radius: 5px; */ padding: 5px; color: #000;
}

.rooms__guests__area { top: 45vh; position: fixed; left: 0; z-index: 200; background-color: #ffffff; position: absolute; border-radius: 5px; width: 100%; padding: 0; border-top: 3px solid #2298da;
}

.room__and__guests { /* padding: 57px 16px 72px; */ overflow: auto; box-sizing: border-box; background-color: #ffffff; padding: 16px 0px;
}

.room__and__guests .rooms__count { display: flex; width: 100%; line-height: 25px; font-size: 17px; font-weight: 700; color: #000; box-sizing: border-box;
}

.rooms__guests__area .rooms__count .icon { width: 25px; border-color: #000; text-align: right; color: #000;
}

.room__and__guests .rooms__count .icon i { overflow: hidden; position: relative;
}

.room__and__guests .rooms__count .count { width: calc(100% - 25px);
}

.rooms__guests__area .guest__count { display: flex; width: 100%; list-style: 25px; font-size: 17px; font-weight: 700; color: #1a1919; box-sizing: border-box; border-bottom: 1px solid #111111;
}

.rooms__guests__area .guest__count .guest__counters__area { display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 85px;
}

.guest__count .guest__counters__area .minguest { width: 25px; font-size: 18px; border-color: #000; text-align: center; color: #000; text-align: center; align-items: center;
}

.minguest .bi { width: 17px; height: auto; font-size: 22px; border-color: #000; text-align: center; color: #000;
}


.guest__count .guest__counters__area .count__num { -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; width: 30px; height: 25px; /* padding: 0px 20px; */
}

.guest__count .guest__counters__area .maxguest { width: 25px; font-size: 22px; border-color: #000; text-align: center; color: #3d02c5; height: 10px;

}

.maxguest .bi { width: 17px; font-size: 22px; border-color: #000; text-align: center; color: #3d02c5; height: 2px;
}

.guest__count .guest { width: calc(100% - 85px);
}

.add__rooms { background-color: #ffffff; color: #3d02c5; font-size: 22px; font-weight: 500; box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; border: 1px solid #d6d6d6;
}

.add__rooms p { margin: 0 auto; text-align: center; justify-content: center; align-items: center; display: block;
}

.done__rooms { background-color: #2298da; width: 100%; padding: 8px 0px; border-radius: 7px;
}

.card:hover { box-shadow: none;
}

.done__rooms a { text-align: center; box-sizing: border-box; text-decoration: none; color: #ffffff; font-size: 18px; border: 0px; justify-content: center; align-items: center; display: block; margin: 0 auto; width: 100%; top: 0; font-weight: 500;
}

.done__rooms a .totg { color: #ffffffec; font-size: 16px; font-weight: 500;

}


.mobile__search .back__icon { position: absolute; top: -5px; cursor: pointer;
}

.mobile__search .back__icon { right: auto; left: 1px;
}

.mobile_search { position: relative; color: #aaa; font-size: 16px;
}

.mobile__search input:focus { border-color: blue; outline: 0; box-shadow: none;
}

.mobile__search input { outline: none; box-shadow: none; border: none; text-indent: 10px;
}

.mobile__search { display: inline-block;
}

.mobile__search .back__icon .bi { font-weight: 700; font-size: 22px;
}


@media (min-width: 768px) { #mobile__search #searchs { width: 600px; height: auto; text-indent: 10px; }

}

@media (min-width: 820px) { #mobile__search #searchs { width: 670px; height: auto; text-indent: 10px; }

}

@media (min-width: 800px) { #mobile__search #searchs { width: 650px; height: auto; text-indent: 10px; }

}




.directions a .btn___views { background: var(--gradient-bg-color2); line-height: 44px; padding: 0; border: none;
}

.directions a .btn___views:hover { color: var(--secondry-color); background: transparent;
}

.tap_rates a .btn___views { background: var(--gradient-bg-color2); line-height: 44px; padding: 0; border: none;
}

.tap_rates a .btn___views:hover { color: var(--secondry-color); background: transparent;
}

.tabrate-area .tap_rates a .btn___views:hover .bi-star { color: var(--secondry-color);
}

.tabrate-area .tap_rates a .bi-star { /* background-color: var(--primary-color); */ padding: 3px; font-size: 17px; text-align: center; justify-content: center; align-items: center; border-radius: 5px; color: #ffffff; left: 0; top: 0; padding-left: 8px;
}

/* end buttons area */
  .hdr-root { width: 100%; max-width: 480px; position: sticky; top: 0; z-index: 100;
  }

  .hdr-strip { display: flex; align-items: center; justify-content: space-between; background: var(--bg2); height: 64px; padding: 0 8px; position: relative; overflow: hidden; box-shadow: 0 6px 32px rgba(201, 20, 20, 0.45);
  }
  .hdr-strip::before { content: ''; position: absolute; top: -40%; left: -20%; width: 60%; height: 200%; background: linear-gradient(105deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 60%); transform: skewX(-15deg); pointer-events: none;
  }
  .hdr-strip::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg,   transparent 0%,   rgba(255,255,255,0.35) 30%,   rgba(255,255,255,0.55) 50%,   rgba(255,255,255,0.35) 70%,   transparent 100% );
  }
  .hdr-left { flex: 0 0 auto; }
  .hdr-back-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; color: var(--text-color); font-size: 18px; transition: background 0.22s, transform 0.2s; position: relative; z-index: 1;
  }
  .hdr-back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-3px);
  }
  .hdr-back-btn:active { transform: translateX(-5px) scale(0.9);
  }
  .hdr-center { flex: 1; text-align: center; padding: 0 10px; position: relative; z-index: 1;
  }
  .hdr-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 19px; letter-spacing: 0.04em; color: var(--text-color); white-space: nowrap; overflow: hidden; width: 14rem; text-align: center; text-overflow: ellipsis; line-height: 1.1;
  }
  .hdr-subtitle { font-size: 9.5px; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); margin-top: 5px;
  }
  .hdr-right { flex: 0 0 auto; }
  .hdr-actions { display: flex; align-items: center; gap: 2px;
  }
  .hdr-icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; text-decoration: none; color: var(--text-color); font-size: 17px; transition: background 0.22s, transform 0.2s; position: relative; z-index: 1; cursor: pointer;
  }
  .hdr-icon-btn:hover { background: rgba(255, 255, 255, 0.15); transform: scale(1.1);
  }
  .hdr-icon-btn:active { transform: scale(0.9); }
  .hdr-like-wrap .hdr-icon-btn i { transition: transform 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97), color 0.25s; color: rgba(255, 255, 255, 0.85);
  }
  .hdr-like-wrap.hdr-liked .hdr-icon-btn i { color: var(--text-color); animation: hdrHeartBeat 0.38s ease;
  }

  @keyframes hdrHeartBeat { 0%   { transform: scale(1); } 35%  { transform: scale(1.5); } 65%  { transform: scale(0.88); } 100% { transform: scale(1); }
  }
  .hdr-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.25); margin: 0 2px;
  }

/* 
.heart2 { width: 100px; height: 100px; background: url("../img/icon/heart.png") no-repeat; background-position: 0 0; cursor: pointer; transition: background-position 1s steps(28); transition-duration: 0s; position: relative; top: -17px;
  }
  
  .heart2.is-active {   transition-duration: 1s;   background-position: -2800px 0; } */


.nav__bar .navitem2 .share__like .like { width: calc(100% - 40%); position: relative; text-align: center; justify-content: center; align-items: center; top: -10px;
}

.nav__bar .navitem2 .share__like .share { width: 40%; position: relative; text-align: center; justify-content: center; align-items: center; right: 10px;
}

.nav__bar .navitem2 .share__like .likes { position: relative; text-align: center; justify-content: center; align-items: center; top: 7px;
}

.nav__bar .navitem2 .share__like .share a>.bi { position: relative; top: 10px; padding-left: 20px;
}

/* ::-webkit-scrollbar { display: none; background: transparent;
} */

::-webkit-scrollbar { width: 8px; border-radius: 10px; /* background-color: #2c2e58; */
}

::-webkit-scrollbar-track { background-color: #d8d8d8;
}

::-webkit-scrollbar-thumb { width: 8px; border-radius: 10px; /* background-color: #17aded; */ background-color: var(--primary-color);
}

.main__img__area { position: relative; height: 35vh; width: 100%; box-sizing: border-box;
}

.main__img__area .img__scroll__area { display: -webkit-box; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}

.main__img__area .img__scroll__area .img__slide { width: -webkit-fill-available; scroll-snap-align: center; scroll-snap-stop: always; box-sizing: border-box;
}

.main__img__area .img__scroll__area .img__slide .images__main { position: relative; color: rgba(0, 0, 0, 0.50); height: 100%; width: 100%; background: #f3f5f5; animation: none; z-index: 0;
}

.main__img__area .img__scroll__area .img__slide .images__main img { width: 100%; height: 35vh; object-fit: cover; vertical-align: middle; pointer-events: none; overflow-clip-margin: content-box; border-style: none
}

.navbar__main { width: 100%; top: 0; left: 0; margin-bottom: -56px; position: sticky; z-index: 10;
}

.main__img__area .bottom__img__revel { display: flex; position: absolute; left: 0; bottom: -8px; padding: 0 12px; box-sizing: border-box; width: 100%; flex-wrap: nowrap; z-index: 2; -webkit-box-pack: center; justify-content: center;

}

.main__img__area .bottom__img__revel .img__box { border-radius: 10px; overflow: hidden; position: relative; display: grid; place-items: center; margin: 0 6px; max-width: 95px; box-sizing: border-box; height: 59px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 7px 5px;
}

.main__img__area .bottom__img__revel .img__box .main__img { height: 100%; width: 100%; background: #f3f5f7; animation: none; color: rgba(0, 0, 0, 0.3); box-sizing: border-box;

}

.main__img__area .bottom__img__revel .img__box .main__img img { height: 100%; width: 100%; vertical-align: middle; border-style: none; box-sizing: border-box;
}

.main__img__area .bottom__img__revel .img__box .text { overflow: hidden; line-height: 16px; letter-spacing: 0.5px; -webkit-box-flex: 1; align-items: center; text-align: center; white-space: nowrap; z-index: 0; position: absolute; color: #fff; width: 100%; background-image: linear-gradient(#ffffff03, #0e0d0d); bottom: 0px; padding-bottom: 3px; font-weight: 600; font-size: 14px;
}

.main__img__area::after { content: ' '; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 45px; background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.17) 20%, rgba(255, 255, 255, 0.87) 80%, #ffff); z-index: 1;
}

.section__title p { font-size: 22px; font-weight: 700;
}

.sub__text__icon { display: flex; gap: 10px;
}

.sub__text__icon .bi { font-size: 20px; font-weight: 700;
}

.sub__text__icon .text { font-size: 14px; font-weight: 400; color: #1a1919;
}

.sub__text__icon .text .subtext { margin-top: -14px; font-size: 10px; font-weight: 400; color: rgba(0, 0, 0, 0.479); margin-bottom: 4px; line-height: 20px;
}

.main__spas__lista { padding: 0px; margin: 0px; box-sizing: border-box;
}

.main__spas__lista .spas__area__start { display: flex; flex-direction: column; position: relative;

}

.main__spas__lista .spas__area__start .spa__text { font-weight: bold; font-size: 20px; line-height: 26px; letter-spacing: -0.28px; flex-wrap: nowrap; margin: 16px; text-transform: capitalize;
}

.main__spas__lista .spas__area__start .spas__scroll__area { display: -webkit-box; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}

.main__spas__lista .spas__area__start .spas__scroll__area .scroll__img { display: flex; flex-direction: column; max-width: 220px; height: 220px; background-color: #fff; margin-left: 14px; position: relative;

}

.spas__scroll__area .scroll__img .text a { color: var(--text-color3);
}

.main__spas__lista .spas__area__start .spas__scroll__area .scroll__img .text a { text-align: center; justify-content: center; margin: 0px auto; font-size: 22px; background-color: #fafafa; border-radius: 5px; font-weight: 600; display: block; text-decoration: none;
}

.main__spas__lista .spas__area__start .spas__scroll__area .scroll__img .img__details a { text-decoration: none; cursor: pointer;
}

.main__spas__lista .spas__area__start .spas__scroll__area .scroll__img .img__details a>.text__recom { font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: 0.2px; text-transform: none; margin-top: 8px; margin-left: 8px; padding: 2px 4px; background-color: #df3288; position: absolute; border-radius: 5px; overflow: hidden; color: #ffff;
}

.main__spas__lista .spas__area__start .spas__scroll__area .scroll__img .img__details a>.img__start { color: #1a1919; height: 100%; width: 100%; background: transparent; animation: auto ease 0s 1 normal none running none; min-height: 180px; max-height: 15px; width: -webkit-fill-available; scroll-snap-align: center; scroll-snap-stop: always; box-sizing: border-box;
}

.main__spas__lista .spas__area__start .spas__scroll__area .scroll__img .img__details a .img__start>img { border-radius: 8px; width: 100%; height: 100%; vertical-align: middle; object-fit: cover;
}

.recent__review { display: flex; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
}

.rates__area { background-color: #fff; border: 1px solid #ccc; border-radius: 6px; text-align: center; align-items: center; position: relative; display: flex;
}

.rates__area .tot__rate { align-items: center; justify-content: center; text-align: center; color: #000; font-weight: 600;
}

.rates__area .icon { align-items: center; display: block; margin: 0 auto; text-align: center; padding-left: 5px; justify-content: center;
}

.rates__area .icon>.bi { color: orange; fill: #000;
}

.find__review { display: flex; overflow-x: scroll; overflow-y: hidden; scroll-snap-type: mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; width: 100%; padding-left: 16px 0; flex-wrap: nowrap; flex-grow: 4; gap: 20px;
}

.tabrate-area .share_spa a { text-align: center; text-decoration: none; color: #fff; text-transform: uppercase; font-weight: 700; font-size: 20px; padding: 6px; cursor: pointer; display: inline-block; border-radius: 8px;
}


.button-2 { color: #fff; border: 3px solid var(--primary-color); border-radius: 5px; background-image: -webkit-linear-gradient(30deg, var(--primary-color) 50%, transparent 50%); background-image: linear-gradient(30deg, var(--primary-color) 50%, transparent 50%); background-size: 500px; background-repeat: no-repeat; background-position: 0%; -webkit-transition: background 500ms ease-in-out; transition: background 500ms ease-in-out;
}

.tabrate-area .share_spa a.button-2:hover { background-position: 100%; color: #2c2e58;
}


.user__like a { display: inline-flex; gap: 5px; /* padding-left: 20px; */ text-decoration: none;
}

.user__like .bi { font-size: 24px; font-weight: 800; color: #0b0446;
}

.user__like .text { font-size: 20px; font-weight: 600; color: #000;
}

.comment a { display: inline-flex; gap: 14px; padding-left: 10px; text-decoration: none;
}

/* .user__full__description { display: flex; gap: 85px;
} */

.comment .bi { font-size: 24px; font-weight: 800; color: #0b0446;
}

.comment .text { font-size: 20px; font-weight: 600; color: #000;
}

.share a { display: inline-flex; gap: 14px; padding-left: 10px; text-decoration: none;
}

.share .bi { font-size: 24px; font-weight: 800; color: #0b0446;
}

.share .text { font-size: 20px; font-weight: 600; color: #000;
}

.user__profiles { display: flex; gap: 10px; width: 100%;
}

.user__profiles .user_img { display: flex; gap: 20px; width: 100%;
}

.user_img a { display: flex; text-decoration: none; color: #000; gap: 20px;
}

.user__reviews___area { border-bottom: 1px solid #ccc;
}

.user__profiles .user_img h6 { font-weight: 700; font-size: 22px;
}

.user__profiles .user_img p { font-size: 18px; color: #3a3939;
}

/* .user__profiles .review__date { width: 200px; display: flex; gap: 20px;
} */

.buttom__date { background: #0c8bd4; padding-left: 20px; padding-right: 20px; margin-top: 20px; color: #fff; font-weight: 600; border: 1px solid #fff;
}

.navbar2 .booking__area { display: flex; width: 100%; background: #fff; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; /* padding: 0 16px 0 21px; */ box-sizing: border-box; /* gap: 20px; */
}

.total__amt { display: block; /* margin: 20px auto; */ margin: 0 auto; padding-top: 11px; padding-left: 22px; width: 50%;
}

.total__amt .main__rate { color: #000; font-size: 17px; letter-spacing: 1.2px; text-shadow: 1px 2px 7px #ffff; font-weight: 600;
}

.total__amt .sub__tax p { color: #53afe2; font-size: 12px; letter-spacing: 1.2px;
}

.booking__btn { display: block; padding-top: 10px; text-align: center; justify-content: center; align-items: center; margin: 0 auto; width: 50%; margin-right: 12px;
}

.booking__btn a { text-decoration: none;
}

/* .booking__btn a>button { color: #fff; text-shadow: 1px 2px 7px #000; font-weight: 700; font-size: 20px; letter-spacing: 1.2px; white-space: nowrap; display: flex; -webkit-box-pack: center; justify-content: center; text-align: center; align-items: center; box-sizing: border-box; width: 100%; outline: 0px; word-break: break-word; text-decoration: none; padding: 8px; background: rgb(255, 78, 99); border: 1px solid transparent; line-height: 18px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.24) 0px 5px 12px; min-height: 50px; transition: all 0.4s ease 1s;
}

.booking__btn a>button:hover { background: var(--secondry-color); transition: all ease .5s;
} */
.spa__wizard__card { width: 100%; background: #000; border-radius: 7px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.spa__wizard__card .wizard__back { background-image: url('../img/icon/wizard.png'); background-position: right; background-repeat: no-repeat; background-position-x: 97%; background-position-y: 60px; background-size: 50px 50px; /* display: flex; */
}

.card__details { display: flex; padding: 10px 35px 22px 20px; width: 100%; box-sizing: border-box; position: relative;
}

.card__details .wizard__text .dis__text p { color: #fff; padding-top: 15px; font-size: 15px; text-shadow: 1px 2px 5px #000; font-weight: 500; position: relative;
}

.card__details .wizard__text .member__btn a { text-decoration: none; background: #e29f3a; padding: 5px; border: 1px solid #fff; border-radius: 7px; color: #000000; text-shadow: 1px 2px 8px #fff; font-weight: 600; text-transform: capitalize;
}

.card__details .wizard__text .member__btn a span { background-color: #1a1919; color: #fff; font-size: 14px; font-weight: 700; padding: 4px; border-radius: 4px;
}

.card__details .rigth__arrow { color: #fff; margin: 25px auto; display: block;
}

.account__area { display: flex; flex-direction: column; gap: 18px; width: 100%;
}

.account__area .account__btn a { text-decoration: none; font-size: 15px; color: #2c2a2a; font-family: Georgia, 'Times New Roman', Times, serif; font-weight: 500; letter-spacing: 1.2px; white-space: nowrap;
}

.account__area .account__btn a>.bi { font-size: 22px; font-weight: 800;
}

.login__toparea { display: flex; width: 100%;
}

.login__toparea .cuticon { width: calc(100% - 75%);
}

.login__toparea .cuticon button { background: transparent; border: none; font-size: 23px; font-weight: 800;
}

.login__toparea .logo__text { display: flex; width: 60%;
}

.login__toparea .logo__text .logo img { position: relative; top: -15px;
}

.login__toparea .language__icon { width: 15%; justify-content: end; align-items: end; text-align: end;
}

.language__icon .bi { font-size: 23px; font-weight: 700;
}

.logo__text .section__title p { font-size: 18px; width: 100%;
}

.start__login__area { flex-wrap: wrap; display: flex; justify-content: center;
}

.start__login__area span p { font-weight: 600; line-height: 30px; letter-spacing: -0.3px; padding: 15px 15px 22px; font-size: 24px;
}

.start__login__area .log__con { display: flex; flex-direction: column;
}

.start__login__area .log__con .input__num { width: 100%; height: 48px;
}

.start__login__area .log__con .input__num .input__area { margin: 0; position: relative;
}

.start__login__area .log__con .input__num .input__area>input { box-shadow: none; box-sizing: border-box; -webkit-appearance: none; font-weight: 400; padding: 8px 0 8px 50px; text-align: left; border: 1px solid var(--text-color3); background: #fff; font-size: 16px; height: 48px; line-height: 24px; color: #2a2a2a; text-overflow: ellipsis; border-radius: 6px; box-sizing: border-box; outline: none; transition: border .3s ease;
}

.start__login__area .log__con .input__num .input__area input:focus { border-color: var(--secondary-color);
}

.start__login__area .log__con .input__num .input__area>.text__num { color: var(--text-color3); top: 12px; left: 10px; position: absolute; transition: all .3s ease; outline: none; text-align: center; user-select: none; -webkit-tap-highlight-color: transparent; font-size: 16px; font-weight: 500; line-height: 24px;
}

.log__con .continue { width: 100%; display: flex; margin-top: 16px;
}

.log__con .continue>button { font-weight: 600; font-size: 18px; line-height: 24px; text-align: center; width: 100%; border: 0; padding: 8px 12px; height: 40px; /* background: #2298da; */ color: #fff; text-decoration: 1px 1px 5px #2a2a2a; outline: none; border-radius: 8px;
}

.may__be__later { display: block; margin: 10px auto;
}

.may__be__later p { box-shadow: rgba(25, 22, 99, 0.418) 0px 2px 4px 0px, rgba(25, 22, 99, 0.418) 0px 2px 16px 0px; color: #555; text-align: center; justify-content: center; align-items: center; height: auto; z-index: 99999; border-radius: 12px; width: 50%; padding: 11px; font-size: 17px; font-weight: 600; display: block; margin: 10px auto; position: relative;
}

.user__enrty__area { display: flex; flex-direction: column; gap: 14px; width: 100%; align-items: center; justify-content: center;
}

.user__enrty__area .btn_singup { background-color: var(--secondry-color); color: var(--text-color); text-shadow: 1px 2px 5px var(--text-color); font-weight: 600; font-size: 17px; border-radius: 5px; padding: 6px; padding-left: 50px; padding-right: 50px;
}

.user__booking__area { display: flex; flex-direction: column; gap: 20px; justify-content: center; align-items: center; width: 100%;
}

.user__booking__area .inputgruop select { width: 350px;
}

.user__booking__area .input__date input { width: 350px;
}

.user__booking__area .input__time input { width: 350px;
}

.user__booking__area .confirm__btn button { text-align: center; text-decoration: none; color: #fff; text-transform: capitalize; font-weight: 600; font-size: 16px; padding: 6px 10px 6px 10px; cursor: pointer; display: inline-block; border-radius: 8px;
}

.user__booking__area .confirm__btn button { color: #fff; border: 2px solid #2c2e58; border-radius: 5px; background-image: -webkit-linear-gradient(30deg, #2c2e58 50%, transparent 50%); background-image: linear-gradient(30deg, #2c2e58 50%, transparent 50%); background-size: 500px; background-repeat: no-repeat; background-position: 0%; -webkit-transition: background 500ms ease-in-out; transition: background 500ms ease-in-out;
}

.user__booking__area .confirm__btn button:hover { background-position: 100%; color: #2c2e58;
}

.spa___details button { /* background: transparent; */ /* outline: none; */ /* border: none; */ cursor: pointer;
}


.spa___details .addwishlist { position: absolute; right: 14px; top: 14px; display: flex; -webkit-box-align: center; align-items: center; box-sizing: border-box; -webkit-box-pack: center; justify-content: center; background: #f7f5f5f6; border-radius: 50%; padding: 7px; height: 38px; width: 38px; box-shadow: rgba(255, 255, 255, 0.06) 0px 24px 38px, rgba(255, 255, 255, 0.04) 0px 9px 46px, rgba(255, 255, 255, 0.685) 0px 11px 15px; cursor: pointer;
}

.heart { width: 100px; height: 100px; background: url("../img/icon/heart.png") no-repeat; background-position: 0 0; cursor: pointer; transition: background-position 1s steps(28); transition-duration: 0s; position: absolute; top: -30px; right: -31px;
}

.heart.is-active { transition-duration: 1s; background-position: -2800px 0;
}


/* .addwishlist .active { background: #fff;
}

.addwishlist .bi { color: #fff; font-size: 22px; margin: 0 auto; display: block; user-select: none; cursor: pointer;
}

.addwishlist .bi:hover { color: var(--primary-color); user-select: contain;
} */

.wishlist { position: absolute; z-index: 10; right: 8px; top: 8px; display: flex; -webkit-box-align: center; align-items: center; box-sizing: border-box; -webkit-box-pack: center; justify-content: center; background: rgb(255, 255, 255); border-radius: 50%; padding: 6px; height: 30px; width: 30px; box-shadow: rgba(0, 0, 0, 0.06) 0px 24px 38px, rgba(0, 0, 0, 0.04) 0px 9px 46px, rgba(0, 0, 0, 0.08) 0px 11px 15px;
}

.wishlist.active { background: #fff;
}

.wishlist .bi { fill: var(--primary-color); color: var(--primary-color); stroke: #fff; animation-name: zoom-in; animation-duration: .5s; animation-timing-function: ease-in-out;
}

.trashspa { position: absolute; z-index: 10; top: 45px; right: 8px; box-shadow: rgba(0, 0, 0, 0.06) 0px 24px 38px, rgba(0, 0, 0, 0.04) 0px 9px 46px, rgba(0, 0, 0, 0.08) 0px 11px 15px; display: flex; width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #0e0d0d; -webkit-box-align: center; align-items: center; box-sizing: border-box; -webkit-box-pack: center; justify-content: center;
}

.trashspa.active { background: #ff4b6a;
}

.trashspa .bi { fill: #fff; color: #fff; stroke: #fff; animation-name: zoom-in; animation-duration: .5s; animation-timing-function: ease-in-out;
}

.remove__spa button { background: var(--primary-color); color: #fff; text-decoration: 1px 1px 7px #2a2a2a; border: none; border-radius: 5px; letter-spacing: 1.3px;
}

.error__area { display: flex; flex-direction: column; gap: 15px; padding: 8px; justify-content: center; align-items: center;
}

.error__area .img__error { position: relative; height: 100%; width: 100%; animation: none; z-index: 0; border-radius: 8px;
}

.error__area .img__error img { width: 100%; height: 50vh; object-fit: cover; vertical-align: middle; pointer-events: none; overflow-clip-margin: content-box; /* border-style: none */ border-radius: 8px;
}

.foru__zero__four p { margin-top: 30px; background-color: var(--secondry-color); color: #fff; font-size: 32px; text-shadow: 1px 1px 6px #1a1919; padding: 35px 40px 25px 40px; font-weight: 800;
}

.back__icons .bi { font-size: 22px; font-weight: 700;

}

.booking__tabs { overflow: hidden; border-bottom: 1px solid #ccc; background-color: #ffffff;
}

.booking__tabs button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; font-family: sans-serif;
}

.booking__tabs button:hover { background-color: #ddd;
}

.booking__tabs button.active { /* background-color: #ccc; */ border-bottom: 2px solid #023dff; color: #023dff; transition: 0.3s; font-size: 17px; font-family: sans-serif;
}


.tabcontent__book { display: none;
}

.area__bookdate p { font-weight: 600; font-size: 12px; line-height: 16px; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(0, 0, 0, 0.5); margin-bottom: 4px;
}

#Upcomming { padding: 0px; position: relative; margin-top: 0px;
}

#Cancel { padding: 15px; position: relative; margin-top: -10px;
}

#Upcomming a { text-decoration: none;
}

.upcomming__book__area { display: flex; justify-content: space-between; width: 100%; align-items: start;
}

.upcomming__book__area .bookdtl__area { width: calc(100% - 20%);
}

.upcomming__book__area .spa__img__area { width: 20%;
}

.upcomming__book__area .img__area { display: inline-block; height: 62px; width: 62px; overflow: hidden; border-radius: 6px; margin-left: 16px;
}

.spa__names h5 { color: #000;
}

.upcomming__book__area .img__area>img { height: 100%; width: 100%; object-fit: cover;
}

.bookdtl__area .date__time { display: inline-flex; padding-top: 4px; width: 100%;
}

#Cancel a { text-decoration: none;
}

.bookdtl__area .date__time>.time { border: 1px solid #ccc; padding-left: 10px; padding-bottom: 2px; padding-top: 2px; padding-right: 10px; margin-left: 5px;
}

.amount__area { display: flex; width: 100%; padding-top: 6px;
}

.amount__area .text { color: rgb(2, 1, 1); font-size: 14px; font-weight: 600; text-transform: capitalize; line-height: 16px; width: calc(100% - 15%); letter-spacing: 0.4px;
}

.amount__area .tot__amt { width: 15%; color: #0e0d0d; font-size: 14px; font-weight: 600; text-transform: capitalize; line-height: 16px; /* margin-left: 16px; */ letter-spacing: 0.4px;
}

.pay__btn { padding: 8px; border-radius: 5px; background: var(--primary-color); width: 100%;
}

.pay__btn a { text-decoration: none; color: #fff; text-shadow: 1px 2px 5px #1a1919; font-weight: 700; line-height: 10px; font-size: 18px; letter-spacing: .4px; display: block; margin: 0 auto; text-align: center; justify-content: center; align-items: center;
}

.map__help__btn { display: flex; gap: 10px; width: 100%; margin-top: 10px;
}

.map__help__btn .directions { width: 50%; color: rgb(34, 152, 218); border: 1px solid rgba(34, 152, 218, 0.2); padding: 5px; border-radius: 4px; position: relative; background: #fff; box-shadow: rgba(0, 0, 0, 0.075) 0px 3px 8px;
}

.map__help__btn .help { width: 50%; border: 1px solid rgba(34, 152, 218, 0.2); padding: 5px; border-radius: 4px; position: relative; background: #fff; box-shadow: rgba(0, 0, 0, 0.075) 0px 3px 8px;
}

.map__help__btn .directions a { display: block; text-align: center; text-decoration: none; margin: 0 auto; align-items: center; justify-content: center; color: rgb(34, 152, 218);
}

.map__help__btn .help a { display: block; text-align: center; text-decoration: none; margin: 0 auto; align-items: center; justify-content: center; color: rgb(34, 152, 218);
}

.refund__status { background: var(--secondry-color); padding: 15px; width: 100%; border-radius: 5px;
}

.refund__status a { text-decoration: none; color: #fff; text-shadow: 1px 2px 5px #1a1919; font-weight: 700; line-height: 10px; font-size: 20px; letter-spacing: .4px; display: block; margin: 0 auto; text-align: center; justify-content: center; align-items: center;
}

.book__again__btn { background: #fff; padding: 15px; width: 100%; border: 1px solid rgb(34, 152, 218); border-radius: 5px; margin-top: 10px;
}

.book__again__btn a { text-decoration: none; color: rgb(34, 152, 218); font-weight: 600; line-height: 10px; font-size: 18px; letter-spacing: .4px; display: block; margin: 0 auto; text-align: center; justify-content: center; align-items: center;
}

.confirm__trigger { display: inline-flex; width: 100%; padding: 15px; background: var(--primary-color); z-index: -1;
}

.cancel__trigger { display: inline-flex; width: 100%; padding: 15px; background: rgb(167, 11, 11); z-index: -1;
}

.confirm__trigger .confirm__text { width: calc(100% - 20%);
}

.confirm__trigger .confirm__text h4 { color: #fff; font-weight: 700;
}

.confirm__trigger .confirm__text p { color: #fff; font-weight: 500;
}

.confirm__trigger .confirm__icon { margin: 15px auto; display: block; width: 20%;
}

.confirm__trigger .confirm__icon .bi { align-items: center; justify-content: center; text-align: center; font-size: 26px; color: #fff; font-weight: 700; margin-left: 40px;
}

.cancel__trigger .confirm__text { width: calc(100% - 20%);
}

.cancel__trigger .confirm__text h4 { color: #fff; font-weight: 700;
}

.cancel__trigger .confirm__text p { color: #fff; font-weight: 500;
}

.cancel__trigger .confirm__icon { margin: 15px auto; display: block; width: 20%;
}

.cancel__trigger .confirm__icon .bi { align-items: center; justify-content: center; text-align: center; font-size: 26px; color: #fff; font-weight: 700; margin-left: 40px;
}

.payment__dtl__area { padding: 15px; background: #fff; border-radius: 8px;
}

.payment__dtl__area h3 { color: #000; font-weight: 800;
}

/* pay details area start here */
.paytabs { overflow: hidden;
}

.paytabs .paylinks:hover { background-color: #ddd;
}

.paytabs .paylinks.active { background-color: var(--secondry-color); color: #fff; border: 1px solid #ffffff; font-weight: 700; border-radius: 7px; letter-spacing: 0.4px;
}

.paytabs .paylinks .text { font-weight: 600;
}

.paytabs .paylinks .dis__tab { background-color: #ccc; color: #000000; font-weight: 600;
}

.paytabs .paylinks .dis__tab2 { background-color: var(--primary-color); color: var(--text-color); font-weight: 600;
}

.paycontent { display: none;
}

.payment__dtl__area .payment__method { display: flex; width: 100%; border-radius: 6px; border: 1.5px solid rgb(209, 208, 208); box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.payment__dtl__area .payment__method .pay__atspa { width: 50%; margin: 0 auto; display: block; align-items: center; justify-content: center; text-align: center; padding: 5px;
}

.payment__dtl__area .payment__method .pay__online { width: 50%; margin: 0 auto; display: block; align-items: center; justify-content: center; text-align: center; padding: 5px;
}

.amount__head { display: flex; width: 100%;
}

.amount__head p { width: calc(100% - 20%); color: #000; font-weight: 600;
}

.amount__head .text { width: 20%; float: right; align-items: right; text-align: right; padding-right: 8px;
}

.room__charge { display: flex; width: 100%; padding: 3px; border-bottom: 1px solid #111111;
}

.room__charge p { width: calc(100% - 20%); color: #1a1919; font-weight: 600;
}

.room__charge .text { width: 20%; /* padding-right: 10px; */ padding-left: 20px; color: #1a1919; font-weight: 700; text-align: center; margin: 0 auto; justify-content: center; align-items: center;
}

.discount__text { display: flex; width: 100%; padding: 3px; border-bottom: 1px solid #111111;

}

.discount__text p { width: calc(100% - 20%); /* color: #1a1919; */ font-weight: 600;
}

.discount__text .text { width: 20%; /* padding-right: 10px; */ padding-left: 20px; color: #0c8bd4; font-weight: 700; text-align: center; margin: 0 auto; justify-content: center; align-items: center;
}

.wizard { display: flex; width: 100%; padding: 3px; border-bottom: 1px solid #111111;

}

.wizard p { width: calc(100% - 20%); /* color: #1a1919; */ font-weight: 600;
}

.wizard .text { width: 20%; /* padding-right: 10px; */ padding-left: 20px; color: #0c8bd4; font-weight: 700; text-align: center; margin: 0 auto; justify-content: center; align-items: center;
}

.total__amountdtl { display: flex; width: 100%; padding: 3px; margin-top: 8px;
}

.total__amountdtl h5 { width: calc(100% - 20%); color: #1a1919; letter-spacing: 0.4px; font-weight: 700;
}

.total__amountdtl .text { width: 20%; padding-left: 5px; color: #1a1919; font-weight: 700; text-align: center; margin: 0 auto; justify-content: center; align-items: center; font-size: 18px; font-weight: 700;
}

.accordion-button:focus { border-color: var(--secondry-color); border: 1px solid var(--secondry-color); box-shadow: none; outline: none;
}

.booking__dtl__area { padding: 5px; border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: rgba(60, 64, 67, 0.11) 0px 1px 2px 0px, rgba(60, 64, 67, 0.096) 0px 1px 3px 1px; padding: 10px;
}

.book__id { display: flex; gap: 10px; padding-left: 5px;
}

.book__id .text { font-weight: 700; font-size: 18px;
}

.spaimg__add { display: flex; width: 100%; padding-left: 5px;
}

.spaimg__add .text__head { width: calc(100% - 25%);
}

.spaimg__add .img__area { width: 25%;
}

.spaimg__add .img__area .img { width: 55px; height: 55px; overflow: hidden; display: inline-block; border-radius: 6px; margin-left: 8px;
}

.spaimg__add .img__area .img>img { width: 100%; height: 100%; object-fit: cover;
}

.client__name { padding-left: 5px;
}

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

.multi__icon .icon a { text-decoration: none; color: var(--secondry-color);
}

.list__area { display: flex; flex-direction: column; /* gap: 10px; */
}

.list__area .text { color: #000; font-weight: 600;
}

.list__area .text span { color: #00a983; font-weight: 500; font-size: 11px; text-transform: uppercase;
}

.list__area .text2 { color: #000; font-weight: 600;
}

.list__area .text2 span { color: orange; font-weight: 500; text-transform: uppercase; font-size: 11px;
}

.policy__area { display: none; background-color: #ffff; border-radius: 10px; padding: 7px; border: 1px dotted #2a2a2a;
}

.cancellation__policy { display: flex; flex-direction: column; margin-top: 10px; width: 100%;
}

.cancellation__policy .main__head { background: #fff; border: 1px solid var(--secondry-color); color: var(--secondry-color); padding: 5px; border-radius: 5px;
}

.assistance__btn { display: flex; width: 100%; margin-top: 10px; padding: 7px; justify-content: center; align-items: center; text-align: center; gap: 20px;
}

.assistance__btn .call__spa { width: 50%;

}

.assistance__btn .call__mart { width: 50%;

}

.assistance__btn .call__spa a { text-decoration: none; background: #fff; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; border: 1px solid var(--secondry-color); border-radius: 10px 1px 10px 1px; padding-left: 40px; padding-right: 40px; color: var(--secondry-color); padding-top: 10px; width: 100%; padding-bottom: 10px;

}

.assistance__btn .call__mart a { text-decoration: none; background: #fff; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; border: 1px solid var(--secondry-color); border-radius: 10px 1px 10px 1px; padding-left: 20px; padding-right: 20px; color: var(--secondry-color); width: 100%; padding-top: 10px; padding-bottom: 10px;

}

/* .cancel__book__btn a { text-decoration: none; border: 1px solid var(--primary-color); color: var(--secondry-color); padding: 7px; border-radius: 7px;
}

.cancel__book__btn a:hover { border: 1px solid #005fdb; color: #005fdb;
} */

.cancel__book__btn a { text-align: center; text-decoration: none; color: #fff; text-transform: capitalize; font-weight: 600; font-size: 16px; padding: 6px 10px 6px 10px; cursor: pointer; display: inline-block; border-radius: 8px;
}

.cancel__book__btn .button-2 { color: #fff; border: 2px solid #2c2e58; border-radius: 5px; background-image: -webkit-linear-gradient(30deg, #2c2e58 50%, transparent 50%); background-image: linear-gradient(30deg, #2c2e58 50%, transparent 50%); background-size: 500px; background-repeat: no-repeat; background-position: 0%; -webkit-transition: background 500ms ease-in-out; transition: background 500ms ease-in-out;
}

.cancel__book__btn .button-2:hover { background-position: 100%; color: #2c2e58;
}

.cancel__book__btn { margin-bottom: 20%;
}

.profile____area { display: flex; width: 100%; gap: 7px; margin-bottom: 20px;
}

.profile____area .profile__img { width: 45px; height: 45px; display: inline-block; overflow: hidden; border-radius: 50%;
}

.profile____area .profile__img img { object-fit: cover; width: 100%; height: 100%;
}

.profile____area .pro__name { display: block; margin-top: 8px;

}

.profile____area .pro__name h5 { font-weight: 700;
}

/* end bookings details here */

/* gallery area */
.scroll__photo__area { overflow-x: scroll; width: 100%; background-color: #fff;
}

.scroll__photo__area .scroll__img__area { background: transparent; box-sizing: border-box; overflow-y: hidden; overflow-x: scroll; -webkit-box-align: stretch; align-items: stretch; display: flex; flex-flow: row nowrap; margin: 0 auto; border-bottom: 1px solid #111111;
}

.scroll__photo__area .scroll__img__area>a { text-decoration: none; color: #fff;
}

.images__area { display: flex; flex-direction: column; width: 72px; margin: 0 2px; -webkit-box-align: center; align-items: center; box-sizing: border-box; font-family: 'Inter', sans-serif;
}

.images__area .tabs__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; line-height: 16px; letter-spacing: 0.2px; font-weight: 600; width: 100px; margin-top: 8px; margin-bottom: 0px; align-self: center; text-align: center; color: #111111; box-sizing: border-box; margin-bottom: 10px;
}

.images__area__main { display: flex; flex-direction: column; gap: 15px; padding: 8px; justify-content: center; align-items: center;

}

.images__area__main .images____start { position: relative; color: rgba(0, 0, 0, 0.50); height: 100%; width: 100%; background: #f3f5f5; animation: none; z-index: 0; border-radius: 8px;
}

.images__area__main .images____start img { width: 100%; height: 35vh; object-fit: cover; vertical-align: middle; pointer-events: painted; overflow-clip-margin: content-box; /* border-style: none */ border-radius: 8px;
}

.mobile__photoarea__popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 9999;
}

.popup-content { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%;
}

.mobile__photoarea__popup img { width: 100%; height: auto;
}

.photoarea__close { position: absolute; top: 20px; right: 20px; color: white; font-size: 41px; font-weight: 800; cursor: pointer;
}

.mobile__photoarea__popup.open .popup-content { opacity: 1; transform: translate(-50%, -50%) scale(1); /* Zoom effect */
}

.images____start .spa__catetext { position: absolute; top: 5px; border-radius: 0px 4px 4px 0px; left: 0; padding-top: 2px; padding-bottom: 2px; padding-left: 8px; padding-right: 8px; color: #fff; background: #000;
}



/* .images___area img{ position: absolute; top: 30%; left: 0%;
} */

.nofound__area { display: flex; flex-direction: column; gap: 15px; padding: 8px; justify-content: center; align-items: center;
}

.nofound__area .img__error { position: relative; height: 100%; width: 100%; animation: none; z-index: 0; border-radius: 8px;
}

.nofound__area .img__error img { width: 100%; height: 50vh; object-fit: cover; vertical-align: middle; pointer-events: none; overflow-clip-margin: content-box; /* border-style: none */ border-radius: 8px;
}

/* city area */
.all__city__spa a { display: flex; width: 100%; padding: 14px 10px 10px 10px; margin-top: 55px; text-decoration: none;
}

.all__city__spa a>.city____text { width: calc(100% - 25px); font-size: 17px; letter-spacing: 1.8px; text-transform: capitalize; font-weight: 500; font-family: Georgia, 'Times New Roman', Times, serif;
}

.all__city__spa a>.icon { font-size: 17px; color: #000; font-weight: 800; width: 25px;
}

.cities___area .popular___cities p { padding: 6px 0px 14px 16px; font-weight: 600; font-size: 14px; line-height: 17px; letter-spacing: 0.9px; text-transform: uppercase; color: rgba(0, 0, 0, 0.61);
}

.cities___area .start__popular { font-weight: 600; font-size: 15px; line-height: 24px; padding: 0 0 5px; z-index: 9; margin: 0 16px 14px; position: relative; width: calc(100% - 25px); color: rgb(255, 255, 255);
}

.cities___area .start__popular a { border: 1px solid rgba(0, 0, 0, 0.329); border-radius: 25px; display: inline-block; text-decoration: none; color: #111111; margin-bottom: 7px; margin-right: 8px; margin-top: 0px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; background-color: #fff; padding: 4px 12px; letter-spacing: 0.4px; font-weight: 500; font-size: 14px; line-height: 27px;
}

.cities___area .start__popular a:hover { background-color: #0b04468e; color: #fff;
}

.all__localarea { margin: 0px; background-color: #fff; display: flex; flex-grow: column wrap; flex-direction: column;
}

.all__localarea .head__title p { padding: 0px 0px 8px 10px; font-weight: 600; font-size: 14px; line-height: 17px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(0, 0, 0, 0.664);
}

.all__localarea .start__localarea { display: flex; flex-direction: column; width: 100%;

}

.all__localarea .start__localarea a { text-decoration: none; color: #111111; text-overflow: ellipsis; overflow: hidden; padding: 12px 16px; font-size: 14px; width: calc(100% - 32px); line-height: 25px; opacity: 1; z-index: 10; font-weight: 600; letter-spacing: 0.9px; white-space: nowrap;
}

.mb-7 { margin-bottom: 4rem;
}

.navbars { border-bottom: 1px solid #ccc; width: 100%; padding: 0px; background-color: #fff;
}

.navbars .reffer-nav-area { position: relative; display: flex; width: 100%; gap: 10px; margin-top: 15px;
}

.navbars .reffer-nav-area .back__btn { width: calc(100% - 85%);
}

.navbars .reffer-nav-area .back__btn .bi { font-size: 26px; font-weight: 900; padding-left: 11px;
}

.navbars .reffer-nav-area .earn__text { width: 60%; font-size: 20px; font-weight: 700;
}

.navbars .reffer-nav-area .view__faqs { width: 25%;
}

.navbars .reffer-nav-area .view__faqs a { text-decoration: none; font-size: 15px;
}

.upimg__view { width: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box;
}

.input-groups { position: relative; width: 100%; height: auto; margin: 20px auto;
}

.input-groups img { width: 150px; height: 150px; display: none; margin-bottom: 32px; border: 2px dotted var(--secondry-color); border-radius: 5px;
}

.input-groups input { display: none;
}

.input-groups label { width: 210px; height: 50px; background: var(--secondry-color); color: var(--text-color); font-weight: 700; text-shadow: 1px 1px 7px #2c2e58; text-transform: capitalize; border-radius: 10px 1px 10px 2px; cursor: url("../img/icon/email.png"); display: flex; align-items: center; justify-content: center; margin: 0 auto;
}

.click-btn { display: flex; width: 150px; height: 50px; justify-content: center; align-items: center; margin: 0.5rem; line-height: 35px; border: 1px solid; border-radius: 5px; text-align: center; font-size: 16px; color: var(--text-color3); text-decoration: none; transition: all 0.35s; box-sizing: border-box;
}

.btn-style500 { border-color: var(--secondry-color); color: var(--text-color); font-weight: 700; text-align: center; justify-content: center; align-items: center; display: block; margin: 0 auto; text-shadow: 1px 1px 7px #2a2a2a; background: var(--primary-color);
 &:hover { color: var(--text-color); transition-delay: 0.2s; animation: ani500 0.6s forwards; background: radial-gradient(circle, var(--secondry-color) 0.2em, transparent 0.3em) 6em 6em/1em 1em, radial-gradient(circle, var(--secondry-color) 0.2em, transparent 0.3em) 0 0/1em 1em; }
}

@keyframes ani500 { 100% { background-size: 2.375em 2.375em, 0.1em 0.1em; }
}

.navbars { border-bottom: 1px solid #ccc; width: 100%; padding: 0px; background-color: #fff;
}

.navbars .reffer-nav-area { position: relative; display: flex; width: 100%; gap: 10px; margin-top: 15px;
}

.navbars .reffer-nav-area .back__btn { width: calc(100% - 85%);
}

.navbars .reffer-nav-area .back__btn .bi { font-size: 26px; font-weight: 900; padding-left: 11px;
}

.navbars .reffer-nav-area .earn__text { width: 60%; font-size: 20px; font-weight: 700;
}

.navbars .reffer-nav-area .view__faqs { width: 25%;
}

.navbars .reffer-nav-area .view__faqs a { text-decoration: none; font-size: 15px;
}

.refferal__area { background: var(--primary-color); width: 100%; height: 100%;
}

.reffer__user__img { display: flex; width: 100%; justify-content: center; align-items: center; gap: 120px; padding: 20px;
}

.reffer__user__img .img__1 { display: inline-block; overflow: hidden; width: 54px; height: 54px; border-radius: 50%;
}

.reffer__user__img .img__1>img { position: relative; width: 100%; height: 100%; object-fit: contain;
}

.section__subtext { display: block; margin: 0 auto; justify-content: center; align-items: center; margin-top: -25px;
}

.section__subtext p { text-align: center; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 1.2px;
}

.section__subtext .down__arrow { text-align: center; font-size: 24px; font-weight: 900; color: #ffffff; margin-top: -20px;
}

.section____text { display: block; margin: 0 auto; justify-content: center; align-items: center; padding: 12px; margin-top: -12px;
}

.section____text p { text-align: center; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: 1.2px;
}

.down__arrow { text-align: center; font-size: 24px; font-weight: 900; color: #000000; margin-top: -20px;
}

.section____text2 { display: block; margin: 0 auto; justify-content: center; align-items: center; padding: 12px; margin-top: -25px;

}

.section____text2 p { text-align: center; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: 1.2px; border-bottom: 1px solid var(--text-color);
}

.reffer__user__img2 { display: flex; width: 100%; margin-top: -20px;

}

.reffer__user__img2 .reffer___andtext { display: flex; width: 50%; gap: 6px; padding: 11px;
}

.reffer__user__img2 .reffer___andtext .img__1 { display: inline-block; overflow: hidden; width: 54px; height: 54px; border-radius: 50%;
}

.reffer__user__img2 .reffer___andtext .img__1>img { width: 100%; height: 100%; object-fit: contain; position: relative;
}

.reffer__user__img2 .reffer___andtext .main__text { text-align: left; float: left;
}

.reffer__user__img2 .reffer___andtext .main__text p { font-size: 12px; color: #ffffff; font-weight: 600;
}

.reffer__user__img2 .reffer___andtext .main__text .texts { font-size: 12px; color: #ffffff; font-weight: 600; margin-top: -15px; letter-spacing: 0.9px;
}

.reffer__user__img2 .reffer___andtext2 .img__1 { display: inline-block; overflow: hidden; width: 54px; height: 54px; border-radius: 50%; position: relative; top: -12px;
}

.reffer__user__img2 .reffer___andtext2 { display: flex; width: 50%; gap: 6px; padding: 11px; justify-content: end; align-items: end;
}

.reffer__user__img2 .reffer___andtext2 .img__1>img { width: 100%; height: 100%; object-fit: contain; position: relative;
}

.reffer__user__img2 .reffer___andtext2 .main__text { text-align: right; float: right;
}

.reffer__user__img2 .reffer___andtext2 .main__text p { font-size: 12px; color: #ffffff; font-weight: 600;
}

.reffer__user__img2 .reffer___andtext2 .main__text .texts { font-size: 12px; color: #ffffff; font-weight: 600; margin-top: -15px; letter-spacing: 0.9px;
}

.shares__buttons { display: flex; padding: 20px; width: 100%; gap: 10px;
}

.shares__buttons .whatsapp__btn { width: 60%; background: var(--secondry-color); border: 1px solid #fff; border-radius: 5px; box-shadow: rgba(243, 87, 87, 0.596) 0px 3px 8px;
}

.shares__buttons .whatsapp__btn a { color: #fff; font-size: 18px; font-weight: 700; padding: 8px 20px 8px 20px; text-decoration: none; transition: all ease-in-out .8s; text-align: center; display: block; margin: 0 auto;
}

.shares__buttons .whatsapp__btn a:hover { background: var(--primary-color); transition: all ease-in-out .8s; transform: translateY(1.5em);
}

.shares__buttons .share____btn { width: 40%; background: #fff; border: 1px solid #7e7c7c; border-radius: 4px; box-shadow: rgba(243, 87, 87, 0.596) 0px 3px 8px;
}

.shares__buttons .share____btn a { text-decoration: none; color: #0e0d0d; font-weight: 700; padding: 8px 20px 8px 20px; transition: all ease-in-out .8s; text-align: center; display: block; margin: 0 auto;
}

.shares__buttons .share____btn a:hover { transform: translateX(2em); background: #000; transition: all ease-in-out .8s; color: #fff;
}

.rewards__btn { background: #fff; border: 1px solid var(--secondry-color); border-radius: 5px; width: 100%; padding: 10px; justify-content: center; align-items: center; transition: all ease-in-out .7s; box-shadow: rgba(243, 87, 87, 0.596) 0px 3px 8px;
}

.rewards__btn a { text-decoration: none; align-items: center; text-align: center; display: block; font-size: 17px; transition: all ease-out .4s; font-weight: 600; color: #005fdb;
}

.rewards__btn:hover a { background: var(--secondry-color); color: #ffffff; padding: 3px; transition: all ease-in .4s;
}

.copyto__btn { display: flex; width: 100%; padding: 10px; gap: 12px; margin-top: 24px; border-radius: 5px; background: #fff; box-shadow: rgba(243, 87, 87, 0.596) 0px 3px 8px; border: 1px solid var(--secondry-color);
}

.copyto__btn input:focus { outline: none; box-shadow: none; border: none;
}

.copyto__btn input { border: none; outline: none; text-align: center; justify-content: center; align-items: center; font-size: 18px; font-weight: 700; width: calc(100% - 40%);
}

.copyto__btn button { width: 40%; background: var(--secondry-color); border: none; color: #fff; font-weight: 700; border-radius: 10px 1px 10px 1px; font-size: 18px; text-shadow: 1px 1px 7px #0e0d0d;
}

.legends p { top: 10px; margin-bottom: -20px; position: relative; left: 10px; width: 50%; color: #ffffff; background: var(--secondry-color); border-radius: 5px; padding: 1px; text-align: center;
}

.rewards__collection__area { display: flex; overflow: hidden; justify-content: center; align-items: center; width: 100%; margin: 0 auto; padding: 14px; margin-top: 4px; background-color: #fff; /* border: 1px solid #005fdb; */
}

.rewards__collection__area .earn__area { display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; font-weight: 500; font-size: 14px; line-height: 24px; width: calc(100% - 50%); padding: 4px; border: 1px solid var(--secondry-color); box-sizing: border-box; /* background: #005fdb; */ border-top-left-radius: 7px; border-bottom-left-radius: 7px; color: #111010; cursor: pointer; letter-spacing: 0.9px; box-shadow: rgba(223, 75, 75, 0.151) 0px 3px 8px;
}

.rewards__collection__area .earnlinks.active { background-color: var(--secondry-color); color: #fff; font-weight: 700;
}

.Earncontent { display: none; /* padding: 20px; border: 1px solid #00a983; */
}

.rewards__collection__area .pending__area { display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; font-weight: 500; font-size: 14px; line-height: 24px; width: 50%; padding: 4px; border: 1px solid #005fdb; box-sizing: border-box; /* background: #005fdb; */ border-top-right-radius: 7px; border-bottom-right-radius: 7px; color: #000000; letter-spacing: 0.9px; box-shadow: rgba(223, 75, 75, 0.116) 0px 3px 8px;
}

.earn__rewards__area .eara__area__mains { display: flex; width: 100%; overflow: hidden; background-color: #fff; border: 1px solid var(--secondry-color); border-radius: 5px; /* padding: 12px; */ padding: 5px 17px 5px 17px; box-shadow: rgba(255, 78, 99, 0.486) 0px 4px 8px;
}

.earn__rewards__area .eara__area__mains .date__icon { display: flex; gap: 15px; width: calc(100% - 30%);
}

.eara__area__mains .date__icon .icon { padding-top: 15px; width: calc(100% - 90%);
}

.eara__area__mains .date__icon .icon .bi { font-size: 23px;
}

.eara__area__mains .date__icon .text { width: 90%; padding-left: 7px;
}

.eara__area__mains .date__icon .text p { padding-top: 10px; font-weight: 600; letter-spacing: 0.8px; color: #2f444c;
}

.eara__area__mains .date__icon .text .date { margin-top: -30px; font-weight: 500; color: #8b8a8f;
}

.eara__area__mains .money__tot { align-items: end; justify-content: end; text-align: end;
}

.eara__area__mains .money__tot p { padding-top: 10px; font-weight: 600; letter-spacing: 0.8px; color: #2f444c;
}

.eara__area__mains .money__tot .text { margin-top: -27px; font-weight: 600; color: #2601b9;
}

.pending__area__mains .pending__area__mains { display: flex; justify-content: center; align-items: center; text-align: center; padding: 12px; width: 100%;
}

.pending__area__mains .pending__area__mains .texts_norewards { display: flex; justify-content: center; align-items: center; text-align: center; padding: 12px; width: 100%;
}

.pending__area__mains .texts_norewards p { font-weight: 600; font-size: 19px; display: block; margin: 0 auto; text-align: center;
}

.pending__area__mains .texts_norewards .sub__text { color: #8a8989; font-size: 15px; font-family: sans-serif;

}

/* .wallete____area___start { display: flex; width: 100%; background-color: #00b28a; gap: 10px; height: 100%;
}
.wallet_____texts { width: calc(100% - 40%); padding-right: 50px;
}

.wallet_____texts .head { padding-left: 10px; padding-top: 8px; font-weight: 700; font-size: 22px; color: #fff; text-shadow: 1px 1px 8px #2a2a2a;
}

.wallet_____texts .total__amts p { font-size: 15px; font-weight: 700; padding: 8px; letter-spacing: 0.7px; color: #fff; text-shadow: 1px 1px 8px #2a2a2a;
}

.wallet_____texts .total__amts h5 { padding-left: 10px; margin-top: -20px; letter-spacing: 2px; padding-top: 8px; font-weight: 800; font-size: 22px; color: #fff; text-shadow: 1px 1px 8px #2a2a2a;
}

.wallet_____texts .invite___earn a{ font-size: 12px; font-weight: 700; padding: 8px; text-decoration: none; text-wrap: wrap; letter-spacing: 0.7px; color: #fff; text-shadow: 1px 1px 8px #2a2a2a;
}
.wallete____area___start .wallete___layers { width: 40%;
}


  /* .wallete___layers .layer2 ::before { position: absolute; content: ""; width: 100%; height: 100%; background-color: #68ceb1; transform: rotate(45deg); z-index: -2; border-radius: 30px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.082);
  }
   */


/* .wallete___layers .layer2 { position: relative; background-color: #68ceb1; transform: rotate(45deg); border-radius: 20px; overflow: hidden; box-sizing: border-box; z-index: -1; flex-wrap: wrap; -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  background-repeat: no-repeat; background-size: contain; min-height: 0; flex-grow: 1;
}

 .img__wallet { height: 200px; width: 200px; overflow: hidden; position: relative; display: block;
 }
 .img__wallet img { width: 100%; height: 100%; object-fit: contain; position: relative; padding-right: 50px;
 }  */

.flip-card { background-color: transparent; width: 100%; height: 210px; perspective: 1000px; margin-top: 30px; color: white; margin-bottom: 50px;
}

.card-left { display: flex; flex-direction: column; width: calc(100% - 30%);
}

.card-left .amt { display: flex; flex-direction: column; gap: 2px;
}

.card__rights { display: flex; flex-direction: column; width: 30%;
}

.card__rights .heading_8264 { position: relative; top: 18px; letter-spacing: .1em; font-size: 18px; font-weight: 800; text-overflow: hidden; text-shadow: 1px 1px 14px #b3a5a5;
}

.card__rights .wifi__logo { align-items: center; justify-content: center; text-align: center; margin: 0 auto; display: block; padding-top: 14px;
}

.card__rights .wifi__logo img { width: 30px; height: 30px; transform: rotate(90deg); position: relative;
}

.card__rights .logo p { text-align: center; position: relative; top: 35px; font-size: 17px; font-weight: 700; text-overflow: ellipsis;
}

.card-left .spaamt .heading { font-size: 20px; font-weight: 700; position: relative; top: 15px; left: 10px; text-shadow: 1px 1px 14px #b3a5a5;
}

.card__rights .amt .text { font-size: 22px; font-weight: 800; position: relative; top: 30px; left: 10px; justify-content: center; align-items: center; text-align: center; text-shadow: 1px 1px 14px #b3a5a5;
}

.card-left .acc_____name { display: flex; flex-direction: column; gap: 2px;
}

.card-left .acc_____name p { font-size: 14px; font-weight: 500; position: relative; top: 22px; left: 10px;
}

.card-left .acc_____name .text { font-size: 16px; font-weight: 700; position: relative; top: 2px; left: 10px;
}

.card-left .vali___upto { display: flex; gap: 4px;
}

.card-left .vali___upto p { position: relative; top: 0px; font-weight: 500; left: 10px;
}

.card-left .chip { position: relative; top: 5px; left: 1.8em; width: 43px; height: 43px; box-sizing: border-box;
}

.card-left .chip img { width: 45px; height: 45px; box-sizing: border-box;
}

.flip-card-front { box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2); position: absolute; display: flex; justify-content: center; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 1rem;
}

.flip-card-front { box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -4px 0px inset; background-color: #2c2e58;
}

.input-group-text { background: var(--secondry-color);
}

.input-group-text .bi { color: var(--text-color);
}


/* new added spa here */

.slider-item2 { width: 240px; height: 350px; display: block; margin: 0 auto; justify-content: center; align-items: center;
}

.spa-slider .slick-prev:before { content: '❮'; z-index: 51; color: rgb(255, 255, 255); background: var(--gradient-bg-color2); border-radius: 2px; padding: 0 4px; font-size: 19px;

}

.spa-slider .slick-next:before { content: '❯'; z-index: 51; font-size: 19px; color: rgb(255, 255, 255); background: var(--gradient-bg-color2); border-radius: 2px; padding: 0 4px;
}

.spa-slider .slick-dots li button:before { font-size: 53px; /* line-height: 20px; */ position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: #2c2e58;
}

.spa-slider .slick-dots li.slick-active button:before { color: #FF4E63;
}

.scroll__recent__spa { overflow-x: scroll; width: 100%; height: 100%;
}

.scroll__recent__spa .scroll___spa__recent::-webkit-scrollbar { display: none;
}

.scroll__recent__spa .scroll___spa__recent { padding-left: 15px; box-sizing: border-box; background-color: transparent; /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; */ overflow-x: scroll; overflow-y: hidden; width: 100%; height: 100%; gap: 15px; -webkit-box-align: stretch; align-items: stretch; display: flex; flex-flow: row nowrap; margin: 0 auto;
}

.recent-card { /* background: var(--text-color); box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; border-radius: 10px 1px 10px 1px; */ background: var(--text-color); box-shadow: rgba(255, 255, 255, 0.4) 0px 2px 4px, rgba(255, 255, 255, 0.3) 0px 7px 13px -3px, var(--primary-color) 0px -4px 0px inset; border-radius: 10px 1px 10px 1px; height: 358px; width: 270px; border: 1px solid #ffffff; border-radius: 15px; overflow: visible;
}

.scroll___spa__recent .card { min-width: 270px;
}

.recent-carda .recent__spa__area { text-decoration: none; color: inherit; height: auto; width: 100%; height: 100%; overflow: hidden; -webkit-box-flex: 1; flex-grow: 1; position: relative; padding-right: 12px; box-sizing: border-box;
}

/* .recent-card a { text-decoration: none; align-items: center; text-align: center; justify-content: center; height: 290px; width: 230px; overflow: hidden;
} */
.recent-card .recent__spa__area .imgArea { color: rgba(0, 0, 0, 0.50); display: block; margin: 0px auto; justify-content: center; align-items: center; text-align: center; height: 150px; width: 250px; background: #ffffff; animation: none; box-sizing: border-box;
}

.recent-card .recent__spa__area .imgArea>img { width: 100%; height: 100%; object-fit: cover; border-top-left-radius: 14px; margin-top: 1px; border-top-right-radius: 14px; vertical-align: middle; overflow: hidden; box-sizing: border-box; border-style: none; z-index: -2;
}

.recent-card .recent__spa__area .spa__content__recent { justify-content: center; align-items: center; display: block; margin: 0 auto;
}

/* .scroll__recent__spa { overflow-x: scroll; width: 100%; height: 100%;
}

.scroll__recent__spa .scroll___spa__recent::-webkit-scrollbar { display: none;
}

.scroll__recent__spa .scroll___spa__recent { padding-left: 15px; box-sizing: border-box; background-color: transparent; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px; overflow-x: scroll; overflow-y: hidden; width: 100%; height: 100%; gap: 15px; -webkit-box-align: stretch; align-items: stretch; display: flex; flex-flow: row nowrap; margin: 0 auto;
} */
/* .recent-card { background: var(--text-color); box-shadow: rgba(255, 255, 255, 0.4) 0px 2px 4px, rgba(255, 255, 255, 0.3) 0px 7px 13px -3px, var(--primary-color) 0px -4px 0px inset; border-radius: 10px 1px 10px 1px; height: 290px; width: 235px; border: 1px solid #ffffff; border-radius: 30px; overflow: visible;
}
.scroll___spa__recent .card { min-width: 235px;
}
.recent-carda .recent__spa__area { text-decoration: none; color: inherit; height: auto; width: 100%; height: 100%; overflow: hidden; -webkit-box-flex: 1; flex-grow: 1; position: relative; padding-right: 12px; box-sizing: border-box;
} */

/* .recent-card a { text-decoration: none; align-items: center; text-align: center; justify-content: center; height: 290px; width: 230px; overflow: hidden;
} */
/* .recent-card .recent__spa__area .imgArea { color: rgba(0, 0, 0, 0.50); display: block; margin: 0px auto; justify-content: center; align-items: center; text-align: center; height: 150px; width: 220px; background: #ffffff; animation: none; box-sizing: border-box;
}

.recent-card .recent__spa__area .imgArea>img { width: 100%; height: 100%; object-fit: cover; border-top-left-radius: 27px; margin-top: 1px; border-top-right-radius: 27px; vertical-align: middle; overflow: hidden; box-sizing: border-box; border-style: none; z-index: -2;
} */
/* .recent-card .recent__spa__area .spa__content__recent { justify-content: center; align-items: center; display: block; margin: 0 auto;
}
.recent-card .recent__spa__area .spa__content__recent  object { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 25px;
   
}
.spa__content__recent  object .book__btn { position: relative; top: 10px; right: 5px;
}
.spa__content__recent { position: relative; border-bottom-right-radius: 27px; border-bottom-left-radius: 27px; width: 220px; height: 130px; background-color: whitesmoke; -webkit-transform: preserve-3d; -ms-transform: preserve-3d; transform: preserve-3d; -webkit-perspective: 2000px; perspective: 2000px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #000;
  }
   */
/* .cover { top: 0; position: absolute; background-color: #fff; width: 100%; height: 100%; box-shadow: rgba(255, 255, 255, 0.3) 0px 1px 2px 0px, rgba(255, 255, 255, 0.15) 0px 2px 6px 2px; border-bottom-right-radius: 27px; border-bottom-left-radius: 27px; cursor: pointer; -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform-origin: 0; -ms-transform-origin: 0; transform-origin: 0; -webkit-box-shadow: 1px 1px 12px #000; box-shadow: 1px 1px 12px #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  }
  
  .spa__content__recent:hover .cover { -webkit-transition: all 0.5s; transition: all 0.5s; -webkit-transform: rotatey(-87deg); -ms-transform: rotatey(-87deg); transform: rotatey(-87deg);
  }

  .spa__contents .spa__name { padding-left: 15px; padding-right: 15px;
}
.spa__contents .spa__name p { font-size: 17px; text-transform: capitalize; font-weight: 600; max-width: 14rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.spa__contents .spa__address { padding-left: 15px; padding-right: 15px;
}
.spa__contents .spa__address p { max-width: 13.6rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden; font-size: 14px; position: relative; top: -12px; font-weight: 500;
}
.spa__contents .price { position: relative; top: -15px; padding-left: 15px; padding-right: 15px; display: flex; gap: 4px;
} */

/* .spa__contents .price .disc__offer { display: inline-block; background-color: var(--primary-color); -webkit-border-radius: 3px 4px 4px 3px; -moz-border-radius: 3px 4px 4px 3px; border-radius: 3px 4px 4px 3px; border-left: 1px solid #6ab070; margin-left: 18px; position: relative; color: white; font-weight: 600; height: 24px; font-size: 11px; line-height: 21px; padding: 0px 4px 0px 4px;
}

.spa__contents .price .disc__offer:before { content: ""; position: absolute; display: block; left: -11px; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 12px solid var(--primary-color);
} */


/* .spa__contents .price .disc__offer:after { content: ""; background-color: white; border-radius: 50%; width: 6px; height: 6px; display: block; position: absolute; left: -7px; top: 9px;
}
.recent__rating__badge { background-color: var(--primary-color); z-index: 55; position: relative; width: 130px; top: -25px; border-radius: 5px;
}
.recent__rating__badge p { color: #fff; font-size: 16px; font-weight: 600;
} */
.recent-card .recent__spa__area .spa__content__recent { justify-content: center; align-items: center; display: block; margin: 0 auto;
}

.recently__view__spa__btn object { display: flex; margin: 0 auto; gap: 8px; justify-content: center; align-items: center;
}

.recently__view__spa__btn object .books__btn a { color: #fff; text-decoration: none;
}

.recently__view__spa__btn object .books__btn { background: var(--gradient-bg-color); padding: 6px 10px; border-radius: 18px;
}

.recently__view__spa__btn object .views__btn { background: var(--gradient-bg-color2); padding: 6px 10px; border-radius: 18px;
}

.recently__view__spa__btn object .views__btn a { color: #fff; text-decoration: none;
}

.spa__content__recent { position: relative; border-bottom-right-radius: 27px; border-bottom-left-radius: 27px; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #000;
}


.spa__contents .spa__name { padding-left: 15px; padding-right: 15px;
}

.spa__contents .spa__name p { font-size: 17px; text-transform: capitalize; font-weight: 600; max-width: 14rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}

.spa__contents .spa__address { padding-left: 15px; padding-right: 15px;
}

.spa__contents .spa__viewer { padding-left: 15px; padding-right: 15px;
}

.spa__contents .spa__address p { max-width: 13.6rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 14px; position: relative; top: -12px; font-weight: 500;
}

.spa__contents .spa__viewer p { max-width: 13.6rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 12px; position: relative; top: -15px; color: #2011ad; font-weight: 500;
}

.spa__viewer p { max-width: 13.9rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 12px; position: relative; top: -15px; color: #2011ad; font-weight: 500;
}


.spa__contents .price { position: relative; top: -15px; padding-left: 15px; padding-right: 15px; display: flex; gap: 4px;
}

.spa__contents .price .disc__offer { display: inline-block; background-color: var(--primary-color); /* -webkit-border-radius: 3px 4px 4px 3px; */ -moz-border-radius: 3px 4px 4px 3px; border-radius: 3px 4px 4px 3px; border-left: 1px solid #6ab070; margin-left: 18px; position: relative; color: white; font-weight: 600; height: 24px; font-size: 11px; line-height: 21px; padding: 0px 4px 0px 4px;
}

/* Makes the triangle */
.spa__contents .price .disc__offer:before { content: ""; position: absolute; display: block; left: -11px; width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 12px solid var(--primary-color);
}

/* Makes the circle */
.spa__contents .price .disc__offer:after { content: ""; background-color: white; border-radius: 50%; width: 6px; height: 6px; display: block; position: absolute; left: -7px; top: 9px;
}

.recent__rating__badge { background-color: var(--app-content-background-color); z-index: 55; position: relative; width: 130px; top: -22px; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 11px; border-bottom-right-radius: 11px;
}

.recent__rating__badge p { color: #fff; font-size: 16px; font-weight: 600;
}

/* start here membership area */
.membership-header { display: flex; padding: 10px; gap: 20px;
}

.membership-header .backbtn { z-index: 2; width: calc(100% - 70%); display: block; margin: 20px auto;
}

.membership-header .backbtn p { background: #2c2e58; color: #fff; font-weight: 600; padding: 3px; border-radius: 20px;
}

.membership-header .spalogo { z-index: 2;
}

.membership-header .spalogo img { width: 100%; height: 60px; object-fit: cover;
}

.mob-memberTitle { background: #2c2e58; border: 2px solid #ffffff; /* width: 350px; */ justify-content: center; align-items: center; display: block; margin: 0 auto; /* border-radius: 30px; */ padding: 10px 0px;
}

.mob-memberTitle p { color: #fff; margin: 0 auto; font-size: 20px; font-weight: 600; letter-spacing: 1px; text-align: center;
}

.mob-planTitle { background: #FF4E63; border: 2px solid #ffffff; width: 100%; justify-content: center; align-items: center; display: block; margin: 0 auto; border-radius: 30px; padding: 6px 0px;
}

.mob-planTitle p { color: #fff; margin: 0 auto; font-size: 20px; font-weight: 600; letter-spacing: 1px; text-align: center;
}

.mob-classic-etiquet-price-plan { position: relative; /* background: #FF4E63; */ background: var(--gradient-bg-color); width: 15.46rem; margin-left: .5rem; padding: .2rem 1.2rem; margin-top: -11px; border-radius: 5px 0 0 5px;
}

.mob-classic-etiquet-price-plan p { margin: 0; padding-top: .4rem; display: flex; font-size: 1.7rem; font-weight: 600; color: #fff;
}

.mob-classic-etiquet-price-plan div { position: absolute; bottom: -25px; right: 0px; width: 0; height: 0; border-top: 14px solid #FF4E63; border-bottom: 11px solid transparent; border-right: 14px solid transparent; z-index: -6;
}

.mob-classic-etiquet-price-plan p:before { content: " "; /* content: "₹"; */ margin-right: 5px; font-size: 17px; font-weight: 500; color: #fff;
}

.mob-classic-etiquet-price-plan p:after { content: " + GST"; margin-left: 5px; font-size: 16px; font-weight: 600; letter-spacing: 1px; color: #fff;
}

.mob-premium-planTitle { background: #0b0446; border: 2px solid #ffffff; width: 100%; justify-content: center; align-items: center; display: block; margin: 0 auto; border-radius: 30px; padding: 6px 0px;
}

.mob-premium-planTitle p { color: #fff; margin: 0 auto; font-size: 20px; font-weight: 600; letter-spacing: 1px; text-align: center;
}

.premium-plan-card .mob-etiquet-price-plan p { margin: 0; padding-top: .4rem; display: flex; font-size: 1.4rem; font-weight: 600; color: #fff;
}

.premium-plan-card .mob-etiquet-price-plan { position: relative; /* background: #FF4E63; */ background: var(--gradient-bg-color2); width: 15.46rem; margin-left: .5rem; padding: .2rem 1.2rem; margin-top: -11px; border-radius: 5px 0 0 5px;
}

.premium-plan-card .mob-etiquet-price-plan p { margin: 0; padding-top: .4rem; display: flex; font-size: 1.7rem; font-weight: 600; color: #fff;
}

.premium-plan-card .mob-etiquet-price-plan div { position: absolute; bottom: -25px; right: 0px; width: 0; height: 0; border-top: 14px solid #2c2e58; border-bottom: 11px solid transparent; border-right: 14px solid transparent; z-index: -6;
}

.premium-plan-card .mob-etiquet-price-plan p:before { content: " "; /* content: "₹"; */ margin-right: 5px; font-size: 17px; font-weight: 500; color: #fff;
}

.premium-plan-card .mob-etiquet-price-plan p:after { content: " + GST"; margin-left: 5px; font-size: 16px; font-weight: 600; letter-spacing: 1px; color: #fff;
}

.mob_vip_plan_title { background: var(--gradient-bg-color); border: 2px solid #ffffff; width: 100%; justify-content: center; align-items: center; display: block; margin: 0 auto; border-radius: 30px; padding: 6px 0px;
}

.mob_vip_plan_title p { color: #fff; margin: 0 auto; font-size: 20px; font-weight: 600; letter-spacing: 1px; text-align: center;
}


.vip-etiquet-price-plan { position: relative; /* background: #FF4E63; */ background: hsla(263, 93%, 56%, 1); width: 15.46rem; margin-left: .5rem; padding: .2rem 1.2rem; margin-top: -11px; border-radius: 5px 0 0 5px;
}

.vip-etiquet-price-plan p { margin: 0; padding-top: .4rem; display: flex; font-size: 1.7rem; font-weight: 600; color: #fff;
}

.vip-etiquet-price-plan div { position: absolute; bottom: -24px; right: 0px; width: 0; height: 0; border-top: 14px solid rgba(118, 38, 247, 0.87); border-bottom: 11px solid transparent; border-right: 14px solid transparent; z-index: -6;
}

.vip-etiquet-price-plan p:before { content: " "; /* content: "₹"; */ margin-right: 5px; font-size: 17px; font-weight: 500; color: #fff;
}

.vip-etiquet-price-plan p:after { content: " + GST"; margin-left: 5px; font-size: 16px; font-weight: 600; letter-spacing: 1px; color: #fff;
}

.mob-terms-condition-text p { font-size: 15px; color: #2c2e58; font-weight: 400; text-align: justify; font-family: 'Times New Roman', Times, serif;
}

.mob-terms-condition-text p .bi { color: #FF4E63;
}

/* end here */

/* policy area content start here */
/* start foooter area */
.mob-breadcrumb-area-background2 { background-image: url('../img/background/spamart-background.avif'); background-repeat: no-repeat; background-size: cover; background-position: center; height: 35vh; background-attachment: fixed; margin-top: 45px;
}

.mob-breadcrumb-area { display: block; margin: 0 auto; justify-content: center; align-items: center; text-align: center; background-color: transparent; backdrop-filter: blur(8px); border: 1px solid #fff; border-radius: 12px; padding: 10px 25px; width: 100%; position: relative; top: -28px;
}

.mob-breadcrumb-area .mob-breadcrumb-title { font-size: 35px; font-weight: 700; letter-spacing: 1px; color: #fff;
}

.mob-breadcrumb-area .mob-start-breadcrumb { display: flex; flex-direction: row; gap: 4px; margin: 0 auto; justify-content: center; align-items: center; text-align: center;
}

.bmob-breadcrumb-area .mob-start-breadcrumb .breadcrumb-item1 a { text-decoration: none; font-size: 21px; font-weight: 600;
}

.mob-breadcrumb-area .mob-start-breadcrumb .breadcrumb-item2 a { text-decoration: none; color: #ffffff; font-size: 21px; font-weight: 600;
}

.mob-img-cyber { margin-top: 15px; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 8px 12px; border-radius: 10px;
}

.mob-img-cyber img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px;
}

.cyber-securit { background-color: transparent; backdrop-filter: blur(20px); border: 1px solid #2c2e58; border-radius: 12px; padding: 14px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 5px 8px;
}

.cyber-securit .text-area { display: flex; gap: 12px; margin-left: 18px;
}

.cyber-securit .text-area .icon { color: green; font-size: 25px;
}

.cyber-securit .text-area .text { font-size: 16px; font-weight: 500; letter-spacing: 1px; text-transform: capitalize; font-family: 'Times New Roman', Times, serif; text-shadow: 1px 1px 10px #fff;
}

.policy-card { background-color: transparent; backdrop-filter: blur(20px); border: 1px solid #2c2e58; border-radius: 12px; padding: 14px; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 5px 8px;
}

.mob__img__policy_area { box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(255, 255, 255, 0.3) 0px 7px 13px -3px, #2c2e58 0px -7px 0px inset; border-radius: 25px; display: block; margin: 0 auto;
}

.mob__img__policy_area img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px;
}
/* end mobile card */
.custome__buttons { width: 150px; height: 42px; color: #fff; border-radius: 5px; padding: 10px 25px; /* margin-top: -15px; */ text-align: center; font-family: 'Lato', sans-serif; font-size: 17px; letter-spacing: 0.8px; font-weight: 600; text-shadow: 1px 2px 7px #000000d0; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); outline: none;

}

.viewMoreButton { background: var(--gradient-bg-color2); line-height: 44px; padding: 0; border: none;
}

.viewMoreButton span { position: relative; display: block; width: 100%; height: 100%;
}

.viewMoreButton:before,
.viewMoreButton:after { position: absolute; content: ""; right: 0; bottom: 0; background: var(--secondry-color); box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9), -4px -4px 5px 0px rgba(255, 255, 255, .9), 7px 7px 20px 0px rgba(0, 0, 0, .2), 4px 4px 5px 0px rgba(0, 0, 0, .3); transition: all 0.3s ease;
}

.viewMoreButton:before { height: 0%; width: 2px;
}

.viewMoreButton:after { width: 0%; height: 2px;
}

.viewMoreButton:hover { color: var(--secondry-color); background: transparent;
}

.viewMoreButton:hover i { color: var(--text-color); background: transparent;
}

.viewMoreButton:hover:before { height: 100%;
}

.viewMoreButton:hover:after { width: 100%;
}

.viewMoreButton span:before,
.viewMoreButton span:after { position: absolute; content: ""; left: 0; top: 0; background: var(--secondry-color); box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9), -4px -4px 5px 0px rgba(255, 255, 255, .9), 7px 7px 20px 0px rgba(0, 0, 0, .2), 4px 4px 5px 0px rgba(0, 0, 0, .3); transition: all 0.3s ease;
}

.viewMoreButton span:before { width: 2px; height: 0%;
}

.viewMoreButton span:after { height: 2px; width: 0%;
}

.viewMoreButton span:hover:before { height: 100%;
}

.viewMoreButton span:hover:after { width: 100%;
}

.mob-booking-preview-details { background: var(--text-color); box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgb(243, 82, 82) 0px -4px 0px inset; border-radius: 5px; border: 1px solid #FF4E63;
}

.mob-preview-head { text-align: center; background: var(--gradient-bg-color2); display: block; margin: 0 auto; border-left: 4px solid #FF4E63; border-right: 4px solid #FF4E63; border-bottom: 2px solid #FF4E63; border-radius: 5px;
}

.mob-preview-head h1 { font-size: 24px; color: #fff; font-weight: 500; /* padding-top: 4px; */
}

.mob_preview_option_details { display: flex; gap: 10px; padding-left: 10px; padding-right: 10px; border-bottom: 1px solid #bebebe;
}

.mob_preview_option_details .options_one { width: calc(100% - 70%);
}

.mob_preview_option_details .options_one p { font-weight: 600; font-size: 17px;
}

.mob_preview_option_details .options_two { float: right; text-align: right; width: 70%;
}

.mob_preview_option_details .options_two p { font-size: 15px; font-weight: 600; position: relative; top: 4px; font-family: 'Times New Roman', Times, serif;
}

.mob_preview_option_details2 { display: flex; gap: 10px; padding-left: 10px; padding-right: 10px; border-bottom: 1px solid #bebebe;
}

.mob_preview_option_details2 .options_one { width: calc(100% - 55%);
}

.mob_preview_option_details2 .options_one p { font-weight: 600; font-size: 17px;
}

.mob_preview_option_details2 .options_two { float: right; text-align: right; width: 55%;
}

.mob_preview_option_details2 .options_two p { font-size: 15px; font-weight: 600; position: relative; top: 4px; font-family: 'Times New Roman', Times, serif;
}

.mob_preview_option_details3 { display: flex; gap: 10px; padding-left: 10px; padding-right: 10px; border-bottom: 1px solid #bebebe;
}

.mob_preview_option_details3 .options_one { width: calc(100% - 30%);
}

.mob_preview_option_details3 .options_one p { font-weight: 600; font-size: 17px;
}

.mob_preview_option_details3 .options_two { float: right; text-align: right; width: 30%;
}

.mob_preview_option_details3 .options_two p { font-size: 15px; font-weight: 600; position: relative; top: 4px; font-family: 'Times New Roman', Times, serif;
}

.mob_preview_payment_details { display: flex; gap: 10px; padding-left: 10px; padding-right: 10px; border-bottom: 1px solid #bebebe;
}

.mob_preview_payment_details .options_one { width: calc(100% - 30%);
}

.mob_preview_payment_details .options_one p { font-weight: 600; font-size: 17px;
}

.mob_preview_payment_details .options_one p span { font-style: italic; font-size: 14px;
}

.mob_preview_payment_details .options_two { float: right; text-align: right; width: 30%;
}

.mob_preview_payment_details .options_two p { font-size: 20px; font-weight: 700; position: relative; top: 4px; font-family: 'Times New Roman', Times, serif;
}

.mob-spa-preview-paynow-btn a { position: relative; transition: all 0.3s ease-in-out; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); padding-block: 0.5rem; padding-inline: 1.25rem; background: var(--gradient-bg-color); border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #ffff; gap: 10px; font-weight: bold; border: 3px solid rgb(255, 255, 255); outline: none; overflow: hidden; font-size: 20px; width: 210px; margin: 0 auto; font-weight: 600; text-decoration: none; text-shadow: 1px 1px 10px #2a2a2a;
}

.mob-spa-preview-paynow-btn a .bi { width: 30px; height: 30px; transition: all 0.3s ease-in-out; background: #fff; color: #000; text-align: center; border-radius: 50px; text-shadow: 1px 1px 10px #fcf6f6;
}

.mob-spa-preview-paynow-btn a:hover { transform: scale(1.05); border-color: #fff9; transition: all 0.3s ease-in-out;

}

.mob-spa-preview-paynow-btn a:hover .bi { transform: translate(4px);
}

.mob-spa-preview-paynow-btn a:hover::before { animation: shine 1.5s ease-out infinite;
}

.mob-spa-preview-paynow-btn a::before { content: ""; position: absolute; width: 100px; height: 100%; background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%); top: 0; left: -100px; opacity: 0.6;
}

@keyframes shine { 0% { left: -100px; }
 60% { left: 100%; }
 to { left: 100%; }
}

.section__titles__book { background: var(--gradient-bg-color2); padding: 7px;
}

.section__titles__book p { color: #fff; text-shadow: 1px 1px 10px #2a2a2a; font-weight: 700; font-size: 22px; text-align: center; display: block; margin: 0 auto;
}


.side-spa-book-details { background: #ffffffda; /* background: #2c2e5852; */ /* color: #fff; */ border-radius: 30px; /* filter: blur(2px); */
}

.side-spa-book-details .spa__img { width: 128px; height: 140px; border-radius: 30px;
}

.side-spa-book-details .spa__img img { width: 100%; height: 100%; object-fit: cover;
}

.side-spa-book-details .mob__spa__img { width: 270px; height: 200px; display: block; justify-content: center; align-items: center; margin: 0 auto; border-radius: 30px;
}

.side-spa-book-details .mob__spa__img img { width: 100%; height: 100%; object-fit: cover;
}

.mob-spa-booking-preview { background: var(--text-color); box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgb(243, 82, 82) 0px -4px 0px inset; border-radius: 30px; border: 1px solid #FF4E63;
}

.mob-spa-booking-preview .mob-spa-preview-head { text-align: center; background: var(--gradient-bg-color2); /* width: 690px; */ display: block; margin: 0 auto; border: 2px dashed #fff; border-radius: 30px;
}

.mob-spa-booking-preview .mob-spa-preview-head h1 { font-size: 25px; color: #fff; font-weight: 500;
}

.mob-spa-total-discount-money { display: flex; /* gap: 20px; */
}

.mob-spa-total-discount-money .price-title { width: calc(100% - 35%);
}

.mob-spa-total-discount-money .price-title p { font-size: 17px; font-weight: 600; color: rgb(0, 0, 0);
}

.mob-spa-total-discount-money .price-amount { width: 35%; float: right; padding-right: 10px; text-align: right; font-size: 19px; font-weight: 600; color: rgb(233, 9, 9);
}

.mob-spa-total-wallet-money { display: flex; gap: 20px;
}

.mob-spa-total-wallet-money .price-title { width: calc(100% - 35%);
}

.mob-spa-total-wallet-money .price-title p { font-size: 17px; font-weight: 600; color: rgb(0, 0, 0);
}

.mob-spa-total-wallet-money .price-amount { width: 35%; float: right; padding-right: 10px; text-align: right; font-size: 19px; font-weight: 600; color: rgb(233, 9, 9);
}

.mob-spa-total-gst-money { display: flex; gap: 20px;
}

.mob-spa-total-gst-money .price-title { width: calc(100% - 35%);
}

.mob-spa-total-gst-money .price-title p { font-size: 17px; font-weight: 600; color: rgb(0, 0, 0);
}

.mob-spa-total-gst-money .gst-amount { font-size: 19px; font-weight: 600; padding-right: 10px; float: right; text-align: right; width: 35%;
}

.mob-spa-total-payable-amount { display: flex; gap: 20px;
}

.mob-spa-total-payable-amount .price-title { width: calc(100% - 30%);
}

.mob-spa-total-payable-amount .price-title p { font-size: 20px; font-weight: 600; color: rgb(0, 0, 0);
}

.mob-spa-total-payable-amount .price-title p span { font-style: italic; font-size: 18px;
}

.mob-spa-total-payable-amount .price-amount { width: 30%; padding-right: 10px; font-size: 22px; font-weight: 700; color: green; float: right; text-align: right;
}

.mob-spa-booking-paynow-btn button { position: relative; transition: all 0.3s ease-in-out; box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); padding-block: 0.5rem; padding-inline: 1.25rem; background: var(--gradient-bg-color2); border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: #ffff; gap: 10px; font-weight: bold; border: 3px solid rgb(255, 255, 255); outline: none; overflow: hidden; font-size: 20px; width: 210px; margin: 0 auto; font-weight: 600; text-decoration: none; text-shadow: 1px 1px 10px #2a2a2a;
}

.mob-spa-booking-paynow-btn button .bi { width: 30px; height: 30px; transition: all 0.3s ease-in-out; background: #fff; color: #000; text-align: center; border-radius: 50px; text-shadow: 1px 1px 10px #fcf6f6;
}

.mob-spa-booking-paynow-btn button:hover { transform: scale(1.05); border-color: #fff9; transition: all 0.3s ease-in-out;

}

.mob-spa-booking-paynow-btn button:hover .bi { transform: translate(4px);
}

.mob-spa-booking-paynow-btn button:hover::before { animation: shine 1.5s ease-out infinite;
}

.mob-spa-booking-paynow-btn button::before { content: ""; position: absolute; width: 100px; height: 100%; background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%); top: 0; left: -100px; opacity: 0.6;
}

@keyframes shine { 0% { left: -100px; }
 60% { left: 100%; }
 to { left: 100%; }
}

.spa-member-preview .mob-member-preview-head { text-align: center; background: var(--gradient-bg-color2); /* width: 520px; */ display: block; margin: 0 auto; border-left: 4px solid #fff; border-right: 4px solid #fff; border-bottom: 2px solid #fff; border-radius: 30px;
}

.spa-member-preview .mob-member-preview-head h1 { font-size: 20px; text-align: center; position: relative; top: 3px; color: #ffffff; font-weight: 500;
}

.mob_payment_status_tag { position: relative; display: flex; flex-direction: column; gap: 10px;
}

.mob_payment_status_tag .mob_pay_counter { font-family: 'Vollkorn', serif; font-size: 16px; line-height: 12px; width: 307px; text-transform: uppercase; font-weight: 600; color: #050f46; border: 4px solid #050f46; padding: 5px 4px; text-align: center; border-radius: 10px; opacity: 0.9; justify-content: center; align-items: center; display: block; margin: 0 auto;
}

.mob_payment_status_tag .mob_pay_online { font-family: 'Vollkorn', serif; font-size: 16px; line-height: 12px; width: 307px; text-transform: uppercase; font-weight: 600; color: #050f46; border: 4px solid #050f46; padding: 5px 4px; text-align: center; border-radius: 10px; opacity: 0.9; justify-content: center; align-items: center; display: block; margin: 0 auto;

}

.mob_payment_status_tag .mob_membership { font-family: 'Vollkorn', serif; font-size: 16px; line-height: 12px; width: 307px; text-transform: uppercase; font-weight: 600; color: #050f46; border: 4px solid #050f46; padding: 5px 4px; text-align: center; border-radius: 10px; opacity: 0.9; justify-content: center; align-items: center; display: block; margin: 0 auto;
}


.Mob_pay__btn { padding: 8px; border-radius: 5px; background: #ff4e63; width: 310px; display: block; margin: 0 auto; text-align: center; justify-content: center; align-items: center;
}

.Mob_pay__btn a { text-decoration: none; color: #fff; text-shadow: 1px 2px 5px #1a1919; font-weight: 700; line-height: 10px; font-size: 18px; letter-spacing: .4px; display: block; margin: 0 auto; text-align: center; justify-content: center; align-items: center;
}

.mob_room_allowcate p { font-family: 'Vollkorn', serif; font-size: 16px; line-height: 12px; width: 307px; text-transform: capitalize; font-weight: 600; color: #FF4E63; border: 4px solid #ff4e63; padding: 5px 4px; text-align: center; border-radius: 10px; opacity: 0.9; justify-content: center; align-items: center; display: block; margin: 0 auto;
}

.mob__custom__buttons { width: 170px; height: 33px; color: #fff; border-radius: 5px; padding: 5px 25px; /* margin-top: -15px; */ text-align: center; font-family: 'Lato', sans-serif; font-size: 14px; letter-spacing: 0.8px; font-weight: 600; text-shadow: 1px 2px 7px #000000d0; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); outline: none;

}

.Mob_viewMoreButton { background: var(--gradient-bg-color2); line-height: 44px; padding: 0; border: none;
}

.Mob_viewMoreButton span { position: relative; display: block; width: 100%; height: 100%; top: -6px;
}

.Mob_viewMoreButton:before,
.Mob_viewMoreButton:after { position: absolute; content: ""; right: 0; bottom: 0; background: var(--secondry-color); box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9), -4px -4px 5px 0px rgba(255, 255, 255, .9), 7px 7px 20px 0px rgba(0, 0, 0, .2), 4px 4px 5px 0px rgba(0, 0, 0, .3); transition: all 0.3s ease;
}

.Mob_viewMoreButton:before { height: 0%; width: 2px;
}

.Mob_viewMoreButton:after { width: 0%; height: 2px;
}

.Mob_viewMoreButton:hover { color: var(--secondry-color); background: transparent;
}

.Mob_viewMoreButton:hover i { color: var(--text-color); background: transparent;
}

.Mob_viewMoreButton:hover:before { height: 100%;
}

.Mob_viewMoreButton:hover:after { width: 100%;
}

.Mob_viewMoreButton span:before,
.Mob_viewMoreButton span:after { position: absolute; content: ""; left: 0; top: 0; background: var(--secondry-color); box-shadow: -7px -7px 20px 0px rgba(255, 255, 255, .9), -4px -4px 5px 0px rgba(255, 255, 255, .9), 7px 7px 20px 0px rgba(0, 0, 0, .2), 4px 4px 5px 0px rgba(0, 0, 0, .3); transition: all 0.3s ease;
}

.Mob_viewMoreButton span:before { width: 2px; height: 0%;
}

.Mob_viewMoreButton span:after { height: 2px; width: 0%;
}

.Mob_viewMoreButton span:hover:before { height: 100%;
}

.Mob_viewMoreButton span:hover:after { width: 100%;
}
.views__more__butttons { position: relative; right: 20px; bottom: 20px; border: none; box-shadow: none; width: 140px; height: 40px; display: block; margin: 0 auto; line-height: 42px; -webkit-perspective: 230px; perspective: 230px;
}

.views__more__butttons span { background: rgb(201, 20, 20); /* background: linear-gradient(0deg, rgb(201, 20, 20) 0%, rgba(2, 126, 251, 1) 100%); */ display: block; position: absolute; width: 140px; height: 40px; box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); border-radius: 5px; margin: 0; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all .3s; transition: all .3s;
}

.views__more__butttons span:nth-child(1) { box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001; -webkit-transform: rotateX(90deg); -moz-transform: rotateX(90deg); transform: rotateX(90deg); -webkit-transform-origin: 50% 50% -20px; -moz-transform-origin: 50% 50% -20px; transform-origin: 50% 50% -20px;
}

.views__more__butttons span:nth-child(2) { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transform-origin: 50% 50% -20px; -moz-transform-origin: 50% 50% -20px; transform-origin: 50% 50% -20px;
}

.views__more__butttons:hover span:nth-child(1) { box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); transform: rotateX(0deg);
}

.views__more__butttons:hover span:nth-child(2) { box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5), 7px 7px 20px 0px rgba(0, 0, 0, .1), 4px 4px 5px 0px rgba(0, 0, 0, .1); color: transparent; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg);
}

.desktop-categories-spa { background: var(--gradient-bg-color2); position: relative; width: 8.9rem; float: left; justify-content: start; align-items: start; padding: 0.2rem 1.2rem; border-radius: 0px 5px 5px 0px; top: -320px; left: 1px;
}

.desktop-categories-spa p { margin: 0; font-size: 1rem; font-weight: 800; color: #fff;
}

.desktop-categories-spa div { position: absolute; bottom: -22px; left: 0; width: 0; height: 0; border-top: 13px solid #2c2e58; border-bottom: 10px solid transparent; border-left: 13px solid transparent;
}

.desktop__opens__close__tags { position: relative; top: -112px; display: block; margin: 0 auto; background: green; width: 6rem; /* margin-left: 12.4rem; */ /* float: right; */ justify-content: center; align-items: center; padding: 0.3rem 1.2rem; border-radius: 5px; /* right: 440px; */
}

.desktop__opens__close__tags p { margin: 0; font-size: 12px; color: #fff; text-shadow: 1px 1px 10px #2a2a2a; font-weight: 600; text-align: center; /* border: 2px dashed #fff; */ text-transform: uppercase;
}

.desktop__opens__close__tags div { position: absolute; bottom: -22px; right: 0.01rem; width: 0; height: 0; border-top: 13px solid green; border-bottom: 10px solid transparent; border-right: 13px solid transparent;
}

.desktop__opens__closes__tags { position: relative; top: -112px; display: block; margin: 0 auto; background: red; width: 6rem; /* margin-left: 12.4rem; */ /* float: right; */ justify-content: center; align-items: center; padding: 0.3rem 1.2rem; border-radius: 5px; /* right: 440px; */
}

.desktop__opens__closes__tags p { margin: 0; font-size: 12px; color: #fff; text-shadow: 1px 1px 10px #2a2a2a; font-weight: 600; text-align: center; /* border: 2px dashed #fff; */ text-transform: uppercase;
}

.desktop__opens__closes__tags div { position: absolute; bottom: -22px; right: 0.01rem; width: 0; height: 0; border-top: 13px solid green; border-bottom: 10px solid transparent; border-right: 13px solid transparent;
}

.add__to__cart { float: right; position: relative;
}

.add__to__cart .bi { font-size: 20px; text-decoration: none; color: #0e0d0d; z-index: 200; border: 1px solid var(--primary-color); border-radius: 50px; padding: 7px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.add__to__cart p { position: absolute; top: -7px; right: -10px; background: var(--app-content-background-color); padding: 0 5px; border-radius: 20px; color: var(--text-color);
}

/* Card */
.up__bookingCard { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); max-width: 620px; width: 100%; padding: 22px; overflow: hidden; margin: 20px auto; animation: fadeUp 0.5s ease-out; transition: all 0.3s ease;
}


.up__bookingCard2 { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); max-width: 100%; width: 100%; padding: 22px; overflow: hidden; margin: 20px auto; animation: fadeUp 0.5s ease-out; transition: all 0.3s ease;
}

.up__bookingCard2 a { display: flex !important; gap: 60px; justify-content: center;
}

.up__bookingCard:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* Link Reset */
.up__bookingCard a { text-decoration: none; color: inherit; display: block; position: relative;
}

/* Person Info */
/* Unique card class */
.ba-card { width: 320px; height: 200px; border-radius: 20px; padding: 18px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(16px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ba-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.ba-profile { display: flex; align-items: center; gap: 14px; z-index: 1;
}

.ba-profile img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.ba-info h5 { margin: 0; font-weight: 600; font-size: 17px; color: #222;
}

.ba-info span { font-size: 13px; color: #666;
}

.ba-status { margin-left: auto; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 16px; white-space: nowrap; position: relative; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.3s ease;
}

.ba-status.assigned { background: linear-gradient(135deg, #daf5e8, #b4ebd0); color: #1e7d34; box-shadow: 0 0 8px rgba(30, 125, 52, 0.3);
}

.ba-status.pending { background: linear-gradient(135deg, #fff5e0, #ffe0b4); color: #b36b00; box-shadow: 0 0 8px rgba(179, 107, 0, 0.3);
}

.ba-status.unavailable { background: linear-gradient(135deg, #ffe0e0, #fbb4b4); color: #d93025; box-shadow: 0 0 8px rgba(217, 48, 37, 0.3);
}

/* Unique actions container */
.ba-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px;
}

/* Animated gradient buttons */
.ba-btn { flex: 1; border-radius: 12px; font-size: 14px; border: none; padding: 10px 0; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff; background-size: 200% 200%; transition: all 0.4s ease, transform 0.2s ease;
}

.ba-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); background-position: right center;
}

.ba-call { background-image: linear-gradient(45deg, #43a047, #2e7d32, #66bb6a, #43a047); animation: gradientAnim 4s ease infinite;
}

.ba-chat { background-image: linear-gradient(45deg, #1976d2, #0d47a1, #64b5f6, #1976d2); animation: gradientAnim 4s ease infinite;
}

.ba-map { background-image: linear-gradient(45deg, #ff7043, #d84315, #ff8a65, #ff7043); animation: gradientAnim 4s ease infinite;
}

@keyframes gradientAnim { 0% { background-position: 0% 50%; }
 50% { background-position: 100% 50%; }
 100% { background-position: 0% 50%; }
}

/* .ubc-cardHeader { display: flex; justify-content: space-between; align-items: center; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; padding: 10px; border-radius: 10px; border-bottom: 1px solid var(--app-content-background-color);
}

.ubc-personName { font-weight: 700; font-size: 1.25rem; color: #1d1d1d;
}

.ubc-personStats { font-size: 0.9rem; color: #777; margin-top: 4px;
}

.ubc-personStats span { font-weight: 600; font-size: 1.1rem; background: var(--primary-color); color: var(--text-color); padding: 3px; border-radius: 7px;
}

.ubc-personImg img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
} */

/* Booking Info */
.ubc-bookingInfo { display: flex; justify-content: space-between; align-items: center; margin-top: 14px;
}

.ubc-bookingId p { margin: 0; font-size: 0.85rem; color: #999;
}

.ubc-bookingId span { font-weight: 600; font-size: 0.95rem; color: #333;
}

.ubc-status { padding: 6px 14px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; background: linear-gradient(135deg, #a6f1c2, #7ce3a4); color: #0d7048;
}

/* Location & Date */
.ubc-locationDate { margin-top: 10px; font-size: 0.9rem; color: #555;
}

/* Service Details */
.ubc-serviceDetails { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding: 14px; background: #fafafa; border-radius: 14px; border: 1px solid #f0f0f0; border-bottom: 3px solid var(--app-content-background-color);
}

.ubc-serviceText h5 { margin: 0; font-size: 1rem; color: #222;
}

.ubc-serviceMeta { font-size: 0.85rem; color: #666; display: flex; gap: 14px; margin-top: 4px;
}

.ubc-serviceImg img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

/* Amount Section */
.ubc-amountSection { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eaeaea; margin-top: 16px; padding-top: 10px;
}

.ubc-amountLabel { font-size: 0.9rem; color: #777; font-weight: 600;
}

.ubc-amountValue { font-weight: 700; font-size: 1.25rem; color: #111;
}

/* Action Buttons */
.ubc-actionButtons { display: grid; grid-template-columns: auto auto; gap: 10px; margin-top: 18px;
}

.ubc-btn { flex: 1; background: linear-gradient(135deg, #B76F5A, #3E2C41); color: white; border: none; padding: 12px 18px; border-radius: 10px; cursor: pointer; font-size: 0.95rem; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 250px; transition: background 0.3s ease, transform 0.2s ease;
}

.ubc-btn:hover { background: var(--app-content-background-color); transform: translateY(-2px);
}

.ubc-btn-cancel { flex: 1; background: linear-gradient(135deg, #0b0446, #3E2C41); color: white; border: none; padding: 12px 18px; border-radius: 10px; cursor: pointer; font-size: 0.95rem; font-weight: 600; max-width: 250px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.3s ease, transform 0.2s ease;
}

.ubc-btn-cancel:hover { background: var(--app-content-background-color); transform: translateY(-2px);
}

/* Animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(15px); }
 to { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 500px) { .ubc-serviceMeta { flex-direction: column; }
 /* .ubc-serviceDetails { flex-direction: column; align-items: flex-start; } .ubc-serviceImg { margin-top: 10px; } .ubc-cardHeader { flex-direction: column; align-items: flex-start; gap: 10px; } .ubc-bookingInfo { flex-direction: column; align-items: flex-start; gap: 6px; } .ubc-actionButtons { flex-direction: column; } */
}
/* .sub-tab-contents { overflow-y: scroll; overflow-x: hidden; height: calc(100% - 100px); } */
.thanks__user { text-align: center; color: var(--app-content-background-color); font-weight: 800; font-size: 1.8rem; font-family: "Clicker Script", cursive;
}
/* Card Container */
.cancel-booking-card { background: #fff; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); overflow: hidden; margin: 20px auto; max-width: 700px; transition: all 0.3s ease-in-out;
}
.cancel-booking-card2 { max-width: 100%;
}
.cancel-booking-card:hover { transform: translateY(-3px);
}
/* Top Status Bar */
.cbc-status-bar { background: linear-gradient(90deg, #ff4d4f, #ff7675); padding: 12px 20px; color: white; font-weight: 600; font-size: 16px; display: flex; justify-content: space-between; align-items: center;
}
/* Booking Info */
.cbc-booking-info { padding: 15px 20px; border-bottom: 1px solid #f1f1f1;
}
.cbc-booking-info p { margin: 0; font-size: 14px; color: #555;
}
.cbc-booking-info span { font-weight: 600; color: #000;
}
/* Location & Date */
.cbc-location-date { padding: 12px 20px; background: #fafafa; font-size: 14px; color: #666;
}
/* Service Details */
.cbc-service-section { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px;
}
.cbc-service-text h5 { margin: 0; font-weight: 600;
}
.cbc-service-meta { font-size: 13px; color: #777;
}
.cbc-service-meta span { margin-right: 12px;
}
.cbc-service-img img { width: 100px; height: 80px; object-fit: cover; border-radius: 8px;
}
/* Amount Section */
.cbc-amount-section { padding: 15px 20px; background: #fafafa; display: flex; justify-content: space-between; align-items: center;
}
.cbc-amount-label { font-weight: 500; color: #444;
}
.cbc-amount-value { font-weight: 700; color: #000;
}
.cbc-amount-value del { font-weight: 400; color: #999; font-size: 14px;
}
/* Refund Section */
.cbc-refund-section { padding: 15px 20px; background: #fff5f5; border-top: 1px solid #f1f1f1;
}
.cbc-refund-section p { margin: 0; font-size: 14px;
}
.refund-status { font-size: 13px; color: #ff4d4f; font-weight: 500;
}
/* Action Buttons */
.cbc-action-buttons { padding: 15px 20px; display: flex; gap: 10px; justify-content: center;
}
.cbc-btn { flex: 1; padding: 10px; border-radius: 8px; font-weight: 500; border: none; cursor: pointer; max-width: 250px; transition: 0.3s;
}
.cbc-btn-book { background: linear-gradient(90deg, #B76F5A, #3E2C41); color: white;
}
.cbc-btn-book:hover { background: linear-gradient(90deg, #029e8d, #7eb32d);
}
.cbc-btn-support { background: #f8f8f8; color: #444;
}
.cbc-btn-support:hover { background: #eaeaea;
}
.ub-booking-card { background: #ffffff; max-width: 400px; width: 100%; border-radius: 20px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); overflow: hidden; text-align: center; padding: 30px 20px; animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); }
 to { opacity: 1; transform: translateY(0); }
}
.ub-booking-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #4CAF50, #2E7D32); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 20px; color: white; font-size: 40px; animation: pop 0.4s ease-out;
}
@keyframes pop { 0% { transform: scale(0.5); opacity: 0; }
 100% { transform: scale(1); opacity: 1; }
}
.ub-booking-title { font-size: 1.5rem; font-weight: 600; color: #2E7D32; margin-bottom: 10px;
}
.ub-booking-subtitle { font-size: 1rem; color: #555; margin-bottom: 20px;
}
.ub-booking-details { text-align: left; background: #f9f9f9; padding: 15px; border-radius: 12px; margin-bottom: 20px;
}
.ub-booking-details p { margin: 8px 0; font-size: 0.95rem; color: #444;
}
.ub-booking-btn { display: inline-block; padding: 12px 20px; border-radius: 30px; font-weight: 600; background: linear-gradient(135deg, #4CAF50, #2E7D32); color: #fff; text-decoration: none; transition: 0.3s ease;
}
.ub-booking-btn:hover { background: linear-gradient(135deg, #43A047, #1B5E20); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 480px) { .ub-booking-card { padding: 20px 15px; }
 .ub-booking-title { font-size: 1.3rem; }
}
/* Card Container */
.cancelled-booking-card { max-width: 100%; margin: 40px auto; background: linear-gradient(145deg, #ffffff, #fdfdfd); border-radius: 20px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); overflow: hidden; border-left: 6px solid #d93025; animation: fadeInUp 0.6s ease-out; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cancelled-booking-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}
/* Header */
.cancelled-booking-card-header { display: flex; align-items: center; gap: 14px; background: linear-gradient(to right, #ffe5e5, #fff1f1); padding: 20px 22px;
}
.cancelled-booking-status-icon { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #ff5f5f, #d93025); display: flex; align-items: center; justify-content: center; font-size: 22px; color: white; box-shadow: 0 4px 8px rgba(217, 48, 37, 0.3);
}
.cancelled-booking-title { font-size: 22px; font-weight: 700; color: #d93025; margin: 0;
}
/* Body */
.cancelled-booking-card-body { padding: 22px;
}
.cancelled-booking-message { font-size: 15px; color: #555; margin-bottom: 18px; line-height: 1.6;
}
/* Booking Details */
.cancelled-booking-details { background: #fafafa; padding: 14px; border-radius: 12px; margin-bottom: 20px; font-size: 14px; border: 1px solid #f0f0f0;
}
.cancelled-booking-details div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #ddd;
}
.cancelled-booking-details div:last-child { border-bottom: none;
}
.cancelled-label { font-weight: 600; color: #444;
}
.cancelled-value { color: #666;
}
/* Actions */
.cancelled-booking-actions { display: flex; gap: 10px;
}
.cancelled-btn { flex: 1; padding: 11px 14px; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s ease;
}
.cancelled-retry-btn { background: linear-gradient(135deg, #ff5f5f, #d93025); color: white; box-shadow: 0 4px 12px rgba(217, 48, 37, 0.3);
}
.cancelled-retry-btn:hover { background: linear-gradient(135deg, #e64b4b, #b82118);
}
.cancelled-support-btn { background: linear-gradient(135deg, #5f6368, #3c4043); color: white; box-shadow: 0 4px 12px rgba(60, 64, 67, 0.3);
}
.cancelled-support-btn:hover { background: linear-gradient(135deg, #4b4f54, #2a2d30);
}
/* Animation */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(15px); }
 to { opacity: 1; transform: translateY(0); }
}
/* Responsive */
@media (max-width: 500px) { .cancelled-booking-card { margin: 15px; }
 .cancelled-booking-title { font-size: 20px; }
 .cancelled-booking-message { font-size: 14px; }
}
.exprolres__here { display: inline-block; font-size: 14px; font-weight: 500; color: #0d6efd; background: var(--gradient-bg-color); padding: 4px 10px; border-radius: 12px; text-decoration: none; transition: all 0.3s ease; animation: blink 1.5s infinite;
}
.exprolres__here:hover { background: #0d6efd; color: #fff; transform: scale(1.05);
}
@keyframes blink {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.5; }
}
.footers__bg { background-color: #6c757d; color: #fff;
}
.footers__bg .quick-link-one p a { font-size: 14px;
}
.orders-views { position: absolute; background: linear-gradient(135deg, #fefefe, #3E2C41); /* background: var(--background); */ /* background: transparent; */ backdrop-filter: blur(10px); color: #fff; top: 2px; height: 40px; width: 40px; right: 2px; padding: 3px; font-size: 20px; border-radius: 50%; /* box-shadow: rgba(255, 0, 80, 0.4) 0px 6px 20px; */ border: 1px solid #fefefe; cursor: pointer; transition: transform 0.3s ease;
}
.orders-views .bi { position: relative; left: 6px; top: 3px;
}