/* Container for the news section */
.news-section {
    display: flex;
    padding: 20px;
}

/* Grid for news cards */
.news-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}



/* Individual news card */
.news-card {
    flex: 1 1 calc(50% - 20px);
    /* Two cards per row */
    margin-right: 24px
}

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

    /* Adjust the breakpoint as needed */
    .news-card {
        width: 312px;
        /* Set the width to 312px for mobile */
        max-width: 100%;
        /* Prevent it from overflowing the container */
        margin-right: 24px;
    }

    .news-item.horizontal {
        display: contents !important;
    }

    .news-item-content-container {
        width: 312px;
        padding: 0px !important;
    }

    .news-item.horizontal .news-item-image, .news-item.horizontal .news-item-image img {
        width: 100% !important;
        height: 200px !important;
    }
}

/* News image */
.news-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

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

    /* Adjust the breakpoint as needed */
    .news-image {
        max-width: 312px;
        /* Set the width to 312px for mobile */
        margin-right: 24px;
    }
}

/* News content */

.news-image {
    width: 436px;
    /* Set your desired width */
    height: 200px;
    /* Set your desired height */
    overflow: hidden;
    /* Hides the overflow to crop the image */
    position: relative;
    /* Ensures child elements align correctly */
    border-radius: 2px;
}

.news-image img {
    width: 100%;
    /* Ensures the image fills the width */
    height: 100%;
    /* Ensures the image fills the height */
    object-fit: cover;
    /* Crops the image while maintaining aspect ratio */
    object-position: center;
    /* Centers the cropped image */

}

.news-title {
    margin-top: 16px;
    font-weight: 700;
    font-size: 24px;
    font-family: Helvetica;
    color: #0D1E3A
}

.news-overview {
    display: -webkit-box;
    /* Enables Flexbox for Webkit browsers */
    -webkit-box-orient: vertical;
    /* Ensures text flows vertically */
    overflow: hidden;
    /* Hides overflowed text */
    text-overflow: ellipsis;
    /* Adds ellipsis at the end */
    -webkit-line-clamp: 2;
    /* Limits to 2 lines */
    line-height: 1.5;
    /* Adjust line height for better spacing */
    max-height: calc(1.5em * 2);
    /* Adjust height based on line height and number of lines */
    margin-top: 32px;
    font-size: 16px;
    font-family: Helvetica;
    color: #0D1E3A;
}

.news-meta {
    display: flex;
    gap: 4px;
    margin-top: 20px;
    color: #0D1E3A;
}

.news-meta-column {
    width: 210px;
}

.news-form-value {
    font-weight: 700;
    font-size: 14px;
    font-family: Helvetica;
}

.news-form-label {
    font-weight: 400;
    font-size: 14px;
    font-family: Helvetica;
}

.news-status {
    color: #4778FF;
}

.news-details-container-search .news-content,
.news-details-container-search .news-image {
    width: 516px;
    margin-top: 24px;
    margin-right: 24px;
}

#news-list {
    overflow: scroll;
    overflow: auto;
    /* Ensure scrolling still works */
    scrollbar-width: none;
    /* For Firefox */
    -ms-overflow-style: none;
    /* For Internet Explorer and Edge */
}

#news-list::-webkit-scrollbar {
    overflow: scroll;
    overflow: auto;
    /* Ensure scrolling still works */
    scrollbar-width: none;
    /* For Firefox */
    -ms-overflow-style: none;
    /* For Internet Explorer and Edge */
}



/* View All News button */
.news-footer {
    text-align: center;
    margin-top: 20px;
}

.view-all-news {
    display: inline-block;
    padding: 10px 20px;
    background: #007bff;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.view-all-news:hover {
    background: #0056b3;
}

/* What's new widget */

.news-item {
    width: 408px;
    color: var(--e-global-color-text);
    font-family: Helvetica;
    transition: color 0.3s ease;
}

/* News item image styling */
.elementor .news-item-image  img {
    width: 408px;
    /* Set a fixed width of 408px */
    height: 200px;
    /* Set a fixed height of 200px */
    object-fit: cover;
    /* Scale and crop the image to cover the container */
    border-radius: 2px;
    /* Optional: round the corners of the image */
}

/* News item title */
.news-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limit to a maximum of 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 24px;
    font-weight: 700;
    box-sizing: border-box;
    position: relative;
    padding-bottom: 32px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Ensure padding does not affect the total height */
}

.news-item-title::after {
    content: ''; /* Empty content for the pseudo-element */
    position: absolute;
    bottom: 0px; /* Position at the bottom of the text */
    left: 0;
    width: 0; /* Initially no width */
    height: 2px; /* Line thickness */
    background-color: var(--e-global-color-primary);
    transition: width 0.1s ease; /* Transition for width change */
}

.news-item:hover .news-item-title::after {
    width: 100%; /* On hover, the width will expand to 100% */
}

.news-item:hover {
    background-color: #FFF;
    transition: background-color 0.3s ease;
    transition: box-shadow 0.3s ease;
    box-shadow: 0px 4px 20px 0px #0D1E3A1A;
    border-radius: 2px;
}

.news-item:hover .news-item-title {
    color: var(--e-global-color-primary);
    transition: color 0.3s ease;
}


/* News item content (body) */
.news-item-content {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limit to a maximum of 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 400px;
    line-height: 1.6;
    box-sizing: border-box;
    /* Ensure padding does not affect the total height */
    margin-top: 32px;
}

/* Meta information (publish date and read time) */
.news-item-meta {
    font-size: 14px;
    /* Smaller font size */
    margin-top: 16px;
    padding-top: 16px;
    display: flex;
    /* Use flex to arrange items in a row */
    gap: 16px;
    /* Space between Published and Read time */
    border-top: 1px solid #D5D5D5;
}

/* Meta column (for Published and Read time) */
.meta-column {
    display: flex;
    flex-direction: column;
    /* Stack label and value vertically */
    width: 180px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;

}

.meta-column-value {
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0%;

}

.news-item-content-container {
    padding: 16px;
}

#load-more-news, #load-more-news:focus {
    margin-top: 60px;
    width: 156;
    height: 48;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 16px;
    border-radius: 4px;
    border-width: 1px;
    border: 1px solid var(--Main-Blue, #1C6EE8);
    color: var(--Main-Blue, #1C6EE8);
    display: block;
    margin-left: auto;
    background: none;
    margin-right: auto;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-family: Helvetica;
    font-weight: 700;
    font-size: 15px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: right;

}

#load-more-news:hover {
    width: 176;
    height: 56;
    border-radius: 4px;
    border-width: 1px;
    padding-top: 16px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 16px;
    top: 96px;
    left: 20px;
    background: #3D5EFF1A;
    border: 1px solid var(--Main-Blue, #1C6EE8);
}

#load-more-news:hover img {
    transform: scale(1.2);
}

.page-content .news-grid a:hover {
    color: var(--e-global-color-text);
}

.news-item.horizontal {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 20px;
}

.news-item.horizontal .news-item-image, .news-item.horizontal .news-item-image img {
    width: 624px;
    height: 320px;
}

.news-item.horizontal .news-item-content-container {
    flex: 1;
}

.news-item.horizontal .news-item-title {
    margin-bottom: 10px;
}

.news-item.horizontal .news-item-content {
    font-size: 14px;
}

.news-item.horizontal .news-item-meta {
    margin-top: 20px;
}

.news-item.horizontal .meta-column {
    display: inline-block;
    margin-right: 20px;
    display: flex;
}

.news-item.vertical .news-item-content-container {
    padding-top: 10px;
}

.news-item.horizontal h4 {
    font-family: Helvetica;
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;

}