/* Make all text inside <input> responsive to device sizes */

input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input[type="week"],
select {
    font-size: 1rem;
}

@media (max-width: 1200px) {
    input,
    select {
        font-size: 0.95rem;
    }
}

@media (max-width: 992px) {
    input,
    select {
        font-size: 0.9rem;
    }
}
/* Responsive adjustments for tablets */
@media (max-width: 768px) {
    input,
    select {
        font-size: 0.95rem;
    }
}

/* Responsive adjustments for mobile phones */
@media (max-width: 576px) {
    input,
    select {
        font-size: 0.9rem;
    }
}

/* Responsive adjustments for very small phones */
@media (max-width: 400px) {
    input,
    select {
        font-size: 4vw; /* scale with viewport width */
        padding: 0.8em 1em;
    }
}

/* Responsive adjustments for ultra small screens */
@media (max-width: 350px) {
    input,
    select {
        font-size: 5vw;
    }
}

/* Optional: Make sure option text is also responsive on mobile devices */
select option {
    font-size: inherit;
}