/****************************************************************************************************************/
/*                                                      Filters                                                 */
/****************************************************************************************************************/
/* Styling for smaller select containers */
.small-select-container {
    position: relative;
    width: 100%; /* Full width of the container */
    max-width: 250px; /* Control the maximum width */
    padding: 5px 10px; /* Padding for a smaller appearance */
    border: 2px solid #b1bbd2; /* Light border color */
    background-color: #fff; /* White background */
    border-radius: 30px; /* Rounded corners */
    display: flex; /* Flexbox layout to align items */
    align-items: center; /* Vertically center items */
    box-sizing: border-box; /* Includes padding and border in width calculation */
}

/* Styles for the select element inside small containers */
.small-styled-select {
    width: 100%; /* Full width of the container */
    padding: 5px 10px; /* Padding around the select */
    padding-left: 35px; /* Extra left padding to make space for the icon */
    border: none; /* No border */
    background: transparent; /* No background */
    outline: none; /* Remove outline */
    font-size: 14px; /* Smaller font size */
    font-weight: 500; /* Slightly lighter font weight */
    color: #333; /* Text color */
    border-radius: 30px; /* Maintain roundness */
    appearance: none; /* Remove default arrow */
    cursor: pointer; /* Show pointer on hover */
}

.search-color {
    color: var(--main_color);
}

/* Styling for the options inside the small select dropdown */
.small-styled-select option {
    color: #333; /* Text color for options */
}


/* Remove outline when the small-styled-select is focused */
.small-styled-select:focus {
    outline: none;
}


/****************************************************************************************************************/
/*                                                      Seach bar                                                 */
/****************************************************************************************************************/



/****************************************************************************************************************/
/*                                                      Brands                                                  */
/****************************************************************************************************************/
.pt15 {
    padding-top: 15px;
}

.pb15 {
    padding-bottom: 15px;
}

/* Make sure the container doesn't overflow */
.row_brand {
    margin-left: 0;
    margin-right: 0;
}

/* Ensure columns fit nicely within the row */
.text-center {
    text-align: center;
}

.brand-image {
    max-width: 80%;  /* Reduced from 100% to 80% to make images smaller */
    height: auto;     /* Maintain aspect ratio */
    display: inline-block; /* Ensure the image behaves like a block inside the container */
    object-fit: contain; /* Fit within the container without distortion */
    margin: 0 auto;    /* Center the image within the column */
}





/****************************************************************************************************************/
/*                                                      Brands                                                  */
/****************************************************************************************************************/
/* Styling for smaller select containers */
.smaller-select-container {
    position: relative;
    width: 80px; /* Control the width */
    padding: 5px 10px; /* Padding for spacing */
    border: 2px solid #b1bbd2; /* Light border color */
    background-color: #fff; /* White background */
    border-radius: 30px; /* Rounded corners */
    display: flex; /* Flexbox layout to center content */
    align-items: center; /* Vertically center items */
    box-sizing: border-box; /* Include padding and border in width */
}

.smaller-select-container select {
    width: 100%; /* Full width inside container */
    border: none; /* Remove default border */
    background: transparent; /* Transparent background */
    font-size: 14px; /* Font size */
    color: #333; /* Text color */
    border-radius: 30px; /* Round select corners */
    appearance: none; /* Remove default arrow */
    padding-left: 5px; /* Padding for text alignment */
    outline: none; /* Remove focus outline */
    cursor: pointer; /* Pointer on hover */
}