/* Project Title */
.project {
    color: var(--Primary-800, #0C2A5A);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* See All Button */
.see-all {
    border-radius: 12px;
    border: 1px solid var(--Primary-500, #14489C);
    padding: 15px 24px;
    gap: 8px;
    color: var(--Primary-500, #14489C);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize;
}

    .see-all:hover {
        background: var(--Primary-500, #14489C);
        color: #fff;
    }

/* Projects */
.progress-bar {
    border-radius: 0px 8px 8px 0px;
    background: var(--Secondary-550, #302D4B);
}

/* Donate Card */
.donate-card {

    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
/*    overflow: hidden;*/
    transition: 0.3s all;
}

    /* Image Styling */
    .donate-card img {
        width: 100%;
        height: 200px;
        transition: transform 0.4s ease; /* Smooth image scaling */
    }

    /* Hover effect for image */
    .donate-card:hover img {
        transform: scale(1.3); /* Zoom image on hover */
    }

.donate-card-body {
    padding: 20px;
    padding-bottom: 0px;
}

/* Footer */
.donate-footer {
    padding: 15px;
    background-color: #f9f9f9;
}

/* Donate Button */
.btn-donate {
    border-radius: 8px;
    background: var(--Neutral-300, #F2F2F2);
    color: #000;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: none;
    transition: 0.25s all;
}
.donate-card:hover {
    border: 1px solid #14489C
}
    .donate-card:hover .btn-donate {
        background: var(--Primary-500, #14489C);
        color: #fff;
    }

.btn-donate:hover svg {
    color: #fff !important;
}

/* Card Title */
.card-title {
    color: var(--Neutral-800, #333);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

/* Price and Caption */
.price {
    color: var(--Neutral-700, #666);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.caption {
    color: var(--Neutral-600, #999);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
/* Swiper */
.swiper-container {
    overflow: hidden;
    cursor: grab;
}
.swiper-article{
    overflow:hidden;
}
.mySwiper-article:active {
    cursor: grabbing;
}

.swiper-wrapper {
    display: flex;
    overflow: visible; /* Ensure no extra scrolling occurs */
}

.swiper-button-next, .swiper-button-prev {
    color: #14489C; /* Adjust colors to match your design */
}

.swiper-slide {
    flex-shrink: 0;
    width: auto; /* Adjust width based on the number of cards you want visible */
    overflow: hidden; /* Ensure each slide handles overflow */
}

    .swiper-slide img {
        display: block;
        max-width: 100%;
        height: 200px; /* Keep images responsive */
    }
.mySwiper-article {
    cursor: grab;
}