/* Apply styles only for mobile devices (max-width: 767px) */
@media only screen and (max-width: 767px) {
    #gf-form {
        display: block;
    }

    .gf-body {
        margin: 0;
        font-family: -apple-system, Arial, sans-serif;
        font-size: 24px; /* Set base font size to 24px */
        font-weight: 400;
        line-height: 1.5; /* Adjusted line height for better readability */
        color: #b2b2b2;
        text-align: left;
        background-color: transparent;
        padding: 5px;
        padding-bottom: 1px;
        border: 0px solid #ebebf7;
        border-radius: 0.25rem;
        max-width: 100%;
    }
    
    /* Ensure dropdown menus have 24px font size */
    select.gf-form-control {
    font-size: 24px; /* Set font size to 24px */
    height: calc(2em + 1.5rem); /* Double the height for consistency */
    padding: 0.75rem; /* Add padding for better touch interaction */
}
 
    .gf-form-control::placeholder {
        color: #808080; /* Medium gray color */
        font-style: normal; /* Normal text */
    }

    .gf-form-group {
        margin-bottom: 1rem; /* Increased margin for better spacing */
        margin-top: 1.5rem; /* Increased margin for better spacing */
    }

    .gf-input-group {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        width: 100%;
    }

    .gf-form-control {
        display: block;
        width: 100%;
        height: calc(2em + 1.5rem); /* Double the height for mobile */
        font-size: 24px; /* Set font size to 24px */
        font-weight: 400;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        outline: none;
        border: 1px solid #ccc; /* Added border for better visibility */
        border-radius: 0.25rem;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        padding: 0.75rem; /* Increased padding for better touch interaction */
    }

    .gf-form-control:focus {
        border: 2px solid #313131; /* Thicker border on focus */
    }

    select.gf-form-control[size],
    select.gf-form-control[multiple] {
        height: auto;
    }

    textarea.gf-form-control {
        font-family: -apple-system, Arial, sans-serif;
        height: 150px; /* Increased height for textarea */
        font-size: 24px; /* Set font size to 24px */
        padding: 0.75rem; /* Increased padding for better touch interaction */
    }

    .gf-label {
        display: inline-block;
        margin-bottom: 0.75rem; /* Increased margin for better spacing */
        font-size: 24px; /* Set font size to 24px */
    }

    .gf-btn {
        display: inline-block;
        font-weight: 400;
        color: #212529;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: 0.75rem 1.5rem; /* Increased padding for better touch interaction */
        font-size: 24px; /* Set font size to 24px */
        line-height: 1.5;
        border-radius: 0.25rem;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    @media (prefers-reduced-motion: reduce) {
        .gf-btn {
            transition: none;
        }
    }

    .gf-btn:hover {
        color: #212529;
        text-decoration: none;
    }

    .gf-btn:focus,
    .gf-btn.focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .gf-btn-primary {
        color: #fff;
        background-color: #007bff;
        border-color: #007bff;
    }

    .gf-btn-primary:hover {
        color: #fff;
        background-color: #0069d9;
        border-color: #0062cc;
    }

    .gf-btn-primary:focus,
    .gf-btn-primary.focus {
        color: #fff;
        background-color: #0069d9;
        border-color: #0062cc;
        box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
    }

    .gf-btn-lg,
    .gf-btn-group-lg>.gf-btn {
        padding: 0.5rem 1rem; /* Adjusted padding for larger buttons */
        font-size: 24px; /* Set font size to 24px */
        line-height: 1.5;
        border-radius: 0.3rem;
    }

    .gf-btn-block {
        display: block;
        width: 100%;
    }

    .gf-btn-block+.gf-btn-block {
        margin-top: 1rem; /* Increased margin for better spacing */
    }

    input[type="submit"].gf-btn-block,
    input[type="reset"].gf-btn-block,
    input[type="button"].gf-btn-block {
        width: 100%;
    }
}