/* Ensure recommended article images have the same size and aspect ratio */
.recommended-article-card img {
    width: 100%;
    height: 200px; /* fixed height for uniformity */
    object-fit: cover; /* crop and maintain aspect ratio */
    border-radius: 0.5rem; /* consistent rounding */
}

/* Force 2 items per row on all screen sizes */
.recommended-articles .row > div {
    flex: 0 0 50%;
    max-width: 50%;
}

/* Adjust margin for smaller screens */
@media (max-width: 576px) {
    .recommended-articles .row > div {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Soft Palestine Theme for Artikel Section /
.artikel {
background-color: #f4f7f6; / Soft off-white with slight green tint /
color: #3a3a3a; / Dark gray text for readability /
border: 1px solid #7bbf8a; / Soft green border /
border-radius: 8px;
padding: 30px 20px;
box-shadow: 0 0 10px rgba(123, 191, 138, 0.3); / Soft green shadow */
margin-bottom: 40px;
}

.artikel h2.donasi-title {
color: #a33a3a; /* Soft red for title */
font-weight: 700;
margin-bottom: 25px;
text-align: center;
}

.artikel .donasi-icon {
filter: brightness(0.8);
margin: 0 10px;
}

/* Artikel item styling */
.artikel .artikel-item {
background-color: white;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 6px rgba(123, 191, 138, 0.15);
transition: box-shadow 0.3s ease, transform 0.3s ease;
cursor: pointer;
}

.artikel .artikel-item:hover {
box-shadow: 0 8px 20px rgba(123, 191, 138, 0.4);
transform: translateY(-5px);
}

.artikel .artikel-item img {
border-radius: 6px;
margin-bottom: 15px;
width: 100%;
height: auto;
object-fit: cover;
}

.artikel .artikel-item h3 a {
color: #007a3d; /* Dark green links */
text-decoration: none;
transition: color 0.3s ease;
font-size: 1.25rem;
font-weight: 600;
}

.artikel .artikel-item h3 a:hover {
color: #a33a3a; /* Red on hover */
}

.artikel .artikel-item p {
color: #555555;
font-size: 1rem;
margin-bottom: 15px;
line-height: 1.5;
}

/* Video item styling */
.artikel .video-item {
background-color: white;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
box-shadow: 0 2px 6px rgba(123, 191, 138, 0.15);
transition: box-shadow 0.3s ease, transform 0.3s ease;
cursor: pointer;
}

.artikel .video-item:hover {
box-shadow: 0 8px 20px rgba(123, 191, 138, 0.4);
transform: translateY(-5px);
}

.artikel .video-item iframe {
border-radius: 6px;
width: 100%;
height: 250px;
margin-bottom: 15px;
}

.artikel .video-item h3 {
color: #007a3d;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 10px;
}

.artikel .video-item p {
color: #555555;
font-size: 1rem;
margin-bottom: 15px;
line-height: 1.5;
}

/* Button styling */
.artikel .btn-custom {
background-color: #7bbf8a;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
display: inline-block;
}

.artikel .btn-custom:hover {
background-color: #a33a3a;
color: white;
box-shadow: 0 4px 12px rgba(163, 58, 58, 0.6);
}