@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&display=swap');


:root{
    --primary:rgb(28,28,28);
    --primary-darker:#000;
    --bg:#f5f5f5;
    --profile-bg:#fff;
    --text:#323232;
    --text-gray:#a8a8a8;
    --text-light:white;
        --text-gray-light:#f5f5f5;
--following:#098947;
--following-border:#ebebeb;
--active:#0197f6;
--tab-bg:var(--text-gray);
--tab-border:var(var(--text-gray-light));
--tab-width:7.8rem ;
--tab-gap:0rem ;
--tab-radius:0.8rem ;
--scrollbar-thumb:#f0effb;
--scrollbar-bg:#F2F6F5;



}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*:focus{
    outline: 1px solid var(--primary);
    outline-offset: 0;
}
*::selection{
    background: var(--text);
    color: var(--text-light);

}
*::-webkit-scrollbar{
    width: 0.5rem;
    height: 0.5rem;
    background: var(--bg);
    border-radius: 9.99rem;
}
*::-webkit-scrollbar-thumb{
    background: var(--text-gray);
    border-radius: 9.99rem;
}

/*            */
body {
font-family: sans-serif;
background:var(--bg); 
display: grid;
place-items: center;
height: 100vh;
flex-direction: column;
}
.profile{
background: var(--profile-bg);
padding: 0.4rem;
border-radius: 1rem;
box-shadow: 0 0 10px rgba(0, 0,0,0.1);
width: 100%;
max-width: 34rem;
min-width: 20rem;
margin: 0 auto;
gap: 0.50rem;
display: flex;
flex-direction: column;
justify-content: space-between;

}
.profile_header{
display: flex;
position: relative;    
align-items: end;
border-radius: 0.5rem;
width: 100%;
gap: 0.75rem;
min-height: 12rem; ;
background-image: url(./FB_IMG_1742694810839.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;

}
.profile_avatar_wrapper{
position: relative;
left: 2rem;
bottom: -2rem;

}
.profile_avatar{
    max-width: 6.5rem;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit:contain ;
    border-radius: 50%;
    margin: 8px auto;
    border: 3px solid var(--profile-bg);

}
.verified{
    position: absolute;
    bottom: 0.5rem;
    right: 0.25rem;
width: 1.5rem;
height: 1.5rem;
margin-right: 10px;
}
.profile_name{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.25rem;
    color: var(--text);
    margin-top: 9px;
}
.profile_name_first_row{
    display: flex;
    gap: 0.5rem;
}
.profile_name h2{
    display: flex;
    align-items: center;
    font-size: 1.15rem;
    gap: 0.5rem;
}

.profile_name p{
    
    color: var(--text-gray);
    font-size: 1.05rem;
}
.profile_location{
    display: flex;
    align-items: center;
    margin-left: 1.5rem;
    white-space: nowrap;
    font-style: normal;
    font-size: 0.9rem;
    gap: 0.25rem;
    color: var(--text-gray);
    transition: all 3s ease-in;

}
.profile_location :hover{
    color: var(--active);
}
.profile_location:hover svg {
    stroke: var(--active);
}

.following{
    border: 3px solid var(--following-border);
    border-radius: 0.25rem;
    padding: 0.25rem  0.5rem ;
    display: flex;
    font-size: 1rem;
    align-items: center;
    color: var(--following);
gap: 0.5rem;
}
.following .circle{
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--following);

}
.highlights{
    display: flex;
flex-wrap: wrap;
background-image: linear-gradient(to right, var(--text-gray) 33%,rgba(255,255,255,0) 0%);
background-position: bottom;
background-size:3px 1px ;
background-repeat:repeat-x ;
gap: 0.5rem 0.25rem;
padding-bottom: 1rem;
list-style-type: none;



}
.highlights .highlight{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 6rem;
    font-size: 1.1rem;

}
.highlight_name{
    color: var(--text-gray);
    font-size: 0.9rem;
}
.profile_about h3 {
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
}
.profile_about p {
    font-size: 1.2rem;
    margin-bottom: 30PX;
    
}
.profile_about_bottom{
width: 100%;
margin-top: 1.5rem;
display: flex;
justify-content: space-between;
gap: 0.25rem;

}

.social-links{
    display: flex;
    width: 100%;
    align-items: center;
    list-style-type: none;
    gap: 0.25rem;

}
.social-links a svg {
    stroke: var(--text);
    transition: stroke 0.3s ease-in;
}

.social-links a:hover svg {
    stroke: var(--active);
}

.btn{
    color: var(--primary);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    width: 100%;
    font-size: 1rem;
    font-weight: 600;
    min-height: 3rem;
    border: 1px solid var(--primary);
    cursor: pointer;
    transition: all 0.3s;
}
.btn--primary{
    background: transparent;
}
.btn--primary:hover{
    height: 1px solid var(--active);
    color: var(--active);
}
.profile main{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}
.tabs-wrapper{
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.tabs{
position: relative;
display: flex;
margin-top: 0.5rem;
gap: var(--tab-gap);
border: 1px solid var(--tab-border);
border-radius: 0.3rem;
min-height: 3rem;
list-style-type: none;
}


.logoo{
    width: 30px ;
    height: 30px;
    margin-right: 5px;
}



.experience h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.experience ul {
  list-style: none;
  padding-left: 0;
}

.experience li {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}



.verified-icon {
      color: #1da1f2;
      font-size: 18px;
background-color: #e6f4ff;
padding: 2px 6px;
border-radius: 50%;

    }
    .verified-badge{
      position: absolute;
       bottom: 15px; 
       right: 15px;
        width: 20px;
         height: 20px;
         border-radius: 50%;
    }

span2{
    font-size: 18px;
    color: #145c0d;
    transition:background 0.1s ease ;
cursor: pointer;
}
span2:hover{
    color: #78df6f;
}






.container {
    position: relative;
    background: url('https://www.transparenttextures.com/patterns/old-wall.png'); 
    border-radius: 12px;
    height: 200px;
    width: 100%;
    overflow-y: scroll;
    /* padding: 15px; */
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.35);
    border: 4px solid #8b5e3c;
}

h1 {
    font-size: 22px;
    font-weight: 700;
    padding: 8px 0;
    text-align: center;
    color: #3a1f14;
}

.sticky {
    background: #b88c64;
    position: sticky;
    top: 0;
    padding: 8px;
    text-align: center;
    color: #25140d;
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
    border-bottom: 3px solid #693c27;
  
}

.sticky:hover {
    background: #9e7351;
    transform: scale(1.03);
}




.container::-webkit-scrollbar {
    width: 10px; 
}


.container::-webkit-scrollbar-track {
    background: #3a1f14; 
    border-radius: 5px;
}


.container::-webkit-scrollbar-thumb {
    background: #b88c64; 
    border-radius: 5px;
    border: 2px solid #8b5e3c;
}
.social-icons {
  display: flex;
  gap: 15px;
  justify-content: start;
  margin: 20px 0;
}

.social-icons a {
  color: #09090c;
  font-size: 24px;
  transition: color 0.3s ease;
  text-decoration: none;
  margin-right: 10px;
  margin-left: 20px;
}

.social-icons a:hover {
  color: #afaaaa;
  
}



.location{
    display: flex;
    justify-content: end;
    margin-right: 30px;
    color: #555;
    font-size: 14px;
    margin-top: 10px;
}
.location i span{
    margin-right: 6px;
color:#888;

}