:root{
      --med-blue:#244784;
      --med-blue-2:#234179;
      --med-teal:#ff8f1f;
      --med-orange:#ff8f1f;
      --med-pink:#ff4f7b;
      --med-sep:rgba(255,255,255,.18);
    }

    body{scroll-behavior:smooth;background:#f6f8fb}
    a{text-decoration:none}

    /* Sticky */
    .site-header{position:sticky;top:0;z-index:1030;transition:box-shadow .25s;}
    .site-header.is-stuck{box-shadow:0 6px 18px rgba(0,0,0,.15)}

    /* Top Row */
    .header-top{background:var(--med-blue);}
    .brand{font-weight:800;letter-spacing:.5px;color:#fff;font-size:1.4rem;}
    .brand-icon{width:32px;height:32px;border-radius:8px;  background: linear-gradient(135deg, #FF5722, #FFC107);
      display:inline-grid;place-items:center;margin-right:.4rem;color:#fff;}

    .search-wrap{flex:1 1 600px;}
.search-pill {
    background: #fff;
    border-radius: 40px;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    gap: .25rem;
}
    .search-pill input{border:0;outline:0;padding:5px 16px;border-radius:40px;width:100%;}
    .search-pill .btn-search{border:0;border-radius:40px;padding:5px 18px;background:var(--med-teal);color:#fff;}

    .util{color:#fff;font-weight:500;}
    .util .item{display:flex;align-items:center;gap:.4rem;padding:0 .7rem;position:relative;}
    .util .item + .item{border-left:1px solid var(--med-sep);}
    .util i{font-size:1.1rem;}
    .badge-dot{position:absolute;top:-3px;right:6px;background:var(--med-teal);font-size:.65rem;
      font-weight:700;border-radius:20px;padding:.1rem .35rem;border:2px solid var(--med-blue);}

    /* Nav Row */
    .header-nav{background:var(--med-blue-2);}
    .main-menu .nav-link{color:#e8eefc;padding:.7rem 1rem;font-weight:600;display:flex;align-items:center;gap:.4rem;}
    .main-menu .nav-link:hover{color:#fff;}
    .badge-sale{background:var(--med-teal);font-size:.62rem;font-weight:700;}
    .badge-hot{background:var(--med-pink);font-size:.62rem;font-weight:700;}

    .help-btn { background: var(--med-orange); color: #fff; border: 0; border-radius: 30px; padding: .34rem 1rem; font-weight: 700; display: flex;    align-items: center; gap: .5rem; box-shadow: 0 6px 14px rgba(255, 143, 31, .25);}
    .help-btn:hover{filter:brightness(1.05);color:#fff;}

    /* Mega Menu */
    .dropdown-menu.mega-menu {
      width:100%;
      left:0;
      right:0;
      padding:2rem;
      border-radius:0 0 12px 12px;
      background:#fff;
      box-shadow:0 6px 18px rgba(0,0,0,.15);
    }
    .mega-menu h6{font-weight:700;color:var(--med-blue);margin-bottom:.8rem;}
    .mega-menu a{color:#333;display:block;margin-bottom:.5rem;font-weight:500;}
    .mega-menu a:hover{color:var(--med-teal);}
    .mega-img{width:100%;border-radius:12px;overflow:hidden;}
    .mega-img img{width:100%;display:block;border-radius:12px;transition:transform .3s;}
    .mega-img img:hover{transform:scale(1.05);}

    /* Carousel */
    .carousel-inner img {
      height:300px;
      object-fit:cover;
      width:100%;
    }

    /*======================= new section ====================*/
    .categories-section { background-color: #f8f9fa; }
    .red-line { width: 60px; height: 3px; background-color: #dc3545; }
    .category-card {
      height: 220px; background-size: cover; background-position: center; border-radius: 10px; position: relative;
      overflow: hidden; box-shadow: 0 0 15px rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease;
    }
    .category-card::after { content: ''; position: absolute; inset: 0; background-color: rgba(0,0,0,0.2); border-radius: 10px; }
    .category-card h5 { position: relative; z-index: 2; color: white; font-weight: 600; font-size: 20px; }
    .badge-count {
      position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background-color: #dc3545; color: white;
      padding: 5px 12px; border-radius: 30px; font-size: 14px; z-index: 2;
    }
    .category-card:hover { transform: translateY(-5px); }

    /* ======= MOBILE: search 80% + toggler 20% ======= */
    .mobile-bar{display:none;} /* hidden by default */

    @media (max-width: 768px) {
      /* Top search को mobile में hide करते हैं ताकि नीचे वाला 80/20 दिखे */
      .header-top .search-wrap{display:none !important;}

      /* Mobile bar दिखे और 80/20 layout बने */
      .mobile-bar{display:flex;}
      .mobile-bar .search-wrap{flex:0 0 80%;}
      .mobile-bar .navbar-toggler{
        flex:0 0 20%;
        display:flex;align-items:center;justify-content:center;
        padding:.4rem .6rem;
      }

      /* Search input छोटे स्क्रीन पर थोड़ा बड़ा padding */
      .mobile-bar .search-pill input{padding:8px 14px;}

      /* (Optional) डुप्लीकेट टॉगलर ना दिखे */
      .navbar .navbar-toggler.original-toggler{display:none !important;}
    }

    /* =========new section========== */
	
	
/* =========new section========== */

.red-line {
  width: 60px;
  height: 3px;
  background-color: #dc3545;
}

.car-card {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

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

/* =========new section========== */

.zoom-img {
    transition: transform 0.5s ease;
    object-fit: cover;
    height: 100%;
    width: 100%;
    display: block;
  }
  .zoom-img:hover {
    transform: scale(1.05);
  }
  .location-card {
    aspect-ratio: 4 / 3;
    background-color: #000;
  }
  .col-md-6 .location-card.large {
    aspect-ratio: 16 / 9;
  }
  .overlay {
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 20px;
    border-radius: 10px;
  }

/* =========counter-increment section========== */

.counter-section {
  background: url('https://via.placeholder.com/1600x500?text=Car+Background') center center / cover no-repeat;
  position: relative;
  z-index: 1;
}

.counter-section .overlay {
  background: linear-gradient(to right, rgba(222, 54, 54, 0.8), rgba(123, 33, 173, 0.8));
  width: 100%;
  height: 100%;
  padding: 60px 0;
}

.counter-item h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
}

.icon-circle {
  width: 80px;
  height: 80px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  font-size: 1.8rem;
  background: rgba(255, 255, 255, 0.1);
  transition: 0.3s;
}

.counter-item:hover .icon-circle {
  background: rgba(255,255,255,0.2);
  transform: scale(1.1);
}

.counter-item h6 {
  font-size: 1.1rem;
  margin-top: 15px;
  color: #fff;
}

/* =========new section========== */

.car-type-box {
  border-radius: 8px;
  padding: 40px 10px 20px;
  position: relative;
  text-align: center;
  transition: 0.3s ease;
  cursor: pointer;
  color: #fff;
}

.car-type-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.icon-circle {
  width: 80px;
  height: 80px;
  margin: 0 auto 15px;
  background-color: rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.car-label {
  background: #fff;
  padding: 10px 0;
  margin-top: 15px;
  font-weight: 600;
  color: #000;
  border-radius: 0 0 6px 6px;
}

.underline {
  width: 60px;
  height: 3px;
  background: #ff3c3c;
}


/* =========new section========== */

/* Toggle view styles */
.view-toggle .btn {
  border-radius: 0;
}
.view-toggle .btn.active {
  background-color: #0d6efd;
  color: white;
}

/* List view styles */
.car-wrapper.list-view .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}
.car-wrapper.list-view .card {
  flex-direction: row;
  gap: 1rem;
}
.car-wrapper.list-view .card img {
  width: 250px;
  height: auto;
  object-fit: cover;
  border-top-left-radius: .5rem;
  border-bottom-left-radius: .5rem;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Grid view resets */
.car-wrapper.grid-view .card {
  flex-direction: column;
}
.car-wrapper.grid-view .card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
/* new section */

 .section-title {
      text-align: center;
      margin-bottom: 30px;
    }
    .section-title h2 {
      font-weight: bold;
      border-bottom: 2px solid red;
      display: inline-block;
      padding-bottom: 5px;
    }
    .card {
      border: none;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      border-radius: 10px;
    }
    .card img {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      height: 230px;
      object-fit: cover;
    }
    .author-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
    }
    .card-footer {
      background-color: transparent;
    }
	
	
	/* ads list page */
	
	   .sidebar {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
      height: 100%;
    }
    .sidebar h5 {
      margin-bottom: 15px;
      font-size: 18px;
      font-weight: 600;
    }
    .sidebar .form-check {
      margin-bottom: 10px;
    }

    .product-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .product-card {
      border: none;
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      transition: all 0.3s ease;
      position: relative;
      height: 100%;
      box-shadow: 0 3px 8px rgba(0,0,0,0.06);
    }
    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    }
    .product-img img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    .tag {
      position: absolute;
      top: 12px;
      left: 12px;
      background: #ff0066;
      color: #fff;
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 5px;
    }
    .featured { background: #ff6600 !important; }
    .rating { color: gold; font-size: 14px; }

    .view-toggle button {
      border: none;
      background: #f1f1f1;
      padding: 6px 12px;
      border-radius: 6px;
      margin-left: 5px;
      transition: 0.3s;
    }
    .view-toggle button.active, .view-toggle button:hover {
      background: #dc3545;
      color: #fff;
    }

    /* List View */
    .list-view {
      display: flex;
      flex-direction: column;
    }
    .list-view .product-card {
      display: flex;
      flex-direction: row;
      height: 200px;
    }
    .list-view .product-img {
      flex: 0 0 30%;
    }
    .list-view .product-content {
      padding: 15px;
      flex: 1;
    }

    /* Responsive */
    @media(max-width: 992px) {
      .product-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media(max-width: 576px) {
      .product-container {
        grid-template-columns: 1fr;
      }
    }
	
	/* ads list page */
	
	
	
    /* Product Section */
	
	
	
	.text-align-justify{text-align:justify;}
    .details-wrapper {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      padding: 20px;
    }
    .product-gallery {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .main-image img {
      width: 100%;
      border-radius: 12px;
      object-fit: cover;
      height: 350px;
    }
    .thumbs {
      display: flex;
      gap: 10px;
    }
    .thumbs img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 8px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: 0.3s;
    }
    .thumbs img:hover, .thumbs img.active {
      border: 2px solid #dc3545;
    }
    .product-title {
      font-size: 28px;
      font-weight: 600;
    }
    .price-tag {
      font-size: 22px;
      color: #dc3545;
      font-weight: bold;
    }
    .tag {
      display: inline-block;
      background: #ff0066;
      color: #fff;
      padding: 4px 10px;
      border-radius: 5px;
      font-size: 12px;
      margin-right: 5px;
    }
    .featured { background: #ff6600 !important; }
    .seller-box {
      border: 1px solid #eee;
      padding: 15px;
      border-radius: 10px;
      background: #fafafa;
    }
    .sidebar-box {
      background: #fff;
      padding: 15px;
      border-radius: 10px;
      margin-bottom: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .sidebar-box h6 {
      font-weight: 600;
      margin-bottom: 10px;
    }
	
	
	/* Details-page */

:root{
      /* अपने header के अनुसार adjust करें (example: 90px) */
      --top-offset: 90px;
      --thumb-width: 64px;
      --thumb-gap: 8px;
    }

    body { background: #f1f3f6; }

    /* ROW CONTAINER */
    .pd-row { padding: 20px 18px; }

    /* ===== LEFT GALLERY (sticky on large) ===== */
    .sticky-gallery {
      position: sticky;           /* sticky for large screens */
      top: var(--top-offset);
      display: flex;
      align-items: flex-start;
      gap: 12px;
      height: calc(100vh - var(--top-offset) - 20px); /* 20px extra spacing */
    }
    /* important for flex children overflow behavior */
    .sticky-gallery > * { min-height: 0; }

    /* Thumbs column */
    .thumbs-wrap {
      width: calc(var(--thumb-width) + 16px); /* thumb + padding */
      min-width: calc(var(--thumb-width) + 16px);
      display:flex;
      flex-direction: column;
      align-items: center;
      gap: var(--thumb-gap);
      padding: 6px 4px;
      background: transparent;
    }

    /* vertical scroll area for thumbs */
    .thumb-scroll {
      display: flex;
      flex-direction: column;
      gap: var(--thumb-gap);
      overflow-y: auto;
      overflow-x: hidden;
      width: 100%;
      padding-right: 6px;
    }
    .thumb-scroll::-webkit-scrollbar{ width: 6px; }
    .thumb-scroll::-webkit-scrollbar-thumb{ background: #cfcfcf; border-radius: 10px; }

    .thumb-img {
      width: var(--thumb-width);
      height: var(--thumb-width);
      object-fit: cover;
      border-radius: 6px;
      border: 1px solid #ddd;
      cursor: pointer;
      display: block;
    }
    .thumb-img:hover { border-color: #2874f0; }
    .thumb-img.active { outline: 3px solid rgba(40,116,240,0.12); border-color:#2874f0; }

    /* Main image area */
    .main-image-wrap {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      border-radius: 8px;
      border: 1px solid #e6e6e6;
      padding: 12px;
      width: 100%;
      max-height: 100%;
      box-sizing: border-box;
    }
    .main-image-wrap img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      display: block;
    }

    /* ===== RIGHT: Product details ===== */
    .product-details {
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    }
    .product-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 8px; }
    .price { font-size: 1.6rem; font-weight:700; color:#212121; }
    .rating { background:#388e3c; color:#fff; padding:2px 8px; border-radius:4px; font-weight:600; }

    .offer-box { background:#f9f9f9; padding:10px; border-radius:6px; border:1px dashed #ddd; margin-top:12px; }
    .btns { margin-top:16px; display:flex; gap:10px; }
    .cart-btn { background:#ff9f00; border:none; color:#fff; padding:10px 14px; border-radius:6px; }
    .buy-btn { background:#fb641b; border:none; color:#fff; padding:10px 14px; border-radius:6px; }

    /* ===== RESPONSIVE: mobile behaviour ===== */
    @media (max-width: 991.98px) {
      .sticky-gallery {
        position: static;
        height: auto;
        flex-direction: column;
        gap: 12px;
      }
      .pd-row { padding: 12px; }

      /* make thumbs horizontal scroll */
      .thumbs-wrap {
        width: 100%;
        min-width: 0;
        flex-direction: row;
        padding: 6px 0;
        overflow: hidden;
      }
      .thumb-scroll {
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding-left: 8px;
      }
      .thumb-img {
        width: 72px;
        height: 72px;
        flex: 0 0 auto;
      }

      .main-image-wrap {
        max-height: none;
        padding: 8px 6px;
      }
      .main-image-wrap img { width:100%; height:auto; }
    }

    /* small aesthetic tweaks */
    .section { margin-top: 16px; background:#fff; padding:16px; border-radius:8px; }


  .faq-accordion .accordion-button {
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.3s ease;
  }
  .faq-accordion .accordion-button:not(.collapsed) {
    background: #e9f7ef;
    color: #198754;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
  }
  .faq-accordion .accordion-body {
    font-size: 15px;
    line-height: 1.6;
  }

	
	/* Details-page end*/