/* dom parent  */
.hero {
    min-height: 100vh;
    width: 100%;
    display: flex;
    background-color: #fff;
    align-items: center;
    flex-direction: column;
    padding: 140px 0 0;
}

/* data-wrapper */
.data-wrapper {
    width: 1500px;
    display: flex;
    align-items: flex-start;
    flex: none;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 60px;
    /* display: none !important; */
}

/* data-left-panel */
.data-left-panel {
    position: sticky;
    top: 140px;
    background-position: center;
    background-size: cover;
    border-radius: 5px;
    width: 28%;
    height: 80vh;
    /* height: 95%; */
    padding: 0 70px;
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
    margin-bottom: 40px;
    /* background-color: #9E9E9E; */
}

.owl-nav,
.owl-dots {
    display: flex;
    justify-content: flex-end;
}

.owl-nav {
     position: absolute;
    bottom: 26px;
    right: 20px;
    color: #fff;
    font-size: 45px;
}

.owl-dots {
    position: absolute;
    bottom: 20px;
    right: 20px;
    color: #fff;
}

.mrgin-0 {
    margin: 0 !important;
}

/* data section started from here  */
/* data-center-section */
.data-center-section {
    width: 44%;
    height: 100%;
}

/* right panel started from here  */
/* data-right-panel */
.data-right-panel {
    width: 24%;
    background-color: #fff;
    position: sticky;
    top: 140px;
}

.panel-image {
    margin-bottom: 40px;
    width: 280px;
}

.mini-heading {
    letter-spacing: 0.5px;
    font-size: 26px;
    margin-bottom: 5px;
}

/* text parent  */
.text-parent {
    width: 100%;
}

.mini-text-panel {
    margin-bottom: 10px;
    display: block;
    font-weight: 600;
}

/* panel link  */
.panel-link {
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    padding: 25px 20px;
    letter-spacing: 0.9px;
    text-align: center;
    border-radius: 5px;
    font-weight: 600;
    display: block;
    display: block;
    transition: 0.5s;
    /* background-color: #673ab7b3 !important; */
    background-color: #000 !important;
}

.panel-link i {
    margin-right: 8px;
    font-size: 18px;
}

/* post child  */
.post-child {
    margin-bottom: 30px;
}

.post-child:last-child {
    margin-bottom: 45px;
}

.post-image {
    border-radius: 5px;
    overflow: hidden;
    height: 430px;
}

.post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* profile-or-text-data */
.profile-or-post-text-data {
    margin: 15px 0 0;
}

/* profile-data */
.profile-data {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-info {
    display: flex;
    align-items: center;
}

.profile-image {
    width: 50px;
    border-radius: 50%;
    flex: none;
    overflow: hidden;
    height: 50px;
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* profile-text-info */
.profile-text-info {
    margin-left: 15px;
}

.h3-font {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #000;
    display: block;
    text-decoration: none !important;
}

.span-font {
    text-decoration: none;
    /* border-bottom: 1px solid #eee; */
    color: #000;
    font-size: 12px;
    font-weight: 600;
}

.btnarea {
    gap: 10px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btnarea button {
    border: 0;
    outline: 0;
    color: #000000ad;
    font-size: 11px;
    font-weight: 600;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btnarea button i {
    font-size: 14px;
    opacity: 60%;
    margin-right: 6px;
}

/* .name-bagg i {
  margin-right: 1px;
} */

.follow-user-btn-parent {
    margin-left: 20px;
}

/* follow-btn-uploaded-by */
.follow-user-btn {
    border: 0;
    outline: 0;
    padding: 12px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    letter-spacing: 1px;
    /* width: 100%; */
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    background-color: #000;
    cursor: pointer;
    color: #fff;
}

.radius-btn {
    border-radius: 30px;
}

.follow-user-btn i {
    margin-right: 8px;
}

/* for hover */
.follow-user-btn:hover {
    transition: 0.12s;
    background-color: #000000d1;
}

/* post-btns-parent */
.post-btns-parent {
    display: flex;
    align-items: center;
}

/* mini btns for post like for likes dislikes etc ... */
.profile-card {
    cursor: pointer;
    margin-left: 10px;
    border: 4px solid #ffffff;
    height: 45px;
    width: 45px;
    display: flex;
    flex: none;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: -15px;
    text-decoration: none;
    background-color: #0202020d;
}

.profile-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* for last child  */
.post-btns-parent .profile-card:first-child {
    margin-left: 0;
    z-index: 999;
}

/* profile card second child  */
.post-btns-parent .profile-card:nth-child(2) {
    z-index: 900;
}

/* profile card third child  */
.post-btns-parent .profile-card:nth-child(3) {
    z-index: 800;
}

/* profile card last child ntn:4th child */
.post-btns-parent .profile-card:nth-child(4) {
    z-index: 700;
}

/* --- post text  */
.post-title {
    display: block;
    font-size: 16px;
    line-height: 1.5 !important;
    margin-bottom: 5px;
    letter-spacing: 0px;
    text-decoration: none;
    color: #000000e0;
    font-weight: 700 !important;
}

.post-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: 1.7;
    color: #000000e0;
    margin-bottom: 25px;
}

.xs-font {
    font-size: 8px !important;
}

.s-h3-font {
    font-size: 13px !important;
}

.mini-profile-img {
    width: 45px !important;
    height: 45px !important;
}

.s-span-font {
    font-size: 12px !important;
}

.profile-btn-suggestions {
    height: 40px !important;
    width: 40px !important;
    color: #000;
    text-decoration: none;
}

/* ---- right panel started from here  */
/* suggestions-users-parent */
.suggestions-users-header {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* suggestions parent  */
.suggestions-parent {
    margin-bottom: 35px;
}

/* suggestions child  */
.suggestions-child {
    display: flex;
    margin-bottom: 25px;
    align-items: center;
    justify-content: space-between;
}

/* for last suggestion  */
.suggestions-parent .suggestions-child:last-child {
    margin-bottom: 0 !important;
}

/* pages links at the 
footer of right panel */
.pages-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* for third link child  */
.pages-links .links-child:nth-child(3) .bold-dot {
    display: none;
}

/* for 7th link child  */
.pages-links .links-child:nth-child(7) .bold-dot {
    display: none;
}

.pages-links .links-child:last-child .bold-dot {
    display: none;
}

/* links child for right panel footer  */
.links-child {
    display: flex;
    margin-bottom: 18px;
    margin-right: 8px;
    align-items: center;
}

.links-text {
    text-decoration: none;
    font-size: 13px;
    line-height: 0;
    font-weight: 600;
    color: #000;
}

/* for dots  */
.bold-dot {
    text-decoration: none;
    margin-left: 8px;
}

.bold-dot i {
    font-size: 6px;
}

/* copyrights-info */
.copyrights-info {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.copyrights-c {
    margin-right: 6px;
    font-weight: bold;
    font-size: 20px;
}

.copyrights-text {
    font-size: 13px;
    letter-spacing: 0.3px;
    font-weight: 600;
}

.font-600 {
    font-weight: 600 !important;
}

/* response css desing started from here  */
/* for 1600px or less than 1600px design  */
@media only screen and (max-width: 1600px) {
    /* data-wrapper */
    .data-wrapper {
        width: 1350px;
    }

    /* data-center-section */
    .data-center-section {
        width: 50%;
        height: 100%;
    }

    /* data-left-panel */
    .data-left-panel {
        width: 22%;
        padding: 0 30px;
        height: 75vh;
    }

    /* left panel image  */
    .panel-image {
        width: 230px;
    }

    /* mini heading  */
    .mini-heading {
        font-size: 22px;
    }

    /* .mini-text-right-panel  */
    .mini-text-panel {
        font-size: 14px;
    }

    /* panel link  */
    .panel-link {
        padding: 22px 20px;
        font-size: 14px;
    }

    /* section data  */
    .post-image {
        height: 350px;
    }
}

/* for 1440px or less than 1440px design  */
@media only screen and (max-width: 1440px) {
    /* data-wrapper */
    .data-wrapper {
        width: 1150px;
    }

    /* data-center-section */
    .data-center-section {
        width: 65%;
        height: 100%;
    }

    /* data-left-panel */
    .data-left-panel {
        position: unset;
        display: none;
    }

    /* data-right-panel */
    .data-right-panel {
        width: 32%;
    }

    /* section data  */
    .post-image {
        height: 420px;
    }
}

/* for 1240px or less than 1240px design  */
@media only screen and (max-width: 1240px) {
    /* data-wrapper */
    .data-wrapper {
        width: 1040px;
    }
}

/* for 1120px or less than 1120px design  */
@media only screen and (max-width: 1120px) {
    /* data-wrapper */
    .data-wrapper {
        width: 93.5%;
        max-width: 1040px;
    }

    /* data-right-panel */
    .data-right-panel {
        position: unset;
        display: none;
    }

    /* data-center-section */
    .data-center-section {
        width: 100%;
        height: 100%;
    }

    /* section data  */
    .post-image {
        height: 520px;
    }
}

/* for 1120px or less than 1120px design  */
@media only screen and (max-width: 920px) {
    .hero {
        padding: 180px 0 0;
    }

    /* section data  */
    .post-image {
        height: 420px;
    }
}

/* for 1120px or less than 1120px design  */
@media only screen and (max-width: 720px) {
    /* section data  */
    .post-image {
        height: 370px;
    }
}

/* for 1120px or less than 1120px design  */
@media only screen and (max-width: 620px) {
    /* section data  */
    .post-image {
        height: 340px;
    }
}

/* for 1120px or less than 1120px design  */
@media only screen and (max-width: 520px) {
    /* section data  */
    .post-image {
        height: 280px;
    }

    /* mini btns for post like for likes dislikes etc ... */
    .profile-card {
        height: 40px;
        width: 40px;
    }

    /* h3 font  */
    .h3-font {
        font-size: 14px;
        display: flex;
        /* flex-direction: column; */
    }

    /* span font  */
    .span-font {
        font-size: 12px;
    }

    /* profile image  */
    .profile-image {
        width: 45px;
        border-radius: 50%;
        overflow: hidden;
        height: 45px;
    }
}

@media only screen and (max-width: 440px) {
    /* section data  */
    .post-image {
        height: 240px;
    }

    /* data wrapper ( data container ) */
    .data-wrapper {
        width: 100%;
    }
}