/* News Section Styling */
.news-section {
    padding: 40px;
    background-color: #f9f9f9;
    text-align: center;
}

.news-section h2 {
    font-size: 2.5rem;
    color:#FF6600;
    margin-bottom: 40px;
}

/* News Images Container */
.news-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

/* News Item Styling */
.news-item {
    flex: 1 1 calc(20% - 20px);
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Image Styling */
.news-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

/* News Details (Hidden by Default) */
.news-details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background:#FF6600;
     /* rgba(0, 0, 0, 0.6); */
    color: #fff;
    padding: 20px;
    border-radius: 8px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    opacity: 0;
}

/* Show details on hover */
.news-item:hover .news-details {
    transform: translateY(0);
    opacity: 1;
}

/* News Details Paragraph */
.news-details p {
    font-size: 1rem;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .news-item {
        flex: 1 1 calc(50% - 20px);
        
    }
}

@media (max-width: 480px) {
    .news-item {
        flex: 1 1 100%;
    }
    .news-section {
      padding:5px;
      margin:10px;
    }
}
/* Gallery container */
.album {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  
  /* Main container for all the images */
  .responsive-container-block.bg {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;  /* Space between columns */
    max-width: 1300px;  /* Max width to contain 3 columns */
  }
  
  /* Each row containing 3 images */
  .responsive-container-block.img-cont {
    display: flex;
    flex-direction: column;
    gap: 20px;  /* Space between rows */
    width: 280px;  /* Each image container will have 280px width */
  }
  
  /* Style for images */
  .img {
    width: 280px;
    height: 250px;
    object-fit: cover;  /* Ensures images cover the div without distortion */
    border-radius: 5px;  /* Optional: Add rounded corners */
    cursor: pointer;
      
    transition: transform 0.2s;
  }
  .img:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
  }
  
  /* Optional: Add some style to the last image if you want to give it a special style */
  .img-last {
    /* Example: Add a border to the last image */
    
  }
  
  /* Optional: Add style for bigger images, if needed */
  .img-big {
    height: 270px;  /* Optional: make some images slightly bigger */
  }
  
  /* Responsive design: stack images vertically for smaller screens */
  @media (max-width: 768px) {
    .responsive-container-block.bg {
      flex-direction: column;
      align-items: center;
    }
    .responsive-container-block.img-cont {
      width: 100%;  /* Make each image container take full width */
    }
    .img {
      width: 100%;  /* Make images full-width on small screens */
      height: auto;  /* Keep the aspect ratio */
    }
  }

  
  /*donation section donation section donation section*/
  .dddonation-section {
    /* background: linear-gradient(135deg, #FF7518, #FF7518); */
    background-color: #dddddd;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    color: black;
}

.dddonation-container {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    width: 100%;
    justify-content: center;
}

.qr-code {
    text-align: center;
    background: #fff;
    border-radius: 10px;
    padding: 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.qr-code img {
    width: 230px;
    height: auto;
    margin-bottom: 10px;
    border-radius: 8px;
}

.qr-code p {
    font-size: 16px;
    color: #333;
    margin: 0;
    font-weight: bold;
}

.bank-details {
    max-width: 600px;
}

.dddonation-heading {
    font-size: 24px;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 700;
    color: #FF6600;
}

.dddetails-card {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: #333;
}

.dddetails-card p {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dddetails-card p i {
    color: #FF6600;
    font-size: 18px;
}
/* Small Screens (Mobile) */
@media screen and (max-width: 480px) {
  .qr-code img {
      width: 190px;
  }

  .qr-code p {
      font-size: 14px;
  }

  .dddonation-heading {
      font-size: 18px;
      margin-bottom: 10px;
  }

  .dddetails-card {
      padding: 10px;
  }

  .dddetails-card p {
      font-size: 13px;
      gap: 5px;
  }

  .dddetails-card p i {
      font-size: 16px;
  }
}