/*
Theme Name: Hello Elementor Child
Theme URI: 
Description: Child theme for the Hello Elementor theme
Author:
Author URI:
Template: hello-elementor
Version: 1.0
*/
/* facebook feed css */

        /* Ensure the Facebook Feed container takes full width */
        .cff-wrapper {
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 100%;  /* Ensure it takes full width */
            margin: 0 auto; /* Center the feed horizontally */
            padding: 0; /* Remove any padding */
        }
 
        .cff-posts-wrap {
            display: flex;
            flex-direction: row; /* Align posts in a row */
            gap: 20px;
            width: 100%;
            justify-content: space-between; /* Distribute items evenly */
        }
 
        /* Different styles for left feed section */
        .cff-item.left {
            background-color: #f9f9f9; /* Lighter background for the left item */
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            width: 48%; /* Ensure each item takes up nearly half the width */
            margin: 0;
            position: relative;
            display: flex;
            flex-direction: column;
            height: 450px; /* Set a fixed height for each post */
            justify-content: space-between; /* Distribute space inside the item */
        }
 
        /* Different styles for right feed section */
        .cff-item.right {
            background-color: #ffffff; /* White background for the right item */
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            width: 48%; /* Ensure each item takes up nearly half the width */
            margin: 0;
            position: relative;
            display: flex;
            flex-direction: column;
            height: 450px; /* Set a fixed height for each post */
            justify-content: space-between; /* Distribute space inside the item */
        }
 
        .cff-author {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f1f1f1;
        }
 
        .cff-author-img {
            margin-right: 15px;
        }
 
        .cff-author-img img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
        }
 
        .cff-page-name {
            display: flex;
            flex-direction: column;
        }
 
        .cff-page-name span {
            font-weight: bold;
            font-size: 16px;
        }
 
        .cff-date {
            font-size: 12px;
            color: #888;
        }
 
        .cff-post-text {
            padding: 15px;
            font-size: 14px;
            color: #333;
            flex-grow: 1; /* Allow text to take up remaining space */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* Limit the text to 2 lines */
            -webkit-box-orient: vertical;
        }
 
        .cff-post-text a {
            color: #007bff;
            text-decoration: none;
        }
 
        .cff-post-text a:hover {
            text-decoration: underline;
        }
 
        .cff-media-wrap {
            display: flex;
            justify-content: center;
            padding: 10px;
        }
 
        .cff-photo img {
            max-width: 100%;
            border-radius: 15px;
            max-height: 200px; /* Limiting the image size */
            object-fit: cover;
        }
 
        .cff-meta-wrap {
            padding: 10px;
            text-align: center;
            border-top: 1px solid #f1f1f1;
        }
 
        /* Ensure the view post button stays at the bottom of each item */
        .cff-meta-wrap {
            margin-top: auto; /* Push this to the bottom */
        }
 
        /* See More */
        .cff-post-text span.more {
            color: #007bff;
            cursor: pointer;
            font-size: 14px;
        }
 
        .cff-post-text span.more:hover {
            text-decoration: underline;
        }
 
        /* Hide the content after <br> */
        .cff-post-text br + * {
            display: none;
        }
        
        /* Ensure the feed section is fully responsive */
        @media (max-width: 768px) {
            .cff-posts-wrap {
                flex-direction: column; /* Stack the items on smaller screens */
            }
 
            .cff-item {
                width: 100%; /* Make each post take full width on smaller screens */
                height: auto; /* Allow posts to adjust height on mobile */
            }
        }