/* ===========================
   PROFILE LAYOUT
=========================== */
.profile-page{

    width:min(1400px,92%);

    margin:120px auto 80px;

}

.profile-content{

    display:flex;

    flex-direction:column;

    gap:50px;

}



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

.profile-hero{

    position:relative;

    overflow:hidden;

    background:#182238;

    border-radius:24px;

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

    padding:0 40px 40px;

}

.profile-banner{

    height:220px;

    background:
        linear-gradient(135deg,#00C8FF,#C300FF);

    opacity:.15;

    margin:0 -40px;

}

.profile-avatar{

    width:170px;

    height:170px;

    margin:-70px auto 25px;

    border-radius:50%;

    overflow:hidden;

    border:5px solid #182238;

    position:relative;

    z-index:2;

}

.profile-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.profile-info{

    text-align:center;

}

.profile-info h1{

    font-size:42px;

    margin:10px 0;

}

.profile-tags{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

    margin:25px 0;

}

.profile-tags span{

    background:#24314D;

    padding:10px 18px;

    border-radius:999px;

    font-weight:600;

}

.profile-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:35px;

}