/* ========================================
   MOBILE-ONLY FIXES - ULTRA AGGRESSIVE
   This file only applies to screens under 768px
   Desktop styles remain untouched
   ======================================== */

@media (max-width: 768px) {
    
    /* ===== HEADER & NAVIGATION ===== */
    
    .site-header {
        padding: 12px 0 !important;
    }
    
    .site-header h1 {
        font-size: 1.3em !important;
        letter-spacing: 2px !important;
        padding-right: 0px !important;
        margin-bottom: 8px !important;
    }
    
    .header-tagline {
        font-size: 0.9em !important;
        letter-spacing: 1px !important;
        margin-bottom: 18px !important;
    }
    
    /* Hamburger Menu - CENTER */
    .menu-toggle {
        display: flex !important;
        position: fixed !important;
        top: -20px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        z-index: 1002 !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 10px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        background: rgba(212, 165, 116, 0.12) !important;
        border-radius: 6px !important;
        border: 1px solid rgba(212, 165, 116, 0.2) !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    /* Hamburger spans - the three lines */
    .menu-toggle span {
        display: block !important;
        height: 3px !important;
        width: 26px !important;
        background: var(--accent-gold) !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }
    
    /* When menu is open - transform to X */
    .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(7px, 7px) !important;
    }
    
    .menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
    }
    
    .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px) !important;
    }
    
    .menu-toggle:hover {
        background: rgba(212, 165, 116, 0.2) !important;
        border-color: rgba(212, 165, 116, 0.4) !important;
    }
    
    /* Mobile Navigation Menu - TIGHTER SPACING */
    nav ul.nav-list,
    nav .nav-list,
    ul.nav-list {
        display: none !important;
        flex-direction: column !important;
        width: 100% !important;
        background: rgba(3, 0, 25, 0.98) !important;
        position: fixed !important;
        top: 30px !important;
        left: 0 !important;
        text-align: center !important;
        padding: 8px 0 8px 0 !important;
        margin: 0 !important;
        max-height: calc(100vh - 30px) !important;
        overflow-y: auto !important;
        list-style: none !important;
        z-index: 9999 !important;
    }
   
    nav ul.nav-list.show,
    nav .nav-list.show,
    ul.nav-list.show {
        display: flex !important;
    }
    
    /* Remove ALL spacing from list items */
    nav ul.nav-list li,
    nav .nav-list li,
    ul.nav-list li {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        list-style: none !important;
        height: auto !important;
    }
    
    /* Menu items - TIGHTER SPACING & ALIGNED */
    nav ul.nav-list li a,
    nav .nav-list li a,
    ul.nav-list li a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: auto !important;  
        min-height: auto !important;  
        max-height: none !important;  
        padding: 6px 24px !important;  
        margin: 0 !important;
        text-align: center !important;
        font-size: 1.1em !important; 
        letter-spacing: 2.5px !important;
        line-height: 1.3 !important;  
        box-sizing: border-box !important;
    }
    
    /* ===== SECTIONS ===== */
    
    section {
        padding: 80px 20px !important;
    }
    
    #home {
        padding-top: 140px !important;
    }
    
    /* ===== HERO SECTION ===== */
    
    .hero-content h1 {
        font-size: 1.5em !important;
    }
    
    .hero-content h2 {
        font-size: 1em !important;
    }
    
    /* ===== SERVICES ===== */
    
    .service-cards {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }
    
    .card {
        min-height: auto !important;
    }
    @media (max-width: 768px) {
    .card p {
        font-size: 1em !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }
    @media (max-width: 768px) {
    .price-option::after {
        font-size: 0.8em !important;
    }
}
}
    /* ===== CONTACT INFO ===== */
    
    .contact-info {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
        max-width: 100% !important;
    }
    
    /* ===== FORM ===== */
    
    input, select, textarea, button {
        width: 100% !important;
        font-size: 16px !important;
    }
    
    /* ===== BUTTONS ===== */
    
    .btn, .btn-payment {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 1.1em !important;
        padding: 15px 25px !important;
    }
    
    /* ===== PRICING OPTIONS ===== */
    
    .pricing-options {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .price-option {
        width: 100% !important;
    }
    
    /* ===== ABOUT SECTION ===== */
    
    .about-content {
        flex-direction: column !important;
        gap: 30px !important;
    }
    
    .about-content img {
        width: 150px !important;
        height: 150px !important;
    }
    
    .credentials {
        flex-direction: column !important;
    }
    
    /* ===== TESTIMONIALS ===== */
    
    .testimonials-container {
        grid-template-columns: 1fr !important;
    }
    
    /* ===== FAQ ===== */
    
    .faq-container {
        max-width: 100% !important;
    }
    
    /* ===== BLOG ===== */
    
    .blog-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* ===== FOOTER ===== */
    
    .footer-content {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    
    .social-links {
        justify-content: center !important;
    }
    
}

/* ===== EXTRA SMALL PHONES (under 480px) ===== */

@media (max-width: 480px) {
    
    .site-header h1 {
        font-size: 1.1em !important;
        letter-spacing: 1px !important;
    }
    
    .hero-content h1 {
        font-size: 1.35em !important;
    }
    
    nav ul.nav-list li a,
    nav .nav-list li a,
    ul.nav-list li a {
        font-size: 0.9em !important;
        padding: 8px 20px !important;
        letter-spacing: 1.5px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
    }
    
    .btn, .btn-payment {
        font-size: 1em !important;
        padding: 16px 18px !important;
    }
    
    /* Back to Top Button */
    .back-to-top {
        bottom: 20px !important;
        right: 20px !important;
        width: 45px !important;
        height: 45px !important;
        font-size: 1em !important;
    }
    
}