CSS Customisation Issue

Hi, I am using GT Translate Plugin and i have done some customizations using CSS in the Widget Look i am using the Dropdown Look Widget on the bottom Left Corner of the page. The Css Customizations which i have did are working fine on desktop however on mobile those customizations are not showing up. On mobile it is the default menu. I cleared cache but nothing works.

Code I am using :

/* Custom styles for the GT Translation Plugin dropdown / .gt_selector { background-color: black !important; / Background color of the dropdown / color: white !important; / Text color of the dropdown / border-radius: 10px !important; / Rounded corners / padding: 6px 5px !important; / Top and bottom padding of 6px, left and right padding of 5px / border: none !important; / Remove default border / font-size: 14px !important; / Adjust font size / outline: none !important; / Remove outline / font-family: ‘Poppins’, sans-serif !important; / Set font to Poppins */
}

/* Styles for the dropdown options / .gt_selector option { background-color: black !important; / Background color for options / color: white !important; / Text color for options / font-family: ‘Poppins’, sans-serif !important; / Set font to Poppins for options */
}

/* Optional: Styles for hover effects / .gt_selector:hover { background-color: #333 !important; / Darker shade on hover */
}

/* Ensure the same style applies on mobile */
@media (max-width: 768px) {
.gt_selector {
background-color: black !important;
color: white !important;
border-radius: 10px !important;
padding: 6px 5px !important;
}

.gt_selector option {
    background-color: black !important;
    color: white !important;
}

}

The page I need help with: [log in to see the link]