/*========================================
 LIPA WEBSITE RESPONSIVE FIX
 Keep original design - improve mobile layout
========================================*/

html,body{
    overflow-x:hidden;
}

img,video{
    max-width:100%;
    height:auto;
}

*{
    box-sizing:border-box;
}

/*--------------------------------------
 LARGE TABLET
--------------------------------------*/
@media (max-width: 992px){

    .navbar{
        padding:15px 20px;
        flex-wrap:wrap;
        gap:15px;
    }

    .menu{
        gap:20px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .hero{
        padding:60px 5% 160px;
    }

    .hero-content{
        flex-direction:column;
        text-align:center;
        gap:35px;
    }

    .hero-text,
    .video-section{
        width:100%;
        max-width:100%;
    }

    .institute-name p,
    .institute-name h1{
        white-space:normal;
        font-size:34px;
        line-height:1.2;
    }

    .hero-text h3{
        font-size:22px;
    }

    .welcome,
    .future-container,
    .page-wrapper{
        flex-direction:column;
        gap:30px;
    }

    .welcome-image,
    .welcome-content,
    .main-content,
    .sidebar{
        width:100%;
        max-width:100%;
    }

    .welcome-image img{
        height:auto;
        border-radius:12px;
    }

    .programme-container,
    .features,
    .news-container,
    .footer-container,
    .statistics,
    .contact-grid,
    .team-grid{
        gap:25px;
    }

    .statistics{
        flex-wrap:wrap;
        justify-content:center;
    }

    .footer-container{
        flex-direction:column;
    }
}

/*--------------------------------------
 TABLET & MOBILE
--------------------------------------*/
@media (max-width: 768px){

    body{
        font-size:16px;
    }

    .navbar{
        position:relative;
        padding:15px 18px;
        align-items:center;
    }

    .menu-toggle{
        display:block;
        font-size:30px;
        cursor:pointer;
    }

    .menu{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:skyblue;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:18px;
        padding:20px 0;
        display:none;
        z-index:9999;
        box-shadow:0 6px 15px rgba(0,0,0,.15);
    }

    .menu.active{
        display:flex;
    }

    .social{
        display:none;
    }

    .logo img{
        width:55px;
    }

    .hero{
        padding:40px 20px 120px;
        text-align:center;
    }

    .hero-content{
        gap:25px;
    }

    .hero-text{
        width:100%;
    }

    .institute-name p,
    .institute-name h1{
        font-size:28px;
        line-height:1.2;
    }

    .hero-text h3{
        font-size:20px;
        line-height:1.4;
    }

    .paragraphy,
    .hero-text p{
        font-size:16px;
        line-height:1.7;
    }

    .btn,
    button{
        width:auto;
        max-width:100%;
    }

    .welcome{
        width:94%;
        margin:35px auto;
    }

    .welcome-text p,
    .welcome-text h1,
    .hero-overlay h1{
        font-size:30px;
        line-height:1.3;
        white-space:normal;
    }

    .programmes h2,
    .news h2,
    .partner-container h2,
    .heading h2,
    .contact-intro h2{
        font-size:32px;
        line-height:1.25;
        text-align:center;
    }

    .programme-container,
    .features,
    .footer-container,
    .statistics,
    .contact-grid,
    .team-grid,
    .quick-links,
    .news-grid{
        flex-direction:column;
        display:flex;
        align-items:center;
    }

    .programme-card,
    .feature,
    .news-card,
    .stat-box,
    .contact-card,
    .team-card{
        width:100%;
        max-width:420px;
    }

    .news-container{
        height:auto;
        min-height:320px;
    }

    .news-text{
        left:20px;
        right:20px;
        bottom:20px;
    }

    .news-text h3{
        font-size:24px;
        line-height:1.3;
    }

    .news-text p{
        font-size:15px;
        line-height:1.5;
    }

    .prev{
        left:10px;
    }

    .next{
        right:10px;
    }

    .all-logos{
        justify-content:center;
        flex-wrap:wrap;
        gap:15px;
    }

    .all-logos img{
        width:110px;
        height:auto;
    }

    .page-wrapper{
        width:94%;
        margin:35px auto;
    }

    .about-hero{
        height:auto;
        min-height:120px;
        padding:25px 0;
    }

    .hero-overlay{
        width:92%;
    }

    .footer{
        padding:50px 20px 25px;
    }

    .footer h3{
        margin-top:10px;
    }

    table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }
}

/*--------------------------------------
 SMALL PHONES
--------------------------------------*/
@media (max-width: 480px){

    .navbar{
        padding:12px 15px;
    }

    .logo img{
        width:50px;
    }

    .hero{
        padding:30px 15px 100px;
    }

    .institute-name p,
    .institute-name h1{
        font-size:22px;
        line-height:1.25;
    }

    .hero-text h3{
        font-size:18px;
    }

    .paragraphy,
    .hero-text p{
        font-size:15px;
    }

    .welcome{
        width:96%;
    }

    .welcome-text p,
    .welcome-text h1,
    .hero-overlay h1{
        font-size:24px;
    }

    .programmes h2,
    .news h2,
    .partner-container h2,
    .heading h2,
    .contact-intro h2{
        font-size:26px;
    }

    .programme-card,
    .feature,
    .news-card,
    .stat-box,
    .contact-card,
    .team-card{
        max-width:100%;
    }

    .news-container{
        min-height:280px;
    }

    .news-text h3{
        font-size:20px;
    }

    .news-text .btn{
        padding:10px 18px;
        font-size:14px;
    }

    .footer{
        padding:40px 15px 20px;
    }

    .footer p,
    .footer a{
        font-size:14px;
        line-height:1.6;
    }

    .development-notice{
        padding:10px 15px;
        font-size:13px;
        line-height:1.5;
    }
}

/*--------------------------------------
 VERY SMALL DEVICES
--------------------------------------*/
@media (max-width: 360px){

    .institute-name p,
    .institute-name h1{
        font-size:20px;
    }

    .hero-text h3{
        font-size:17px;
    }

    .welcome-text p,
    .welcome-text h1,
    .hero-overlay h1{
        font-size:22px;
    }

    .menu a{
        font-size:15px;
    }
}

/* =====================================================
   SMALL ANDROID PHONE FIXES
   Add this at the VERY BOTTOM of responsive.css
===================================================== */

@media (max-width: 480px){

/* =========================
   ABOUT PAGE HERO
========================= */
.about-hero{
    height:auto;
    min-height:140px;
    padding:25px 0;
}

.hero-overlay{
    width:92%;
}

.hero-overlay h1{
    font-size:24px !important;
    line-height:1.3;
    letter-spacing:0;
    white-space:normal;
}

/* =========================
   ABOUT SECTION
========================= */
.page-wrapper{
    width:95%;
    flex-direction:column;
    gap:25px;
}

.about-main{
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.about-logo{
    flex:0 0 auto;
}

.about-logo img{
    width:120px;
    height:120px;
}

.about-heading span{
    font-size:20px !important;
    line-height:1.3;
}

.about-heading h2{
    font-size:22px !important;
    line-height:1.3;
}

.about-text p{
    font-size:15px;
    text-align:left;
}

/* =========================
   STICKY PRESIDENT / VICE PRESIDENT
========================= */
.executive-sidebar{
    width:100%;
    position:sticky;
    top:10px;
    z-index:1000;
}

.executive-card{
    margin-bottom:15px;
}

.executive-card img{
    width:100%;
    height:auto;
    max-height:320px;
    object-fit:cover;
}

.executive-card h4{
    font-size:16px;
}

.executive-card p{
    font-size:14px;
    padding:0 10px 15px;
}

/* =========================
   BOARD MEMBERS
========================= */
.board-grid{
    grid-template-columns:1fr !important;
    gap:20px;
}

.board-card{
    width:100%;
}

.board-card img{
    width:100%;
    height:auto;
    object-fit:cover;
}

.board-card h4{
    font-size:17px;
}

.board-card p{
    font-size:14px;
}

/* =========================
   MANAGEMENT TEAM
========================= */
.management-grid{
    grid-template-columns:1fr !important;
    gap:20px;
}

.management-card{
    width:100%;
}

.management-card img{
    width:100%;
    height:auto;
    object-fit:cover;
}

.management-card h4{
    font-size:17px;
}

.management-card p{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
    font-size:14px;
    line-height:1.5;
}

/*=========================
   SENIOR STAFF
========================= */
.staff-grid{
    grid-template-columns:1fr !important;
    gap:20px;
}
.staff-grid .team-card{
    width:100%;
    padding:18px;
}
.staff-grid .team-card img{
    width:100%;
    max-width:240px;
    height:auto;
}
.staff-grid .team-card h4{
    font-size:18px;
}
.staff-grid .position,
.staff-grid .phone{
    display:block !important;
    font-size:14px;
    line-height:1.5;
}
/*=========================
   SENIOR STAFF - SMALL PHONES
========================= */
@media (max-width: 480px){

    .senior-row{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:22px !important;
        width:100% !important;
    }

    .senior-row .team-card{
        width:100% !important;
        max-width:340px !important;
        margin:0 auto !important;
        padding:20px !important;
        text-align:center !important;
        border-radius:16px !important;
    }

    .senior-row .team-card img{
        width:100% !important;
        max-width:220px !important;
        height:220px !important;
        object-fit:cover !important;
        border-radius:12px !important;
        margin:0 auto 15px !important;
        display:block !important;
    }

    .senior-row .team-card h4{
        font-size:18px !important;
        line-height:1.4 !important;
        white-space:normal !important;
        word-break:break-word !important;
        margin-bottom:8px !important;
        color:#06245c !important;
    }

    .senior-row .team-card p{
        display:block !important;
        font-size:14px !important;
        line-height:1.6 !important;
        white-space:normal !important;
        color:#555 !important;
        font-weight:bold !important;
        margin-bottom:0 !important;
    }
}



/* =========================
   LIPA ACTIVITIES GALLERY
========================= */
.gallery-grid,
.activities-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px;
}

.gallery-grid img,
.activities-grid img{
    width:100%;
    height:140px;
    object-fit:cover;
    border-radius:8px;
}

/* =========================
   FACILITATORS
========================= */
.facilitator-grid{
    grid-template-columns:1fr !important;
    gap:20px;
}

.facilitator-card{
    width:100%;
    max-width:340px;
    margin:0 auto;
}

.facilitator-card img{
    width:100%;
    height:auto;
    max-height:300px;
    object-fit:cover;
}

.facilitator-card h4{
    font-size:18px;
}

.facilitator-card p{
    font-size:14px;
}

/* =========================
   GENERAL IMAGES
========================= */
img{
    max-width:100%;
    height:auto;
}

}


/*========================================
  BOARD CHAIR + MESSAGE MOBILE FIX
========================================*/
@media (max-width: 480px){

    /* Make the layout vertical on small phones */
    .board-top{
        display:flex !important;
        flex-direction:column !important;
        gap:22px !important;
        width:100% !important;
    }

    /* Board Chair card first */
    .board-chair{
        width:100% !important;
        order:1 !important;
    }

    .board-chair-card{
        width:100% !important;
        max-width:340px !important;
        margin:0 auto !important;
    }

    .board-chair-card img{
        width:100% !important;
        height:auto !important;
        max-height:320px !important;
        object-fit:cover !important;
        border-radius:12px !important;
    }

    .board-chair-card h4{
        font-size:20px !important;
        line-height:1.4 !important;
    }

    .board-chair-card p{
        font-size:15px !important;
        line-height:1.5 !important;
    }

    /* Message card underneath */
    .board-message{
        width:100% !important;
        order:2 !important;
        padding:25px 18px !important;
        margin:0 auto !important;
    }

    .board-message h3{
        font-size:22px !important;
        line-height:1.3 !important;
        margin-bottom:18px !important;
        text-align:center !important;
    }

    .board-message p{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        font-size:15px !important;
        line-height:1.8 !important;
        text-align:left !important;
        white-space:normal !important;
        word-break:break-word !important;
    }
}
/*========================================
  DIRECTOR GENERAL + MESSAGE MOBILE FIX
========================================*/
@media (max-width: 480px){

    /* Make the layout vertical on small phones */
    .management-top{
        display:flex !important;
        flex-direction:column !important;
        gap:22px !important;
        width:100% !important;
    }

    /* Director General card first */
    .director-general{
        width:100% !important;
        order:1 !important;
    }

    .director-general-card{
        width:100% !important;
        max-width:340px !important;
        margin:0 auto !important;
    }

    .director-general-card img{
        width:100% !important;
        height:auto !important;
        max-height:320px !important;
        object-fit:cover !important;
        border-radius:12px !important;
    }

    .director-general-card h4{
        font-size:20px !important;
        line-height:1.4 !important;
        text-align:center !important;
    }

    .director-general-card p{
        font-size:15px !important;
        line-height:1.5 !important;
        text-align:center !important;
    }

    /* Message card underneath */
    .management-message{
        width:100% !important;
        order:2 !important;
        padding:25px 18px !important;
        margin:0 auto !important;
    }

    .management-message h3{
        font-size:22px !important;
        line-height:1.3 !important;
        margin-bottom:18px !important;
        text-align:center !important;
    }

    .management-message p{
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;
        font-size:15px !important;
        line-height:1.8 !important;
        text-align:left !important;
        white-space:normal !important;
        word-break:break-word !important;
    }

    .statement-button{
        text-align:center !important;
        margin-top:20px !important;
    }

    .statement-button .read-btn{
        display:inline-block !important;
        width:auto !important;
        padding:12px 22px !important;
    }
}
/* ========================================
   PROGRAMME / COURSE CARDS
======================================== */

/* DESKTOP VIEW */
.programme-container,
.program-grid,
.programmes-grid,
.course-grid,
.certificate-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
    width:100%;
}

.programme-card,
.program-card,
.course-card,
.certificate-card,
.Flagship-card-tall,
.Public-sector-orientation{
    width:100%;
}

.programme-card img,
.program-card img,
.course-card img,
.certificate-card img,
.Flagship-card-tall img,
.Public-sector-orientation img{
    width:100%;
    height:240px;
    object-fit:cover;
    border-radius:12px;
}

.card-content h3{
    font-size:1.3rem;
    line-height:1.4;
}

.card-content p{
    font-size:0.95rem;
    line-height:1.6;
}

/* ========================================
   MOBILE VIEW
======================================== */
@media (max-width: 480px){

    .programme-container,
    .program-grid,
    .programmes-grid,
    .course-grid,
    .certificate-grid{
        grid-template-columns:1fr !important;
        gap:22px !important;
        justify-items:center !important;
    }

    .programme-card,
    .program-card,
    .course-card,
    .certificate-card,
    .Flagship-card-tall,
    .Public-sector-orientation{
        width:100% !important;
        max-width:350px !important;
        margin:0 auto !important;
    }

    .programme-card img,
    .program-card img,
    .course-card img,
    .certificate-card img,
    .Flagship-card-tall img,
    .Public-sector-orientation img{
        height:220px !important;
    }

    .card-content h3{
        font-size:20px !important;
    }

    .card-content p{
        font-size:14px !important;
        line-height:1.6 !important;
    }
}
/*==================================================
  RESEARCH / CONSULTANCY MOBILE FIX
==================================================*/
@media (max-width: 480px){

/* =========================
   HERO BANNER
========================= */
.about-hero{
    min-height:140px !important;
    height:auto !important;
    padding:25px 0 !important;
}

.hero-overlay{
    width:92% !important;
}

.hero-overlay h1{
    font-size:22px !important;
    line-height:1.3 !important;
    white-space:normal !important;
}

.hero-overlay p{
    font-size:14px !important;
    line-height:1.6 !important;
}

/* =========================
   TWO COLUMN SECTION
========================= */
.research-container{
    display:flex !important;
    flex-direction:column !important;
    gap:25px !important;
}

.research-image,
.research-text{
    width:100% !important;
}

.research-text h2{
    font-size:26px !important;
    line-height:1.3 !important;
}

.research-text p{
    font-size:15px !important;
    line-height:1.7 !important;
}

/* =========================
   ALL 3-COLUMN CARDS
========================= */
.research-grid,
.consultancy-grid,
.why-grid,
.mandate-grid,
.publication-grid,
.partners-list{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
}

/* =========================
   LIBRARY SECTION
========================= */
.library-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
}

/* =========================
   RESEARCH PROCESS
========================= */
.process-container{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
}

/* =========================
   CONTACT SECTION
========================= */
.research-contact-container{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:20px !important;
}

/* =========================
   DOCUMENT SECTION
========================= */
.document-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
}

/* =========================
   ALL CARD TYPES
========================= */
.research-card,
.consultancy-card,
.library-card,
.why-card,
.mandate-card,
.publication-card,
.process-step,
.research-contact-info,
.research-call{
    width:100% !important;
    max-width:340px !important;
    margin:0 auto !important;
    padding:22px 18px !important;
}

/* =========================
   CARD HEADINGS
========================= */
.research-card h3,
.consultancy-card h3,
.library-card h3,
.why-card h3,
.mandate-card h3,
.publication-card h3,
.process-step h3{
    font-size:20px !important;
    line-height:1.4 !important;
}

/* =========================
   CARD PARAGRAPHS
========================= */
.research-card p,
.consultancy-card p,
.library-card p,
.why-card p,
.mandate-card p,
.publication-card p,
.process-step p,
.research-contact-info p,
.research-call p{
    font-size:14px !important;
    line-height:1.7 !important;
    white-space:normal !important;
}

/* =========================
   PARTNER BOXES
========================= */
.partners-list div{
    width:100% !important;
    max-width:340px !important;
    margin:0 auto !important;
    padding:18px !important;
}

/* =========================
   DOCUMENT LINKS
========================= */
.document-grid a{
    width:100% !important;
    max-width:340px !important;
    margin:0 auto !important;
    padding:18px !important;
    font-size:15px !important;
}

/* =========================
   SECTION SPACING
========================= */
.research-intro,
.research-services,
.consultancy-services,
.library-section,
.research-process,
.why-lipa,
.research-contact,
.mandate-section,
.publication-section,
.partners-section,
.documents-section{
    padding:50px 4% !important;
}

.section-header h2{
    font-size:28px !important;
    line-height:1.3 !important;
}

.section-header p{
    font-size:15px !important;
    line-height:1.7 !important;
}
}