Untitled

.dropdown-option {
    cursor: pointer;
    font-family: var(--f-guads);
    font-size: 16px;
    padding: 10px 10px 10px 30px; /* Add padding to make space for the tick mark */
    position: relative; /* Make the option relative for absolute positioning of tick mark */
}

.dropdown-option::before {
    content: "✓"; /* The tick mark */
    color: #a95228; /* Set the color of the tick mark */
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Hide by default */
}

/* Target Safari and Apple devices */
@media not all and (min-resolution: 0.001dpcm) and (min-width: 0px) {
    @supports (-webkit-appearance:none) {
        .dropdown-option::before {
            display: block; /* Show tick mark on Safari */
        }
    }
}

/* Target Android devices */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .dropdown-option::before {
        display: block; /* Show tick mark on Android */
    }
}

/* Specific iPhone styles */
@media only screen and (max-device-width: 480px) and (orientation: portrait) {
    .dropdown-option::before {
        display: block; /* Show tick mark on iPhones */
    }
}