/* ==========================================================
   BUTTONS
========================================================== */

.btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:var(--borough-green);
    color:var(--white);

    padding:15px 32px;

    border:none;
    border-radius:12px;

    font-weight:700;
    text-decoration:none;

    transition:.25s ease;
}

.btn-primary:hover{
    background:var(--borough-navy);
    transform:translateY(-2px);
}

.btn-secondary{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:var(--borough-navy);
    color:var(--white);

    padding:15px 32px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:.25s;
}

.btn-secondary:hover{

    background:var(--borough-green);

}

.btn-gold{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:var(--borough-gold);
    color:var(--borough-navy);

    padding:15px 32px;

    border-radius:12px;

    text-decoration:none;

    font-weight:700;

    transition:.25s;

}

.btn-gold:hover{

    transform:translateY(-2px);

}

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

.card{

    background:white;

    border-radius:22px;

    box-shadow:var(--shadow-soft);

    overflow:hidden;

    transition:.25s;

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:var(--shadow-card);

}

.card-bordered{

    border-top:6px solid var(--borough-green);

}

.card-gold{

    border-top:6px solid var(--borough-gold);

}

.card-padding{

    padding:36px;

}

/* ==========================================================
   ICON CIRCLE
========================================================== */

.icon-circle{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--light-green);

    color:var(--borough-green);

    font-size:30px;

    margin-bottom:24px;

}

/* ==========================================================
   BADGES
========================================================== */

.badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:var(--borough-gold);

    color:var(--borough-navy);

    font-size:12px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.08em;

}

/* ==========================================================
   TITLES
========================================================== */

.title-xl{

    font-size:62px;

    line-height:1.05;

    font-weight:800;

}

.title-lg{

    font-size:44px;

    line-height:1.15;

    font-weight:700;

}

.title-md{

    font-size:30px;

    line-height:1.3;

    font-weight:700;

}

/* ==========================================================
   TEXT
========================================================== */

.text-muted{

    color:var(--text-muted);

    line-height:1.8;

}

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

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(21,59,82,.92),
        rgba(21,59,82,.55),
        rgba(21,59,82,.10)
    );

}

/* ==========================================================
   LINKS
========================================================== */

.link-arrow{

    color:var(--borough-green);

    font-weight:700;

    text-decoration:none;

}

.link-arrow:hover{

    color:var(--borough-navy);

}

/* ==========================================================
   SECTION DIVIDERS
========================================================== */

.section-divider{

    width:90px;

    height:4px;

    margin:18px auto 40px;

    background:var(--borough-gold);

    border-radius:999px;

}