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

.city-hero{
    padding:190px 0 110px;

    background:
    linear-gradient(
        180deg,
        #f7f7f7 0%,
        #ffffff 100%
    );
}

.city-breadcrumb{
    margin-bottom:1rem;

    font-size:.9rem;
    font-weight:600;
    letter-spacing:.08em;

    color:#67b86d;
}

.city-title{
    max-width:850px;

    margin-bottom:1.5rem;

    font-size:4rem;
    line-height:1.08;
    font-weight:800;

    color:#111111;
}

.city-description{
    max-width:760px;

    font-size:1.08rem;
    line-height:1.9;

    color:#555555;
}

.city-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:2.2rem;

    height:58px;
    padding-inline:2rem;

    border-radius:999px;

    text-decoration:none;

    background:#67b86d;

    font-size:.95rem;
    font-weight:700;

    color:#ffffff;

    transition:
    transform .25s ease,
    background .25s ease;
}

.city-button:hover{
    background:#58a75e;

    transform:translateY(-2px);
}

/* =========================
   MAIN CONTENT
========================= */

.city-content{
    padding:120px 0;
}

.city-wrapper{
    display:grid;
    grid-template-columns: minmax(0,2fr) 380px;

    align-items:start;

    gap:4rem;
}

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

.city-main h2{
    margin-top:4rem;
    margin-bottom:1.3rem;

    font-size:2.2rem;
    line-height:1.2;
    font-weight:800;

    color:#111111;
}

.city-main h2:first-child{
    margin-top:0;
}

.city-main p{
    margin-bottom:1.7rem;

    font-size:1.02rem;
    line-height:1.95;

    color:#555555;
}

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

.city-list{
    display:grid;
    grid-template-columns: repeat(2,1fr);

    gap:1rem 2rem;

    padding:0;
    margin:2rem 0;

    list-style:none;
}

.city-list li{
    position:relative;

    padding-left:1.8rem;

    font-size:1rem;
    line-height:1.7;

    color:#444444;
}

.city-list li::before{
    content:"";

    position:absolute;

    left:0;
    top:.62rem;

    width:9px;
    height:9px;

    border-radius:50%;

    background:#67b86d;
}

/* =========================
   AREAS
========================= */

.city-areas{
    display:flex;
    flex-wrap:wrap;

    gap:1rem;

    margin-top:2rem;
}

.city-areas span{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:.9rem 1.2rem;

    border-radius:999px;

    background:#f4f4f4;

    font-size:.92rem;
    font-weight:600;

    color:#333333;
}

/* =========================
   FAQ
========================= */

.city-faq{
    display:flex;
    flex-direction:column;

    gap:1.5rem;

    margin-top:2rem;
}

.faq-item{
    padding:2rem;

    border-radius:24px;

    background:#f8f8f8;
}

.faq-item h3{
    margin-bottom:.8rem;

    font-size:1.1rem;
    font-weight:700;

    color:#111111;
}

.faq-item p{
    margin:0;
}

/* =========================
   SIDEBAR
========================= */

.city-sidebar{
    position:sticky;

    top:120px;

    display:flex;
    flex-direction:column;

    gap:1.5rem;
}

.city-card{
    padding:2rem;

    border-radius:28px;

    background:#f8f8f8;
}

.city-card h3{
    margin-bottom:1rem;

    font-size:1.2rem;
    font-weight:800;

    color:#111111;
}

.city-card p{
    line-height:1.8;

    color:#555555;
}

.city-sidebar-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    margin-top:1.3rem;

    height:52px;
    padding-inline:1.6rem;

    border-radius:999px;

    text-decoration:none;

    background:#67b86d;

    font-size:.92rem;
    font-weight:700;

    color:#ffffff;

    transition:
    transform .25s ease,
    background .25s ease;
}

.city-sidebar-button:hover{
    background:#58a75e;

    transform:translateY(-2px);
}

/* =========================
   CTA
========================= */

.city-cta{
    padding:100px 0;

    background:#101010;

    text-align:center;
}

.city-cta h2{
    margin-bottom:1.5rem;

    font-size:3rem;
    line-height:1.1;
    font-weight:800;

    color:#ffffff;
}

.city-cta p{
    max-width:760px;

    margin:0 auto 2rem;

    font-size:1.05rem;
    line-height:1.9;

    color:rgba(255,255,255,.72);
}

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

@media (max-width: 1000px){

    .city-wrapper{
        grid-template-columns:1fr;
    }

    .city-sidebar{
        position:relative;
        top:auto;
    }

}

@media (max-width: 768px){

    .city-hero{
        padding:100px 0 70px;
    }

    .city-title{
        font-size:2.6rem;
    }

    .city-content{
        padding:70px 0;
    }

    .city-main h2{
        font-size:1.8rem;
    }

    .city-list{
        grid-template-columns:1fr;
    }

    .city-cta{
        padding:80px 0;
    }

    .city-cta h2{
        font-size:2.2rem;
    }

}