:root {
    --welcome-bg: #68a782;
    --welcome-card: #34503d;
    --welcome-border: #94d2ae;
}        
.wrapper {
    background-color: var(--welcome-bg);
    margin: 60px 0 0;
    padding: 44px 0;
}
.global-footer {
    margin: 0;
}
.card {
    background: var(--welcome-card);
    border: 1px solid var(--welcome-border);
    border-radius: 18px;
    color: var(--muted);
    padding: 24px;
    box-shadow: 0 8px 12px rgb(52 80 61 / 70%), inset 0 1px 0 rgba(255, 255, 255, .03);
}
.card p {
    color: var(--white);
    font-size: 16px;
}
.card-secondary {
    background: rgb(104 167 130 / 20%);
    border: 1px solid rgb(148 210 173 / 50%);
}
.hero {
    border: 1px solid #94d2ae;
    display: grid;
    gap: 14px;
    padding: 44px;
}
.hero h1 { margin: 0; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.05; font-weight: 700; color: var(--white); text-align: center; text-transform: uppercase; }
.hero h2 { margin: 0 0 24px; font-size: clamp(34px, 2.6vw, 44px); font-weight: 600; color: var(--white); color: var(--white); text-align: center; text-transform: uppercase; }
.promo { 
    display: grid; 
    gap: 18px; 
    position: relative;
}
.card .pill {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    padding: 18px 14px; 
    border-radius: 12px; 
    border: 1px solid rgb(148 210 173 / 50%); 
    background: rgb(104 167 130 / 20%);
    color: var(--white); 
    text-align: center;
    text-transform: uppercase;
}
.card .pill p {
    font-weight: 500; 
    font-size: 20px;
    margin: 0;
}
.section-title { font-size: 26px; margin: 0 0 18px; font-weight: 600; color: var(--white); }
.card ul { padding-left: 18px; margin: 12px 0 0; color: var(--white); font-size: 16px; }
.card li { margin: 8px 0; }
.card .cta {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    margin: 26px 0 12px;
    padding: 28px 0 0;
    border-top: 1px solid rgb(148 210 173 / 50%);
}
.card .cta-text { 
    color: var(--white);
    font-size: 22px;
    text-align: center;
    max-width: 71rem;
}
.card .btn {
    color: #052e1c;
    background: #c9fedf;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 6px 20px rgb(104 167 130 / 80%);
    transition: transform .05s ease, filter .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.card .btn:hover { 
    background: #addec3;
    box-shadow: 0 8px 28px rgb(104 167 130 / 90%); 
}
.card .btn:active { 
    transform: translateY(1px); 
}
.team-img {
    width: 100%;
    max-width: 11rem;
    z-index: 1;
}
.team-img-jess {
    max-width: 12.2rem;
    position: relative;
    top: 7px;
}
.team-imgs-wrapper {
    display: flex;
    justify-content: center;
}
.team-img-wrapper {
    align-items: flex-end;
    display: flex;
    position: relative;
}
.team-img-shadow {
    background: radial-gradient(closest-side, #0a160e 30%, transparent 100%) no-repeat;
    bottom: -3px;
    height: 32px;
    left: calc(50% - 34px);
    opacity: .6;
    position: absolute;
    width: 80px;
    z-index: 0;
}
.bird-img {
    max-width: 80px;
    position: absolute;
    right: 32px;
    top: -55px;
}
.bird-img-two {
    max-width: 76px;
    position: absolute;
    left: 64px;
    top: -57px;
    transform: rotateY(180deg);
}
@media(max-width: 767px) {
    .wrapper {
        margin: 60px 0 0;
        padding: 30px 0;
    }
    .hero {
        padding: 32px 14px 14px;
    }
    .hero h2 {
        margin: 0 auto 12px;
        max-width: 26rem;
    }
    .hero .btn {
        width: 100%;
    }
    .team-imgs-wrapper {
        margin: 0 0 24px;
    }
    .bird-img {
        max-width: 70px;
        right: 0;
        top: -48px;
    }
    .bird-img-two {
        max-width: 70px;
        left: 0;
        top: -52px;
    }
    .promo {
        margin-top: 40px;
    }
}
@media(max-width: 465px) {
    .card .btn {
        font-size: 20px;
        white-space: normal;
    }
}