.basic-info-container{
    width: 100%;
    display: flex;
    flex-direction: row;
}

.info-container{
    width:50%;
    height:67vh;
    padding-left: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.photo{
    width: 50%; 
    height: 67vh;
    object-fit: cover;
    border:transparent;
    border-radius: 5%;
}

.bio{
    font-size:normal;
    text-align: left;
    padding-top:10px;
    width:100%;
}

.education{
    font-size:normal;
    padding-top:10px;
    width:100%;
    font-weight: bold;
}

.full_name{
    width:100%;
    padding-top:10px;
    font-size:large;
    font-weight: bold;
}

.quote-container-container{
    width:100%;
    display:flex;
    flex-direction: column;
}

.quote-container{
    margin-top: 20px;
    padding: 10px;
    min-height: 50px;
    width:60%;
    border: transparent;
    border-radius: 10px;
}

.wrapper{
    width:100%;
    margin:0px;
    box-sizing: border-box;
    padding:10px 5px 0px 5px;
    display: flex;
    flex-direction: column;
}
.wrapper-10{
    width:100%;
    margin:0px;
    box-sizing: border-box;
    padding:10px 10px 0px 10px;
    display: flex;
    flex-direction: column;
}

.cover-photo-container{
    position: relative;
    width: 100%;
    padding-bottom:50%;
    cursor:pointer;
    display: flex; 
    justify-content: center;
    cursor: pointer;
}

.cover-photo{
    width:100%;
    height:100%;
    object-fit: cover;
    background-color: var(--bg);
}

  
.profile-photo{
    position: absolute;
    align-self: center;
    bottom: -20px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    z-index: 2;
    background-color: var(--bg);
    cursor: pointer;
    object-fit: cover;
}

.user_full_name{
    font-size: 24px;
}

.featured-photo-container{
    display:flex;
    flex-direction: row;
    width:100%;
    flex-wrap: wrap;
}

.featured-photo{
    width:120px;
    height:120px;
    border-radius: 10px;
    margin:5px;
    object-fit: cover;
    cursor:pointer;
}

.featured-friend-photo-container{
    display: flex;
    flex-direction: column;
    margin:5px;
    align-items: center;
    padding:0px;
    scroll-snap-align: start;
}

.featured-friend-container{
    scroll-snap-type: x mandatory;
    display:flex;
    flex-direction: row;
    width:100%;
    overflow-x:scroll;
}

.featured-friend-container::-webkit-scrollbar {
    display:none;
}

.featured-friend-photo{
    width:100px;
    height:100px;
    object-fit: cover;
    border-radius:50px;
}

.suggested-friend-photo{
    width:100px;
    height:100px;
    border-radius: 50px;
    object-fit: contain;
}

.all-friend-container{
    display:flex;
    flex-direction: row;
    width:100%;
    flex-wrap: wrap;
}

@media screen and (max-width:700px){
    .photo{
        width:100%;
        height:133vw;
    }
    .info-container{width:100%;height:unset;padding-left: unset;}
    .basic-info-container{flex-direction: column;}
    .quote-container{width:95%;align-self: center;}
    .profile-photo{ width:150px;height:150px;}
}