:root {
    --main-color: #F0EEF5;
    --second-color: #6A4BDF;
    --third-color: #ffffff;
    --font-color: #9b9b9ba2;

}

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

body {
    height: 100vh;
    background: var(--main-color);
}

html {
    scroll-behavior: smooth;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: black;
}

.container {
    margin: 20px 80px;
}

/* navbar */
.navbar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--third-color);
    height: 50px;
    padding: 20px 0;
}

.navbar .logo {
    font-size: 1.5em;
}

.navbar .details {
    display: flex;
    align-items: center;
    width: 20%;
    gap: 10px
}

.navbar .details .image {
    width: 40px;
    height: 40px;
    clip-path: circle(50%);
}

.navbar .details .image img {
    width: 100%;
    height: 100%;
}

.navbar .details .btn-nav button {
    padding: 10px;
    border: none;
    background-color: var(--second-color);
    width: 100%;
    border-radius: 28px;
    color: var(--third-color);
}

.navbar .details .btn-nav {
    width: 60%;
    display: flex;
    justify-content: center;
}

.navbar .search {
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar .search input {
    width: 100%;
    padding: 10px 10px 10px 40px;
    background-color: var(--main-color);
    border: none;
    border-radius: 20px;
    outline: none;
}

.navbar .search input::placeholder {
    font-size: 14px;
}

.navbar .search i {
    position: relative;
    right: 93%;
    font-size: 14px;
    opacity: 0.5;
}

/* full page */
.full-page {
    display: flex;
}

/* left side */
.left-side {
    display: flex;
    flex-direction: column;
    flex-basis: 25%;
}

.left-side .main-link {
    background-color: white;
    padding: 10px;
    border-radius: 20px;
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 10px;
}

.left-side .main-link .image {
    width: 40px;
    height: 40px;
}

.left-side .main-link .image img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    outline: 2px solid var(--main-color);
}

.left-side .content span {
    font-size: 15px;
    color: var(--font-color);
}

.left-side .links {
    background-color: var(--third-color);
    border-radius: 20px;

}

.left-side .links ul li {
    display: flex;
    justify-content: start;
    padding: 13px;
}

.left-side .links ul li .listdown {
    font-size: 14px;
    color: var(--font-color);
    position: relative;
    left: 0;
}

.left-side .links ul li .listdown .fa-angle-right.active {
    /* display: block; */
    transform: rotate(90deg);
}


.left-side .links ul li .inner-list {
    position: absolute;
    background-color: var(--third-color);
    left: 30%;
    top: 42%;
    z-index: 1;
    width: 20%;
    transform: translateX(-30px);
    display: block;

}

.left-side .links ul li .inner-list.active {
    display: none;

}

.left-side .links ul li .inner-list li {
    padding: 20px;

}


.left-side .links ul li:hover {
    cursor: pointer;
    background-color: var(--main-color);
}

.left-side .links ul li.active {
    background-color: var(--main-color);
    border-left: 7px solid var(--second-color);
    border-radius: 7px 0 0;
}

.left-side .links ul li.active a,
.left-side .links ul li.active i {
    color: var(--second-color);

}

.left-side .links ul li .icon {
    display: flex;
    justify-content: center;
    margin: initial;
    width: 40px;
    color: var(--font-color);
}

.left-side .links ul li a {
    width: 100%;
    margin-left: 10px;
    text-transform: capitalize;
}

.left-side .btn button {
    width: 100%;
    background-color: var(--second-color);
    border-radius: 20px;
    margin: 10px 0;
    border: none;
    color: var(--third-color);
    padding: 10px;
}

@media screen and(max-width:1000px) {
    .left-side {
        position: absolute;
    }

    .left-side .links ul li a {
        display: none;
    }
}

/* meddel side */
.meddle-side {
    display: flex;
    width: 50%;
    height: 150px;
    margin: 0 10px;
    justify-content: space-around;
    flex-direction: column;
}


/* create post */
.meddle-side .create-post {
    display: flex;
    margin: 10px;
    align-items: center;
}

.meddle-side .create-post img {
    width: 40px;
    height: 40px;
    clip-path: circle(50%);
    position: absolute;
    margin-left: 7px;
}

.meddle-side .create-post input {
    width: 100%;
    border: none;
    outline: none;
    padding: 15px 15px 15px 50px;
    border-radius: 20px;
}

.meddle-side .create-post button {
    position: absolute;
    border: none;
    outline: none;
    padding: 5px 10px;
    border-radius: 15px;
    background-color: var(--second-color);
    width: 7%;
    color: var(--third-color);
    cursor: pointer;
    right: 30%;
}

/* posts */
.meddle-side .posts {
    margin: 10px;
}

.meddle-side .posts .post {
    padding: 10px;
    background-color: var(--third-color);
    border-radius: 20px;
    margin-bottom: 10px;
}

.meddle-side .posts .post .title {
    display: flex;
    align-items: center;
    margin: 0 10px
}

.meddle-side .posts .post .title .content {
    /* width: 100%; */
    margin-left: 20px;
}

.meddle-side .posts .post .title .yoyo {
    display: flex;
    justify-content: space-between;
    width: 84%;
}

.meddle-side .posts .post .title img {
    width: 50px;
    height: 50px;
    /* margin: 0 10px; */
    clip-path: circle(50%);
}

.meddle-side .posts .post .image img {
    width: 100%;
    height: 300px;
    border-radius: 20px;
    margin: 5px 0;
}

.meddle-side .posts .post .icons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--font-color);
    margin: 5px 10px;
}

.meddle-side .posts .post .icons:hover {
    cursor: pointer;
}

.meddle-side .posts .post .icons .groups {
    display: flex;
    /* justify-content: space-between; */
    gap: 10px;
    width: 15%;
}

.meddle-side .posts .post .icons .groups .fa-heart:hover {
    transform: scale(.3px);
    color: red;
    transition: color .2s;
}

.meddle-side .posts .post .icons .groups .fa-comment:hover,
.meddle-side .posts .post .icons .groups .fa-share-alt:hover,
.meddle-side .posts .post .icons .fa-save:hover {
    transform: scale(.3px);
    color: black;
    transition: color .2s;
}

.meddle-side .posts .post .des {
    display: flex;
    margin: 10px;
    flex-direction: column;
    gap: 5px;
}

.meddle-side .posts .post .des .freiends {
    display: flex;
}

.meddle-side .posts .post .des .freiends img {
    width: 20px;
    height: 20px;
    border: 1px solid var(--third-color);
    border-radius: 50%;
}

.meddle-side .posts .post .des p {
    font-size: 14px;
}

.meddle-side .posts .post .des .f1 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.meddle-side .posts .post .des span {
    font-weight: 700;
}

.meddle-side .posts .post .des .freiends img:not(:first-child) {
    margin-left: -10px;
}

/* right side */
.right-side,
.right-side2 {
    width: 25%;
    display: flex;
    flex-direction: column;
}

.right-side .top
.right-side2, .top {
    background-color: var(--third-color);
    border-radius: 20px;
    padding: 10px;
}

.right-side .top .title,
.right-side2 .top .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    text-transform: capitalize;
}

.right-side .top .searchbar input,
.right-side2 .top .searchbar input {
    width: 100%;
    border: none;
    outline: none;
    padding: 10px 10px 10px 40px;
    border-radius: 20px;
    background-color: var(--main-color);
}

.right-side .top .searchbar i,
.right-side2 .top .searchbar i {
    position: relative;
    left: 15px;
    top: -26px;
    opacity: .5;
}

.right-side .top .filters,
.right-side2 .top .filters {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    text-transform: capitalize;
    font-size: 15px;
}

.right-side .top .filters span,
.right-side2 .top .filters span {
    cursor: pointer;
    position: relative;
}

.right-side .top .filters span.active::after,
.right-side2 .top .filters span.active::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 3px;
    background-color: black;
    left: -15px;
    top: 135%;
    transform: translateX(8px);
}

.right-side .top .messages,
.right-side2 .top .messages {
    display: flex;
    flex-direction: column;
    /* gap: 5px; */
}

.right-side .top .messages .each,
.right-side2 .top .messages .each {
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 10px 0 0 0;
}

.right-side .top .messages img,
.right-side2 .top .messages img {
    width: 40px;
    height: 40px;
    margin-right: 5px;
    clip-path: circle(50%);
}

.right-side .top .messages .content p,
.right-side2 .top .messages .content p {
    font-size: 13px;
    color: var(--font-color);
}

.right-side h3,
.right-side2 h3 {
    text-transform: capitalize;
    margin: 10px;
    color: var(--font-color);
}

.createPost {
    flex-direction: column;
}

.createPost,
.reviewinfo {
    padding: 10px;
    background-color: var(--third-color);
    border-radius: 20px;
    margin-bottom: 10px;
    display: flex;
    margin: 10px 0;
}
.loader {
    text-align: center;
    font-size: 22px;
    margin-top: 60px;
    color: #777;
}
.createPost form .model,
.createPost form .price,
.createPost form .description,
.createPost form .img {
    display: flex;
    flex-direction: column;
}

.createPost form .model label,
.createPost form .price label,
.createPost form .description label,
.createPost form .img label,
.updateProfile form .name label,
.updateProfile form .email label,
.updateProfile form .location label,
.updateProfile form .phone label,
.updateProfile form .password label {
    text-transform: capitalize;
    font-weight: 800;
    padding: 10px;
}

.createPost form .model input,
.createPost form .price input,
.createPost form .description textarea,
.createPost form .img input,
.updateProfile form .name input,
.updateProfile form .email input,
.updateProfile form .location input,
.updateProfile form .phone input,
.updateProfile form .password input {
    width: 100%;
    padding: 10px;
    background-color: var(--main-color);
    border: none;
    border-radius: 20px;
    outline: none;
    resize: none;
}

.updateProfile form .name,
.updateProfile form .email,
.updateProfile form .location,
.updateProfile form .phone,
.updateProfile form .password {
    margin: 10px 0;
}

.updateProfile form .name input,
.updateProfile form .email input,
.updateProfile form .location input,
.updateProfile form .phone input,
.updateProfile form .password input {
    margin: 10px 0;
}

.createPost .button-post,
.updateProfile .btn_edit {
    display: flex;
    justify-content: end;
}

.createPost .button-post button,
.updateProfile .btn_edit button {
    padding: 10px;
    margin-top: 10px;
    border: none;
    background-color: var(--second-color);
    width: 20%;
    border-radius: 28px;
    color: var(--third-color);
}

.left-side,
.right-side,
.right-side2 {
    position: fixed;
    z-index: 1;
}

.navbar {
    position: fixed;
    z-index: 1;
    /* overflow-x: hidden; */
    top: 0;
    width: 100%;
    margin-bottom: 20px;
}

.right-side {
    right: 30px;
    margin-top: -14%;
}
.right-side2{
    right: 30px;
    top: 90px;
    /* margin-top: -12%; */

}
.left-side {
    margin-top: 50px;
    margin-left: -45px;
}

.meddle-side {
    position: relative;
    margin: auto;
    margin-top: 62px;
}

.f2 {
    padding: 10px;
}

.f2 span {
    font-weight: 700;
}

.reviewinfo {
    gap: 20px;
    height: 150%;
}

.reviewinfo .left {
    width: 35%;
    height: 70%;
}

.reviewinfo .right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reviewinfo .right span {
    font-weight: bolder;
    text-transform: lowercase;
}

.reviewinfo .right p {
    font-size: 1.2em;
    text-transform: capitalize;
}

.reviewinfo .left img {
    width: 100%;
    border-radius: 20px;
    height: 100%;
}

.reviewinfo .left .star {
    display: flex;
    justify-content: center;
    gap: 5px;
    font-size: 1.5em;
    margin: 10px 0;
}

.left-side .createPost form button {
    padding: 10px;
    border: none;
    background-color: var(--second-color);
    width: 100%;
    border-radius: 28px;
    color: var(--third-color);
}