/* section-1 css starts */
.section-1 {
    background: rgba(146, 151, 161, 0.1);
}
.section-1 ul{
    display: flex;
    padding-left: 0;
    list-style: none;
    margin: 0;
}
.section-1 ul li{
    margin-right:15px;
    font-size: 14px;
}
/* section-1 css ends */


/* section-2 css starts */
.filter-container {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Select Box Styling */
.select-wrapper {
  position: relative;
  width: 300px; /* Adjust as needed */
}

/* Base Custom Select Styles */
.custom-select {
    width: 100%;
    padding: 10px 15px;
    font-size: 14px;
    color: #3c4043;
    background-color: white;
    border: 1px solid #dadce0;
    border-radius: 7px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    outline: none;
}

/* Dark Theme Custom Select Styles */
.dark-theme .custom-select {
    color: #f8f9fa;
    background-color: rgb(31 31 32); /* Matches your hover/active dark background */
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.dark-theme .custom-select:hover, 
.dark-theme .custom-select:focus, 
.dark-theme .custom-select:active {
    color: #f8f9fa;
    background-color: rgb(31 31 32);
    border-color: rgba(255, 255, 255, 0.3);
    outline: none;
}

/* Force dark background for the dropdown options list where supported */
.dark-theme .custom-select option {
    background-color: #212529;
    color: #f8f9fa;
}


/* Custom Chevron Arrow */
.chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-right: 2px solid #5f6368;
  border-bottom: 2px solid #5f6368;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Button Styling */
.filter-button, .filter-button:hover, .filter-button:focus, .filter-button:active {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  background-color: rgb(250, 204, 21);
  color: #000;
  border: none;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.filter-icon {
  width: 18px;
  height: 18px;
}
.dealer-card {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 15px;
  margin: 0 0 25px 0;
}
.dark-theme .dealer-card {
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.dealer-card .dealer-name {
    font-size: 22px;
  margin: 0 0 20px 0;
  font-weight: 600;
}
.dealer-card .dealer-location {
    font-size: 14px;
  margin: 0 0 7px 0;
}
.dealer-card .dealer-text {
    font-size: 14px;
  margin: 0 0 15px 0;
}
.dealer-card .dealer-phone{
    font-size: 14px;
    margin: 0 0 10px 0;
}
.dealer-card .dealer-email {
    font-size: 14px;
    margin: 0 0 20px 0;
}
.dealer-card .dealer-rating .star {
    padding: 5px 15px;
  background: rgb(250, 204, 21);
  border-radius: 15px;
  margin-right: 7px;
  font-size: 14px;
  color: black;
}
.dealer-card .dealer-rating .rating {
    font-size: 14px;
}
.dealer-card .dealer-card-footer .btn-1, .dealer-card .dealer-card-footer .btn-1:focus, .dealer-card .dealer-card-footer .btn-1:active {
    background: #1e5f3b;
    color: white;
    padding: 5px 15px;
    border: 1px solid #1e5f3b;
    font-size: 14px;
    border-radius: 5px;
    margin-right: 5px;
    transition: all 0.5s;
}
.dealer-card .dealer-card-footer .btn-1:hover{
    background: transparent;
  color: black;
}
.dark-theme .dealer-card .dealer-card-footer .btn-1:hover{
    background: transparent;
  color: white;
}
.dealer-card .dealer-card-footer .btn-2 {
    background: rgb(244, 244, 245);
  color: black;
  padding: 5px 10px;
  border: 0;
  font-size: 14px;
  border-radius: 5px;
  margin-right: 5px;
}
.dark-theme .dealer-card .dealer-card-footer .btn-2 {
  background: rgba(146, 151, 161, 0.15);
  color: white;
}
.dealer-card .dealer-card-footer .btn-3 {
    background: rgb(244, 244, 245);
  color: black;
  padding: 5px 10px;
  border: 0;
  font-size: 14px;
  border-radius: 5px;
}
.dark-theme .dealer-card .dealer-card-footer .btn-3 {
  background: rgba(146, 151, 161, 0.15);
  color: white;
}
@media (max-width: 1024px) {
    .dealer-card .dealer-name {
        font-size: 18px;
    }
}
/* section-2 css ends */


/* section-3 css starts */

/* section-3 css ends */