/* ============================================
   MOBILE FOOTER - ENHANCED STYLING
   Professional, Modern, Touch-Friendly
   Mobile Only (max-width: 767px)
   ============================================ */

@media (max-width: 767px) {
    
    /* ============================================
       1. FOOTER BASE - MODERN FOUNDATION
       ============================================ */
    
    footer {
        background: linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 50%, #0f0f0f 100%) !important;
        padding-top: 35px !important;
        padding-bottom: 85px !important;
        margin-top: 40px !important;
        border-top: 3px solid var(--primary-red, #c62828) !important;
        position: relative;
        overflow: visible;
    }
    
    /* Subtle red gradient overlay on footer */
    footer::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 20% 50%, rgba(198, 40, 40, 0.04) 0%, transparent 50%),
            radial-gradient(circle at 80% 50%, rgba(198, 40, 40, 0.04) 0%, transparent 50%);
        pointer-events: none;
        z-index: 0;
    }
    
    footer > * {
        position: relative;
        z-index: 1;
    }
    
    /* ============================================
       2. FOOTER GRID - CLEAN LAYOUT
       ============================================ */
    
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        padding: 0 15px 25px !important;
        max-width: 100% !important;
    }
    
    /* ============================================
       3. FOOTER COLUMNS - CARD STYLE
       ============================================ */
    
    .footer-col {
        width: 100% !important;
        margin-bottom: 0 !important;
        padding: 20px 15px !important;
        background: transparent !important;
        border: none !important;
        transition: all 0.3s ease !important;
    }
    
    .footer-col:hover {
        box-shadow: none !important;
    }
    
    /* ============================================
       4. SECTION HEADINGS - ELEGANT STYLE
       ============================================ */
    
    .footer-col h3 {
        color: #ffffff !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        margin-bottom: 18px !important;
        padding-bottom: 12px !important;
        border-bottom: 2px solid rgba(198, 40, 40, 0.4) !important;
        text-align: center !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        position: relative !important;
        display: inline-block !important;
        width: 100% !important;
    }
    
    /* Red gradient line under Quick Links, Our Courses, Contact Us */
    .footer-col h3::after {
        content: '' !important;
        position: absolute !important;
        bottom: -2px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 60px !important;
        height: 2px !important;
        background: linear-gradient(90deg, transparent, var(--primary-red, #c62828), transparent) !important;
        transition: width 0.3s ease !important;
        display: block !important;
    }
    .footer-col:hover h3::after {
        width: 80px !important;
    }
    
    /* ============================================
       5. ABOUT SECTION - ENHANCED TYPOGRAPHY
       ============================================ */
    
    .footer-col p {
        text-align: center !important;
        line-height: 1.8 !important;
        color: #b0b0b0 !important;
        font-size: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* ============================================
       6. QUICK LINKS & OUR COURSES - MODERN LIST
       ============================================ */
    
    .footer-links,
    .footer-col ul:not(.contact-list) {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 5px !important;
        text-align: center !important;
    }
    
    /* Footer list items - improved spacing */
    .footer-links li,
    .footer-col ul:not(.contact-list) li {
        margin: 0 !important;
        padding: 0 !important;
        padding-block: 2px !important;
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        line-height: 1.5 !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
    }
    
    .footer-links li:hover {
        background: rgba(198, 40, 40, 0.1) !important;
        border-radius: 6px !important;
    }
    
    /* Quick Links section only - spacing 0.8px */
    .footer-col:nth-child(2) .footer-links li,
    .footer-col:nth-of-type(2) .footer-links li {
        padding-block: 0.8px !important;
        padding-top: 0.8px !important;
        padding-bottom: 0.8px !important;
    }
    
    /* Remove bottom border from last item */
    .footer-links li:last-child,
    .footer-col ul:not(.contact-list) li:last-child {
        border-bottom: none !important;
    }
    
    /* Quick Links last item */
    .footer-col:nth-child(2) .footer-links li:last-child,
    .footer-col:nth-of-type(2) .footer-links li:last-child {
        padding-bottom: 0.8px !important;
    }
    
    /* Footer links - enhanced styling */
    .footer-links li a,
    .footer-col ul:not(.contact-list) li a {
        font-size: 14px !important;
        line-height: 1.5 !important;
        padding: 10px 15px !important;
        margin: 0 !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        color: #b0b0b0 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        border-radius: 6px !important;
        position: relative !important;
    }
    
    .footer-links li a::before {
        content: '→';
        position: absolute;
        left: 0;
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.3s ease;
        color: var(--primary-red, #c62828);
    }
    
    .footer-links li a:hover {
        color: #ffffff !important;
        background: rgba(198, 40, 40, 0.15) !important;
        padding-left: 25px !important;
        transform: scale(1.02);
    }
    
    .footer-links li a:hover::before {
        opacity: 1;
        transform: translateX(0);
    }
    
    /* ============================================
       7. CONTACT US - ENHANCED LAYOUT
       ============================================ */
    
    .contact-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 8px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    
    .contact-list li {
        margin: 0 !important;
        padding: 12px 0 !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        transition: all 0.3s ease !important;
    }
    
    /* Phone number item - center aligned */
    .contact-list li:has(i.fa-phone-alt),
    .contact-list li:has(i.fa-phone) {
        align-items: center !important;
        flex-wrap: wrap !important;
    }
    
    .contact-list li:hover {
        background: transparent !important;
        border-color: transparent !important;
    }
    
    /* Contact Icons */
    .contact-list li i {
        font-size: 18px !important;
        width: 24px !important;
        min-width: 24px !important;
        color: var(--primary-red, #c62828) !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 2px !important;
    }
    
    /* Contact Text/Links */
    .contact-list li a,
    .contact-list li span {
        flex: 1 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        color: #b0b0b0 !important;
        text-decoration: none !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.6 !important;
    }
    
    .contact-list li a:hover {
        color: #ffffff !important;
    }
    
    /* Phone Numbers - Single Line - compact, 2 spaces between numbers */
    .contact-list li .phone-numbers {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: auto !important;
    }
    
    .contact-list li .phone-numbers a {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 0 !important;
        margin: 0 !important;
        background: rgba(198, 40, 40, 0.1) !important;
        border-radius: 4px !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
        min-height: 28px !important;
        flex-shrink: 0 !important;
        font-size: 13px !important;
    }
    
    .contact-list li:has(i.fa-phone-alt) .phone-numbers,
    .contact-list li:has(i.fa-phone) .phone-numbers {
        flex: 0 0 auto !important;
    }
    
    .contact-list li .phone-sep {
        margin: 0 0.25em !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .contact-list li .phone-numbers a:hover {
        background: rgba(198, 40, 40, 0.2) !important;
        color: #ffffff !important;
        transform: scale(1.05);
    }
    
    /* ============================================
       8. SOCIAL ICONS - MODERN DESIGN
       ============================================ */
    
    .footer-col:last-child > div[style*="margin-top"],
    .footer-col:last-child > div[style*="padding-top"] {
        margin-top: 20px !important;
        padding-top: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .footer-col:last-child div[style*="display: flex"] {
        display: flex !important;
        gap: 12px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        padding: 10px 0 !important;
    }
    
    .footer-col:last-child div[style*="display: flex"] a {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 2px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 50% !important;
        color: #b0b0b0 !important;
        font-size: 18px !important;
        transition: all 0.3s ease !important;
        text-decoration: none !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    .footer-col:last-child div[style*="display: flex"] a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: currentColor;
        transform: translate(-50%, -50%);
        transition: width 0.3s ease, height 0.3s ease;
        opacity: 0.15;
        z-index: 0;
    }
    
    .footer-col:last-child div[style*="display: flex"] a i {
        position: relative;
        z-index: 1;
        transition: transform 0.3s ease;
    }
    
    .footer-col:last-child div[style*="display: flex"] a:hover {
        transform: translateY(-5px) scale(1.1) !important;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
        border-color: currentColor !important;
    }
    
    .footer-col:last-child div[style*="display: flex"] a:hover::before {
        width: 100%;
        height: 100%;
    }
    
    .footer-col:last-child div[style*="display: flex"] a:hover i {
        transform: scale(1.2);
    }
    
    /* Social Media Specific Colors */
    .footer-col:last-child div[style*="display: flex"] a[href*="facebook"]:hover {
        color: #1877f2 !important;
        background: rgba(24, 119, 242, 0.2) !important;
        border-color: #1877f2 !important;
    }
    
    .footer-col:last-child div[style*="display: flex"] a[href*="instagram"]:hover {
        color: #e4405f !important;
        background: rgba(228, 64, 95, 0.2) !important;
        border-color: #e4405f !important;
    }
    
    .footer-col:last-child div[style*="display: flex"] a[href*="twitter"]:hover,
    .footer-col:last-child div[style*="display: flex"] a[href*="x.com"]:hover {
        color: #1da1f2 !important;
        background: rgba(29, 161, 242, 0.2) !important;
        border-color: #1da1f2 !important;
    }
    
    .footer-col:last-child div[style*="display: flex"] a[href*="youtube"]:hover {
        color: #ff0000 !important;
        background: rgba(255, 0, 0, 0.2) !important;
        border-color: #ff0000 !important;
    }
    
    .footer-col:last-child div[style*="display: flex"] a[href*="pinterest"]:hover {
        color: #bd081c !important;
        background: rgba(189, 8, 28, 0.2) !important;
        border-color: #bd081c !important;
    }
    
    /* ============================================
       9. COPYRIGHT - ELEGANT STYLING
       ============================================ */
    
    .copyright {
        background: linear-gradient(180deg, #000000 0%, #0a0a0a 100%) !important;
        padding: 20px 15px !important;
        text-align: center !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #888 !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
        position: relative !important;
        margin-top: 20px !important;
    }
    
    .copyright::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(198, 40, 40, 0.4) 50%, transparent 100%);
    }
    
    .copyright i.fa-heart {
        color: #c62828 !important;
        animation: heartbeat 1.5s ease-in-out infinite;
        margin: 0 4px;
    }
    
    @keyframes heartbeat {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }
    
    /* ============================================
       10. REMOVE EXTRA ELEMENTS
       ============================================ */
    
    footer br {
        display: none !important;
    }
    
    footer p:empty {
        display: none !important;
    }
    
    /* ============================================
       11. ENHANCED TOUCH TARGETS
       ============================================ */
    
    .footer-links li a,
    .contact-list li a {
        -webkit-tap-highlight-color: rgba(198, 40, 40, 0.3);
        tap-highlight-color: rgba(198, 40, 40, 0.3);
    }
    
    /* ============================================
       12. SMOOTH SCROLLING
       ============================================ */
    
    footer {
        scroll-behavior: smooth;
    }
}