/**
 * Mobile About Section Fixes
 * - Remove scroll effects (GSAP animations) on mobile only
 * - Reduce font sizes for better readability on mobile
 * - Desktop devices continue to have scroll effects
 */

/* ===== Disable scroll effects on mobile devices (max-width: 768px) ===== */
@media (max-width: 768px) {

    /* Remove GSAP scroll effects - force static display */
    .about-sec .reveal-type,
    .about-sec [data-aos],
    .about-sec .gsap-animated {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }

    /* Disable ScrollTrigger effects on about section */
    .about-sec * {
        animation: none !important;
        transform: none !important;
    }

    /* Force all text to be visible and non-animated */
    .about-sec .reveal-type * {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Fix SplitType character divs - force inline display */
    .about-sec .char,
    .about-sec .word,
    .about-sec .line {
        display: inline !important;
        white-space: normal !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Prevent any wrapper divs from breaking text flow */
    .about-sec .reveal-type > div,
    .about-sec .reveal-type > span,
    .about-sec .section-title > div,
    .about-sec .section-title > span,
    .about-sec .right > div,
    .about-sec .right > span {
        display: inline !important;
        white-space: normal !important;
    }

    /* Force paragraph-style text display */
    .about-sec .section-header .right,
    .about-sec .section-title {
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* ===== Reduce font sizes on mobile ===== */

    /* About section heading - Main title */
    .about-sec .section-header h2,
    .about-sec .section-header .section-title {
        font-size: 24px !important;
        line-height: 30px !important;
    }

    /* About section subtitle */
    .about-sec .section-header .section-subtitle {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    /* About content paragraphs */
    .about-sec .section-content p,
    .about-sec p {
        font-size: 13px !important;
        line-height: 20px !important;
    }

    /* About section description text in .right div */
    .about-sec .section-header .right,
    .about-sec .section-header .right p,
    .about-sec .about-content p {
        font-size: 13px !important;
        line-height: 20px !important;
        color: #ffffff !important;
    }

    /* Funfact boxes */
    .about-sec .funfact-box h3 {
        font-size: 22px !important;
        line-height: 28px !important;
    }

    .about-sec .funfact-box p {
        font-size: 12px !important;
        line-height: 16px !important;
    }

    /* About section padding adjustments */
    .about-sec {
        padding: 60px 24px !important;
    }

    .about-sec .section-header {
        margin-bottom: 60px !important;
    }

    /* Funfacts wrap - single column on mobile */
    .about-sec .funfacts-wrap {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* Remove odd child margin on mobile */
    .about-sec .funfacts-wrap .funfact-box:nth-child(odd) {
        margin-top: 0 !important;
    }
}

/* ===== Extra small devices (max-width: 480px) ===== */
@media (max-width: 480px) {

    /* Further reduce font sizes for very small screens */
    .about-sec .section-header h2,
    .about-sec .section-header .section-title {
        font-size: 20px !important;
        line-height: 26px !important;
    }

    .about-sec .section-header .section-subtitle {
        font-size: 11px !important;
        line-height: 14px !important;
    }

    .about-sec .section-content p,
    .about-sec .section-header .right,
    .about-sec .section-header .right p,
    .about-sec p {
        font-size: 12px !important;
        line-height: 18px !important;
    }

    .about-sec .funfact-box h3 {
        font-size: 20px !important;
        line-height: 26px !important;
    }

    .about-sec .funfact-box p {
        font-size: 11px !important;
        line-height: 15px !important;
    }

    .about-sec {
        padding: 40px 20px !important;
    }
}