/* ============================================
   GLOBAL OVERFLOW PREVENTION
   ============================================ */

html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative;
}

body {
    overflow-x: hidden !important;
}

/* ============================================
   TABLET STYLES (768px - 1024px)
   ============================================ */

@media screen and (max-width: 1024px) {
    /* Body overflow fix */
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Header adjustments for tablet */
    .header-container {
        padding: 1rem;
        max-width: 100% !important;
    }
    
    .nav-links {
        gap: 1rem;
    }
    
    /* Hero sections for tablet - FIXED */
    .hero, .about-hero, .contact-hero, .members-hero {
        width: calc(100% - 2rem) !important;
        margin: 2rem 1rem !important;
        padding: 3rem 1rem !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .hero h1, .about-hero h1, .contact-hero h1, .members-hero h2 {
        font-size: 2.8rem;
    }
    
    .hero p, .about-hero p, .contact-hero p, .members-hero p {
        font-size: 1.2rem;
        padding: 0 1rem;
    }
    
    /* Pillars grid for tablet - 2 columns */
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .pillar h3 {
        min-height: 50px;
        font-size: 1.6rem;
    }
    
    /* Programs section for tablet */
    .program-item {
        grid-template-columns: 1fr !important;
        gap: 2rem;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Vision & Mission cards for tablet - stack vertically */
    .vision-mission-cards {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        padding: 0 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    .vision-card, .mission-card {
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }
    
    /* Story section for tablet */
    .story-section {
        padding: 2rem;
        margin: 2rem 1rem;
        width: calc(100% - 2rem) !important;
        box-sizing: border-box !important;
    }
    
    /* Members grid for tablet - 2 columns */
    .members-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* Member card for tablet */
    .member-card {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 1.5rem !important;
        box-sizing: border-box !important;
    }

    /* Fix any potential container issues */
    .members-section {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
        margin: 2rem auto !important;
        box-sizing: border-box !important;
    }
    
    /* Member card adjustments */
    .member-image {
        width: 160px;
        height: 160px;
    }
    
    /* Contact info for tablet */
    .contact-info {
        padding: 2rem;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .social-links {
        max-width: 100%;
        gap: 1rem;
    }
    
    .social-link {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
    }
    
    /* Fix all section containers */
    .pillars, .programs, .contact-info-section, .members-section {
        width: 100% !important;
        padding: 0 1rem !important;
        margin: 2rem auto !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }

    /* Read More adjustments for tablet */
    .bio-short {
        max-height: 110px;
    }

    /* For the 6-pillar grid on home page */
    .pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* For values grid */
    .program-item {
        grid-template-columns: 1fr !important;
    }

    /* Objectives grid */
    .objectives-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   PHONE STYLES (up to 767px)
   ============================================ */

@media screen and (max-width: 767px) {
    /* Body padding adjustment */
    body {
        padding-top: 70px;
        overflow-x: hidden !important;
        width: 100% !important;
    }
    
    /* Hero sections for mobile - CRITICAL FIX */
    .hero, .about-hero, .contact-hero, .members-hero {
        padding: 3rem 1rem !important;
        margin: 1rem 0 !important;
        border-radius: 0;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .hero h1, .about-hero h1, .contact-hero h1, .members-hero h2 {
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }
    
    .hero p, .about-hero p, .contact-hero p, .members-hero p {
        font-size: 1.1rem;
        line-height: 1.6;
    }
    
    /* Section containers for mobile - CRITICAL FIX */
    .pillars, .programs, .story-section, .vision-mission-cards, 
    .contact-info-section, .members-section {
        padding: 0 !important;
        margin: 2rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .pillars h2, .programs h2, .contact-info-section h2 {
        font-size: 2rem;
        margin-bottom: 2rem;
        padding: 0 1rem;
    }
    
    /* Pillars grid for mobile - 1 column */
    .pillars-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        padding: 0 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .pillar {
        padding: 1.5rem;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    .pillar h3 {
        min-height: auto;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    /* Programs for mobile */
    .program-content {
        padding: 1.5rem;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .program-content h3 {
        min-height: auto;
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    /* Story section for mobile */
    .story-section {
        padding: 1.5rem !important;
        margin: 1.5rem 0 !important;
        border-radius: 10px;
        width: calc(100% - 2rem) !important;
        box-sizing: border-box !important;
    }
    
    .quote {
        padding: 1.5rem;
        margin: 1.5rem 0;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .quote p {
        font-size: 1.1rem;
    }

    /* Vision & Mission cards for mobile */
    .vision-mission-cards {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        padding: 0 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .vision-card h2, .mission-card h2 {
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
    
    .vision-card p, .mission-card p {
        font-size: 1.1rem;
        line-height: 1.6;
    }
    
    /* Members grid for mobile - 1 column */
    .members-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
        padding: 0 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .member-card {
        padding: 1.5rem;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    .member-image {
        width: 140px;
        height: 140px;
    }
    
    .member-info h3 {
        font-size: 1.4rem;
    }
    
    /* Contact page for mobile */
    .contact-info {
        padding: 1.5rem;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    .contact-method p {
        font-size: 1.1rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .social-links {
        padding: 1rem;
        gap: 1rem;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .social-link {
        width: 55px;
        height: 55px;
        font-size: 1.6rem;
    }
    
    .contact-method h3 {
        font-size: 1.5rem;
    }
    
    /* Footer for mobile */
    footer {
        padding: 1rem;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix for duplicate box-shadow declaration */
    .hero, .about-hero, .contact-hero, .members-hero {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    /* Read More adjustments for mobile */
    .bio-short {
        max-height: 100px;
    }
    
    .bio-short::after {
        height: 30px;
    }
    
    .read-more-btn {
        font-size: 0.95rem;
        margin-top: 8px;
        padding: 4px 8px;
    }

    /* For the 6-pillar grid on home page */
    .pillars-grid {
        grid-template-columns: 1fr !important;
    }

    /* Objectives grid */
    .objectives-grid {
        grid-template-columns: 1fr !important;
    }

    /* Contact page lists */
    .contact-info ul {
        margin-left: 1rem;
    }
}

/* ============================================
   SMALL PHONE STYLES (up to 480px)
   ============================================ */

@media screen and (max-width: 480px) {
    /* Body overflow fix */
    body {
        overflow-x: hidden !important;
    }
    
    /* Hero sections for very small screens */
    .hero h1, .about-hero h1, .contact-hero h1, .members-hero h2 {
        font-size: 1.8rem;
    }
    
    .hero p, .about-hero p, .contact-hero p, .members-hero p {
        font-size: 1rem;
    }
    
    /* Headings for very small screens */
    h1 {
        font-size: 2.2rem;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    h3 {
        font-size: 1.4rem;
    }
    
    /* Social links for very small screens */
    .social-links {
        gap: 0.8rem;
    }
    
    .social-link {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }
    
    /* Member image for very small screens */
    .member-image {
        width: 120px;
        height: 120px;
    }
    
    /* Reduce padding on all containers */
    .pillar, .program-content, .vision-card, .mission-card,
    .member-card, .story-section, .contact-info,
    .quote {
        padding: 1rem !important;
    }

    /* Read More adjustments for small phones */
    .bio-short {
        max-height: 90px;
    }
    
    .read-more-btn {
        font-size: 0.9rem;
        padding: 3px 6px;
    }


}