body {
     font-family: 'Poppins', sans-serif;
     background: #fdfdfd;
     padding: 20px;
     margin: 0;
 }

 .facebook {
     background: #3b5998;
 }

 .whatsapp {
     background: #25d366;
 }

 .twitter {
     background: #1da1f2;
 }

 .email {
     background: #ea4335;
 }

 h2 {
     text-align: left;
     /*color: #f5531a;*/
     color: #00A200;
     font-size: 22px;
     font-weight: 600;
     margin: 0 0 30px;
 }

 .gallery-wrapper {
     max-width: 500px;
     margin: 0 auto;
 }

 .main-image {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
 }

 .main-image img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: 12px;
     opacity: 1;
     transition: opacity 0.4s ease-in-out;
 }

 .main-image img.fade {
     opacity: 0.2;
 }

 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     background: #fff;
     padding: 10px 20px;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
     position: sticky;
     top: 0;
     z-index: 999;
 }

 .urgent-badge {
     position: absolute;
     top: 0px;
     right: 0px;
     background-color: #00A200;
     color: white;
     padding: 6px 16px;
     border-radius: 19px;
     font-weight: 600;
     font-size: 14px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
     z-index: 1;
 }

 .thumbnail-list {
     display: flex;
     overflow-x: auto;
     white-space: nowrap;
     gap: 10px;
     margin-top: 15px;
     padding-bottom: 5px;
     scrollbar-width: none;
 }

 .thumbnail-list::-webkit-scrollbar {
     display: none;
 }

 .thumbnail {
     width: 60px;
     height: 60px;
     border-radius: 19px;
     overflow: hidden;
     cursor: pointer;
     border: 2px solid transparent;
     flex-shrink: 0;
 }

 .thumbnail img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 10px;
 }

 .thumbnail.active {
     border-color: #00A200;
     box-shadow: 0 0 0 2px #00A20033;
 }

 .donation-social {
     text-align: center;
     margin-top: 30px;
 }

 .donation-social p {
     font-size: 14px;
     margin: 8px 0;
 }

 .social-icons {
     display: flex;
     justify-content: center;
     gap: 12px;
     margin-top: 10px;
 }

 .social-icons a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     text-decoration: none;
 }

 .social-icons img {
     width: 20px;
     height: 20px;
 }

 .facebook {
     background: #3b5998;
 }

 .whatsapp {
     background: #25d366;
 }

 .twitter {
     background: #1da1f2;
 }

 .email {
     background: #ea4335;
 }

 @media (max-width: 500px) {
     .thumbnail {
         width: 50px;
         height: 50px;
     }
 }




 body {
     font-family: 'Poppins', sans-serif;
     margin: 0;
     padding: 30px 190px;
     background: #fdfdfd;
 }

 .story-qr-section {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
     justify-content: center;
 }

 .qr-box {
     flex: 1;
     background: white;
     padding: 20px;
     border-radius: 15px;
     text-align: center;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
     min-width: 300px;
 }

 .qr-box h4 {
     margin-top: 0;
     margin-bottom: 10px;
     font-weight: 500;
     position: relative;
     font-size: 16px;
 }

 .qr-box h4::before,
 .qr-box h4::after {
     content: "";
     position: absolute;
     width: 40px;
     height: 1px;
     background: #333;
     top: 50%;
 }

 .qr-box h4::before {
     left: 0;
 }

 .qr-box h4::after {
     right: 0;
 }

 .qr-box img.qr-img {
     width: 200px;
     margin: 0px 10px;
     border-radius: 10px;
     border: 1px solid #ddd;
 }

 .payment-icons img {
     width: 250px;
     /* enlarged */
     margin-top: 15px;
     border-radius: 8px;
 }

 .story {
     flex: 2;
     background: white;
     padding: 19px;
     border-radius: 15px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
 }

 .story h2 {
     font-weight: 500;
     margin-bottom: 15px;
     margin-top: 0px;
     /* or even 5px */
 }

 .story p {
     font-size: 12px;
     line-height: 1.8;
     font-weight: 400;
     color: #333;
 }

 .story img {
     width: 80%;
     margin: 20px auto 0;
     display: block;
     border-radius: 10px;
 }

 @media (max-width: 768px) {
     body {
         padding: 20px;
     }

     .story img {
         width: 100%;
     }

     .payment-icons img {
         width: 199px;
         /* NEW - much larger */
         margin-top: 0px;
         border-radius: 8px;
     }
 }


 body {
     font-family: 'Poppins', sans-serif;
     background: #fdfdfd;
     padding: 30px 50px;
 }

 @media (max-width: 768px) {
     body {
         padding: 20px 15px;
     }
 }

 .contribution-section {
     max-width: 800px;
     margin: 0 auto;
     background: white;
     padding: 20px;
     border-radius: 15px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
 }

 .contribution-section h3 {
     font-weight: 600;
     margin-bottom: 20px;
     font-size: 14px;
     text-decoration: underline;
     cursor: pointer;
 }

 .accordion {
     border: 1px solid #ddd;
     border-radius: 8px;
     overflow: hidden;
 }

 .accordion-item {
     border-bottom: 1px solid #ddd;
 }

 .accordion-header {
     padding: 9px 19px;
     background: #fff;
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-weight: 600;
     font-size: 14px;
     color: #00A200;
 }

 .accordion-header:hover {
     background: #f3fef3;
 }

 .accordion-header.active {
     color: #00A200;
 }

 .accordion-header.active::after {
     content: "–";
     font-size: 20px;
 }

 .accordion-header::after {
     content: "+";
     font-size: 20px;
     margin-left: 10px;
 }

 .accordion-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.9s ease;
     padding: 0 30px;
     font-size: 12px;
     background: #fff;
 }

 .accordion-content.open {
     padding: 15px 30px;
 }

 .accordion-content ul {
     padding-left: 20px;
     margin: 0;
 }

 .contribution-text {
     margin-top: 9px;
     font-size: 12px;
 }

 .contribution-text p {
     margin-bottom: 0px;
     line-height: 1.6;
 }

 .contribution-text img {
     width: 100%;
     border-radius: 12px;
     margin-top: 20px;
 }




 body {
     font-family: 'Poppins', sans-serif;
     background: #fdfdfd;
     padding: 30px 20px;
     max-width: 600px;
     margin: 0 auto;
 }

 .donation-social {
     text-align: center;
     margin-bottom: 40px;
 }

 .donation-social p {
     font-size: 14px;
     margin: 10px 0;
 }

 .donation-social .highlight {
     font-weight: 600;
     font-size: 15px;
 }

 .social-icons {
     margin: 10px 0;
 }


 .social-icons img {
     width: 20px;
     height: 20px;
 }

 .facebook {
     background: #3b5998;
 }

 .whatsapp {
     background: #25d366;
 }

 .twitter {
     background: #1da1f2;
 }

 .email {
     background: #ea4335;
 }

 .faq-contact {
     text-align: center;
     font-size: 14px;
 }

 .faq-contact p {
     margin: 10px 0;
 }

 .faq-contact a {
     color: #00A200;
     text-decoration: none;
 }

 .faq-contact a:hover {
     text-decoration: underline;
 }





 .faq-section {
     max-width: 700px;
     margin: 0 auto;
 }

 .faq-section h2 {
     font-size: 26px;
     font-weight: 700;
     color: #00A200;
     text-align: center;
     margin-bottom: 30px;
     text-decoration: underline;
 }

 .faq {
     border: 2px solid #ddd;
     border-radius: 20px;
     margin-bottom: 15px;
     overflow: hidden;
     transition: border-color 0.3s;
 }

 .faq.active {
     border-color: #00A200;
 }

 .faq-question {
     background: #fff;
     color: #000;
     padding: 18px 20px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .faq-question span {
     font-size: 20px;
     color: #00A200;
 }

 .faq-answer {
     max-height: 0;
     overflow: hidden;
     background: #f9fff9;
     color: #333;
     transition: max-height 0.5s ease, padding 0.5s ease;
     font-size: 14px;
     padding: 0 20px;
 }

 .faq.active .faq-answer {
     max-height: 300px;
     padding: 15px 20px 20px;
 }

 

 .faq-footer {
     max-width: 600px;
     margin: 0 auto;
     background: white;
     padding: 20px 25px;
     border-radius: 12px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
 }

 .faq-footer h3 {
     color: #00A200;
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 10px;
 }

 .faq-footer p {
     font-size: 14px;
     color: #333;
     line-height: 1.6;
 }

 .faq-footer a {
     color: #00A200;
     text-decoration: underline;
 }

 @media (max-width: 480px) {
     body {
         padding: 20px 15px;
     }

     .faq-footer {
         padding: 15px 20px;
     }
 }





 .donate-box-container {
     position: fixed;
     bottom: 20px;
     left: 0;
     right: 0;
     margin: 0 auto;
     background: white;
     padding: 8px;
     box-shadow: 0 -6px 8px -4px rgba(0, 0, 0, 0.1);
     /* top shadow only */
     z-index: 9999;
     border-radius: 0;
     max-width: 100%;
 }

 .fixed-donate {
     display: block;
     background: #00A200;
     color: white;
     text-align: center;
     padding: 14px 24px;
     font-weight: 700;
     font-size: 16px;
     text-decoration: none;
     border-radius: 50px;
 }

 .fixed-donate span {
     display: block;
     font-size: 11px;
     font-weight: 400;
     margin-top: 2px;
 }

 @media (max-width: 480px) {
     .donate-box-container {
         width: 100%;
         padding: 12px;
         bottom: 0px;
         /* ← move down by increasing this value */
     }

     .fixed-donate {
         padding: 12px 10px;
         font-size: 14px;
     }

     .fixed-donate span {
         font-size: 10px;
     }
 }




 .footer {
     background: #5F9033;
     color: white;
     padding: 40px 20px 20px;
     text-align: center;
     position: relative;
 }

 .footer-logo img {
     height: 80px;
     border-radius: 10px;
     margin-bottom: 20px;
 }

 .footer .icon {
     width: 40px;
     margin: 10px auto;
 }

 .footer h4 {
     margin: 15px 0 10px;
     font-weight: 600;
 }

 .footer p {
     margin: 0 0 10px;
     font-size: 14px;
 }

 .footer a {
     color: white;
     text-decoration: none;
     display: block;
     margin: 5px 0;
 }

 .footer a:hover {
     text-decoration: underline;
 }

 .donate-btn {
     background: #f44336;
     padding: 12px 20px;
     color: white;
     font-weight: 600;
     font-size: 14px;
     border-radius: 10px;
     display: inline-block;
     margin: 15px 0;
     text-decoration: none;
 }

 @media (max-width: 480px) {
     .footer-logo img {
         height: 70px;
     }

     .footer .icon {
         width: 30px;
     }
 }

 /* Donation amount buttons - three per row */
 .wcdp_options {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     /* spacing between buttons */
 }

 .wcdp_options li {
     flex: 1 1 30%;
     /* three per row */
     max-width: 30%;
     list-style: none;
 }

 .wcdp_options input[type="radio"] {
     display: none;
     /* hide default radio */
 }





 /* Custom Other amount field styling */
 .wcdp_label_custom_amount {
     display: flex;
     align-items: center;
     gap: 5px;
 }

 .wcdp_cu_field input {
     width: 100%;
     padding: 8px;
     border: 2px solid #00A200;
     border-radius: 6px;
 }

 ol,
 ul {
     padding-left: 0rem;
     margin-right: 0px;
 }

 .donors-section {
     max-width: 600px;
     margin: 0 auto;
 }

 .donor-card {
     background: white;
     border-radius: 10px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
     padding: 8px 12px;
     margin-bottom: 12px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 @media (max-width: 480px) {
     .donor-card {
         flex-direction: row;
         justify-content: space-between;
     }
 }

 .donor-left {
     display: flex;
     flex-direction: column;
 }

 .donor-left strong {
     font-size: 15px;
     font-weight: 600;
     color: #000;
 }

 .donor-left small {
     font-size: 13px;
     color: #777;
     margin-top: 4px;
 }

 .donor-right {
     font-weight: 700;
     font-size: 16px;
     color: #00A200;
 }

 .donors-section h3 {
     font-size: 16px;
     font-weight: 600;
     border-left: 4px solid #00A200;
     padding-left: 10px;
     margin-bottom: 20px;
 }