.car-tabs {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
    border-bottom: 1px solid #ccc;
}

.tab-link {
    padding: 10px 20px; /* Adjust padding for better spacing */
    cursor: pointer;
    position: relative; /* Ensure proper positioning for active state */
}

.tab-link:hover {
    background-color: #eaeaea;
}
.tab-link.active {
    font-weight: bold;
    color: #000; /* Highlight active tab */
    border-bottom: 2px solid#f75d34; /* Optional: add an underline to the active tab */
}
.car-tab-content {
    padding-top: 10px;
    position: relative; /* Ensure child elements can be positioned relative to this container */
    min-height: 280px; /* Optional: Ensures container has a minimum height */
}

/* Styling for the car slider */
/* Ensure the container is visible */
.swiper-container.car-slider {
    width: 100%; /* Adjust based on your layout */
    height: auto; /* Allow height to adjust based on content */
    overflow: hidden;
}

/* Ensure slides are correctly displayed */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%; /* Matches the container height */
    box-sizing: border-box;
}
/* Styling for swiper wrapper (contains the slides) */
.swiper-container.car-slider .swiper-wrapper {
    display: flex;  /* Flexbox to align slides horizontally */
}

/* Styling for individual slides in the car slider */
.swiper-container.car-slider .swiper-slide {
    width: auto;  /* Width depends on content inside */
    flex-shrink: 0;  /* Prevent shrinking of slides */
    margin-right: 10px;  /* Space between slides */
}

/* Product card styling inside each swiper slide */
.swiper-container.car-slider .product-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.swiper-container.car-slider .product-card img {
    max-width: 100%;
    max-height: 200px;  /* Adjust image size */
    object-fit: contain;  /* Ensure the image fits within the container */
    border-radius: 8px;
}

.swiper-container.car-slider .product-card h3 {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.swiper-container.car-slider .product-card p {
    font-size: 14px;
    color: #777;
}

/* Navigation buttons for car slider */
/* Align navigation buttons to the car slider */
.car-slider {
    position: relative; /* Ensure relative positioning for navigation alignment */
}

.car-slider-button-next,
.car-slider-button-prev {
    position: absolute;
    overflow: visible;
    top: 50%; /* Vertically center */
    transform: translateY(-50%);
    z-index: 99; /* Ensure the buttons are above the slider content */
    width: 50px !important;
    height: 50px !important;
    background: #fff; /* Circle background color */
    color: grey; /* Arrow color */
    border-radius: 50%; /* Make it circular */
    box-shadow: 0 8px 12px 0 rgba(36, 39, 44, 0.15); /* Add shadow */
    display: flex; /* Center align the arrow inside the circle */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-indent: 0; /* Make sure text-indent is 0 for visible content */
       
}

/* Adjust left and right button positions */
.car-slider-button-next {
    right: 2px!important; /* Moves the button further outward */
   
}

.car-slider-button-prev {
    left: -15x!important; /* Moves the button further outward */
   
}

/* Customize the arrow pointer */
.car-slider-button-next::after,
.car-slider-button-prev::after {
    font-size: 18px; /* Arrow size */
    color: grey; /* Arrow color */
}
.car-slider,
.brand-slider {
    --swiper-navigation-size:30px; /* Adjust the size of the arrow */
    --swiper-navigation-top-offset: 50%; /* Vertically center */
   
    --swiper-navigation-color: grey; /* Change arrow color */
  }

  .no-products-message {
    position: absolute; /* Position relative to the parent container */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 18px;
    color: #555;
    background-color: #f9f9f9; /* Light background to make the message stand out */
    border: 1px solid #ddd; /* Optional: Adds a border for visibility */
    border-radius: 5px; /* Optional: Adds rounded corners */
    padding: 20px; /* Adds padding for the text inside */
    z-index: 1; /* Ensures the message appears above any other content */
    height: 100%; /* Ensures the message spans the full height of the container */
    width: 100%; /* Ensures it spans the full width */
    box-sizing: border-box; /* Includes padding and border in the width/height calculation */
}
.no-data-message p {
    margin: 0;
    color: #777;
}
.swiper-slide.no-products {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    color: #555;
    font-size: 16px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
}
.brand-tab-content {
    padding-top: 10px;
    position: relative; /* Ensure child elements can be positioned relative to this container */
}

/* Ensure the container is visible */
.swiper-container.brand-slider {
    width: 100%; /* Adjust based on your layout */
    height: 180px;; /* Allow height to adjust based on content */
    overflow: hidden;
}

/* Ensure slides are correctly displayed */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%; /* Matches the container height */
    box-sizing: border-box;
}
/* Styling for swiper wrapper (contains the slides) */
.swiper-container.brand-slider .swiper-wrapper {
    display: flex;  /* Flexbox to align slides horizontally */
}

/* Styling for individual slides in the car slider */
.swiper-container.brand-slider .swiper-slide {
    width: auto;  /* Width depends on content inside */
    flex-shrink: 0;  /* Prevent shrinking of slides */
    margin-right: 4px;  /* Space between slides */
    transform: none; 
}
.swiper-container.brand-slider .brand-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    width: 200px;
    height:160px;
    
    border: 1px solid #ccc;
}
.swiper-container.brand-slider .brand-card img {
    max-width: 100%;
    height: 80px;  /* Adjust image size */
    object-fit: contain;  /* Ensure the image fits within the container */
    border-radius: 8px;
}

.swiper-container.brand-slider .brand-card h3 {
    margin-top: 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

.swiper-container.brand-slider .brand-card p {
    font-size: 14px;
    color: #777;
}