/* Base colors */
:root {
  --brand: #ff6c36;
  --brand-600: #c92b36;
  --text-dark: #0a1f44;
    --text-link:#0a1f44;
    --text-muted:#6d7579;
  --bg: #F8F9FA;
  --card: #000;
    --header-height: 80px;
    --subtitle-text: 17px;
}
body {
    font-family: "Poppins", sans-serif;
}
body.no-scroll {
  overflow: hidden;
}

a{
  text-decoration: none;

}
h4{
  color: var(--text-dark);
}
.btn{
  font-size: 15.5px;
    font-weight: 600;
    border-radius: 1.25rem;
    padding: .6rem 1rem;
    box-shadow: 0 6px 18px rgba(230, 57, 70, 0.12);
}

/* Header */
.site-header {
  background: var(--bg);
  box-shadow: 0 2px 8px rgba(33,37,41,0.06);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.site-header .navbar {
  padding: 1rem 1rem;
}
.navs-logo img {
  width: 120px;
}

/* Nav links */
.nav-item .nav-link {
  color: var(--text-link);
  padding: .5rem .75rem;
}
.main-nav .nav-link:hover {
  color: var(--text-dark);
}

/* Buttons */
.btn-quote {
  background: var(--brand);
  border: none;
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  border-radius: 1.25rem;
  padding: .6rem 1rem;
  box-shadow: 0 6px 18px rgba(230,57,70,0.12);
}
.btn-quote:hover {
  background: var(--brand-600);
}

/* Call icon animation */
.login-link{
    color: var(--text-link);
    display: inline-block;
    text-decoration: none;
    padding: .5rem .75rem;
}
.call-icon {
  display: inline-block;
  text-decoration: none;
  transform-origin: center center;
  animation: vibrate-animation 0.5s ease-in-out infinite;
}
@keyframes vibrate-animation {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}
.call-icon img{
      width: 38px;

}
.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.6);
   padding: .25rem .35rem;
}
.navbar-toggler:focus{
 outline: none;
 box-shadow: none;
}
.offcanvas{
    background-color: #000;
}
.offcanvas .nav-link{
    color: #fff ;
}
.offcanvas-header {
    border-bottom: 1px solid;
}
.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Hero Section */
.hero {
  background: linear-gradient(to right, #0b0c10 0%, #1f1f1f 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--header-height));
  display: flex;
  align-items: center; 
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../Images/hero-bg.jpg") no-repeat center center/cover;
  opacity: 0.05;
}

.hero-text, .hero-image{
  z-index: 1;
}

.hero-text .subheading {
  color: var(--brand);
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.hero-text .main-heading {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hero-text .support-heading {
  font-size: var(--subtitle-text);
  font-weight: 400;
  color: #ddd;
  margin-bottom: 1.5rem;
}

.zip-form .zip-input {
  flex: 1;
  border-radius: 2rem;
  padding: .65rem 1rem;
  border: 1px solid #444;
  background: #222;
  color: #fff;
}

.zip-form .zip-input::placeholder {
  color: #aaa;
}




.hero-image{
    height: 500px;
}
.hero-image img {
  max-width: 95%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  float: inline-end;
}

/* The three points */
.hero-points {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 1rem;
  color: #555;
}

.hero-points span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-points span::before {
  content: "✔"; /* checkmark */
  color: var(--brand);
  font-weight: bold;
}
.btn-next{
  background: var(--brand);
  border: none;
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  border-radius: 1.25rem;
  padding: .6rem 1.5rem;
  box-shadow: 0 6px 18px rgba(230,57,70,0.12);
}
/* How It Works Section */
/* Section Headings */
.section-title {
  font-weight: 700;
  font-size: 2rem;
  color: var(--text-dark);
}
.section-subtitle {
  font-size: var(--subtitle-text);
  color: var(--text-muted);
}


/* Timeline Line */
.timeline-line {
  position: absolute;
  top: 40px;
  left: 0%;
  right: 0%;
  height: 4px;
  background: var(--brand);
  z-index: 0;
}

/* Step Item */
.step-item {
  position: relative;
  z-index: 1;
  padding: 0 1rem;
}

/* Step Icon */
.step-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(230,57,70,0.2);
  position: relative;
}
.step-icon i {
  font-size: 1.8rem;
}

/* Step Title */
.step-item h5 {
  margin: 1.2rem 0;
  color: var(--text-dark);
  font-weight: 600;
}

.step-item p{
    color: var(--text-muted);
    font-size: 1rem;
}


/* Service Cards */
.services{
    background-color: #f9f9f9;
}
.services .service-item {
  background: #fff;
  border: 1px solid #eee;
  padding: 12px 16px;
  border-radius: 0.75rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.service-link{
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.3s ease;
}
.service-item:hover .service-link{
  color: #fff;
}
.services .service-item:hover{
  background: var(--brand);
  color: #fff;
}
.services .icon-box {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--brand);
  border-radius: 50%;
  color: var(--brand);
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.services .service-item:hover .icon-box {
  background: #fff;
  color: var(--brand);
}

.services-sbtitle{
  font-size: var(--subtitle-text);
}

/* Reviews Section */
.reviews {
  background: #fff; /* keep clean, or use light gray if you prefer separation */
}

.review-card {
  background: #fff;
  border-left: 4px solid var(--brand); /* orange accent */
  border-radius: 0.5rem;
  padding: 1.5rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
}

.review-card:hover {
  transform: translateY(-5px);
}

.review-text {
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.client-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-dark);
  margin-bottom: 0.25rem;
}

.review-meta {
  font-size: 0.9rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-meta .mechanic-name {
  font-weight: 500;
  color: var(--brand);
}

.review-meta .stars {
  color: #f5c518; /* golden stars */
  font-size: 0.95rem;
}

/* Section background */
/* Section Background Left */
.video-section {
  position: relative;
  overflow: visible;
  min-height: 70vh; /* keeps section tall */
  display: flex;
  align-items: center;
  background: url('../Images/hero-bg.jpg') no-repeat center center/cover; 
  margin-top: 2rem;
}

.video-section .container-fluid {
  background: none; /* clear it here */
}


/* Floating Card (right side) */
.video-section .row {
  align-items: stretch; /* both columns stretch full height */
}
.right-video-lg {
  position: relative;
  z-index: 2;
  margin-top: -50px;   /* pushes out above */
  margin-bottom: -50px;/* pushes out below */
}
.video-text-floating {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  margin-right: 6rem;
  border-radius: 8px;
  padding: 2rem;
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.features-list li{
  font-size: var(--subtitle-text);
  color: var(--text-muted);
}





/* Play Button Center */
.video-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}
.video-play-btn:hover {
  background: var(--brand-600);
  transform: scale(1.1);
}

/* Close Btn Floated Visually Outside */
.btn-close-float {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%); /* pushes outside */
  background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='black' stroke-linecap='round' stroke-width='2' d='M2 2l12 12M14 2L2 14'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  opacity: 1;
  z-index: 2002;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
.btn-close-float:hover {
  background-color: var(--brand);
  background: #ff6c36 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-width='2' d='M2 2l12 12M14 2L2 14'/%3e%3c/svg%3e") center/1em auto no-repeat;
}
.video-play-btn:hover{
  cursor: pointer;
}
/* Brands Section */
.brands {
  background:#f9f9f9;
  position: relative;
  z-index: 1;
}

.brand-card {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 25px 15px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.brand-card:hover {
  transform: translateY(-8px);
  border-color: var(--brand);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.brand-logo {
  width: 70px;
  height: 70px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.3s ease;
}

.brand-card:hover .brand-logo {
  background: var(--brand);
}

.brand-logo img {
  max-height: 38px;
  object-fit: contain;
}

.brand-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-dark);
}
/*info */
/* Help Section */


/* Help Section (full brand color background) */
.contact-info {
  background: var(--brand); /* brand background */
  color: #fff;
}

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

.contact-info .section-subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
}

.contact-info .contact-line {
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
}

.contact-info .btn, .join-btn {
    font-size: 15.5px;
    font-weight: 600;
    border-radius: 1.25rem;
    padding: .6rem 1rem;
    box-shadow: 0 6px 18px rgba(230, 57, 70, 0.12);
  transition: all 0.3s ease;
}
.join-btn:hover{
  color: var(--brand);
}

.contact-info .btn-light:hover {
  background: #f1f1f1;
}

.contact-info .btn-dark {
  background: var(--text-dark);
  border: none;
}

.contact-info .btn-dark:hover {
  background: var(--text-dark);
}
.mechanic-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  border-left: 4px solid var(--brand); /* subtle brand accent */
  transition: all 0.3s ease;
}
.mechanic-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.mech-photo img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--brand);
}

.btn-outline-brand {
  border: 2px solid var(--brand);
  color: var(--brand);
  font-weight: 500;
  transition: all 0.3s ease;
  border-radius: 1.25rem;
}
.btn-outline-brand:hover {
  background: var(--brand);
  color: #fff;
}
.d-flex.align-items-center.mb-2 {
  background: #f9f9f9;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
}
.h-pool-highlight{
  background: #f9f9f9;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-flex;
}
.text-warning {
  font-size: 1.1rem;
}
/*Faqs*/
.faq-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: all 0.3s ease;
}
.faq-card:hover {
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}
.faq-question h6 {
  font-weight: 600;
  color: #333;
}
.faq-question i {
  transition: transform 0.3s ease;
  color: var(--brand);
}
.collapse.show + .faq-question i,
.faq-question[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/*About us */

.about-highlight {
  padding: 15px 20px;
  border-left: 4px solid var(--brand);
  background: #f8f9fa;
  border-radius: 6px;
  display: inline-block;
}

.text-brand {
  color: var(--brand);
}
/*Mission sec*/
.value-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}
.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}
.icon-brand {
  font-size: 2rem;
  color: var(--brand);
}
/*Why choose us */
.feature-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.feature-card .icon {
  color: var(--brand) !important; /* Bootstrap primary or your brand color */
}

/*Team*/
/* Team Section */
.team-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  height: 100%;
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}
.team-photo {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--brand);
}
/*Blog*/
.blog-hero {
  background: var(--brand-50); /* subtle brand color background */
  padding: 100px 0;
}

.blog-hero .section-title {
  color: var(--text-dark);
}

.blog-hero .section-subtitle {
  max-width: 700px;
  margin: 0 auto;
}
/*Blog grid*/
.blog-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: all 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.15);
}

.blog-card .blog-title a {
  color: var(--text-dark);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-card .blog-title a:hover {
  color: var(--brand);
}

/*pagination*/
/* Blog Pagination Custom Styles */
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--brand);
    border-color: var(--brand)
}

.page-link {
    position: relative;
    display: block;
    color: var(--text-dark);
}
.blog-pagination .page-link:hover {
  background-color: var(--brand); /* your brand color */
  color: #fff;
  border-color: var(--brand);
}
/*Blog Detail page */
/* Blog Hero */
.blog-hero {
  background: #f9f9f9; /* subtle clean bg */
}

.bg-brand {
  background-color: var(--brand-color); /* from your root brand color */
}

.blog-hero .badge {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  letter-spacing: 0.5px;
}
.blog-article h3 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--brand-color);
}

.blog-article p {
  line-height: 1.8;
  color: #555;
}

.blog-article blockquote {
  border-radius: 8px;
  color: #333;
}
.blog-featured img {
  width: 100%;
  aspect-ratio: 16/9;   /* keeps it proportional */
  object-fit: cover;    /* crops nicely */
  border-radius: 12px;
}

.related-posts .section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-dark);
}

.blog-card img {
  height: 200px;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  width: 100%;
}

.blog-card {
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

.text-brand {
  color: var(--brand);
  text-decoration: none;
}

.text-brand:hover {
  color: var(--text-dark);
}
/*Join the team*/
.careers-hero {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); /* light clean bg */
  padding: 100px 0;
  border-bottom: 1px solid #00000015;
}

.careers-hero .section-title {
  color: var(--text-dark); /* keep consistent */
}

.careers-hero .section-subtitle {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  color: #6c757d;
}

.job-filters {
  background: #f9fafb;
  border-bottom: 1px solid #eee;
}

.filter-bar .form-control,
.filter-bar .form-select {
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}

.filter-bar .form-control:focus,
.filter-bar .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.1);
}

/* Filter toggle button */
.btn-light.border-0 {
  background: transparent;
  font-weight: 500;
  color: var(--brand-color);
}

.btn-light.border-0:hover {
  color: #004080;
}

/* Filter fields */
.job-filter-wrapper input,
.job-filter-wrapper select {
  border-radius: 8px;
}

.job-filter-wrapper .form-control, .job-filter-wrapper  .form-select {

    padding: .55rem .75rem;
  }
.job-item {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

.job-item:hover {
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}

.job-item h5 {
  font-weight: 600;
}

.job-location {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--brand);
}

.job-cta {
  background: var(--brand);
  border-radius: 12px;
}

.job-cta h4 {
  font-weight: 600;
}
/*Job detail*/
.job-detail-section .job-content h5 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.apply-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
  position: sticky;
  top: 90px; /* stays visible while scrolling */
}

.btn-brand {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  border-radius: 1.25rem;
  transition: all 0.3s ease;
}
.btn-brand:hover {
  background: #e85d20; /* slightly darker */
  color: #fff;
}

.job-detail-section .job-content h5 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.apply-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
  position: sticky;
  top: 90px; /* stays visible while scrolling */
}



/* Desktop Back Link */
.back-link {
  color: var(--text-dark);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s;
}
.back-link:hover {
  color: var(--brand);
}

/* Mobile Floating Back Button */
.job-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #ddd;
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  z-index: 1050;
}
.job-action-bar .btn {
  font-size: 0.9rem;
  border-radius: 8px;
}

/*Thank you page*/
/* Thank You Page Styling */
.thank-you-section {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thank-icon i {
  font-size: 4rem;
  color: var(--brand, #007bff);
  animation: popIn 0.6s ease-out;
}

@keyframes popIn {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.thank-you-section h2 {
  font-weight: 600;
  color: #222;
}

.thank-you-section p {
  font-size: 1.1rem;
  color: #555;
  max-width: 600px;
  margin: 0 auto;
}

.btn-outline-dark {
  border-radius: 50px;
}
.home-btn{
  color: var(--text-dark);
  font-weight: 600;
  border-color: var(--text-dark);
}
.home-btn:hover{
  color: var(--brand);
  border-color: var(--brand);
  background-color: #fff;
}
/*Services page */
/* Sidebar */
.service-sidebar {
  position: sticky;
  top: 100px; /* Adjust depending on navbar height */
  border-left: 4px solid var(--brand);
}

.service-sidebar h5 {
  font-weight: 600;
  margin-bottom: 1rem;
}

.service-sidebar ul li {
  margin-bottom: 10px;
}

.service-sidebar ul li a {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  transition: all 0.3s ease;
}

.service-sidebar ul li a:hover {
  color: var(--brand);
  padding-left: 5px;
}

/* Service Boxes */
.service-box {
  display: block;
  transition: all 0.3s ease;
  border: 1px solid #eee;
  border-left: 4px solid var(--brand);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  color: var(--text-dark);
}



.service-box:hover {
  color: var(--brand);
  transform: translateY(-5px);
  border-color: var(--brand);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-right: 1px solid var(--brand); /* darker shade of brand */
  border-top: 1px solid var(--brand); /* darker shade of brand */
  border-bottom: 1px solid var(--brand); /* darker shade of brand */
}

.service-box h5 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.service-box p {
  font-size: 0.9rem;
  color: #666;
}
/*Mobile responsive Category filter */
/* Sidebar overlay (hidden by default on mobile) */
.service-sidebar-wrapper {
  position: fixed;
  top: 0;
  left: -100%;
  width: 260px;
  height: 100%;
  background: #fff;
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
  transition: left 0.3s ease-in-out;
  z-index: 1050;
}

.service-sidebar-wrapper.active {
  left: 0;
}




.close-btn {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  float: right;
  cursor: pointer;
}
/* Backdrop styling */
.sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  z-index: 1040;
}

.sidebar-backdrop.active {
  opacity: 1;
  visibility: visible;
}
.btn-mb-category{
 float: right;
  border-radius: 1.25rem;
  background-color: #fff;
  color: var(--text-dark);
  box-shadow: 0 6px 18px rgba(230, 57, 70, 0.12);
}
 .filter-btn-service {
  width: 100%;
    text-align: end;
}


.category-toggle {
   position: sticky;
  position: -webkit-sticky;
  top: 10px; /* required */
  right: 10px;
  z-index: 1100;
  margin-top: -36px;
}
.d-ct{
  display: none;
}
.btn-mb-category:hover .d-ct{
  display: block;
}

/*Service detail page*/
.service-hero {
  background: #f8f9fa; /* soft light bg */
}

.service-hero .section-title {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--text-dark);
}

.service-hero .section-subtitle {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
}

.service-overview h2 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-dark);
}

.service-overview p {
  font-size: 1.05rem;
  line-height: 1.6;
}



.service-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 20px;
   background: #f8f9fb;
}



.benefit-item {
  display: flex;
  align-items: center;
  background: #fff;
  border-left: 4px solid var(--brand);
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.benefit-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.benefit-icon {
  font-size: 1.2rem;
  color: var(--brand);
  margin-right: 12px;
  flex-shrink: 0;
}

.benefit-item p {
  margin: 0;
  font-size: 1rem;
  color: var(--text-dark);
  font-weight: 500;
}

/*What’s Included*/
.service-included {
  background: #f8f9fa; /* soft contrast */
}

.service-included .section-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-dark);
  position: relative;
  margin-bottom: 1.5rem;
}

.service-included .section-title::after {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: var(--brand);
  margin-top: 8px;
  border-radius: 2px;
}

.service-included p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #555;
}

.service-included img {
  max-width: 85%;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.service-included img:hover {
  transform: scale(1.03);
}



.benefit-box {
  border-left: 4px solid var(--brand);
  background: #fff;
  border-radius: 12px;
  padding: 28px 22px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

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

.benefit-box h5 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 10px;
}

.benefit-box p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #6c757d;
}

.service-detail-benefits .section-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: var(--brand);
    margin-top: 8px;
    border-radius: 2px;
    margin-right: auto;
    margin-left: auto;
}
/*price card*/
.pricing-card {
  background: #fff;
  border: 1px solid #eee;
  border-top: 4px solid var(--brand);
  transition: all 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.pricing-card .price {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--brand);
}
.service-cta {
  background: #f8f9fa;
}

.service-cta h3 {
  font-weight: 700;
  color: var(--text-dark);
}

.service-cta .btn-brand {
  transition: all 0.3s ease;
}

.service-cta .btn-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
/*related service section*/


.related-services .service-box {
  border-left: 4px solid var(--brand);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-services .service-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.related-services .btn-outline-brand {
  border-color: var(--brand);
  color: var(--brand);
}

.related-services .btn-outline-brand:hover {
  background: var(--brand);
  color: #fff;
}

/*Contact us*/
.contact-hero {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-bottom: 1px solid #00000012;
}

.contact-hero h1 {
  color: var(--text-dark);
}

.contact-hero p {
  max-width: 650px;
  margin: 0 auto;
  font-size: 1.1rem;
}
.contact-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.contact-card .icon {
  font-size: 2rem;
  color: var(--brand);
}
.cw-bold{
  color: var(--text-dark);
  font-weight: 600;
}

.contact-form-wrapper {
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  transition: box-shadow 0.3s ease;
}

.contact-form-wrapper:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.contact-form-wrapper .form-control {
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 0.75rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form-wrapper .form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.1);
}

.contact-form-wrapper label {
  font-weight: 500;
  margin-bottom: 6px;
  color: #333;
}

.contact-form-section .section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark);
}

.text-brand {
  color: var(--brand);
}

.contact-form-section{
    background: #f8f9fa;
    overflow: hidden;
}
.contact-map-section .section-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark);
}

.map-wrapper {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #eee;
  transition: box-shadow 0.3s ease;
}

.map-wrapper:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
/*Mechanic profile page*/
.m-profile-card {
  border-radius: 10px;
  background: #fff;
}

.m-profile-card .form-label {
  font-weight: 600;
  color: var(--text-dark);
}

.m-profile-card input {
  border-radius: 1.25rem;
}

.m-profile-card h6 {
  color: var(--text-dark);
  margin-top: 10px;
}
.m-profile-card input[type="file"] {
  padding: 6px;
}

.m-profile-card span {
  color: var(--text-muted);
}






/*FOoter*/
.footer-logo, .footer .fw-bold{
  color: #fff;
}

hr.border-light-subtle {
  border-color: rgba(255,255,255,0.1);
}



.footer {
  background: linear-gradient(to right, #111, #1a1a1a);
  background: var(--text-dark);
  color: #ddd;
  font-size: 0.95rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-logo img {
  max-width: 150px;
}

.footer-title {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.footer-links li {
  margin-bottom: 0.5rem;
}

.footer-links a {
  color: #bbb;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.footer-social a {
  color: #fff;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.footer-social a:hover {
  color: var(--brand);
}

.footer-license {
  color: #aaa;
  font-size: 0.85rem;
}

.footer-link {
  color: #bbb;
  text-decoration: none;
  transition: color 0.3s ease;
}
.footer-link:hover {
  color: #ff6c36; /* brand accent */
}
.ft-link{
  padding-left: 5rem;
}
.ft-copyright{
  padding-bottom: 14px;
}

/*Job application*/
/* Form Wrapper */
.application-form {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  padding: 2.5rem;
  max-width: 900px;
  margin: 0 auto;
}

/* Section Titles */
.form-block h5 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--brand);
  border-bottom: 2px solid #eee;
  padding-bottom: 0.5rem;
}

/* Labels */
.form-label {
  font-weight: 500;
  font-size: 0.9rem;
  color: #444;
}

/* Inputs & Selects */
.form-control {
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
  background: #f9f9f9;
}

.form-control:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 0.2rem rgba(13, 77, 148, 0.15); /* brand glow */
}

/* Checkboxes & Radios */
.form-check-input {
  border-radius: 4px;
  border: 2px solid #ccc;
  width: 1.1rem;
  height: 1.1rem;
}

.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* File Upload */
.form-control[type="file"] {
  padding: 0.5rem;
  border: 2px dashed #ccc;
  border-radius: 12px;
  background: #fafafa;
  cursor: pointer;
}

.form-control[type="file"]:hover {
  border-color: var(--brand);
  background: #f0f8ff;
}

/* Dashboard */
/* Layout */
.dashboard-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.dashboard-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  position: relatives;
  top: 0;
  z-index: 1050;
}

/* Sidebar */
.dashboard-sidebar {
  position: fixed;
  top: 0;
  right: -280px;
  width: 260px;
  height: 100%;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0,0,0,0.1);
  transition: right 0.3s ease-in-out;
  z-index: 2000;
}

.dashboard-sidebar.active {
  right: 0;
}

.sidebar-link {
  display: block;
  padding: 10px 0;
  color: var(--dark);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.sidebar-link:hover {
  color: var(--brand);
  padding-left: 6px;
}

/* Main Content */
.dashboard-content {
  flex: 1;
  overflow-y: auto;
  background: #f8f9fa;
}

/* Buttons */
.btn-brand {
  background: var(--brand);
  border: none;
}
.btn-brand:hover {
  background: var(--text-dark);
  color: #fff;
}
.sidebar-overlay {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 1500; /* below sidebar */
}

.sidebar-overlay.active {
  display: block;
}
.client-img {
    width: 44px;
    height: 48px;
    object-fit: cover;
}
.client-dropdown::after{
  display: none;
}
/*Appoint ment Cards*/
.appointment-card {
  background: #fff;
  border-left: 4px solid var(--brand, #007bff);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.appointment-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.appointment-info h5 {
  font-size: 1.1rem;
  font-weight: 600;
}
.appointment-actions{
    width: 23%;
}

.appointment-actions .btn {
  width: 100%;
}
.appointment-actions .complete-btn, .reschedule-btn{
  background-color: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.appoint-badge{
    background: #f1f3f5;   /* light neutral */
  color: #333;           /* dark text for readability */
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 30px;
  margin-left: 10px;
  vertical-align: middle;
}
/*Booked Quote page*/
/* ------------------------------
   Quote Page Base Styling
--------------------------------*/
.quote-page {
  background: #f9fafc;
  padding: 2rem 1rem;
  min-height: 100vh;
}

/* Section Wrapper */
.quote-section {
  background: #fff;
  border-radius: 18px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.quote-section:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.08);
}

/* Quote Header */
.quote-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}
.quote-header h4 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #222;
}
.quote-header .badge {
  font-size: 0.85rem;
  padding: 0.45rem 0.75rem;
  border-radius: 30px;
}
.book-quote-card .card.shadow-sm{
      border-left: 4px solid var(--brand, #007bff);
}
/* Car & Service Info */
.quote-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem 2rem;
}
.quote-info p {
  margin: 0.25rem 0;
  font-size: 0.95rem;
  color: #555;
}
.quote-info strong {
  color: #111;
  font-weight: 600;
}

/* Progress / Status */
.quote-status {
  margin-top: 1.5rem;
}
.quote-status .progress {
  height: 8px;
  border-radius: 10px;
}
.quote-status small {
  display: block;
  margin-top: 0.5rem;
  color: #666;
}

/* Buttons */


/* Cancel Confirmation Modal Custom Styling */
#cancelConfirmModal .modal-content {
  border-radius: 16px;
  border: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  animation: slideUp 0.3s ease-out;
}

#cancelConfirmModal .modal-header {
  padding: 1.5rem 1.5rem 0.5rem;
}

#cancelConfirmModal .modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
}

#cancelConfirmModal .modal-body {
  font-size: 0.95rem;
  color: #555;
  padding: 1rem 1.5rem;
}

#cancelConfirmModal .modal-footer {
  padding: 1rem 1.5rem 1.5rem;
  gap: 10px;
}

/* Buttons */
#cancelConfirmModal .btn-outline-secondary {
  border-radius: 30px;
  padding: 0.45rem 1.2rem;
  font-size: 0.9rem;
  transition: all 0.2s ease-in-out;
}

#cancelConfirmModal .btn-outline-secondary:hover {
  background: #f1f1f1;
}

#cancelConfirmModal .btn-danger {
  border-radius: 30px;
  padding: 0.45rem 1.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(220,53,69,0.25);
  transition: all 0.2s ease-in-out;
}

#cancelConfirmModal .btn-danger:hover {
  background: #c82333;
  box-shadow: 0 6px 16px rgba(220,53,69,0.35);
}

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





/* ===============================
   Booked Quotes Card Styling
================================= */
.book-quote-card h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 1.8rem;
}

.book-quote-card .card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.book-quote-card .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* Card Body Layout */
.book-quote-card .card-body {
  padding: 1.5rem 1.75rem;
}

/* Left Info */
.book-quote-card h6 {
  font-size: 1.05rem;
  color: #111;
  margin-bottom: 0.5rem;
}
.book-quote-card p {
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
  color: #555;
}
.book-quote-card strong {
  color: #111;
  font-weight: 600;
}

/* Badges */
.book-quote-card .badge, .quote-model .badge {
  font-size: 0.8rem;
  padding: 0.4rem 0.7rem;
  border-radius: 30px;
  letter-spacing: 0.3px;
}
.quote-model .bg-brand{
  background-color: var(--brand);
  color: #fff;
  border-radius: 1.25rem;
}

/* Right Side Alignment */
.book-quote-card .text-end {
  min-width: 180px;
}

.quote-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.book-quote-card .btn-outline-brand {
  border-radius: 30px;
  padding: 0.5rem 1.3rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1.5px solid var(--brand, #0d6efd);
  color: var(--brand, #0d6efd);
  transition: all 0.2s ease-in-out;
}
.book-quote-card .btn-outline-brand:hover {
  background: var(--brand, --text-dark);
  color: #fff;
}
.book-quote-card .btn-brand {
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  padding: 6px 16px;

}

.book-quote-card .bg-brand {
  background: var(--brand) !important;
  color: #fff !important;
}
.quote-model .fw-bold, .book-quote-card .fw-bold{
  font-weight: 600 !important;
  color: #000 !important;
}
.d-invoice-btn, .d-rescedule-btn, .d-cancel-btn{
  font-weight: 500;
  border: 1px solid;
}
.d-invoice-btn:hover{
  color: #fff;
}

/* =========================
  Sidebar Dashboard page & Bashboard HEADER STYLING 
   ========================= */
.m-dashboard-header {
  background: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
}

.m-dashboard-header h5 {
  font-weight: 700;
  color: var(--brand);
  margin: 0;
}

.m-dashboard-header .btn-light {
  border: none;
  background: #f9f9f9;
  border-radius: 8px;
  transition: 0.3s;
  color: var(--text-dark);
}
.m-dashboard-header .btn-light:hover {
  background: #f0f0f0;
  color: var(--brand);
}

/* User dropdown */
.m-client-img {
  width: 42px;
  height: 44px;
  object-fit: cover;
  border: 2px solid #eee;
  transition: 0.3s;
  border-radius: 50%;
}
.m-client-img:hover {
  border-color: var(--brand);
}

.m-client-dropdown::after {
  display: none !important;
}

/* Sidebar toggle button */
.m-btn-toggle {
  background: var(--brand);
  border-radius: 1.25rem;
  transition: 0.3s;
  color: #fff;
}
.m-btn-toggle:hover {
  background: var(--brand-600);
}

/* =========================
   SIDEBAR STYLING
   ========================= */
.m-dashboard-sidebar {
  width: 260px;
  background: #ffffff;
  border-right: 1px solid #f0f0f0;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -260px;
  transition: all 0.3s ease;
  z-index: 1050;
  overflow-y: auto;
  padding: 1.5rem 1rem 2rem;
}

.m-dashboard-sidebar.active {
  left: 0;
  box-shadow: 2px 0 10px rgba(0,0,0,0.08);
}

.m-dashboard-sidebar h6 {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 1rem 0 0.5rem;
}

.m-sidebar-link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--text-dark);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: 0.3s;
}
.m-sidebar-link i {
  width: 20px;
  font-size: 1rem;
  margin-right: 10px;
}
.m-sidebar-link:hover {
  background: rgba(255, 108, 54, 0.1); /* brand tint */
  color: var(--brand);
}
.m-sidebar-link.active {
  background: var(--brand);
  color: #fff !important;
}

/* =========================
   SIDEBAR OVERLAY (Mobile)
   ========================= */
.m-sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 1040;
}
.m-sidebar-overlay.active {
  display: block;
}

/* ===============================
   MEchanic Dashboard Card Styling
================================= */
/* Page Header */
.m-page-header h4 {
  color: var(--text-dark);
}
.m-page-header p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Job Tabs */
.m-job-tabs .nav-link {
  border-radius: 30px;
  padding: 0.5rem 1.2rem;
  font-weight: 500;
  color: var(--text-dark);
  background: #f1f3f5;
  margin-right: 0.5rem;
  transition: all 0.2s ease-in-out;
}

.m-job-tabs .nav-link.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.m-job-tabs .nav-link:hover {
  background: var(--brand);
  color: #fff;
}

/* ===============================
   MEchanic Appoint page
================================= */

.dashboard-logo{
  width: 120px;
}
.m-job-card {
  border: none;
  border-radius: 12px;
  transition: transform 0.2s ease;
}

.m-job-card:hover {
  transform: translateY(-2px);
}

.m-job-info h6 {
  color: var(--text-dark);
}

.m-job-info p {
  font-size: 0.85rem;
}


/* Tabs */
.m-job-tabs .nav-link {
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 16px;
}

.m-job-tabs .nav-link .badge {
  font-size: 12px;
  font-weight: 500;
}

/* Filters & Search */
.m-filters-search {
  display: flex;
  align-items: center;
}

.m-search-box .form-control {
  border-left: none;
  box-shadow: none;
}

.m-search-box .input-group-text {
  border-right: none;
  background: #fff;
}

/* Filters + Search wrapper */
.m-filters-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Search box should stretch */
.m-search-box {
  min-width: 220px;
}

/* Dropdown filters */
/* Filters Bar */
.m-filters-bar {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 15px;
}

/* Search */
.m-search-box .input-group-text {
  background: transparent;
  border: none;
  color: var(--text-muted);
}
.m-search-box .form-control {
  border: none;
  box-shadow: none;
}
.m-search-box .form-control:focus {
  outline: none;
  box-shadow: none;
}

/* Filter Pills */
.m-filter-pill {
  background: var(--bg);
  border: 1px solid #e5e7eb;
  border-radius: 30px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  transition: all 0.2s ease;
}
.m-filter-pill:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.m-filter-pill:focus {
  box-shadow: none;
}

/* Dropdown */
.dropdown-menu {
  border-radius: 8px;
  padding: 5px 0;
}
.dropdown-item {
  font-size: 14px;
  padding: 8px 14px;
}
.dropdown-item:hover {
  background: var(--brand);
  color: #fff;
}
.m-job-head{
  color: #000 !important;
}
.m-filter-reset {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
  padding: 0.4rem 1rem;
}
.m-filter-reset:hover {
  color: var(--brand);
}
/* =========================
   Mechanic Earning
   ========================= */
   /* Quick Stats Styling */
.m-earning-sec .fw-bold, .m-balance-sec .fw-bold {
    color: var(--text-dark);
}
.m-stat-card {
  border: none;
  border-radius: 12px;
  min-height: 150px;
  background: linear-gradient(145deg, #ffffff, #f9f9f9);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: all 0.25s ease;
  border-top: 3px solid var(--brand);
}

.m-stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.m-stat-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 108, 54, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}

.m-highlight-card {
  background: var(--brand);
  border-top: 3px solid #fff;
}

.m-highlight-card .m-stat-icon-wrap {
  background: #fff;
  color: var(--brand);
}

.m-highlight-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(255,108,54,0.4);
}
/*M earning sec*/
.m-balance-card {
  border-radius: 12px;
  border: none;
}

.m-balance-info h6 {
  font-weight: 600;
  color: #444;
}

.m-balance-info .text-brand {
  font-size: 1.6rem;
}

.m-balance-actions .btn {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.m-balance-actions .btn-brand {
  background: var(--brand);
  color: #fff;
  border: none;
}

.m-balance-actions .btn-brand:hover {
  background: #e45a2e;
}

.m-balance-actions .btn-outline-brand {
  border: 1px solid var(--brand);
  color: var(--brand);
}

.m-balance-actions .btn-outline-brand:hover {
  background: var(--brand);
  color: #fff;
}
.m-payout-history .card-header {
  border-bottom: 1px solid #eee;
}

.m-payout-history table th {
  font-weight: 600;
  color: var(--text-dark);
}

.m-payout-history table td {
  font-size: 0.9rem;
}

.m-payout-history .badge {
  font-size: 0.75rem;
  padding: 0.4em 0.6em;
  border-radius: 6px;
}
.m-method-card {
  border-radius: 12px;
  transition: 0.2s ease-in-out;
}
.m-method-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.m-method-add {
  border: 2px dashed var(--brand);
  border-radius: 12px;
  background: #fff;
}
.m-method-add:hover {
  background: var(--bg);
}
/* Profile card adjustments */
.m-profile-card {
  border-radius: 8px;
  background: #fff;
}

/* Profile picture */
.m-profile-pic-wrapper {
  position: relative;
  display: inline-block;
}

.m-profile-pic {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 3px solid #eee;
  padding: 3px;
  background: #fafafa;
}

.m-profile-pic-wrapper:hover .m-profile-pic {
  border-color: var(--bs-primary); /* highlight on hover */
}

/* Upload & remove buttons (make them cleaner) */
.m-profile-card .btn {
  font-size: 0.875rem;
  border-radius: 1.25rem;
}

/* Form spacing inside profile */
.m-profile-card .form-label {
  font-weight: 500;
  font-size: 0.9rem;
}

.m-profile-card input.form-control {
  font-size: 0.9rem;
}

/* Section headers inside form */
.m-profile-card h6 {
  font-size: 1rem;
  margin-top: 1rem;
  color: #333;
}
#payoutModal select{
    padding: .575rem 2.25rem .575rem .75rem;
  border-radius: 1.25rem;
}

/*Mechanic Order detail page*/
/* =============================
   Root Colors (already in your code)
============================= */
:root {
  --brand: #ff6c36;
  --brand-600: #c92b36;
  --text-dark: #0a1f44;
  --text-link: #0a1f44;
  --text-muted: #6d7579;
  --bg: #f8f9fa;
  --card: #fff;
  --header-height: 80px;
  --subtitle-text: 17px;
}

/* =============================
   General Page
============================= */

.m-page-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.m-page-header h4 {
  font-size: 1.4rem;
}

.breadcrumb a {
  text-decoration: none;
  color: var(--brand);
  font-weight: 500;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb .active {
  color: var(--brand-600);
}

/* =============================
   Card Styling
============================= */
.mechnaic-order-detail .card {
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  background: var(--card);
}

.mechnaic-order-detail .card-header {
  background: #fafafa;
  border-bottom: 1px solid #eee;
}

.mechnaic-order-detail .card-header h6 {
  color: var(--text-dark);
  font-size: 1rem;
  font-weight: 600;
}

/* =============================
   Progress Tracker
============================= */
.m-progress-tracker {
  position: relative;
  margin: 20px 0;
}

.m-step {
  text-align: center;
  position: relative;
}

.m-step-circle {
  width: 42px;
  height: 42px;
  line-height: 42px;
  border-radius: 50%;
  background-color: #e9ecef;
  color: #6d7579;
  font-weight: 600;
  margin: 0 auto 8px;
  transition: 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.m-step-line {
  height: 4px;
  background-color: #e9ecef;
  margin: 0 10px;
  border-radius: 2px;
}

.m-step.completed .m-step-circle {
  background-color: #198754; /* green */
  color: #fff;
}

.m-step.active .m-step-circle {
  background-color: var(--brand);
  color: #fff;
}

.m-step.completed + .m-step-line,
.m-step.active + .m-step-line {
  background-color: var(--brand);
}

/* =============================
   Chat Section
============================= */
.mechnaic-order-detail .card-header:first-child {
    border-radius: 8px;
}
.mechnaic-order-detail .card-footer:last-child {
    border-radius: 8px;
}
.m-ord-file{
  color: var(--brand);
}
.m-chat-body {
  background: #f9f9f9;
  border-radius: 6px;
  padding: 10px;
}

.mechnaic-order-detail .card-body .chat-msg {
  margin-bottom: 1rem;
}

.chat-msg.customer .bubble {
  background: #f1f1f1;
  color: var(--text-dark);
  border-radius: 12px;
  padding: 8px 12px;
  display: inline-block;
  max-width: 75%;
}

.chat-msg.you {
  text-align: right;
}

.chat-msg.you .bubble {
  background: var(--brand);
  color: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  display: inline-block;
  max-width: 75%;
}

.mechnaic-order-detail .card-footer {
  border-top: 1px solid #eee;
}

.m-chat-box .input-group .form-control {
  border-radius: 0;
}

.m-chat-box .btn {
  border-radius: 0;
}

.m-chat-box .btn-brand {
  background: var(--brand);
  color: #fff;
}
.m-chat-box .btn-brand:hover {
  background: var(--brand-600);
}

/* =============================
   Map Wrapper
============================= */
.m-map-wrapper iframe {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: block;
}

/* =============================
   Actions Section
============================= */
.m-actions button {
  border-radius: 6px;
  font-weight: 500;
  transition: 0.3s;
}

.m-actions button:hover {
  transform: translateY(-1px);
}
.badge-in{
  background-color: var(--brand) ;
  color: #fff !important;
  border-radius: 1.25rem;
}
.form-chat, .chat-send-btn{
  border-radius: 1.25rem !important;
}
.btn-file{
      border: 1.25rem;
    background: transparent;
    box-shadow: none;
}
/* Order Info Fields */
.m-order-info .col-sm-4 {
  font-weight: 500;
  color: #6c757d;
  display: flex;
  align-items: center;
}
.m-order-info .col-sm-8 {
  background: #f8f9fa;
  padding: 6px 12px;
  border-radius: 6px;
}

/* Customer Details Card */
.mechnaic-order-detail .card-body p {
  font-size: 0.95rem;
  color: #444;
  display: flex;
  align-items: center;
}
.order-detail-accordion i {
  color: var(--brand) !important;
  font-size: 0.9rem;
}
.order-detail-accordion .accordion-button{
  background-color: #eeeeee7e;
  color: var(--text-dark);
}

/* Hover effect for cards */
.mechnaic-order-detail .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

/*Mechanic Schedule page*/
/* Weekly Availability */
.m-weekly-availability .form-control {
  max-width: 130px;
}

.m-weekly-availability .row {
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 12px;
}

.m-weekly-availability .row:last-child {
  border-bottom: none;
}

.m-weekly-availability .form-check-input {
  cursor: pointer;
}
/* Unavailability Dates */
.m-unavailable-dates .alert {
  padding: 8px 12px;
  font-size: 0.9rem;
  border-radius: 6px;
}

.m-unavailable-dates .btn {
  padding: 2px 8px;
}
/* Unavailability Dates */
.m-unavailable-dates .alert {
  padding: 10px 14px;
  font-size: 0.9rem;
  border-radius: 6px;
  background: #fdfdfd;
}

.m-unavailable-dates .btn {
  padding: 3px 8px;
}

/*View Car page*/
/* ------------------------------
   Car Details Page Base Styling
--------------------------------*/

/* Brand Accordion */
.m-brands-accordion .accordion-button {
  background: #fff;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-dark);
  padding: 0.8rem 1rem;
  transition: all 0.3s ease;
}
.m-brands-accordion .accordion-button:not(.collapsed) {
  background: var(--bg);
  color: var(--brand);
  box-shadow: none;
}
.m-brands-accordion .brand-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.m-brands-accordion .accordion-item {
  border-radius: 8px;
  overflow: hidden;
}
.m-brands-accordion .accordion-body {
  background: #fff;
  border-top: 1px solid #eee;
  padding: 1rem 0.75rem;
}

/* Brand Models */
.brand-model-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 12px; /* less padding */
  text-align: center;
  font-size: 0.9rem; /* slightly smaller */
  font-weight: 500;
  transition: 0.25s ease;
  cursor: pointer;
}
.brand-model-card:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
/* ------------------------------
   Quote Page Base Styling
--------------------------------*/
/* Base step container */
/* Progress Bar */
/* Progress Bar */
.m-progressbar {
  position: relative;
}

.m-progress-step {
  flex: 0 0 auto;
  position: relative;
}

.m-progress-circle {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  display: inline-block;
  background: var(--bg);
  border: 2px solid var(--text-muted);
  color: var(--text-muted);
  font-weight: 600;
  transition: all 0.3s ease;
}

.m-progress-step.active .m-progress-circle {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.m-progress-step.completed .m-progress-circle {
  border-color: var(--brand-600);
  background: var(--brand-600);
  color: #fff;
}

.m-progress-line {
  height: 2px;
  background: var(--text-muted);
  margin: 0 8px;
}

.m-progress-step.completed ~ .m-progress-line {
  background: var(--brand);
}

/* Buttons */
.btn-brand {
  background-color: var(--brand);
  border: none;
  color: #fff;
  transition: 0.3s;
}

.btn-brand:hover {
  background-color: var(--brand-600);
  color: #fff;
}

/* Step Containers */
.m-quote-step {
  display: none;
}

.m-quote-step.active, .m-step-services.active {
  display: block !important;
}
/* Vehicle Step */
.m-step-vehicle .m-step-inner {
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
}

/* Brand inputs */
.m-step-vehicle .form-select,
.m-step-vehicle .form-control {
  border-radius: 8px;
  padding: .6rem .75rem;
}

/* small polish */
.m-step-vehicle .form-label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-dark);
}

/* Next / Back */
.m-step-vehicle .btn-brand {
  background: var(--brand);
  border: none;
  color: #fff;
}
.m-step-vehicle .btn-brand:hover { background: var(--brand-600); }

/* Reset */
.m-vehicle-reset { border-color: #e6e6e6; }

/* Disabled selects slightly muted */
.m-step-vehicle .form-select:disabled {
  background: #f7f7f7;
  color: var(--text-muted);
}

/* Error */
.m-vehicle-error { font-size: .95rem; }




/* Service list style */
.service-row {
  background: #fff;
  cursor: pointer;
  transition: all 0.25s ease;
}
.service-row:hover {
  background: #fff7f3;
  border-color: var(--brand);
}

/* Plus icon hover */
.service-add {
  cursor: pointer;
  transition: transform 0.2s;
}
.service-add:hover {
  transform: scale(1.2);
  color: var(--brand-600);
}
#cartSidebar {
  border: 1px solid #eee;
  border-radius: 8px;
}
#cartTotal {
  color: var(--brand);
}
.hform-select {
  border-radius: 8px;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}
/* ===== BASE LAYOUT ===== */
.h-order-pool {
  background-color: var(--bg);
  position: relative;
}

/* ===== FILTER SIDEBAR ===== */
.h-filter-box {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 2px 15px rgba(0,0,0,0.05);
  border: 1px solid #f1f3f5;
}

.h-filter-title {
  color: var(--text-dark);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.2px;
}

.h-reset-filter {
  background: transparent;
  color: var(--brand);
  font-weight: 500;
  border: 1px solid var(--brand);
  border-radius: 6px;
  padding: 2px 10px;
  transition: all 0.25s ease;
}
.h-reset-filter:hover {
  background: var(--brand);
  color: #fff;
}

/* Group titles */
.h-filter-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 6px;
}

.h-filter-options label {
  display: block;
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.h-filter-options label:hover {
  color: var(--brand);
}

/* Inputs */
.h-filter-select {
  border: 1px solid #e6e8eb;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  transition: all 0.25s ease;
}
.h-filter-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.15rem rgba(255,108,54,0.25);
}

/* Range Slider */
.h-range {
  accent-color: var(--brand);
}
.h-range-value {
  color: var(--brand);
  font-weight: 500;
}

/* ===== ORDER CARD ===== */
.h-order-listing {
  display: flex;
  flex-direction: column;
}

/* ===== ORDER CARD ===== */
.h-order-card {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid #f1f3f5;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  position: relative;
}

.h-order-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-color: rgba(255,108,54,0.25);
}

/* Title + Price */


.h-order-price {
  color: var(--brand);
  font-weight: 600;
  font-size: 1rem;
}

/* Meta Info */
.h-order-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.h-meta-item {
  display: flex;
  align-items: center;
  color: var(--text-muted);
}

.h-meta-item i {
  color: var(--brand);
  font-size: 1rem;
}
.h-order-title {
  font-weight: 600;
  color: var(--text-dark);
}

.h-order-info {
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-muted);
}
.h-order-info-exttend{
  background: #f5f7fa;
  padding: 6px 12px;
}

.h-order-info i {
  color: var(--brand);
  font-size: 15px;
}

.h-dot {
  color: #ccc;
  font-weight: bold;
}

.h-meta-tag {
  background: #f1f3f5;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
}

.h-meta-tag i {
  color: var(--brand);
}

.h-meta-tag.urgent {
  background: #fff3f0;
  color: var(--brand-600);
}

.h-order-price {
  font-weight: 600;
  color: var(--brand);
  font-size: 18px;
}


/* Description */
.h-order-desc {
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Tags / Badges */
.h-badge {
  background: rgba(255,108,54,0.1);
  color: var(--brand);
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
  font-weight: 500;
  font-size: 0.8rem;
}

/* Button */
.h-btn-view {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.5rem 1.2rem;
  transition: all 0.25s ease;
}
.h-btn-view:hover {
  background: var(--brand-600);
}

/* ===== OVERLAY DETAIL PANEL ===== */
/* Overlay base */
.h-order-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 68, 0.4);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* Active state */
.h-order-detail-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Slide-in panel */
.h-order-detail-panel {
  width: 480px; /* balanced width */
  max-width: 95%;
  background: #fff;
  height: 100%;
  overflow-y: auto;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When active, slide in */
.h-order-detail-overlay.active .h-order-detail-panel {
  transform: translateX(0);
}

/* Close button */
.h-close-detail {
  position: absolute;
  top: 18px;
  right: 22px;
  border: none;
  background: none;
  font-size: 32px;
  color: var(--text-dark);
  cursor: pointer;
  transition: color 0.3s ease;
}
.h-close-detail:hover {
  color: var(--brand);
}

/* Inner content padding */
.h-order-detail-content {
  padding: 40px 32px;
}

.h-detail-title {
  font-weight: 600;
  color: var(--text-dark);
}

.h-order-detail-panel::-webkit-scrollbar {
  width: 6px;
}
.h-order-detail-panel::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
/* ===== Signup Page ===== */
/* ===== Signup Page Layout ===== */


.h-signup-left {
  background: linear-gradient(135deg, rgba(10,31,68,0.85), rgba(10,31,68,0.75));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.h-left-content {
  max-width: 480px;
  animation: fadeUp 1s ease forwards;
  opacity: 0;
}

.h-left-divider {
  height: 3px;
  width: 80px;
  background: var(--brand);
  box-shadow: 0 0 8px rgba(255,108,54,0.8);
  border-radius: 2px;
}

.h-signup-right {
  background-color: #fff;
}

.h-signup-card {
  border-radius: 14px;
  padding: 48px 48px;
}


.h-btn-create {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  transition: all var(--transition-fast);
  border-radius: 1.25rem;
  padding: .6rem 1rem !important;

}

.h-btn-create:hover {
  background: var(--brand-600);
  box-shadow: 0 4px 12px rgba(201,43,54,0.3);
}

.form-control, .form-select {
  border-radius: 6px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.15rem rgba(255,108,54,0.25);
}

/* Text Link hover */
.h-login-link:hover {
  color: var(--brand);
}




.h-signin-left {
  background: linear-gradient(135deg, rgba(10,31,68,0.85), rgba(10,31,68,0.75));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}



.h-signin-right {
  background-color: #fff;
}

.h-signin-card {
  border-radius: 14px;
  padding: 48px 48px;
  animation: fadeUp 0.8s ease forwards;
  opacity: 0;
}

.h-right-divider {
  height: 2px;
  width: 60px;
  background: var(--brand);
  opacity: 0.9;
}

/* Sign In Button */
.h-btn-signin {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  border-radius: 1.25rem;
  transition: all 0.25s ease;
}

.h-btn-signin:hover {
  background: var(--brand-600);
  box-shadow: 0 4px 12px rgba(201,43,54,0.3);
}

/* Form Focus States */
.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.15rem rgba(255,108,54,0.25);
}

/* Links */
.h-signin-links a {
  color: var(--text-link);
  transition: color 0.2s ease;
}

.h-signin-links a:hover {
  color: var(--brand);
}

/* Animation */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Reset Card (inherits from signin styles) */
.h-reset-card {
  border-radius: 14px;
  padding: 48px;
  background: #fff;
  animation: fadeUp 0.8s ease forwards;
  opacity: 0;
}

.h-btn-reset {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  border-radius: 1.25rem;
  transition: all 0.25s ease;
}

.h-btn-reset:hover {
  background: var(--brand-600);
  box-shadow: 0 4px 12px rgba(201,43,54,0.3);
}

.h-reset-links a:hover {
  color: var(--brand);
}












/* Responsive reset */

@media (max-width: 1199px) {
.video-text-floating {
  margin-right: 4rem;
}
 .h-signup-card, .h-signin-card{
  padding: 48px 36px;
}
}
@media (max-width: 991px) {
  .hero {
    text-align: center;
    padding: 3rem 1.2rem;
  }
  .hero-title {
    font-size: 2.2rem;
  }
  .hero-subtitle {
    font-size: 1.1rem;
  }
  .hero-form {
    flex-direction: column;
  }
  .hero-img {
    display: none;
  }
  .video-section{
    margin-top: 1rem;
  }
  .right-video-lg {
    margin-top: 20px;   /* normal spacing */
    margin-bottom: 20px;
  }
  .video-text-floating {
    min-height: auto;
    transform: none;
    margin: 20px 0;
    margin-right: 0rem;
  }
  .btn-close-float {
    transform: none;
    top: 10px;
    right: 10px;
  }
  .left-video-lg{
    margin-top: 6rem;
    margin-bottom: 4rem;
  }
  .video-section  .section-title{
    text-align: center;
  }
  .video-section  .section-subtitle{
    text-align: center;
  }
  .features-list{
    margin: auto;
  }
  .ft-link{
    padding-left: .8rem;
  }
  .ft-sm-2{
    padding-left: 8rem;
  }
   iframe {
      height: 400px;
    }
  .m-dashboard-sidebar {
    left: -260px;
  }
  .m-dashboard-sidebar.active {
    left: 0;
  }
  .h-filter-sidebar {
    order: 2;
  }
  .h-orders-area {
    order: 1;
  }
  .h-filter-box {
    border-radius: 0.75rem;
  }
  .h-signup-card, .h-signin-card{
  padding: 48px 24px;
}
}


@media (max-width: 767px) {
  .br-one{
    display: none;
  }
  .ft-sm-2{
    padding-left: .8rem;
  }
   iframe {
      height: 380px;
    }
    .application-form {
    padding: 1.5rem;
  }
   .quote-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .quote-info {
    grid-template-columns: 1fr;
  }
    .my-j-left{
    text-align: left !important;
  }
    .m-filters-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .m-filter-pills {
    justify-content: space-between;
  }
   .m-profile-pic {
    width: 100px;
    height: 100px;
  }
  
  .m-profile-card .btn {
    width: 100%;
  }
  .m-step-vehicle .m-step-inner { padding: 1rem; }
  .m-step-vehicle .col-md-3,
  .m-step-vehicle .col-md-4 { flex: 0 0 100%; max-width: 100%; }
   .h-signup-left {
    display: none;
  }
  .h-signup-right {
    padding: 2rem 1.5rem;
  }
  .h-signup-card {
    padding: 48px 0px;
    box-shadow: none !important;
    max-width: 516px !important;
  
}
.h-signin-card,.h-reset-card {
  box-shadow: none !important;
  max-width: 516px !important;
   padding: 48px 0px;
}
.h-left-content {
    max-width: 517px;
}
}

@media (max-width: 576px) {
    .call-icon img {
    width: 32px;
}
.btn-quote {
    font-size: 14.5px;
    padding: .45rem .8rem;
    
}
.navbar-toggler {
    padding: .08rem .25rem !important;
}
.navbar-toggler-icon {
    width: 1.2em !important;
}
.brand-logo img {
    width: 108px;
}
.hero-text .subheading {
    font-size: 1rem;
}

.hero-text .main-heading {
    font-size: 2rem;
}
.btn-next {
    padding: .6rem 1.2rem;
}
 iframe {
      height: 300px;
    }
    .m-job-card .card-body {
    flex-direction: column; /* Stack items */
    align-items: flex-start; /* Left align */
  }

  .m-job-summary {
    text-align: left !important; /* Override text-end */
    margin-top: 0.75rem; /* Space between sections */
    width: 100%; /* Full width for balance */
  }
    .m-job-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scroll for iOS */
    scrollbar-width: none; /* Firefox */
  }

  .m-job-tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }

  .m-job-tabs .nav-item {
    flex: 0 0 auto; /* don't shrink */
    margin-right: 0.5rem;
  }
    .m-job-card .card-body {
    flex-direction: column;     /* Stack items */
    align-items: flex-start;    /* Align to left */
  }

  .m-job-actions {
    text-align: left !important; /* Override text-end */
    margin-top: 0.75rem;         /* Spacing */
    width: 100%;                 /* Full width */
  }

  .m-job-actions .btn {
    width: 100%;                 /* Button full width for mobile */
  }

  .m-filter-pills {
        justify-content: center;
    }
     .m-payout-history table td,
  .m-payout-history table th {
    white-space: nowrap; /* prevent text wrapping */
  }

  .m-payout-history .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  }
}
@media(max-width: 508px){
     .quote-model-right{
      margin-top: 16px;
      text-align: left !important;
    }
    .quote-model-footer{
      flex-direction: column-reverse;
      align-items: flex-start;
    }
    .d-cancel-btn{
      margin-top: 8px;
    }
}
/* Responsive */
@media (max-width: 480px) {
  .m-input-group {
    flex-direction: column;
  }
  .btn-brand {
    width: 100%;
  }
}