/* ==================================================
   ABOUT PAGE RESPONSIVE CSS
   For about.html only
   Desktop, Laptop, Tablet and Mobile
================================================== */


/* ==================================================
   LARGE DESKTOP
   1201px and above
================================================== */

@media screen and (min-width: 1201px) {

    .page-wrapper {
        width: 90%;
        max-width: 1400px;
        margin: 60px auto;
        display: flex;
        gap: 40px;
        align-items: flex-start;
    }

    .main-content {
        flex: 1;
        min-width: 0;
    }

    /* Executive Sidebar */
    .executive-sidebar {
        display: block;
        width: 280px;
        position: sticky;
        top: 120px;
        align-self: flex-start;
        flex-shrink: 0;
    }

    .executive-card {
        width: 100%;
    }

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


/* ==================================================
   LAPTOP
   993px to 1200px
================================================== */

@media screen and (min-width: 993px) and (max-width: 1200px) {

    .page-wrapper {
        width: 92%;
        margin: 50px auto;
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }

    .main-content {
        flex: 1;
        min-width: 0;
    }

    /* Executive Sidebar stays sticky */
    .executive-sidebar {
        display: block;
        width: 240px;
        position: sticky;
        top: 110px;
        align-self: flex-start;
        flex-shrink: 0;
    }

    .executive-sidebar h3 {
        font-size: 21px;
    }

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

    /* About section */
    .about-wrapper {
        padding: 35px;
    }

    .about-main {
        gap: 25px;
    }

    .about-logo {
        flex: 0 0 160px;
    }

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

    .about-heading span {
        font-size: 25px;
    }

    .about-heading h2 {
        font-size: 31px;
    }

    .about-text p {
        font-size: 16px;
    }

    /* Board */
    .board-top {
        grid-template-columns: 280px 1fr;
        gap: 25px;
    }

    .board-chair-card img {
        height: 290px;
    }

    .board-message {
        padding: 35px;
    }

    .board-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    /* Management */
    .management-top {
        grid-template-columns: 280px 1fr;
        gap: 25px;
    }

    .director-general-card img {
        height: 330px;
    }

    .management-message {
        padding: 35px;
    }

    .management-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    /* Senior Staff */
    .senior-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    .senior-row img {
        height: 200px;
    }
}


/* ==================================================
   TABLET
   769px to 992px
================================================== */

@media screen and (min-width: 769px) and (max-width: 992px) {

    .page-wrapper {
        width: 92%;
        margin: 45px auto;
        display: block;
    }

    /* Executive section below main content */
    .executive-sidebar {
        width: 100%;
        position: static;
        margin-top: 50px;
    }

    .executive-sidebar h3 {
        font-size: 23px;
    }

    .executive-card {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 25px;
    }

    .executive-card img {
        height: 350px;
        object-fit: cover;
    }

    /* Hero */
    .about-hero {
        height: 110px;
    }

    .hero-overlay h1 {
        font-size: 40px;
    }

    /* About */
    .about-wrapper {
        padding: 30px;
    }

    .about-main {
        gap: 25px;
    }

    .about-logo {
        flex: 0 0 140px;
    }

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

    .about-heading span {
        font-size: 24px;
    }

    .about-heading h2 {
        font-size: 29px;
    }

    .about-text p {
        font-size: 16px;
    }

    /* Headers */
    .section-header h2 {
        font-size: 36px;
    }

    .section-header p {
        width: 85%;
        font-size: 17px;
    }

    /* Board */
    .board-top {
        grid-template-columns: 260px 1fr;
        gap: 25px;
    }

    .board-chair-card img {
        height: 280px;
    }

    .board-message {
        padding: 30px;
    }

    .board-message h3 {
        font-size: 25px;
    }

    .board-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* Management */
    .management-top {
        grid-template-columns: 260px 1fr;
        gap: 25px;
    }

    .director-general-card img {
        height: 310px;
    }

    .management-message {
        padding: 30px;
    }

    .management-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .management-grid img {
        height: 300px;
    }

    /* Senior Staff */
    .senior-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .senior-row img {
        height: 230px;
    }
}


/* ==================================================
   MOBILE AND SMALL TABLET
   768px and below
================================================== */

@media screen and (max-width: 768px) {

    /* Main layout */
    .page-wrapper {
        width: 92%;
        margin: 35px auto;
        display: block;
    }

    /* Hero */
    .about-hero {
        height: 100px;
    }

    .hero-overlay {
        width: 92%;
    }

    .hero-overlay h1 {
        font-size: 30px;
        letter-spacing: 1px;
        padding-bottom: 10px;
    }

    .hero-overlay h1::after {
        width: 75px;
        height: 4px;
    }

    /* About */
    .about-content {
        margin-bottom: 55px;
    }

    .about-wrapper {
        padding: 25px 20px;
    }

    .about-main {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .about-logo {
        flex: none;
    }

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

    .about-heading {
        text-align: center;
        margin-bottom: 25px;
    }

    .about-heading span {
        font-size: 22px;
    }

    .about-heading h2 {
        font-size: 27px;
    }

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

    /* Section Headers */
    .section-header {
        margin-bottom: 35px;
    }

    .section-header h2 {
        font-size: 32px;
    }

    .section-header p {
        width: 100%;
        font-size: 16px;
    }

    /* Board */
    .board-section {
        margin: 60px 0;
    }

    .board-top {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    .board-chair {
        width: 100%;
        max-width: 380px;
        margin: auto;
    }

    .board-chair-card img {
        height: auto;
        max-height: 400px;
    }

    .board-message {
        padding: 25px 20px;
    }

    .board-message h3 {
        font-size: 24px;
    }

    .board-message p {
        font-size: 16px;
        text-align: left;
    }

    /* Board Members */
    .board-members h3 {
        font-size: 24px;
        gap: 10px;
        margin: 40px 0 30px;
    }

    .board-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* General cards */
    .medium-card {
        width: 100%;
        max-width: 380px;
        margin: auto;
    }

    .medium-card img {
        height: auto;
        max-height: 400px;
    }

    /* Management */
    .management-section {
        margin: 60px 0;
    }

    .management-top {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-bottom: 40px;
    }

    .director-general {
        width: 100%;
        max-width: 380px;
        margin: auto;
    }

    .director-general-card img {
        height: auto;
        max-height: 450px;
    }

    .management-message {
        padding: 25px 20px;
    }

    .management-message h3 {
        font-size: 23px;
        text-align: center;
    }

    .management-message p {
        font-size: 16px;
        text-align: left;
    }

    /* Deputy Directors */
    .management-members h3 {
        font-size: 24px;
        gap: 10px;
        margin: 40px 0 30px;
    }

    .management-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .management-grid .team-card {
        max-width: 380px;
        margin: auto;
    }

    .management-grid img {
        height: auto;
        max-height: 400px;
    }

    /* Senior Staff */
    .senior-section {
        margin-top: 60px;
    }

    .senior-content {
        gap: 25px;
    }

    .senior-row {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .senior-row .team-card {
        width: 100%;
        max-width: 380px;
        margin: auto;
    }

    .senior-row img {
        height: auto;
        max-height: 400px;
    }

    /* Executive Sidebar */
    .executive-sidebar {
        width: 100%;
        position: static;
        margin-top: 50px;
    }

    .executive-sidebar h3 {
        font-size: 23px;
    }

    .executive-card {
        width: 100%;
        max-width: 380px;
        margin: 0 auto 25px;
    }

    .executive-card img {
        height: auto;
        max-height: 450px;
        object-fit: cover;
    }

    /* Cards */
    .team-card h4 {
        font-size: 19px;
    }

    .team-card p {
        font-size: 15px;
    }
}


/* ==================================================
   SMALL MOBILE PHONES
   480px and below
================================================== */

@media screen and (max-width: 480px) {

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

    /* Hero */
    .about-hero {
        height: 90px;
    }

    .hero-overlay h1 {
        font-size: 25px;
    }

    /* About */
    .about-wrapper {
        padding: 20px 15px;
    }

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

    .about-heading span {
        font-size: 19px;
    }

    .about-heading h2 {
        font-size: 23px;
    }

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

    /* Headings */
    .section-header h2 {
        font-size: 27px;
    }

    .section-header p {
        font-size: 15px;
    }

    .board-message,
    .management-message {
        padding: 20px 15px;
    }

    .board-message h3,
    .management-message h3 {
        font-size: 21px;
    }

    .board-members h3,
    .management-members h3 {
        font-size: 21px;
    }

    .executive-sidebar h3 {
        font-size: 21px;
    }

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

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

    .read-btn {
        padding: 12px 28px;
        font-size: 14px;
    }

}

/* ==================================================
   HOMEPAGE RESPONSIVE CSS ONLY
   INDEX.HTML / HOME.CSS
   ================================================== */


/* ==================================================
   LARGE LAPTOPS AND SMALL DESKTOPS
   1200px and below
================================================== */

@media (max-width: 1200px) {

    /* HERO */
    .hero {
        padding: 70px 5% 200px;
    }

    .institute-name p,
    .institute-name h1 {
        white-space: normal;
    }

    .institute-name p {
        font-size: 34px;
    }

    .institute-name h1 {
        font-size: 36px;
    }

    /* WELCOME */
    .welcome-text p,
    .welcome-text h1 {
        white-space: normal;
    }

    .welcome-text p,
    .welcome-text h1 {
        font-size: 38px;
    }

    /* PROGRAMMES */
    .programme-container,
    .programmes .programme-container {
        gap: 50px;
    }

    /* STATISTICS */
    .statistics {
        gap: 45px;
    }

    /* PARTNERS */
    .all-logos {
        gap: 25px;
    }

}


/* ==================================================
   TABLETS AND SMALL LAPTOPS
   992px and below
================================================== */

@media (max-width: 992px) {

    /* HERO */
    .hero {
        padding: 70px 5% 190px;
    }

    .hero-content {
        gap: 30px;
    }

    .institute-name p {
        font-size: 30px;
    }

    .institute-name h1 {
        font-size: 32px;
    }

    .paragraphy {
        font-size: 17px;
    }

    /* WELCOME */
    .welcome {
        gap: 35px;
    }

    .welcome-image img {
        height: 400px;
    }

    .welcome-text p,
    .welcome-text h1 {
        font-size: 32px;
    }

    /* PROGRAMMES */
    .programme-container,
    .programmes .programme-container {
        gap: 35px;
    }

    .programme-card {
        width: 280px;
        flex: 0 0 280px;
    }

    /* STATISTICS */
    .statistics {
        gap: 30px;
    }

    .stat-box {
        width: 150px;
    }

    /* NEWS */
    .news-container {
        height: 400px;
    }

    .news-text {
        left: 50px;
        bottom: 45px;
    }

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

    /* PARTNERS */
    .all-logos {
        flex-wrap: wrap;
        gap: 30px;
    }

}


/* ==================================================
   TABLETS
   768px and below
================================================== */

@media (max-width: 768px) {

    /* ------------------------------
       HOMEPAGE HERO
    ------------------------------ */

    .hero {
        padding: 60px 6% 180px;
    }

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

    .hero-text {
        width: 100%;
    }

    .video-section {
        width: 100%;
        max-width: 650px;
    }

    .institute-name {
        width: 100%;
    }

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

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

    .paragraphy {
        font-size: 17px;
    }

    .hero .btn {
        display: inline-block;
        margin: 20px auto 0;
    }

    /* ------------------------------
       WELCOME SECTION
    ------------------------------ */

    .welcome {
        width: 90%;
        flex-direction: column;
        gap: 35px;
        margin: 60px auto;
    }

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

    .welcome-image img {
        height: auto;
        max-height: 450px;
    }

    .welcome-content {
        text-align: center;
    }

    .welcome-text p {
        font-size: 34px;
        white-space: normal;
        line-height: 1.2;
    }

    .welcome-text h1 {
        font-size: 36px;
        white-space: normal;
        line-height: 1.2;
    }

    /* ------------------------------
       PROGRAMMES
    ------------------------------ */

    .programmes {
        padding: 60px 5%;
    }

    .programmes h2 {
        font-size: 34px;
        margin-bottom: 35px;
    }

    .programme-container,
    .programmes .programme-container {
        flex-direction: column;
        align-items: center;
        gap: 35px;
    }

    .programme-card,
    .programmes .programme-card {
        width: 100%;
        max-width: 420px;
        flex: 0 0 auto;
    }

    /* ------------------------------
       STATISTICS
    ------------------------------ */

    .statistics {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
        padding: 50px 5%;
    }

    .stat-box {
        width: 100%;
    }

    /* ------------------------------
       NEWS
    ------------------------------ */

    .news {
        padding: 60px 5%;
    }

    .news h2 {
        font-size: 34px;
    }

    .news-container {
        height: 400px;
        border-radius: 18px;
    }

    .news-text {
        left: 35px;
        right: 35px;
        bottom: 60px;
        max-width: 100%;
    }

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

    .news-text p {
        font-size: 17px;
    }

    .prev {
        left: 15px;
    }

    .next {
        right: 15px;
    }

    /* ------------------------------
       PARTNERS
    ------------------------------ */

    .partners {
        padding: 60px 5%;
    }

    .partner-container h2 {
        font-size: 34px;
    }

    .all-logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        justify-items: center;
    }

}


/* ==================================================
   MOBILE DEVICES
   576px and below
================================================== */

@media (max-width: 576px) {

    /* ------------------------------
       HERO
    ------------------------------ */

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

    .hero-content {
        gap: 25px;
    }

    .institute-name p {
        font-size: 26px;
    }

    .institute-name h1 {
        font-size: 28px;
        letter-spacing: 0;
    }

    .paragraphy {
        font-size: 16px;
        line-height: 1.6;
    }

    .hero .btn {
        padding: 12px 30px;
        font-size: 16px;
    }

    .youtube-button {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
    }

    /* ------------------------------
       WELCOME
    ------------------------------ */

    .welcome {
        width: 90%;
        margin: 45px auto;
    }

    .welcome-image img {
        height: 300px;
    }

    .welcome-text p {
        font-size: 27px;
    }

    .welcome-text h1 {
        font-size: 29px;
    }

    .text p {
        font-size: 16px;
    }

    .text .btn {
        padding: 11px 28px;
        font-size: 15px;
    }

    /* ------------------------------
       PROGRAMMES
    ------------------------------ */

    .programmes {
        padding: 50px 5%;
    }

    .programmes h2 {
        font-size: 30px;
    }

    .programme-card {
        max-width: 100%;
        min-height: auto;
    }

    .programme-card img {
        height: 160px;
    }

    .programme-card h3 {
        font-size: 20px;
        min-height: auto;
    }

    .programme-card p {
        height: auto;
        padding: 0 10px;
    }

    /* ------------------------------
       STATISTICS
    ------------------------------ */

    .statistics {
        grid-template-columns: 1fr 1fr;
        gap: 30px 15px;
    }

    .stat-box h3 {
        font-size: 30px;
    }

    .stat-box p {
        font-size: 15px;
    }

    /* ------------------------------
       NEWS
    ------------------------------ */

    .news {
        padding: 50px 5%;
    }

    .news h2 {
        font-size: 30px;
        margin-bottom: 30px;
    }

    .news-container {
        height: 420px;
        border-radius: 15px;
    }

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

    .news-text h3 {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .news-text p {
        font-size: 16px;
        margin-bottom: 15px;
    }

    .news-text .btn {
        padding: 10px 25px;
    }

    .prev,
    .next {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }

    .prev {
        left: 10px;
    }

    .next {
        right: 10px;
    }

    .dots {
        bottom: 15px;
    }

    /* ------------------------------
       PARTNERS
    ------------------------------ */

    .partners {
        padding: 50px 5%;
    }

    .partner-container h2 {
        font-size: 30px;
    }

    .partner-container p {
        font-size: 16px;
    }

    .all-logos {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .all-logos img {
        width: 120px;
        height: 80px;
    }

}


/* ==================================================
   SMALL MOBILE DEVICES
   400px and below
================================================== */

@media (max-width: 400px) {

    .institute-name p {
        font-size: 23px;
    }

    .institute-name h1 {
        font-size: 25px;
    }

    .welcome-text p {
        font-size: 24px;
    }

    .welcome-text h1 {
        font-size: 26px;
    }

    .statistics {
        grid-template-columns: 1fr;
    }

    .news-container {
        height: 450px;
    }

    .all-logos {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   RESPONSIVE CSS
   LIPA WEBSITE
   Home Page + Programmes Page
   ABOUT PAGE EXECUTIVE SIDEBAR NOT MODIFIED
========================================================= */


/* =========================================================
   LARGE DESKTOP
   1200px and below
========================================================= */

@media screen and (max-width: 1200px) {

    /* =========================
       HOME PAGE
    ========================= */

    .hero-content {
        gap: 30px;
    }

    .institute-name p,
    .institute-name h1 {
        white-space: normal;
    }

    .welcome-text p,
    .welcome-text h1 {
        white-space: normal;
    }

    .programme-container,
    .programmes .programme-container {
        gap: 40px;
    }


    /* =========================
       PROGRAMMES PAGE
    ========================= */

    .certificate-section {
        padding: 70px 5%;
    }

    .certificate-grid {
        grid-template-columns: repeat(3, minmax(250px, 1fr));
        gap: 25px;
    }

}


/* =========================================================
   LAPTOP / TABLET LANDSCAPE
   992px and below
========================================================= */

@media screen and (max-width: 992px) {

    /* =========================
       HOME PAGE
    ========================= */

    .hero {
        padding: 70px 5% 200px;
    }

    .hero-content {
        gap: 30px;
    }

    .institute-name p {
        font-size: 32px;
    }

    .institute-name h1 {
        font-size: 34px;
    }

    .hero-text {
        width: 52%;
    }

    .video-section {
        width: 45%;
    }

    .welcome {
        gap: 30px;
    }

    .welcome-text p {
        font-size: 35px;
    }

    .welcome-text h1 {
        font-size: 35px;
    }

    .welcome-image img {
        height: 400px;
    }

    .programme-container,
    .programmes .programme-container {
        gap: 30px;
    }

    .statistics {
        gap: 40px;
    }

    .all-logos {
        gap: 25px;
    }

    .all-logos img {
        width: 130px;
    }


    /* =========================
       PROGRAMMES PAGE
    ========================= */

    .certificate-section {
        padding: 60px 4%;
    }

    .heading {
        margin-bottom: 40px;
    }

    .heading h2 {
        font-size: 2.2rem;
    }

    .certificate-grid {
        grid-template-columns: repeat(2, minmax(280px, 1fr));
        gap: 25px;
    }

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

}


/* =========================================================
   TABLET
   768px and below
========================================================= */

@media screen and (max-width: 768px) {

    /* =========================
       HOME PAGE
    ========================= */

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

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

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

    .institute-name {
        width: 100%;
    }

    .institute-name p {
        font-size: 34px;
    }

    .institute-name h1 {
        font-size: 36px;
    }

    .paragraphy {
        font-size: 17px;
    }

    .hero .btn {
        display: inline-block;
    }

    .video-section {
        max-width: 650px;
    }

    .welcome {
        flex-direction: column;
        gap: 35px;
        margin: 60px auto;
    }

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

    .welcome-image img {
        height: 400px;
    }

    .welcome-content {
        text-align: center;
    }

    .welcome-text p {
        font-size: 36px;
    }

    .welcome-text h1 {
        font-size: 38px;
    }

    .programme-container,
    .programmes .programme-container {
        flex-wrap: wrap;
        gap: 30px;
    }

    .programme-card {
        flex: 0 0 300px;
    }

    .statistics {
        flex-wrap: wrap;
        gap: 40px;
    }

    .stat-box {
        width: 40%;
    }

    .news {
        padding: 60px 5%;
    }

    .news-container {
        height: 400px;
    }

    .news-text {
        left: 45px;
        bottom: 50px;
    }

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

    .news-text p {
        font-size: 18px;
    }

    .all-logos {
        flex-wrap: wrap;
        gap: 30px;
    }

    .all-logos img {
        width: 140px;
    }


    /* =========================
       PROGRAMMES PAGE
    ========================= */

    .certificate-section {
        padding: 60px 5%;
    }

    .heading h2 {
        font-size: 2rem;
        line-height: 1.3;
    }

    .certificate-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .certificate-card,
    .Flagship-card-tall,
    .Public-sector-orientation {
        border-radius: 25px;
    }

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

    .card-content p {
        font-size: 1rem;
        line-height: 1.4;
    }

    .apply-btn {
        padding: 14px 28px;
    }

}


/* =========================================================
   MOBILE
   600px and below
========================================================= */

@media screen and (max-width: 600px) {

    /* =========================
       HOME PAGE
    ========================= */

    .hero {
        padding: 50px 5% 150px;
    }

    .hero-content {
        gap: 25px;
    }

    .institute-name p {
        font-size: 27px;
        line-height: 1.2;
    }

    .institute-name h1 {
        font-size: 29px;
        line-height: 1.2;
    }

    .paragraphy {
        font-size: 16px;
    }

    .hero .btn {
        font-size: 16px;
        padding: 13px 30px;
    }

    .youtube-button {
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
    }

    .welcome {
        width: 90%;
        margin: 50px auto;
    }

    .welcome-image img {
        height: 300px;
    }

    .welcome-text p {
        font-size: 28px;
        line-height: 1.2;
    }

    .welcome-text h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    .text p {
        font-size: 16px;
    }

    .programmes {
        padding: 50px 5%;
    }

    .programmes h2 {
        font-size: 32px;
        margin-bottom: 35px;
    }

    .programme-container,
    .programmes .programme-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .programme-card,
    .programmes .programme-card {
        width: 100%;
        max-width: 340px;
        flex: none;
    }

    .statistics {
        padding: 50px 5%;
        gap: 35px;
    }

    .stat-box {
        width: 45%;
    }

    .stat-box h3 {
        font-size: 32px;
    }

    .stat-box p {
        font-size: 16px;
    }

    .news {
        padding: 50px 5%;
    }

    .news h2 {
        font-size: 30px;
    }

    .news-container {
        height: 380px;
        border-radius: 18px;
    }

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

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

    .news-text p {
        font-size: 16px;
    }

    .prev,
    .next {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }

    .prev {
        left: 10px;
    }

    .next {
        right: 10px;
    }

    .dots {
        bottom: 15px;
    }

    .partner-container h2 {
        font-size: 30px;
    }

    .partner-container p {
        font-size: 16px;
    }

    .all-logos {
        gap: 20px;
    }

    .all-logos img {
        width: 120px;
        height: 80px;
    }


    /* =========================
       PROGRAMMES PAGE
    ========================= */

    .about-hero {
        height: 100px;
    }

    .hero-overlay h1 {
        font-size: 36px;
    }

    .certificate-section {
        padding: 50px 5%;
    }

    .heading {
        margin-bottom: 30px;
    }

    .heading h2 {
        font-size: 1.7rem;
    }

    .certificate-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .certificate-card,
    .Flagship-card-tall,
    .Public-sector-orientation {
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
        padding: 15px;
        border-radius: 25px;
    }

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

    .card-content p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .apply-btn {
        width: 80%;
        padding: 14px 20px;
    }

}


/* =========================================================
   SMALL MOBILE
   400px and below
========================================================= */

@media screen and (max-width: 400px) {

    /* =========================
       HOME PAGE
    ========================= */

    .institute-name p {
        font-size: 23px;
    }

    .institute-name h1 {
        font-size: 25px;
    }

    .welcome-text p {
        font-size: 24px;
    }

    .welcome-text h1 {
        font-size: 26px;
    }

    .programmes h2,
    .news h2,
    .partner-container h2 {
        font-size: 27px;
    }

    .stat-box {
        width: 100%;
    }

    .welcome-image img {
        height: 250px;
    }


    /* =========================
       PROGRAMMES PAGE
    ========================= */

    .heading h2 {
        font-size: 1.45rem;
    }

    .hero-overlay h1 {
        font-size: 30px;
    }

    .certificate-card,
    .Flagship-card-tall,
    .Public-sector-orientation {
        padding: 12px;
    }

    .card-content h3 {
        font-size: 1.2rem;
    }

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

    .apply-btn {
        width: 100%;
        font-size: 15px;
    }

}
/* =========================================================
   CONTACT PAGE RESPONSIVE DESIGN ONLY
   This code is designed for:
   contact.html + contact.css

   It does NOT change the About page President/Vice President
========================================================= */


/* =========================================================
   LARGE TABLETS AND SMALL LAPTOPS
   992px and below
========================================================= */

@media screen and (max-width: 992px) {

    /* Contact Intro */
    .contact-intro {
        padding: 60px 5%;
    }

    .contact-intro h2 {
        font-size: 34px;
    }

    .contact-intro p {
        font-size: 17px;
    }


    /* Contact Information Cards */
    .contact-box {
        gap: 25px;
    }

    .contact-card {
        width: calc(50% - 25px);
        max-width: 350px;
    }


    /* Contact Form */
    .contact-wrapper {
        gap: 35px;
    }

    .contact-message {
        width: 45%;
    }

    .contact-form {
        width: 55%;
    }


    /* Department Cards */
    .department-container {
        gap: 25px;
    }

    .department-card {
        width: calc(50% - 25px);
        max-width: 350px;
    }


    /* Map */
    .map-box {
        width: 100%;
    }

}


/* =========================================================
   TABLETS
   768px and below
========================================================= */

@media screen and (max-width: 768px) {

    /* =========================
       CONTACT HERO
    ========================== */

    .about-hero {
        height: 150px;
    }

    .hero-overlay h1 {
        font-size: 38px;
    }


    /* =========================
       CONTACT INTRO
    ========================== */

    .contact-intro {
        padding: 55px 7%;
    }

    .contact-intro h2 {
        font-size: 32px;
        margin-bottom: 20px;
    }

    .contact-intro p {
        font-size: 17px;
        line-height: 1.6;
    }


    /* =========================
       CONTACT INFORMATION
    ========================== */

    .contact-information {
        padding: 50px 7%;
    }

    .contact-box {
        gap: 25px;
    }

    .contact-card {
        width: calc(50% - 20px);
        padding: 25px 15px;
    }

    .contact-card img {
        width: 55px;
        height: 55px;
    }


    /* =========================
       CONTACT FORM
    ========================== */

    .contact-form-section {
        padding: 60px 7%;
    }

    .contact-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .contact-message,
    .contact-form {
        width: 100%;
    }

    .contact-message {
        text-align: center;
    }

    .contact-message h2 {
        font-size: 34px;
    }

    .contact-message ul {
        display: inline-block;
        text-align: left;
        margin-top: 15px;
    }

    .contact-form form {
        padding: 30px;
    }


    /* =========================
       DEPARTMENT CONTACT
    ========================== */

    .department-contact {
        padding: 60px 7%;
    }

    .department-contact h2 {
        font-size: 34px;
        margin-bottom: 30px;
    }

    .department-card {
        width: calc(50% - 20px);
    }


    /* =========================
       MAP
    ========================== */

    .map-section {
        padding: 60px 7%;
    }

    .map-section h2 {
        font-size: 34px;
    }

    .map-box iframe {
        height: 320px;
    }

}


/* =========================================================
   MOBILE DEVICES
   600px and below
========================================================= */

@media screen and (max-width: 600px) {

    /* =========================
       CONTACT HERO
    ========================== */

    .about-hero {
        height: 130px;
    }

    .hero-overlay {
        width: 90%;
    }

    .hero-overlay h1 {
        font-size: 30px;
        letter-spacing: 1px;
        padding-bottom: 10px;
    }

    .hero-overlay h1::after {
        width: 70px;
        height: 4px;
    }


    /* =========================
       CONTACT INTRO
    ========================== */

    .contact-intro {
        padding: 50px 6%;
    }

    .contact-intro h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    .contact-intro p {
        font-size: 16px;
        line-height: 1.6;
    }


    /* =========================
       CONTACT CARDS
    ========================== */

    .contact-information {
        padding: 45px 6%;
    }

    .contact-box {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .contact-card {
        width: 100%;
        max-width: 400px;
        padding: 25px 20px;
    }

    .contact-card img {
        width: 55px;
        height: 55px;
    }


    /* =========================
       CONTACT FORM
    ========================== */

    .contact-form-section {
        padding: 50px 6%;
    }

    .contact-wrapper {
        gap: 35px;
    }

    .contact-message {
        text-align: center;
    }

    .contact-message h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    .contact-message p {
        font-size: 16px;
        line-height: 1.6;
    }

    .contact-message h3 {
        font-size: 22px;
        margin-top: 25px;
    }

    .contact-message ul {
        text-align: left;
        padding-left: 25px;
    }

    .contact-form form {
        padding: 25px 20px;
    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea {
        padding: 13px;
        font-size: 16px;
    }


    /* Buttons */
    .button-row {
        flex-direction: column;
        gap: 15px;
        align-items: stretch;
    }

    .contact-form button,
    .enroll-btn {
        width: 100%;
        text-align: center;
        padding: 15px 20px;
    }


    /* =========================
       DEPARTMENT CONTACT
    ========================== */

    .department-contact {
        padding: 50px 6%;
    }

    .department-contact h2 {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 30px;
    }

    .department-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .department-card {
        width: 100%;
        max-width: 400px;
        padding: 25px 20px;
    }


    /* =========================
       MAP
    ========================== */

    .map-section {
        padding: 50px 6%;
    }

    .map-section h2 {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 25px;
    }

    .map-box iframe {
        height: 280px;
    }

}


/* =========================================================
   SMALL MOBILE DEVICES
   400px and below
========================================================= */

@media screen and (max-width: 400px) {

    .about-hero {
        height: 115px;
    }

    .hero-overlay h1 {
        font-size: 26px;
    }

    .contact-intro h2,
    .contact-message h2,
    .department-contact h2,
    .map-section h2 {
        font-size: 25px;
    }

    .contact-intro p,
    .contact-message p {
        font-size: 15px;
    }

    .contact-card {
        padding: 22px 15px;
    }

    .contact-form form {
        padding: 20px 15px;
    }

    .contact-form label {
        font-size: 15px;
    }

    .department-card {
        padding: 22px 15px;
    }

    .map-box iframe {
        height: 240px;
    }

}

/* =========================================
   NEWS & EVENTS - MOBILE RESPONSIVE
========================================= */

@media (max-width: 768px) {

    /* Featured News */
    .featured-box {
        flex-direction: column;
    }

    .featured-box img {
        width: 100%;
        height: 250px;
    }

    .featured-content {
        padding: 25px;
    }

    .featured-content h3 {
        font-size: 24px;
    }

    .featured-content p {
        font-size: 16px;
    }


    /* Latest News + Upcoming Events */
    .news-events-container1 {
        flex-direction: column;
        padding: 15px;
        gap: 30px;
    }

    .news-column,
    .events-column {
        width: 100%;
    }


    /* News Cards */
    .news-card1 {
        width: 100%;
    }


    /* Event Cards */
    .event-card {
        width: 100%;
        gap: 15px;
    }


    /* Gallery */
    .gallery-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gallery-container img {
        width: 100%;
        height: 220px;
    }


    /* Section headings */
    .featured-news h2,
    .news-gallery h2 {
        font-size: 30px;
    }

    .news-column h3,
    .events-column h3 {
        font-size: 27px;
    }

}

/* =========================================
   MOBILE NEWS DROPDOWN
========================================= */

@media (max-width: 768px) {

    .dropdown-menu {
        display: none;
        position: static;
        width: 100%;
        min-width: 100%;
        box-shadow: none;
    }

    .dropdown.active > .dropdown-menu {
        display: block;
    }

    .dropdown-menu li a {
        text-align: center;
        padding: 12px 15px;
    }

}

@media (max-width: 768px) {

    .featured-box {
        flex-direction: column;
    }

    .featured-box img {
        width: 100%;
        height: 250px;
    }

    .featured-content {
        padding: 25px;
    }

    .featured-content h3 {
        font-size: 24px;
    }

    .news-events-container1 {
        flex-direction: column;
        padding: 15px;
        gap: 30px;
    }

    .gallery-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gallery-container img {
        width: 100%;
        height: 220px;
    }

}

/* =========================================================
   RESEARCH PAGE RESPONSIVE DESIGN
========================================================= */


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
   1100px and below
========================================================= */

@media (max-width: 1100px) {

    /* Research Introduction */
    .research-container {
        gap: 35px;
    }

    .research-text h2 {
        font-size: 30px;
    }


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


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


    /* Research Services */
    .research-grid {
        grid-template-columns: repeat(2, 1fr);
    }


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


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


    /* Research Process */
    .process-container {
        grid-template-columns: repeat(3, 1fr);
    }


    /* Why Choose LIPA */
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* Contact */
    .research-contact-container {
        grid-template-columns: 1fr 1fr;
    }

}


/* =========================================================
   TABLET
   992px and below
========================================================= */

@media (max-width: 992px) {

    /* Navigation */
    .navbar {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

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

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


    /* Research Hero */
    .about-hero {
        height: auto;
        min-height: 150px;
        padding: 30px 0;
    }

    .hero-overlay {
        width: 90%;
    }


    /* Research Introduction */
    .research-container {
        flex-direction: column;
        text-align: center;
    }

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

    .research-image img {
        width: 100%;
        max-height: 450px;
        object-fit: cover;
    }


    /* Contact */
    .research-contact-container {
        grid-template-columns: 1fr;
    }


    /* Footer */
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 35px;
    }

}


/* =========================================================
   MOBILE
   768px and below
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       NAVIGATION
    ===================================================== */

    .navbar {
        flex-direction: column;
        padding: 10px 15px;
        gap: 10px;
    }

    .logo img {
        width: 55px;
    }

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

    .menu {
        display: none;
        flex-direction: column;
        width: 100%;
        gap: 0;
        text-align: center;
    }

    .menu.active {
        display: flex;
    }

    .menu > li {
        width: 100%;
        margin: 5px 0;
    }

    .menu > li > a {
        padding: 10px;
    }


    /* =====================================================
       MOBILE DROPDOWN
    ===================================================== */

    .dropdown {
        width: 100%;
    }

    .dropdown-menu {
        position: static;
        width: 100%;
        min-width: 100%;
        box-shadow: none;
        background: #f5f5f5;
    }

    .dropdown-menu li a {
        text-align: center;
        padding: 12px;
    }


    /* =====================================================
       SOCIAL MEDIA
    ===================================================== */

    .social {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .social img {
        width: 23px;
        height: 23px;
    }


    /* =====================================================
       DEVELOPMENT NOTICE
    ===================================================== */

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


    /* =====================================================
       RESEARCH HERO
    ===================================================== */

    .about-hero {
        min-height: 180px;
        padding: 30px 15px;
    }

    .hero-overlay {
        width: 100%;
        text-align: left;
    }

    .hero-overlay h1 {
        font-size: 25px;
        line-height: 1.2;
    }

    .hero-overlay h1 span {
        font-size: 17px;
    }

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


    /* =====================================================
       GENERAL SECTION
    ===================================================== */

    .research-intro,
    .research-services,
    .consultancy-services,
    .library-section,
    .research-process,
    .why-lipa,
    .research-contact,
    .mandate-section,
    .publication-section,
    .partners-section,
    .documents-section {
        padding: 55px 20px;
    }


    /* =====================================================
       SECTION HEADINGS
    ===================================================== */

    .section-header {
        margin-bottom: 35px;
    }

    .section-header h2 {
        font-size: 30px;
        line-height: 1.25;
    }

    .section-header p {
        font-size: 16px;
        line-height: 1.7;
    }


    /* =====================================================
       RESEARCH INTRODUCTION
    ===================================================== */

    .research-container {
        flex-direction: column;
        gap: 30px;
        width: 100%;
    }

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

    .research-image img {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    .research-text {
        text-align: left;
    }

    .research-text h2 {
        font-size: 28px;
        line-height: 1.3;
    }

    .research-text p {
        font-size: 16px;
        line-height: 1.7;
    }


    /* =====================================================
       OUR MANDATE
    ===================================================== */

    .mandate-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }

    .mandate-card {
        padding: 30px 20px;
    }

    .mandate-card h3 {
        font-size: 21px;
    }


    /* =====================================================
       PUBLICATIONS
    ===================================================== */

    .publication-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }

    .publication-card {
        padding: 30px 20px;
    }

    .publication-card h3 {
        font-size: 21px;
    }


    /* =====================================================
       RESEARCH SERVICES
    ===================================================== */

    .research-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .research-card {
        padding: 30px 20px;
    }

    .research-card h3 {
        font-size: 21px;
    }


    /* =====================================================
       CONSULTANCY SERVICES
    ===================================================== */

    .consultancy-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .consultancy-card {
        padding: 30px 20px;
    }

    .consultancy-card h3 {
        font-size: 21px;
    }


    /* =====================================================
       LIBRARY
    ===================================================== */

    .library-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .library-card {
        padding: 30px 20px;
    }

    .library-card h3 {
        font-size: 21px;
    }


    /* =====================================================
       RESEARCH PROCESS
    ===================================================== */

    .process-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .process-step {
        padding: 30px 20px;
    }

    .process-step h3 {
        font-size: 20px;
    }


    /* =====================================================
       WHY CHOOSE LIPA
    ===================================================== */

    .why-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .why-card {
        padding: 30px 20px;
    }

    .why-card h3 {
        font-size: 21px;
    }


    /* =====================================================
       CLIENTS & PARTNERS
    ===================================================== */

    .partners-list {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .partners-list div {
        padding: 18px;
    }


    /* =====================================================
       IMPORTANT DOCUMENTS
    ===================================================== */

    .document-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .document-grid a {
        padding: 18px 20px;
    }


    /* =====================================================
       CONTACT THE UNIT
    ===================================================== */

    .research-contact-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .research-contact-info,
    .research-call {
        padding: 30px 20px;
    }

    .research-contact-info h3,
    .research-call h3 {
        font-size: 23px;
    }

    .research-contact-info p,
    .research-call p {
        font-size: 15px;
        line-height: 1.7;
    }


    /* =====================================================
       BACK BUTTON
    ===================================================== */

    .back-button {
        padding: 30px 20px;
    }

    .back-button a {
        display: inline-block;
        padding: 12px 25px;
    }


    /* =====================================================
       FOOTER
    ===================================================== */

    .footer {
        padding: 45px 20px 20px;
        text-align: center;
    }

    .footer-container {
        flex-direction: column;
        gap: 30px;
    }

    .footer h3 {
        font-size: 20px;
    }

    .footer p {
        font-size: 15px;
        line-height: 1.7;
    }

}


/* =========================================================
   SMALL MOBILE
   480px and below
========================================================= */

@media (max-width: 480px) {

    .logo img {
        width: 50px;
    }

    .hero-overlay h1 {
        font-size: 22px;
    }

    .hero-overlay h1 span {
        font-size: 15px;
    }

    .hero-overlay p {
        font-size: 13px;
    }

    .section-header h2 {
        font-size: 26px;
    }

    .section-header p {
        font-size: 15px;
    }

    .research-text h2 {
        font-size: 25px;
    }

    .research-text p {
        font-size: 15px;
    }

    .research-icon,
    .consultancy-icon,
    .library-icon {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }

    .process-number {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .research-contact-info,
    .research-call {
        padding: 25px 18px;
    }

}
/* =========================================================
   RESEARCH PAGE RESPONSIVE DESIGN
========================================================= */


/* =========================
   TABLET VIEW
   900px and below
========================= */
@media (max-width: 900px) {

    /* Research Introduction */
    .research-container {
        flex-direction: column;
        gap: 35px;
    }

    .research-image,
    .research-text {
        width: 100%;
        flex: none;
    }

    /* Research, Consultancy and Why Cards */
    .research-grid,
    .consultancy-grid,
    .why-grid,
    .mandate-grid,
    .publication-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    /* Research Process */
    .process-container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Partners */
    .partners-list {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Contact */
    .research-contact-container {
        grid-template-columns: 1fr;
    }

    /* Section Heading */
    .section-header h2 {
        font-size: 32px;
    }

}


/* =========================
   MOBILE VIEW
   768px and below
========================= */
@media (max-width: 768px) {

    /* ---------------------------------
       RESEARCH HERO
    --------------------------------- */

    .about-hero {
        height: auto;
        min-height: 180px;
        padding: 30px 0;
    }

    .hero-overlay {
        width: 90%;
    }

    .hero-overlay h1 {
        font-size: 25px;
    }

    .hero-overlay h1 span {
        font-size: 17px;
    }

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


    /* ---------------------------------
       GENERAL SECTIONS
    --------------------------------- */

    .research-intro,
    .research-services,
    .consultancy-services,
    .library-section,
    .research-process,
    .why-lipa,
    .research-contact,
    .mandate-section,
    .publication-section,
    .partners-section,
    .documents-section {
        padding: 55px 5%;
    }


    /* ---------------------------------
       SECTION HEADINGS
    --------------------------------- */

    .section-header {
        margin-bottom: 35px;
    }

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

    .section-header p {
        font-size: 16px;
        line-height: 1.7;
    }


    /* ---------------------------------
       RESEARCH INTRODUCTION
    --------------------------------- */

    .research-container {
        flex-direction: column;
        gap: 30px;
    }

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

    .research-image img {
        width: 100%;
        height: auto;
    }

    .research-text h2 {
        font-size: 28px;
    }

    .research-text p {
        font-size: 16px;
        line-height: 1.7;
    }


    /* ---------------------------------
       RESEARCH CARDS
    --------------------------------- */

    .research-grid,
    .consultancy-grid,
    .mandate-grid,
    .publication-grid,
    .why-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .research-card,
    .consultancy-card,
    .mandate-card,
    .publication-card,
    .why-card {
        padding: 30px 22px;
    }


    /* ---------------------------------
       LIBRARY CARDS
    --------------------------------- */

    .library-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }


    /* ---------------------------------
       RESEARCH PROCESS
    --------------------------------- */

    .process-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .process-step {
        padding: 30px 20px;
    }


    /* ---------------------------------
       CLIENTS & PARTNERS
    --------------------------------- */

    .partners-list {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .partners-list div {
        padding: 18px;
    }


    /* ---------------------------------
       IMPORTANT DOCUMENTS
    --------------------------------- */

    .document-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-top: 30px;
    }

    .document-grid a {
        padding: 18px 20px;
    }


    /* ---------------------------------
       CONTACT SECTION
    --------------------------------- */

    .research-contact-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .research-contact-info,
    .research-call {
        padding: 30px 22px;
    }

    .research-contact-info h3,
    .research-call h3 {
        font-size: 22px;
    }


    /* ---------------------------------
       BACK BUTTON
    --------------------------------- */

    .back-button {
        padding: 30px 20px;
    }

    .back-button a {
        display: inline-block;
        padding: 12px 25px;
    }

}


/* =========================
   SMALL MOBILE
   480px and below
========================= */
@media (max-width: 480px) {

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

    .hero-overlay h1 {
        font-size: 21px;
    }

    .hero-overlay h1 span {
        font-size: 15px;
    }

    .hero-overlay p {
        font-size: 13px;
    }


    .section-header h2 {
        font-size: 24px;
    }

    .section-header p {
        font-size: 15px;
    }


    .research-text h2 {
        font-size: 25px;
    }


    .research-card h3,
    .consultancy-card h3,
    .library-card h3,
    .why-card h3,
    .mandate-card h3 {
        font-size: 20px;
    }


    .research-card p,
    .consultancy-card p,
    .library-card p,
    .why-card p,
    .mandate-card p {
        font-size: 15px;
    }


    .research-icon,
    .consultancy-icon,
    .library-icon {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }


    .process-number {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }


    .research-contact-info,
    .research-call {
        padding: 25px 18px;
    }

}

/* =========================================================
   DIRECTOR GENERAL'S OFFICE / STAFF
   RESPONSIVE DESIGN
========================================================= */


/* =========================================================
   TABLET VIEW
   900px AND BELOW
========================================================= */
@media (max-width: 900px) {

    /* ---------------------------------
       HERO
    --------------------------------- */

    .about-hero {
        height: auto;
        min-height: 150px;
        padding: 30px 0;
    }

    .hero-overlay {
        width: 90%;
    }


    /* ---------------------------------
       OFFICE INTRODUCTION
    --------------------------------- */

    .office-container {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .office-image {
        flex: none;
        width: 350px;
        max-width: 100%;
    }

    .office-text {
        width: 100%;
    }

    .office-text h2 {
        font-size: 32px;
    }

    .office-text p {
        font-size: 17px;
        text-align: left;
    }


    /* ---------------------------------
       STAFF GRID
    --------------------------------- */

    .staff-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }


    /* ---------------------------------
       OFFICE FUNCTIONS
    --------------------------------- */

    .function-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }


    /* ---------------------------------
       OFFICE CONTACT
    --------------------------------- */

    .office-contact-box {
        max-width: 90%;
    }

}


/* =========================================================
   MOBILE VIEW
   768px AND BELOW
========================================================= */
@media (max-width: 768px) {

    /* ---------------------------------
       HERO
    --------------------------------- */

    .about-hero {
        min-height: 180px;
        padding: 30px 0;
    }

    .hero-overlay {
        width: 90%;
        text-align: left;
    }

    .hero-overlay h1 {
        font-size: 23px;
        line-height: 1.25;
    }

    .hero-overlay h1 span {
        font-size: 19px;
        margin-top: 6px;
    }

    .hero-overlay p {
        font-size: 14px;
        line-height: 1.5;
    }


    /* ---------------------------------
       OFFICE INTRODUCTION
    --------------------------------- */

    .office-introduction {
        padding: 55px 5%;
    }

    .office-container {
        flex-direction: column;
        gap: 30px;
    }

    .office-image {
        width: 100%;
        max-width: 350px;
    }

    .office-image img {
        width: 100%;
        height: auto;
    }

    .office-text {
        width: 100%;
    }

    .office-text h2 {
        font-size: 28px;
        line-height: 1.3;
        margin-bottom: 20px;
        text-align: center;
    }

    .office-text p {
        font-size: 16px;
        line-height: 1.7;
        text-align: left;
    }


    /* ---------------------------------
       TECHNICAL STAFF
    --------------------------------- */

    .technical-team {
        padding: 55px 5%;
    }

    .section-header {
        margin-bottom: 30px;
    }

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

    .staff-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-top: 30px;
    }


    /* ---------------------------------
       STAFF CARDS
    --------------------------------- */

    .staff-grid .team-card {
        width: 100%;
        padding: 25px 20px;
    }

    .staff-grid .team-card img {
        width: 200px;
        height: 245px;
    }

    .staff-grid .team-card h4 {
        font-size: 22px;
    }

    .staff-grid .position {
        font-size: 16px;
    }

    .staff-grid .email {
        font-size: 14px;
        max-width: 100%;
        word-break: break-word;
    }


    /* ---------------------------------
       OFFICE FUNCTIONS
    --------------------------------- */

    .office-functions {
        padding: 55px 5%;
    }

    .function-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 30px;
    }

    .function-card {
        padding: 30px 20px;
    }


    /* ---------------------------------
       OFFICE CONTACT
    --------------------------------- */

    .office-contact {
        padding: 55px 5%;
    }

    .office-contact-box {
        width: 100%;
        max-width: 100%;
        margin-top: 30px;
        padding: 30px 20px;
    }

    .office-contact-box p {
        font-size: 16px;
        line-height: 1.7;
        word-break: break-word;
    }


    /* ---------------------------------
       BACK BUTTON
    --------------------------------- */

    .back-about {
        padding: 30px 5% 60px;
    }

    .back-about .read-btn {
        padding: 12px 25px;
        font-size: 15px;
    }

}


/* =========================================================
   SMALL MOBILE
   480px AND BELOW
========================================================= */
@media (max-width: 480px) {

    /* ---------------------------------
       HERO
    --------------------------------- */

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

    .hero-overlay h1 {
        font-size: 20px;
    }

    .hero-overlay h1 span {
        font-size: 17px;
    }

    .hero-overlay p {
        font-size: 13px;
    }


    /* ---------------------------------
       OFFICE INTRODUCTION
    --------------------------------- */

    .office-introduction {
        padding: 45px 5%;
    }

    .office-image {
        max-width: 280px;
    }

    .office-text h2 {
        font-size: 25px;
    }

    .office-text p {
        font-size: 15px;
        line-height: 1.7;
    }


    /* ---------------------------------
       STAFF
    --------------------------------- */

    .technical-team {
        padding: 45px 5%;
    }

    .section-header h2 {
        font-size: 24px;
    }

    .staff-grid .team-card {
        padding: 20px 15px;
    }

    .staff-grid .team-card img {
        width: 180px;
        height: 225px;
    }

    .staff-grid .team-card h4 {
        font-size: 20px;
    }

    .staff-grid .position {
        font-size: 15px;
    }

    .staff-grid .email {
        font-size: 13px;
        padding: 8px 12px;
    }


    /* ---------------------------------
       CONTACT
    --------------------------------- */

    .office-contact-box {
        padding: 25px 18px;
    }

    .office-contact-box p {
        font-size: 15px;
    }


    /* ---------------------------------
       BACK BUTTON
    --------------------------------- */

    .back-about .read-btn {
        width: 100%;
        max-width: 280px;
    }

}

/* =========================================================
   FACILITATORS PAGE RESPONSIVE DESIGN
   Works with facilitator.css
========================================================= */


/* =========================================================
   LARGE TABLET / SMALL LAPTOP
   1024px and below
========================================================= */

@media (max-width: 1024px) {

    /* Hero */
    .about-hero {
        height: 110px;
    }

    .hero-overlay {
        width: 90%;
    }

    .hero-overlay h1 {
        font-size: 38px;
        letter-spacing: 1px;
        padding-bottom: 12px;
    }

    .hero-overlay h1::after {
        width: 80px;
        height: 4px;
    }


    /* Facilitator section */
    .facilitator-section {
        width: 90%;
        margin: 60px auto;
    }

    .facilitator-title {
        font-size: 30px;
        margin-bottom: 35px;
    }

    .facilitator-intro {
        max-width: 850px;
        font-size: 18px;
        line-height: 1.7;
        margin: -10px auto 35px;
    }


    /* Facilitator cards */
    .facilitator-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .facilitator-card {
        padding: 18px;
    }

    .facilitator-card img {
        height: 240px;
    }

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

}


/* =========================================================
   TABLET
   900px and below
========================================================= */

@media (max-width: 900px) {

    .facilitator-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .facilitator-card img {
        height: 270px;
    }

    .facilitator-intro {
        font-size: 17px;
    }

}


/* =========================================================
   MOBILE
   768px and below
========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .about-hero {
        height: 100px;
    }

    .hero-overlay {
        width: 90%;
    }

    .hero-overlay h1 {
        font-size: 30px;
        letter-spacing: 1px;
        padding-bottom: 10px;
    }

    .hero-overlay h1::after {
        width: 65px;
        height: 3px;
    }


    /* -----------------------------------------
       FACILITATOR SECTION
    ----------------------------------------- */

    .facilitator-section {
        width: 90%;
        margin: 50px auto;
    }


    /* Section heading */
    .facilitator-title {
        font-size: 27px;
        line-height: 1.3;
        margin-bottom: 30px;
    }


    /* Introduction text */
    .facilitator-intro {
        width: 100%;
        margin: -5px auto 35px;
        font-size: 16px;
        line-height: 1.7;
        text-align: center;
    }


    /* -----------------------------------------
       FACILITATOR GRID
    ----------------------------------------- */

    .facilitator-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }


    /* -----------------------------------------
       FACILITATOR CARD
    ----------------------------------------- */

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


    .facilitator-card img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        object-position: center top;
    }


    .facilitator-card h4 {
        font-size: 21px;
        margin: 15px 0 8px;
    }


    .facilitator-card p {
        font-size: 15px;
        line-height: 1.6;
    }


    /* CV button */
    .cv-btn {
        padding: 9px 28px;
        font-size: 15px;
    }

}


/* =========================================================
   SMALL MOBILE PHONES
   480px and below
========================================================= */

@media (max-width: 480px) {

    /* Hero */
    .about-hero {
        height: 90px;
    }

    .hero-overlay h1 {
        font-size: 25px;
        padding-bottom: 8px;
    }

    .hero-overlay h1::after {
        width: 55px;
        height: 3px;
    }


    /* Facilitator section */
    .facilitator-section {
        width: 92%;
        margin: 40px auto;
    }


    /* Title */
    .facilitator-title {
        font-size: 24px;
        margin-bottom: 25px;
    }


    /* Introduction */
    .facilitator-intro {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 30px;
    }


    /* Cards */
    .facilitator-grid {
        gap: 20px;
    }


    .facilitator-card {
        padding: 15px;
        border-radius: 12px;
    }


    .facilitator-card img {
        height: 280px;
        border-radius: 10px;
    }


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


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


    /* CV button */
    .cv-btn {
        padding: 8px 24px;
        font-size: 14px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   360px and below
========================================================= */

@media (max-width: 360px) {

    .hero-overlay h1 {
        font-size: 22px;
    }

    .facilitator-section {
        width: 94%;
    }

    .facilitator-title {
        font-size: 22px;
    }

    .facilitator-intro {
        font-size: 14px;
    }

    .facilitator-card img {
        height: 250px;
    }

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

}