@font-face {
    font-family: "Noto";
    src: url("noto//Noto_Sans/NotoSans-VariableFont_wdth\,wght.ttf") format("truetype") ;
}
@font-face {
    font-family: "Noto fars";
    src: url("noto/Noto_Sans_Arabic/NotoSansArabic-VariableFont_wdth\,wght.ttf") format("truetype") ;
}
*{
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    font-family: "Noto" , "Noto fars";
    scrollbar-width: none;
}
body{
    --black:black;
    --gray:#e9e9e9;
    /* --border:#bed6e4; */
    --border:#d4d4d4;
    --box:#ff0000;
    --text:rgb(105, 105, 105);
    --bkg:#ffffff;
   --white:white;
    /* --blue:hsl(209, 90%, 54%); */
    /* --blue:#1496ec; */
    /* --blue: #0e95e2;  */
    --blue:#3992eb;
    --red:hwb(0 28% 0%);
    background-color: var(--bkg); 
}
::-webkit-scrollbar{
    display: none;
}
main{
   /* max-width: 550px; */
    /* margin-top: -6px;
    margin-bottom: 100px; */
}


.p-icon{
    position: absolute;
    top: 146px;
    z-index: 300;
    right: 61px;
    background-color: var(--white);
}
.p-icon svg{
    /* fill: none; */
    /* stroke: black; */
    /* stroke-width: 3.4; */
    /* position: absolute; */
    /* z-index: 33000; */
}

.p-1{
    width: 14px;
    position: absolute;
    top: 10px;
    left: -10px;
}
.p-2{
    width: 18px;
    position: absolute;
    top: -22px;
    left: 5px;
}

.p-3{
    width: 15px;
    position: absolute;
    top: -23px;
    left: -30px;
}

.p-4{
    width: 18px;
    position: absolute;
    top: 10px;
    left: -50px;
}

.p-5{
    width: 17px;
    position: absolute;
    top: 41px;
    left: 10px;
}


.p-6{
    width: 16px;
    position: absolute;
    top: 38px;
    left: -30px;
}

.p-7{
    width: 17px;
    position: absolute;
    top: -20px;
    left: -60px;
}

.p-8{
    width: 10px;
    position: absolute;
    top: 30px;
    left: -70px;
    display: none;
}

.p-9{
    width: 14px;
    position: absolute;
    top: 18px;
    left: 30px;
}

.p-10{
    width: 13px;
    position: absolute;
    top: -8px;
    left: 30px;
}



.profile-all-container{
   max-width:750px;
    height: 100%;
    /* overflow: hidden; */
    min-height: 1100px;
    --profile-gray:rgb(97, 97, 97);
    /* --profile-gray:white; */
    position: relative;
    border: 1px solid var(--border);
    /* background-color: red; */
    /* border-radius: 15px 15px 0px 0px; */
    /* background-color: red; */
}
.profile-all-container li{
    list-style-type: none;
}
.profile-all-container a{
    text-decoration: none;
}
.profile-card-container{
    width: 100%;
    height: 100%;
    position: relative;


    /* background:radial-gradient(circle at  left , rgb(242, 247, 251)  30%, rgb(166, 216, 245)); */
/* 

    background:radial-gradient(circle at  left , #f9faff  30%, #8eafc7); */

    /* background:radial-gradient(circle at  left , #fefcff  30%, #b87df8); */

    /* background:radial-gradient(circle at  left , rgb(238, 255, 249)  30%, rgb(104, 230, 194)); */



   
}
.porofile-header-container{
    width: 100%;
    height: auto;
}
.profile-bkg-color-card-container{
    width: 100%;
}
.profile-poster-card-container{
    width: 100%;
    height: auto;
    position: relative;
}
.profile-poster-card-container img{
    width: 100%;
    height: 120px;
    object-fit: cover;
    object-position: center;
}
.profile-user-image-card-container{
    padding: 0px 17px;
    display: flex;
    justify-content:left;
    object-fit: cover;
    /* margin-top: 63px; */
}
.profile-user-image-card-container img{
    width: 5.96rem;
    height: 5.96rem;
    border-radius: 50%;
    border: 3px solid  rgb(255, 248, 248);
    position: relative;
    top: -49px;
    /* object-fit: cover; */
    /* display: flex;
    justify-content: center; */
    object-fit: cover;
}

.profile-card-tow-container{
    width: 100%;
    /* height: 100%; */
    margin-top: -42px;
    padding: 0px 19px;
}
.profile-info-card-container{
    width: 100%;
    height: auto;
    position: relative;
    top: -1px;
}
.porofile-name-card-container{
    display: flex;
    gap: 3px;
}
#profile-name{
    font-size: 1.28rem;  
    font-weight:bold;  
    -webkit-text-stroke-width: .4px;
    text-transform: capitalize;
    color: var(--black);
}

#profile-tick-one{
    fill: rgb(20, 133, 238);
    width:1.36rem;
    height:1.36em;
   
    /* border: .1px solid white; */

    position: relative;
    top: 3.8px;
    /* left: 1px; */
    


    /* background-color: white; */
    border-radius: 100px;

 }
 #profile-username{
    font-size: 1.08rem;
    font-weight: 530;
    color: var(--profile-gray);
    margin-top: 2px;
    text-align: left;
 }
.profile-bio-card-container{
    margin-top: 10px;
}

#profile-text:lang(lang){
    text-align:left;
}
#profile-text{
    font-size:.99rem;
    font-weight: 540;
    color: var(--black);
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.5;
}
.profile-all-content-container{
    margin-top: -12px;
}
.profile-birthday-card {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}
.profile-birthday-card svg{
    fill: none;
    stroke: var(--profile-gray);
    stroke-width: 1.5;
    width: 20.1px;
}
.profile-birthday-card p{
    color: var(--profile-gray);
    font-size: 0.88rem;
    font-weight: 490;
    position: relative;
    top: 1.5px;
}

.profile-conntent-card{
    display: flex;
    gap: 10px;
    align-items: center;
 }
.profile-conntent-card p{
    font-size: 0.88rem;
    font-weight: 480;
    color: var(--profile-gray);
    position: relative;
    top: -1px;
}
.profile-conntent-card svg{
    fill: none;
    stroke-width: 2;
    stroke: var(--profile-gray);
}
.profile-location{
    display: flex;
    gap: 4px;
}
.profile-location svg{
    stroke-width: 1.95;
    width: 18.5px;
}
.profile-info-dot{
    font-size: 12.2px;
    position: relative;
    top: .5px;
    color: var(--profile-gray);
   
}
.profile-web{
    position: relative;
    display: flex;
    gap: 4px;
    cursor: pointer;
}
.profile-web svg{
    width: 18.6px;
    stroke: var(--blue);
    stroke-width: 2.2;
}
.profile-web p{
    color: var(--blue);
    font-weight: 500;
    position: relative;
    top: -2.2px;
}

.profile-follow-card-container{
    display: flex;
    gap: 10px;
    margin-top:13px;
    padding-bottom: 13px;
}
.profile-follow-card-container p:nth-child(2){
    font-size: 12.1px;
    position: relative;
    top: 5px;
    color: var(--profile-gray);
}
.profile-follow-card-container span{
    font-weight: 650;
    color: var(--black);
    font-size: 0.99rem;
}
.profile-follow-card-container p{
    font-size: 0.87rem;
    font-weight: 460;
    color:var(--profile-gray);
}



.profile-button-follow-card-container{
    /* width: 100%;
    height: 100%; */
    /* width: 100%;
    height: 100%; */
    display: flex;
    gap: 10px;
    margin-top: 1px;
}
.profile-button-follow-card-container button{
    height: 37px;
}


.profile-button-follow{
   
    max-width: 260px;
    width: 100%;
    background-color: var(--blue);
    border:  none;
    outline: none;
    border-radius: 1100px;
    color: var(--white);
    font-size: 0.931rem;
    font-weight: 670;

    background:linear-gradient(to right , rgb(131, 139, 142), rgb(13, 166, 255));
    /* background-size: 300% 300%; */
    /* animation: gradientBG 8s ease infinite; */
    border:  .2px solid var(--black);
    -webkit-text-stroke-width: .1px;
    position: relative;
  
}


.profile-button-follow p::before{

    content: 'Follow';
}



.profile-button-follow-card-container p.followed{

    width: 100%;
    height: 100%;
}

.profile-button-follow-card-container p.followed::before{
    content: 'Following';
    position:relative;
    color: white;
    top: 7px;

}
.profile-button-follow-card-container .followed{
    background:linear-gradient(to right , rgb(183, 214, 240), rgb(30, 150, 255));
    border-radius: 1100px;
}





.profile-button-edit-prfoile{
    /* width:  70%; */
    max-width: 272px;
    width: 100%;
    padding:5.5px 0px;
    display: flex;
    justify-content: center;
    gap: 7px;
    align-items: center;
    background:linear-gradient(to right , rgb(30, 255, 187) , #2fb3ff);
    /* background-size: 300% 300%; */
    /* animation: gradientBG 7s ease infinite; */
    border:  .4px solid var(--black);
    outline: none;
    border-radius: 140px;
    font-size: 0.922rem;
    font-weight: 680;
    cursor: pointer;
}

/* @keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
} */

.profile-button-edit-prfoile p{
    position: relative;
    top: -1px;
    color:black ;
}
.profile-button-edit-prfoile svg{
    fill: black;
    width: 22px;
}



.profile-button-ring{
    /* width: 36px; */

  background-color: transparent;
  position: absolute;
  top: 126px;
  right: 18px;
  border: none;


    outline: none;
    border-radius: 106px;
}
.profile-button-ring svg{
    fill:black;
    stroke:black;
    stroke-width: .4;
    width: 21px;
    position: relative;
    top: .55px;
}
#profile-button-contaction{
    width: 40px;
    border: none;
    outline: none;
    background-color: transparent;
    background: 
    linear-gradient(45deg, rgb(66, 66, 66) 100%, rgb(0, 0, 0) 0%), 
    linear-gradient(to right,#00adf1, rgb(226, 0, 68)); 
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
    border: 1.5px solid transparent;
    border-radius: 16px;
    display: nne;
    cursor: pointer;
}
#profile-button-contaction svg{
    fill: none;
   width: 21px;
    stroke: rgb(255, 255, 255);
    stroke-width: 1.8;
    position: relative;
    top: 1.5px;
}




.profile-space-cotainer{
    width: 100%;
    /* height: 3px; */
    /* border-top: 1.2px solid var(--border); */
    background-color: white;
    display: none;
}
.profile-filter-card-container{
    width: 100%;
    height: 38px;
    /* padding-top: 100px; */
    /* position: absolute;
    z-index: 4; */
    /* background-color: red; */
    /* position: absolute;
    top: 430px; */
    /* background-color: red; */
    margin-top: 16px;
    margin-bottom: 5px;
}
.profile-filter-card-container ul{
    width: 100%;
    height: 100%;
    display: flex;
    gap: 40px;
    overflow-x: scroll;
    padding: 8px 27px ;
    padding-bottom: 14px;
}


.profile-filter-card-container a{
    /* width: 100px; */

    /* height:32.5px; */
    /* padding: 0px px; */
    /* background-color:rgb(209, 206, 206); */
    /* border-radius: 150px; */
    font-size:0.899rem;
    font-weight: 520;
    border: none;
    outline: none;
    background-color: transparent;
}
.profile-filter-card-container p{
    color:rgb(121, 121, 121);
}
.profile-filter-card-container p:hover{
    color: var(--blue);
    text-shadow: 0px 0px 9px rgb(118, 182, 255);
}
.profile-filter-link.active{
    background-color: transparent;
}
.profile-filter-link.active.active p{
    color: var(--blue);
    font-weight: 750;
    position: relative;
    /* background-color: transparent; */
}
.profile-filter-link.active.active p::before{
    content:'';
    position: absolute;
    width: 100%;
    height: 5px;
    background-color: var(--blue);
    border-radius: 1000px;
    margin-top: 25px;
}
.profile-filter-space{
    width: 100%;
    height: .89px;
    background-color: var(--border); 
    position: absolute;
    /* z-index: 1; */
    margin-top: -4px;

    display: nne;
   
    /* margin-top: 10px;
    background-color: transparent; */
}

.empty-profile{
    color: black;
    font-weight: 700;
    font-size: 1.28rem;
    margin-top: 25px;
}



.empty-profile-user{
    color: black;
    font-weight: 700;
    font-size: 1.28rem;
    /* margin-top: 5px; */
    position: relative;
    top: -90px;
}




.post-pin button{
    background-color: transparent;
    border: none;
    outline: none ; 
    position: relative;
    top: -2.2px;
    cursor: pointer;
    color: #00adf1;
    font-weight: 550;
}






.bio-text{
    white-space: pre-line;
}

.bio-text a {
    color: #007bff;
    text-decoration: none;
}



.web-text{
    white-space: pre-line;
}

.web-text a {
    color: #007bff;
    text-decoration: none;
}