/* ===================================
   ABOUT PAGE MOBILE FIXES
   Specific fixes for about page rendering issues
   =================================== */

/* Fix about content layout on mobile */
@media (max-width: 768px) {
    .about-content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 1.5rem !important;
    }
    
    /* Fix founder section padding */
    .about-content[style*="padding: 3rem"] {
        padding: 1.5rem !important;
    }
    
    /* Fix about image */
    .about-image {
        height: 300px !important;
        margin-bottom: 1.5rem;
    }
    
    .about-image[style*="box-shadow"] {
        border: 3px solid white !important;
    }
    
    /* Fix about text headings */
    .about-text h2[style*="font-size: 2.5rem"] {
        font-size: 1.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Fix about text paragraphs */
    .about-text p[style*="font-size: 1.05rem"],
    .about-text p[style*="font-size: 1rem"] {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Fix border-left quote */
    .about-text div[style*="border-left"] {
        padding-left: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Fix button container */
    .about-text div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .about-text div[style*="display: flex"] .btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .about-content {
        padding: 1rem !important;
    }
    
    .about-image {
        height: 250px !important;
    }
    
    /* Fix founder name overlay */
    .about-image div[style*="position: absolute"] {
        padding: 1rem !important;
    }
    
    .about-image div[style*="position: absolute"] h3 {
        font-size: 1.1rem !important;
    }
    
    .about-image div[style*="position: absolute"] p {
        font-size: 0.85rem !important;
    }
    
    .about-text h2[style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
    }
    
    .about-text p {
        font-size: 0.9rem !important;
    }
}

/* Fix section title on mobile */
@media (max-width: 768px) {
    .section-title h2[style*="font-size: 2.5rem"] {
        font-size: 1.75rem !important;
    }
    
    .section-title div[style*="width: 80px"] {
        width: 60px !important;
        height: 3px !important;
    }
}

@media (max-width: 480px) {
    .section-title h2[style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
    }
}

/* Fix CTA section on mobile */
@media (max-width: 768px) {
    section div[style*="max-width: 800px"] h2[style*="font-size: 2.5rem"] {
        font-size: 1.75rem !important;
    }
    
    section div[style*="max-width: 800px"] p[style*="font-size: 1.2rem"] {
        font-size: 1rem !important;
    }
    
    section div[style*="max-width: 800px"] div[style*="display: flex"] {
        flex-direction: column !important;
    }
    
    section div[style*="max-width: 800px"] .btn[style*="font-size: 1.1rem"] {
        font-size: 1rem !important;
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    section div[style*="max-width: 800px"] h2[style*="font-size: 2.5rem"] {
        font-size: 1.5rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    section div[style*="max-width: 800px"] p[style*="font-size: 1.2rem"] {
        font-size: 0.95rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* Fix value cards on mobile */
@media (max-width: 768px) {
    .values-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .value-card {
        padding: 2rem 1.5rem !important;
    }
    
    .value-icon {
        font-size: 2.5rem !important;
    }
    
    .value-title {
        font-size: 1.35rem !important;
    }
    
    .value-text {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
    }
}

@media (max-width: 480px) {
    .value-card {
        padding: 1.5rem 1.25rem !important;
    }
    
    .value-icon {
        font-size: 2.25rem !important;
    }
    
    .value-title {
        font-size: 1.25rem !important;
    }
    
    .value-text {
        font-size: 0.9rem !important;
    }
}

/* Fix stats grid on mobile */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    
    .stat-box {
        padding: 1.5rem 1rem !important;
    }
    
    .stat-number {
        font-size: 2.25rem !important;
    }
    
    .stat-label {
        font-size: 0.95rem !important;
    }
}

/* Fix hero section on about page */
@media (max-width: 768px) {
    .hero[style*="padding: 80px 20px"] {
        padding: 60px 20px 50px !important;
    }
}

@media (max-width: 480px) {
    .hero[style*="padding: 80px 20px"] {
        padding: 50px 15px 40px !important;
    }
    
    .hero h1 {
        font-size: 1.65rem !important;
    }
    
    .hero p {
        font-size: 0.95rem !important;
    }
}

/* Fix card grid on about page */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    
    .card {
        max-width: 500px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    .card {
        max-width: 100% !important;
    }
    
    .card-content {
        padding: 1.25rem !important;
    }
    
    .card-title {
        font-size: 1.25rem !important;
    }
    
    .card-text {
        font-size: 0.9rem !important;
    }
}

/* Ensure proper spacing on mobile */
@media (max-width: 480px) {
    .section {
        padding: 40px 15px !important;
    }
    
    .container {
        padding: 0 15px !important;
    }
}

/* Fix overflow issues */
@media (max-width: 768px) {
    .about-content,
    .value-card,
    .stat-box,
    .card {
        overflow: hidden;
    }
    
    /* Prevent text overflow */
    .about-text p,
    .value-text,
    .card-text {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
}

/* Fix image aspect ratios on mobile */
@media (max-width: 768px) {
    .about-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* Improve readability on small screens */
@media (max-width: 480px) {
    body {
        font-size: 16px;
    }
    
    p {
        line-height: 1.6 !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
        line-height: 1.3 !important;
    }
}

/* Fix button alignment in flex containers */
@media (max-width: 768px) {
    div[style*="display: flex"] .btn {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

/* Ensure proper margin and padding */
@media (max-width: 480px) {
    .section-title {
        margin-bottom: 2rem !important;
        padding: 0 10px;
    }
    
    .section-title h2 {
        margin-bottom: 0.75rem !important;
    }
    
    .section-title p {
        font-size: 0.95rem !important;
    }
}