.custom-select {
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none; /* Safari */
    -moz-appearance: none; /* Firefox */
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"%3E%3Cpath fill="%23333" d="M5 6L0 0h10L5 6z"/%3E%3C/svg%3E') no-repeat right 10px center; /* Arrow icon */
    background-size: 10px; /* Size of the arrow */
    padding-right: 30px; /* Space for the arrow */
    border: 1px solid #ccc; /* Add border if needed */
    border-radius: 4px; /* Rounded corners */
    height: 36px; /* Adjust height as needed */
}

    .custom-select:focus {
        border-color: #007bff; /* Focus border color */
        outline: none; /* Remove outline */
    }