:root {
    --bs-primary: #D6391A;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-warning: #ffc107;
    --bs-info: #0dcaf0;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
}
 ::selection{
  background-color: rgba(0, 0, 0, 0.463);
 }

 body {
   font-family: 'Roboto', sans-serif;
   background-color: #000;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Poppins', sans-serif;
 }

 button {
   font-family: 'Roboto', sans-serif;
   font-weight: 500;

 }

 a {
   font-family: 'Roboto', sans-serif;
   font-weight: 500;
 }

 p {
   font-family: 'Lato', sans-serif;
   font-weight: 600;
   color: white;
 }

 .container {
   padding-left: 0px !important;
   padding-right: 0px !important;


 }

 /* .container-categories {
  padding: 20px;
  overflow: hidden;
} */
 .Get_started_btn {
   background-color: var(--bs-secondary);
   border-radius: 10px;
   color: var(--bs-light);
   font-weight: 300;
 }

 .Get_started_btn:hover {
   background-color: var(--bs-dark);
   color: white;

 }

 /* Navbar base styles */
 .navbar {
   width: 100%;
   top: 0;
   left: 0;
   z-index: 1000;
   transition: background-color 0.1s ease, box-shadow 0.4s ease;
 }

 .navbar .nav-item a {
   color: #f8f9fa;
   font-size: 1.1rem;
   font-weight: 500;
   text-decoration: none;
 }

 .navbar .nav-item a:hover {
   color: var(--bs-warning);
   text-decoration: underline;
   text-underline-offset: 10px;
   text-decoration-thickness: 2px;
   text-decoration-color: var(--bs-primary);
 }

 .navbar .nav-item a.active {
   text-decoration: underline;
   text-underline-offset: 10px;
   text-decoration-thickness: 2px;
   text-decoration-color: var(--bs-primary);
 }

 @media (min-width: 992px) {
   .navbar {
     position: absolute;

   }

   .navbar.scrolled {
     position: fixed;
     background-color: var(--bs-primary);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   }
 }

 @media (max-width: 991.98px) {
   .navbar {
     position: fixed;
     background-color: rgba(0, 0, 0, 0.95);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
   }

   body {
     padding-top: 70px;
   }
 }

 /* Navbar brand */
 .navbar-brand img {
   width: 120px;
   height: auto;
 }

 .search-bar input::placeholder {
   font-size: 0.8rem;
 }

 .search-bar input {
   border-radius: 50px 0 0 50px;
   border: 1px solid #b0a7a7;
   padding: 5px 10px;

 }

 .search-bar .form-control:focus {
   border: 1px solid #000 !important;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.6) !important;
   outline: none !important;
 }

 .search-bar button {
   background-color: white;
   border-radius: 0 50px 50px 0;
 }

 #sareeCarousel .carousel-item {
   height: 580px;
   background-color: #000;
 }

 #sareeCarousel .carousel-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   background-color: #000;
 }

 #sareeCarousel .carousel-caption {
   bottom: 10%;
   text-align: left;
 }

 @media (max-width: 992px) {
   #sareeCarousel .carousel-item {
     height: 450px;
   }
 }

 @media (max-width: 540px) {
   #sareeCarousel .carousel-item {
     height: 300px;
   }
 }

 .content_section {
   padding: 30px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
   color: white;
   overflow: hidden;

 }


 .content_section h2 {
   font-size: 2rem;
   color: white;
   font-weight: 700;
 }

 .content_section p {
   font-weight: 500;
   line-height: 1.6;
   color: white;
   font-size: 1rem;
 }

 @media (max-width: 768px) {
   .content_section {
     padding: 10px;
   }

   .content_section p {
     color: white;
     font-size: 0.7rem;
   }

 }

 .keyframes_text {
   font-size: 2rem;
   font-weight: 700;
   color: white;
 }


 .jump {
   display: inline-block;
   transform-origin: center bottom;
   animation: jump 0.9s ease-in-out infinite;
   color: orangered !important;
   font-size: 2rem;
 }

 /* keyframes: little up then back down */
 @keyframes jump {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-10px);
   }
 }

 .brands {
   margin-top: 20px;
   padding-left: 0;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
 }

 .brands li {
   flex: 0 1 calc(20% - 10px);
   display: flex;
   justify-content: center;
 }

 .brand {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 135px;
   border: 1px solid #ccc;
   border-radius: 10px;
   width: 100%;
   transition: transform 0.3s;
 }

 .brand img {
   max-width: 50%;
   height: auto;
 }

 .brand img:hover {
   transform: scale(1.02);
 }

 @media (max-width: 1200px) {
   .brands li {
     flex: 1 1 calc(25% - 10px);
   }
 }

 @media (max-width: 992px) {
   .brands li {
     flex: 1 1 calc(33.33% - 10px);
   }
 }

 @media (max-width: 768px) {
   .brands li {
     flex: 1 1 calc(50% - 10px);
   }
 }

 /* bikebridnads */
 .bg-categories {
   background-color: rgba(109, 108, 106, 0.23);
 }

 .bikebrands {
   margin-top: 20px;
   padding-left: 0;
   list-style: none;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
 }

 .bikebrands li {
   flex: 0 1 calc(20% - 10px);
   display: flex;
   justify-content: center;

 }

 .brandbike {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 150px;
   border: 4px solid #f8f7f7;
   border-radius: 20px;
   width: 100%;
   text-decoration: none;
   transition: transform 0.3s, box-shadow 0.3s;
   margin-top: 5px;
   padding: 10px;

 }

 .brandbike img {
   max-width: 40%;
   height: auto;
   margin-top: 10px;
 }

 .brandbike:hover {
   transform: scale(1.03);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
 }

 .brandname {
   margin-top: 10px;
   margin-bottom: 10px;
   color: #dfd1d1;
   font-weight: 600;
   text-align: center;
   font-size: 1rem;
 }

 /* Responsive design */
 @media (max-width: 1200px) {
   .bikebrands li {
     flex: 1 1 calc(25% - 10px);
   }
 }

 @media (max-width: 992px) {
   .bikebrands li {
     flex: 1 1 calc(33.33% - 10px);
   }
 }

 @media (max-width: 768px) {
   .bikebrands li {
     flex: 1 1 calc(50% - 10px);
   }
 }




 @media (max-width: 480px) {
   .keyframes_text {
     font-size: 1.4rem;
     font-weight: 700;
     color: white;
   }


   .jump {

     font-size: 1.4rem;
   }

   .brands li {
     flex: 1 1 calc(50% - 10px);
   }
 }

 /* videobackground */
 .video-background {
   overflow: hidden;
   position: relative;
   width: 100%;
   height: 100vh;
   overflow: hidden;
 }

 .video-background video {
   position: absolute;
   top: 50%;
   left: 50%;
   min-width: 100%;
   min-height: 100%;
   width: 300px;
   height: auto;
   z-index: -1;
   transform: translate(-50%, -50%);
   object-fit: contain;
 }

 .video-background-bike {
   overflow: hidden;
   position: relative;
   width: 100%;
   height: 70vh;
   overflow: hidden;
 }

 .video-background-bike video {
   position: absolute;
   top: 50%;
   left: 50%;
   width: auto;
   z-index: -1;
   transform: translate(-50%, -50%);
   object-fit: cover;
 }


 @media (max-width: 576px) {

   .video-background {
     overflow: hidden;
     position: relative;
     width: 100%;
     height: 50vh;
     overflow: hidden;
   }


 }

 .tire_container {
   position: relative;
   height: 250px;
   overflow: hidden;
 }

 .tire {
   width: 250px;
   height: 250px;
   background: url('/assets/Images/tyre.png') no-repeat center/contain;
   position: absolute;
   bottom: 1px;
   top: 1px;
   animation: moveLeftRight 3s linear infinite alternate;
 }

 @keyframes moveLeftRight {
   0% {
     left: 0;
     transform: rotate(0deg);
   }

   100% {
     left: calc(100% - 200px);
     transform: rotate(720deg);
   }
 }


 /* abousection */

 /* .content-section {
      padding: 60px 0;
      align-items: center;
      min-height: 70vh;
    } */
 /* .content-text{
    max-width: 900px;
  } */
 .content-text h2 {
   font-weight: 700;
   line-height: 1.2;
   font-size: 2rem;
 }

 .content-text p {
   color: #ccc;
   margin-top: 20px;
   line-height: 1.7;
   font-size: 0.9rem;


 }

 img {
   width: 100%;
   border-radius: 10px;
 }

 @media only screen and (max-width: 570px) {
   .content-text h2 {

     font-size: 1rem;
   }

   .content-text p {
     font-size: 0.8rem;

   }


 }


 /* flipcard */

 .flip-card {
   background-color: transparent;
   max-width: 450px;
   height: 350px;
   perspective: 1000px;

 }

 .flip-card-inner {
   position: relative;
   width: 100%;
   height: 100%;
   text-align: center;
   transition: transform 0.6s;
   transform-style: preserve-3d;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   backface-visibility: hidden;
   -moz-backface-visibility: hidden;
 }

 .flip-card:focus {
   outline: 0;
 }

 .flip-card:hover .flip-card-inner,
 .flip-card:focus .flip-card-inner {
   transform: rotateY(180deg);
 }

 .flip-card-front,
 .flip-card-back {
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 20px;
   border: 2px solid rgba(217, 8, 8, 0.206);
 }

 .flip-card-front {
   background: linear-gradient(to left, #6d707b, #0b3e77f9);
   color: white;
   z-index: 2;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 10px;
 }

 .flip-card-front h3 {
   font-size: clamp(0.8rem, 2vw, 2rem);
   font-weight: 600;
 }

 .flip-card-front img {
   max-height: 100px;

 }


 .flip-card-back {
   background: linear-gradient(to left, #747b90, #0b3d77);
   color: white;
   transform: rotateY(180deg);
   z-index: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 10px;
 }

 .flip-card-back h3 {
   font-size: clamp(0.8rem, 2vw, 2rem);
   font-weight: 600;
 }

 .flip-card-back img {
   max-height: 100px;

 }

 /* 
testimonial */

 .testimonail-background-image {
   background-image: url('/assets/Images/tools\ parts.jpg');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   overflow: hidden;
 }

 .testimonial-card {
   background-color: #000000c1;

   border-radius: 10px;
   padding: 2rem;
   text-align: center;
   color: white;

 }

 .cutomer_heading {
   display: inline-block;
   text-align: center;
   font-size: 1.7rem;
   color: white;

 }

 .testimonial-card h5 {
   font-size: 1.2rem;
   font-weight: 600;
   color: white;
 }

 .testimonial-card p {
   font-size: 0.9rem;
   line-height: 1.4;
   text-align: justify;
   font-weight: 400;
 }

 .testimonial-img {
   width: 80px;
   height: 80px;
   object-fit: cover;
   border-radius: 50%;
   margin-bottom: 1rem;
 }

 .carousel-indicators [data-bs-target] {
   background-color: white;
 }

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

   .testimonial-card p {
     font-size: 0.7rem;
     line-height: 1.4;
     text-align: justify;
     font-weight: 400;
   }
 }

 .count {
   font-size: 1.9rem !important;
   color: black
 }

 .counterpara {
   color: black !important;
   font-weight: 500 !important;
   font-size: 1rem !important;
   margin-top: 1px !important;
 }




 /* category---page */

 .pagination-banner {
   margin-top: 80px;
   min-height: 300px;
   background: url('/assets/Images/en.jpg') no-repeat center/cover;
   position: relative;
   display: flex;
   align-items: flex-end;
   justify-content: center;
   color: #fff;
   text-align: center;
   padding: 40px 20px;
 }

 .pagination-banner::after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.4);
   z-index: 1;
 }

 .pagination-banner .orderlist {
   position: relative;
   z-index: 2;
 }

 .pagination-banner .orderlist h2 {
   font-size: 1.8rem;
   margin-bottom: 10px;
   text-transform: capitalize;
   letter-spacing: 1px;
 }

 .pagination-banner .orderlist ol {
   display: flex;
   gap: 10px;
   list-style: none;
   justify-content: center;
   color: #ddd;
   font-size: 1rem;
 }

 .pagination-banner .orderlist ol li a {
   color: #fff;
   text-decoration: none;
   transition: color 0.3s ease;
 }

 .pagination-banner .orderlist ol li a:hover {
   color: #ffd700;
 }

 .pagination-banner .orderlist ol li::after {
   content: "/";
   margin-left: 10px;
   color: #bbb;
 }

 .pagination-banner .orderlist ol li:last-child::after {
   content: "";
 }

 @media screen and (max-width: 576px) {
   .pagination-banner {
     margin-top: 20px;
     min-height: 200px;
     padding: 30px 10px;
   }

   .pagination-banner .orderlist h2 {
     font-size: 1.5rem;
   }

   .pagination-banner .orderlist ol {
     font-size: 0.85rem;
   }
 }

 .product-serach input {

   max-width: 300px;

 }

 .product-serach input::placeholder {
   font-size: 0.85rem;

 }

 .allcategories {
   font-weight: 700;
   font-size: 1.2rem;
 }

 #sidebar-categories {
   position: fixed;
   top: 0px;
   left: -250px;
   width: 250px;
   height: 100%;
   background-color: black;
   padding: 1rem;
   transition: left 0.3s ease;
   z-index: 5;
   box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
   overflow-y: scroll;
   scrollbar-width: none;
 }

 #sidebar-categories.active {
   left: 0;
 }

 /* Hide sidebar toggle button on large screens */
 @media (min-width: 768px) {

   #sidebar-categories {
     position: static;
     width: auto;
     height: auto;
     box-shadow: none;
     left: 0;
   }

   #categoryToggle {
     display: none;
   }

   #closeSidebarcategories {
     display: none;
     margin-top: 20xp;
   }
 }

 .categoerylist-items {
   display: flex;
   padding: 10px;
   gap: 6px;
 }

 .brand-heading {
   font-size: 1.1rem;
   margin-top: 10px;
   font-weight: 500;
 }

 .categoerylist-items input {
   font-size: 0.85rem;
 }

 .categoerylist-items label {
   font-size: 0.85rem;
 }



 /* prodcuct card */

 .product {
   max-width: 450px;
   background: #fff;
   overflow: hidden;
   text-align: center;
   border-radius: 25px;
   margin-top: 10px;


 }

 .product:hover {
   transform: translateY(-10px);
 }

 .product .img {
   width: 100%;
   height: 230px;
   overflow: hidden;
 }

 .product .img img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   transition: transform 0.3s;
 }

 .product:hover .img img {
   transform: scale(1.1);
 }

 .product .info {
   background-color: #181717;
   padding: 0px;
   margin: 0px;
 }

 .product .info h3 {
   font-size: 1.2rem;
   font-weight: 600;
   color: white;
   padding-top: 10px;
 }

 .product-short-info {
   color: wheat;
   font-weight: 400;
   font-size: 0.95rem;
   margin-top: 0px;
   margin-bottom: 3px;
   padding-left: 4px;
   padding-right: 4px;
 }

 .partno {
   font-size: 1rem;
   color: blue;
   font-weight: 500;
   margin-top: 0px;
   margin-bottom: 2px;

 }

 .partno strong {
   font-size: 1rem;
   color: white;
   font-weight: 600;
   margin-top: 0px;
   margin-bottom: 2px;

 }

 .product-price {
   font-size: 2rem;
   font-weight: 700;
   color: white;
   margin-top: 0px;
   margin-bottom: 0px;
 }

 .product .info button {
   padding: 10px 20px;
   border: none;
   border-radius: 25px;
   background: #0937dc;
   color: #fff;
   cursor: pointer;
   transition: background 0.3s;
   margin-bottom: 10px;
 }

 .product .info button:hover {
   background: black;
 }

 .total-products-text {
   max-width: 300px;
 }

 .total-products-text span {
   font-size: 1.1rem;
   font-weight: 500;

 }

 @media (max-width: 476px) {

   .product-serach input {
     max-width: 100px;

   }

   .total-products-text {
     max-width: 300px;
   }

   .total-products-text span {
     font-size: 0.86rem;


   }

   #sidebar-categories {
     position: fixed;
     top: 70px;
   }

 }



 /* category---page--end */

 /* footer */
 /* REMOVE THIS, USE YOUR OWN  */
 .footer_Header-main {
   font-size: clamp(0.9rem, 2vw, 1.3rem);
   font-weight: 500;

 }

 .footer-short {
   font-size: clamp(0.9rem, 1vw, 1.5rem);
   font-weight: 400;
 }

 .footer_Header {
   font-size: clamp(0.9rem, 2vw, 1.1rem);
   font-weight: 600;
 }

 .footer-list li a {
   font-size: 0.9rem;
   margin-top: 2px;
   font-weight: 500;
   color: whitesmoke;
 }

 .footer-list li a:hover {
   color: wheat;
   transform: scale(1.08);
   transition: all 0.3s ease;
 }



 /* productdeatilspage */
 /* General Reset and Base Styles */
 .pdp-card {
      max-width: 750px;
      margin: 10px auto;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
  

    .thumbnail-slider img {
      width: 100%;
      min-height: 300px;
      max-height: 300px;
      border-radius: 10px;
      object-fit: cover;
    }
    .thumbnailcontrol{
        max-height: 150px;
        min-height: 150px;

    }
    .thumbnailcontrol img{
         max-height: 150px;
        min-height: 150px;
        object-fit: contain;
         cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s ease;
    }
.star{
  color: yellow;
}
.pdp-card h2{
  font-size: 2rem;
  color: white;
  font-weight: 600;
}
.pdp-about{
  color: white;
}
.delevery{
  color: white;
}
.decription-heading{
  color: white;
  font-size: 1.6rem;
  font-weight: 500;
}
.intro-about{
  color: white;
  font-weight: 500;
  font-size: 1rem;
}
.pdp-buttons .pdp-cart{
  background-color: white;
  border: 5px solid white;
  border-radius: 10px;
  padding: 4px;
  font-size: 1rem;
  font-weight: 500;
}
.pdp-buttons .pdp-btn:hover {
  transform: scale(1.07);
  color: gray;
}

.pdp-buttons .pdp-buy{
  background-color: rgb(231, 145, 26);
  border: 5px solid rgb(231, 145, 26);
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 1rem;
  font-weight: 500;
  color: white;
}
.pdp-dot{
  color: white;
}
.pdp-bullet-text{
  color: white;
  font-size: 1rem;
  font-weight: 500;
}
.price_product{
  color: white;
  font-weight: 600;
  font-size: 1.8rem;
}
    /* .thumb-img.active {
      border: 2px solid #D6391A;
      transform: scale(1.05);
    } */

    .thumb-img:hover {
      opacity: 0.8;
    }
    @media (max-width:576px) {
       .pdp-card {
      max-width: 350px;
   
    }
    
    .thumbnail-slider img {
      width: 100%;
      min-height: 250px;
      max-height: 250px;
      border-radius: 10px;
      object-fit: cover;
    }

        .thumbnailcontrol{
        max-height: 100px;
        min-height: 100px;

    }
    .thumbnailcontrol img{
         max-height: 100px;
        min-height: 100px;
       
    }

    }


    /* tabs below cart */
    .review-label{
      font-size: 1rem;
      margin-bottom: 4px;
      font-weight: 500;
    }
    .review-tab{
      background-color: rgb(233, 230, 224);
    }
 
      .card-review{
  
    box-shadow:0 6px 18px rgba(13,110,253,0.06)
}
 .rating-stars {
    display:flex;
    gap:6px;
    align-items:center
}
 .star{
    font-size:18px;
    color:var(--muted)
}
 .star.filled{
    color:gold
}
 /* .avg-badge{
    background:linear-gradient(90deg,#0d6efd,#6610f2);
    color:#fff;
    padding:6px 10px;
    border-radius:999px;
    font-weight:600
} */
 .review-form textarea{
    resize:vertical
}
 .required::after{
    content:' *';
    color:#d63384
}
/* custom radio stars for form */
 .star-radio{
    display:inline-block;
    font-size:20px;
    padding:2px 6px;
    cursor:pointer
}
 input[type="radio"]{
    display:none
}
 input[type="radio"] + label{
    color:black
}
 input[type="radio"]:checked + label{
    color:gold
}