#about.about-section,
#contact.contact-section {
    background-color: transparent !important;
} 

/* Mobile Responsiveness Fixes - Real Estate Video AI */
/* Ensures proper alignment and spacing on mobile devices */

/* About and Contact sections background fix */
#about.about-section,
#contact.contact-section {
    background-color: transparent !important;
}

/* =============================================
   CRITICAL FIXES - MOBILE ONLY
   ============================================= */

/* 1. FIX: Photo perfection carousel image cropping - MOBILE ONLY */
/* Keep original desktop behavior, only fix mobile cropping */

/* 2. FIX: "View without animation" button positioning - MOBILE ONLY */
#video-importance.facts-section {
    position: relative !important;
}

#video-importance.facts-section .facts-header {
    position: relative !important;
}

/* Desktop button positioning (original) */
#video-importance.facts-section .static-facts-button {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    left: auto !important;
    transform: none !important;
    z-index: 1000 !important;
    background: #D9A84E !important;
    color: #0D1B2B !important;

    border: 1px solid #D9A84E !important;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(217, 168, 78, 0.3) !important;
    display: block !important;
    margin: 0 !important;
}

/* Mobile button positioning - MOBILE ONLY */
@media (max-width: 768px) {
    #video-importance.facts-section .static-facts-button {
        position: absolute !important;
        top: auto !important;
        bottom: 2rem !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        font-size: 0.9rem !important;
        padding: 0.75rem 1.5rem !important;
        z-index: 9999 !important;
        border-radius: 25px !important;
        box-shadow: 0 4px 12px rgba(217, 168, 78, 0.4) !important;
        white-space: nowrap !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    #video-importance.facts-section {
        position: relative !important;
        padding-bottom: 6rem !important;
    }
    
    /* Photo perfection carousel mobile fixes - MOBILE ONLY */
    .photo-carousel .carousel-pair img {
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
        background: rgba(13, 27, 43, 0.95) !important;
    }
    
    .photo-carousel {
        background: rgba(13, 27, 43, 0.95) !important;
        border: 1px solid var(--gold-light) !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    /* Ensure our services rotator isn’t cropped on mobile */
    #our-services .image-rotator img {
        object-fit: contain !important;
        background: rgba(13, 27, 43, 0.9) !important;
    }
}

@media (max-width: 480px) {
    #video-importance.facts-section .static-facts-button {
        bottom: 1.5rem !important;
        font-size: 0.8rem !important;
        padding: 0.6rem 1.2rem !important;
    }
    
    #video-importance.facts-section {
        padding-bottom: 5rem !important;
    }
}

/* 3. FIX: Modal/Overlay closing improvements - REVERT TO ORIGINAL RIGHT-SIDE BEHAVIOR */
.static-facts-overlay {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important; /* Back to original right-side slide */
    width: 100% !important;
    max-width: 600px !important;
    height: 100vh !important;
    background: var(--navy) !important;
    border-left: 1px solid var(--gold-light) !important;
    padding: 2rem !important;
    overflow-y: auto !important;
    z-index: 1000 !important;
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.static-facts-overlay.active {
    right: 0 !important; /* Slides in from right */
}

.static-facts-content {
    background: transparent !important; /* Remove the extra background */
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    max-width: none !important;
    max-height: none !important;
    overflow-y: visible !important;
    position: static !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    margin-top: 3rem !important;
}

.static-facts-close {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: none !important;
    border: none !important;
    color: var(--gold) !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    transition: all 0.3s ease !important;
    z-index: 1001 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

.static-facts-close:hover {
    transform: rotate(90deg) !important;
    color: var(--text-color) !important;
    background: none !important;
    transform: rotate(90deg) !important;
}

.facts-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px) !important;
    z-index: 999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.facts-backdrop.active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove mobile modal changes for facts - use original behavior */
@media (max-width: 768px) {
    .static-facts-overlay {
        max-width: 90% !important;
        padding: 1.5rem !important;
    }
    
    .static-facts-close {
        font-size: 1.3rem !important;
    }
}

@media (max-width: 480px) {
    .static-facts-overlay {
        max-width: 95% !important;
        padding: 1rem !important;
    }
    
    .static-facts-close {
        font-size: 1.2rem !important;
    }
}

/* 4. FIX: Before/After demo panels - Background box large enough for longer "After" content */
.demo-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 2.5rem !important; /* Increased padding to contain text */
    margin: 0 !important;
    overflow: hidden !important; /* Contain text within background */
    word-wrap: break-word !important;
    background: rgba(15, 26, 42, 0.8) !important;
    border: 1px solid var(--gold-light) !important;
    border-radius: 10px !important;
    min-height: 280px !important; /* Increased for longer "After" content */
    height: auto !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    transform: translateX(20px) !important;
    transition: all 0.5s ease !important;
}

.demo-panel.active {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.demo-panel .demo-text-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 2rem !important; /* Increased padding */
    margin: 0 !important;
    overflow: hidden !important; /* Contain text within background */
    word-wrap: break-word !important;
    min-height: auto !important;
    height: auto !important;
    border-left: 4px solid #D9A84E !important;
}

.demo-panel h4 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 1.5rem 0 !important; /* Increased margin for spacing */
    padding: 0 !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
    font-size: 1.1rem !important;
    color: #D9A84E !important;
}

.demo-panel p {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 1rem 1.5rem 0 !important; /* Increased bottom padding for longer text */
    overflow: hidden !important;
    word-wrap: break-word !important;
    line-height: 1.8 !important; /* Increased line height for readability */
    font-size: 1rem !important;
}

.demo-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 1rem !important; /* Added padding for content area */
    margin: 0 !important;
    overflow: hidden !important; /* Contain content within background */
    position: relative !important;
    min-height: 300px !important; /* Increased for longer "After" content */
    height: auto !important;
}

/* Remove the massive demo section changes */
.writing-transformation-demo {
    background: rgba(15, 26, 42, 0.8) !important;
    border-radius: 15px !important;
    padding: 2rem !important;
    margin: 3rem 0 !important;
    border: 1px solid rgba(217, 168, 78, 0.3) !important;
}

.demo-tabs {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}

/* Social Media Toolkit section - same fixes */
#social-media-toolkit .demo-panel,
#listing-copy-toolkit .demo-panel {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 2.5rem !important; /* Increased padding */
    margin: 0 !important;
    overflow: hidden !important; /* Contain text within background */
    word-wrap: break-word !important;
    background: rgba(15, 26, 42, 0.8) !important;
    border: 1px solid var(--gold-light) !important;
    border-radius: 10px !important;
    min-height: 280px !important; /* Increased for longer content */
    height: auto !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    opacity: 0 !important;
    transform: translateX(20px) !important;
    transition: all 0.5s ease !important;
}

#social-media-toolkit .demo-panel.active,
#listing-copy-toolkit .demo-panel.active {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

#social-media-toolkit .demo-text-box,
#listing-copy-toolkit .demo-text-box {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 2rem !important; /* Increased padding */
    margin: 0 !important;
    overflow: hidden !important; /* Contain text within background */
    word-wrap: break-word !important;
    min-height: auto !important;
    height: auto !important;
    border-left: 4px solid #D9A84E !important;
}

#social-media-toolkit .demo-panel h4,
#listing-copy-toolkit .demo-panel h4 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 1.5rem 0 !important; /* Increased margin */
    padding: 0 !important;
    overflow: hidden !important;
    word-wrap: break-word !important;
    font-size: 1.1rem !important;
    color: #D9A84E !important;
}

#social-media-toolkit .demo-panel p,
#listing-copy-toolkit .demo-panel p {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 1rem 1.5rem 0 !important; /* Increased bottom padding for longer text */
    overflow: hidden !important;
    word-wrap: break-word !important;
    line-height: 1.8 !important; /* Increased line height */
    font-size: 1rem !important;
}

#social-media-toolkit .demo-content,
#listing-copy-toolkit .demo-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 1rem !important; /* Added padding */
    margin: 0 !important;
    overflow: hidden !important; /* Contain content within background */
    position: relative !important;
    min-height: 300px !important; /* Increased for longer content */
    height: auto !important;
}

/* =============================================
   MOBILE RESPONSIVENESS IMPROVEMENTS - MOBILE ONLY
   ============================================= */

/* Base mobile improvements */
@media (max-width: 768px) {
    /* Global container and section fixes */
    .section-content,
    .post-hero-section .section-content {
        padding: 2rem 1rem !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    /* Services grid mobile fixes */
    #our-services .services-grid {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2rem !important;
    }
    
    #our-services .service-card {
        width: 100% !important;
        max-width: 95% !important;
        min-width: auto !important;
        margin: 0 auto 1.5rem auto !important;
        padding: 1rem !important;
        min-height: auto !important;
    }
    
    /* Service media mobile fixes */
    #our-services .service-media {
        height: 250px !important;
        margin-bottom: 1rem !important;
    }
    
    /* Service content mobile fixes */
    #our-services .service-content {
        padding: 1.5rem !important;
        text-align: center !important;
    }
    
    /* ====================================
       COMPREHENSIVE PRICING SECTION FIXES
       ==================================== */
    
    /* Hero pricing section container fixes */
    .hero-pricing-section {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 2rem 1rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* All pricing cards containers */
    .pricing-cards,
    .photo-perfection-section .pricing-cards,
    .hero-pricing-section .pricing-cards {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    /* All pricing card variations */
    .pricing-card,
    .photo-perfection-section .pricing-card,
    .hero-pricing-section .pricing-card {
        width: 100% !important;
        max-width: 95% !important;
        min-width: auto !important;
        margin: 0 auto 1.5rem auto !important;
        padding: 1.5rem !important;
        min-height: auto !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }
    
    /* Pricing help section centering */
    .pricing-help {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom: 2rem !important;
        text-align: center !important;
    }
    
    /* Pricing titles and prices centering */
    .pricing-title,
    .pricing-card h3,
    .pricing-card .price {
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Pricing features centering */
    .pricing-features,
    .pricing-card .features,
    .pricing-card ul {
        text-align: left !important;
        width: 100% !important;
        margin: 1rem auto !important;
        padding-left: 1rem !important;
    }
    
    /* Pricing buttons full width and centered */
    .pricing-card .primary-button,
    .pricing-card .cta-button,
    .hero-pricing-section .primary-button,
    .hero-pricing-section .cta-button {
        width: 100% !important;
        max-width: 100% !important;
        margin: 1rem auto 0 auto !important;
        padding: 1rem 2rem !important;
        text-align: center !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    
    /* Pricing ribbon/badge mobile positioning */
    .pricing-ribbon {
        top: -10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 0.8rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Most popular card styling */
    .pricing-card.most-popular {
        border: 2px solid #D9A84E !important;
        position: relative !important;
    }
    
    /* Pricing card details and extras centering */
    .pricing-card .details,
    .pricing-card .extra-fees,
    .pricing-card .bundle-discount {
        width: 100% !important;
        text-align: center !important;
        margin: 1rem auto !important;
    }
    
    /* ====================================
       FACT CARDS MOBILE FIXES
       ==================================== */
    
    /* Fix fact cards spacing and sizing */
    .fact-card {
        min-width: 280px !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        margin-right: 1rem !important; /* Reduced from 3rem */
        padding: 1.5rem !important;
        height: auto !important;
        min-height: 240px !important;
    }
    
    /* Facts carousel mobile improvements */
    .facts-carousel {
        padding: 0 1rem !important;
        margin: 0 auto !important;
    }
    
    /* Facts carousel inner container */
    .facts-carousel-inner {
        gap: 1rem !important; /* Reduced gap between cards */
    }
    
    /* ====================================
       POPULAR SERVICE BADGE FIXES
       ==================================== */
    
    /* Fix popular service badge positioning */
    .popular-service-badge {
        position: absolute !important;
        top: 1rem !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 10 !important;
        font-size: 0.8rem !important;
        padding: 0.5rem 1rem !important;
        border-radius: 20px !important;
        background: #D9A84E !important;
        color: #0D1B2B !important;
        font-weight: 600 !important;
        text-align: center !important;
        white-space: nowrap !important;
        border: 1px solid #D9A84E !important;
        box-shadow: 0 2px 8px rgba(217, 168, 78, 0.3) !important;
    }
    
    /* ====================================
       PROCESS STEPS MOBILE FIXES
       ==================================== */
    
    /* Fix process steps (3 facts) spacing */
    .process-steps {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important; /* Reduced from 2rem */
        margin: 2rem 0 !important; /* Reduced from 4rem 0 */
        padding: 0 1rem !important;
    }
    
    .step-card {
        width: 100% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        padding: 1.5rem !important; /* Reduced from 2rem */
    }
    
    .step-image {
        height: 200px !important; /* Reduced from 250px */
        margin-bottom: 1rem !important;
    }
    
    .step-card h3 {
        font-size: 1.5rem !important; /* Reduced from 1.8rem */
        margin-bottom: 0.75rem !important;
    }
    
    .step-card p {
        font-size: 1rem !important; /* Reduced from 1.1rem */
        line-height: 1.5 !important;
    }
    
    /* MOBILE ONLY: Property films section centering */
    #property-films.service-detail-section .section-content {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        padding: 2rem 1rem !important;
    }
    
    #property-films.service-detail-section .how-it-works {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        margin: 1.5rem auto !important;
        padding: 1.5rem 1rem !important;
        background: rgba(15,26,42,0.7) !important;
        border-radius: 10px !important;
    }
    
    #property-films.service-detail-section .how-step {
        width: 100% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        text-align: center !important;
        padding: 1.5rem 1rem !important;
        flex: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Photo perfection carousel mobile fixes */
    .photo-perfection-section .photo-carousel {
        height: 300px !important; /* Reduced height for mobile */
        margin: 1.5rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .photo-perfection-section .photo-carousel .carousel-pair img {
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
        background: rgba(13, 27, 43, 0.95) !important;
    }
    
    /* Demo panel mobile fixes */
    .demo-panel,
    #social-media-toolkit .demo-panel,
    #listing-copy-toolkit .demo-panel {
        padding: 1rem !important;
        margin: 0 !important;
    }
    
    .demo-panel .demo-text-box,
    #social-media-toolkit .demo-text-box,
    #listing-copy-toolkit .demo-text-box {
        padding: 0.75rem !important;
    }
    
    .demo-panel h4,
    #social-media-toolkit .demo-panel h4,
    #listing-copy-toolkit .demo-panel h4 {
        font-size: 1.1rem !important;
        margin: 0 0 0.75rem 0 !important;
    }
    
    .demo-content,
    #social-media-toolkit .demo-content,
    #listing-copy-toolkit .demo-content {
        padding: 0.75rem !important;
        gap: 0.75rem !important;
    }
    
    /* Button fixes */
    .cta-button,
    .primary-button,
    .secondary-button {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0.5rem auto !important;
        padding: 1rem 2rem !important;
        text-align: center !important;
        display: block !important;
    }
    
    /* Hero buttons container */
    .hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        width: 100% !important;
    }
}

/* Additional improvements for smaller screens */
@media (max-width: 480px) {
    /* Even more compact spacing for very small screens */
    .section-content,
    .post-hero-section .section-content {
        padding: 1.5rem 0.75rem !important;
    }
    
    /* Pricing section ultra mobile fixes */
    .hero-pricing-section {
        padding: 1.5rem 0.5rem !important;
    }
    
    .pricing-card,
    .photo-perfection-section .pricing-card,
    .hero-pricing-section .pricing-card {
        max-width: 98% !important;
        padding: 1.25rem !important;
        margin: 0 auto 1rem auto !important;
    }
    
    /* Ultra-compact fact cards */
    .fact-card {
        min-width: 260px !important;
        max-width: 98% !important;
        padding: 1.25rem !important;
        margin-right: 0.75rem !important;
        min-height: 220px !important;
    }
    
    /* Ultra-compact process steps */
    .process-steps {
        gap: 0.75rem !important;
        margin: 1.5rem 0 !important;
        padding: 0 0.5rem !important;
    }
    
    .step-card {
        padding: 1.25rem !important;
    }
    
    .step-image {
        height: 180px !important;
    }
    
    /* Ultra-compact popular service badge */
    .popular-service-badge {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.8rem !important;
        top: 0.5rem !important;
    }
    
    /* Ultra-compact photo carousel */
    .photo-perfection-section .photo-carousel {
        height: 250px !important;
        margin: 1rem 0 !important;
    }
    
    /* MOBILE ONLY: Ultra-compact property films section */
    #property-films.service-detail-section .section-content {
        padding: 1.5rem 0.75rem !important;
    }
    
    #property-films.service-detail-section .how-it-works {
        gap: 0.75rem !important;
        margin: 1rem auto !important;
        padding: 1.25rem 0.75rem !important;
        background: rgba(15,26,42,0.7) !important;
        border-radius: 10px !important;
    }
    
    #property-films.service-detail-section .how-step {
        padding: 1.25rem 0.75rem !important;
        max-width: 98% !important;
    }
    
    .section-title,
    .hero-section h1 {
        font-size: 1.8rem !important;
    }
    
    /* Ultra-compact hero service section for very small screens */
    .hero-service-headline {
        font-size: 2rem !important; /* Even smaller for very small screens */
        line-height: 1.1 !important;
        margin-bottom: 1rem !important;
    }
    
    .hero-service-subhead {
        font-size: 1rem !important; /* Even smaller for very small screens */
        line-height: 1.3 !important;
        margin-bottom: 2rem !important;
    }
    
    .hero-subtitle,
    .subtitle {
        font-size: 1rem !important;
    }
    
    .service-content h3 {
        font-size: 1.3rem !important;
    }
    
    .service-content p {
        font-size: 0.95rem !important;
    }
    
    .pricing,
    .price {
        font-size: 1.5rem !important;
    }
    
    .cta-button,
    .primary-button,
    .secondary-button {
        padding: 0.875rem 1.5rem !important;
        font-size: 0.95rem !important;
    }
    
    .founder-card {
        padding: 1.5rem 0.75rem !important;
    }
    
    /* Ultra small pricing ribbon */
    .pricing-ribbon {
        font-size: 0.7rem !important;
        padding: 0.4rem 0.8rem !important;
    }
}

/* TABLET RESPONSIVENESS - 769px to 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet-specific improvements */
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5rem !important;
        align-items: center !important;
    }
    
    .service-card {
        max-width: 90% !important;
        margin: 0 auto !important;
    }
    
    /* Tablet pricing improvements */
    .pricing-cards,
    .hero-pricing-section .pricing-cards {
        flex-direction: column !important;
        align-items: center !important;
        gap: 2rem !important;
    }
    
    .pricing-card {
        max-width: 80% !important;
        margin: 0 auto !important;
    }
    
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
    
    /* Tablet process steps */
    .process-steps {
        gap: 1.5rem !important;
        margin: 3rem 0 !important;
    }
    
    /* TABLET ONLY: Property films section */
    #property-films.service-detail-section .section-content {
        padding: 2rem 1.5rem !important;
    }
    
    #property-films.service-detail-section .how-it-works {
        gap: 1.75rem !important;
        margin: 2.5rem auto !important;
        padding: 2.5rem 1.5rem !important;
        background: rgba(15,26,42,0.7) !important;
        border-radius: 10px !important;
    }
    
    #property-films.service-detail-section .how-step {
        padding: 2rem 1.5rem !important;
        max-width: 85% !important;
    }
    
    /* Tablet button positioning with complete styling */
    #video-importance.facts-section .static-facts-button {
        position: absolute !important;
        top: auto !important;
        bottom: 2.5rem !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        font-size: 1rem !important;
        padding: 0.8rem 1.6rem !important;
        z-index: 9999 !important;
        border-radius: 25px !important;
        box-shadow: 0 4px 12px rgba(217, 168, 78, 0.4) !important;
        white-space: nowrap !important;
        margin: 0 auto !important;
        display: block !important;
        /* Essential styling properties */
        background: #D9A84E !important;
        color: #0D1B2B !important;
        border: 1px solid #D9A84E !important;
        font-weight: 600 !important;
    }
    
    #video-importance.facts-section {
        position: relative !important;
        padding-bottom: 7rem !important;
    }
    
    /* Tablet-specific fact cards */
    .fact-card {
        min-width: 350px !important;
        margin-right: 1.5rem !important;
    }
    
    /* Laptop photo carousel */
    .photo-perfection-section .photo-carousel {
        height: 350px !important;
    }
}

/* LAPTOP RESPONSIVENESS - 1025px to 1366px */
@media (min-width: 1025px) and (max-width: 1366px) {
    /* Laptop button positioning with complete styling */
    #video-importance.facts-section .static-facts-button {
        position: absolute !important;
        top: auto !important;
        bottom: 3rem !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        font-size: 1.1rem !important;
        padding: 0.9rem 1.8rem !important;
        z-index: 9999 !important;
        border-radius: 25px !important;
        box-shadow: 0 4px 12px rgba(217, 168, 78, 0.4) !important;
        white-space: nowrap !important;
        margin: 0 auto !important;
        display: block !important;
        /* Essential styling properties */
        background: #D9A84E !important;
        color: #0D1B2B !important;
        border: 1px solid #D9A84E !important;
        font-weight: 600 !important;
    }
    
    #video-importance.facts-section {
        position: relative !important;
        padding-bottom: 8rem !important;
    }
    
    /* Laptop-specific fact cards */
    .fact-card {
        min-width: 400px !important;
        margin-right: 2rem !important;
    }
    
    /* Laptop photo carousel */
    .photo-perfection-section .photo-carousel {
        height: 400px !important;
    }
}

/* ========================================================
   BULLETPROOF HERO BUTTON SIZE FIX - FINAL OVERRIDE
   ======================================================== */

/* Ultimate override with maximum possible specificity */
html body #hero.hero-section .hero-content .hero-buttons a.cta-button.primary-button,
html body #hero.hero-section .hero-content .hero-buttons a.cta-button.secondary-button,
html body .hero-section .hero-content .hero-buttons a.cta-button.primary-button,
html body .hero-section .hero-content .hero-buttons a.cta-button.secondary-button,
html body .hero-buttons a.cta-button.primary-button,
html body .hero-buttons a.cta-button.secondary-button,
html body .hero-buttons a.primary-button,
html body .hero-buttons a.secondary-button,
html body .hero-buttons a.cta-button,
html body .hero-buttons a {
    /* FORCE EXACT SAME DIMENSIONS */
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
    
    /* FORCE EXACT SAME BORDER - THIS IS CRITICAL */
    border: 2px solid #D9A84E !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: #D9A84E !important;
    
    /* FORCE EXACT SAME LAYOUT PROPERTIES */
    padding: 1.2rem 2.5rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    
    /* FORCE EXACT SAME TEXT PROPERTIES */
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    
    /* FORCE SAME POSITIONING */
    position: relative !important;
    overflow: hidden !important;
    vertical-align: top !important;
    
    /* FORCE SAME TRANSITION */
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) !important;
    white-space: nowrap;
}

/* Primary button background only */
html body #hero.hero-section .hero-content .hero-buttons a.cta-button.primary-button,
html body .hero-section .hero-content .hero-buttons a.cta-button.primary-button,
html body .hero-buttons a.cta-button.primary-button,
html body .hero-buttons a.primary-button {
    background-color: #D9A84E !important;
    color: #0D1B2B !important;
}

/* Secondary button background only */
html body #hero.hero-section .hero-content .hero-buttons a.cta-button.secondary-button,
html body .hero-section .hero-content .hero-buttons a.cta-button.secondary-button,
html body .hero-buttons a.cta-button.secondary-button,
html body .hero-buttons a.secondary-button {
    background-color: transparent !important;
    color: #D9A84E !important;
}

/* Force button text to be perfectly centered */
html body .hero-buttons a .button-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* Additional text centering for any direct text content */
html body #hero.hero-section .hero-content .hero-buttons a,
html body .hero-section .hero-content .hero-buttons a,
html body .hero-buttons a {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

/* Ensure any nested text elements are also centered */
html body .hero-buttons a span,
html body .hero-buttons a * {
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================
   BUTTON TEXT CUTOFF FIXES FOR INTERNATIONAL LANGUAGES
   ============================================= */

/* Fix all buttons to allow expansion with longer translated text */
.cta-button,
.primary-button,
.secondary-button,
.demo-tab,
.action-btn {
    width: auto !important;
    min-width: fit-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    padding: 0.8rem 1.5rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* Keep hover shine constrained */
    text-overflow: initial !important;
}

/* Special handling for hero buttons to maintain center alignment */
.hero-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.hero-buttons .cta-button,
.hero-buttons .primary-button,
.hero-buttons .secondary-button {
    flex: 0 0 auto !important;
    min-width: max-content !important;
}

/* Demo tabs need special handling for longer text */
.demo-tabs {
    display: flex !important;
    justify-content: center !important;
    gap: 1rem !important;
    margin-bottom: 1.5rem !important;
}

.demo-tab {
    background: transparent !important;
    border: 2px solid var(--gold) !important;
    color: var(--gold) !important;
    padding: 0.8rem 1.5rem !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    min-width: max-content !important;
}

.demo-tab.active {
    background: var(--gold) !important;
    color: var(--navy) !important;
    transform: scale(1.05) !important;
}

.demo-tab:hover {
    transform: scale(1.05) !important;
    background: var(--gold) !important;
    color: var(--navy) !important;
}

/* Mobile responsive button fixes */
@media (max-width: 768px) {
    .cta-button,
    .primary-button,
    .secondary-button {
        width: auto !important;
        max-width: 90% !important;
        min-width: max-content !important;
        margin: 0.5rem auto !important;
        text-align: center !important;
        display: inline-block !important;
        padding: 1rem 1.5rem !important;
    }
    
    .hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        width: 100% !important;
    }
    
    .demo-tabs {
        flex-direction: row !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    
    .demo-tab {
        padding: 0.6rem 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* =============================================
   LANGUAGE TEXT WRAP FIX
   ============================================= */
.pricing-card .primary-button {
    height: auto !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.4em !important;
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
}

/* ===================================================================
   FIX FOR SERVICE CARD BUTTON TEXT TRUNCATION IN ALL LANGUAGES
   =================================================================== */
#our-services .service-card .cta-button {
    white-space: normal !important;
    height: auto !important;
    min-height: 60px; /* Ensure a minimum height for consistency */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    padding: 1rem 1.5rem;
}

/* ===================================================================
   FIX: PRICING-CARD CTA BUTTON WIDTH (PHOTO PERFECTION & GENERIC)
   Prevents buttons from stretching outside card in long translations
   =================================================================== */
.pricing-card .cta-button,
.photo-perfection-section .pricing-card .cta-button,
.pricing-cards .pricing-card .cta-button {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1.1rem !important;
    padding: 1.2rem !important;
}

/* Internationalization Button Fix */
html body #hero.hero-section .hero-content .hero-buttons a.cta-button {
    width: auto !important;
    min-width: unset !important;
    max-width: unset !important;
    white-space: nowrap !important;
}

#our-services .service-card .cta-button,
.pricing-card .cta-button,
.photo-perfection-section .pricing-card .cta-button,
.pricing-cards .pricing-card .cta-button {
    width: auto !important;
    white-space: normal !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    height: auto !important;
    min-height: 60px !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
}

/* Specific button wrap overrides for long translations */
#our-services .service-card.card-left .cta-button,
.pricing-card:nth-child(2) .cta-button {
    white-space: normal !important;
    height: auto !important;
    min-height: 60px !important;
    line-height: 1.4 !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
}

#photo-perfection-section .pricing-card .cta-button {
    white-space: normal !important;
    height: auto !important;
    min-height: 60px !important;
    line-height: 1.4 !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
}

/* Italian language specific: Force button text wrapping for all photo perfection buttons */
html[lang="it"] #photo-perfection .pricing-card .cta-button,
html[lang="it"] .photo-perfection-section .pricing-card .cta-button {
    white-space: normal !important;
    height: auto !important;
    min-height: 60px !important;
    line-height: 1.4 !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
}

/* =============================================
   EXCESSIVE HOVER ANIMATION FIXES
   ============================================= */

/* Reduce excessive card movement on hover - makes buttons easier to click */
.service-card:hover,
.pricing-card:hover,
.photo-perfection-section .pricing-card:hover,
#our-services .service-card:hover,
.pricing-card-new:hover,
.testimonial-card:hover,
.fact-card:hover,
.step-card:hover {
    transform: translateY(-2px) !important; /* Subtle 2px lift instead of 10px */
    transition: all 0.3s ease !important;
}

/* Ensure smooth transitions for all card hover states */
.service-card,
.pricing-card,
.photo-perfection-section .pricing-card,
#our-services .service-card,
.pricing-card-new,
.testimonial-card,
.fact-card,
.step-card {
    transition: all 0.3s ease !important;
}

/* Keep the nice visual effects but reduce movement */
.service-card:hover,
.pricing-card:hover,
.photo-perfection-section .pricing-card:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 8px 25px rgba(208, 170, 93, 0.3) !important; /* Reduced shadow intensity */
}

/* Specific fix for our services cards */
#our-services .service-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 8px 25px rgba(208, 170, 93, 0.3) !important;
}

/* Fix for photo perfection pricing cards */
.photo-perfection-section .pricing-card:hover {
    transform: translateY(-2px) !important;
    border-color: var(--gold) !important;
    box-shadow: 0 8px 25px rgba(208, 170, 93, 0.3) !important;
}

/* Fix for testimonial cards */
.testimonial-card:hover {
    transform: translateY(-2px) !important;
}

/* Fix for fact cards */
.fact-card:hover {
    transform: translateY(-2px) !important;
}

/* Fix for step cards */
.step-card:hover {
    transform: translateY(-2px) !important;
}

/* =============================================
   SOCIAL MEDIA DEMO IMAGES
   ============================================= */

/* Replace Instagram post placeholder with actual demo image */
.instagram-post .post-image {
    height: 320px !important;
    background: url('https://realestatevideoai.com/img/insta_demo_image.png') center no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Replace Facebook post placeholder with actual demo image */
.facebook-post .post-image {
    height: 200px !important;
    background: url('https://realestatevideoai.com/img/facebook_demo_image.png') center no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.post-image::after {
    content: none; /* Future-proofing: hide if this pseudo-element gets used for badges */
}

/* Force-hide the property badges on social media posts */
.social-post .property-badge {
    display: none !important;
}

/* REVERT ACCIDENTAL CHANGE: Restore original popular service badge style */
.popular-service-badge {
    background: var(--gold) !important;
    color: var(--navy) !important;
}

/* Fix for truncated headers in service sections */
#listing-copy-toolkit h3,
#listing-copy-toolkit .service-content h3 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    height: auto !important;
    min-height: unset !important;
    line-height: 1.4 !important;
    margin-bottom: 1rem !important;
}

/* Ensure demo panels display correctly */
#listing-copy-toolkit .demo-panel {
    overflow: visible !important;
    height: auto !important;
}

#listing-copy-toolkit .demo-text-box {
    height: auto !important;
    min-height: unset !important;
    padding: 2rem !important;
}

/* === HERO BUTTON INTERNATIONALIZATION FIX (FINAL) === */
html body #hero.hero-section .hero-content .hero-buttons a.cta-button {
    max-width: 220px !important; /* Einheitliche Maximalbreite */
    width: auto !important;      /* Automatisch bis max */
    white-space: normal !important; /* Text darf umbrechen */
    word-break: break-word !important; /* Zeilenumbruch innerhalb langer Wörter */
    text-align: center !important;
    line-height: 1.25 !important;
}

/* === HERO BUTTON TEXT WRAP (FINAL) === */
html body .hero-buttons a .button-text {
    display: inline-block !important;
    white-space: normal !important;
    word-break: break-word !important;
    width: auto !important;
    line-height: 1.25 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* === HERO BUTTON FINAL SIZE TWEAK === */
html body #hero.hero-section .hero-content .hero-buttons a.cta-button {
    font-size: 1.2rem !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
    line-height: 1.2 !important;
}

/* === HERO BUTTON FLEX CENTER === */
html body #hero.hero-section .hero-content .hero-buttons a.cta-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .hero-buttons a.cta-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.25em 1.25em !important;
    width: 220px !important;
    flex: 0 0 220px !important;
    min-height: 90px !important;
}

html body .hero-buttons a .button-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    margin: 0 !important;
    padding: 0.5em !important;
    line-height: 1.3 !important;
    font-size: 1.1rem !important;
    word-break: break-word !important;
    hyphens: auto !important;
}

/* Spezifische Anpassungen für Sprachen mit längerem Text */
html[lang="it"] .hero-buttons a .button-text,
html[lang="fr"] .hero-buttons a .button-text,
html[lang="es"] .hero-buttons a .button-text {
    font-size: 1rem !important;
    line-height: 1.2 !important;
    padding: 0.25em !important;
}

/* Spezielle Anpassung für deutschen Button-Text */
html[lang="de"] .hero-buttons a .button-text {
    word-spacing: 100vw !important;
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25em !important;
}

html[lang="de"] .hero-buttons a.cta-button {
    min-width: 220px !important;
    padding: 1em 1em !important;
}

html[lang="de"] .hero-buttons a .button-text::after {
    content: "" !important;
    display: block !important;
    height: 0 !important;
    width: 100% !important;
}

html body #hero.hero-section .hero-content .hero-buttons,
html body .hero-section .hero-content .hero-buttons,
html body .hero-buttons {
    display: flex !important;
    flex-direction: row !important;
    gap: 1rem !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

html body .hero-buttons a.cta-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.25em 1.25em !important;
    width: 220px !important;
    flex: 0 0 220px !important;
    min-height: 90px !important;
}

html[lang="de"] .hero-buttons a.cta-button {
    min-width: 220px !important;
}

html body .hero-buttons a .button-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    margin: 0 !important;
    padding: 0.5em !important;
    line-height: 1.3 !important;
    font-size: 1.1rem !important;
    word-break: break-word !important;
    hyphens: auto !important;
}

@media (max-width: 768px) {
  /* Center and wrap Our Services buttons */
  #our-services .cta-button,
  #our-services .primary-button,
  #our-services .secondary-button {
    max-width: 95vw !important;
    width: 95vw !important;
    min-width: unset !important;
    margin: 0.5rem auto !important;
    display: block !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
    padding: 1.1rem 0.5rem !important;
  }
  /* Force two-line text for AI video button */
  #our-services .cta-button[data-i18n="services.buttons.aiVideo"] .button-text,
  #our-services .cta-button.ai-video-btn .button-text {
    display: block !important;
    text-align: center !important;
  }
  #our-services .cta-button[data-i18n="services.buttons.aiVideo"] .button-text:before,
  #our-services .cta-button.ai-video-btn .button-text:before {
    content: "Explore AI Video";
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.2em;
  }
  #our-services .cta-button[data-i18n="services.buttons.aiVideo"] .button-text:after,
  #our-services .cta-button.ai-video-btn .button-text:after {
    content: "Details";
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0.2em;
  }
  /* Force two-line text for Photo Perfection button */
  #our-services .cta-button[data-i18n="services.buttons.photoPerfection"] .button-text,
  #our-services .cta-button.photo-perfection-btn .button-text {
    display: block !important;
    text-align: center !important;
  }
  #our-services .cta-button[data-i18n="services.buttons.photoPerfection"] .button-text:before,
  #our-services .cta-button.photo-perfection-btn .button-text:before {
    content: "Explore Photo";
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.2em;
  }
  #our-services .cta-button[data-i18n="services.buttons.photoPerfection"] .button-text:after,
  #our-services .cta-button.photo-perfection-btn .button-text:after {
    content: "Perfection";
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0.2em;
  }
  /* Listing Blockbusters hero section: center everything and wrap buttons */
  .hero-service-center,
  .hero-service-headline,
  .hero-service-subhead {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* Mobile font size fixes for hero service section */
  .hero-service-headline {
    font-size: 2.5rem !important; /* Reduced from 4.5rem for mobile */
    line-height: 1.2 !important;
    margin-bottom: 1.5rem !important;
  }
  
  .hero-service-subhead {
    font-size: 1.2rem !important; /* Reduced from 1.8rem for mobile */
    line-height: 1.4 !important;
    margin-bottom: 3rem !important;
  }
  .hero-service-buttons {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
    width: 100% !important;
  }
  .hero-service-buttons .primary-button,
  .hero-service-buttons .secondary-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 85vw !important;
    max-width: 320px !important;
    min-width: unset !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    hyphens: auto !important;
    box-sizing: border-box !important;
  }
}

/* === FORCE HERO SERVICE BUTTONS CENTERED & RESPONSIVE ON MOBILE (FINAL PRIORITY) === */
@media (max-width: 768px) {
  .hero-service-center {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .hero-service-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 1rem !important;
  }
  .hero-service-buttons .primary-button,
  .hero-service-buttons .secondary-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 85vw !important;
    max-width: 320px !important;
    min-width: unset !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    hyphens: auto !important;
    box-sizing: border-box !important;
  }
}

/* === FORCE HERO SERVICE CARD CENTERED OVER VIDEO ON MOBILE === */
@media (max-width: 768px) {
  .hero-service-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100vw !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  .hero-service-center {
    margin: 0 auto !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 95vw !important;
    box-sizing: border-box !important;
  }
}

/* === ULTRA-SPECIFIC: FORCE HERO SERVICE BUTTONS CENTERED & FULL WIDTH ON MOBILE === */
@media (max-width: 768px) {
  body .hero-service-center .hero-service-buttons .primary-button,
  body .hero-service-center .hero-service-buttons .secondary-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 85vw !important;
    max-width: 320px !important;
    min-width: 0 !important;
    flex: none !important;
    flex-basis: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    padding: 1rem 1.5rem !important;
    font-size: 1rem !important;
    line-height: 1.3 !important;
    hyphens: auto !important;
  }
  body .hero-service-center .hero-service-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 1rem !important;
  }
}

/* === MOBILE: MAKE FACTS CAROUSEL CARDS SMALLER & SHOW MULTIPLE CARDS === */
@media (max-width: 768px) {
  .facts-carousel-inner {
    gap: 1rem !important;
    padding: 0 0.5rem !important;
  }
  .fact-card {
    min-width: 70vw !important;
    max-width: 75vw !important;
    width: 70vw !important;
    padding: 1rem 0.75rem !important;
    font-size: 0.95rem !important;
    box-sizing: border-box !important;
  }
  .fact-card h3 {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
  }
  .fact-card p {
    font-size: 0.95rem !important;
    margin-bottom: 0.5rem !important;
  }
  .fact-card .source-link {
    font-size: 0.85rem !important;
  }
  .fact-card .media-type {
    font-size: 1.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .facts-section .section-title {
    font-size: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .static-facts-button {
    font-size: 0.95rem !important;
    padding: 0.5rem 1rem !important;
    margin-top: 0.5rem !important;
  }
}

@media (max-width: 750px) {
  .photo-perfection-section .section-content,
  #property-films .section-content {
    max-width: 500px !important;
    width: 95vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 18px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18) !important;
  }
}

@media (max-width: 768px) {
  .writing-transformation-demo {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    border-radius: 0 !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .writing-transformation-demo .demo-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 768px) {
  .how-it-works-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  .how-step {
    margin: 1rem 0 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 90% !important;
    max-width: 400px !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .how-step .how-icon,
  .how-step .how-title,
  .how-step .how-desc {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}