/* ==========================================================
   COMUNIDAD - KevinGeek
========================================================== */

.community-hero{

    padding:70px 0;

}

.community-title{

    text-align:center;

    margin-bottom:60px;

}

.community-title h1{

    color:#ffffff;

    font-size:48px;

    font-weight:900;

    margin-bottom:20px;

}

.community-title p{

    max-width:750px;

    margin:auto;

    color:#d4d4d4;

    font-size:18px;

    line-height:1.7;

}

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

.community-cards{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.community-card{

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(12px);

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

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.35s;

}

.community-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.35);

}

.community-logo{

    width:120px;

    height:120px;

    object-fit:contain;

    margin-bottom:20px;

}

.kick-logo{

    width:140px;

    border-radius:18px;

    margin-bottom:20px;

}

.community-card h2{

    color:white;

    font-size:28px;

    font-weight:800;

    margin-bottom:25px;

}

.community-card p{

    color:#d4d4d4;

    margin-top:25px;

    line-height:1.7;

}

.featured{

    border:2px solid #3cff74;

}

/*==========================================================
KICK
==========================================================*/

.kick-user{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-bottom:20px;

}

.kick-user span{

    color:white;

    font-size:24px;

    font-weight:800;

}

.verified{

    width:26px;

}

/*==========================================================
BOTONES
==========================================================*/

.community-btn{

    display:inline-block;

    width:100%;

    padding:15px;

    border-radius:12px;

    text-decoration:none;

    color:white;

    font-weight:700;

    transition:.3s;

}

.community-btn:hover{

    transform:scale(1.04);

    color:white;

}

.whatsapp{

    background:#25D366;

}

.kick{

    background:#53FC18;

    color:#111;

}

.kick:hover{

    color:#111;

}

.discord{

    background:#5865F2;

}

/*==========================================================
REDES
==========================================================*/

.social-section{

    padding:80px 0;

}

.social-title{

    text-align:center;

    margin-bottom:50px;

}

.social-title h2{

    color:white;

    font-size:40px;

    font-weight:800;

}

.social-title p{

    color:#cfcfcf;

}

.social-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:30px;

}

.social-item{

    text-decoration:none;

    text-align:center;

    transition:.3s;

}

.social-item:hover{

    transform:translateY(-8px);

}

.social-item img{

    width:95px;

    height:95px;

    object-fit:contain;

    background:rgba(255,255,255,.06);

    border-radius:50%;

    padding:15px;

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

}

.social-item span{

    display:block;

    margin-top:15px;

    color:white;

    font-weight:700;

}

/*==========================================================
FOOTER
==========================================================*/

.community-footer{

    margin-top:80px;

    text-align:center;

}

.community-footer h3{

    color:white;

    font-size:34px;

    font-weight:800;

    margin-bottom:15px;

}

.community-footer p{

    color:#000000;

    max-width:750px;

    margin:auto;

    line-height:1.8;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1100px){

    .community-cards{

        grid-template-columns:1fr;

    }

    .social-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:768px){

    .community-title h1{

        font-size:34px;

    }

    .social-title h2{

        font-size:30px;

    }

    .social-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:500px){

    .social-grid{

        grid-template-columns:1fr;

    }

}