/************ custom css  ************/

.serivces-filter{
	padding: 50px 30px !important;
}


/* sidebar tabs  */
.sideBar-tab{
	display: flex;
}
.sidebar {
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
  width: 200px;
  background-color: #343a40;
  padding-top: 15px;
  color: white;
}

.nav-link {
  color: white;
}

/* map css  */

.image-container {
width: 100%; /* Set the desired width */
height: 400px; /* Set the desired height */
}

.table{
margin-bottom: 0rem !important;
}
.modal-body{
padding: 0.4rem !important;
}
.modal-body tr.modal-row td {
background-color: #5566ab;
color: #fff;
text-transform: uppercase;
padding: 0.3rem !important;
text-align: center;
border-top: 6px solid #fff;
}

.modal-body tr.modal-row td + td {
background-color: #8790bb;
color: #fff;
text-transform: capitalize;
text-align: center;
}
.modal-body tr.modal-bottom td {
color: #fff;
text-transform: uppercase;
padding: 0.3rem !important;
text-align: center;
border-top: 6px solid #fff;
}
.modal-body tr.modal-bottom td + td{
color: #fff;
text-transform: capitalize;
text-align: center;
}
.modal-body img{
padding: 0px;
}

.modal-row .boxed-btn {
padding: 20px 40px;
border: none;
background: linear-gradient( to left, #d60334 50%,     #e80338 50% );
background-size: 200% 100%;
background-position: right bottom;
cursor: pointer;
transition: all ease .3s;
border-right: 1px solid #fff;

&:hover {
    background-position: left bottom;
    color: white;
}
}
/*.fade.show {
background: #000000ba !important;
}*/
.content{
width: 100%;
}
.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#pac-input, #pac-input1, #pac-input2, #pac-input3, #pac-input4{
bacground-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus, #pac-input1:focus, #pac-input2:focus, #pac-input3:focus, #pac-input4:focus {
border-color: #4d90fe;
}
.pac-container {
font-family: Roboto;
}
#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}
#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}


.servicesItem .content {
  margin-left: 10px;
  padding: 20px;
}

/*tabs css*/
.nav-item {
    position: relative;
}

/*.nav-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: #000;
    bottom: -5px;
    left: 50%;
    transition: all 0.3s ease-in-out;
}*/

.nav-item:hover::after {
    width: 100%;
    left: 0;
}
.nav-link{
    color: #454545;
}

/* modalbox  */
.streetview .left-map-area{
    height: 98%;  
    margin-left: -30px;
    margin-right: -30px;
}
.streetview{
    padding: 15px;
}
.request-page-form-wrap.streetview-details{
    background: none !important;
    padding: 0px 40px 0px;
}
.adbikeHead{
    display: block;
}
.reserve-btn .submit-btn{
    background-color: var(--secondary-color);
    padding: 15px 40px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    transition: all .3s ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.7);
}
.reserve-btn .submit-btn:hover {
    background-color: #fff;
    color: var(--main-color-one);
    border: 1px solid #fff;
}
.streetview-details h5{
    font-size: 20px !important;
}
.streetview-details p{
    font-size: 16px !important;
    margin-left: 60px;
}
.streetview-details .icon{
    font-size: 40px !important;
    float: left !important;
}
.streetview-details .content{
    margin-left: 0px;
    padding: 20px 0px !important;
}


/* The Close Button */

.close-button {
  background-color: var(--secondary-color);
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    transition: all .3s ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.7);
    top: 0px;
    width: 30px;
    height: 30px;
    float: right;
}
.fa-inverse{
    top: -5px;
    font-size: 13px;
}

.close-button:hover,
.close-button:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.request-area .left-content-area.item-tabs{
    padding: 20px;
    padding-bottom: 12px;
    border-style: solid;
    border-color: rgb(243, 243, 243);
    border-radius: 12px;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
    display: flex;
    flex: initial;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    height: fit-content;
    margin-bottom: 0px;
    max-height: 100%;
    position: relative;
}
ul.nav-tabs{
    border-bottom: 0px;
}
ul.mapIcons li.nav-item{
    width: 100%;
    margin-top: 8px;
    background: #eeeeeea8;
    border-radius: 5px;
    cursor: pointer;
}
ul.mapIcons li.nav-item:first-child {
    margin-top: 0; /* Or set any specific margin value */
}
ul.mapIcons li.nav-item a.nav-link.active{
    border: 2px solid #000;
    border-radius: 5px;
}
.mapIcons i{
    font-size: 20px;
    color: var(--main-color-one);
    line-height: 1;
    padding-right: 10px;
}
li.nav-item a{
    padding: 8px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 500ms;
}
.dropdown-item label{
    padding-left: 5px;
}
/*checkout page css*/

.breadcrumb-area.check_out:before{
    background: linear-gradient(to right, #180338 0%, rgb(24 3 56 / 44%) 50%, rgba(24, 3, 56, 0.5) 100%) !important;
}
.check_out .breadcrumb-inner{
    padding: 150px 0 150px 0 !important;
}
table.cart_item, .cart-coupon-sec {
    text-align: left;
    position: relative;
    background: #fff;
    box-shadow: 5px 5px 25px 0 rgba(46, 61, 73, .2);
    border-radius: .375rem;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    /*border-top: 2px solid #b70c45;*/
    margin-bottom: 25px;
}
table.cart_item thead tr {
    background: linear-gradient(to bottom right, #fc0841, #f20841);
    color: #ffffff;
}
.cart_menu td.image {
    width: 12%;
    padding-left: 20px;
}
.cart_menu td.description {
    width: 25%;
}
.cart_menu td.quantity {
    width: 12%;
}
table.cart_item tbody tr {
    border-top: 1px solid #ddd;
}
td {
    padding: 15px 5px;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
    border-radius: 2px;
}
td.cart_product {
    padding: 20px;
}
td.cart_description h5 {
    font-size: 15px;
    color: #565757;
}
h6 {
    font-size: 1rem;
    line-height: 110%;
    margin: .5rem 0 .4rem 0;
}
.cart_delete{
    text-align: center;
}
.cart_delete a {
    color: red;
    text-decoration: none;
}
.cart_delete a:hover {
    text-decoration: underline;
}
.cart_item img {
    width: 50px;
}
h6 {
    font-size: 1rem;
    line-height: 110%;
    margin: .5rem 0 .4rem 0;
}
.cart_delete{
    text-align: center;
}
.card.cart-coupon-sec {
    min-height: 310px !important;
}
.card .card-content {
    padding: 24px;
    border-radius: 0 0 2px 2px;
    background: #eeeeee73;
}
.total_area ul li {
    background: #f1f1f1;
    color: #222222;
    margin-top: 10px;
    padding: 7px 20px;
    font-family: 'montserrat';
}
.card-content ul{
    list-style: none;
    padding: 0px;
}
.card-content span{
    float: right;
}
.check_out_box{
    border-top: 3px solid #f50841;
}
.card-content .title-md{
    font-size: 20px;

}
.form-group{
    margin-bottom: 1.5rem;
}
.form-control{
    font-size: 0.9rem;
}
.boxed-btn.applybtn{
    min-width: 100px;
    padding: 8px;
}
#userDetailPanel .form-control::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #fff; 
        font-size: 14px;
    }


/* Popup container - can be anything you want */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
.navbar-expand-lg .navbar-collapse{
    text-align: center !important;
}
.modal-dialog {
    max-width: 90%;
    margin: 3.75rem auto;
}
/* Hide main content initially */
#main-content {
    display: none;
}
#preloader{
    text-align: center;
}

/*************login page*************/
.form-popup {
    position: relative;
    /*top: 50%;
    left: 50%;*/
    z-index: 10;
    width: 100%;
    opacity: 0.9;
    cursor: pointer;
    max-width: 720px;
    background: #fff;
    border: 2px solid #fff;
    /*transform: translate(0%, -10%);*/
}
.show-popup .form-popup {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.1s;
}
.form-popup .close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    color: #878484;
    cursor: pointer;
    height: 28px
}
.form-popup .close-btn .fa-inverse{
    top: 0px;
    font-size: 15px;
}
.blur-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: 0.1s ease;
}
.show-popup .blur-bg-overlay {
    opacity: 1;
    pointer-events: auto;
}
.form-popup .form-box {
    display: flex;
}
.form-box .form-details {
    width: 100%;
    color: #fff;
    max-width: 330px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.login .form-details, .forgot-pass .form-details{
    padding: 0 40px;
    background: url("../img//login-img.jpg");
    background-position: center;
    background-size: cover;
}
.signup .form-details {
    padding: 0 20px;
    background: url("../img//signup-img.jpg");
    background-position: center;
    background-size: cover;
}
.form-box .form-content {
    width: 100%;
    padding: 35px;
}
.form-box h2 {
    text-align: center;
    margin-bottom: 29px;
    color: #fff;
}
.form-box p{
    font-size: 16px;
    color: #fff;
    font-weight: 600;
}
.form-content h2{
    color: #000;
}
form .input-field {
    position: relative;
    height: 50px;
    width: 100%;
    margin-top: 20px;
}
.input-field input {
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    font-size: 0.95rem;
    padding: 0 15px;
    border: 1px solid #717171;
    border-radius: 3px;
}
.input-field input:focus {
    border: 1px solid #fc0841;
}
.input-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #4a4646;
    pointer-events: none;
    transition: 0.2s ease;
}
.input-field input:is(:focus, :valid) {
    padding: 16px 15px 0;
}
.input-field input:is(:focus, :valid)~label {
    transform: translateY(-120%);
    color: #fc0841;
    font-size: 0.75rem;
}
.form-box a {
    color: #fc0841;
    text-decoration: none;
}
.form-box a:hover {
    text-decoration: underline;
}
form :where(.forgot-pass-link, .policy-text) {
    display: inline-flex;
    margin-top: 13px;
    font-size: 0.95rem;
}
form button {
    width: 100%;
    color: #fff;
    border: none;
    outline: none;
    padding: 7px 0;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 3px;
    cursor: pointer;
    /*margin: 25px 0;*/
    background: #fc0841;
    transition: 0.2s ease;
}
form button:hover {
    background: #da0436;
}
.form-content .bottom-link {
    text-align: center;
}
.form-popup .signup,
.form-popup.show-signup .login,
.form-popup .forgot-pass,
.form-popup.show-forgot .login,
.form-popup.show-forgot .signup {
    display: none;
}
.form-popup.show-signup .signup,
.form-popup.show-forgot .forgot-pass {
    display: flex;
}
.signup .policy-text {
    display: flex;
    margin-top: 14px;
    align-items: center;
}
.signup .policy-text input {
    width: 14px;
    height: 14px;
    margin-right: 7px;
}
.breadcrumb-area.login-bg:before{
    background: linear-gradient(to right, #1803389e 0%, rgba(24, 3, 56, 0.95) 30%, rgba(24, 3, 56, 0.5) 100%); 
}
.breadcrumb-area.login-bg .breadcrumb-inner{
    padding: 155px 0 80px 0;
}
.bg-danger{
    width: 100%;
    border: 1px solid #ac0414;
    font-size: 14px;
    font-weight: 300;
}
.cart-count {
    background-color: red;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    position: absolute;
    top: -12px;
    right: -12px;
    height: 24px;
    width: 22px;
    padding-left: 8px;
}
.mobile-cart{
    position: relative;
    background: #fff;
    color: #fc0841;
    padding: 9px;
    top: 3px;
    padding-bot
    tom: 4px;
    padding-top: 7px;
}

/* Default styling for larger screens */
.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.nav-tabs .nav-item {
  flex: 1 1 auto;
}
/* Default styling for larger screens */
.custom-tabs-map {
  display: flex;
  flex-wrap: wrap;
}

.custom-tabs {
  order: 1; /* Tabs on the left side */
}

.custom-map {
  order: 2; /* Map on the right side */
}

.tab-text{
    font-size: 13px;
}
.in-storeCat_dropdown{
    margin-bottom: 10px;
    margin-left: -10px;
}
.subCategory{
    color: #000;
    background-color: #ffc107;
    border-color: #ffc107;
    width: 100%;
    text-align: center;
    height: 80%;
    border-radius: 4px;
    margin-left: -12px;
}
.mediaType{
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}
option {
    font-size: 18px;
    background-color: #ffffff;
    color: black;
}

option:before {
    content: ">";
    font-size: 20px;
    display: none;
    padding-right: 10px;
    padding-left: 5px;
    color: #fff;
}

option:hover:before {
    display: inline;
}
.map-search-btn{
background-color: #702cdd !important;
}

.cinema-category-box {
    background: #fff7d1;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid #f1c40f;
}

.cat-label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
}

.cat-value {
    font-size: 18px;
    font-weight: 700;
    margin-top: 4px;
}

.audi-section {
    margin-top: 10px;
}

.audi-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;
}

.audi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.audi-card {
    background: #f9f9f9;
    border-radius: 10px;
    padding: 12px;
    border: 1px solid #eee;
    text-align: center;
}

.audi-name {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 6px;
}

.audi-capacity {
    font-size: 14px;
    color: #444;
}

/* Direction Tab Styles */
.direction-panel .description {
    font-size: 15px;
    color: #555;
    margin-bottom: 15px;
}

/* Modern Button */
.direction-btn-new {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ffb300, #ff9800);
    padding: 12px 18px;
    border-radius: 8px;
    color: #fff !important;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(255, 152, 0, 0.3);
    transition: 0.3s ease;
}

.direction-btn-new i {
    font-size: 18px;
}

.direction-btn-new:hover {
    background: linear-gradient(135deg, #ffa000, #ff8f00);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(255, 152, 0, 0.4);
}

/* Iframe Container */
.direction-map-container {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.direction-map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}


/* Mobile view (max-width: 768px) */
@media (max-width: 768px) {
  
}

/**********media query***********/

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1250px !important;
    }
}

/***********mobile view***********/

@media only screen and (max-width: 991px) {

   /*services tabs*/
   .tab-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
  }

  .nav-tabs .nav-item {
    flex: 0 0 20%; /* Each tab takes up 25% of the width to show 4 icons */
    text-align: center;
    margin-top: 0px !important;
    background: #fff !important;
  }
  ul.mapIcons li.nav-item a.nav-link.active{
    border: none;
    border-bottom: 2px solid #000;
    border-radius: 0px;
  }
  .request-area .left-content-area.item-tabs{
    margin: 10px 0px;
    border: none;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    border-radius: 0px;
  }
  .nav-tabs .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding: 10px 0;*/ /* Adjust padding for better spacing */
  }

  .nav-tabs .nav-link img {
    margin-bottom: 5px; /* Add space between the icon and the text */
  }

  .tab-scroll-container::-webkit-scrollbar {
    display: none; /* Hide scrollbar in WebKit-based browsers */
  }
  .tab-text {
    display: none; /* Hide the text in mobile view */
  }

  .nav-tabs .nav-link {
    padding: 5px; /* Adjust padding for better spacing */
  }
   .custom-tabs-map {
    flex-direction: column; /* Stack columns vertically */
  }

  .custom-tabs {
    order: 2; /* Move tabs below the map */
  }

  .custom-map {
    order: 1; /* Map above the tabs */
  }
  .custom-map-margin{
    margin-top: 90px;
  }


}
/* Responsive styling */
@media (max-width: 768px) {
    .modal-dialog {
        max-width: 90%;
        margin: 1.75rem auto;
    }
    .left-content-area.item-tabs{
        padding: 0px !important;
    }
    .loader, .loader2, .loader3{
        width: 84%;
    }
    .nav-custom-menu li:last-child, .nav-custom-menu li.cart{
        display: block !important;
    }
    .kioskImg img{
        width: 70%;
        padding-top: 5px !important;
    }
    .close-button{
        position: absolute;
        top: -15px;
        right: -15px;
    }
    .streetview-details, .streetview-details .content{
        padding: 0px !important;
    }

    table.cart_item, .cart_item thead, .cart_item tbody, .cart_item th, .cart_item td, .cart_item tr {
        display: block;
    }
    .cart_item thead tr {
        display: none;
    }
    .cart_item tr {
        margin-bottom: 10px;
        border: 1px solid #ddd;
        padding: 10px;
    }
    .cart_item td {
        display: flex;
        justify-content: space-between;
        padding: 10px 5px;
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }
    .cart_item td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 10px;
        font-weight: bold;
        text-align: left;
    }
    .cart_item .cart_product img {
        width: 70px;
    }
    .loaderLogo{
        width: 45%;
    }
    .request-area .left-content-area .item-tabs{
        padding: 10px !important;
    }
    
    .form-popup .form-details, .form-popup .close-btn{
        display: none;
    }
    .mobile-user-icon{
        display: block !important;
        float: right;
        color: #fc4570;
        margin-top: 6px;
    }
    h5.title {
        margin-right: 12px;
        float: left;
        font-size: 18px !important;
    }
    .single-why-us-box .content p{
        margin-right: -20px;
        font-size: 18px !important;
    }
    h4.title img{
        float: left;
    }
    .item-value{
        float: left;
        margin: 25px;
    }
    .request-area .right-content-area{
        margin-left: -20px !important;
    }
    #map{
        min-height: 720px;
    }
    .iframe-container iframe{
        height: 360px;
    }
}


/* UX Improvements - Cart Animation */
@keyframes cart-bounce {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.2); 
  }
}

.cart-count.updated {
  animation: cart-bounce 0.3s ease;
}

/* Category Tab Hover Effects */
ul.mapIcons li.nav-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

ul.mapIcons li.nav-item {
  transition: all 0.3s ease;
}


/* Fix for autofilled inputs - label should move up when input has value */
.input-field input:not(:placeholder-shown)~label {
    transform: translateY(-120%);
    color: #fc0841;
    font-size: 0.75rem;
}

.input-field input:not(:placeholder-shown) {
    padding: 16px 15px 0;
}


/* Override: Hide label completely when input has value */
.input-field input:not(:placeholder-shown)~label {
    opacity: 0;
    visibility: hidden;
}

/* Override: When focused, keep label hidden if has value */
.input-field input:focus:not(:placeholder-shown)~label {
    opacity: 0;
    visibility: hidden;
}

/* When empty and focused, show label above in small red */
.input-field input:focus:placeholder-shown~label {
    transform: translateY(-120%);
    color: #fc0841;
    font-size: 0.75rem;
    opacity: 1;
    visibility: visible;
}
/* Fix: Label should act as placeholder inside input, disappear when typing */
.input-field input:not(:placeholder-shown)~label,
.input-field input:focus:not(:placeholder-shown)~label {
    display: none;
}

/* When input is empty, label stays inside as placeholder */
.input-field input:placeholder-shown~label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #999;
    font-size: 0.95rem;
    pointer-events: none;
}

/* Remove the red label above behavior */
.input-field input:focus~label {
    display: none;
}

/* Fix: Remove extra top padding, center cursor vertically */
.input-field input {
    padding: 0 15px !important;
    display: flex;
    align-items: center;
}

.input-field input:not(:placeholder-shown) {
    padding: 0 15px !important;
}