/* ------------------------------- POST SECTION STYLE --------------------------- */

/* Post Section  out side white container - contain multible posts */

.home-potters-clay .frame-32 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 17px 20px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: #ffffff;
    border-radius: 5px;
    overflow: hidden;
    overflow-y: scroll;
    height: 835px;
}

/* Post Section Container  - Inside here post will be displayed for each psot */
.posts-section {
    display: grid;
    flex-direction: column;
    gap: 1px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #faf1eb;
    border-radius: 10px;

}

/* Post text content */
.home-potters-clay .text-wrapper-29 {
    position: relative;
    align-self: stretch;
    font-family: "Noto Sans Tamil", Helvetica;
    color: #00020bb2;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
}

/* Container styles */
.home-potters-clay {
    font-family: "Albert Sans", Helvetica, Arial, sans-serif;
}

/* Profile and name section */
.frame-33 {
    display: flex;
    width: 248px;
    align-items: center;
    gap: 19px;
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
    text-decoration: none;
}


/* Like and comment section */
.frame-36 {
    display: flex;
    align-items: center;
    gap: 49px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    margin: 15px 0;
}

/* Heart and Comment Icon */

.frame-11,
.frame-12 {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s;
}


.like,
.comment-alt {
    width: 20px;
    height: 20px;
}

/* Comment input field */
.frame-37 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 8px 16px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #01030c33;
}

.comment-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: "Albert Sans", Helvetica;
    font-size: 15px;
    padding: 0;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


.attachment-button,
.paper-plane-top {
    cursor: pointer;
    padding: 1px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.attachment-button:hover,
.paper-plane-top:hover {
    opacity: 1;
}


/* tributes and memories */
.home-potters-clay .text-wrapper-25 {
    position: absolute;
    top: 17px;
    left: 18px;
    font-family: "Albert Sans", Helvetica;
    font-weight: 700;
    color: #00020b;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}



/* Post Profile Detials */

.profile-details {
    position: relative;
    width: 400px;
    height: 154px;
    padding: 1.5rem;
    top: 0;
    left: 0;
    background-color: #99582a;
    border-radius: 5px;
    color: white;
    overflow: hidden;
}

.details-content {
    position: absolute;
    z-index: 1;
}

.full-name {
    font-size: 1.5rem;
    font-family: serif;
    margin-bottom: 1rem;
    color: white;
}

.details-container {
    position: absolute;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.details-img {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.detail-label {
    color: rgba(255, 255, 255, 0.9);
    margin-right: 0.25rem;
}

.detail-value {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
}

/* Hover effects */
.profile-details:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.detail-row:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0.25rem;
    margin: -0.25rem;
}

/* floral image*/
.feed .OBJECTS {
    position: absolute;
    width: 174px;
    height: 196px;
    top: 5px;
    left: 220px;
}

/* profile Image */
.frame-33 .ellipse-2 {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 10%;
    object-fit: cover;
}

.birth-date,
.death-date,
.age,
.address {
    font-size: 10px;
}


/*Read more button */

.vector {
    transition: transform 0.3s ease;
}

.text-wrapper-read-more {
    color: #666;
    font-size: 14px;
}

.read-more {
    display: flex;
    width: 570px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 7px 23px;

    top: 89px;
    left: 9px;
    border-radius: 39px;
    border: 1px solid;
    border-color: #99582a;
}


.text-wrapper-read-more {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Albert Sans", Helvetica;
    font-weight: 700;
    color: #00020b;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}






/* ------------------------------- POST SECTION STYLE --------------------------- */

/* Post Section  out side white container - contain multible posts */

.home-potters-clay .frame-32 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 17px 20px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: #ffffff;
    border-radius: 5px;
    overflow: hidden;
    overflow-y: scroll;
    height: 835px;
}

/* Post Section Container  - Inside here post will be displayed for each psot */
.posts-section {
    display: grid;
    flex-direction: column;
    gap: 1px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #faf1eb;
    border-radius: 10px;

}

/* Post text content */
.home-potters-clay .text-wrapper-29 {
    position: relative;
    align-self: stretch;
    font-family: "Noto Sans Tamil", Helvetica;
    color: #00020bb2;
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: normal;
}

/* Container styles */
.home-potters-clay {
    font-family: "Albert Sans", Helvetica, Arial, sans-serif;
}

/* Profile and name section */
.frame-33 {
    display: flex;
    width: 248px;
    align-items: center;
    gap: 19px;
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
    text-decoration: none;
}


/* Like and comment section */
.frame-36 {
    display: flex;
    align-items: center;
    gap: 49px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    margin: 15px 0;
}

/* Heart and Comment Icon */

.frame-11,
.frame-12 {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s;
}


.like,
.comment-alt {
    width: 20px;
    height: 20px;
}

/* Comment input field */
.frame-37 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px 8px 16px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
    background-color: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #01030c33;
}

.comment-input {
    flex: 1;
    border: none;
    outline: none;
    font-family: "Albert Sans", Helvetica;
    font-size: 15px;
    padding: 0;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


.attachment-button,
.paper-plane-top {
    cursor: pointer;
    padding: 1px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.attachment-button:hover,
.paper-plane-top:hover {
    opacity: 1;
}


/* tributes and memories */
.home-potters-clay .text-wrapper-25 {
    position: absolute;
    top: 17px;
    left: 18px;
    font-family: "Albert Sans", Helvetica;
    font-weight: 700;
    color: #00020b;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
}



/* Post Profile Detials */



.details-content {
    position: relative;
    z-index: 1;
}

.full-name {
    font-family: sans-serif;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: white;
}

.details-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.details-img {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.detail-label {
    color: rgba(255, 255, 255, 0.9);
    margin-right: 0.25rem;
}

.detail-value {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 300;
}

/* Hover effects */
.profile-details:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.detail-row:hover {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 0.25rem;
    margin: -0.25rem;
}

/* floral image*/
.details-content .OBJECTS {
    position: absolute;
    width: 174px;
    height: 196px;
    top: 5px;
    left: 220px;
}

/* Readmor arrow imag*/

img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}


/* profile Image */
.frame-33 .ellipse-2 {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 10%;
    object-fit: cover;
}

.birth-date,
.death-date,
.age,
.address {
    font-size: 10px;
}


/*Read more button */

.vector {
    transition: transform 0.3s ease;
}

.text-wrapper-read-more {
    color: #666;
    font-size: 14px;
}

.read-more {
    display: flex;
    width: 570px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 7px 23px;

    top: 89px;
    left: 9px;
    border-radius: 39px;
    border: 1px solid;
    border-color: #99582a;
}


.text-wrapper-read-more {
    position: relative;
    width: fit-content;
    margin-top: -1.00px;
    font-family: "Albert Sans", Helvetica;
    font-weight: 700;
    color: #00020b;
    font-size: 14px;
    letter-spacing: 0;
    line-height: normal;
}






/* Mobile Rsponsiviness -------------------- */

@media screen and (max-width: 768px) {

    /* Post section container */
    .posts-section {
        padding: 15px;
        margin-bottom: 15px;
    }

    /* Profile section */
    .frame-33 {
        width: 100%;
        position: relative;
        display: grid;
        gap: 0;
    }

    .profile-details {
        position: relative;
        width: 400px;
    }



    /* Details content */
    .full-name {
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 12px;
        color: white;
    }

    .details-container {
        gap: 1px;
    }

    .detail-row {
        gap: 8px;
    }

    .birth-date,
    .death-date,
    .address {
        font-size: 10px;
        margin-left: 0;
        color: rgba(255, 255, 255, 0.9);
    }

    /* Floral design */
    .feed .OBJECTS {
        width: 150px;
        height: 150px;
    }

    /* Profile image */
    .frame-33 .ellipse-2 {
        width: 75px;
        height: 75px;
        position: absolute;
        left: 15px;
        bottom: -38px;
        border: 3px solid white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 2;
    }

    /* Text content */
    .text-wrapper-29 {
        font-size: 14px;
        line-height: 1.6;
        margin: 45px 15px 15px;
        color: rgba(0, 2, 11, 0.7);
        text-align: justify;
    }

    /* Read more button */
    .read-more {
        width: calc(100% - 30px);
        margin: 10px 15px;
        border-radius: 20px;
    }

    /* Like and comment section */
    .frame-36 {
        gap: 25px;
        padding: 0 15px;
        margin: 15px 0;
    }

    /* Comment input */
    .frame-37 {
        width: calc(100% - 30px);
        margin: 0 15px;
        padding: 8px 15px;
    }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
    .profile-details {
        position: relative;
        width: 260px;
    }

    .frame-33 .ellipse-2 {
        width: 65px;
        height: 65px;
        bottom: -32px;
    }

    .full-name {
        font-size: 18px;
    }

    .text-wrapper-29 {
        font-size: 13px;
        margin: 40px 12px 12px;
    }

    .feed .OBJECTS {
        position: 0;
        width: 120px;
        height: 120px;
    }

    .frame-37 {
        width: calc(100% - 24px);
        margin: 0 12px;
    }
}

/* Custom scrollbar for the frame-32 container */
.home-potters-clay .frame-32::-webkit-scrollbar {
    width: 6px;
}

.home-potters-clay .frame-32::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.home-potters-clay .frame-32::-webkit-scrollbar-thumb {
    background: #99582a;
    border-radius: 3px;
}


@media screen and (max-width: 480px) {
    .feed .OBJECTS {
        position: absolute;
        width: 120px;
        height: 120px;
        top: 12px;
        right: 0;
        left: auto;
        /* Reset left position */
        z-index: 0;
        /* Place behind content */
        margin-right: -20px;
        /* Slight offset to the right */
    }

    /* Related adjustments for proper layering */
    .profile-details {
        position: relative;
        width: 250px;
        overflow: hidden;
    }

    .details-content {
        position: relative;
        z-index: 1;
    }

    .details-container {
        position: absolute;
        top: 30px;
        right: 15px;
        z-index: 2;
    }

    /* Ensure text remains readable */
    .full-name,
    .birth-date,
    .death-date,
    .address {
        position: relative;
        z-index: 2;
    }
}

/* Base styles - Desktop */
.frame-33 {
    display: flex;
    width: 248px;
    align-items: center;
    gap: 10px;
    /* Reduced from 19px */
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
    text-decoration: none;
}

.profile-details {
    position: relative;
    width: 410px;
    height: 150px;
    padding: 1rem;
    background-color: #99582a;
    border-radius: 5px;
    color: white;
    overflow: hidden;
}

.frame-33 .ellipse-2 {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 10%;
    object-fit: cover;
}

/* Floral design */
.feed .OBJECTS {
    position: absolute;
    width: 150px;
    height: 170px;
    top: 5px;
    left: 220px;
}

/* Details content */
.details-content {
    position: relative;
    z-index: 1;
}

.details-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Tablet breakpoint */
@media screen and (max-width: 768px) {

    /* Profile section */
    .frame-33 {
        width: 100%;
        position: relative;
        display: grid;
        gap: 0;
    }

    .profile-details {
        width: 400px;
        height: 120px;
        padding: 0.875rem;
    }

    /* Profile image */
    .frame-33 .ellipse-2 {
        width: 65px;
        height: 65px;
        position: absolute;
        left: 15px;
        bottom: -32px;
        border: 3px solid white;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 2;
    }
}

/* Mobile breakpoint */
@media screen and (max-width: 480px) {
    .frame-33 {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Profile image moves above details */
    .frame-33 .ellipse-2 {
        width: 295px;
        height: 200px;
        position: relative;
        bottom: 0;
        left: 0;
        border: none;
        box-shadow: none;
        border-radius: 10px;
        margin-bottom: 6px;
    }

    .profile-details {
        width: 260px;
        height: 110px;
        position: relative;
        padding: 0.75rem;
    }

    /* Floral design adjustment */
    .feed .OBJECTS {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 8px;
        right: 0;
        left: auto;
        z-index: 0;
        margin-right: -15px;

        .details-content {
            position: relative;
            z-index: 1;
        }

        .details-container {
            position: absolute;
            top: 25px;
            right: 12px;
            z-index: 2;
            gap: 3px;
        }

        /* Text styles */
        .full-name {
            font-size: 16px;
            position: relative;
            z-index: 2;
            margin-bottom: 6px;
        }

        .birth-date,
        .death-date,
        .address {
            font-size: 9px;
            position: relative;
            z-index: 2;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.2;
        }
    }

    /* Base styles - Desktop */
    .frame-33 {
        display: flex;
        width: 248px;
        align-items: center;
        gap: 2px;
        position: relative;
        flex: 0 0 auto;
        cursor: pointer;
        text-decoration: none;
    }

    .profile-details {
        position: relative;
        width: 400px;
        height: 154px;
        padding: 1.5rem;
        background-color: #99582a;
        border-radius: 5px;
        color: white;
        overflow: hidden;
    }

    .frame-33 .ellipse-2 {
        position: relative;
        width: 150px;
        height: 150px;
        border-radius: 10%;
        object-fit: cover;
    }

    /* Floral design */
    .feed .OBJECTS {
        position: absolute;
        width: 174px;
        height: 196px;
        top: 5px;
        left: 220px;
    }

    /* Details content */
    .details-content {
        position: relative;
        z-index: 1;
    }

    .details-container {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Tablet breakpoint */
    @media screen and (max-width: 768px) {

        /* Profile section */
        .frame-33 {
            width: 100%;
            position: relative;
            display: grid;
            gap: 0;
        }

        .profile-details {
            width: 400px;
        }

        /* Profile image */
        .frame-33 .ellipse-2 {
            width: 75px;
            height: 75px;
            position: absolute;
            left: 15px;
            bottom: -38px;
            border: 3px solid white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            z-index: 2;
        }
    }

    /* Mobile breakpoint */
    @media screen and (max-width: 480px) {

        .frame-33 {
            display: flex;
            flex-direction: column;
        }

        /* Profile image moves above details */
        .frame-33 .ellipse-2 {
            width: 295px;
            height: 265px;
            position: relative;
            bottom: 0;
            left: 0;
            border: none;
            box-shadow: none;
            border-radius: 10px;
            margin-bottom: 10px;
        }

        .profile-details {
            width: 260px;
            position: relative;
        }

        /* Floral design adjustment */
        .feed .OBJECTS {
            position: absolute;
            width: 120px;
            height: 120px;
            top: 12px;
            right: 0;
            left: auto;
            z-index: 0;
            margin-right: -20px;
        }

        .details-content {
            position: relative;
            z-index: 1;
        }

        .details-container {
            position: absolute;
            top: 30px;
            right: 15px;
            z-index: 2;
        }

        /* Text styles */
        .full-name {
            font-size: 18px;
            position: relative;
            z-index: 2;
        }

        .birth-date,
        .death-date,
        .address {
            font-size: 10px;
            position: relative;
            z-index: 2;
            color: rgba(255, 255, 255, 0.9);
        }
    }
}


/* Contributor commnent style */

/* Updated contributor content styles */
.contributor-single-content {
    background-color: #B3724C; /* Brown background color */
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
    color: #fff;
    position: relative;
    overflow: hidden;
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M100 0c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10 4.477-10 10-10zm50 30c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5 2.24-5 5-5zm-90 10c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5 2.24-5 5-5zm130-10c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5 2.24-5 5-5zM30 60c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5 2.24-5 5-5zm80 0c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5 2.24-5 5-5zm50 10c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5 2.24-5 5-5zm-90 10c2.76 0 5 2.24 5 5s-2.24 5-5 5-5-2.24-5-5 2.24-5 5-5z'/%3E%3C/g%3E%3C/svg%3E");
    background-position: right top;
    background-repeat: repeat;
    background-size: 120px;
}

/* Text content */
.contributor-text {
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    margin-bottom: 12px;
}

/* Contributor info section */
.contributor-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Contributor name */
.contributor-name {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Heart icon and count */
.contributor-heart {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Updated heart icon for light color */
.heart-icon path {
    fill: rgba(255, 255, 255, 0.9);
}

/* Likes count */
.content-likes-count {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
}

/* Container transitions */
.contributor-content {
    padding: 16px;
    transition: all 0.3s ease-in-out;
}

/* Loading and empty states */
.loading, .no-contributors, .error {
    text-align: center;
    padding: 15px;
    color: #B3724C;
    font-size: 14px;
    background: rgba(179, 114, 76, 0.1);
    border-radius: 8px;
    margin: 10px 0;
}

/*Content Image */
.user-post-image {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}