/* =========================
   HERO HEADER PROFESSIONAL
========================= */

.hero-header-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
}

/* Title Glass */
.hero-title-glass{
    padding:14px 22px;
    border-radius:20px;
    backdrop-filter:blur(14px);
    background:rgba(255,255,255,0.15);
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    max-width:70%;
}

/* Follow Glass */
.hero-follow-glass{
    padding:10px 18px;
    border-radius:20px;
    backdrop-filter:blur(14px);
    background:rgba(255,255,255,0.15);
    box-shadow:0 8px 24px rgba(0,0,0,.25);
}

/* Follow Button */
.follow-btn{
    padding:7px 18px;
    font-size:14px;
    font-weight:600;
    border-radius:50px;
    border:none;
    transition:.2s ease;
}

.follow-btn.following{
    background:transparent;
    border:1px solid #fff;
    color:#fff;
}

.follow-btn.not-following{
    background:#fff;
    color:#000;
}

.follow-count{
    font-size:13px;
    color:#fff;
    opacity:.85;
    margin-right :.2rem;
}

/* Mobile First */
@media (max-width:576px){

    .hero-header-wrapper{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .hero-title-glass,
    .hero-follow-glass{
        width:auto;
        max-width:100%;
    }

    .follow-count{
        display:none;
    }
}
/*TABS CSS*/
.profile-tabs .nav-link{
    border:none;
    font-weight:500;
    color:#555;
}

.profile-tabs .nav-link.active{
    color:#000;
    border-bottom:3px solid #000;
    background:none;
}

/*Follweres page Css*/
.followers-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.follower-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: #000;
    transition: .2s;
}

.follower-card:hover {
    transform: translateY(-2px);
}

.follower-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
}
/*cooment to post css for ntification*/
.highlight-post{
    animation: flashPost 2s ease;
}

@keyframes flashPost{
    0%{ background:#fff3cd; }
    100%{ background:transparent; }
}