/* Mobile Optimizations CSS */

/* Global Mobile Adjustments */
@media (max-width: 767px) {
    /* Fix font sizes for better readability on small screens */
    h1, .h1 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }
    
    h2, .h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    h3, .h3 {
        font-size: 1.5rem !important;
    }
    
    p {
        font-size: 1rem !important;
    }
    
    /* Add more padding for mobile buttons to make them easier to tap */
    .btn, button, .btn-primary, .btn-secondary, .feature-btn {
        padding: 10px 20px !important;
        margin: 5px 0 !important;
    }
    
    /* FIX: Remove any fixed heights from sections and add proper padding */
    section, .section, 
    .hero-section, .features-section, .pricing-section, 
    .faq-section, .team-section, .contact-section,
    .testimonials-section, .cta-section {
        min-height: auto !important;
        height: auto !important;
        padding: 60px 0 !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Fix container padding */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
        overflow: visible !important;
    }
    
    /* Prevent horizontal scroll by fixing overflow */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Fix row and column heights */
    .row, .col, .col-lg-6, .col-md-6, .col-12 {
        height: auto !important;
        min-height: auto !important;
    }
}

/* Hero Section Mobile Adjustments */
@media (max-width: 767px) {
    /* Override any fixed heights from other stylesheets */
    .hero-section {
        min-height: auto !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Better stack hero elements */
    .hero-content {
        text-align: center !important;
        margin-bottom: 40px !important;
        padding-top: 30px !important;
        padding-left: 2rem;
        padding-right: 2rem;
    }
    
    .hero-image-wrapper {
        max-width: 100% !important;
        margin: 0 auto !important;
        height: auto !important;
        min-height: auto !important;
        position: relative !important;
        padding: 0 2rem;
    }
    
    /* Make sure hero images display properly */
    .hero-image {
        height: auto !important;
        max-height: 350px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .hero-image.mobile {
        left: 3rem;
        bottom: -7rem;
        transform: perspective(1000px) rotateY(-15deg) scale(0.6);
    }
    
    /* Adjust hero stats for mobile */
    .hero-stats {
        align-items: center !important;
    }
    
    .hero-stat {
        margin-bottom: 15px !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Fix any background elements in the hero */
    .hero-background-circle, 
    .hero-decorative-circle {
        display: none !important; /* Hide decorative elements on mobile */
    }
}

/* Features Section Mobile Adjustments */
@media (max-width: 767px) {
    /* Fix overall feature section */
    .features-section {
        height: auto !important;
        padding: 60px 0 !important;
        overflow: visible !important;
    }
    
    /* Fix individual feature items */
    .feature-item {
        margin-bottom: 50px !important;
        padding-bottom: 30px !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Fix feature content */
    .feature-content {
        text-align: center !important;
        padding: 0 15px !important;
        height: auto !important;
    }
    
    .feature-icon {
        margin: 0 auto 15px auto !important;
    }
    
    .feature-btn {
        justify-content: center !important;
        margin: 0 auto !important;
        display: inline-block !important;
    }
    
    /* Fix feature images container */
    .feature-image-container {
        height: auto !important;
        min-height: 250px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Better display for images in features section */
    .feature-image-wrapper:nth-child(2),
    .feature-image-wrapper:nth-child(3) {
        display: none !important;
    }
    
    .feature-image-wrapper:nth-child(1) {
        transform: none !important;
        position: relative !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        left: 0 !important;
        opacity: 1 !important;
        height: auto !important;
    }
    
    /* Fix feature images */
    .feature-image {
        max-height: 100% !important;
        height: auto !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }
    
    /* Fix row structure in feature items */
    .feature-item .row {
        flex-direction: column !important;
    }
    
    .feature-content-wrapper, 
    .feature-item:nth-child(even) .feature-content-wrapper {
        order: 1 !important;
        margin-bottom: 20px !important;
    }
    
    .feature-image-container, 
    .feature-item:nth-child(even) .feature-image-container {
        order: 2 !important;
    }
}

/* Pricing Section Mobile Adjustments */
@media (max-width: 767px) {
    /* Fix overall pricing section */
    #pricing {
        height: auto !important;
        padding: 40px 0 60px !important; /* Reduced top padding */
        overflow: visible !important;
    }
    
    /* Improve pricing section title */
    #pricing .ud-section-title h2 {
        font-size: 24px !important;
        margin-bottom: 15px !important;
    }
    
    #pricing .ud-section-title p {
        font-size: 15px !important;
        padding: 0 15px !important;
    }
    
    /* Fix pricing calculator */
    .pricing-calculator {
        margin: 20px 10px 40px !important;
        border-radius: 15px !important;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    
    .pricing-calculator > div {
        padding: 20px !important;
    }
    
    /* Fix pricing header */
    .gradient-primary, .pricing-header {
        padding: 25px 20px !important;
        height: auto !important;
        border-radius: 15px 15px 0 0 !important;
    }
    
    /* Fix price display */
    .price-display {
        margin: 15px auto 0 !important;
        width: 90% !important;
        max-width: 200px !important;
        text-align: center !important;
        align-items: center !important;
        padding: 15px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Fix pricing header content */
    .pricing-header-content {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .pricing-title {
        margin-bottom: 20px !important;
        text-align: center !important;
    }
    
    /* Package card improvements */
    .bg-primary-bg, .bg-secondary-bg {
        border-radius: 12px !important;
        padding: 15px !important;
        margin-bottom: 20px !important;
    }
    
    /* Adjust user counter in pricing */
    .user-counter {
        flex-wrap: wrap !important;
        justify-content: center !important;
        margin: 15px 0 !important;
    }
    
    /* Fix user counter buttons for better touch */
    .user-counter button {
        width: 45px !important;
        height: 45px !important;
        font-size: 20px !important;
    }
    
    .user-counter input {
        width: 70px !important;
        height: 45px !important;
        font-size: 18px !important;
    }
    
    /* Stack price info for mobile */
    .pricing-calculator > div > div {
        flex-direction: column !important;
    }
    
    /* Fix module cards display */
    #modules-container {
        grid-template-columns: 1fr !important; /* Single column layout on mobile */
        gap: 10px !important;
    }
    
    .module-card {
        padding: 15px !important;
        margin-bottom: 10px !important;
        background-color: rgba(255, 255, 255, 0.7) !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        transition: all 0.3s ease !important;
    }
    
    .module-card:active {
        background-color: rgba(255, 255, 255, 0.9) !important;
        transform: translateY(-2px) !important;
    }
    
    /* Fix module checkbox for easier tapping */
    .module-checkbox {
        transform: scale(1.4) !important;
        margin-right: 15px !important;
    }
    
    /* Fix footer with CTA in pricing calculator */
    .pricing-calculator .bg-neutral {
        flex-direction: column !important;
        text-align: center !important;
        padding: 25px 20px !important;
        border-radius: 0 0 15px 15px !important;
        background-color: #f5f5f5 !important;
    }
    
    .pricing-calculator .bg-neutral > div {
        max-width: 100% !important;
        text-align: center !important;
        margin: 0 0 20px 0 !important;
    }
    
    /* Improve CTA button */
    #requestQuoteBtnPricing {
        padding: 12px 25px !important;
        font-size: 16px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 8px !important;
        transition: all 0.3s ease !important;
    }
    
    /* Fix feature cards below pricing calculator */
    #pricing .feature-card {
        padding: 20px !important;
        text-align: center !important;
    }
    
    #pricing .feature-card > div {
        margin: 0 auto 15px !important;
    }
}


/* Contact Modal Mobile Adjustments */
@media (max-width: 767px) {
    .modal-container {
        width: 90% !important;
        max-width: 100% !important;
        padding: 15px !important;
        margin: 0 auto !important;
    }
    
    .modal-header h3 {
        font-size: 1.5rem !important;
    }
    
    .modal-body {
        padding: 15px !important;
    }
    
    .modal-footer {
        padding: 15px !important;
        flex-direction: column !important;
    }
    
    .modal-btn {
        width: 100% !important;
        margin: 5px 0 !important;
    }
    
    /* Better form layout on mobile */
    .form-group {
        margin-bottom: 15px !important;
    }
}

/* Footer Mobile Adjustments */
@media (max-width: 767px) {
    footer, .footer {
        height: auto !important;
        padding: 40px 0 20px !important;
    }
    
    .footer-widget {
        text-align: center !important;
        margin-bottom: 30px !important;
        height: auto !important;
    }
    
    .footer-social {
        justify-content: center !important;
    }
    
    .footer-links {
        text-align: center !important;
    }
    
    /* Fix footer layout */
    .footer .row {
        margin-bottom: 0 !important;
    }
}

/* Team Section Mobile Adjustments */
@media (max-width: 767px) {
    .team-item {
        margin-bottom: 30px !important;
    }
}

/* Fix navigation and header for mobile */
@media (max-width: 767px) {
    .navbar-collapse {
        background: white !important;
        padding: 15px !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    
    .navbar-nav {
        padding-bottom: 10px !important;
    }
    
    .navbar-nav .nav-item {
        margin: 0 !important;
        padding: 8px 0 !important;
    }
}

/* Testimonials Mobile Adjustments */
@media (max-width: 767px) {
    .testimonial-item {
        padding: 20px !important;
    }
    
    .testimonial-author {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* FAQ Mobile Adjustments */
@media (max-width: 767px) {
    .faq-button {
        padding: 15px !important;
        text-align: left !important;
    }
    
    .faq-title-wrapper {
        text-align: center !important;
    }
}

/* Mobile Image Tilting Reset */
@media (max-width: 767px) {
    .feature-image-wrapper:nth-child(1),
    .feature-image-wrapper:nth-child(2),
    .feature-image-wrapper:nth-child(3),
    .feature-item:nth-child(even) .feature-image-wrapper:nth-child(1),
    .feature-item:nth-child(even) .feature-image-wrapper:nth-child(2),
    .feature-item:nth-child(even) .feature-image-wrapper:nth-child(3) {
        transform: none !important;
    }
}

/* Fix for team section */
@media (max-width: 767px) {
    .team-section {
        height: auto !important;
        padding: 60px 0 !important;
    }
    
    .team-item {
        height: auto !important;
        margin-bottom: 30px !important;
    }
}

/* Fix for FAQ section */
@media (max-width: 767px) {
    .faq-section {
        height: auto !important;
        padding: 60px 0 !important;
    }
    
    .faq-item {
        height: auto !important;
        margin-bottom: 15px !important;
    }
}

/* Fix for contact section */
@media (max-width: 767px) {
    .contact-section {
        height: auto !important;
        padding: 60px 0 !important;
    }
}

/* Global fix for any section with fixed heights */
@media (max-width: 767px) {
    [style*="height"], [style*="min-height"] {
        height: auto !important;
        min-height: auto !important;
    }
}