/*Only Booking page css here*/

html, body {overflow-x: hidden;}

.navbar-light .navbar-nav .nav-link.active {
    color: #ffc20f;
    box-shadow: unset !important;
}
.modal-body {
    /*display: flex;
    justify-content: center;
    gap: 10px;*/
    padding: 2rem; 
}
.modal-body h1 {
    color: #237a29; 
}
.regform {
    margin-top: 0;
    text-align: left;
}

section#signup {
    width: 44%;
    float: right;
    border: 2px solid #157347;
    border-radius: 5px;
    margin-right: 10%;
}
div#for_more {
    border: 2px solid #008000;
    padding: 25px 18px;
    border-radius: 15px;
    margin-top: 55px;
}
div#for_more_van {
    border: 2px solid #008000;
    padding: 25px 18px;
    border-radius: 15px;
    margin-top: 55px;
}

h3.no\. {
    font-weight: 600;
    color: #008000;
}
button#confirm_assistance, button#cancel_assistance {
    border-radius: 8px;
}
nav.navbar.navbar-expand-lg.navbar-light.bg-light.backdrop-blur {
    opacity: 1 !important;
}
.modal-dialog {
    position: absolute;
    left: 50%;
    right: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%) !important;
    width: 100%;
}
.modal-content {
    max-width: max-content;
} 
span#travel_time, span#labour_time {
    background: #316e13;
    border-radius: 15px;
    padding: 4px 8px;
    margin-left: 3px;
    font-size: 13px;
}
div#both_loc div.suggestiondiv {
    border: 0;
}
.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: -1rem;
    width: 100%;
}
.choosdate_time input[type="radio"] {
    width: 4%;
}
.form-label {
    margin-bottom: .5rem;
    text-align: left !important;
    width: 100%;
}
.h4,
h4 {
    font-size: 0.8rem;
}
input#itemRange {
    margin: 2% 0 2% 4% !important;
    border: 0;
    width: 96%;
}
.h2,
h2 {
    font-size: 1.2rem;
}

.h1,
h1 {
    font-size: 2.0rem;
}
button#form_sub_pay, #form_sub_cash_on {
    font-size: 14px;
    height: 40px;
    justify-content: center;
}
label {
    display: flex !important;
    align-items: center !important;
    font-size: 20px;
    padding: 4px 0;
    gap: 12px !important;
    font-weight: 100;
    font-family: ui-sans-serif, system-ui, sans-serif,"Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol", "Noto Color Emoji";
}
.slider-labels span {
    font-size: 0.9rem;
    color: gray;
}

.active-label {
    color: black;
    font-weight: bold;
}

.item-tags button {
    margin: 0.5rem 0.25rem;
    border: 1px solid #ddd;
    color: #333;
}

.item-tags button.active {
    background-color: #007bff;
    color: white;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    text-align: center;
}

.icon-grid img {
    width: 40px;
    height: 40px;
}

.toggle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

.price-card {
    border: 2px solid #9BE2AA;
    border-radius: 10px;
    background-color: #F8FFF8;
    padding: 20px;
    text-align: left;
}

.price-card .final-price {
    font-size: 2rem;
    font-weight: bold;
    color: #087B45;
}

.price-card .subtext {
    font-size: 0.9rem;
    color: #6c757d;
}

.price-card .details {
    color: #087B45;
    font-weight: bold;
}

.price-card .price-promise {
    border: 1px solid #9BE2AA;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 15px;
    font-size: 0.9rem;
}

body {
    font-family: Arial, sans-serif;
}

#controls {
    margin-bottom: 10px;
}


#controls button {
    padding: 10px 20px;
    margin-right: 5px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

#controls button:hover {
    background-color: #0056b3;
}

#suggestions {
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ddd;
    background: #fff;
    display: none;
    position: absolute;
    z-index: 1000;
    width: 300px;
}
.active{border-color:#22c55e !important;box-shadow: 0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}

#suggestions div {
    padding: 10px;
    cursor: pointer;
}

#suggestions div:hover {
    background: #f0f0f0;
}
input.form-control.loc_in {
    border-left: 1px solid #ccc;
}
input[type="text"] {
    width: 300px;
    padding: 10px;
    margin-bottom: 10px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
.mapbox-directions-instructions {
    display: none !important;
}
.directions-control-inputs{
    display: none !important;
}
.directions-control-directions{
    display: none !important;
}
.register_buttons {margin: 10px;}
    .card .mt-p{border: 2px solid #e5e7eb;}
    .col { padding: 80px 0;}
    #package_type h1 {font-size:20px;text-transform: uppercase;font-weight: 700;text-align: left;color: #000;cursor: pointer;}
    .card.mt-2 {
    border: 2px solid #d9d9d9;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
}
.card.mt-2:hover {border: 1px solid #226427;transition: all ease .3s;box-shadow: 0 0 3px #ccc}
.p-2 {padding: 10px;}
.card-body.p-2.m-2 h2 {font-size: 19px;font-weight: 600;text-transform: capitalize;}
     .card-body.p-2.m-2 h4 {
    font-size: 18px;
    color: #898989;
    font-family: ui-sans-serif, system-ui, sans-serif,"Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 300;
    letter-spacing: 0.5px;
}
#package_type {padding: 15px;}
#data_time{text-align: left;padding: 15px;}
#data_time h1 {font-size: 20px;text-transform: uppercase;font-weight: 600;letter-spacing: 1px;}
h2.dateselect {
    font-weight: 600;
    font-size: 18px;
    border: 2px solid #e5e7eb;
    padding: 18px 15px 16px 22px;
    border-radius: 10px;
    cursor: pointer;
    line-height: 26px;
}
#today:hover{border: 2px solid #ffc20f;transition: all ease .3s;}
h2#choos_date.active {
    font-weight: 600;
    font-size: 18px;
    border: 2px solid #ccc;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    border-bottom: none;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0;
    margin-bottom: 0;
}
input#datepicker {
    margin-bottom: 0 !important;
}
.choosdate_time.active {
    font-weight: 600;
    font-size: 18px;
    border: 2px solid #ccc;
    padding: 15px;
    border-radius: 10px;
    cursor: pointer;
    border-top: none;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
h2#choos_date {
    font-weight: 600;
    font-size: 18px;
    border: 2px solid #e5e7eb;
    padding: 18px 15px 16px 22px;
    border-radius: 10px;
    cursor: pointer;
    line-height: 26px;
}
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: linear-gradient(to right, #007bff 0%, #007bff 0%, #ddd 0%, #ddd 100%);
    outline: none;
    transition: background 0.15s ease-in-out;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
}
#choos_date:hover{border: 2px solid #ffc20f;transition: all ease .3s;}
#today_time label {display: inline-flex;gap: 5px;width: 30%;}
label label {
    display: -webkit-inline-box;
    gap: 5px;
    font-size: 20px;
    font-weight: 100;
    position: relative;
    color: #666;
    padding: 5px 0px;
    line-height: 28px;
}
form input {float: left;padding: 10px 5px;border: 1px solid #ccc;border-radius: 5px;outline: 0; margin-bottom: 0px !important;}
.datepicker-days {padding: 10px;font-size: 15px;}
section#location h1 {font-size: 20px;text-transform: uppercase;font-weight: 600;letter-spacing: 1px;text-align: left;margin: 0}
select#select_loc {
    box-shadow: 0 0 0 !important;
    text-align: left;
    position: relative;
    padding: 10px 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 0 0 20px;
}
input[type="text"] {width: 100%;padding: 10px;margin-bottom: 10px;border-bottom: 1px solid #ccc;}
.btn-success {color: #fff;background-color: #157347;border-color: #146c43;max-width: 30%;display: inline-flex;vertical-align:  middle;
    font-size: 10px;padding: 5px 8px;}
    span.stair_count {margin-top: -12px;}
.btn-light {color: #000;background-color: #f9fafb;border-color: #f9fafb;max-width: 25px;height: 25px;  display: inline-flex;vertical-align: middle;font-size: 11px;padding: 7px 7px;border-radius: 50%}
section#items h1 {font-size: 20px;text-transform: uppercase;font-weight: 600;letter-spacing: 1px;text-align: left;}
#items_details {text-align: left;}
  #items_details h3 {font-weight: 600;font-size: 18px;}
  #items_details p {font-size: 17px;color: #666;}
  form input {float: left;padding: 10px 5px;border: 1px solid #ccc;border-radius: 5px;outline: 0;}
  .card {border: 1px solid #ccc; overflow:hidden;
    border-radius: 10px; margin-bottom:10px;}
.today_time input {
    width: 16px;
    height: 16px;
    float: left;
    padding: 10px 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: 0;
}
.Items_Cnt {
    text-align: left;
    background: #e8ecf0;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}
.Items_Cnt p {
    margin: 0;
    font-size: 14px !important;
}
.Items_Cnt p:first-child {
    margin-bottom: 10px;
}
section#location .col-md-6:nth-child(2) {
    text-align: right;
}
div.suggestiondiv, div.suggestiondiv {
    position: absolute;
    background: #fff;
    top: 50px;
    width: 100%;
    left: 0;
    right: 0;
    max-width: 500px;
    border: 1px solid #ccc;
    border-radius: 10px;
}
div.suggestiondiv div, div.suggestiondiv div {
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    text-align: left;
    font-size: 14px;
    padding: 6px 10px;
}
.card.p-4.shadow-sm {border: none;text-align: left;}
#item_typ h4 {font-size: 20px;font-weight: 600;margin-bottom: 0%;}
#item_typ p {margin-top: 0;margin-bottom: 0;font-size: 17px;color: #666;}
.items_types ul{padding-left: 0;}
.items_types ul li {list-style: none;padding: 20px;border: 2px solid #ccc;border-radius: 10px;margin-bottom: 10px;text-align: left;}
.items_types ul li:hover{border: 2px solid #226427;transition: all ease .3s;}
.mb-4 {margin-bottom: 1.5rem !important;font-size: 20px;text-align: left;font-weight: 600;}

/*.bottom_buttons{width:90%;float: left;display: flex;align-items: center;padding: 20px;margin-top: -110px;position: absolute;}*/


.bottom_buttons {
    width: 40%;
    float: left;
    display: flex;
    align-items: center;
    padding: 20px;
    margin-top: -110px;
    position: fixed;
    z-index: 99;
    bottom: 55px;
}


.bottom_buttons button {width: max-content; color: #0d6efd;text-decoration: underline;background-color: green; padding: 10px;border-radius: 50px;margin: 0 10px;color: #fff;text-decoration: none;
font-size: 17px;text-transform: capitalize;}
.item-tags button.btn.btn-light.get_i {
    font-size: 14px;
    border-radius: 5px;
    padding: 8px 20px;
    justify-content: center;
    height: 40px;
    width: auto;
    min-width: max-content;
    margin: 3px;
}
.bulky_options.container { padding: 0; margin-top: 10px;}
.bulky_options.container .toggle-container { padding: 0;}

input#items_description_image {width: 100%;}
form { width: 100%; float: left; text-align: center; display: grid;margin-top: 80px;}
.btn-success {color: #fff;background-color: #157347;border-color: #146c43;max-width: 26px;height:26px;display: inline-flex;vertical-align: middle;font-size: 10px;padding: 8px 8px;}

div#form_sub {width: 100%;display: flex; gap: 10px; margin-top: 20px;}
button#form_sub_pay {width: 100%;float: left;display: flex;}
button#form_sub_pay {float: left; display: flex text-align: center;align-items: center;}
button#form_sub_cash_on{float: left; display: flex; text-align: center;align-items: center;}
button#form_sub_register_book{float: left; display: flex; text-align: center;align-items: center;}
div#form_sub button {
    height: 40px;
    text-align: center;
    justify-content: center;
    font-size: 15px;
    max-width: 100%;
    width: 100%;
}
div#extended_price_div {
    margin-bottom: 20px;
}

.book-button{display:block; width: 100%;padding: 16px 25px;border-radius: 8px;font-size: 16px;color: #fff;background-color: #38723C;text-decoration: none;font-weight: 600;margin-top: 20px;scroll-behavior: smooth;}
.book-button:hover{background-color:green;transition:all ease .3s;color:#fff; }
.col {padding: 80px 40px;}

.fd input {
    width: 5%;
}

@media(max-width:320px){
form input {float: left;padding: 10px 5px;border: 1px solid #ccc;border-radius: 5px;outline: 0;}
.fd {margin-top: 15px;}
#package_type i{font-size: 18px;color: #226427;display: flex;width:10%;}
#package_type h1 { font-size: 23px;font-family: Futura PT,Arial,sans-serif}
.card-body.p-2.m-2 h4 {font-size: 17px;color: #6c6c6c;font-weight: 300;}
.card-body.p-2.m-2 h2 {font-size: 20px;}
section#location {padding: 15px;}
.fa, .fa-brands, .fa-regular, .fa-solid, .fab, .far, .fas {-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;display: var(--fa-display, inline-block);font-style: normal; font-variant: normal;line-height: 1;text-rendering: auto;vertical-align: middle;top: 0;position: relative;right: 4px;}
label {font-size:16px;}
h2#today {font-weight: 500;}
h2#choos_date {font-weight: 500;}
.btn-light {padding: 7px 12px;}
.btn-success {padding: 7px 12px;}
.col {padding: 10px 10px !important;}
#package_type h1 {font-size: 20px;font-family: Futura PT, Arial, sans-serif;}
.book-button{font-size: 15px;padding: 16px 5px;}

}
@media(max-width:390px) {
form input {float: left;padding: 10px 5px;border: 1px solid #ccc;border-radius: 5px;outline: 0;}
.fd {margin-top: 5px;}

#package_type i{font-size: 20px;color: #226427;display: flex;}
#package_type h1 {
    font-size: 17px !important;;
    font-family: Futura PT, Arial, sans-serif;
    margin: 0;
}
.card-body.p-2.m-2 h4 {font-size: 17px;color: #6c6c6c;font-weight: 300;}
.card-body.p-2.m-2 h2 {font-size: 20px;}
section#location {padding: 15px;}
.fa, .fa-brands, .fa-regular, .fa-solid, .fab, .far, .fas {-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;display: var(--fa-display, inline-block);font-style: normal; font-variant: normal;line-height: 1;text-rendering: auto;vertical-align: middle;top: 0;position: relative;right: 4px;}
label {font-size:16px;}
h2#today {font-weight: 500;}
h2#choos_date {font-weight: 500;}
.btn-light {padding: 7px 12px;}
.btn-success {padding: 7px 12px;}
.col {padding: 10px 10px !important;}
.book-button{font-size: 15px;padding: 16px 5px;}
}

ul.list-unstyled li {margin-bottom: 10px;}
ul.list-unstyled:before {content: "";
    position: absolute;
    height: 77%;
    width: 2px;
    left: 4px;
    right: 0;
    top: 10px;
    background: #087b45;
}
input#items_description_image {
    border: 0;
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
}
.Item_Description textarea#items_description {
    height: 100px;
}

section#items .card {
    border-radius: 0;
    border: 0px;
}
.Item_Description {
    border: 1px solid #cccccc;
    height: 100%;
    display: block;
    float: left;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}
section#exclude_items .border {
    background: rgb(248 250 252);
    border-radius: 15px !important;
}
button#next_location {
    background: #1f2937;
    border: 0;
    max-width: 300px;
    margin: 20px auto 0;
}
}
section#items .card {
    border: 0;
}
div#item_typ {
    padding: 20px;
    border: 1px solid #cccccc !important;
    text-align: left;
    border-radius: 15px;
}
.mt-3, .mb-3 {
    margin-top: 0rem!important;}
.form-label {display:none !important;}
.Step_Form {padding: 30px 0;}

.MapDiv {
    width: 100%;
    height: 100%;
}
/*div#map {
    width: 100%;
    height: 450px;
    border-radius: 20px;
    position: sticky;
    top: 130px;
    max-width: 100%;
    margin-top: 100px;
}*/

.tomorrow_time.active {
    box-shadow: unset;
}
div#map {
    width: 28%;
    height: 78%;
    border-radius: 20px;
    position: fixed;
    top: 0px;
    max-width: 100%;
    margin-top: 140px;
}


#both_loc input[type="text"], #both_loc input[type="tel"]  #both_loc textarea, .form-control {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    border-radius: 0px;
    height: 50px;
    border-right: 0;
    border-left: 0;
}
div#item_typ .container.mt {
    padding: 0;
}

/*23-02-2025*/
.card_flex {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0px 4px 0px ;
}
.card_flex h1{
    padding: 0;
    margin: 0;
    font-size: 20px;
}
.card_icon {
    font-weight: 900; 
    color: #fff;
    background: #22c55e !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 12px !important;
    justify-content: center !important;
}
.card.mt-2.package_types {
    margin-top: 14px !important;
}
.card-body.p-2.m-2.add-nwe-class {
    margin: 0 !important;
    padding: 20px 15px 10px 25px !important;
}
.d-flex.align-items-center {padding: 5px 15px 10px;}
button.btn {margin: 0;}
span.stair_count {padding-top: 10px;}
.column-coman .fa-solid.fa-info {
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 14px;
    font-size: 9px;
    border-radius: 20px;
    border: 2px solid #232324;
}
.alert.column-coman.border-0 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-family: ui-sans-serif, system-ui, sans-serif,"Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol", "Noto Color Emoji";
    font-weight: 300;
    border-radius: 12px;
}
.today_time.active {
    margin-top: 10px;
    box-shadow: none;
}
.fd input {
    width: 5%;
}
@media(min-width:1300px){
    .column-coman .fa-solid.fa-info {
        width: 18px;
        height: 16px;
        text-align: center;
        font-size: 9px;
        border-radius: 20px;
        border: 2px solid #232324;
    }
}
@media(max-width:991px){
    .alert.column-coman.border-0{
        display: block;
    }
    .today_time input {
        width: 16px;
        height: 16px;
    }
}

@media(max-width:770px){
	.bottom_buttons{
		bottom: 200px !important;
	}
}

@media(max-width:757px){
    section#signup {
        width: 80% !important;
        float: left !important;
        margin: 0% 10% !important;
    }
    .column-coman .fa-solid.fa-info {
        display: none;
    }
    div#map {
        width: 100% !important;
        height: 450px;
        border-radius: 20px;
        position: relative; !important;
        top: 30px;
        max-width: 100%;
        margin-top: 10px;
    }
    .bottom_buttons {
        width: 90%;
        float: left;
        display: flex;
        align-items: center;
        padding: 20px;
        margin-top: -110px;
        position: relative;
        z-index: 99;
        bottom: 20px;
    }

    .fd input {
        width: 5%;
    }
}

i.fa-calendar, i.fa-location, i.fa-list {color: #22c55e; margin-right: 5px;}

@media only screen and (min-width:100px) and (max-width:800px) {
    button.navbar-toggler[aria-expanded="false"] + .navigation {box-shadow: 0 0 0; background: none;}
    .navigation {background: #fff; width: 100%; left: 0; position: absolute; right: 0;top: 70px;  padding: 20px; border-radius: 10px;
        box-shadow: 0 0 20px rgba(0,0,0,0.2);}
    .navbar-toggler:focus { box-shadow: 0 0 0; background: none !important;}

    #map {height: 300px !important; margin: 20px 0 20px 0 !important; position: relative !important; top: 0 !important;}

    section#location .container {padding: 0;}
    section#items .container {padding: 0 15px;}
    input.form-control.loc_in {padding-left: 23px;}
    select#select_loc {width: 100%;  margin: 15px 0;}
    div#item_typ {padding: 20px !important;}
    form#form_submit {margin-top: 0;}
    button#next_location {max-width: 200px;}
    .icon-grid { grid-template-columns: repeat(2, 1fr); gap: 10px;}
    .Step_Form .col-md-7 {padding-right: 0;}
    section.Step_Form .container {padding: 0 15px;}
    div#form_sub {flex-direction: column;}

    div#labour_and_travel button {margin: 0 5px;}
    div#labour_and_travel button { margin: 0 5px;}
    .navbar-brand img {width: 60%; float: left;}
    nav.navbar.navbar-expand-lg.navbar-light.bg-light.backdrop-blur {height: 70px;}
    .Step_Form {padding: 70px 0;}
}