/* =========================================================
   NEO MOBILE CSS
   Applies to phones and small tablets
========================================================= */

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

    /* =====================================================
       GLOBAL
    ===================================================== */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

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


    /* =====================================================
       CONTAINERS
    ===================================================== */

    .container {
        width: 94%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
    }


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

    .card {
        width: 100%;
        padding: 22px 18px;
        margin: 20px 0;
        border-radius: 18px;
    }

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


    /* =====================================================
       PAGE HEADER
    ===================================================== */

    .page-header {
        padding: 45px 18px;
    }

    .page-header h1 {
        font-size: 32px;
        line-height: 1.25;
    }

    .page-header p {
        font-size: 17px;
        line-height: 1.6;
    }

    .back-btn {
        padding: 11px 22px;
        font-size: 15px;
    }


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

    .navbar {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        padding: 15px;
        gap: 12px;

        text-align: center;
    }

    .brand {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        gap: 10px;
        margin-left: 0;
    }

    .brand img {
        width: 55px;
        height: 55px;
        flex-shrink: 0;
    }

    .logo-text {
        font-size: 20px;
        white-space: normal;
    }

    .research-nav-btn {
        width: 100%;
        max-width: 250px;
        text-align: center;
        padding: 12px 20px;
        font-size: 16px;
    }

    .about-nav-btn {
        font-size: 16px;
        padding: 10px 20px;
    }


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

    .hero {
        min-height: auto;
        height: auto;
        padding-bottom: 60px;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 55px 15px 20px;
    }

    .hero-content h1 {
        font-size: 34px;
        line-height: 1.25;
    }

    .hero-content p {
        font-size: 18px;
        line-height: 1.6;
        padding: 0 5px;
    }

    .hero-buttons {
        margin-bottom: 25px;
    }

    .hero-btn,
    .cta-button {
        padding: 13px 25px;
        font-size: 16px;
    }


    /* =====================================================
       SEARCH
    ===================================================== */

    .search-section {
        width: 100%;
        padding: 0 15px;
    }

    .search-box {
        width: 100%;
        max-width: 100%;
        font-size: 16px;
    }
   
/* =========================================================
   TABLET: FOCUS AREAS AND NEWS
========================================================= */

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

    .card {

        padding: 35px 30px;

    }


    .focus-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .news-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}


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

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

    .container {

        width: 94%;

        margin-top: -35px;

    }


    .card {

        padding: 30px 20px;

        margin: 30px 0;

        border-radius: 18px;

    }


    .card h2 {

        font-size: 28px;

        margin-bottom: 28px;

    }


    /* Focus */

    .focus-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .focus-card {

        min-height: 170px;

        padding: 28px 22px;

    }


    /* News */

    .news-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .news-card img {

        height: 210px;

    }


    .news-content {

        padding: 22px 20px 23px;

    }


    .news-content h3 {

        font-size: 19px;

    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

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

    .container {

        width: 95%;

    }


    .card {

        padding: 25px 15px;

        border-radius: 16px;

    }


    .card h2 {

        font-size: 25px;

    }


    .focus-card {

        padding: 25px 18px;

    }


    .focus-card i {

        width: 56px;

        height: 56px;

        font-size: 24px;

    }


    .focus-card h3 {

        font-size: 18px;

    }


    .focus-card p {

        font-size: 14px;

    }


    .news-card img {

        height: 190px;

    }


    .news-content {

        padding: 20px 18px;

    }


    .news-content h3 {

        font-size: 18px;

    }


    .news-content p {

        font-size: 14px;

    }

}

    /* =========================================================
   ABOUT PAGE — MOBILE
========================================================= */

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


    /* =====================================================
       PAGE HEADER
    ===================================================== */

    .page-header {
        padding: 45px 18px;
    }

    .page-header h1 {
        font-size: 32px;
        line-height: 1.25;
    }

    .page-header p {
        font-size: 16px;
        line-height: 1.6;
    }


    /* =====================================================
       ABOUT SECTION
    ===================================================== */

    #about-section {
        padding: 40px 12px 25px;
    }

    .about-main-card {
        width: 100%;
        padding: 25px 20px;
        border-radius: 18px;
    }


    /* =====================================================
       STATISTICS
    ===================================================== */

    .neo-stats {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;

        margin-bottom: 35px;
    }

    .neo-stat {
        padding: 20px 12px;
    }

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

    .neo-stat p {
        font-size: 13px;
        line-height: 1.4;
    }


    /* =====================================================
       ABOUT + FOUNDER
    ===================================================== */

    .about-founder-layout {

        grid-template-columns: 1fr;

        gap: 30px;
    }

    .about-text {
        padding: 0;
    }

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

    .about-text > p {
        font-size: 15px;
        line-height: 1.75;
    }

    .about-subsection {
        margin-top: 25px;
        padding-top: 20px;
    }

    .about-subsection h3 {
        font-size: 20px;
    }

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


    /* =====================================================
       FOUNDER
    ===================================================== */

    .founder-card {
        padding: 25px 20px;
    }

    .founder-photo img {
        width: 190px;
        height: 190px;
    }

    .founder-details h2 {
        font-size: 23px;
    }

    .founder-description {
        font-size: 14px;
    }


    /* =====================================================
       GALLERY
    ===================================================== */

    .neo-gallery-section {
        padding: 25px 12px 30px;
    }

    .gallery-card {
        width: 100%;
        padding: 25px 15px;
        border-radius: 18px;
    }

    .gallery-header {
        margin-bottom: 22px;
    }

    .gallery-header h2 {
        font-size: 27px;
    }

    .gallery-header p {
        font-size: 14px;
    }


    /* =====================================================
       GALLERY VIEWER
    ===================================================== */

    .gallery-container {

        grid-template-columns:
            42px minmax(0, 1fr) 42px;

        gap: 8px;
    }

    .gallery-viewer {

        height: 270px;

        border-radius: 14px;
    }

    .gallery-btn {

        width: 40px;

        height: 40px;

        font-size: 17px;
    }

    .gallery-description {

        margin-top: 18px;

        padding: 17px 14px;
    }

    .gallery-description h3 {
        font-size: 18px;
    }

    .gallery-description p {
        font-size: 14px;
    }


    /* =====================================================
       MANAGEMENT
    ===================================================== */

    #management-section {
        padding: 30px 12px 50px;
    }

    .management-card {
        width: 100%;
        padding: 25px 18px;
        border-radius: 18px;
    }


    /* =====================================================
       MANAGEMENT HEADER
    ===================================================== */

    .management-header {

        grid-template-columns: 1fr;

        gap: 18px;

        margin-bottom: 28px;

        text-align: center;
    }

    .management-header h2 {
        font-size: 28px;
    }

    .management-header p {
        font-size: 14px;
    }

    .management-nav-btn {
        justify-self: center;
    }


    /* =====================================================
       MEMBER GRID
    ===================================================== */

    .management-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }


    .member-photo {
        height: 210px;
    }

    .member-info {
        padding: 18px 12px 20px;
    }

    .member-info h3 {
        font-size: 18px;
    }

    .member-info p {
        font-size: 14px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

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


    /* =====================================================
       HEADER
    ===================================================== */

    .page-header {
        padding: 38px 15px;
    }

    .page-header h1 {
        font-size: 27px;
    }

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


    /* =====================================================
       STATISTICS
    ===================================================== */

    .neo-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .neo-stat {
        padding: 17px 8px;
    }

    .neo-stat-icon {
        font-size: 21px;
    }

    .neo-stat h3 {
        font-size: 29px;
    }

    .neo-stat p {
        font-size: 12px;
    }


    /* =====================================================
       FOUNDER
    ===================================================== */

    .founder-photo img {
        width: 165px;
        height: 165px;
    }


    /* =====================================================
       GALLERY
    ===================================================== */

    .gallery-container {

        grid-template-columns:
            34px minmax(0, 1fr) 34px;

        gap: 5px;
    }

    .gallery-viewer {
        height: 220px;
    }

    .gallery-btn {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }


    /* =====================================================
       MANAGEMENT
    ===================================================== */

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

    .member-photo {
        height: 240px;
    }

    .management-nav-btn {
        width: 125px;
    }

}


    /* =====================================================
       RESEARCH HUB
    ===================================================== */

    .research-section {
        width: 94%;
        margin: 35px auto;
        padding: 0;
    }

    .research-section h2 {
        font-size: 27px;
    }

    .research-card {
        padding: 22px 18px;
        border-radius: 16px;
    }

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

    .research-card p {
        font-size: 16px;
    }

    .research-btn {
        width: 100%;
        text-align: center;
        padding: 12px 20px;
    }

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

    .category-card {
        padding: 25px 18px;
        font-size: 19px;
    }


    /* =====================================================
       DATA COLLECTION PORTAL
    ===================================================== */

    .portal-intro {
        width: 94%;
        font-size: 16px;
    }

    .portal-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .portal-card {
        padding: 25px 18px;
    }

    .guideline-card {
        padding: 25px 18px;
    }

    .guideline-card ul {
        font-size: 15px;
    }


    /* =====================================================
       KPI DASHBOARD
    ===================================================== */

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

    .kpi-card {
        padding: 18px 10px;
        border-radius: 16px;
    }

    .kpi-card h1 {
        font-size: 27px;
    }

    .kpi-card h3 {
        font-size: 14px;
    }


    /* =====================================================
       DASHBOARD HEADER
       
       IMPORTANT:
       This is intentionally NOT changing the management
       header. Management has its own mobile rules below.
    ===================================================== */

    .dashboard-header {
        width: 100%;
        margin-bottom: 25px;
    }

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


    /* =====================================================
       CHARTS
    ===================================================== */

    .chart-container {
        width: 100%;
        height: 300px;
        padding: 12px;
        margin-top: 25px;
        border-radius: 16px;
    }

    .chart-container canvas {
        width: 100% !important;
        height: 100% !important;
    }


    /* =====================================================
       TABLES
    ===================================================== */

    .cost-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        border-radius: 12px;
    }

    .cost-table th,
    .cost-table td {
        padding: 12px;
        font-size: 14px;
    }


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

    .map-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    #namibiaMap {
        width: 100%;
        max-width: 340px;
        height: auto;
    }

    .region-info {
        width: 100%;
        max-width: 400px;
        min-width: 0;
    }


/* =========================================================
   VERY SMALL PHONES
========================================================= */

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

    .logo-text {
        font-size: 18px;
    }

    .hero-content h1 {
        font-size: 29px;
    }

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

    .neo-stats {
        grid-template-columns: 1fr;
    }

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

    #management-section .dashboard-header h2 {
        font-size: 23px;
    }

    #management-section .member-photo {
        height: 210px;
    }

    .gallery-viewer {
        height: 230px;
    }

    .gallery-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}

/* =========================================================
   NEO MOBILE STYLES
   Latest Publications
========================================================= */


/* =========================================================
   TABLET / SMALL SCREENS
========================================================= */

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

    .publication-card {
        grid-template-columns: 1fr 260px;
    }

    .publication-content {
        padding: 28px;
    }

    .publication-content h3 {
        font-size: 22px;
    }

    .publication-image {
        min-height: 280px;
    }

}


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

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

    .publications-section {
        padding: 40px 12px 60px;
    }

    .publications-container {
        width: 100%;
    }

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

    .publications-header h2 {
        font-size: 29px;
    }

    .publications-header p {
        font-size: 16px;
    }


    /* Stack publication card */

    .publication-card {
        display: flex;
        flex-direction: column;

        margin-bottom: 25px;

        border-radius: 15px;
    }


    /* Publication image */

    .publication-image {
        order: -1;

        width: 100%;
        height: 240px;
        min-height: 240px;
    }

    .publication-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* Publication information */

    .publication-content {
        padding: 25px 20px;
    }

    .publication-icon {
        font-size: 24px;
    }

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

    .publication-description {
        font-size: 15px;
    }


    /* Publication details */

    .publication-details {
        flex-direction: column;

        gap: 7px;

        margin-bottom: 20px;
    }


    /* Buttons */

    .publication-buttons {
        width: 100%;

        flex-direction: column;
    }

    .publication-btn {
        width: 100%;
        min-width: 0;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

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

    .publications-section {
        padding: 35px 10px 50px;
    }

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


    .publication-image {
        height: 210px;
        min-height: 210px;
    }


    .publication-content {
        padding: 22px 18px;
    }

    .publication-content h3 {
        font-size: 20px;
    }

    .publication-description {
        font-size: 14px;
    }

    .publication-details p {
        font-size: 14px;
    }

    .publication-btn {
        font-size: 14px;
        padding: 10px 15px;
    }

}

/* =========================================================
   UPLOAD COMPLETED SURVEY
========================================================= */

.upload-card {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    padding: 45px 50px;

    background: #ffffff;

    border: 1px solid #dce5ee;
    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0, 51, 102, 0.08);

    text-align: center;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* Subtle hover */

.upload-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0, 51, 102, 0.12);
}


/* =========================================================
   TITLE
========================================================= */

.upload-card h3 {
    margin: 0 0 18px;

    color: #003366;

    font-size: 28px;
    font-weight: 700;

    line-height: 1.3;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.upload-card > p:first-of-type {
    max-width: 700px;

    margin: 0 auto 30px;

    color: #596774;

    font-size: 17px;

    line-height: 1.7;
}

/* =========================================================
   SUBMIT BUTTON CSS FOR MOBILE
========================================================= */

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

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

    .upload-card {
        width: 100%;

        padding: 35px 25px;

        border-radius: 17px;
    }


    .upload-card h3 {
        font-size: 24px;
    }


    .upload-card > p:first-of-type {
        font-size: 16px;

        line-height: 1.65;

        margin-bottom: 25px;
    }


    .upload-btn {
        width: 100%;

        max-width: 320px;

        padding: 13px 20px;

        font-size: 15px;
    }


    .upload-note {
        margin-top: 25px;

        padding-top: 18px;

        font-size: 13px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

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

    .upload-card {
        padding: 30px 18px;
    }


    .upload-card h3 {
        font-size: 22px;
    }


    .upload-card > p:first-of-type {
        font-size: 15px;
    }


    .upload-btn {
        width: 100%;
    }

}

/* =========================================================
   NEO MOBILE — HERO SECTION
========================================================= */

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


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

    .hero {

        min-height: auto;

        background-position: center;
    }


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

    .navbar {

        flex-direction: column;

        gap: 18px;

        padding: 18px 15px 22px;

        text-align: center;
    }


    /* Research button */

    .research-nav-btn {

        font-size: 17px;

        padding: 11px 22px;
    }


    /* Brand */

    .brand {

        flex-direction: column;

        gap: 10px;

        margin-left: 0;

        width: 100%;
    }


    .brand img {

        width: 65px;

        height: 65px;
    }


    .logo-text {

        font-size: 21px;

        white-space: normal;

        line-height: 1.3;
    }


    /* About */

    .about-nav-btn {

        font-size: 17px;

        padding: 10px 21px;
    }



    /* =====================================================
       HERO CONTENT
    ===================================================== */

    .hero-content {

        padding:

            35px 15px
            45px;
    }


    .hero-content p {

        max-width: 600px;

        font-size: 18px;

        line-height: 1.55;

        margin-top: 5px;
    }



    /* =====================================================
       SEARCH BAR
    ===================================================== */

    .search-section {

        margin-top: 28px;

        margin-bottom: 20px;
    }


    .search-wrapper {

        width: 100%;

        max-width: 620px;
    }


    .search-box {

        height: 46px;

        font-size: 15px;

        padding-left: 48px;
    }


    .search-icon {

        left: 17px;

        font-size: 18px;
    }



    /* =====================================================
       EXPLORE DATA
    ===================================================== */

    .hero-button {

        margin:

            8px 0
            25px;
    }


    .cta-button {

        padding: 13px 28px;

        font-size: 15px;
    }



    /* =====================================================
       SOCIAL ICONS
    ===================================================== */

    .social-icons {

        width: 100%;

        margin-top: 5px;

        margin-bottom: 0;
    }


    .social-icons a {

        width: 48px;

        height: 48px;

        margin: 6px;

        font-size: 20px;
    }



    /* =====================================================
       OPPORTUNITIES
    ===================================================== */

    .opportunities-button {

        width: 100%;

        margin-top: 25px;
    }


    .opportunities-btn {

        padding: 12px 25px;

        font-size: 16px;
    }



    /* =====================================================
       MAIN CONTAINER
    ===================================================== */

    .container {

        width: 95%;

        margin-top: 0;

        padding: 10px 0;
    }


    .card {

        padding: 25px 18px;

        margin: 25px 0;
    }


    .card h2 {

        font-size: 30px;
    }

}



/* =========================================================
   VERY SMALL PHONES
========================================================= */

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


    .navbar {

        gap: 15px;

        padding-top: 15px;
    }


    .research-nav-btn {

        font-size: 16px;

        padding: 10px 19px;
    }


    .brand img {

        width: 58px;

        height: 58px;
    }


    .logo-text {

        font-size: 19px;
    }


    .about-nav-btn {

        font-size: 16px;

        padding: 9px 18px;
    }


    .hero-content {

        padding:

            30px 12px
            40px;
    }


    .hero-content p {

        font-size: 17px;
    }


    .search-box {

        height: 44px;

        font-size: 14px;
    }


    .search-icon {

        left: 15px;

        font-size: 17px;
    }


    .social-icons a {

        width: 44px;

        height: 44px;

        margin: 5px;

        font-size: 18px;
    }


    .opportunities-btn {

        font-size: 15px;

        padding: 11px 22px;
    }

}

/* =========================================================
   OPPORTUNITIES HUB — MOBILE
========================================================= */

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


    /* =====================================================
       HEADER
    ===================================================== */

    .opportunities-page-header {

        padding: 50px 18px 55px;

    }


    .opportunities-page-header h1 {

        font-size: 35px;

    }


    .opportunities-page-header p {

        font-size: 17px;

    }



    /* =====================================================
       CONTAINER
    ===================================================== */

    .opportunities-container {

        width: 94%;

    }



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

    .opportunities-intro-section {

        padding: 45px 15px 20px;

    }


    .opportunities-intro-card {

        padding: 30px 22px;

    }


    .opportunities-intro-card h2 {

        font-size: 27px;

    }



    /* =====================================================
       CATEGORY GRID
    ===================================================== */

    .opportunity-category-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 15px;

    }


    .opportunity-category-card {

        min-height: 210px;

        padding: 25px 18px;

    }


    .opportunity-category-card h3 {

        font-size: 18px;

    }



    /* =====================================================
       FILTERS
    ===================================================== */

    .opportunity-filter-card {

        padding: 28px 22px;

    }


    .opportunity-filter-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }



    /* =====================================================
       OPPORTUNITY LIST
    ===================================================== */

    .opportunities-list {

        grid-template-columns: 1fr;

        gap: 20px;

    }



    /* =====================================================
       SUBMISSION
    ===================================================== */

    .opportunity-submit-card {

        padding: 35px 22px;

    }


    .opportunity-submit-card h2 {

        font-size: 27px;

    }

}



/* =========================================================
   SMALL PHONES
========================================================= */

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


    .opportunities-page-header {

        padding: 40px 15px 45px;

    }


    .opportunities-header-icon {

        font-size: 38px;

    }


    .opportunities-page-header h1 {

        font-size: 30px;

    }


    .opportunities-page-header p {

        font-size: 16px;

    }


    .opportunities-back-btn {

        padding: 10px 23px;

        font-size: 14px;

    }



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

    .opportunities-intro-section {

        padding: 35px 10px 15px;

    }


    .opportunities-intro-card {

        padding: 27px 18px;

    }


    .opportunities-intro-card h2 {

        font-size: 24px;

    }


    .opportunities-intro-card p {

        font-size: 15px;

    }



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

    .opportunities-section-heading {

        margin-bottom: 25px;

    }


    .opportunities-section-heading h2 {

        font-size: 27px;

    }


    .opportunities-section-heading p {

        font-size: 15px;

    }



    /* =====================================================
       CATEGORY CARDS
    ===================================================== */

    .opportunity-categories-section {

        padding: 40px 10px 55px;

    }


    .opportunity-category-grid {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .opportunity-category-card {

        min-height: auto;

        padding: 25px 20px;

    }


    .category-icon {

        font-size: 34px;

    }



    /* =====================================================
       FILTERS
    ===================================================== */

    .opportunity-filters-section {

        padding: 50px 10px;

    }


    .opportunity-filter-card {

        padding: 25px 18px;

        border-radius: 16px;

    }


    .opportunity-filter-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .opportunity-search input {

        height: 46px;

    }



    /* =====================================================
       OPPORTUNITY CARDS
    ===================================================== */

    .latest-opportunities-section {

        padding: 50px 10px 60px;

    }


    .opportunity-card-content {

        padding: 24px 20px;

    }


    .opportunity-card-top {

        align-items: flex-start;

    }


    .opportunity-card h3 {

        font-size: 20px;

    }


    .opportunity-meta span {

        font-size: 13px;

    }


    .opportunity-tags span {

        font-size: 11px;

    }


    .view-opportunity-btn {

        width: 100%;

        box-sizing: border-box;

    }



    /* =====================================================
       SUBMISSION
    ===================================================== */

    .opportunity-submit-section {

        padding: 55px 10px;

    }


    .opportunity-submit-card {

        padding: 30px 18px;

    }


    .opportunity-submit-card h2 {

        font-size: 24px;

    }


    .opportunity-submit-card p {

        font-size: 15px;

    }


    .submit-opportunity-btn {

        width: 100%;

        box-sizing: border-box;

    }



    /* =====================================================
       DISCLAIMER
    ===================================================== */

    .opportunity-disclaimer {

        padding: 20px 15px 35px;

    }

}