/* Scoped styles for the breadcrumb component */

/* Main container for the breadcrumb navigation */
.breadcrumb-container {
    background-color: #e6e9f8; /* Light blue/lavender background from the image */
    padding: 12px 25px;
    font-family: "Tajawal",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Tajawal";
    font-size: 16px;
}

/* The ordered list containing the breadcrumb items */
.breadcrumb-container .breadcrumb-list {
    display: flex; /* Aligns items in a row */
    align-items: center; /* Vertically centers the items */
    list-style: none; /* Removes the default list bullets */
    margin: 0;
    padding: 0;
}

/* Individual breadcrumb item */
.breadcrumb-container .breadcrumb-item {
    display: flex;
    align-items: center;
}

/* Styling for the separator ('>') */
.breadcrumb-container .breadcrumb-item + .breadcrumb-item::before {
    content: '>'; /* The separator character */
    margin: 0 10px; /* Adds space around the separator */
    color: #8c96b8; /* A slightly muted color for the separator */
    font-size: 14px;
}

/* Styling for the breadcrumb links */
.breadcrumb-container .breadcrumb-item a {
    color: #3b4a74; /* A darker blue for links */
    text-decoration: none;
    transition: text-decoration 0.2s ease-in-out;
}

/* Underline link on hover for better user experience */
.breadcrumb-container .breadcrumb-item a:hover {
    text-decoration: underline;
}

/* Styling for the active (current) page */
.breadcrumb-container .breadcrumb-item.active {
    color: #5c678a; /* A slightly lighter, less saturated color for the current page */
    font-weight: 500;
}
    /* General styling for the articles and resources section */
.articles-resources {
    font-family: "Tajawal";
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.articles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.articles-title {
    font-size: 2.5rem;
    color: BLACK;
    margin: 0;
    font-weight: bolder;
}

.search-container {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 25px;
    padding: 5px 15px;
}

.search-input {
    border: none;
    outline: none;
    font-size: 1rem;
    padding: 5px;
    width: 200px;
}

.search-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.search-icon {
    color: #888;
}

.article-card {
    display: flex;
    gap: 30px;
    align-items: center;
    background-color: #ffffff;
}

.article-image-container {
    flex: 1;
    max-width: 50%;
}

.article-image {
    width: 100%;
    height: auto;
    border-radius: 15px;
    display: block;
}

.article-content {
    flex: 1;
}

.article-title-main {
    font-size: 2rem;
    color: BLACK;
    margin-top: 0;
    margin-bottom: 20px;
}

.article-description {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
}

.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.article-date {
    font-size: 0.9rem;
    color: #777;
    margin: 0;
}

.read-more-link {
    font-size: 1rem;
    color: BLACK;
    text-decoration: none;
    font-weight: bold;
}

.read-more-link:hover {
    text-decoration: underline;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {

    h2.articles-title {
    text-align: center;
    width: 100%;
}
     .custom-search-container {
        max-width: 100% !important;
    }
    .articles-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-card {
        flex-direction: column;
    }

    .article-image-container {
        max-width: 100%;
    }
}.custom-search-container {
    margin-right: 0px !important;
        margin-left: 0px !important;
    padding-right: 35px !important;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 450px; /* Adjust max-width as needed */
    margin: 20px auto; /* Centering for demonstration */
    border: 1.5px solid #a0d9c9; /* Light teal border from the image */
    border-radius: 50px; /* Fully rounded corners */
    padding: 8px 15px;
    background-color: #fff;
    transition: box-shadow 0.3s ease; /* Smooth transition for focus effect */

      appearance: none;
  background-color: rgb(255, 255, 255);
  background-image: url("https://cdn.prod.website-files.com/6180988…/6183fdd…_icon-search-donate-template.svg");
  background-repeat: no-repeat;
  background-position: 95% 50%;
  background-size: auto;

  border: 1px solid rgb(218, 229, 228);
  border-radius: 100000px; /* makes pill shape */
  
  box-shadow: rgba(8, 15, 52, 0.04) 0px 5px 14px 0px;
  box-sizing: border-box;

  color: rgb(25, 71, 78);
  font-family: "Tajawal", "Tajawal";
  font-size: 18px;
  font-weight: 400;
  line-height: 20px;

  height: 70px;
  min-height: 70px;
  width: 660px;

  padding: 8px 65px 8px 25px;

  transition: box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;

}

/* Add a subtle shadow when the search bar is focused */
.custom-search-container:focus-within {
    box-shadow: 0 0 0 3px rgba(160, 217, 201, 0.4);
}

/* The text input field */
.custom-search-input {
    border: none;
    outline: none;
    flex-grow: 1; /* Allows the input to take up available space */
    font-size: 16px;
    color: #555;
    background-color: transparent;
    padding-right: 10px; /* Space between text and icon */
}

/* Styling for the placeholder text */
.custom-search-input::placeholder {
    color: #ababab; /* Gray color for the placeholder text */
    opacity: 1;
}

/* The search button */
.custom-search-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The SVG magnifying glass icon */
.custom-search-icon {
    stroke: #ababab; /* Gray color for the icon */
}

/* On smaller screens, you might want the search bar to take up more width */
@media (max-width: 600px) {
    .custom-search-container {
        max-width: 100%;
    }
}

    /* Scoped styles for the "Latest Posts" section */
.latest-posts-section {
    font-family: "Tajawal", serif; /* A font that matches the style in the image */
    background-color: #f8f9fa; /* Light grey background for the whole section */
    padding: 50px 20px;
    max-width: 1200px;
    margin: 40px auto;
}

/* Header containing title and filter buttons */
.latest-posts-section .latest-posts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    gap: 20px;
}

.latest-posts-section .latest-posts-title {
    font-size: 2.8rem;
    color: BLACK; /* Dark teal color */
    margin: 0;
}

/* Container for filter buttons */
.latest-posts-section .filter-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.latest-posts-section .filter-btn {
    padding: 10px 25px;
    font-size: 1rem;
    font-family: "Tajawal";
    border-radius: 50px; /* Pill shape */
    border: 1px solid #e0e0e0;
    background-color: #ffffff;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.latest-posts-section .filter-btn:hover {
    background-color: #f0f0f0;
}

.latest-posts-section .filter-btn.active {
    background-color: #692672; /* Green color for the active button */
    color: #ffffff;
    border-color: #692672;
    font-weight: bolder;
}

/* Grid for the post cards */
.latest-posts-section .posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Individual post card styling */
.latest-posts-section .post-card {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden; /* Ensures the image corners are rounded */
    display: flex;
    flex-direction: column;
    border: 0px solid rgba(0, 0, 0, 0.125);
    border-radius: 1rem;
    backdrop-filter: saturate(200%) blur(30px);
    background-color: rgb(255 255 255 / 56%);
    box-shadow: rgba(255, 255, 255, 0.9) 0rem 0rem 0.0625rem 0.0625rem inset, rgba(0, 0, 0, 0.05) 0rem 1.25rem 1.6875rem 0rem;
}

.latest-posts-section .post-image-container {
    position: relative;
}

.latest-posts-section .post-image-container img {
    aspect-ratio: 332/223;
    width: 100%;
    height: 200px;
    object-fit: cover; /* Ensures images cover the area without distortion */
    display: block;
}

.latest-posts-section .post-category {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-family: "Tajawal";
    font-weight: 500;
}

.latest-posts-section .post-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows content area to grow */
}

.latest-posts-section .post-title {
    font-size: 1.4rem;
    color: BLACK;
    margin: 0 0 20px 0;
    flex-grow: 1; /* Pushes the footer down */
}

.latest-posts-section .post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #eeeeee;
}

.latest-posts-section .post-date {
    font-size: 0.9rem;
    color: #777;
    font-family: "Tajawal";
}

.latest-posts-section .read-more-link {
    font-size: 1rem;
    color: BLACK;
    text-decoration: none;
    font-weight: bold;
    font-family: "Tajawal";
}

.latest-posts-section .read-more-link:hover {
    text-decoration: underline;
}

/* Responsive adjustments for tablet and mobile screens */

@media (max-width: 850px) {
.latest-posts-section .latest-posts-header {
        flex-direction: column;
        align-items: center;
    }

    .latest-posts-section .latest-posts-title {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .latest-posts-section .latest-posts-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .latest-posts-section .latest-posts-title {
        font-size: 2.4rem;
    }
}