/* ====================================
   Mobile Enhancements CSS
   Comprehensive mobile responsiveness improvements
   ==================================== */

/* ====================================
   1. HOMEPAGE HERO BANNER - Mobile Fixes
   ==================================== */

/* Increase hero text sizes on mobile */
@media (max-width: 768px) {
    /* Hero title - bigger on mobile */
    .hero-slider .hero-title,
    .hero-title {
        font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    /* Hero tagline - bigger and more visible */
    .hero-slider .hero-tagline {
        font-size: 1.3rem !important;
        line-height: 1.6;
        margin-bottom: 15px;
    }

    /* Hero description - readable size */
    .hero-slider .hero-description {
        font-size: 1.1rem !important;
        line-height: 1.8;
        padding: 0 10px;
    }

    /* Hero badge - visible on mobile */
    .hero-badge {
        font-size: 0.9rem;
        padding: 10px 20px;
    }

    /* Hero content wrapper - better padding */
    .hero-content-wrapper {
        padding: 20px 15px !important;
    }

    /* Hero contents container - enough height */
    .hero-contents {
        min-height: 450px;
    }

    /* Move slider arrows below the text content */
    .slider-arrow {
        top: auto !important;
        bottom: 130px !important;
        transform: none !important;
        width: 50px;
        height: 50px;
    }

    .slider-arrow.slider-prev {
        left: 20px;
    }

    .slider-arrow.slider-next {
        right: 20px;
    }

    .slider-arrow:hover {
        transform: scale(1.1) !important;
    }

    /* Slider controls - positioned below arrows */
    .hero-slider-controls {
        bottom: 70px !important;
    }

    /* Hero buttons - better spacing for mobile */
    .hero-slider .hero-buttons {
        margin-bottom: 180px !important;
        gap: 15px !important;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 16px 32px !important;
        font-size: 1.05rem !important;
        min-width: 220px;
    }

    /* Candle animation smaller on mobile */
    .hero-slider .candle-animation {
        transform: scale(0.85);
        margin-bottom: 25px;
    }

    /* Hero icon large - smaller on mobile */
    .hero-icon-large {
        width: 90px;
        height: 90px;
    }

    .hero-icon-large i {
        font-size: 2.5rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .hero-slider .hero-title,
    .hero-title {
        font-size: clamp(2.2rem, 12vw, 3rem) !important;
    }

    .hero-slider .hero-tagline {
        font-size: 1.15rem !important;
    }

    .hero-slider .hero-description {
        font-size: 1rem !important;
    }

    .slider-arrow {
        width: 44px;
        height: 44px;
        bottom: 140px !important;
    }

    .slider-arrow.slider-prev {
        left: 15px;
    }

    .slider-arrow.slider-next {
        right: 15px;
    }

    .hero-slider .hero-buttons {
        margin-bottom: 200px !important;
    }
}

/* ====================================
   2. VALUE BAR - Mobile Improvements
   ==================================== */

@media (max-width: 768px) {
    .value-bar {
        padding: 15px 0;
    }

    .value-bar-items {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0 !important;
        flex-direction: unset !important;
    }

    .value-item {
        padding: 18px 12px !important;
        flex-direction: column;
        gap: 8px;
        border-left: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    .value-item:nth-child(2n) {
        border-right: none;
    }

    .value-item:nth-last-child(-n+2) {
        border-bottom: none;
    }

    /* Last item spans full width */
    .value-item:last-child:nth-child(odd) {
        grid-column: span 2;
        border-right: none;
    }

    .value-item i {
        font-size: 1.6rem !important;
    }

    .value-item span {
        font-size: 0.95rem !important;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .value-bar-items {
        grid-template-columns: 1fr !important;
    }

    .value-item {
        flex-direction: row;
        gap: 12px;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .value-item:last-child {
        grid-column: span 1;
        border-bottom: none;
    }
}

/* ====================================
   3. GLOBAL TEXT SIZE IMPROVEMENTS - Mobile
   ==================================== */

@media (max-width: 768px) {
    /* Base font size increase */
    body {
        font-size: 17px;
    }

    /* Section headers */
    .section-header-enhanced h2,
    .section-header h2,
    section h2 {
        font-size: clamp(1.8rem, 6vw, 2.5rem) !important;
        line-height: 1.3;
    }

    .section-header-enhanced p,
    .section-header p {
        font-size: 1.1rem !important;
        line-height: 1.7;
    }

    .section-subtitle {
        font-size: 0.95rem !important;
        padding: 10px 22px;
    }

    /* Feature cards text */
    .feature-card-enhanced h3,
    .feature-card h3 {
        font-size: 1.3rem !important;
    }

    .feature-card-enhanced p,
    .feature-card p {
        font-size: 1.05rem !important;
        line-height: 1.75;
    }

    /* Service cards */
    .service-feature-card h3 {
        font-size: 1.35rem !important;
    }

    .service-feature-card p {
        font-size: 1.05rem !important;
    }

    .service-features-list li {
        font-size: 1rem !important;
    }

    /* Steps / Timeline */
    .step-text h3 {
        font-size: 1.25rem !important;
    }

    .step-text p {
        font-size: 1.05rem !important;
    }

    /* Testimonials */
    .testimonial-text {
        font-size: 1.1rem !important;
        line-height: 1.85;
    }

    .author-details h4 {
        font-size: 1.1rem !important;
    }

    /* Stats */
    .stat-number {
        font-size: 1.5rem !important;
    }

    .stat-label {
        font-size: 1rem !important;
    }

    /* CTA Section */
    .cta-content-enhanced h2 {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
    }

    .cta-content-enhanced p {
        font-size: 1.1rem !important;
    }

    .cta-feature span {
        font-size: 0.95rem !important;
    }

    /* Footer */
    .footer p,
    .footer a,
    .footer li {
        font-size: 1rem !important;
    }

    .footer h4 {
        font-size: 1.15rem !important;
    }

    /* Buttons */
    .btn,
    .btn-primary,
    .btn-secondary {
        font-size: 1.05rem !important;
        padding: 14px 28px;
    }

    /* Process flow */
    .flow-step span {
        font-size: 0.9rem !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    body {
        font-size: 16px;
    }

    .section-header-enhanced h2,
    .section-header h2,
    section h2 {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
    }
}

/* ====================================
   4. FEATURE HIGHLIGHTS - Mobile Layout
   ==================================== */

@media (max-width: 768px) {
    .feature-main {
        padding: 25px !important;
    }

    .feature-main-content h3 {
        font-size: 1.5rem !important;
    }

    .feature-main-content p {
        font-size: 1.1rem !important;
    }

    /* Feature highlights in feature section */
    .feature-highlights {
        padding: 20px !important;
        margin: 25px 0 !important;
    }

    .highlight-item {
        padding: 14px 16px !important;
        flex-direction: column !important;
        text-align: center;
        gap: 12px !important;
    }

    .highlight-item > div:first-child {
        width: 44px !important;
        height: 44px !important;
    }

    .highlight-item > div:first-child i {
        font-size: 18px !important;
    }

    .highlight-item span {
        font-size: 1.05rem !important;
    }
}

/* ====================================
   5. SERVICE FLOW SECTION - Mobile
   ==================================== */

@media (max-width: 768px) {
    .service-flow-grid {
        gap: 20px;
    }

    .service-feature-card {
        padding: 30px 25px;
    }

    .service-card-icon {
        width: 70px;
        height: 70px;
    }

    .service-card-icon i {
        font-size: 1.8rem;
    }

    /* Process flow visual */
    .process-flow-visual {
        flex-wrap: wrap;
        gap: 15px;
        padding: 25px 15px;
    }

    .flow-step {
        flex: 0 0 calc(50% - 10px);
        text-align: center;
    }

    .flow-arrow {
        display: none;
    }

    .flow-icon {
        width: 55px;
        height: 55px;
    }

    .flow-icon i {
        font-size: 1.3rem;
    }
}

/* ====================================
   6. TESTIMONIALS - Mobile
   ==================================== */

@media (max-width: 992px) {
    .testimonials-grid-enhanced {
        grid-template-columns: 1fr;
    }

    .testimonial-card-enhanced.featured {
        grid-row: span 1;
    }
}

@media (max-width: 768px) {
    .testimonial-card-enhanced {
        padding: 28px 22px;
    }

    .testimonial-text {
        font-size: 1.1rem !important;
    }
}

/* ====================================
   7. COMMUNITY / STATS SECTION - Mobile
   ==================================== */

@media (max-width: 992px) {
    .community-stats-enhanced {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .community-stats-enhanced {
        gap: 20px;
    }

    .stat-card-enhanced {
        padding: 30px 20px;
    }

    /* World presence section */
    .world-presence {
        padding: 35px 25px !important;
    }

    .connection-stats {
        gap: 30px !important;
    }

    .connection-stat .number {
        width: 60px !important;
        height: 60px !important;
    }

    .connection-stat .label {
        font-size: 1.05rem !important;
    }
}

@media (max-width: 480px) {
    .community-stats-enhanced {
        grid-template-columns: 1fr;
    }

    .connection-stats {
        flex-direction: column;
        gap: 25px !important;
    }
}

/* ====================================
   8. CTA SECTION - Mobile
   ==================================== */

@media (max-width: 768px) {
    .cta-content-enhanced {
        padding: 40px 25px;
    }

    .cta-features {
        flex-direction: column;
        gap: 15px;
    }

    .cta-feature {
        flex-direction: row;
        gap: 12px;
    }

    .cta-buttons-enhanced {
        flex-direction: column;
        gap: 15px;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* ====================================
   9. MEMORY GALLERY SECTION - Mobile
   ==================================== */

@media (max-width: 768px) {
    .memory-gallery-section h2 {
        font-size: 2rem !important;
    }

    .memory-gallery-section p {
        font-size: 1.05rem !important;
    }

    .memory-wall {
        gap: 15px;
    }

    .memory-card {
        min-height: 200px;
    }

    .memory-caption h4 {
        font-size: 1rem;
    }

    .memory-caption p {
        font-size: 0.9rem;
    }
}

/* ====================================
   10. NAVIGATION - Mobile
   ==================================== */

@media (max-width: 768px) {
    .nav-menu a {
        font-size: 1.15rem !important;
    }

    .nav-auth .auth-btn span {
        font-size: 1rem;
    }
}

/* ====================================
   11. PAGE HERO (Other pages) - Mobile
   ==================================== */

@media (max-width: 768px) {
    .page-hero h1,
    .page-hero.premium-hero h1 {
        font-size: clamp(2rem, 8vw, 2.8rem) !important;
    }

    .page-hero p,
    .page-hero.premium-hero p {
        font-size: 1.15rem !important;
        line-height: 1.7;
    }

    .hero-stats {
        gap: 25px;
    }

    .hero-stat .stat-number {
        font-size: 2rem !important;
    }

    .hero-stat .stat-label {
        font-size: 0.95rem;
    }
}

/* ====================================
   12. FORMS - Mobile
   ==================================== */

@media (max-width: 768px) {
    input,
    textarea,
    select {
        font-size: 16px !important; /* Prevents iOS zoom */
    }

    .form-group label {
        font-size: 1.05rem;
    }

    .form-group input,
    .form-group textarea {
        padding: 14px 18px;
    }
}

/* ====================================
   13. ABOUT / HOW IT WORKS PAGES - Mobile
   ==================================== */

@media (max-width: 768px) {
    /* Mission content */
    .mission-content blockquote {
        font-size: 1.25rem !important;
        padding: 25px;
    }

    /* Values grid */
    .values-grid .value-card h3 {
        font-size: 1.3rem !important;
    }

    .values-grid .value-card p {
        font-size: 1.05rem !important;
    }

    /* Process steps */
    .process-step {
        flex-direction: column;
        gap: 25px;
    }

    .process-number {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }

    .process-content {
        padding: 30px 25px;
    }

    .process-content h3 {
        font-size: 1.3rem !important;
    }

    .process-content p {
        font-size: 1.05rem !important;
    }

    /* Timeline line hidden on mobile */
    .process-step::before {
        display: none;
    }

    /* Steps timeline */
    .steps-timeline .step-item {
        flex-direction: column;
        text-align: center;
    }

    .step-content-enhanced {
        flex-direction: column;
        text-align: center;
    }

    .step-icon {
        margin: 0 auto 15px;
    }
}

/* ====================================
   14. PRODUCTS PAGE - Mobile
   ==================================== */

@media (max-width: 768px) {
    .product-card h3 {
        font-size: 1.35rem !important;
    }

    .product-card p {
        font-size: 1.05rem !important;
    }

    .product-price {
        font-size: 1.8rem !important;
    }

    .product-features li {
        font-size: 1rem !important;
    }
}

/* ====================================
   15. CONTACT PAGE - Mobile
   ==================================== */

@media (max-width: 768px) {
    .contact-info h3 {
        font-size: 1.3rem !important;
    }

    .contact-info p {
        font-size: 1.05rem !important;
    }

    .contact-form h3 {
        font-size: 1.4rem !important;
    }
}

/* ====================================
   16. FAQ SECTION - Mobile
   ==================================== */

@media (max-width: 768px) {
    .faq-item h3,
    .accordion-header {
        font-size: 1.15rem !important;
    }

    .faq-item p,
    .accordion-content {
        font-size: 1.05rem !important;
    }
}

/* ====================================
   17. STORIES PAGE - Mobile
   ==================================== */

@media (max-width: 768px) {
    .story-card h3 {
        font-size: 1.3rem !important;
    }

    .story-card p {
        font-size: 1.05rem !important;
    }

    .story-meta {
        font-size: 0.95rem;
    }
}