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

.community-hero{

    position:relative;

    min-height:auto;

    background:
        linear-gradient(
            135deg,
            #07101f 0%,
            #10243c 55%,
            #17304f 100%
        );

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:55px 20px 65px;

    overflow:hidden;

}

.community-hero::before{

    content:none;

}

.community-hero-visual{

    width:min(900px,100%);

    border-radius:26px;

    overflow:hidden;

    background:#081426;

    border:1px solid rgba(200,169,107,.35);

    box-shadow:
        0 25px 70px rgba(0,0,0,.35);

}

.community-hero-visual img{

    display:block;

    width:100%;

    height:auto;

}

.hero-overlay{

    margin-top:25px;

    padding:18px 24px;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            rgba(7,16,31,.72),
            rgba(23,48,79,.72)
        );

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(12px);

    box-shadow:
        0 16px 40px rgba(0,0,0,.25);

}

.hero-buttons{

    display:flex;

    gap:22px;

    justify-content:center;

    flex-wrap:wrap;

}

.hero-buttons .btn-primary{

    min-width:260px;

}

.hero-buttons .btn-outline{

    min-width:240px;

    color:#fff;

    border:2px solid #fff;

}

.hero-buttons .btn-outline:hover{

    background:#fff;

    color:#17304f;

}

.community-section{
    padding:100px 20px;
}

.group-grid{
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
}

.group-card{

    position:relative;

    overflow:hidden;

    background:#fff;

    padding:45px;

    border-radius:28px;

    border:1px solid rgba(200,169,107,.18);

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.group-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:
        linear-gradient(
            90deg,
            #c8a96b,
            #f3d08d
        );

}

.group-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 30px 60px rgba(0,0,0,.12);

}

.group-card h3{
    color:#17304f;
    margin-bottom:20px;
}

.group-card p{
    margin-bottom:25px;
}

.group-card.premium{
    background:
    linear-gradient(
        135deg,
        #17304f,
        #244a76
    );

    color:white;
}

.group-card.premium h3{
    color:#f5d18d;
}

.community-cta{
    background:
    linear-gradient(
        135deg,
        #17304f,
        #244a76
    );

    color:white;
    text-align:center;
    padding:120px 20px;
}

.community-groups{

    padding:120px 20px;

    background:#f8f4ee;

}

@media(max-width:768px){

    .community-hero{

        padding:35px 15px 45px;

    }

    .community-hero-visual{

        border-radius:18px;

    }

    .hero-overlay{

        width:100%;

        border-radius:18px;

        padding:15px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons a{

        width:100%;

        max-width:320px;

    }

}