/*  ****************************** Slick Slider End ******************************  */ 
 /* Section styling */
.vehicle-services-section {
  background-color: #f9f9f9;
}

/* Slick Slider core styling (same for all sliders) */
.slick-slider {
  position: relative;
  padding: 10px 0;
}
.slick-slide {
  margin: 0 12px;
}
.slick-slide img {
  width: 100%;
  border-radius: 8px;
}

/* Brand card */
.brand-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    padding: 15px 10px;
    transition: all 0.3s ease;
    border: 1.4px solid #ff4b00;
}
 
.brand-card:hover {
   box-shadow: 0 8px 20px rgba(0,0,0,0.15);
   border: 1.4px solid #ff4b00;
}

/* Image box */
.brand-img-box {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-img-box img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

/* Brand title */
.brand-title {
  color: #17313b;
  font-weight: 600;
  font-size: 15px;
  margin-top: 8px;
}

/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #ddd;
  color: #ff4b00;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 18px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 5;
}
.slick-prev:hover,
.slick-next:hover {
  background: #ff4b00;
  color: #fff;
  border-color: #ff4b00;
}
.slick-prev { left: -20px; }
.slick-next { right: -20px; }

/* Responsive */
@media (max-width: 768px) {
  .brand-img-box { height: 60px; }
  .brand-card { padding: 10px 5px; }
  .slick-slide { margin: 0 8px; }
}



/*  ****************************** Slick Slider End ******************************  */ 


img.header-logo {
    height: 50px;
}

.list-group-item-action {
    cursor: pointer;
}

.simple-button {
    background: linear-gradient(45deg, #ff4b00, #dc3545);
    border: 0;
    padding: 10px 25px;
    font-size: 15px;
    font-weight: 700;
    color: white;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x, 0.5rem);
    color: var(--bs-breadcrumb-divider-color, #6c757d);
    content: var(--bs-breadcrumb-divider, "/"); /* Or use ">" */
}

.text-primary {
    color: #094a99 !important;
}

.btn-warning {
    background: linear-gradient(269deg, #ffc107, #ffc107) !important;
}

.btn-danger {
    background: linear-gradient(269deg, #c1081a, #f44336, #9d1006);
    color: #fff;
    border: none;
}

.btn-second,
.btn-second:hover {
    background: linear-gradient(269deg, #ff4b00, #dc3545);
    color: #fff;
    border: none;
}


.btn-primary {
     background:  #ff4b00 !important;
    color: #fff !important;
    border: none;
}

.btn-primary:hover {
    background: #ff4b00 !important;
    color:  #fff !important;
} 


.btn-secondary,
.btn-secondary:hover {
    background: white;
    color: black !important;
    border: 0px;
    box-shadow: 0px 0px 3px 1px black;
}

.btn-info,
.btn-info:hover {
    background: #17313b;
    color: white !important;
    border: 0px;
    box-shadow: 0px 0px 3px 1px #17313b;
}

.btn-pro {
    background: linear-gradient(269deg, #ff4b00, #4169e1, #ff4b00);
    color: #fff;
    border: none;
}

.btn-pro:hover {
    background: linear-gradient(269deg, #1a3db4, #5a7be5, #1a3db4);
    color: #fff;
}

.btn-success {
    background: linear-gradient(358deg, #004004, #0ed416);
    border: 0;
}

/* Section title */
.section-title {
    font-size: 2rem;
    color: #333;
}

/* Card layout for services */
.service-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 1px 1px 3px 3px rgb(75 121 144);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    color: #333;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
    color: #000;
}

.service-title {
    font-size: 1rem;
    font-weight: 600;
}

/* Responsive tweaks */
@media (max-width: 576px) {
    .service-title {
        font-size: 0.95rem;
    }
}

  
.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
}

/* Grid layout */
.city-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    list-style: none;
    padding: 0;
    margin: 0 auto; 
}

/* City cards */
.city-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 4px 2px #000c11; 
    text-align: center;
    padding: 15px 10px;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.city-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* City image */
.city-image {
    width: 60px;
    height: 60px;
    object-fit: contain;
    margin-bottom: 10px;
}

/* City name */
.city-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* Responsive tweaks */
@media (max-width: 576px) {
    .city-card {
        width: 42%;
    }

    .city-name {
        font-size: 14px;
    }

    .city-image {
        width: 50px;
        height: 50px;
    }
}

 
.section {
    padding: 60px 0;
}
.section-title {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
}
.card-tour img {
    height: 180px;
    object-fit: cover;
}

.toggle-btn-group .btn {
    width: 140px;
    font-weight: 500;
}
.role-user {
    background-color: #e7f1ff; /* soft blue */
}
.role-driver {
    background-color: #fffbe6; /* soft yellow */
}



 .section-1 { background: linear-gradient(2deg, #f8bbd0, #ffe082); }
.section-2 { background: linear-gradient(2deg, #b3e5fc, #e0f7fa); }
.section-3 { background: linear-gradient(2deg, #c8e6c9, #dcedc8); }
.section-4 { background: linear-gradient(2deg, #e1bee7, #bbdefb); }
.section-5 { background: linear-gradient(2deg, #ffe0b2, #fff9c4); }
.section-6 { background: linear-gradient(2deg, #f5f5f5, #d0f0fd); }
.section-7 { background: linear-gradient(2deg, #d0f0fd, #e0ffff); }
.section-8 { background: linear-gradient(2deg, #fcdada, #fff0f5); }
.section-9 { background: linear-gradient(2deg, #d9fdd3, #f0fff0); }
.section-10 { background: linear-gradient(2deg, #fff9e6, #fdf5e6); }
.section-11 { background: linear-gradient(2deg, #e6ccff, #f3e5f5); }
.section-12 { background: linear-gradient(2deg, #ffd1cc, #fff2e6); }
.section-13 { background: linear-gradient(2deg, #f9f9f9, #e1f5fe); }
.section-14 { background: linear-gradient(2deg, #fff0f5, #ffe5b4); }
.section-15 {
    background: linear-gradient(183deg, #ffbcbc, #7050cdcf);
}
.section-16 { background: linear-gradient(2deg, #fcdada, #d0f0fd); }

  
.service-card {
    transition: all 0.3s ease;
}
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.12);
}
.service-icon {
    width: 100px;
    height: 70px;
    object-fit: contain;
    margin-bottom: 10px;
}
@media (max-width: 768px) {
    .service-icon {
        width: 50px;
        height: 50px;
    }
}
@media (max-width: 576px) {
    .service-icon {
        width: 40px;
        height: 40px;
    }
}
.section-title {
    font-weight: 700;
    color: #1a1a1a;
}




.bike-service-header h1 {
    font-weight: 700;
    line-height: 1.2;
}

.bike-service-header p {
    line-height: 1.6;
}

.bike-service-header .btn-primary {
    background: linear-gradient(90deg, #ff5722, #ff9800);
    border: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.bike-service-header .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .bike-service-header h1 {
        font-size: 2.3rem;
    }
    .bike-service-header img {
        max-height: 350px;
    }
}

@media (max-width: 768px) {
    .bike-service-header h1 {
        font-size: 2rem;
    }
    .bike-service-header img {
        max-height: 300px;
    }
}

@media (max-width: 576px) {
    .bike-service-header h1 {
        font-size: 1.75rem;
    }
    .bike-service-header p {
        font-size: 0.95rem;
    }
    .bike-service-header img {
        max-height: 250px;
    }
}

/* Optional subtle hover effect on image */
.bike-service-header img:hover {
    transform: scale(1.02);
    transition: transform 0.3s ease;
}





/* Styling remains the same to mimic the layout, only colors were updated */
/* Additional custom style to refine the look */
.img-container {
    /* Adjust padding to control the whitespace around the image on the right */
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* A bit of custom media query to make the image area look more like the reference on large screens */
@media (min-width: 992px) {
    .col-lg-6.bg-white {
        /* Pushes the content to the left edge of the white section on large screens */
        padding-left: 0 !important;
    }
    .img-container {
        /* Custom adjustment to position the image block */
        transform: translateX(-10%); /* This moves the image block slightly left, simulating the overlap */
    }
}


/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */


/* Scoped CSS only for the staggered-collage section */
.staggered-collage {
    background-color: #F0F0F0;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.staggered-collage .collage-item {
    position: relative; /* ensures z-index works */
}

/* Staggered effect */
.staggered-collage .item1 {
    z-index: 1;
    margin-top: 0;
}
.staggered-collage .item2 {
    z-index: 2;
    margin-top: 100px;
}
.staggered-collage .item3 {
    z-index: 1;
    margin-top: -50px;
}
.staggered-collage .item4 {
    z-index: 2;
    margin-top: 50px;
}

/* Responsive adjustment for larger screens */
@media (min-width: 768px) {
    .staggered-collage .item2 {
        margin-top: 100px;
    }
    .staggered-collage .item3 {
        margin-top: -50px;
    }
    .staggered-collage .item4 {
        margin-top: 50px;
    }
}

 


/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/* Custom CSS for the large green circle and its animation */
.large-green-circle {
    position: absolute;
    width: 450px; /* Size of the circle */
    height: 450px; /* Size of the circle */
    background-color: #228d26; /* Green color */
    border-radius: 50%; /* Makes it a circle */
    z-index: 0; /* Ensures it's behind the card */
    /* Center it within its parent column */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: blur(1px); /* Soften the edges slightly */
    animation: pulse-circle 4s infinite alternate ease-in-out; /* Apply animation */
}

/* Keyframes for the pulse animation */
@keyframes pulse-circle {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.05); /* Slightly larger */
        opacity: 1;
    }
}

/* Adjustments for icons to match colors */
.fa-bus-alt { color: #ff4b00; } /* Purple */
.fa-map-marker-alt:nth-of-type(1) { color: #4CAF50; } /* Green for first marker */
.fa-map-marker-alt:nth-of-type(2) { color: #ff4b00; } /* Purple for second marker */



/*//////////////////////////////////////////////////////////////////////////////////////////////////////////////////


/* Custom CSS for the abstract shapes and precise positioning */
.abstract-shape-purple {
    position: absolute;
    width: 300px; /* Adjust size as needed */
    height: 250px; /* Adjust size as needed */
    background-color: #ff4b00; /* Purple color from the image */
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* Organic, blob-like shape */
    left: 20%; /* Position relative to its parent column */
    top: -50px; /* Position relative to its parent column */
    transform: rotate(-15deg); /* Rotate for more dynamism */
    z-index: 0; /* Ensures it's behind the image card */
    filter: blur(0px); /* Soften the edges */
    opacity: 1; /* Make it slightly transparent */
}

/* Adjust shape position for larger screens if necessary */
@media (min-width: 992px) {
    .abstract-shape-purple {
        left: 0%;
        top: -80px;
        width: 350px;
        height: 300px;
        transform: rotate(-15deg);
    }
    .col-lg-6.position-relative {
        padding-bottom: 70px; /* Give space for the "25 years" box */
    }
}

/* Specific styling for the '25 Years of Experience' box to match the design */
.position-absolute.bottom-0 {
    left: 50%;
    transform: translateX(-50%) translateY(50%); /* Centers and moves it down */
}



/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


 /* Scoped CSS for Car & Bike Service Section only */
.car-service-section {
    background-color: #ffffff;
    color: white;
    position: relative;
    overflow: hidden;
}

/* Card within this section */
.car-service-section .car-service-card {
    background-color: #ff4b00 !important;
}

/* Text overlay block on image */
.car-service-section .text-block-overlay {
    background-color: #ff4b00 !important;
    position: relative;
    transform: translateY(0);
    margin-right: 0;
}

/* Overlay positioning for large screens */
@media (min-width: 992px) {
    .car-service-section .text-block-overlay {
        position: absolute;
        bottom: -50px;
        left: 0;
        z-index: 2;
        transform: translateX(-30%);
    }
}

/* Hand Tools Image styling */
.car-service-section .hand-tools-img {
    width: 100%;
    max-width: 400px;
    height: 250px;
    object-fit: cover;
    z-index: 1;
}

/* Abstract Yellow Tall Shape */
.car-service-section .abstract-yellow-tall {
    position: absolute;
    background-color: #FFC107;
    width: 120px;
    height: 250px;
    top: 180px;
    right: -20px;
    z-index: 0;
    border-radius: 8px;
    transform: skewY(-15deg);
}

/* Abstract Yellow Small Shape */
.car-service-section .abstract-yellow-small {
    position: absolute;
    background-color: #FFC107;
    width: 80px;
    height: 100px;
    bottom: -50px;
    left: 45%;
    z-index: 0;
    border-radius: 8px;
    transform: rotate(25deg);
    opacity: 0.7;
}

/* Alignment adjustments for the right column content */
.car-service-section .car-service-content .d-flex.align-items-end {
    justify-content: flex-start; 
}

@media (max-width: 768px) {
    .main {
        padding-top: 60px !important;
        background-color: #ffffff;
    }
   .mobile-sidebar {
        position: fixed;
        top: 0;
        left: -300px;
        width: 260px;
        height: 100%;
        background-color: #fff;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        z-index: 9999999999;
        transition: left 0.3s ease-in-out;
    } 
    .mobile-sidebar.open {
        left: 0;
    } 
    #web-main-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background-color: white;
    }

    img.header-logo {
        height: 20px;
        object-fit: contain;
    }
    .detect-location {
        font-size: 10px;
        padding: 7px 5px 7px 5px !important;
        margin: 0px !important;
    }

}

 
/* Wizard and list styles */
.step-indicator {opacity:0.5;text-align:center;cursor:pointer;transition:0.3s;}
.step-indicator.active{opacity:1;}
.step-indicator .circle{width:40px;height:40px;background:#ff4b00;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;font-weight:bold;}
.hover-card{transition:0.3s;}
.hover-card:hover{transform:translateY(-5px);}
.list-group{max-height:200px;overflow-y:auto;margin-top:0.5rem;cursor:pointer;}
.list-group-item:hover{background-color:#e9ecef;}

.list-group-item.selected{background-color:#ff4b00;color:#fff;}
 
.selected .text-primary{color:#ffffff !important;} 
.selected .text-muted{color:#ffffff !important;}
.list-group-item img{width:25px;height:25px;margin-right:10px;vertical-align:middle;}
.step-content{display:none;opacity:0;transition:opacity 0.3s;}
.step-content.active{display:block;opacity:1;}
.summary-box{background-color:#e9ecef;padding:1rem;border-radius:0.5rem;margin-top:1.5rem;}
.progress{height:10px;border-radius:5px;overflow:hidden;}
.progress-bar{background-color:#f58020;transition:width 0.3s;}
.modal.show{display:block;background:rgba(0,0,0,0.5);z-index:9999;}
.modal-dialog{max-width:100%;animation:slide-up 0.3s ease-out forwards;height:100vh;margin:0;}
.modal-content{height:100%;border-radius:0;}
body.modal-open{overflow:hidden;} /* Prevent background scroll */
.modal-body{overflow-y:auto;height:calc(100% - 120px);} /* Adjust for header + footer */
@keyframes slide-up{from{transform:translateY(100px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.btn-disabled{opacity:0.6;pointer-events:none;}
.search-input{margin-bottom:0.5rem;}
.no-records {text-align:center;color:#888;padding:10px 0;display:none;font-style:italic;}
.brand-card, .service-card{cursor:pointer;}
  
 
/* Wizard and list styles */