*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

body{
background:#0b0b0b;
color:white;
transition:.3s;
}

body.light{
background:#ffffff;
color:black;
}

a{
text-decoration:none;
color:#00c896;
}

.container{
width:100%;
max-width:1100px;
margin:auto;
padding:20px;
}

.card{
background:#111;
border-radius:20px;
padding:20px;
margin-top:20px;
}

body.light .card{
background:#f1f1f1;
}

input,
textarea{
width:100%;
padding:14px;
margin-top:12px;
border:none;
border-radius:12px;
background:#1b1b1b;
color:white;
}

body.light input,
body.light textarea{
background:white;
color:black;
border:1px solid #ddd;
}

button{
background:#00c896;
color:black;
border:none;
padding:14px 20px;
border-radius:12px;
cursor:pointer;
font-weight:bold;
margin-top:15px;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px;
background:#111;
position:sticky;
top:0;
z-index:100;
}

body.light .nav{
background:#f1f1f1;
}

.cover{
height:220px;
border-radius:25px;
background-size:cover;
background-position:center;
position:relative;
overflow:hidden;
}

.profile-section{
margin-top:-55px;
padding:0 20px;
position:relative;
z-index:5;
}

.profile-top{
display:flex;
align-items:flex-end;
gap:20px;
flex-wrap:wrap;
}

.profile-pic{
width:130px;
height:130px;
border-radius:50%;
border:5px solid #0b0b0b;
object-fit:cover;
background:#00c896;
box-shadow:0 4px 20px rgba(0,0,0,0.4);
}

body.light .profile-pic{
border:5px solid white;
}

.profile-pic{
width:140px;
height:140px;
border-radius:50%;
border:5px solid #0b0b0b;
object-fit:cover;
background:#00c896;
}

body.light .profile-pic{
border:5px solid white;
}

.stats{
display:flex;
gap:20px;
margin-top:15px;
flex-wrap:wrap;
}

.stat-box{
background:#181818;
padding:15px;
border-radius:15px;
min-width:120px;
text-align:center;
}

body.light .stat-box{
background:#e7e7e7;
}

.post{
background:#111;
padding:20px;
border-radius:20px;
margin-top:20px;
}

body.light .post{
background:#f1f1f1;
}

.post img,
.post video{
width:100%;
border-radius:15px;
margin-top:15px;
max-height:600px;
object-fit:cover;
}

.top-buttons{
display:flex;
gap:10px;
flex-wrap:wrap;
}

.hidden{
display:none;
}

#mentorName{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}

.verified-badge{
display:inline-flex;
align-items:center;
justify-content:center;

width:22px;
height:22px;

border-radius:50%;

background:#00c896;

color:white;

font-size:13px;
font-weight:bold;

box-shadow:0 0 10px rgba(0,200,150,0.35);

transform:translateY(-1px);
}

/* VERIFIED POPUP */

.verified-popup{
position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.75);

display:flex;
align-items:center;
justify-content:center;

padding:20px;

z-index:99999;
}

.verified-card{
width:100%;
max-width:420px;

background:#181818;

padding:28px;

border-radius:25px;

text-align:center;

border:1px solid #2a2a2a;

box-shadow:0 20px 60px rgba(0,0,0,.4);
}

.verify-icon{
width:70px;
height:70px;

margin:auto;
margin-bottom:18px;

border-radius:50%;

background:#00c896;

display:flex;
align-items:center;
justify-content:center;

font-size:30px;
font-weight:bold;
}

.verified-card h2{
margin-bottom:18px;
font-size:26px;
}

.verified-text{
opacity:.85;
line-height:1.8;
font-size:15px;
}

.contact-box{
margin-top:22px;

background:#111;

padding:16px;

border-radius:16px;

font-size:14px;
line-height:1.8;
}

.verified-buttons{
display:flex;
gap:12px;
margin-top:24px;
}

.subscribe-btn{
flex:1;

background:#00c896;
color:white;

border:none;

padding:14px;

border-radius:14px;

font-weight:bold;
cursor:pointer;
}

.later-btn{
flex:1;

background:transparent;
color:white;

border:1px solid #333;

padding:14px;

border-radius:14px;

cursor:pointer;
}

@media(max-width:700px){

.profile-top{
flex-direction:column;
align-items:flex-start;
}

.profile-pic{
width:110px;
height:110px;
}

.cover{
height:180px;
}

}