.news-card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border: none !important;
}

.news-card img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
}

.card-body {
    padding: 20px;
}

.card-title {
    color: #000;
    font-family: Montserrat;
    font-size: 2.5rem;
    font-weight: 700;
    padding: 2% 0%;
}

.card-text {
    color: var(--dark-gray, #8F8F8F);
    text-align: justify;
    font-family: Roboto;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 30px */
    letter-spacing: 0.2px;
}

.small-article {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.05);
}

/* Default button styles */
.btn-outline-success {
    background-color: transparent;
    color: #198754;
    border: 1px solid #198754;
    transition: 0.3s;
}

/* Active button styling */
.btn-active {
    background-color: #198754 !important;
    color: white !important;
}

.badge{
    border-radius: 24px !important;
    background: #8FB1A9 !important;
    color: var(--green, #035F48) !important;
    font-family: Montserrat !important;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 500 !important;
    line-height: normal !important;
}
.datee{
    color: var(--green, #035F48);
    font-family: Roboto;
    font-size: 20px;
    font-weight: 500;

}





.news-wrapperr{
    display: flex;
    height: 300px;
    padding: 15px 10px;
    align-items: center;
    gap: 30px;
    align-self: stretch;
    width: 100%;
    /* overflow-x: auto; */
}
.news-containerr{
    border-radius: 8px;

background: #FFF;
display: flex;
align-items: center;
gap: 20px;
cursor: grab;
overflow-x: auto;
/* white-space: nowrap; */
scroll-behavior: smooth;

}
.news-containerr.active {
    cursor: grabbing;
}
.news-containerr::-webkit-scrollbar {
    display: none; /* Hide scrollbar in Webkit-based browsers */
}

.news-cardd{
    display: flex;
gap: 20px !important;
border: 1px solid #000;
border-radius: 10px;
}
.news-cardd img {
    border-radius: 8px 0px 0px 8px;
/* background: url(<assets/images/image 22.png'>) lightgray 50% / cover no-repeat; */
width: 220px;
align-self: stretch;
}

.news-contentt{
    display: flex;
    width: 250px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 3%;
;
.news-h5{
    display: flex;
padding: 0px 20px;
flex-direction: column;
align-items: flex-start;
gap: 5px;
align-self: stretch;
}
.svgg{
    display: flex;
padding: 12px 0px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 8px;
}
.news-h5 h5{
    color: #000;
font-family: Roboto;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.news-h5 p{
    color: #000;
text-align: justify;
font-family: Roboto;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.36px;
}
.news-6{
    display: flex;
padding: 12px 20px;
justify-content: space-between;
align-items: center;
border-top: 1px solid #A4A3A3;
align-self: stretch;
}
.news-wrapperr::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome, Safari, and Opera */
}

.news-wrapperr {
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.news-cardd.selected {
    border: 2px solid #007BFF; /* Example: Add a blue border */
    transform: scale(1.05); /* Example: Slightly scale up the selected card */
    transition: transform 0.3s ease, border 0.3s ease;
}

}



/* Responsive Adjustments */
@media (max-width: 768px) {
    .card-title {
        font-size: 18px;
    }

    .card-text {
        font-size: 14px;
    }
}