/* General styling */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.elementor-row, .elementor-widget-wrap {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping */
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

/* Ensure columns take up 50% width on large screens */
.elementor-column {
    flex: 1 1 50%;
    box-sizing: border-box;
    padding: 20px;
}

/* Ensure the .elementor-icon-box-wrapper behaves as expected */
.elementor-icon-box-wrapper {
    flex: 1 1 50%; /* Default: 50% width for large screens */
    padding: 20px; /* Internal spacing within each box */
    margin: 20px; /* External spacing between boxes */
    box-sizing: border-box;
    text-align: center;
    background-color: #f0f0f0;
    border: 1px solid #ddd;
}


/* Media query for small screens */
@media (max-width: 768px) {
    .elementor-icon-box-wrapper {
        flex: 1 1 100%; /* Full width on smaller screens */
        margin: 10px;
    }
    .elementor-column {
        flex: 1 1 100%; /* Ensure parent column also spans full width */
    }
}

/* ---------------------------------------------------------------------------------for the overflow of description */

/* Main container for the blog post */
.pt-blog-post {
    position: relative; /* Ensures child elements are positioned relative to this */
    overflow: hidden; /* Prevents content from spilling outside */
    padding: 15px; /* Add some spacing inside the post */
    border: 1px solid #e0e0e0; /* Optional: for clarity */
    border-radius: 5px; /* Optional: adds rounded corners */
    box-sizing: border-box; /* Ensures padding and borders are included in width/height */
    background-color: #fff; /* Optional: Add background for better visibility */
}

/* Post media (image and date) */
.pt-post-media {
    position: relative; /* Position date within this block */
    margin-bottom: 15px; /* Space below the media */
}

.pt-post-media img {
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* Optional: match the container */
}

/* Description container */
.pt-blog-contain {
    overflow: hidden; /* Prevent overflow of content */
    text-overflow: ellipsis; /* Handle overflowing text gracefully */
    display: block;
}

/* Description text */
.pt-blog-contain p {
    margin: 10px 0; /* Adds vertical spacing */
    font-size: 14px; /* Adjust font size as needed */
    line-height: 1.6; /* Improves readability */
    color: #666; /* Optional: Subdued color */
}

/* Blog title */
.pt-blog-title a {
    font-size: 18px;
    font-weight: bold;
    color: #333; /* Optional: Better color contrast */
    text-decoration: none;
}

/* Button styling */
.pt-btn-container .pt-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #007bff; /* Primary button color */
    color: #fff;
    text-align: center;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.pt-btn-container .pt-button:hover {
    background-color: #0056b3; /* Darker on hover */
}
@media (max-width: 768px) {
    .pt-blog-post {
        padding: 10px;
    }

    .pt-blog-title a {
        font-size: 16px;
    }

    .pt-btn-container .pt-button {
        padding: 8px 15px;
    }
}

/* -------------make grid container  */

/* Set up the grid container for the two-column layout */
.elementor-element-populated .elementor-widget-wrap .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1st column (image) takes 1 fraction of space, 2nd column (content) takes 2 fractions */
    gap: 20px;  /* Optional: adds space between the columns */
    align-items: start; /* Align items to the top of the grid container */
}

/* Style for the image column */
.elementor-element-populated .elementor-widget-wrap .image-column img {
    width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
}

/* Style for the content column */
.elementor-element-populated .elementor-widget-wrap .content-column {
    text-align: left; /* Default text alignment */
}

/* Style for the content-wrapper div to stack the heading and description */
.elementor-element-populated .elementor-widget-wrap .content-column .content-wrapper {
    display: flex;
    flex-direction: column; /* Stack the heading and description vertically */
    gap: 20px; /* Space between heading and description */
}

/* Style for the heading div */
.elementor-element-populated .elementor-widget-wrap .content-column .heading-div h2 {
    margin: 0; /* Remove default margin */
    font-size: 24px; /* Optional: adjust heading size */
    font-weight: bold; /* Optional: make the heading bold */
}

/* Style for the description div */
.elementor-element-populated .elementor-widget-wrap .content-column .description-div p {
    margin: 0; /* Optional: remove margin around the paragraph */
    font-size: 16px; /* Optional: adjust font size for the description */
    line-height: 1.6; /* Optional: adjust line height for readability */
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .elementor-element-populated .elementor-widget-wrap .grid-container {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }

    .elementor-element-populated .elementor-widget-wrap .image-column img {
        width: 100%; /* Make the image responsive */
    }

    .elementor-element-populated .elementor-widget-wrap .content-column {
        text-align: center; /* Center the content in the right column */
    }
}