* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

body {
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: stretch;
    min-height: 100vh;
    overflow-x: hidden;
    background: #ddd;
}

.app_wrapper {
    width: 100%;
    max-width: 420px;
    padding: 32px 20px 24px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
}

.logo {
    font-size: 36px;
    font-weight: 700;
    color: #ff007c;
    /* close to screenshot pink */
    margin-bottom: 28px;
}

.title {
    font-size: 18px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 30px;
}

.phone-group {
    margin-bottom: 8px;
    display: flex;
    gap: 12px;
}

.country-code,
.phone-input {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 16px;
    outline: none;
    background: #fafafa;
}

.country-code {
    width: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.phone-input {
    flex: 1;
}

.phone-input::placeholder {
    color: #9ca3af;
}

.helper-text {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 16px;
}

.bottom {
    margin-top: auto;
}

.terms {
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 16px;
    line-height: 1.4;
}

.terms a {
    color: #111827;
    font-weight: 500;
    text-decoration: underline;
}

.login-btn {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 500;
    background-image: linear-gradient(180deg, #70cef2 0%, #008ad9 100%);
    color: #fff;
    cursor: not-allowed;
}
.app-section-title {
  text-align: center;
  margin-bottom: 20px;
}
.app-section-title span {
  position: relative;
  display: inline-block;
  padding: 8px 30px;
  background: linear-gradient(to bottom, #0b3c6d, #062a4f);
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 20px;
    font-size: 14px;
    line-height: 20px;  
}
.app-section-title span::before,
.app-section-title span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 80px;
  height: 2px;
  background: #cfd8e3;
}
.app-section-title span::before {
  right: 100%;
  margin-right: 15px;
}
.app-section-title span::after {
  left: 100%;
  margin-left: 15px;
}
/* home css */

.home-wrapper {
    padding: 0 !important;
    display: block;
}

.top-bar {
    padding: 10px 15px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #041332, #004b8f, #04295d);
    border-radius: 0 0 18px 18px;
    color: #fff;
}
.app-home-header .top-bar {
   
}
.top-bar .top-left {font-size: 12px;line-height: 16px;width:40%;}
.top-bar .top-left a{    
    text-decoration: none;
}
.top-bar .top-right {
    display: flex;
    gap: 10px;
}

.top-bar .top-right .pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border-radius: 15px;
    background: transparent;
    font-size: 12px;
	line-height: 16px;
    white-space: nowrap;
    border: 0;
	color:#fff;
}

.top-bar .top-right .pill-icon img {
    width: 22px;
    height: 22px;
}

.top-bar .top-right .pill.earnBtn .pill-amount {
    font-size: 12px;
	line-height: 16px;	
    font-weight: 600;
}

.top-bar .top-right .pill.earnBtn .earn-top {
    font-size: 12px;    
	line-height: 16px;
}

.content {
    flex: 1;
    padding: 20px 16px 95px;
    overflow-y: auto;
}

.logo-text {
    text-align: center;
}

.sub-heading {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: #38ace5;
    margin-top: 15px;
    letter-spacing: 1px;
}

.hero-illustration {
    margin-top: 24px;
    display: flex;
    justify-content: center;
}

.hero-illustration img {
    width: 100%;
    max-width: 320px;
    border-radius: 20px;
    object-fit: cover;
}

.info-pill {
    margin: 18px auto 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: #e4f7ff;
    font-size: 12px;
    color: #38ace5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.info-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #38ace5;
}

.btn-primary {
    width: 100%;
    margin-top: 22px;
    border: none;
    border-radius: 14px;
    padding: 14px 0;
    background-image: linear-gradient(180deg, #70cef2 0%, #008ad9 100%);
	background: linear-gradient(90deg, #041332, #004b8f, #04295d);
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

.section-title {
    margin-top: 28px;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    color: #111827;
}

.section-title span {
    color: #38ace5;
    font-weight: 600;
}

.section-subtitle {
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}


.dashboard-top-header{
    background: #061638;	
	border-bottom: 4px solid #ffcc00;
  border-bottom-left-radius: 50% 20px; 
  border-bottom-right-radius: 50% 20px;	
}

.dashboard-top-header .logo-section{
    padding: 30px 0;
    text-align: center;	
}
.dashboard-top-header .logo-section img{
    max-width: 250px;
    width: 100%;	
}
.dashboard-top-header .info-bar{
    background: linear-gradient(90deg, #041332, #004b8f, #04295d);
    color: #fff;
    padding: 15px 15px 20px 15px;
    border-bottom-left-radius: 50% 20px;
    border-bottom-right-radius: 50% 20px;
}
.dashboard-top-header .info-bar .container{padding:0 0px;}
.dashboard-top-header .info-bar-inner{
 display:flex;
  justify-content:space-between;	
}
.dashboard-top-header .info-bar .leftPart{
    width: 50%;
    padding-right: 10px;	
}
.dashboard-top-header .info-bar .leftPart .location{
    display: flex;
    align-items: center;	
}
.dashboard-top-header .info-bar .leftPart .location .icon {
    font-size: 25px;
    color: #d9af46;
    margin-right: 10px;
}
.dashboard-top-header .info-bar .leftPart .location .txt{
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    margin-bottom: 0px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;	
}
.dashboard-top-header .info-bar .backBtn{
    display: inline-flex;
    align-items: center;
    height: 20px;
    width: 25px;	
}
.dashboard-top-header .info-bar .pageTitle{
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;	
}

.dashboard-top-header .info-bar .hero-content{text-align: center;}
.dashboard-top-header .info-bar .hero-content .top-text{
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    /* letter-spacing: 1px; */
    text-transform: uppercase;
    margin-bottom: 2px;	
}
.dashboard-top-header .info-bar .hero-content p{}
.dashboard-top-header .info-bar .hero-content p.services{
    font-size: 16px;
    line-height: 22px;
    font-weight: 700;
    color: #dab048;
    margin-bottom: 2px;
}
.dashboard-top-header .info-bar .hero-content p.services span{margin: 0 3px;}
.dashboard-top-header .info-bar .hero-content p.rating{
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}
.dashboard-top-header .info-bar .hero-content p.rating .star{
    color: #ffcc00;
    font-size: 16px;
}
.dashboard-top-header .info-bar .hero-content .headline{
     font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 0px;
}
.dashboard-top-header .info-bar .hero-content .headline span{color: #ffcc00;}


.dashboard-top-header .info-bar .rightPart{
    width: 50%;
    display: flex;
    justify-content: end;	
}
.dashboard-top-header .info-bar .rightPart .wallet-card{
    background: rgba(255, 255, 255, 0.1);
    padding: 5px 5px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-align: right;
    font-size: 12px;
    line-height: 16px;
    min-width: 80px;	
}
.dashboard-top-header .info-bar .rightPart .wallet-card p{
    margin-bottom: 0px;
    text-align: center;	
}
.dashboard-top-header .info-bar .rightPart .wallet-card .balance{
    text-align: center;	
    font-weight: 600;	
}
.dashboard-top-header .info-bar .rightPart .wallet-card .balance i{color:#d9af46;}
.dashboard-top-header .info-bar .rightPart .wallet-card .balance .icon{}
.dashboard-top-header .info-bar .rightPart .wallet-card .balance .txt{font-weight:600;}
.dashboard-top-header .info-bar .rightPart .addVehicleBtn{
    padding: 5px 5px;
    font-size: 12px;
    line-height: 16px;   
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 8px;
    margin-left: 5px;
 font-weight: 600;		
}
.dashboard-top-header .info-bar .rightPart .addVehicleBtn .pill-icon{color:#d9af46;}
.dashborad-help-info-pill{
    margin: 10px auto 0;
    padding: 16px 16px;
    border-radius: 15px;
    background: #fff;
    /* border: 1px solid #ddd; */
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
    font-size: 14px;
    line-height: 18px;
    /* color: #38ace5; */
    display: flex;
    /* align-items: center; */
    gap: 8px;	
}
.dashborad-help-info-pill .info-icon{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(90deg, #11337b, #051731);
    color: #d9af46;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dashborad-help-info-pill .info-content{
 -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;	
}
.dashborad-help-info-pill .info-content strong{
    font-weight: 600;
    color: #031a3d;	
}
.dashborad-help-info-pill .info-content span{color:#004b8f;}

.dashboard-box-bottom{
    padding: 16px 16px;
    border-radius: 15px;
    background: #fff;
    /* border: 1px solid #ddd; */
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);	
}

.dashboard-top-header .info-bar .rightPart .addBtn{
    background-color: #000;
    border: 0;
    color: #fff;
    background: linear-gradient(to right, #F5AF41, #F1C40F);
    color: #000;
    border-radius: 6px;
    font-size: 10px;
    line-height: 14px;
    padding: 5px 12px 6px;
    font-weight: 700;	
}


.service-card-style-one-list{}
.service-card-style-one-list .rowBox{margin-left:-10px;margin-right:-10px;}
.service-card-style-one-list .columnBox{padding-left:10px;padding-right:10px;}
.service-card-style-one-list .service-card-style-one{margin-bottom:20px;}
.service-card-style-one-inner{
	border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    background: #fff;	
}
.service-card-style-one-inner .service-card-style-one-thumnail{
    width: 100%;
    /* height: 160px; */
    aspect-ratio: 3 / 2.5;
}
.service-card-style-one-inner .service-card-style-one-thumnail img{
	width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;	
}
.service-card-style-one-inner .service-card-style-one-content{
    padding: 5px 8px;
    background: #0b4aa8;
    /* border-top: 2px solid #f5d355; */
    background: linear-gradient(90deg, #041332, #004b8f, #04295d);
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;	
}
.service-card-style-one-inner .service-card-style-one-content .title{	
     font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    color: #fff;
}

.wheelerTypeListArea{}
.wheelerTypeList{}
.wheelerTypeList .rowBox{margin-left:0px;margin-right:0px;}
.wheelerTypeList .columnBox{padding-left:0px;padding-right:00px;}
.wheelerTypeList .wheelerTypeListItem{
    margin: 0px;
    margin-bottom: 0px;
    border-bottom: 1px solid #ddd;	
}
.wheelerTypeListIteminner{
    text-align: center;
    display: block;
    padding: 8px 5px;	
}
.wheelerTypeListIteminner .wheelerTypeThumnail{}
.wheelerTypeListIteminner .wheelerTypeThumnail img{
    margin: 0px;
    max-height: inherit;
	width:auto;
    height: 50px;	
}
.wheelerTypeListIteminner .wheelerTypeContent{}
.wheelerTypeListIteminner .wheelerTypeContent .title{
    font-size: 10px;
    line-height: 14px;
    font-weight: 700;
    margin-bottom: 0px;	
}


.loginRegister-fld-area{padding: 30px 20px 70px;}
.loginRegister-fld-areainner{text-align:center;}
.loginRegister-fld-areainner .login-top .login-thumnail{ margin-bottom: 25px;}
.loginRegister-fld-areainner .login-top .login-thumnail img{max-width: 180px;width: 100%;}
.loginRegister-fld-areainner .login-top .title {
    font-size: 18px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 15px;
}
.loginRegister-fld-areainner .phone-group {
    margin-bottom: 8px;
    display: flex;
    gap: 5px;
}
.loginRegister-fld-areainner .country-code, .loginRegister-fld-areainner .phone-input {
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    background: #fafafa;
}
.loginRegister-fld-areainner .country-code {
    width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}
.loginRegister-btm-btns-area{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 15px 10px;	
}
.loginRegister-btm-btns-area .login-btn {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 9px 0;
    font-size: 14px;
    font-weight: 500;
    background-image: linear-gradient(180deg, #70cef2 0%, #008ad9 100%);
    background: linear-gradient(90deg, #041332, #004b8f, #04295d);
    color: #fff;
    cursor: not-allowed;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.loginRegister-btm-btns-area .phone-display {
    font-size: 16px;
    background: #f8f9fa;
    color: #9b6f04;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-weight: 600;
}
.loginRegister-btm-btns-area .back-link {
    display: block;
    margin-top: 0px;
    text-align: center;
    background-color: #fff;
    border: 1px solid #ddd;
    color: #666;
    border-radius: 6px;
    text-decoration: none;
    font-size: 14px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.loginRegister-btm-btns-area .back-link i{margin-right:5px;}
.loginRegister-fld-areainner .login-top .otpHeaderTitleSec{max-width:80%;margin:0 auto;margin-bottom:15px;}
.loginRegister-fld-areainner .login-top .otpHeaderTitleSec .title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}
.loginRegister-fld-areainner .login-top .otpHeaderTitleSec .para{font-size: 12px;line-height: 16px;}
.loginRegister-fld-areainner .login-top .phone-display {
    font-size: 16px;
    background: #f8f9fa;
	font-weight:700;
	color:#956a03;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.loginRegister-fld-areainner .login-top .otp-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 10px 0;
}




.service-row {
    margin-top: 18px;
    display: flex;
    gap: 12px;
}

.service-card {
    height: 100px;
    flex: 1;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    flex-direction: row;
    overflow: hidden;
}

.service-title {
    width: 45%;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    display: flex;
    text-align: left;
}

.service-img {
    width: 55%;
    position: relative;
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    right: -8px;
    bottom: -6px;
}

.chip-row {
    margin-top: 14px;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 6px;
}

.chip {
    border-radius: 999px;
    background: #f9fafb;
    padding: 8px 16px;
    font-size: 12px;
    white-space: nowrap;
    border: 1px solid #f3f4f6;
}

.bottom-nav {
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background: #e4f7ff;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-around;
    padding: 8px 0 10px;
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background: #e4f7ff;
    border-top: 2px solid #f5d355;
    background: linear-gradient(90deg, #041332, #004b8f, #04295d);
    display: flex;
    justify-content: space-around;
    padding: 8px 0 10px;
    border-radius: 0px;
    z-index: 9;
}

.bottom-nav .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: #9ca3af;
    flex: 1;
}
.bottom-nav .nav-item .nav-item-link{
	 color: #fff !important;
    font-weight: 500;
	text-align:center;
}
.bottom-nav .nav-item .nav-item-link .nav-icon{
    font-size: 18px;	
}
.bottom-nav .nav-item .nav-item-link .nav-icon svg {
    width: 25px;
    height: 25px;
    margin-bottom: 5px;
}

.bottom-nav .nav-item.active .nav-item-link {
   color: #fff !important;
}
.bottom-nav .nav-item.active .nav-item-link .nav-icon{
   color: #f6c400 !important;
}
.bottom-nav .nav-item.active .nav-item-link .nav-icon svg {
    color: #008ad9;
}

.wallet-box {
    background: #fff;
}

.wallet-box .pill-amount {
    font-size: 14px;    
    font-weight: 600;
}

.service-box-two {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    position: relative;
    overflow: hidden;
}

.service-box-two img {
    width: 100%;
}

.service-box-two p {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
    text-align: center;
}

.service-row-two {
    margin: 0 -6px;
}

.service-row-two .col-4,
.service-row-two .col-6 {
    padding: 0 6px;
}

.reffer-btn {
    background: #e4f7ff;
    background-color: #fff;
    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.12);
    border: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 15px;
}

.reffer-btn img {
    width: 30px;
    height: 30px;
}

.reffer-btn h3 {
    width: 75%;
    font-size: 14px;
    text-align: left;
    color: #38ace5;
    color: #000;
    margin: 0;
}
.arrow-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(180deg, #70cef2 0%, #008ad9 100%);
    border-radius: 50%;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(90deg, #11337b, #051731);
    color: #d9af46;
}

.app-top-bar {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #f3f4f6;
    background: linear-gradient(90deg, #041332, #004b8f, #04295d);
    border-radius: 0 0 18px 18px;
    color: #fff;
}

.back-btn {
    width: 22px;
    height: 30px;
    margin-right: 10px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;	
}

.top-title {
    font-size: 16px;
    font-weight: 500;
    color: #111827;
	color: #fff;
}

.address-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 9px 16px;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
}

.address-btn {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 10px 0;
    font-size: 14px;
    font-weight: 500;
    background-image: linear-gradient(180deg, #70cef2 0%, #008ad9 100%);
    background: linear-gradient(90deg, #041332, #004b8f, #04295d);	
    color: #fff;
}

.address-dtl-box {
    display: flex;
    align-items: center;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    padding: 15px;
    margin-bottom: 12px;
}

.address-dtl-box-left {
    width: 10%;
}

.address-dtl-box-left i {
    font-size: 19px;
    color: #38ace5;
}

.address-dtl-box-center {
    width: 80%;
}

.address-dtl-box-right {
    width: 20%;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-btn {
    width: 25px;
    height: 25px;
    background-image: linear-gradient(180deg, #70cef2 0%, #008ad9 100%);
    color: #ffffff;
    border: 0;
    font-size: 12px;
    border-radius: 50%;
    /* margin-bottom: 5px; */
}

.delete-btn {
    width: 25px;
    height: 25px;
    background-color: red;
    color: #ffffff;
    border: 0;
    font-size: 12px;
    border-radius: 50%;
}

.address-dtl-box-center p {
    font-size: 12px;
    font-weight: 500;
    margin: 0;
}

.address-dtl-box-center span {
    font-size: 12px;
}

/* Referral card */
.referral-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    border: 1px solid #e0f3ff;
    margin-bottom: 16px;
}

.ref-left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
}

.gift-icon {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #e5f7ff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

.ref-text span {
    color: #008ad9;
    font-weight: 600;
}

.ref-btn {
    border-radius: 999px;
    border: 1px solid #008ad9;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #008ad9;
    background: #ffffff;
    cursor: pointer;
}

/* Main settings card */
.card {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    margin-bottom: 16px;
}

.setting-row {
    display: flex;
    align-items: center;
    align-items: flex-start;
    padding: 14px 0;
}

.setting-row+.setting-row {
    border-top: 1px solid rgb(0 0 0 / 18%);
}

.icon-circle {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 10px;
}

.icon-circle img {
    width: 100%;
    height: 100%;
}

.setting-text h4 {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.setting-text p {
    font-size: 12px;
    color: #6b7280;
    margin: 0;
}

/* Security note card */
.note-card {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    border: 1px solid #f3f4f6;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
}

.note-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid #ec4899;
    border-bottom: 2px solid #ec4899;
    transform: rotate(-45deg);
}

.gift-icon img {
    width: 20px;
    height: 20px;
}

.note-text {
    text-align: left;
}

.profile-sec h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 18px;
}

.profile-box label {
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
}

.profile-box {
    margin-bottom: 15px;
}

.profile-box input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 16px;
    outline: none;
}

.number-box {
    align-items: center;
    display: flex;
    gap: 12px;
}

.number-code-box {
    width: 72px !important;
    font-size: 16px;
    background: #fafafa;
}

.number-tel-code {
    background: #fafafa;
}

.dashboard-box {
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    padding: 15px;
    margin-bottom: 12px;
	
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    box-shadow: 0 0px 4px rgba(15, 23, 42, 0.12);
    padding: 15px;
    margin-bottom: 12px;	
}
.book-box{
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    border: 2px solid #ffcc00;
}
.book-box:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.1);
    background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(255, 255, 255, 0.1) 20%, rgb(4 48 104) 100%);	
}
.book-box-inner {
	position:relative;
    width: 100%;  
    padding: 15px;
    position: relative;
    text-align: center;
    padding-top: 34px;
}

.book-box-inner h3 {
    font-size: 22px;
    color: #fff;	
    margin-bottom: 2px;
}

.price-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 10px;
	color: #f6c400;
}

.current-price {
    font-size: 17px;
    font-weight: 700;
}

.old-price {
    font-size: 15px;
    color: #6b7280;
	color: #fff;
    text-decoration: line-through;
}

.book-btn {
    width: 100%;
    border: 0;
    background: transparent;
    background: linear-gradient(90deg, #041332, #004b8f, #04295d);
    background: #f6c400;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    border-radius: 6px;
    padding: 3px 5px;
}

.off-text {
    background: #e4f7ff;
    background: linear-gradient(90deg, #041332, #004b8f, #04295d);
    font-size: 14px;
    color: #fff;
    padding: 4px 15px;
    border-radius: 0 0 5px 5px;
    position: absolute;
    top: 0;
    left: 50%;
    display: inline-block;
    white-space: nowrap;
    transform: translate(-50%, 0);
}

.dashboard-box-top p {
    font-size: 15px;
    margin-top: 12px;
    color: #fff;
}

.minute-text {
    font-size: 18px;
    font-weight: 600;
    color: #38ace5;
}

.dashboard-box-top h3 {
    font-size: 20px;
    margin: 0;
}

.settings-bottom-btn {
    text-align: center;
    margin-bottom: 12px;
    margin-top: 25px;
}

.logout-btn {
    border-radius: 10px;
    border: 1px solid #008ad9;
    padding: 6px 31px;
    font-size: 15px;
    font-weight: 500;
    color: #008ad9;
    background: #ffffff;
}

.setails-box h4 {
    font-size: 16px;
    margin-bottom: 10px;
}

.setails-box ul li {
    display: flex;
    margin-bottom: 5px;
}

.setails-box ul li i {
    font-size: 15px;
    margin-top: 5px;
}

.setails-box ul li p {
    font-size: 14px;
    margin-left: 10px;
    margin-bottom: 0;
}

.include-box ul li i {
    color: green;
}

.exclude-box ul li i {
    color: red;
}

.need-wrapper {
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
    overflow: auto;
    flex-wrap: inherit;
    scrollbar-width: none;
    padding: 5px 0;
}

.need-box {
    width: 100px;	
    margin-right: 6px;
}

.need-box-inner {
    width: 100px;
    text-align: center;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    padding: 12px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
}	
    


.need-icon {
    width: 40px;
    height: 40px;
    background: #e4f7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.need-box p {
    font-size: 11px;
    margin: 0;
}
.cleaningDetailsWrapper .need-wrapper{}
.cleaningDetailsWrapper .need-wrapper .need-box{width: 100%;}
.cleaningDetailsWrapper .need-wrapper .need-box-inner{
    gap: 10px;
    /* background: #f8f9fa; */
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 10px;
    width: 100%;	
}





.book-sec {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pre-book-btn {
    width: 48%;
    border: 1px solid #38ace5;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    background: #38ace5;
    border-radius: 6px;
    padding: 3px 5px;
}

.book-sec .book-btn {
    width: 48%;
}

.app-top-bar-right {
    margin-left: auto;
}

.app-top-bar-right p {
    font-size: 14px;
    color: #008ad9;
    margin: 0;
    margin-left: auto;
	
    font-size: 12px;
    font-weight: 600;
    color: #f6c400;
    margin: 0;
    margin-left: auto;
}

.address-row {
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #111827;
    padding-bottom: 20px;
}

.address-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.address-icon img {
    width: 22px;
}

.content {
    flex: 1;
    padding: 12px 12px 90px;
    overflow-y: auto;
}

.card {
    background: #ffffff;
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    margin-bottom: 12px;
}
.dashboard-box-2{
    background-color: #dce7f6;
    padding: 15px 0;	
}
/* service card */
.service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dashboard-box-2 .service-row{margin-top:0px;}
.service-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.avatar img {
    width: 100%;
    height: 100%;
}

.service-text h3 {
    font-size: 17px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.service-text span {
    font-size: 12px;
    color: #6b7280;
}

.service-price {
    font-weight: 600;
    font-size: 16px;
    color: #111827;
}

/* starter pack banner */
.starter {
    margin-top: 10px;
    border-radius: 16px;
    padding: 12px 14px;
    background: linear-gradient(90deg, #2f67ff, #5b9dff);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    font-size: 12px;
}

.starter-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.starter-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.starter-text strong {
    display: block;
    font-size: 11px;
    letter-spacing: .03em;
}

.starter-btn {
    border: none;
    border-radius: 999px;
    padding: 8px 22px;
    background: #020617;
    color: #ffffff;
    font-size: 13px;
    cursor: pointer;
}

/* list rows */
.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    background: transparent;
    border: 0;
}

.icon-circle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 18px;
}

.icon-coupon {
    background: #e9f7ef;
    color: #16a34a;
}

.wallet-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.wallet-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    margin-right: 10px;
}

.wallet-text h4,
.list-main h4 {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.wallet-text span,
.list-main span {
    font-size: 12px;
    color: #6b7280;
}

.chevron {
    width: 12px;
    height: 12px;
    border-right: 2px solid #9ca3af;
    border-bottom: 2px solid #9ca3af;
    transform: rotate(-45deg);
}

/* payment details */
.card-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

.row-line {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #111827;
    margin-bottom: 4px;
}

.row-line.small {
    color: #6b7280;
}

.divider {
    border-bottom: 1px dashed #e5e7eb;
    margin: 6px 0 4px;
}

.row-total {
    font-weight: 600;
}

/* payment method */
.pay-method {
    background: #ffffff;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    width: 100%;
    border: 0;
}

.pay-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pay-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.pay-text small {
    font-size: 11px;
    color: #6b7280;
    display: block;
}

.pay-text strong {
    font-size: 13px;
    color: #111827;
}

.pay-text {
    text-align: left;
}

/* Search box */
.search-box {
    background: #fff;
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 14px rgba(148, 163, 184, .2);
    border: 1px solid #e5e7eb;
    /* margin-top: -22px; */
    margin-bottom: 18px;
}

.search-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #9ca3af;
}

.search-input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 13px;
    color: #111827;
}

.search-input::placeholder {
    color: #9ca3af;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 10px;
}

/* Category cards */

.card-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-circle {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ic-purple {
    background: #ede9ff;
    color: #7c3aed;
}

.ic-blue {
    background: #e0f2fe;
    color: #2563eb;
}

.ic-gold {
    background: #fff4d8;
    color: #f59e0b;
}

.ic-indigo {
    background: #e5e7ff;
    color: #4f46e5;
}

.ic-green {
    background: #dcfce7;
    color: #16a34a;
}

.ic-pink {
    background: #ffe4f3;
    color: #ec4899;
}

.card-title {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
}

.chevron {
    width: 11px;
    height: 11px;
    border-right: 2px solid #9ca3af;
    border-bottom: 2px solid #9ca3af;
    transform: rotate(-45deg);
}

.support-sec h3 {
    font-size: 16px;
    text-align: left;
    margin-bottom: 20px;
}

.support-box {
    width: 100%;
    background: #ffffff;
    border-radius: 5px;
    padding: 14px 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgb(0 0 0 / 18%);
}

.card-title {
    margin: 0;
    font-size: 16px;
}

.policies-sec ul li {
    border-bottom: 1px solid rgb(0 0 0 / 18%);
}

.policies-sec ul li:last-child {
    border: 0;
}

.policies-sec ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    color: #000;
    font-weight: 500;
    padding: 10px 0;
}

.address-info-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.address-info-top-left h4 {
    font-size: 17px;
    margin: 0;
}

.address-info-top-left p {
    font-size: 12px;
    margin: 0;
}

.address-info-top-left a {
    font-size: 14px;
    color: #008ad9;
    margin: 0;
}

.save-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-box {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.home-box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.home-checkmark {
    display: inline-block;
    border: 1px solid #38ace5;
    color: #38ace5;
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: 30px;
}

.home-box input:checked~.home-checkmark {      
    background-color: #f5f7f97d;
    /* color: #fff; */
    border: 1px solid #042c61 !important;	
}

.save-sec p {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

.pet-box {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pet-box input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.pet-checkmark {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #38ace5;
    color: #38ace5;
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-radius: 30px;
}

.pet-box input:checked~.pet-checkmark {
    background-color: #38ace5;
    color: #fff;
}

.home-box-outer {
    background: #ffffff;
    border-radius: 18px;
    padding: 14px 16px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    margin-bottom: 16px;
    border: 1px solid rgb(0 0 0 / 18%);
}

.room-box p {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 8px;
}

.room-box {
    margin-bottom: 10px;
}

.room-box:last-child {
    margin-bottom: 0px;
}

.room-sec {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.room-sec input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.room-checkmark {
    display: inline-block;
    border: 1px solid #38ace5;
    color: #38ace5;
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 5px 20px;
    border-radius: 5px;
}

.room-sec input:checked~.room-checkmark {
    background-color: #38ace5;
    color: #fff;
}

.room-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}



.size-sec {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.size-sec input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.size-checkmark {
    display: inline-block;
    border: 1px solid #38ace5;
    color: #38ace5;
    background-color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 5px 20px;
    border-radius: 5px;
}

.size-sec input:checked~.size-checkmark {
    background-color: #38ace5;
    color: #fff;
}

.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%; 
    max-width: 260px;
    width: 100%;
    /* padding: 20px; */
    background: #fff;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
    z-index: 999999;
    transition: transform 0.35s ease;
    transform: translateX(-320px);
    overflow-y: auto;
}

.side_menu_area.active {
    transform: translateX(0px);
    transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    opacity: 1;
    visibility: visible;
    overflow: auto;
    max-width: 100%;
}

.menu-list ul li.title {
    padding: 0 10px 10px;
    text-transform: uppercase;
    color: #999;
    font-size: 14px;
    margin: 0;
}

.menu-list ul li a {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    padding: 10px 15px;
}

.menu-list ul li a .iconBox {
    display: inline-block;
    font-size: 18px;
    width: 30px;
}
.menu-list ul li .logout-btn {
    border-radius: 10px;
    border: 0;
    padding: 6px 15px;
    font-size: 15px;
    font-weight: 500;
    color: #000;
    background: #ffffff;
    width: 100%;
    text-align: left;
}
.menu-list {
    padding: 20px 10px;
}

.logout-item {
    margin-top: 32px !important;
    text-align: center;
}

.booking-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 12px 14px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
    margin-bottom: 12px;
    border: 1px solid rgb(0 0 0 / 18%);
}

.side_menu_prof_area {
    padding: 12px 10px;
}

.side_menu_prof_areainner .leftPart .backbtn {
    font-size: 16px;
    color: #000;	
}

.side_menu_prof_areainner .middlePart .title {
    font-size: 14px;
    font-weight: 700;
}

.service-card-box{}
.service-card-box-inner {
  width: 100%;
  height: 145px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  font-family: Arial, sans-serif;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.service-card-thumnail{height: 145px;}
.service-card-thumnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-card-content {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    background: rgb(9, 53, 97, 0.6);	
    color: #fff;
    padding: 5px 10px;
    text-align: center;
}
.service-card-content .title {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 0px;
}
.service-card-box-inner .badge {
    position: absolute;
    bottom: 5px;
    right: 10px;
    background: #f6c400;
    color: #000;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    padding: 5px 14px 6px;
    border-radius: 6px;
}



.cleaningDetailsWrapper .address-bottom.book-sec {
    /* position: relative; */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 0;
    background: #fff;
    padding: 10px 10px;
    display: flex;
    gap: 10px;
    z-index: inherit;
    box-shadow: none;
}
.cleaningDetailsWrapper .address-bottom.book-sec .btn-primary{
    border-radius: 8px;
    padding: 12px 0;
    font-size: 14px;
	margin-top:0px;	
}
.cleaningDetailsWrapper .need-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.cleaningDetailsWrapper .need-box-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 10px;
}
.cleaningDetailsWrapper .need-box-inner .need-icon {
    width: 40px;
    height: 40px;
    /* background: #e4f7ff; */
    /* border: 1px solid #ddd; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    font-size: 30px;
    background: transparent;
    color: #05347d;
}
.cleaningDetailsWrapper .need-box-inner .need-box p {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}
	.slot-box h2 { font-size: 16px; margin-bottom: 18px; }
    .date-pick-sec ul { display: flex; align-items: center; overflow: auto; gap: 10px; scrollbar-width: none; }
    .date-box { position: relative; width: 70px; height: 70px; }
    .date-checkmark { position: absolute; top: 0; left: 0; height: 70px; width: 70px; background-color: #eee; border-radius: 5px; display: flex; align-items: center; flex-direction: column; justify-content: center; }
    .date-checkmark p { font-size: 10px; margin-bottom: 2px; }
    .date-checkmark h4 { font-size: 15px; margin-bottom: 6px; }
    .date-box input:checked ~ .date-checkmark { background-color: #2196F3;background: linear-gradient(90deg, #004b8f, #04295d); color: #fff; }
    .slot-time-box h2 { margin-bottom: 7px; }
    .slot-time-box p { font-size: 12px; color: #6b7280; }
    .time-pick-sec { margin-top: 30px; }
    .time-pick-sec ul { display: flex; align-items: center; flex-wrap: wrap; }
    .time-pick-sec ul li { width: 33.33%; padding: 0 5px; margin-bottom: 10px; }
    .time-box { width: 100%; position: relative; }
    .time-box input { position: absolute; opacity: 0; cursor: pointer; }
    .time-checkmark { position: relative; display: inline-block; height: 100%; width: 100%; border-radius: 5px; padding: 8px 5px; text-align: center; border: 1px solid rgb(0 0 0 / 18%); }
    .time-checkmark p { font-size: 12px; color: #000; font-weight: 600; margin: 0; }
    .time-box input:checked ~ .time-checkmark { background-color: #2196F3;background: linear-gradient(90deg, #004b8f, #04295d); color: #fff; }
    .time-box input:checked ~ .time-checkmark p { color: #fff; }
    .slot-box { border-bottom: 1px solid rgb(0 0 0 / 18%); padding: 14px 0; }
   
    
   .slot-wrapper .address-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding: 10px 20px;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
    z-index: 100;
}

	.slot-bottom-wrapper {
    display: flex;
    justify-content: space-between; /* left-right */
    align-items: center;
    width: 100%;
    max-width: 1200px; /* optional for larger screens */
    margin: 0 auto;
    box-sizing: border-box;
}

.slot-bottom-left {
    flex: 1; /* take remaining space */
}

.slot-bottom-left h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.slot-bottom-right {
    flex: 0; /* only as wide as content */
}

.slot-wrapper .address-btn {
    padding: 10px 20px;
    font-size: 14px;
    white-space: nowrap;
    margin-top: 0px;
    border-radius: 8px;
}

.slot-wrapper .address-row .address-icon {
    width: auto;
    height: auto;
    font-size: 18px;
    border-radius: 5px;
    border:0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slot-wrapper .address-row .address-icon i{position:relative;top:2px;}
.select-address-wrapper .home-checkmark {       
    color: #000;   
    font-size: 14px;
    font-weight: 400;    
}


.create-address-wrapper .profile-box input {
    width: 100%;
    border: 1px solid #e5e7eb;   
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    outline: none;
}
.create-address-wrapper .save-wrapper{}
.create-address-wrapper .save-wrapper .home-box .home-checkmark {
     display: inline-block;
    border: 1px solid #ddd;
    color: #86898d;
    background-color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 3px 12px 5px;
    border-radius: 30px;
}
.create-address-wrapper .save-wrapper .home-box input:checked~.home-checkmark {
     background-color: #38ace5;
    background: linear-gradient(90deg, #004b8f, #04295d);
    border: 1px solid #04295d;
    color: #fff;
}

.create-address-wrapper .save-wrapper .pet-box .pet-checkmark {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    color: #86898d;
    background-color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 30px;
}
.create-address-wrapper .save-wrapper .pet-box input:checked~.pet-checkmark {
    background-color: #38ace5;
     background: linear-gradient(90deg, #004b8f, #04295d);
    border: 1px solid #04295d;
    color: #fff;
}
.single-service-sec{}
.single-service-detail-image{overflow: hidden; border-radius: 8px;aspect-ratio: 3 / 1.8;position:relative;}
.single-service-detail-image img{width: 100%; height: 100%; object-fit: cover;}
.single-service-detail-video{overflow: hidden; border-radius: 8px;aspect-ratio: 3 / 1.8;position:relative;}
.single-service-detail-video video{width: 100%; height: 100%; object-fit: cover;}
.single-service-detail-video iframe{width: 100%; height: 100%; object-fit: cover;}
.single-service-dtls-area{}
.single-service-dtls-area .divider {border-bottom: 1px dashed #ddd;margin: 10px 0 10px;}
.single-service-dtls-area .top-row{}
.single-service-dtls-area .top-row .leftPart{}
.single-service-dtls-area .top-row .rightPart{}
.single-service-dtls-area .title{
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 3px;	
}
.single-service-rating{font-size: 14px;color: #000;}
.single-service-rating .rating-count{font-weight: 600;}
.single-service-rating .rating-view{color: #777;font-weight: 500;}
.single-service-price-time{margin-top: 3px;font-size: 12px; color: #333;}
.single-service-price-time .single-service-price{font-weight: 700;}
.single-service-dtls-area .dot{margin: 0 3px;}
.single-service-dtls-area .time{font-weight: 500;}
.single-service-btns{}
.single-service-btns .single-service-add-btn{
    border: 1px solid #e1d9ff;
    background: #fff;
    color: #031a3d;
    font-weight: 600;
    padding: 5px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;	
}
.single-service-small-features{
    padding-left: 18px;
    margin: 0;
    color: #555;
    font-size: 12px;
    line-height: 16px;
}
.single-service-small-features li{
    list-style-type: disc;
    margin-bottom: 2px;
    font-weight: 500;	
}
.single-service-small-features li:last-child{margin-bottom: 0px;}
.single-service-viewDetails-btns{
    margin-top: 10px;	
}
.single-service-viewDetails-btns .service-viewDetails-btn{
    background-color: transparent;
    border: 0;
    color: #041638;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;	
}

.single-service-options {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.single-service-option-card {
  flex: 1;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
  text-align: left;
}

.single-service-option-card .title {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 5px;
}

.single-service-option-card .option-rating {
    font-size: 12px;
    line-height: 16px;
    color: #555;
    margin-bottom: 5px;
}

.single-service-option-card .option-rating span {
  color: #888;
}

.single-service-option-card .price {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.single-service-option-card .add-btn {
    border: 1px solid #e1d9ff;
    background: #fff;
    color: #031a3d;
    font-weight: 600;
    padding: 5px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.single-service-option-card .add-btn:hover {
  background: #7b61ff;
  color: #fff;
}
.single-service-included .title {
    font-size: 14px;
    line-height: 18px;
    color: #000;
    margin-bottom: 10px;
}

.single-service-included .included-item {
  margin-bottom: 10px;
}
.single-service-included .included-item:last-child {
  margin-bottom: 0px;
}
.single-service-included .included-item .ttl {
     display: block;
    font-size: 12px;
    line-height: 16px;
    /* color: #000; */
    margin-bottom: 3px;
}

.single-service-included .included-item .para {
     font-size: 12px;
    line-height: 16px;
    color: #666;
    margin: 0;
}
.single-service-rating-box {}
.single-service-rating-header{margin-bottom:10px;}
.single-service-rating-header .ttl {
    margin: 0;
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    color: #000;
}
.single-service-rating-header .totalView {
     margin: 0px;
    color: #333;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}
.single-service-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
}
.single-service-rating-box .single-service-rating-row:last-child{ margin-bottom: 0px;}
.single-service-rating-row .rating-star {
  width: 32px;
}
.single-service-rating-row .bar {
  flex: 1;
  height: 4px;
  background: #e5e5e5;
  border-radius: 4px;
  overflow: hidden;
}
.single-service-rating-row .fill {
  height: 100%;
  background: #111;
}
.single-service-rating-row .count {
  width: 40px;
  text-align: right;
  color: #555;
}
.single-service-how-it-works {}
.single-service-how-it-works .title {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}
.single-service-how-it-work-step {
  display: flex;
  gap: 16px;
  margin-bottom: 15px;
  position: relative;
}
.single-service-how-it-work-step::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 36px;
  bottom: -30px;
  width: 1px;
  background: #ddd;
}
.single-service-how-it-work-step:last-child::before {
  display: none;
}
.single-service-how-it-work-step .step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f2f2f2;
  color: #333;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.single-service-how-it-work-step .step-content .ttl {
     font-size: 14px;
    line-height: 18px;
    margin: 0 0 3px;
}

.single-service-how-it-work-step .step-content .para {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: #666;
    margin-bottom: 10px;
}
.single-service-how-it-work-step .step-image{}
.single-service-how-it-work-step .step-image img {
  width: 100%;
  border-radius: 10px;
  display: block;
}
.single-service-all-reviews {}
.single-service-all-reviews .title{
	font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 0px;	
}
.single-service-review-card{
  background: #fff;
  padding: 10px 0px;
  border-bottom: 1px solid #e5e5e5;
}
.single-service-all-reviews .single-service-review-card:last-child{padding-bottom:0px;border-bottom:0;}
.single-service-review-card .review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.single-service-review-card .review-header .userName {
    margin: 0;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
}
.single-service-review-card .review-header .meta {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 16px;
    color: #777;
}
.single-service-review-card .rating {
    background: #07955b;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    padding: 1px 6px 3px;
    border-radius: 4px;
    font-weight: bold;
}
.single-service-review-card .review-text {
    margin-top: 5px;
    margin-bottom: 0px;
    font-size: 12px;
    color: #333;
    line-height: 16px;
}
.single-service-review-card .read-more {
  color: #555;
  font-weight: 500;
  cursor: pointer;
}
.single-service-faq{}
.single-service-faq .title{
	font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    margin-bottom: 10px;	
}
.single-service-faqinner{}
.single-service-faqinner .accordion {}
.single-service-faqinner .accordion-item {
    border: 0 !important;	
}
.single-service-faqinner .accordion-header{}
.single-service-faqinner .accordion-button{
    padding: 0px;
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: #000;	
}
.single-service-faqinner .accordion-button::after{
    width: 14px;
    height: 14px;
    background-size: contain;	
}
.single-service-faqinner .accordion-body {
    padding: 5px 0px;
    font-size: 12px;
    line-height: 16px;	
}

.requirementModalDiolog{margin:0px}
.requirementModal .modal-content{
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0;
    width: 100%;
    transform: translateY(100%);
    transition: transform 0.4s ease-in-out;
    /* padding: 0 15px; */
    border-radius: 15px 15px 0px 0px;
    border: 0;
}
.requirementModal.show .modal-content{
     transform: translateY(0);
}
.requirementModalDiologBody{
    max-height: 400px;
    max-height: calc(410px - 25px);	
	overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.booking-header .status{
    font-size: 10px;
    line-height: 14px;
    font-weight: 600;
    padding: 3px 10px 5px;
    border-radius: 30px;	
}
.booking-header .status.accepted{background-color:rgba(69,179,105,0.15);color:#45b369;}
.booking-header .status.rejected{background-color:rgba(239,71,112,0.15);color:#ef4a00;}
.booking-header .status.pending{background-color:rgba(255,192,45,0.15);color:#ff9f29;}

.bookingDtlsInfoArea{
    background: #f6f6f6;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);	
}
.bookingDtlsInfoHeader{margin-bottom:10px;}
.bookingDtlsInfoHeader .title {
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 5px;
}
.bookingDtlsInfoHeader .para{
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;	
	color:#444;	
}
.bookingDtlsInfo{}
.bookingDtlsInfo .title {
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 5px;
}
.bookingDtlsInfo p{
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
	color:#555;	
    margin-bottom: 5px;
}
.bookingDtlsInfo p .ttl{font-weight: 600;color:#000;}
.bookingDtlsInfo p .minute-text {
    font-size: 16px;
    font-weight: 700;
    color: #04193c;
}
.bookingDtlsInfoArea .bookingInfoBtns{}
.bookingInfoBtns .btn-primary {
    width: 100%;    
    border: none;
    border-radius: 8px;
    padding: 12px 0;   
    background: linear-gradient(90deg, #041332, #004b8f, #04295d);
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    cursor: pointer;
}

.dashboard-box-3 {
    padding-bottom: 60px;
}

.single-service-sec {
    padding-bottom: 60px;
}

.dashboard-top-header .logo-section img {
    max-width: 60px;
    width: 100%;
    border-radius: 5px;
}

.wheelerTypeListIteminner .wheelerTypeThumnail {
    width: 100%;
    aspect-ratio: 3 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.wheelerTypeListIteminner .wheelerTypeThumnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}

.service-card-box-inner {
    height: 115px;
    border: 2px solid #ffcc00;
}

.service-card-thumnail {
    height: 100%;
}

.info-bar-inner {
    flex-wrap: wrap;
    gap: 12px;
}

.dashboard-top-header .info-bar .rightPart {
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.help-support-btn {
    background: #d9af46 !important;
}

.recommended-box {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-bottom: 15px;
}

.user-bookings .rowBox {
    margin: 0 -6px !important;
}

.dashboard-box-2 {
    overflow-x: hidden;
}

.vericalModal .modal-header {
    padding: 0;
    border: 0;
    position: relative;
}

.logo-section p {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: #d9af46;
    margin: 5px 0 0 0;
}

.dashboard-top-header .info-bar .leftPart {
    width: 100%;
}

.dashboard-top-header .info-bar .leftPart .location p {
    margin: 0;
}

.dashboard-top-header .info-bar .leftPart .location .icon {
    font-size: 20px;
}

/*.dashboard-top-header .info-bar .rightPart .addVehicleBtn {*/
/*    width: 50%;*/
/*    padding: 12px 11px;*/
/*}*/

.dashboard-top-header .info-bar .rightPart .addVehicleBtn .pill-icon {
    font-size: 18px;
    margin-bottom: 7px;
}

/*.dashboard-top-header .info-bar .rightPart .wallet-card {*/
/*    width: 50%;*/
/*    padding: 12px 11px;*/
/*}*/

.dashboard-top-header .info-bar .rightPart .wallet-card p {
    font-size: 15px;
    margin-bottom: 8px;
}

/*.dashboard-top-header .info-bar .rightPart {*/
/*    background: rgba(255, 255, 255, 0.1);*/
/*    border: 1px solid rgba(255, 255, 255, 0.2);*/
/*    padding: 6px;*/
/*    border-radius: 13px;*/
/*}*/

.help-support-sec {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 0 3px 0;
}

.help-support-btn {
    width: 144px;
    justify-content: center;
}

.vericalModal .modal-content {
    background: #061638;
    border-radius: 10px;
}

.vericalModal .modal-title {
    font-size: 15px;
    padding: 10px 0 0 17px;
}

.vericalModal .modal-header .btn-close {
    width: 18px;
    height: 18px;
    background: #d9af46;
    border-radius: 50%;
    color: #fff;
    opacity: 1;
    font-size: 12px;
    position: absolute;
    right: 0;
    top: -3px;
}

.vericalModal .modal-body .add-varical-btn {
    background: #d9af46;
    border: 0;
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
}

.vericalModal .vehicle-item {
    border-radius: 8px;
}

.vericalModal .vehicle-select {
    display: flex;
    align-items: center;
}

.vericalModal .vehicle-select i {
    width: 30px;
    height: 30px;
    background: #d9af46;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    margin: 0 !important;
}

.vericalModal .vehicle-select p {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    padding-left: 6px;
}

.dashboard-top-header .logo-section img {
    max-width: 98px;
}

.dashboard-top-header .info-bar .rightPart .addVehicleBtn {
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 20px;
    padding: 6px 26px;
}

.dashboard-top-header .info-bar .rightPart .addVehicleBtn .pill-icon {
    margin: 0;
    font-size: 12px;
}

.car-name-info {
    font-size: 12px;
    color: #fff;
    padding-left: 10px;
}

.dashboard-service-box {
    width: 100%;
    height: 100%;
    border-radius: 18px;
    background: #ffffff;
    border: 2px solid #f3f4f6;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
    padding: 12px 12px 10px;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
    position: relative;
    border: 2px solid #f6c400;
    overflow: hidden;
    padding: 0 !important;
}

.dashboard-service-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.login-btn-sec {
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-btn-sec .user-info {
    font-size: 13px;
}