.contact-hub{
    position:relative;
    overflow:hidden;
}

.contact-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(140px);
    pointer-events:none;
}

.contact-glow--one{
    width:450px;
    height:450px;
    background:rgba(210,243,65,.08);
    top:-150px;
    right:-120px;
}

.contact-glow--two{
    width:400px;
    height:400px;
    background:rgba(210,243,65,.06);
    bottom:-120px;
    left:-120px;
}

.contact-hero{
    text-align:center;
    max-width:850px;
    margin:auto;
    margin-bottom:80px;
}

.contact-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:12px 20px;

    border-radius:999px;

    background:rgba(210,243,65,.08);

    border:1px solid rgba(210,243,65,.15);

    color:#d2f341;

    margin-bottom:25px;
}

.contact-hero h1{
    color:#fff;
    font-size:clamp(42px,5vw,72px);
    font-weight:900;
    margin-bottom:25px;
}

.contact-hero p{
    color:rgba(255,255,255,.75);
    line-height:2;
}

.contact-methods{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;

    margin-bottom:100px;
}

.contact-card{
    text-align:center;

    padding:35px 25px;

    border-radius:28px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(210,243,65,.1);

    transition:.35s;

    
}

.contact-card,
.contact-card:link,
.contact-card:visited{
    color:#fff;
    text-decoration:none;
}

.contact-card:hover,
.contact-card:focus,
.contact-card:active{
    color:#fff;
    text-decoration:none;
}
.contact-card:hover{
    transform:translateY(-10px);

    border-color:rgba(210,243,65,.35);

    box-shadow:0 0 35px rgba(210,243,65,.1);
}

.contact-card__icon{
    width:75px;
    height:75px;

    margin:auto auto 20px;

    border-radius:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(210,243,65,.08);

    color:#d2f341;

    font-size:28px;
}

.contact-card h3{
    color:#fff;
    margin-bottom:12px;
}

.contact-card p{
    color:rgba(255,255,255,.7);
}

.social-section{
    margin-bottom:90px;
}

.social-section__header{
    text-align:center;
    margin-bottom:40px;
}

.social-section__header span{
    color:#d2f341;
}

.social-section__header h2{
    color:#fff;
    margin-top:10px;
}

.social-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
}

.social-card{
    height:90px;

    border-radius:22px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(210,243,65,.1);

    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    color:#fff;

    transition:.3s;
}

.social-card:hover{
    transform:translateY(-6px);

    border-color:rgba(210,243,65,.3);

    color:#d2f341;
}

.social-card i{
    font-size:24px;
}

.feedback-box{
    text-align:center;

    padding:70px 40px;

    border-radius:32px;

    margin-bottom:90px;

    background:linear-gradient(
        135deg,
        rgba(210,243,65,.08),
        rgba(255,255,255,.02)
    );

    border:1px solid rgba(210,243,65,.15);
}

.feedback-box__icon{
    width:90px;
    height:90px;

    margin:auto auto 25px;

    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(210,243,65,.08);

    color:#d2f341;

    font-size:34px;
}

.feedback-box h2{
    color:#fff;
    margin-bottom:15px;
}

.feedback-box p{
    color:rgba(255,255,255,.75);
    max-width:700px;
    margin:auto auto 30px;
}

.feedback-btn{
    display:inline-flex;

    padding:14px 28px;

    border-radius:14px;

    background:#d2f341;

    color:#111;

    font-weight:700;
}

.contact-cta{
    text-align:center;
}

.contact-cta h2{
    color:#fff;
    margin-bottom:15px;
}

.contact-cta p{
    color:rgba(255,255,255,.75);
    margin-bottom:25px;
}

.contact-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:15px 28px;

    border-radius:16px;

    background:#d2f341;

    color:#111;

    font-weight:700;
}

.contact-cta-btn:hover{
    transform:translateY(-4px);
}

@media(max-width:991px){

    .contact-methods{
        grid-template-columns:1fr;
    }

    .contact-hero h1{
        font-size:42px;
    }

}