/* =========================================
   RESPONSIVE DESIGN
========================================= */

@media (max-width: 991px) {

    .section-padding {
        padding: 75px 0;
    }

    .hero {
        min-height: 90vh;
    }

    .stat-item {
        border-right: none;

        border-bottom: 1px solid var(--border);

        padding: 25px 10px;
    }

}


@media (max-width: 767px) {

    .section-padding {
        padding: 60px 0;
    }

    .hero {
        min-height: 100vh;

        background-position: center;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-meta {
        gap: 15px;

        flex-direction: column;
    }

    .hero .btn {
        width: 100%;

        margin-bottom: 10px;
    }

    .stat-number {
        font-size: 2.4rem;
    }

}


@media (max-width: 480px) {

    .hero-title {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2.2rem;
    }

}
@media (max-width: 991px) {

    .hero {

        padding-top: 120px;

        padding-bottom: 60px;

    }


    .hero-tree {

        min-height: 350px;

        margin-top: 30px;

    }


    .hero-tree i {

        font-size: 12rem;

    }

}


@media (max-width: 576px) {

    .hero {

        text-align: left;

    }


    .hero-title {

        font-size: 2.8rem;

        letter-spacing: -1px;

    }


    .hero-description {

        font-size: 0.95rem;

    }


    .hero-tree {

        min-height: 280px;

    }


    .hero-tree i {

        font-size: 9rem;

    }


    .tree-label {

        bottom: 10px;

        right: 50%;

        transform: translateX(50%);

    }

}
@media (max-width: 767px) {

    .challenge-grid {

        grid-template-columns: 1fr;

    }


    .challenge-card {

        min-height: auto;

    }

}
/* =========================================
   ECOSYSTEM RESPONSIVE
========================================= */

@media (max-width: 767px) {

    .ecosystem-wrapper {

        margin-top: 40px;

    }


    .ecosystem-center {

        width: 150px;

        height: 150px;

    }


    .ecosystem-card {

        min-height: auto;

        padding: 22px;

    }


    .outcome-box {

        width: 100%;

        justify-content: center;

        border-radius: 20px;

    }

}
/* =========================================
   MODEL SECTION MOBILE
========================================= */

@media (max-width: 991px) {

    .traditional-model,
    .uvari-model {

        padding: 30px;

    }

}


@media (max-width: 767px) {

    .traditional-model h3,
    .uvari-model h3 {

        font-size: 1.7rem;

    }


    .traditional-model,
    .uvari-model {

        border-radius: 20px;

    }

}
/* =========================================
   
========================================= */

@media (max-width: 991px) {

    .path-card {

        min-height: 360px;

    }

}


@media (max-width: 767px) {

    .path-card {

        min-height: 320px;

        padding: 25px;

    }


    .path-card-content h3 {

        font-size: 1.8rem;

    }

}
/* =========================================
   OPPORTUNITY CARDS MOBILE
========================================= */

@media (max-width: 767px) {

    .job-preview-card {

        padding: 24px;

    }


    .view-all-link {

        margin-top: 10px;

    }

}
@media (max-width: 767px) {

    .path-card {

        min-height: 320px;

        padding: 25px;

    }


    .path-card-content h3 {

        font-size: 1.8rem;

    }

}
/* =========================================
   FIND YOUR PATH - MOBILE
========================================= */

@media (max-width: 991px) {

    .path-card {

        min-height: 360px;

    }

}


@media (max-width: 767px) {

    .path-card {

        min-height: 320px;

        padding: 25px;

    }


    .path-card-content h3 {

        font-size: 1.8rem;

    }

}
/* =========================================
   WHO WE SERVE - MOBILE
========================================= */

@media (max-width: 767px) {

    .serve-title {

        font-size: 3.2rem;

    }


    .serve-note {

        margin-top: 30px;

        margin-bottom: 35px;

    }


    .serve-item {

        grid-template-columns: 30px 45px 1fr 35px;

        gap: 12px;

        padding: 20px 5px;

    }


    .serve-item:hover {

        padding-left: 10px;

        padding-right: 10px;

    }


    .serve-icon {

        width: 42px;

        height: 42px;

        font-size: 0.95rem;

    }


    .serve-content h3 {

        font-size: 0.9rem;

    }


    .serve-content p {

        font-size: 0.72rem;

    }


    .serve-arrow {

        width: 32px;

        height: 32px;

        font-size: 0.75rem;

    }

}
/* =========================================
   VILLAGE MAP - MOBILE
========================================= */

@media (max-width: 991px) {

    .village-map {

        height: 550px;

    }

}


@media (max-width: 767px) {

    .village-map {

        height: 500px;

        border-radius: 22px;

    }


    .map-center {

        width: 120px;

        height: 120px;

    }


    .map-center-icon {

        width: 40px;

        height: 40px;

    }


    .location-dot {

        width: 45px;

        height: 45px;

        font-size: 1rem;

    }


    .location-label {

        font-size: 0.55rem;

        padding: 4px 8px;

    }


    .location-school {

        left: 10%;

    }


    .location-community {

        right: 8%;

    }


    .location-faith {

        left: 4%;

    }


    .location-jobs {

        right: 4%;

    }


    .location-skills {

        left: 10%;

    }


    .location-home {

        right: 10%;

    }


    .map-legend {

        left: 15px;

        bottom: 15px;

        gap: 8px;

    }

}
/* =========================================
   IMPACT MOBILE
========================================= */

@media (max-width: 991px) {

    .impact-dashboard {

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

    }


    .impact-stat:nth-child(2) {

        border-right: none;

    }


    .impact-stat:nth-child(-n+2) {

        border-bottom: 1px solid
            rgba(255, 255, 255, 0.12);

    }

}


@media (max-width: 767px) {

    .impact-dashboard {

        grid-template-columns: 1fr;

    }


    .impact-stat {

        border-right: none;

        border-bottom: 1px solid
            rgba(255, 255, 255, 0.12);

        padding: 30px 10px;

    }


    .impact-stat:last-child {

        border-bottom: none;

    }


    .impact-number {

        font-size: 3rem;

    }


    .journey-heading {

        display: block;

    }


    .journey-heading strong {

        display: block;

        margin-top: 8px;

    }


    .journey-step {

        grid-template-columns:
            30px 45px 1fr;

        gap: 12px;

    }


    .journey-arrow {

        display: none;

    }


    .journey-step-content h4 {

        font-size: 0.9rem;

    }


    .journey-step-content p {

        font-size: 0.7rem;

    }


    .journey-final {

        padding: 20px;

    }

}
/* =========================================
   VISION ROADMAP MOBILE
========================================= */

@media (max-width: 991px) {

    .vision-roadmap {

        margin-top: 60px;

        min-height: auto;

        padding-left: 55px;

    }


    .vision-trunk {

        left: 20px;

        transform: none;

    }


    .vision-node {

        position: relative;

        top: auto !important;

        left: auto;

        width: 100%;

        min-height: 180px;

        display: block;

        padding-bottom: 30px;

    }


    .vision-year {

        left: -35px;

        top: 0;

        transform: none;

        font-size: 0.8rem;

    }


    .vision-dot {

        left: -35px;

        top: 40px;

        transform: translateX(-50%);

    }


    .vision-card {

        width: 100%;

        margin: 40px 0 0 !important;

    }

}


@media (max-width: 767px) {

    .vision-roadmap {

        padding-left: 45px;

    }


    .vision-trunk {

        left: 14px;

    }


    .vision-year {

        left: -30px;

    }


    .vision-dot {

        left: -30px;

        width: 22px;

        height: 22px;

    }


    .vision-card {

        padding: 25px;

        border-radius: 18px;

    }


    .vision-card h3 {

        font-size: 1.45rem;

    }


    .vision-statement {

        gap: 12px;

    }


    .vision-statement p {

        font-size: 0.95rem;

        text-align: center;

        white-space: normal;

    }

}
/* =========================================
   COLLECTIVE ECOSYSTEM - TABLET
========================================= */

@media (max-width: 991px) {

    .collective-ecosystem {

        height: 720px;

    }


    .stakeholder {

        width: 210px;

    }


    .line-left {

        left: 12%;

        width: 180px;

    }


    .line-right {

        right: 12%;

        width: 180px;

    }


    .stakeholder-bottom-left {

        left: 3%;

    }


    .stakeholder-bottom-right {

        right: 3%;

    }

}


/* =========================================
   COLLECTIVE ECOSYSTEM - MOBILE
========================================= */

@media (max-width: 767px) {

    .collective-ecosystem {

        height: auto;

        margin-top: 50px;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 15px;

        padding: 10px 0;

    }


    .ecosystem-center {

        position: relative;

        left: auto;

        top: auto;

        transform: none;

        width: 150px;

        height: 150px;

        margin-bottom: 15px;

    }


    .ecosystem-center-icon {

        width: 45px;

        height: 45px;

    }


    .ecosystem-line {

        display: none;

    }


    .stakeholder {

        position: relative;

        top: auto !important;

        right: auto !important;

        bottom: auto !important;

        left: auto !important;

        transform: none !important;

        width: 100%;

        max-width: 420px;

        min-height: 75px;

    }


    .stakeholder:hover {

        transform: translateY(-3px) !important;

    }


    .collective-bottom {

        flex-wrap: wrap;

        text-align: center;

        line-height: 1.6;

    }

}
/* =========================================
   FINAL CTA - MOBILE
========================================= */

@media (max-width: 767px) {

    .final-cta-title {

        font-size: 3.4rem;

    }


    .final-cta-description {

        font-size: 0.8rem;

    }


    .final-event-details {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

        margin: 40px 0;

        padding-left: 10px;

    }


    .final-actions {

        grid-template-columns: 1fr;

    }


    .final-action-card {

        padding: 28px;

    }


    .final-action-card h3 {

        font-size: 1.8rem;

    }


    .final-statement {

        gap: 10px;

        margin-top: 50px;

    }


    .final-statement p {

        white-space: normal;

        font-size: 0.9rem;

        line-height: 1.4;

    }

}