* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #ffffff;
    color: #000;
}

img {
    max-width: 100%;
    display: block;
}

.section {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.container {
    width: 92%;
    max-width: 1400px;
    margin: auto;
}

/* COLORS */
:root {
    --teal: #007f83;
    --light: #e9e9e9;
    --mint: #bfe6df;
}

html {
    scroll-behavior: smooth;
}

/* break-br */
.br-web {
    display: none;
}

@media (min-width: 999px) {
    .br-web {
        display: block;
    }
}

/* break-br */

#install {
    margin-top: 50vh;
}

/* NAVBAR */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    backdrop-filter: blur(10px);
    background: rgba(0, 126, 127, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.nav-inner {
    height: 72px;
    width: 1400px;
    max-width: 95%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* BRAND */
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand img {
    width: 38px;
}

.brand span {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .4px;
}

/* LINKS */
.nav-links {
    display: flex;
    gap: 34px;
}

.nav-links a,
.mobile-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: .25s;
}

.nav-links a:hover,
.mobile-menu a:hover {
    color: #bfe6df;
}

/* HAMBURGER */
.menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.menu-btn span {
    width: 28px;
    height: 3px;
    background: #fff;
    border-radius: 3px;
}

/* MOBILE MENU */
.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 18px;
    padding: 20px 5%;
    background: #007e7f;
}

.mobile-menu.show {
    display: flex;
}

/* MOBILE */
@media(max-width:998px) {

    .nav-links {
        display: none;
    }

    .menu-btn {
        display: flex;
    }

    .brand span {
        font-size: 20px;
    }

}


/* =====================================================
   HERO SECTION - DESKTOP (CURRENT DESIGN = 999px+)
===================================================== */

.hero {
    width: 100%;
    height: 100vh;
    min-height: 760px;
    background: linear-gradient(to bottom,
            #eeeeee 0%,
            #eeeeee 68%,
            #007e7f 68%,
            #007e7f 100%);
    overflow: hidden;
    position: relative;
}

.hero-inner {
    width: 1400px;
    max-width: 95%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
}

/* LEFT */
.hero-left {
    width: 32%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
}

.hero-mobile {
    width: 250px;
    max-width: 100%;
    margin-bottom: 20vh;
}

/* CENTER */
.hero-center {
    width: 33%;
    text-align: center;
    align-self: center;
    margin-top: -40px;
}

.hero-logo {
    width: 95px;
    margin: 0 auto 18px;
}

.hero-center h1 {
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 700;
    line-height: 1;
    color: #000;
    margin-bottom: clamp(8px, .8vw, 12px);
}

.hero-center p {
    font-size: clamp(14px, 1.55vw, 22px);
    line-height: 1.15;
    color: #000;
    font-weight: 500;
}

/* RIGHT */
.hero-right {
    width: 35%;
    height: 100%;
    position: relative;
}

.hero-car {
    width: 420px;
    position: absolute;
    bottom: 31%;
    left: 0;
}

.hero-man {
    width: 165px;
    position: absolute;
    bottom: 23%;
    right: 10vw;
    z-index: 3;
}


/* HERO CTA STRIP */
.hero-cta-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 5% 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
    z-index: 10;
}

.hero-cta-text {
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin: 0;
}

.hero-cta-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
}

.hero-cta-buttons a {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.hero-cta-buttons a:hover {
    opacity: 0.8;
}

.hero-cta-buttons img {
    height: 54px;
    width: auto;
    object-fit: contain;
}


/* =====================================================
   TABLET / SMALL LAPTOP
   576px - 998.98px
===================================================== */

@media (min-width:576px) and (max-width:998.98px) {

    .hero {
        min-height: 700px;
        background: linear-gradient(to bottom,
                #eeeeee 0%,
                #eeeeee 64%,
                #007e7f 64%,
                #007e7f 100%);
    }

    .hero-inner {
        max-width: 94%;
        display: grid;
        grid-template-columns: 1fr 1.1fr 1fr;
        align-items: end;

    }

    /* left mobile */
    .hero-left {
        width: 100%;
        justify-content: flex-start;
    }

    .hero-mobile {
        width: 170px;
        margin-bottom: 14vh;
        margin-left: 1vw;
    }

    /* center */
    .hero-center {
        width: 100%;
        margin: 0;
        align-self: center;
        padding: 0 10px;
    }

    .hero-logo {
        width: 72px;
        margin-bottom: 14px;
    }

    .hero-center h1 {
        font-size: clamp(36px, 6vw, 58px);
    }

    .hero-center p {
        font-size: clamp(16px, 2vw, 20px);
    }

    /* right */
    .hero-right {
        width: 100%;
        height: 100%;
    }

    .hero-car {
        width: 280px;
        left: auto;
        right: 0;
        bottom: 26%;
    }

    .hero-man {
        width: 120px;
        right: 3vw;
        bottom: 19%;
    }

    /* HERO CTA STRIP TABLET */
    .hero-cta-strip {
        flex-direction: column;
        gap: 16px;
        padding-bottom: 24px;
    }

    .hero-cta-text {
        font-size: 22px;
        text-align: center;
    }

    .hero-cta-buttons img {
        height: 48px;
    }

}


/* =====================================================
   MOBILE
   0px - 575.95px
===================================================== */

@media (max-width:575.95px) {

    .hero {
        min-height: 720px;
        height: auto;
        background: linear-gradient(to bottom,
                #eeeeee 0%,
                #eeeeee 70%,
                #007e7f 70%,
                #007e7f 100%);
    }

    .hero-inner {
        width: 100%;
        max-width: 100%;
        min-height: 720px;
        padding: 28px 18px 0;
        margin-top: 12dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    /* center content first */
    .hero-center {
        order: 1;
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .hero-logo {
        width: 64px;
        margin: 0 auto 14px;
    }

    .hero-center h1 {
        font-size: clamp(34px, 10vw, 52px);
        margin-bottom: 8px;
    }

    .hero-center p {
        font-size: clamp(15px, 4.2vw, 18px);
    }

    /* phone second */
    .hero-left {
        order: 2;
        width: 100%;
        height: auto;
        justify-content: left;
        margin-top: 78px;
    }

    .hero-mobile {
        width: 155px;
        margin: 0;
    }

    /* right visuals bottom */
    .hero-right {
        order: 3;
        width: 100%;
        height: 220px;
        position: absolute;
        margin-top: 18px;
        bottom: 30%;
        right: -22%;
    }

    .hero-car {
        width: 235px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 24px;
    }

    .hero-man {
        width: 105px;
        right: 23%;
        bottom: 10px;
    }

    /* HERO CTA STRIP MOBILE */
    .hero-cta-strip {
        bottom: 30px;
        flex-direction: column;
        gap: 18px;
        padding: 0 18px;
    }

    .hero-cta-text {
        font-size: 18px;
        font-weight: 600;
        text-align: center;
        line-height: 1.3;
    }

    .hero-cta-buttons {
        gap: 14px;
    }

    .hero-cta-buttons img {
        height: 42px;
    }

}



/* SECTION 2 */
.who-section {
    width: 100%;
    min-height: 760px;
    height: 100vh;
    background: linear-gradient(to bottom,
            #ececec 0%,
            #ececec 50%,
            #007e7f 50%,
            #007e7f 100%);
    overflow: hidden;
}

.who-wrapper {
    width: 1400px;
    max-width: 95%;
    height: 100%;
    margin: 0 auto;
    display: flex;
}

/* COLUMN */
.who-col {
    width: 33.333%;
    position: relative;
    text-align: center;
}


/* PHONE AREA */
.phone-box {
    height: 455px;
    position: relative;
}

.who-phone {
    width: 185px;
    max-width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 18px;
}

/* PEOPLE */
.who-person {
    position: absolute;
    max-width: 100%;
}

/* LEFT MAN */
.near-man {
    width: 78px;
    left: 7vw;
    bottom: -2px;
}

/* CENTER MAN */
.destination-man {
    width: 70px;
    right: 7vw;
    bottom: -4px;
}

/* RIGHT WOMAN */
.way-women {
    width: 82px;
    right: 6vw;
    bottom: -3px;
}

/* TEXT */
/* TEXT BOX */
.who-text {
    margin-top: 4vw;
    position: relative;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

/* CENTER COLUMN ONLY */
.who-col.divider .who-text::before,
.who-col.divider .who-text::after {
    content: "";
    position: absolute;
    top: 4%;
    width: 2px;
    height: 130px;

    background: repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, .55) 0px,
            rgba(255, 255, 255, .55) 8px,
            transparent 8px,
            transparent 13px,

            rgba(255, 255, 255, .55) 13px,
            rgba(255, 255, 255, .55) 15px,
            transparent 15px,
            transparent 24px);
}

/* left divider */
.who-col.divider .who-text::before {
    left: -72px;
}

/* right divider */
.who-col.divider .who-text::after {
    right: -72px;
}

.who-text h3 {
    color: #ffffff;
    font-size: clamp(18px, 1.95vw, 28px);
    line-height: 1;
    font-weight: 500;
    letter-spacing: .3px;
}

.who-text p {
    color: #bfe6df;
    font-size: clamp(18px, 1.95vw, 28px);
    line-height: 1.03;
    font-weight: 700;
    margin-top: clamp(10px, 1vw, 16px);
}

/* keep columns normal */
.who-col {
    width: 33.333%;
    position: relative;
    text-align: center;
}

/* hidden text initially */
.who-text {
    margin-top: 4vw;
    position: relative;
    width: max-content;
    margin-left: auto;
    margin-right: auto;

    opacity: 0;
    transform: translateY(45px);
}

/* reveal */
.who-text.show {
    animation: whoTextRise 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* stagger */
.who-col:nth-child(1) .who-text.show {
    animation-delay: .1s;
}

.who-col:nth-child(2) .who-text.show {
    animation-delay: .35s;
}

.who-col:nth-child(3) .who-text.show {
    animation-delay: .6s;
}

@keyframes whoTextRise {
    from {
        opacity: 0;
        transform: translateY(45px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================
   TABLET
   576px - 998.98px
===================================================== */
@media (min-width:576px) and (max-width:998.98px) {

    .who-section {
        min-height: 760px;
        height: auto;
        background: linear-gradient(to bottom,
                #ececec 0%,
                #ececec 46%,
                #007e7f 46%,
                #007e7f 100%);
    }

    .who-wrapper {
        width: 100%;
        max-width: 96%;
        min-height: 760px;
        margin: auto;
        display: flex;
        gap: 10px;
    }

    .who-col {
        width: 33.333%;
    }

    /* visuals */
    .phone-box {
        height: 360px;
    }

    .who-phone {
        width: 145px;
        bottom: 10px;
    }

    .near-man {
        width: 58px;
        left: 2vw;
    }

    .destination-man {
        width: 54px;
        right: 2vw;
    }

    .way-women {
        width: 60px;
        right: 2vw;
    }

    /* text */
    .who-text {
        margin-top: 30px;
        width: auto;
        padding: 0 10px;
    }

    .who-text h3 {
        font-size: clamp(18px, 2.4vw, 24px);
    }

    .who-text p {
        font-size: clamp(18px, 2.4vw, 24px);
        padding: 0 1vw;
    }

    /* divider tighter */
    .who-col.divider .who-text::before {
        left: -24px;
        height: 110px;
    }

    .who-col.divider .who-text::after {
        right: -24px;
        height: 110px;
    }

}


/* =====================================================
   MOBILE
   0px - 575.95px
===================================================== */
@media (max-width:575.95px) {

    .who-section {
        min-height: auto;
        height: auto;
        background: #007e7f;
    }

    .who-wrapper {
        width: 100%;
        max-width: 100%;
        padding: 24px 14px 36px;
        display: flex;
        flex-direction: column;
        gap: 34px;
    }

    /* each block becomes row */
    .who-col {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
    }

    /* phone area */
    .phone-box {
        width: 100%;
        height: 230px;
        position: relative;
    }

    .who-phone {
        width: 118px;
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%);
    }

    /* people */
    .near-man {
        width: 48px;
        left: 22%;
        bottom: 0;
    }

    .destination-man {
        width: 46px;
        right: 22%;
        bottom: 0;
    }

    .way-women {
        width: 50px;
        right: 22%;
        bottom: 0;
    }

    /* text */
    .who-text {
        margin-top: 10px;
        width: 100%;
        padding: 0 8px;
        opacity: 1;
        transform: none;
    }

    .who-text h3 {
        font-size: clamp(14px, 5vw, 20px);
        margin: 0;
    }

    .who-text p {
        font-size: clamp(12px, 4.4vw, 20px);
        margin-top: 8px;
        line-height: 1.02;
    }

    /* remove side dividers on mobile */
    .who-col.divider .who-text::before,
    .who-col.divider .who-text::after {
        display: none;
    }

    /* subtle separators between cards */
    .who-col:not(:last-child) {
        padding-bottom: 26px;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
    }

}


/* SECTION 3 */
.overview-section {
    width: 100%;
    min-height: 760px;
    height: 100vh;
    padding-top: 7vh;
    background: #007e7f;
    position: relative;
    overflow: hidden;
}

.overview-inner {
    width: 1400px;
    max-width: 95%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    padding-top: 38px;
}

.overview-section h2 {
    color: #fff;
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: .5px;
}

.overview-nav {
    margin-top: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(14px, 3vw, 34px);
    flex-wrap: nowrap;
}

.overview-nav span {
    color: #bfe6df;
    font-size: clamp(16px, 4vw, 34px);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.overview-nav i {
    color: #bfe6df;
    font-style: normal;
    font-size: clamp(20px, 4vw, 38px);
    font-weight: 400;
    opacity: .9;
}

.overview-road {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    min-width: 1400px;
    height: auto;
    transform: translateX(-50%);
    z-index: 1;
}

/* tablet */
@media (max-width: 991px) {
    .overview-section {
        min-height: 650px;
        height: 80vh;
    }

    .overview-inner {
        max-width: 100%;
        padding-top: 28px;
    }

    .overview-nav {
        margin-top: 24px;
    }

    .overview-road {
        min-width: 1250px;
        transform: translateX(-43%);
        bottom: 20%;
    }
}

/* mobile */
@media (max-width: 575px) {
    .overview-section {
        min-height: 560px;
        height: 560px;
    }

    .overview-inner {
        padding-top: 20px;
    }

    .overview-section h2 {
        font-size: 28px;
    }

    .overview-nav {
        margin-top: 18px;
        gap: 10px;
        width: 100%;
        padding: 0 8px;
    }

    .overview-nav span {
        font-size: 15px;
    }

    .overview-nav i {
        font-size: 18px;
    }

    .overview-road {
        min-width: 760px;
        width: 760px;
        bottom: 20%;
        transform: translateX(-44%);
    }
}

/* very small phones */
@media (max-width: 380px) {
    .overview-nav span {
        font-size: 14px;
    }

    .overview-road {
        min-width: 720px;
        width: 720px;
        transform: translateX(-43%);
    }
}

/* SECTION 4 */
.benefits-section {
    width: 100%;
    height: 100vh;
    min-height: 760px;
    background: linear-gradient(to bottom,
            #007e7f 0%,
            #007e7f 66%,
            #006f70 66%,
            #006f70 100%);
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.benefits-stage {
    width: min(100vw, 1600px);
    aspect-ratio: 1600 / 760;
    position: relative;
}

.benefits-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

/* COMMON + ANIMATION */
.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: default;

    opacity: 0;
    transform: translateX(-40px);
    transition:
        opacity .6s ease,
        transform .6s ease,
        filter .28s ease;
    transition-delay: var(--delay, 0s);
}

.benefit-item.show {
    opacity: 1;
    transform: translateX(0);
}

.benefit-item img {
    width: 52px;
    flex-shrink: 0;
    opacity: .78;
    transition:
        opacity .28s ease,
        transform .28s ease,
        filter .28s ease;
}

.benefit-item p {
    color: rgba(255, 255, 255, .82);
    font-size: clamp(17px, 1.9vw, 27px);
    line-height: 1.05;
    font-weight: 700;
    transition: color .28s ease;
}

/* hover */
.benefit-item:hover {
    transform: translateY(-2px);
}

.benefit-item.show:hover {
    transform: translateY(-2px);
}

.benefit-item:hover p {
    color: #ffffff;
}

.benefit-item:hover img {
    opacity: 1;
    transform: scale(1.04);
    filter: brightness(1.08);
}

/* TOP ROW */
.top-row {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    display: flex;
    justify-content: space-between;
}

.top-left {
    width: 340px;
}

.top-right {
    width: 310px;
}

/* LEFT SIDE */
.left-group {
    position: absolute;
    left: 40px;
    top: 250px;
    width: 360px;
    display: flex;
    flex-direction: column;
    gap: 68px;
}

/* MID */
.mid-group {
    position: absolute;
    left: 40%;
    top: 250px;
    width: 320px;
}

/* RIGHT SIDE */
.right-group {
    position: absolute;
    right: 40px;
    top: 250px;
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 68px;
}

/* PEOPLE */
.people-wrap {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.people-main {
    width: 30vw;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .benefits-section {
        height: auto;
        min-height: 100vh;
        padding: 90px 20px 0;
        align-items: flex-start;
    }

    .benefits-stage {
        width: 100%;
        aspect-ratio: auto;
    }

    .benefits-inner {
        height: auto;
        min-height: 760px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .top-row,
    .left-group,
    .mid-group,
    .right-group {
        position: static;
        width: 100%;
        transform: none;
    }

    .top-row,
    .benefit-text-wrap,
    .left-group,
    .right-group {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .benefit-text-wrap {
        margin-top: 28px;
    }

    .mid-group {
        margin: 0;
    }

    .benefit-item {
        gap: 12px;
        transform: translateX(-40px);
    }

    .benefit-item.show {
        transform: translateX(0);
    }

    .benefit-item img {
        width: 44px;
    }

    .benefit-item p {
        font-size: 24px;
    }

    .people-wrap {
        position: static;
        transform: none;
        margin: 40px auto 0;
        text-align: center;
    }

    .people-main {
        width: min(420px, 90vw);
    }
}

@media (max-width: 575px) {
    .benefits-section {
        padding: 80px 16px 0;
        background: linear-gradient(to bottom,
                #007e7f 0%,
                #007e7f 72%,
                #006f70 72%,
                #006f70 100%);
    }

    .benefits-inner {
        min-height: auto;
    }

    .top-row,
    .benefit-text-wrap,
    .left-group,
    .right-group {
        gap: 22px;
    }

    .benefit-text-wrap {
        margin-top: 22px;
    }

    .benefit-item {
        gap: 10px;
    }

    .benefit-item img {
        width: 36px;
    }

    .benefit-item p {
        font-size: 18px;
        line-height: 1.08;
    }

    .people-wrap {
        margin: 80px auto 30px;
    }

    .people-main {
        width: 75vw;
    }
}

/* SECTION 5 */
.help-section {
    width: 100%;
    position: relative;
    min-height: 760px;
    height: 100vh;
    padding-top: 5vh;
    overflow: hidden;
    background: #e9e9e9;
}

/* TOP */
.help-top {
    width: 100%;
    height: 65%;
    display: flex;
}

/* LEFT SIDE */
.help-left {
    width: 70%;
    position: relative;
    padding: 65px 40px 0 55px;
}

.big-question {
    position: absolute;
    left: 10%;
    top: clamp(40px, 6vh, 80px);
    font-size: clamp(120px, 16vw, 240px);
    font-weight: 700;
    line-height: 1;
    color: #000;
}

.problem-list {
    margin-left: 25%;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

/* initial hidden state */
.problem-item {
    display: flex;
    align-items: center;
    gap: 28px;

    opacity: 0;
    transform: translateX(-80px);
}

/* active */
.problem-item.show {
    animation: fadeLeft .8s ease forwards;
}

/* stagger */
.problem-item:nth-child(1).show {
    animation-delay: .1s;
}

.problem-item:nth-child(2).show {
    animation-delay: .35s;
}

.problem-item:nth-child(3).show {
    animation-delay: .6s;
}


@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.problem-item img {
    width: 78px;
    flex-shrink: 0;
}

.problem-item p {
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.05;
    font-weight: 500;
    color: #000;
}

/* RIGHT PANEL */
.help-right {
    width: 25%;
    background: #bfe6df;
    padding: 55px 38px 0;
    position: relative;
}

.friend-list {
    display: flex;
    flex-direction: column;
}

.friend-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 0 16px;
}

/* automatic divider between items */
.friend-item:not(:last-child) {
    border-bottom: 1px solid transparent;
    background-image: repeating-linear-gradient(to right,
            #4a9f9e 0px,
            #4a9f9e 10px,
            transparent 10px,
            transparent 16px,
            #4a9f9e 16px,
            #4a9f9e 18px,
            transparent 18px,
            transparent 28px);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: left bottom;
}

.friend-item img {
    width: 42px;
    flex-shrink: 0;
}

.friend-item span {
    font-size: clamp(16px, 1.7vw, 24px);
    line-height: 1.05;
    color: #000;
    font-weight: 500;
}

.help-phone {
    width: 13vw;
    position: absolute;
    right: 7%;
    bottom: 2%;
    z-index: 5;
}

/* ROAD */
.road-divider {
    width: 100%;
    height: 34px;
    background: #000;
    position: relative;
}

.road-line {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(to right,
            #ffffff 0px,
            #ffffff 8px,
            transparent 8px,
            transparent 14px);
}

/* BOTTOM */
.help-bottom {
    height: 35%;
    background: #007e7f;
    text-align: center;
    color: #fff;
    padding-top: 48px;
}

.help-bottom small {
    display: block;
    font-size: clamp(15px, 1.7vw, 24px);
    line-height: 1;
    opacity: .95;
}

.help-bottom h2 {
    font-size: clamp(30px, 3.8vw, 54px);
    line-height: 1;
    margin-top: clamp(6px, 0.7vw, 10px);
    font-weight: 700;
}

.help-bottom p {
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1;
    margin-top: clamp(8px, 0.85vw, 12px);
}

/* =====================================================
   TABLET
   576px - 998.98px
===================================================== */
@media (min-width:576px) and (max-width:998.98px) {

    .help-section {
        min-height: auto;
        height: auto;
    }

    .help-top {
        height: auto;
        min-height: 540px;
        display: flex;
    }

    /* LEFT */
    .help-left {
        width: 66%;
        padding: 42px 24px 28px 24px;
    }

    .big-question {
        left: 2%;
        top: 28px;
        font-size: clamp(90px, 12vw, 150px);
    }

    .problem-list {
        margin-left: 18%;
        gap: 26px;
    }

    .problem-item {
        gap: 18px;
        transform: translateX(-55px);
    }

    .problem-item img {
        width: 62px;
    }

    .problem-item p {
        font-size: clamp(16px, 2vw, 22px);
    }

    /* RIGHT */
    .help-right {
        width: 34%;
        padding: 34px 18px 18px;
    }

    .friend-item {
        gap: 14px;
        padding: 12px 0 14px;
    }

    .friend-item img {
        width: 34px;
    }

    .friend-item span {
        font-size: clamp(14px, 1.8vw, 18px);
    }

    /* divider */
    .road-divider {
        height: 28px;
    }

    /* bottom */
    .help-bottom {
        height: auto;
        padding: 34px 20px 44px;
    }

    .help-bottom h2 {
        font-size: clamp(28px, 4vw, 42px);
    }

    .help-bottom p {
        font-size: clamp(16px, 2vw, 22px);
    }

    .help-phone {
        width: 170px;
        right: 3%;
        bottom: 15%;
    }

}


/* =====================================================
   MOBILE
   0px - 575.95px
===================================================== */
@media (max-width:575.95px) {

    .help-section {
        min-height: auto;
        height: auto;
        overflow: hidden;
    }

    /* stack layout */
    .help-top {
        height: auto;
        display: flex;
        flex-direction: column;
    }

    /* =========================
   LEFT AREA
========================= */
    .help-left {
        width: 100%;
        padding: 18px 14px 24px;
        position: relative;
    }

    .big-question {
        left: 14px;
        top: 10px;
        font-size: 84px;
        line-height: 1;
        opacity: .95;
    }

    .problem-list {
        margin-left: 0;
        margin-top: 12px;
        gap: 18px;
        padding-left: 72px;
    }

    .problem-item {
        gap: 12px;
        align-items: center;

        /* keep animation */
        opacity: 0;
        transform: translateX(-45px);
    }

    .problem-item.show {
        animation: fadeLeft .75s ease forwards;
    }

    .problem-item img {
        width: 50px;
    }

    .problem-item p {
        font-size: 18px;
        line-height: 1.08;
    }

    /* =========================
   RIGHT PANEL
========================= */
    .help-right {
        width: 100%;
        padding: 14px 14px 18px;
        background: #bfe6df;
    }

    .friend-list {
        gap: 0;
    }

    .friend-item {
        gap: 12px;
        padding: 12px 0;
    }

    .friend-item img {
        width: 30px;
    }

    .friend-item span {
        font-size: 17px;
        line-height: 1.08;
    }

    /* =========================
   ROAD
========================= */
    .road-divider {
        height: 22px;
    }

    .road-line {
        height: 2px;
    }

    /* =========================
   BOTTOM CTA
========================= */
    .help-bottom {
        height: auto;
        padding: 28px 14px 118px;
        position: relative;
    }

    .help-bottom small {
        font-size: 13px;
    }

    .help-bottom h2 {
        font-size: clamp(28px, 8vw, 40px);
        line-height: 1;
        margin-top: 8px;
    }

    .help-bottom p {
        font-size: 18px;
        margin-top: 10px;
    }

    /* phone centered below text */
    .help-phone {
        width: 88px;
        right: 14px;
        bottom: 29%;
    }

}


/* =====================================================
   EXTRA SMALL MOBILE
   cleaner for very narrow devices
===================================================== */
@media (max-width:380px) {

    .problem-list {
        padding-left: 62px;
    }

    .problem-item p {
        font-size: 16px;
    }

    .friend-item span {
        font-size: 15px;
    }

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

    .help-bottom p {
        font-size: 16px;
    }

    .help-phone {
        width: 74px;
    }

}

/* SECTION 6 */
.coordination-section {
    width: 100%;
    min-height: 760px;
    height: 100vh;
    padding-top: 5vh;
    background: linear-gradient(to bottom,
            #ececec 0%,
            #ececec 60%,
            #007e7f 60%,
            #007e7f 100%);
    position: relative;
    overflow: hidden;
}

/* WIDTH CONTROL */
.coordination-inner {
    width: 1400px;
    max-width: 95%;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    padding-top: 5vh;
}

/* TITLE */
.coordination-section h2 {
    text-align: center;
    color: #007e7f;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .4px;
}

/* GRID */
.coordination-grid {
    margin-top: 62px;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

/* CARD */
.coord-card {
    width: 23.2%;
    position: relative;
    text-align: center;
}

/* ICON */
.coord-icon {
    width: 182px;
    margin: 0 auto;
    position: relative;
    z-index: 8;
}

/* BLOCK — tall enough to always extend below the road */
.coord-box {
    width: 100%;
    height: 100vh;
    /* intentionally oversized — road covers the excess */
    background: #bfe6df;
    margin-top: -62px;
    padding: 115px 22px 20px;
    position: relative;
    z-index: 2;
    /* road z-index (6) sits on top, cutting these off */
}

.coord-box p {
    font-size: clamp(17px, 1.9vw, 27px);
    line-height: 1.05;
    font-weight: 500;
    color: #000;
    position: relative;
    z-index: 3;
}

/* ROAD — high z-index so it naturally overlaps block bottoms at every screen size */
.coord-road {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 6;
    pointer-events: none;
}

/* hidden initially */
.coord-card {
    width: 23.2%;
    position: relative;
    text-align: center;

    opacity: 0;
    transform: translateY(140px);
}

/* animate only when JS adds class */
.coord-card.show {
    animation: riseCard .9s ease forwards;
}

/* stagger delays */
.card1.show {
    animation-delay: .1s;
}

.card2.show {
    animation-delay: .35s;
}

.card3.show {
    animation-delay: .6s;
}

.card4.show {
    animation-delay: .85s;
}

@keyframes riseCard {
    0% {
        opacity: 0;
        transform: translateY(140px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =====================================================
   TABLET
   576px - 998.98px
===================================================== */
@media (min-width:576px) and (max-width:998.98px) {

    .coordination-section {
        min-height: auto;
        height: auto;
        background: linear-gradient(to bottom,
                #ececec 0%,
                #ececec 62%,
                #007e7f 62%,
                #007e7f 100%);
    }

    .coordination-inner {
        max-width: 94%;
        padding-top: 34px;
    }

    .coordination-section h2 {
        font-size: clamp(34px, 5vw, 48px);
    }

    /* 2 x 2 layout */
    .coordination-grid {
        margin-top: 34px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 26px 22px;
    }

    .coord-card {
        width: 100%;
        opacity: 0;
        transform: translateY(90px);
    }

    .coord-card.show {
        animation: riseCard .9s ease forwards;
    }

    .coord-icon {
        width: 138px;
    }

    .coord-box {
        height: 430px;
        margin-top: -46px;
        padding: 92px 18px 20px;
    }

    .coord-box p {
        font-size: clamp(18px, 2vw, 24px);
    }

    .coord-road {
        width: 130%;
        left: 50%;
        transform: translateX(-50%);
    }

}


/* =====================================================
   SECTION 6 MOBILE FULL UPDATED CSS
   0px - 575.95px
===================================================== */
@media (max-width:575.95px) {

    .coordination-section {
        min-height: auto;
        height: 80vh;
        overflow: hidden;
        background: linear-gradient(to bottom,
                #ececec 0%,
                #ececec 76%,
                #007e7f 76%,
                #007e7f 100%);
    }

    .coordination-inner {
        width: 100%;
        max-width: 100%;
        padding: 20px 0 0;
    }

    .coordination-section h2 {
        font-size: 34px;
        line-height: 1.02;
        text-align: center;
        padding: 0 14px;
    }

    /* ===============================
   STACK LAYOUT
================================= */
    .coordination-grid {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* ===============================
   COMMON CARD
================================= */
    .coord-card {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0;
        opacity: 0;
    }

    /* ===============================
   ODD CARDS
   fixed to LEFT wall
================================= */
    .coord-card:nth-child(odd) {
        justify-content: flex-start;
        transform: translateX(-70px);
    }

    .coord-card:nth-child(odd) .coord-box {
        width: calc(100% - 58px);
        margin-right: -22px;
        border-radius: 0 16px 16px 0;
        padding: 16px 58px 16px 16px;
        text-align: center;
    }

    .coord-card:nth-child(odd) .coord-icon {
        width: 72px;
        margin-left: -4px;
        order: 2;
    }

    /* ===============================
   EVEN CARDS
   fixed to RIGHT wall
================================= */
    .coord-card:nth-child(even) {
        justify-content: flex-end;
        flex-direction: row-reverse;
        transform: translateX(70px);
    }

    .coord-card:nth-child(even) .coord-box {
        width: calc(100% - 58px);
        margin-left: -22px;
        border-radius: 16px 0 0 16px;
        padding: 16px 16px 16px 58px;
        text-align: center;
    }

    .coord-card:nth-child(even) .coord-icon {
        width: 72px;
        margin-right: -4px;
        order: 2;
    }

    /* ===============================
   BOX STYLE
================================= */
    .coord-box {
        min-height: 102px;
        height: auto;
        margin-top: 0;
        background: #bfe6df;
        position: relative;
        z-index: 1;
    }

    .coord-box p {
        font-size: 17px;
        line-height: 1.05;
        font-weight: 500;
        color: #000;
    }

    /* ===============================
   ICON STYLE
================================= */
    .coord-icon {
        flex-shrink: 0;
        position: relative;
        z-index: 3;
    }

    /* ===============================
   ANIMATION
================================= */
    .coord-card.show {
        animation-duration: .8s;
        animation-fill-mode: forwards;
        animation-timing-function: ease;
    }

    .coord-card:nth-child(odd).show {
        animation-name: coordLeftWall;
    }

    .coord-card:nth-child(even).show {
        animation-name: coordRightWall;
    }

    .card1.show {
        animation-delay: .08s;
    }

    .card2.show {
        animation-delay: .24s;
    }

    .card3.show {
        animation-delay: .40s;
    }

    .card4.show {
        animation-delay: .56s;
    }

    @keyframes coordLeftWall {
        from {
            opacity: 0;
            transform: translateX(-70px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @keyframes coordRightWall {
        from {
            opacity: 0;
            transform: translateX(70px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* ===============================
   ROAD
================================= */
    .coord-road {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 10%;
        z-index: 6;
    }

}


/* =====================================================
   EXTRA SMALL DEVICES
===================================================== */
@media (max-width:380px) {

    .coordination-section h2 {
        font-size: 30px;
    }

    .coord-card:nth-child(odd) .coord-box,
    .coord-card:nth-child(even) .coord-box {
        width: calc(100% - 52px);
        min-height: 94px;
    }

    .coord-card:nth-child(odd) .coord-icon,
    .coord-card:nth-child(even) .coord-icon {
        width: 64px;
    }

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

}

/* SECTION 7 */

.community-section {
    width: 100%;
    min-height: 760px;
    height: 100vh;
    padding-top: 5vh;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

/* top white header */
.community-top {
    height: 20%;
    min-height: 140px;
    background: #ececec;
    position: relative;
}

.community-logo {
    position: absolute;
    left: 68px;
    top: 40px;
    width: 44px;
}

.community-top h2 {
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(42px, 3.1vw, 58px);
    font-weight: 700;
    color: #007e7f;
    letter-spacing: .5px;
}


/* teal area */
.community-body {
    height: 80%;
    background: #007e7f;
    position: relative;
    overflow: hidden;
}


/* headings */
.community-headings {
    width: min(980px, 78%);
    margin: 1.2vw auto 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: #fff;
    font-weight: 700;
    text-align: center;
}

.left-heading {
    text-align: end;
    font-size: clamp(22px, 1.7vw, 34px);
    line-height: 1.12;
}

.right-heading {
    text-align: start;
    font-size: clamp(22px, 1.7vw, 34px);
    line-height: 1.12;
}

.heading-divider {
    width: 2px;
    height: 3.8vw;
    min-height: 58px;
    background: rgba(255, 255, 255, .45);
    margin-top: .3vw;
}


/* center people image */
.people-group {
    position: absolute;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
    width: clamp(320px, 24vw, 470px);
    z-index: 2;
}


/* wrappers */
.community-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .28vw;
    width: max-content;
}


/* side columns */
.community-left,
.community-right {
    position: absolute;
    top: 30%;
    width: 34%;
    z-index: 3;
}

.community-left {
    left: 1.5%;
}

.community-right {
    right: 1.5%;
}


/* rows */
.community-item {
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 700;
    font-size: clamp(22px, 1.85vw, 40px);
    line-height: 1;
}

.community-item img {
    width: clamp(42px, 3vw, 66px);
    height: auto;
    flex-shrink: 0;
}

.community-item .label {
    white-space: nowrap;
    width: max-content;
}


/* line */
.community-item .line {
    width: 100%;
    height: 2px;
    background: #cdebe4;
    position: relative;
    display: block;
}


/* LEFT ITEMS */
.community-item.left {
    justify-content: flex-end;
    gap: 1.1vw;
}

/* arrow */
.community-item.left .line::before {
    content: "";
    position: absolute;
    left: -0.55vw;
    top: -0.22vw;
    border-top: .28vw solid transparent;
    border-bottom: .28vw solid transparent;
    border-right: .55vw solid #cdebe4;
}


/* RIGHT ITEMS */
.community-item.right {
    justify-content: flex-start;
    gap: 1.1vw;
}

/* arrow */
.community-item.right .line::after {
    content: "";
    position: absolute;
    right: -0.55vw;
    top: -0.22vw;
    border-top: .28vw solid transparent;
    border-bottom: .28vw solid transparent;
    border-left: .55vw solid #cdebe4;
}


/* =====================================================
   CURVED POSITIONING LIKE DESIGN
===================================================== */

/* LEFT SIDE */
.community-left .community-item:nth-child(1) {
    margin-right: 0%;
    margin-top: 0;
}

.community-left .community-item:nth-child(2) {
    margin-right: 10%;

    margin-top: 2.8vw;
}

.community-left .community-item:nth-child(3) {
    margin-right: 4%;

    margin-top: 3vw;
}

.community-left .community-item:nth-child(4) {
    margin-right: 0%;
    margin-top: 3vw;
}

/* RIGHT SIDE */
.community-right .community-item:nth-child(1) {
    margin-left: 0%;
    margin-top: 0;
}

.community-right .community-item:nth-child(2) {
    margin-left: 10%;
    margin-top: 2.8vw;
}

.community-right .community-item:nth-child(3) {
    margin-left: 4%;
    margin-top: 3vw;
}

.community-right .community-item:nth-child(4) {
    margin-left: -2%;
    margin-top: 3vw;
}

/* HOVER ANIMATIONS */

/* smooth base transition */
.community-item .line,
.community-item .line::before,
.community-item .line::after {
    transition:
        transform .35s ease,
        opacity .35s ease,
        background-color .35s ease,
        border-color .35s ease;
}

/* LEFT SIDE HOVER */
.community-item.left:hover .line {
    transform: translateX(-8px);
    background: #ffffff;
}

.community-item.left:hover .line::before {
    border-right-color: #ffffff;
}

/* RIGHT SIDE HOVER */
.community-item.right:hover .line {
    transform: translateX(8px);
    background: #ffffff;
}

.community-item.right:hover .line::after {
    border-left-color: #ffffff;
}

/* optional icon lift */
.community-item img {
    transition: transform .35s ease;
}

.community-item:hover img {
    transform: translateY(-2px) scale(1.03);
}

/* optional text brighten */
.community-item .label {
    transition: color .35s ease;
}

.community-item:hover .label {
    color: #ffffff;
}

/* HOVER ANIMATIONS */

/* =====================================================
   TABLET
   576px - 998.98px
===================================================== */
@media (min-width:576px) and (max-width:998.98px) {
    .community-left .community-item:nth-child(1) {
        margin-right: 0;
        margin-top: 0;
    }

    .community-left .community-item:nth-child(2) {
        margin-right: 0;

        margin-top: 0;
    }

    .community-left .community-item:nth-child(3) {
        margin-right: 0;

        margin-top: 0;
    }

    .community-left .community-item:nth-child(4) {
        margin-right: 0;
        margin-top: 0;
    }

    /* RIGHT SIDE */
    .community-right .community-item:nth-child(1) {
        margin-left: 0;
        margin-top: 0;
    }

    .community-right .community-item:nth-child(2) {
        margin-left: 0;
        margin-top: 0;
    }

    .community-right .community-item:nth-child(3) {
        margin-left: 0;
        margin-top: 0;
    }

    .community-right .community-item:nth-child(4) {
        margin-left: 0;
        margin-top: 0;
    }

    .community-section {
        height: auto;
        min-height: auto;
    }

    /* TOP TITLE */
    .community-top {
        padding: 34px 20px 28px;
    }

    .community-top h2 {
        font-size: 46px;
        line-height: 1.05;
        text-align: center;
    }

    /* BODY */
    .community-body {
        position: relative;
        padding: 34px 28px 50px;
        min-height: auto;
    }

    /* HEADINGS */
    .community-headings {
        display: flex;
        width: 100%;
        /* flex-direction:column; */
        align-items: center;
        gap: 18px;
        text-align: center;
        margin: 1.2vw 0 0;
    }

    .left-heading {
        flex: 1;
        width: 100%;
        font-size: 34px;
        line-height: 1.15;
        font-weight: 700;
        text-align: start;
    }

    .right-heading {
        flex: 1;
        width: 100%;
        font-size: 34px;
        line-height: 1.15;
        font-weight: 700;
        text-align: end;
    }

    .heading-divider {
        width: 2px;
        height: 80px;
        background: rgba(255, 255, 255, .55);
    }

    /* PEOPLE IMAGE */
    .people-group {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
        display: block;
        width: 260px;
        margin: 28px auto 36px;
    }

    /* RESET SIDE ABSOLUTE LAYOUT */
    .community-left,
    .community-right {
        position: static;
        width: 100%;
    }

    /* TWO COLUMN GRID */
    .community-left,
    .community-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

    /* spacing between groups */
    .community-right {
        margin-top: 18px;
    }

    /* CARD ITEMS */
    .community-item {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 18px 18px;
        background: rgba(255, 255, 255, .08);
        border-radius: 16px;
        min-height: 88px;
    }

    /* remove line arrows */
    .community-item .line,
    .community-item .line::before,
    .community-item .line::after {
        display: none;
    }

    .community-wrapper {
        order: 1;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .community-item img {
        order: 2;
        width: 52px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .community-item .label {
        font-size: 22px;
        line-height: 1.1;
        font-weight: 700;
        color: #fff;
        text-align: left;
        text-align: center;
        width: 100%;
    }

    /* left side keeps icon first */
    .community-item.left {
        flex-direction: row;
    }

    /* right side same clean direction */
    .community-item.right {
        flex-direction: row;
    }

    /* hover/tap feel */
    .community-item:active {
        transform: scale(.985);
    }

}


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

    .community-section {
        min-height: auto;
        height: auto;
        overflow: hidden;
    }

    /* ===============================
   TITLE AREA
================================= */
    .community-top {
        height: auto;
        min-height: auto;
        padding: 18px 14px;
        background: #ececec;
    }

    .community-top h2 {
        font-size: clamp(26px, 8vw, 38px);
        line-height: 1.05;
        text-align: center;
    }

    .community-body {
        height: auto;
        padding: 22px 14px 28px;
        background: #007e7f;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .community-headings {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        /* flex-direction:column; */
        gap: 12px;
        align-items: center;
    }

    .left-heading {
        flex: 1;
        font-size: 17px;
        line-height: 1.15;
        text-align: right;
        font-weight: 700;
    }

    .right-heading {
        flex: 1;
        font-size: 17px;
        line-height: 1.15;
        text-align: left;
        font-weight: 700;
    }

    .heading-divider {
        width: 2px;
        height: 50px;
        min-height: 2px;
        background: rgba(255, 255, 255, .45);
    }

    .people-group {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 150px;
        margin: 4px auto 6px;
        display: block;
    }

    .community-left,
    .community-right {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        z-index: 2;
    }

    .community-right {
        margin-top: 6px;
    }

    .community-item {
        margin: 0 !important;
        background: rgba(255, 255, 255, .08);
        border: 1px solid rgba(255, 255, 255, .12);
        border-radius: 14px;
        padding: 12px 14px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        font-size: 15px;
        line-height: 1.1;
        font-weight: 700;
        backdrop-filter: blur(2px);
    }

    .community-item img {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .community-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }

    .community-item .label {
        white-space: normal;
        width: 100%;
        color: #fff;
    }

    /* decorative line */
    .community-item .line {
        width: 44px;
        height: 2px;
        background: #cdebe4;
    }

    /* remove arrows on mobile */
    .community-item .line::before,
    .community-item .line::after {
        display: none;
    }

    /* right items same style */
    .community-item.right {
        justify-content: flex-start;
    }

    .community-item.right .community-wrapper {
        align-items: flex-start;
    }

    .community-item.right .label {
        text-align: left;
    }

    /* ===============================
   SECTION LABELS
================================= */
    .community-left::before,
    .community-right::before {
        display: block;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .8px;
        color: #bfe6df;
        margin: 4px 2px 2px;
    }

    .community-left::before {
        content: "LOCATIONS & ALERTS";
    }

    .community-right::before {
        content: "STAY & SERVICES";
    }

    /* ===============================
   MICRO HOVER
================================= */
    .community-item {
        transition: transform .25s ease,
            background .25s ease;
    }

    .community-item:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, .14);
    }

    /* ===============================
   EXTRA SMALL
================================= */
    @media (max-width:380px) {

        .community-top h2 {
            font-size: 22px;
        }

        .left-heading,
        .right-heading {
            font-size: 15px;
        }

        .community-item {
            font-size: 14px;
            padding: 10px 12px;
        }

        .community-item img {
            width: 32px;
            height: 32px;
        }

        .people-group {
            width: 130px;
        }

    }

}


/* =====================================================
   SECTION 8
===================================================== */

.features-section {
    width: 100%;
    min-height: 760px;
    height: 100vh;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

/* top */
.features-top {
    height: 28%;
    min-height: 180px;
    background: #ececec;
    position: relative;
}

.features-logo {
    position: absolute;
    left: 70px;
    top: 42px;
    width: 44px;
}

.features-top h2 {
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007e7f;
    font-size: clamp(42px, 3.2vw, 60px);
    font-weight: 700;
}


/* grid */
.features-grid {
    height: 72%;
    display: grid;
    grid-template-columns: 4vw repeat(5, 1fr) 4vw;
    grid-template-rows: 1fr 1fr;
}


/* box */
.feature-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding: 4vw 1vw;
    color: #fff;
}

/* alternating colors */
.light {
    background: #007e7f;
}

.cut-right {
    background: #007e7f !important;
}

.dark {
    background: #007070 !important;
}

/* side cut columns */
.cut-left {
    background: #007e7f;
}



.features-grid> :nth-child(7),
.features-grid> :nth-child(14) {
    background: #007070;
}


/* icon */
.feature-box img {
    width: clamp(42px, 3vw, 62px);
    margin-bottom: 1vw;
}

/* text */
.feature-box p {
    margin: 0;
    text-align: center;
    width: 78%;
    font-size: clamp(18px, 1.25vw, 28px);
    line-height: 1;
    font-weight: 700;
}

/* hide filler */
.hidden {
    display: none;
}


/* =========================================
   TILE HOVER EFFECT
========================================= */

.feature-box {
    position: relative;
    /* cursor: pointer; */
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        filter .35s ease;
    z-index: 1;
}

/* lift effect */
.feature-box:hover {
    transform: translateY(-12px) scale(1.025);
    box-shadow: 0 18px 32px rgba(0, 0, 0, .18);
    z-index: 5;
}

/* icon animation */
.feature-box img {
    transition: transform .35s ease;
}

.feature-box:hover img {
    transform: translateY(-6px) scale(1.06);
}

/* text subtle brighten */
.feature-box p {
    transition: opacity .35s ease;
}

.feature-box:hover p {
    opacity: 1;
}



/* #####################################################
   TABLET : 576px - 998.98px
##################################################### */
@media (min-width:576px) and (max-width:998.98px) {

    .features-section {
        height: auto;
        min-height: auto;
        overflow: hidden;
    }

    .features-top {
        padding: 34px 20px 30px;
        background: #ececec;
    }

    .features-top h2 {
        font-size: clamp(42px, 6vw, 56px);
        line-height: 1;
        text-align: center;
        color: #007e7f;
    }

    /* grid */
    .features-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: minmax(220px, auto);
        gap: 0;
    }

    /* remove fillers visually */
    .cut-left,
    .cut-right {
        display: none !important;
    }

    /* cards */
    .feature-box {
        min-height: 220px;
        padding: 34px 18px 26px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: none;
        transition: transform .28s ease, box-shadow .28s ease;
    }

    .feature-box:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 14px 26px rgba(0, 0, 0, .16);
        z-index: 2;
    }

    .feature-box img {
        width: 58px;
        margin-bottom: 16px;
    }

    .feature-box p {
        margin: 0;
        width: 100%;
        text-align: center;
        font-size: 22px;
        line-height: 1.08;
        font-weight: 700;
    }

    /* REAL CHECKER PATTERN */
    .features-grid .feature-box:has(img):nth-of-type(odd) {
        background: #007e7f !important;
    }

    .features-grid .feature-box:has(img):nth-of-type(even) {
        background: #007070 !important;
    }

}



/* #####################################################
   MOBILE : 0 - 575.95px
##################################################### */
@media (max-width:575.95px) {

    .features-section {
        height: auto;
        min-height: auto;
        overflow: hidden;
    }

    .features-top {
        padding: 24px 14px;
        background: #ececec;
    }

    .features-top h2 {
        font-size: clamp(28px, 8vw, 42px);
        line-height: 1;
        text-align: center;
        color: #007e7f;
    }

    /* grid */
    .features-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: minmax(150px, auto);
        gap: 0;
    }

    /* remove fillers */
    .cut-left,
    .cut-right {
        display: none !important;
    }

    /* cards */
    .feature-box {
        min-height: 150px;
        padding: 22px 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: 0.5px solid #308497;
        box-shadow: none;
        transform: none !important;
        transition: none !important;
    }

    .feature-box:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .feature-box img {
        width: 42px;
        margin-bottom: 12px;
    }

    .feature-box p {
        margin: 0;
        width: 100%;
        text-align: center;
        font-size: 15px;
        line-height: 1.05;
        font-weight: 700;
    }

    /* REAL CHECKER PATTERN */
    .features-grid .feature-box:has(img):nth-of-type(odd) {
        background: #007e7f !important;
    }

    .features-grid .feature-box:has(img):nth-of-type(even) {
        background: #007070 !important;
    }

}


/* SECTION 9 */
.map-section {
    width: 100%;
    height: 100vh;
    min-height: 760px;
    max-height: 920px;
    position: relative;
    overflow: hidden;
    background: #ececec;
}

/* BACKGROUND MAP */
.map-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* WRAPPER = controls phone + panel together */
.map-wrapper {
    position: absolute;
    right: 0;
    bottom: 8%;
    width: clamp(520px, 46vw, 860px);
    height: clamp(260px, 38vh, 420px);
    z-index: 5;
}

/* PHONE */
.map-phone {
    position: absolute;
    left: 0;
    bottom: -15%;
    width: clamp(170px, 14vw, 250px);
    z-index: 7;
}

/* PANEL */
.map-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    /* width:clamp(340px, 34vw, 560px); */
    height: clamp(220px, 32vh, 360px);
    background: #007e7f;
    display: flex;
    align-items: center;
    padding: 0 4vw;
    z-index: 6;
}

/* TITLE */
.map-panel h2 {
    margin: 0;
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: .2px;
    font-size: clamp(34px, 3vw, 60px);
}

/* #####################################################
   TABLET : 576px - 998.98px
##################################################### */
@media (min-width:576px) and (max-width:998.98px){

.map-section{
    height:auto;
    min-height:720px;
    max-height:none;
    position:relative;
    overflow:hidden;
}

/* bg map */
.map-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* wrapper */
.map-wrapper{
    position:absolute;
    left:50%;
    bottom:48px;
    transform:translateX(-50%);
    width:100%;
    height:340px;
}

/* phone */
.map-phone{
    position:absolute;
    left:0;
    bottom:0;
    width:180px;
    z-index:6;
}

/* panel */
.map-panel{
    position:absolute;
    left:130px;
    right:0;
    bottom:26px;
    height:230px;
    background:#007e7f;
    padding:28px 75px;
    display:flex;
    align-items:center;
    z-index:5;
    box-shadow:0 16px 30px rgba(0,0,0,.18);
}

/* text */
.map-panel h2{
    margin:0;
    color:#fff;
    font-size:clamp(34px,4vw,48px);
    line-height:1.06;
    font-weight:700;
}

}



/* #####################################################
   MOBILE : 0 - 575.95px
##################################################### */
@media (max-width:575.95px){

.map-section{
    height:auto;
    min-height:760px;
    max-height:none;
    position:relative;
    overflow:hidden;
}

/* map */
.map-bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* stack layout */
.map-wrapper{
    position:absolute;
    left:50%;
    bottom:22px;
    transform:translateX(-50%);
    /* width:92%; */
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    height:auto;
}

/* phone centered above panel */
.map-phone{
    position:relative;
    left:auto;
    bottom:auto;
    width:135px;
    z-index:6;
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.22));
}

/* panel */
.map-panel{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    width:100%;
    height: 22vh;
    min-height:220px;
    background:#007e7f;
    padding:24px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    z-index:5;
    box-shadow:0 14px 28px rgba(0,0,0,.18);
}

/* text */
.map-panel h2{
    margin:0;
    color:#fff;
    font-size:clamp(24px,8vw,36px);
    line-height:1.08;
    font-weight:700;
}

}




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

.site-footer{
    background:linear-gradient(to bottom,#006d6e,#00595a);
    color:#ffffff;
    font-family:Arial, sans-serif;
}

/* top */
.footer-main{
    max-width:1400px;
    margin:0 auto;
    padding:70px 5% 50px;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;
}

/* columns */
.footer-col h4{
    font-size:22px;
    margin-bottom:18px;
    font-weight:700;
}

.footer-col ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-col li{
    margin-bottom:12px;
    color:#d5f1eb;
    font-size:16px;
    line-height:1.4;
}

.footer-col a{
    color:#d5f1eb;
    text-decoration:none;
    transition:.25s;
}

.footer-col a:hover{
    color:#ffffff;
}

.footer-col ul a:hover{
    padding-left:4px;
}

/* brand */
.footer-brand{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.footer-brand img{
    width:52px;
}

.footer-brand h3{
    font-size:34px;
    margin:0;
    font-weight:700;
}

.footer-tagline{
    color:#d5f1eb;
    font-size:17px;
    line-height:1.6;
    max-width:420px;
}
.footer-company-tagline{
    color:#d5f1eb;
    font-size:18;
    line-height:1.4;
    margin-top: 15px;
    max-width:420px;
}

/* bottom */
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    padding:22px 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.footer-bottom p{
    margin:0;
    color:#c9eae5;
    font-size:15px;
}

.footer-policy{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
}

.footer-policy a{
    color:#c9eae5;
    text-decoration:none;
    font-size:15px;
    transition:.25s;
}

.footer-policy a:hover{
    color:#ffffff;
}
/* app store buttons */
.store-downloads{
    margin-top:22px;
}

.store-label{
    margin:0 0 12px;
    font-size:15px;
    font-weight:600;
    color:#ffffff;
}

.store-buttons{
    display:flex;
    gap:10px;
}

.store-buttons a{
    display:inline-block;
    width:max-content;
    transition:opacity .25s ease;
}

.store-buttons a:hover{
    opacity:.95;
}

.store-buttons img{
    height:44px;
    width:auto;
    display:block;
}
/* ==========================================
   TABLET
========================================== */
@media (min-width:576px) and (max-width:998.98px){

.footer-main{
    grid-template-columns:1fr 1fr;
    gap:40px;
    padding:60px 6% 45px;
}

.footer-brand h3{
    font-size:28px;
}

.footer-col h4{
    font-size:20px;
}

}
.store-buttons img{
    height:42px;
}
/* ==========================================
   MOBILE
========================================== */
@media (max-width:575.95px){

.site-footer{
    background:linear-gradient(to bottom,#006d6e,#00595a);
}

/* layout */
.footer-main{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:26px 20px;
    padding:42px 18px 30px;
    text-align:left;
    align-items:start;
}

/* brand spans full row */
.brand-col{
    grid-column:1 / -1;
    padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

/* brand */
.footer-brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
}

.footer-brand img{
    width:40px;
}

.footer-brand h3{
    font-size:22px;
    margin:0;
    line-height:1;
}

.footer-tagline{
    margin:0;
    font-size:14px;
    line-height:1.6;
    color:#d8f1ec;
    max-width:none;
}
.footer-company-tagline{
    margin:0;
    font-size:14px;
    line-height:1.4;
    margin-top: 10px;
    color:#d8f1ec;
    max-width:none;
}

/* columns */
.footer-col h4{
    font-size:17px;
    margin:0 0 12px;
    color:#fff;
}

.footer-col ul{
    list-style:none;
    padding:0;
    margin:0;
}

.footer-col li{
    margin-bottom:8px;
    font-size:14px;
    line-height:1.45;
    color:#d5ece8;
}

.footer-col a{
    color:#d5ece8;
    text-decoration:none;
}

.footer-col a:hover{
    color:#fff;
    padding-left:0;
}

/* bottom */
.footer-bottom{
    border-top:1px solid rgba(255,255,255,.08);
    padding:16px 18px 24px;
    display:flex;
    flex-direction:column;
    gap:10px;
    text-align:center;
}

.footer-bottom p{
    margin:0;
    font-size:13px;
    color:#cde7e2;
}

.footer-policy{
    display:flex;
    justify-content:center;
    gap:14px;
    flex-wrap:wrap;
}

.footer-policy a{
    font-size:13px;
    color:#d5ece8;
    text-decoration:none;
}

.store-downloads{
    margin-top:16px;
}

.store-label{
    font-size:14px;
    margin-bottom:10px;
}

.store-buttons{
    gap:8px;
}

.store-buttons img{
    height:38px;
}

}