.ws-community-hero{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
}

.ws-community-hero .container{
    width:min(1200px,92%);
}

.ws-community-hero__content{
    max-width:500px;
    margin:0 auto;
    text-align:center;
}

.ws-community-hero__title{
    font-family:'Caveat', cursive;
    font-size:clamp(40px,4vw,64px);
    line-height:1.15;
    color:var(--primary);
    margin-bottom:20px;
}

.ws-community-hero__subtitle{
    font-family: 'Caveat',cursive;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.3;
    color: #0e606d; /*var(--dark-cyan);*/
    margin-bottom: 20px;
}

.ws-community-hero__description{
    font-size:16px;
    line-height:1.6;
    max-width:500px;
    margin-bottom:25px;
}

.ws-community__heart {
    width: 35px;
    height: auto;
    margin-left: 20px;
}

.ws-community__heart-small {
    width: 25px;
    height: auto;
    margin-left: 15px;
}

.ws-btn-community{
    
}

.ws-community-purpose{
    /*padding:40px 0;*/
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

.ws-community-purpose__grid{
    display:grid;
    grid-template-columns:4fr 5fr 4fr;
    gap:30px;
    align-items:center;
}

.ws-community-purpose__image img{
    width:100%;
    display:block;
}

.ws-community-purpose__content h2{
    font-family:'Caveat', cursive;
    font-size:clamp(30px,3vw,40px);
    line-height:1;
    color:var(--primary);
    margin-bottom:25px;
}

.ws-community-purpose__description p{
    font-size:16px;
    line-height:1.8;
    margin-bottom:25px;
}

.ws-community-purpose__tagline{
    font-family: 'Caveat',cursive;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    color: #0e606d;
}

/*.ws-community-purpose__features{
    background:#eef8f8;
    border-radius:20px;
    padding:20px;
}*/

.ws-community-purpose__features{    
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;    
    padding:50px 40px;
}

.ws-community-purpose__item{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:20px;
    font-size: 13px;
}

.ws-community-purpose__item:last-child{
    margin-bottom:0;
}

.ws-community-purpose__item i{
    width:28px;
    text-align:center;
    font-size:26px;
}

.ws-community-purpose__item span{
    font-size:14px;
}

/*--------------------------------------------------------------
# Community - How It Works
--------------------------------------------------------------*/

.ws-community-steps{
    padding:10px 0;
    /*background-repeat:no-repeat;
    background-position:right center;
    background-size:contain;*/
}

.ws-community-steps-bg{
    padding:20px 0;
    background-color: #fcf9f2;
    background-repeat:no-repeat;
    background-position:right bottom;
    background-size:contain;
    border-radius: 10px;
    margin: 0 auto;
}

.ws-community-steps .ws-steps-title{
    font-family:'Caveat', cursive;
    font-size:clamp(30px,4vw,44px);
    line-height:1.15;
    color:var(--primary);
    text-align:center;
    margin-bottom:20px;
}

.ws-community-steps .ws-section-description{
    text-align:center;
    max-width:760px;
    margin:0 auto 60px;
}

.ws-community-steps__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    width: 90%;
    margin: 0 auto;
}

.ws-community-step{
    text-align:center;
    padding: 0 30px;
}

.ws-community-step:not(:last-child){
    border-right:1px solid rgba(0,0,0,.12);
}

.ws-community-step__image{
    margin-bottom:25px;
}

.ws-community-step__image img{
    max-width:100px;
    width:100%;
    display:block;
    margin:auto;
}

.ws-community-step h3{
    font-family: 'Caveat',cursive;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1;
    color: #0e606d;
    margin-bottom:15px;
}

.ws-community-step__description{
    font-size: 14px;
    line-height: 1.4;
    padding:0 30px;
}


.ws-community-step__description p:last-child{
    margin-bottom:0;
}



/*==================================================
Community Spaces
==================================================*/

.ws-community-spaces{
    position:relative;
    padding:20px 0;
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
}

.ws-community-spaces .ws-container{
    max-width:1400px;
    margin:auto;
    padding:0;
}

/*==================================================
Section Header
==================================================*/

.ws-community-spaces .ws-section-header{
    /*max-width:760px;*/
    margin:0 auto 40px;
    text-align:center;
}

.ws-community-spaces .ws-section-header h2{
    font-family:'Caveat', cursive;
    font-size:clamp(30px,4vw,44px);
    line-height:1.15;
    color:var(--primary);
    text-align:center;
    margin-bottom:20px;
}

.ws-community-spaces .ws-section-header p{
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    margin-bottom:15px;
}

/*==================================================
Grid
==================================================*/

.ws-community-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

/*==================================================
Universal Card
==================================================*/

.ws-community-grid .ws-card{
    display:flex;
    flex-direction:column;
    height:100%;
    background:var(--card-bg);
    border-radius:10px;
    overflow:hidden;
    transition:.75s ease;
    box-shadow: none;
    padding: 0 0 20px 0;

}

.ws-community-grid .ws-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 20px rgba(0,0,0,.12);

}

/*==================================================
Image
==================================================*/

.ws-card__image{
    margin-bottom: 30px;
    overflow:hidden;
}

.ws-card__image img{
    width:100%;
    display:block;
    transition:.5s;
}

.ws-card:hover .ws-card__image img{
    transform:scale(1.05);
}

/*==================================================
Body
==================================================*/

.ws-card__body{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:0 30px;
}

.ws-card__title{
    font-family:'Caveat', cursive;
    font-size: 1.4rem;
    line-height:1.15;
    color:var(--primary);
    text-align:center;
    margin-bottom:20px;
}

.ws-card__description{
    flex:1;
    text-align:center;
    margin-bottom:10px;
    font-size: 14px;
}

/*==================================================
Button
==================================================*/

.ws-card .ws-btn{

    margin-top:auto;

    align-self:center;

}

/*==================================================
Community Specific
==================================================*/

.ws-community-card{

    background:var(--card-bg);

}


.ws-community-quote{
    min-height:var(--quote-height);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    text-align:center;
    padding:20px;
}


.ws-community-quote::before{

    content:"";

    position:absolute;

    inset:0;

    /*background:rgba(0,0,0,.35);*/

}

.ws-community-quote-mark {
    display: block;
    margin-bottom: 5px;
    color: #5e3072;
    font-family: Georgia, serif;
    font-size: 65px;
    line-height: .65;
    font-weight: 700;
    text-align: left;
}

.ws-community-quote .ws-container{
    /*position:relative;*/
    z-index:2;
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;    
    padding: 22px;
}

.ws-community__quote blockquote {
    position: relative;
    margin: 0 auto;
    max-width: 600px;
    padding-left: 45px;
    font-family:'Caveat', cursive;
    font-size: 2rem;
    line-height:1.10;
    color: #5e3072;
    font-weight: 400;
}

.ws-community__quote blockquote::before {
    content: "“";
    position: absolute;
    left: 0;
    top: -8px;
    color: var(--primary);
    font-family: Georgia, serif;
    font-size: 58px;
    line-height: 1;
    font-weight: 700;
}

.ws-community-quote h2{
    color:var(--primary);
    font-family:'Caveat', cursive;
    font-size: 2.4rem;
    line-height:1.10;
    margin-bottom:20px;
    text-align: center;
}

.ws-community-quote h4{
    color:#0e606d;
    font-family: 'Caveat', cursive;
    font-size: 1.8rem;
    font-weight:400;
    line-height:1;

}


.ws-community-cta{
    padding:20px 0;
}

.ws-community-cta .ws-container{
    display: grid;
    grid-template-columns: 4fr 5fr;
    gap: 30px;
    align-items: center;    
    position:relative;
    z-index: 2;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 22px;
}

.ws-community-cta__content{
    /*text-align: left;*/
    margin-left: 100px;
}
.ws-community-cta__button{
    /*text-align: left;*/
}

.ws-community-cta h3{
    color:#227e80;
    font-family:'Caveat', cursive;
    font-size: 2.2rem;
    letter-spacing: 0.5;
    line-height:1;
    margin-bottom:10px;
}

.ws-community-cta h4{
    color:#999;    
    font-weight:500;
}

.ws-community-cta p{
    color:#222;
    font-size: 16px;
    margin-bottom: 0;
}









/*========================
Tablet
========================*/
@media(max-width:991px){

    .ws-community-hero{
        background-position:center;
    }

    .ws-community-purpose__grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .ws-community-purpose__image{
        text-align:center;
    }

    .ws-community-purpose__image img{
        max-width:320px;
        margin:auto;
    }

    .ws-community-purpose__content{
        margin: 0 auto;
    }

    .ws-community-purpose__features{    
        background-repeat:no-repeat;
        background-position:center;
        background-size:contain;    
        padding:50px 40px;
        margin: 0 auto;
    }

    .ws-community-steps__grid{
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .ws-community-step__image img{
        max-width:110px;
    }

    .ws-community-step:not(:last-child){
        border-right:none;
    }

    .ws-community-grid{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .ws-community-spaces{
        padding:80px 0;
    }

    .ws-community-quote{
        padding:0;
    }

    .ws-community-cta .ws-container{
        grid-template-columns: 5fr 4fr;
        gap: 30px;
        padding: 22px;
    }

    .ws-community-cta__content{
        margin-left: 0;
    }    

}


/*========================
Mobile
========================*/
@media(max-width:767px){

    .ws-community-purpose{
        padding:60px 0;
    }

    .ws-community-purpose__features{
        padding:30px;
    }

    .ws-community-steps{
        padding:20px 0;
    }

    .ws-community-steps__grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .ws-community-step__image img{
        max-width:140px;
    }

    .ws-community-step{
        padding:35px 0;
        border-right:none;
        border-bottom:1px solid rgba(0,0,0,.12);
    }

    .ws-community-step:last-child{
        border-bottom:none;
    }

    .ws-community-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .ws-card__body{
        padding:25px;
    }

    .ws-community-spaces{
        padding:20px 0;
    }

    .ws-community-cta .ws-container{
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 22px;
    }

    .ws-community-cta__content{
        margin-left: 0;
    }

    .ws-community-cta__button {
        text-align: center;
    }

}