/* Container for the product gallery */


.breadcrumb-links:hover {
    color: rgb(128, 128, 128) !important; /* Dark black color on hover */
}
    .breadcrumb-container{
		margin-left: 20px;
		margin-top: 10px;
		margin-bottom: 10px;
		
	}
.search-vehicle-container {
    display: block;
    justify-content: space-between; /* Space between title and form */
    align-items: center; /* Center vertically */
    padding: 20px;
    
}
@media screen and (max-width: 600px) {
    .btn.btn-block.text-uppercase {
        padding: 12px;
        font-size: 14px;
        border-radius: 3px;
        width: 100%;
    }
}
.search-vehicle-title2 {
    padding-right: 20px;
    margin-top: -22px;
margin-bottom:20px;
}

.serch-vhecles{
	font-size: 30px;
	font-weight: bold;
	margin-left: -90px;
}
@media (max-width: 768px) {
    .serch-vhecles {
        font-size: 25px; /* Smaller font size for mobile */
        margin-left: -20px; /* Adjusted margin for better alignment */
    }
}

@media (max-width: 480px) {
    .serch-vhecles {
        font-size: 25px; /* Even smaller font for very small screens */
        margin-left: 0; /* Remove negative margin if needed */
        text-align: center; /* Center text on smaller screens */
    }
}
.more123{
	margin-top: 30px;
}
/*.search-vehicle-title2::after {
    content: "";
    display: block;
    width: 60px;
    border-bottom: 5px solid rgb(251, 125, 0);
    position: absolute;
    left: 0;
    margin-left: 145px;
}*/

@media only screen and (max-width: 600px) {
  .slick-prev1, .slick-next2 {
    display: none !important; /* Use !important to override any other styles */
  }
}

@media (max-width: 767px) {
    .search-container1 {
/*        margin: 0 auto;
*/        padding: 10px;
        margin-top: 20px;
    }
}

/* Styles when the container is active */
#vhicle-car.active {
    background-color: #717171; /* Change background color */
}

.search-vehicle-form__controls {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 10px;
    width: fit-content;
    margin-bottom: 10px;
    margin-left: -80px;
}
.search-section-vehicle__action {
    display: flex; /* Use flexbox for layout */
   gap: 10px;
}


@media (max-width: 768px) {
    .search-section-vehicle__action {
        display: block; /* Disable flexbox and use block layout */
    }

    .search-section-vehicle__action__item {
        margin-bottom: 10px; /* Add space between items */
        width: 98%; /* Ensure items take full width */
    }
}
@media (max-width: 768px) {
    .btn23.btn-block23.text-uppercase23 {
        width: 96%; /* Set width to 98% for mobile screens */
        margin: 0 auto; /* Center the button */
    }
}
.searchster-categories-grid {
    display: flex;
    width: 100%;
}

/*.main-category-image {
    flex: 1;
}*/
   
.h-9 {
    height: 2.25rem;
}
.w-12 {
    width: 4rem;
}	
.text-xs {
    font-size: 1.2rem !important;
    line-height: 1.8rem !important;
    color: white;
    font-weight: bold;
}
.main-category-image__img {
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.other-subcategories {
    display: flex;
    flex-direction: column;
    flex: 1;
    display: flex;
    border-radius: 8px;

    margin-left: -100px;
    border: 1px solid;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
        border: 1px solid rgb(224, 224, 224) !important;
}
.other-subcategory-item {
    margin-bottom: 10px;
    cursor: pointer;
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.3s;
        border: 1px solid rgb(224, 224, 224) !important;
}

.other-subcategory-item:hover {
    background-color: #f0f0f0;
}


#filter-count{
	display: none;
}
select {


  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px !important;

  padding: 8px 30px 8px 12px !important; /* top/bottom + left padding + space for arrow */

  box-sizing: border-box !important;
}


.search-vehicle-form__controls__item select {
  width: 160px; /* Set a fixed width */
  padding: 10px; /* Add padding for better appearance */
  font-size: 15px; /* Adjust font size as needed */
  background-color: white; /* Set background color for select boxes */
  color: rgb(0, 0, 0); /* Set text color */
}
.search-vehicle-form__controls__items select {
/*  width: 300px;  Set a fixed width 
*/  padding: 10px; /* Add padding for better appearance */
  font-size: 16px; /* Adjust font size as needed */
  background-color: white; /* Set background color for select boxes */
  color: rgb(0, 0, 0); /* Set text color */
  margin-left: 10px;
}


.h2-section__names {
    color: rgb(255, 255, 255);
    text-shadow: 2px 0 rgb(255, 113, 113), -2px 0 rgb(255, 0, 0), 0 3px rgb(255, 125, 125), 0 -2px rgb(255, 0, 0), 2px 2px rgb(255, 0, 0), -2px -2px rgb(255, 0, 0), 2px -2px rgb(255, 0, 0), -2px 2px rgb(255, 0, 0);
font-size: 30px;
}
@media (max-width: 768px) {
    .h2-section__names {
        font-size: 25px; /* Smaller font size for mobile */
    }
}

@media (max-width: 480px) {
    .h2-section__names {
        font-size: 25px; /* Even smaller font for very small screens */
       
    }
}

/* Styles when the container is active */
#vhicle-car.active {
    background-color: #717171; /* Change background to orange */
}
/* Mobile screens */
@media (max-width: 767px) {
    .search-vehicle-form__controls {
        flex-direction: column;  /* Stack items vertically */
        padding: 0px;  /* Adjust padding */
        border-radius: 8px;  /* Slightly reduce border-radius */
        width: 100%;  /* Make the container full width */
        margin: 0;  /* Remove margin */
        justify-content: flex-start;  /* Align items at the start */
        margin-top: -20px;
    }
@media (max-width: 768px) {
    .product-details {
        padding: 10px;          /* Reduce padding for mobile */
        margin-left: 10px;      /* Decrease margin-left for mobile */
        margin-right: 0px;     /* Decrease margin-right for mobile */
        gap: 6px;               /* Reduce gap between elements for mobile */
        margin-left: 0px;
    }
}
@media (max-width: 768px) {
    .icon-container img {
        width: 100%;     /* Set the image to take full width on mobile */
        height: auto;    /* Keep the aspect ratio */
    }
}
    .search-vehicle-form__controls__item {
        margin-bottom: 10px;  /* Add space between items */
        width: 100%;  /* Make each item full width */
    }

    .search-vehicle-form__controls__item select {
        width: 100%;  /* Make select elements full width */
        padding: 8px;  /* Reduce padding */
        font-size: 14px;  /* Reduce font size */
    }
}

.form-control:disabled, .form-control[readonly] {
    background-color: white;
    color: #b3b3b3;
    opacity: 1;
    border-color: #ced4da;
    cursor: not-allowed;
}
.search-vehicle-form__controls__item {
    margin-right: 10px;
}
.h2-section__name {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}
.h2-section__name {
    color: rgb(255, 255, 255);
    text-shadow: 2px 0 rgb(255, 0, 0), -2px 0 rgb(255, 0, 0), 0 3px rgb(255, 0, 0), 0 -2px rgb(255, 0, 0), 2px 2px rgb(255, 0, 0), -2px -2px rgb(255, 0, 0), 2px -2px rgb(255, 0, 0), -2px 2px rgb(255, 0, 0);
}

/* Base styles for fitment-row */
.fitment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    min-height: 40px;
}

/* Desktop styles */
.desktop-view {
    display: flex; /* Show on desktop */
}
.fitment-rows {
    display: none !important; /* Hide by default for desktop */
}

/* Show only on mobile screens */
@media (max-width: 767px) {
    .fitment-rows {
        display: flex !important; /* Change to flex to align items, or block if you prefer */
        /* Add any additional mobile styling here if needed */
    }
}

.boxs {
    text-align: center; /* Center text within the box */
        display: flex;
    align-items: center;
    background-color: rgb(247, 247, 247);
    border: 2px solid #ffc600;
    cursor: pointer;
    font-size: 13.5px;
    padding: 8px 12px;
    min-height: 40px;
    text-align: left;
    width: 250px;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-right: 40px;
}

.icon-containers img {
    width: 20px; /* Adjust width of the image as needed */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 2px; /* Space between image and text */
    margin-left: 50px;
}

.button-texts {
    font-size: 14px; /* Adjust font size for mobile */
    color: #333; /* Text color */
padding-left: 8px;
font-weight: bold;
}
/* Media query for mobile devices */
@media (max-width: 767px) {
    .desktop-view {
        display: none !important; /* Use !important to override any other styles */
    }
    .mobile-view {
        display: flex; /* Show mobile view */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items */
    }
}

@media (max-width: 767px) {
    .search-vehicle-container {
        display: block; /* Hide search-vehicle-container on mobile screens */
    }
}
.h2-section {
    display: block;
    margin: 0 auto;
/*    margin-right: 1000px;  
  margin-bottom: 20px;/* 
      text-align: center; /* Center content horizontally */

    font-size: 40px; /* Adjusted font size for mobile */
    color: rgb(0, 0, 0);
    font-weight: 600;
    line-height: 1.4;
    margin-left: 50px;
}
select.form-control optgroup {
    font-size: 12px;
    color: #12477a
}
select.form-control option {
    color: #717171;
    font-size: 14px
}
/* Media query for smaller screens like mobile devices */
@media screen and (max-width: 600px) {
    .h2-section {
        margin-right: 0; /* Reset right margin for mobile */
        margin-left: 20px; /* Adjusted left-side margin for mobile */
        font-size: 24px; /* Further adjusted font size for smaller screens */
    }
}


.clear-searcha {
    position: absolute;
    right: 140px;
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: black;
}


.btn.btn-block.text-uppercase {
 background-color: rgb(0, 0, 0); /* Dark blue button */
    color: #FFFFFF; /* White text */  
  padding: 12px; /* Add padding for better appearance */
  font-size: 16px; /* Adjust font size as needed */
 
  border-radius: 5px; /* Adjust the value as needed */
    cursor: pointer; /* Add pointer cursor */
/*font-weight: bold;
*/}


  .modals {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal__fade {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
}

.modal__body {
       position: relative;
    margin: 2% auto;
    padding: 20px;
    width: 90%;
    max-width: 970px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.5s;
    overflow: hidden;
    margin-top: 100px;
}

/* Media query for smaller screens like mobile devices */
@media screen and (max-width: 600px) {
    .modal__body {
        margin: 10% auto; /* Adjusted margin for mobile */
        padding: 10px; /* Adjusted padding for mobile */
        width: 95%; /* Adjusted width for mobile */
        max-width: none; /* Removed max-width for mobile */
        height: auto; /* Auto height for mobile */
        max-height: none; /* Removed max-height for mobile */
    }
}



.modal__close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: #000;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

.modal__close:hover,
.modal__close:focus {
    color: #f00;
    text-decoration: none;
    cursor: pointer;
}


.modal__heading {
   margin-bottom: 10px;
    font-size: 30px;
    color: #12477a;
    font-weight: 600;
    line-height: 1.2;
}
.searchster-categories-grid__item img.main-levels {
    height: 150px;
    margin-bottom: 10px;
}
.searchster {
    margin-top: 20px;
    overflow-y: auto; /* Enable scrolling */
/*    max-height: calc(100% - 200px);  Adjust as needed 
*/}

/* Adjust the searchster-categories-grid class to enable scrolling */
.searchster-categories-grid {
    overflow-y: auto; /* Enable scrolling */
/*    max-height: calc(100% - 200px);  Adjust as needed 
*/}

.searchster-filters__content {
    margin-bottom: 10px;
    font-size: 16px;
}

.searchster-filters__list {
    display: flex;
    flex-wrap: wrap;
    margin-top: -20px;
/*    margin-left: -20px;
*/}

.searchster-filters__list__item {
    background-color: #edfafe;
    padding: 5px 10px;
    border-radius: 3px;
    margin-right: 5px;
    margin-bottom: 5px;
}
.searchster-filters {
      margin: 20px;
    }
    .searchster-filters__list__item {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
    }
    .searchster-filters__list__item__name1 {
      margin-right: 10px;
    }
    .searchster-filters__list__item__close {
      cursor: pointer;
      color: red;
      display: none;
    }
.searchster-categories-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    cursor: pointer;
}

.searchster-categories-grid {
    display: flex;
    flex-wrap: wrap;
}



@media only screen and (max-width: 768px) {
    .searchster-categories-grid__item {
        width: calc(50% - 14px); /* Two items per row on smaller screens */
    }
}


/* Animation for the modal */
@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
} 

.search-form__filed__control {
    height: 44px;
    border-radius: 4px 0 0 4px;
    border-width: 1px 0 1px 1px;
    -webkit-appearance: none;
}
    
 
.form-controlrs {
    display: flex;
    width: 90%;
    padding: .375rem .75rem;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
* {
  box-sizing: border-box;
}


 .searchster-categories-breadcrumbs {
            list-style: none;
            padding: 0;
        }
        .searchster-categories-breadcrumbs__item {
            display: inline;
            margin-right: 5px;
        }
        .searchster-categories-breadcrumbs__item__link {
            cursor: pointer;
            text-decoration: underline;
        }
 /* Grid container */
.searchster-question__option {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Adjusted width */
    gap: 14px;
}

/* Grid items */
.searchster-question__option__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 5px;
    border: 2px solid #c0cce6;
    border-radius: 5px;
    transition: all .3s;
    text-align: center;
    cursor: pointer;
}

/* Hover effect */
.searchster-question__option__item:hover {
    background-color: #e0e6f8; /* Change to your desired hover background color */
}

/* Media query for smaller screens like mobile devices */
@media screen and (max-width: 600px) {
    .searchster-question__option {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Adjusted width for smaller screens */
        gap: 10px; /* Adjusted gap */
    }
}
/* For wider screens, change item width and padding */
@media (min-width: 760px) {
    .searchster-question__option__item {
        padding: 25px 5px;
        border: 2px solid #edfafe;
        font-size: 16px;
    }
}

	 ngx-searchster-nav,
      ngx-searchster-question {
       display: none;
}
.product-box-contain .product-detail ul li.name{
	max-width: 350px;
}
.quantitys {
	margin-left: 20px;
	margin-right: 20px;
    display: flex;
    align-items: center; /* Vertically center align items */
/*    gap: 10px;  Space between elements 
*/    font-family: Arial, sans-serif; /* Example font-family, adjust as needed */
    font-weight: bold;
/*    margin-top: -20px;
*/}
.screen-reader-text1{
	margin-top: 10px;
}
.quantity-label {
    font-weight: bold; /* Make label text bold */
    color: #333; /* Color for the label */
    margin-right: 10px; /* Space between label and buttons/input */
}

.qty-btn {
    background-color: #f5f5f5; /* Light background for buttons */
    border: 1px solid #ccc; /* Border for buttons */
    border-radius: 4px; /* Rounded corners for buttons */
    padding: 8px; /* Padding inside buttons */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 16px; /* Font size for button icons */
    display: flex;
    align-items: center; /* Center icon vertically */
    justify-content: center; /* Center icon horizontally */
    transition: background-color 0.3s ease; /* Smooth background color transition */
}


.intro-section{
	margin-bottom: -50px;
}
.qty-input {
    width: 60px; /* Fixed width for the input */
    padding: 8px; /* Padding inside input */
    border: 1px solid #ccc; /* Border for input */
    border-radius: 4px; /* Rounded corners for input */
    text-align: center; /* Center text inside input */
    font-size: 16px; /* Font size for input */
    font-weight: bold; /* Bold text inside input */
}

.quantity-minus i,
.quantity-plus i {
    font-size: 18px; /* Adjust icon size if needed */
}

.heading-vehicle{
	margin-left: 20px;
	margin-right: 20px;
	border-radius: 8px;
}
@media (max-width: 767px) {
    .heading-vehicle {
        margin-left: 10px;  /* Reduce margin for smaller screens */
        margin-right: 10px; /* Reduce margin for smaller screens */
        font-size: 20px;    /* Optional: Adjust font size for smaller screens */
    }
}
 .fitment-row {
    display: flex;
    justify-content: space-between; /* Aligns boxes to both ends */
    align-items: center;
    padding: 10px;
    min-height: 40px;
  }

  .box {
   display: flex;
    align-items: center;
    background-color: rgb(247, 247, 247);
    border: 2px solid #ffc600;
    cursor: pointer;
    font-size: 13.5px;
    padding: 8px 12px;
    min-height: 40px;
    text-align: left;
    width: 30%;
    margin-top: 5px;
    margin-bottom: 10px;
    margin-right: 40px;
  }
.fitment-button {
    display: flex;
    align-items: center;
    background-color: rgb(247, 247, 247);
    border: 2px solid #ffc600;
    cursor: pointer;
    font-size: 13.5px;
    padding: 8px 12px;
    min-height: 40px;
    text-align: left;
    width: 60%;
    margin-top: 5px;
    margin-bottom: 10px;
}
.icon-container {
    display: flex;
    align-items: center;
    margin-right: 8px;
}
.az_DOb {
    height: 10px;
    width: 10px;
    position: relative;
    display: flex;
    right: 7px;
    top: 7px;
}
.delivery-info {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
}
.delivery-info .az_El {
    width: 25px;
    height: 25px;
    margin-right: 5px;
        margin-bottom: 10px;

}
.delivery-info p {
    margin: 0;
    color: rgb(0, 0, 0);
    font-size: 16px;
    margin-left: 7px;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 2px;
}
.button-styles {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    width: 250px; /* Fixed width for the button */
   margin-top: -10px;
}

  .h2-section__names {
    font-weight: bold; /* Make the vehicle section name bold (optional) */
  }


.button-text {
    font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
    font-size: 14px;
    color: #484848;
}
.highlight-text {
    font-weight: 700;
}
.underline-text {
    text-decoration: underline;
    cursor: pointer;
    color: black;
}
.underline-text:hover {
    text-decoration: underline;
}
html {
    scroll-behavior: smooth;
}

/* Base styles for mobile screens (up to 767px) */
@media (max-width: 767px) {
    /* Container for the product gallery */
    .product-gallery {
        flex-direction: column; /* Stack elements vertically */
    }

    /* Left side: Gallery of small images */
    .gallery-list {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Responsive grid */
        margin-left: 0; /* Remove left margin */
    }

    .gallery-list li {
        width: 100px; /* Adjust width for mobile */
        height: 100px; /* Adjust height for mobile */
    }

    /* Center: Main product image */
    .product-big-img {
        flex: 1; /* Adjust flex-grow */
        text-align: center; /* Center image */
        margin-right: 0; /* Remove right margin */
    }

    .product-big-img img {
        max-width: 100%; /* Ensure image fits within container */
        height: auto; /* Maintain aspect ratio */
    }

    /* Right side: Product details */
    .product-about {
        flex: 1; /* Adjust flex-grow */
        padding-left: 0; /* Remove left padding */
        margin-right: 0; /* Remove right margin */
        margin-top: 20px; /* Adjust top margin */
    }

    .product-big-imgs {
        width: 100%; /* Full width of the container */
        max-width: 100%; /* Remove max-width constraint */
        margin: 0 auto; /* Center container */
    }

    .product-titlee {
        font-size: 20px; /* Adjust font size */
        margin: 10px 0; /* Adjust margins */
    }

    .containerw {
        flex-direction: column; /* Stack columns vertically */
        margin-left: 0; /* Remove left margin */
        margin-right: 0; /* Remove right margin */
    }

    .left-side, .right-side {
        flex: 1; /* Adjust flex-grow */
        padding: 10px; /* Add padding */
    }

    .product__description {
        font-size: 16px; /* Adjust font size */
    }

    .productspecication {
        font-size: 1.2em; /* Adjust font size */
        margin-right: 0; /* Remove right margin */
    }

    .quantity-plus.qty-btn, .quantity-minus.qty-btn {
        padding: 8px 12px; /* Adjust button size */
    }

    .show-more-button {
        font-size: 14px; /* Adjust font size */
    }

    .modal-content {
        width: 90%; /* Adjust modal width */
    }
}

/* Additional adjustments for very small screens (up to 479px) */
@media (max-width: 479px) {
    .product-titlee {
        font-size: 18px; /* Further adjust font size */
    }

    .product__description {
        font-size: 14px; /* Further adjust font size */
    }

    .btn.btn-block.text-uppercase {
        padding: 13px; /* Adjust padding */
        font-size: 16px; /* Adjust font size */
        width: 98%;
    }

    .quantity-plus.qty-btn, .quantity-minus.qty-btn {
        padding: 6px 10px; /* Adjust button size */
        font-size: 14px; /* Adjust font size */
    }

    .product-big-img img {
        width: 100%; /* Ensure full width */
        height: auto; /* Maintain aspect ratio */
    }

    .modal-content {
        width: 95%; /* Adjust modal width */
    }
}
/* Media query for tablets and mobile screens (up to 767px) */
@media (max-width: 767px) {
    .specification-row {
/*        flex-direction: column;  Stack items vertically 
*/        padding: 10px 5px; /* Adjust padding for smaller screens */
        width: 100%; /* Full width of the container */
        box-sizing: border-box;
    }

    /* Optional: Adjust spacing and text alignment */
    .specification-row > div {
        margin-bottom: 10px; /* Space between stacked items */
        text-align: left; /* Align text to the left */
    }
}

 .btn23.btn-block23.text-uppercase23 {
   
    background-color: #FF5722;
    color: #FFFFFF;
    padding: 12px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
/*    font-weight: bold;
*/}



.btn23 {
   display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.text-uppercase23 {
    text-transform: uppercase !important;
}


.modals {
		    display: none;
		    position: fixed;
		    z-index: 1000;
		    left: 0;
		    top: 0;
		    width: 100%;
		    height: 100%;
		    overflow: auto;
		    background-color: rgba(0, 0, 0, 0.5);
		    justify-content: center;
		    align-items: center;
		}
		
		
		.modal-contents {
		       background-color: white;
    margin: auto;
    padding: 30px;
    padding-left: 100px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 90%;
    text-align: left;
		}
		body.modal-active {
		    overflow: hidden;
		}
		/* Close button styles */
		.close-button {
		    float: right;
		    font-size: 40px;
		    font-weight: bold;
		    cursor: pointer;
		    color: rgb(255, 0, 0);
		    margin-right: -20px;
		    margin-top: -25px;
		}
		
		.close-button:hover {
		    color: black;
		}
		
		/* Mobile screen adjustments */
		@media (max-width: 768px) {
		    .modal-contents {
/*		        margin-top: 40%;  Slight vertical spacing for mobile 
*/		        padding: 15px; /* Reduced padding for smaller screens */
		        padding-left: 20px; /* Adjusted left padding for smaller screens */
		        max-width: 90%; /* Make modal width fit smaller screens */
		    }
		    .close-button {
		              font-size: 50px;
        margin-right: 5px;
        margin-top: 5px;
    }
		}
	
	@media (max-width: 480px) {
    .search-vehicle-title2 {
        margin-top: 0 !important;
    }
}

	.car-lighting-layout {
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.searchster-categories-grid__item__images {
    border-radius: 4px;
}

.searchster-categories-grid__item__name {
    font-size: 16px;
    color: #333;
}
.searchster-categories-grid {
    display: flex;
/*    align-items: flex-start;
*/    width: 100%;
}
.searchster-categories-grid__item img{
	height: -webkit-fill-available;
}



/*.main-category-image {
    flex: 2;
    padding-right: 20px;
}*/

.searchster-categories-grid__item {
    width: calc(25% - 14px);
    font-size: 16px;
    display: flex;
    flex-direction: column;
    margin: 0 7px 14px;
    box-shadow: 0 3px 10px #ebebeb;
    border-radius: 5px;
    transition: all 0.3s;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
}

.searchster-categories-grid__itemst {
    width: calc(25% - 14px);
    font-size: 16px;
    display: flex;
    flex-direction: column;
    margin: 0 7px 14px;
    box-shadow: 0 3px 10px #ebebeb;
    border-radius: 5px;
    transition: all 0.3s;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
        height: 150px; /* Set a fixed height for the card */

}
.searchster-categories-grid__item__namess {
    font-weight: bold;
    display: inline-block;
    color: #333;
    margin-top: 50px;
}
.searchster-categories-grid__itemst:hover {
    border: 5px solid red; /* Thicker red border */
    background-color: rgb(250, 250, 250);
    border-image: linear-gradient(45deg, red, blue, black) 1; /* Multi-color gradient border */
}

.searchster-categories-grid__item:hover {
	    background-color: rgb(239, 239, 239);

	}

.searchster-categories-grid__item123{
	   margin-bottom: 10px;
    cursor: pointer;
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.3s;
        border: 1px solid rgb(224, 224, 224) !important;
        
        
}

    .type_description {
    position: relative;
    left: 280px;
    top: -290px;
    width: 140px;
    z-index: 400;
    color: white;
}
.type_description p {
    font-size: 12px;
}
.h-9 {
    height: 2.25rem;
}
.w-12 {
    width: 4rem;
}	
.text-xs {
    font-size: 1.2rem !important;
    line-height: 1.8rem !important;
    color: white;
    font-weight: bold;
}
.main-category-image__img {
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}
.other-subcategory-item {
    margin-bottom: 10px;
    cursor: pointer;
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.3s;
        border: 1px solid rgb(224, 224, 224) !important;
}

.other-subcategories {
    display: flex;
    flex-direction: column;
    flex: 1;
    display: flex;
    border-radius: 8px;

    border: 1px solid;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
        border: 1px solid rgb(224, 224, 224) !important;
        margin-left: 60px;
        max-width: 350px;
}


.searchster-categories-grid__item:hover {
    background-color: #f0f0f0;
}
 .btn23.btn-block23.text-uppercase23 {
    background-color: #FF5722;
    color: #FFFFFF;
    padding: 14px;
    font-size: 16px;
    width: 100%;
    margin-right: auto;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;         /* Centers the text horizontally */
    white-space: normal;        /* Allow text to wrap to the next line */
    overflow-wrap: break-word;  /* Ensures long words break into the next line if needed */
    word-break: break-word;     /* Breaks long words to fit within the button width */
    line-height: 1.2;           /* Adjust line height for readability */
    display: block;    
/*    font-weight: 600;          Makes button take full available space 
*/}


.btn23 {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.text-uppercase23 {
    text-transform: uppercase !important;
}


@media (max-width: 480px) {
    .btn23.btn-block23.text-uppercase23 {
         width: -webkit-fill-available;
        margin-right: 7px;
        /* font-size: 15px; */
        text-align: center;
    }
}

@media (max-width: 480px) {
    .searchster-categories-grid__itemst {
        font-size: 14px;
        border: 0.5px solid #bfb7b7;
    }
}
@media (max-width: 480px) {
    .searchster-categories-grid__itemst {
        font-size: 14px;
        height: 120px;
        border: 0.5px solid #bfb7b7;
        text-align: center;
        display: flex
;
        align-items: center;
        justify-content: center;
        padding: 10px;
        box-sizing: border-box;
    }
}
@media (max-width: 768px) {
    .searchster-categories-grid__itemst {
        width: calc(50% - 10px);
        font-size: 14px;
        margin: 0 5px 10px;
        height: 120px;
    }
}

@media (max-width: 768px) { /* Adjust the breakpoint as per your mobile design */
    .searchster-categories-grid__itemst {
        width: calc(50% - 10px); /* Make items wider for mobile */
        font-size: 14px; /* Reduce font size for better readability */
        margin: 0 5px 10px; /* Adjust margin for smaller spacing */
        height: 120px; /* Reduce height to fit better on smaller screens */
    }
}
@media (max-width: 767px) {
  .searchster-categories-grid__item__namess {
    font-size: 14px; /* example: adjust font size */
    padding-top: 20px;
    padding-bottom: 20px;
    margin-top: 1px; /* or any value needed for mobile layout */
    color: #333; /* you can override or keep same */
  }
}

@media (max-width: 480px) { /* For very small screens */
    .searchster-categories-grid__itemst {
        font-size: 14px; /* Further reduce font size if necessary */
/*        margin: 0 0 10px;  No horizontal margin 
       height: auto; /* Let height adjust naturally */
        border: 0.5px solid #bfb7b7;

    }
}
@media (max-width: 768px) { /* For tablets and smaller screens */
    .searchster-categories-grid__item {
        width: calc(50% - 10px); /* Two items per row */
        font-size: 14px; /* Reduce font size */
        margin: 0 5px 10px; /* Adjust margin for smaller spacing */
    }
}

@media (max-width: 480px) { /* For mobile screens */
    .searchster-categories-grid__item {
width: calc(50% - 14px);
        font-size: 12px; /* Further reduce font size */
/*        margin: 0 0 10px;  No horizontal margin 

*/   
border: 0.5px solid #bfb7b7;
 }
}
@media (max-width: 768px) { /* For tablets and smaller screens */
    .main-category-image {
        flex: 0 0 100%; /* Adjust flex for full width on mobile */
        margin-bottom: -100px; /* Add spacing if necessary */
    }
}

@media (max-width: 480px) { /* For smaller mobile screens */
    .main-category-image {
        flex: none; /* Disable flex behavior if needed */
        width: 100%; /* Ensure it spans the full width */
        height: auto; /* Allow natural height for responsiveness */
        display: none;
    }
}
@media (max-width: 768px) { /* For tablets and smaller screens */
    .searchster-categories-grid__item__name {
        font-size: 14px; /* Slightly smaller font size for better fit */
    }
}

@media (max-width: 480px) { /* For mobile screens */
    .searchster-categories-grid__item__name {
        font-size: 15px; /* Further reduce font size for small screens */
        color: rgb(0, 0, 0); /* Optional: Slightly lighter color for aesthetics */
    }
}
@media (max-width: 480px) {
  .searchster-categories-grid__item123 {
    position: relative; /* Needed for positioning the ::after arrow */
    margin-bottom: 10px;
    cursor: pointer;
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.3s;
    border: 1px solid rgb(224, 224, 224) !important;
  }

  .searchster-categories-grid__item123::after {
    content: "❯";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
}

@media (max-width: 768px) { /* For tablets and smaller screens */
    .type_description {
        left: 50px; /* Adjust positioning for smaller screens */
        top: -150px; /* Reduce the offset */
        width: 120px; /* Slightly smaller width */
    }
}

@media (max-width: 480px) { /* For mobile screens */
    .type_description {
        left: 215px; /* Further adjust the position for small screens */
        top: -210px; /* Reduce the top offset */
        width: 100px; /* Reduce the width */
        font-size: 14px; /* Adjust font size for readability */
    }
}

@media (max-width: 768px) { /* For tablets and smaller screens */
    .other-subcategories {
        margin-left: 20px; /* Reduce left margin */
        max-width: 300px; /* Reduce max width for smaller screens */
    }
}

@media (max-width: 480px) { /* For mobile screens */
    .other-subcategories {
        margin-left: 10px; /* Minimize left margin */
        max-width: 100%; /* Allow full width for small screens */
        padding: 15px; /* Adjust padding for better fit */
        border-radius: 5px; /* Slightly smaller border radius */
    }
}
.searchster {
    margin-top: 20px;
    overflow-y: auto; /* Enable scrolling */
    max-height: calc(100% - 200px); /* Adjust as needed */
}
			.searchster-categories-grid__item img.main-levels {
    max-height: 190px; /* Ensures it doesn't exceed this height */
    width: auto; /* Maintains aspect ratio */
    max-width: 100%; /* Prevents overflow */
    height: 100%; /* Ensures it scales properly */
    margin-bottom: 10px;
    object-fit: contain; /* Ensures the whole image is visible */
}

/* Ensure the image scales properly on larger and smaller screens */
@media (max-width: 768px) { /* Tablets & Mobile */
    .searchster-categories-grid__item img.main-levels {
        max-height: 150px; /* Adjusts for smaller screens */
    }
}

@media (max-width: 480px) { /* Mobile screens */
    .searchster-categories-grid__item img.main-levels {
        max-height: 120px; /* Smaller height for smaller devices */
    }
}