.hero-section {
    min-height: auto;
    padding: 2rem 0;
}

.category-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

    .category-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    }

.icon-wrapper {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.hover-lift {
    transition: all 0.3s ease;
}

    .hover-lift:hover {
        transform: translateY(-5px);
    }

.input-group-lg .form-control {
    font-size: 1.1rem;
}

.btn-light:hover {
    background-color: #fff;
    transform: scale(1.05);
}

/* ========================================
   Mobile Responsive - Radio Buttons (Compact)
   ======================================== */

/* Stack radio buttons vertically on mobile phones with reduced spacing */
@media (max-width: 768px) {
    /* Target the radio button container specifically */
    #searchForm .mt-3.d-flex.gap-3 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.20rem !important;
    }

    /* Make each form-check take full width for easier touch */
    #searchForm .form-check {
        width: 35%;
        margin-bottom: 0.1rem;
    }

    /* Larger touch targets for mobile */
    #searchForm .form-check-label {
        font-size: 1rem;
        padding: 0.15rem 0;
        cursor: pointer;
        font-weight: normal
    }

    /* Stack the small text labels as well */
    #searchForm .text-muted.fw-bold,
    #searchForm .text-muted:not(.fw-bold) {
        width: 100%;
        text-align: left;
        margin-bottom: 0.25rem;
    }
}

/* Extra small phones - compact spacing xxxx */
@media (max-width: 576px) {
    #searchForm .form-check {
       /* padding: 0.2rem 0;*/
    }
}