.navbar {
            background-color: #fff; /* Background color of the navbar */
            color: black; /* Text color */
            padding: 10px; /* Adjust the padding as needed */
            display: flex; /* Use flexbox for layout */
            justify-content: space-between; /* Space-between to push logo and link to opposite ends */
            align-items: center; /* Center vertically */
        }

        .navbar-logo {
            font-size: 0px; /* Adjust the font size */
            font-weight: bold; /* Optionally make the text bold */
            text-decoration: none; /* Remove underlines from the link */
            margin-right: auto; /* Push the logo to the left */
        }

        .navbar-logo img {
            width: 100px; /* Adjust the width as needed */
            height: auto; /* Maintain aspect ratio */
        }

        /* Style the "See Our Donors" link */
.see-our-donors {
    font-family: 'Segoe Script', cursive; /* Apply a custom font */
    font-size: 24px; /* Adjust the font size */
    color: #FF5733; /* Text color */
    text-decoration: none; /* Remove underline from the link */
    transition: text-shadow 0.3s ease; /* Add a smooth transition for the text shadow on hover */
}

/* WordArt-like effect and hover effect */
.see-our-donors:hover {
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); /* Text shadow on hover for effect */
    letter-spacing: 2px; /* Adjust letter spacing on hover */
}





/* Style for the Donation Section */
        .donation-section {
            background-color: #f7f7f7;
            background-attachment: fixed;
            padding: 50px 0;
            background-size: cover; /* Cover the entire section with the background image */
            background-position: center center; /* Center the background image */
            background-repeat: no-repeat; /* Prevent background image from repeating */
            color: black; /* Set text color to white or a color that contrasts well with the background image */
        }

        /* CSS for mobile screens (max-width: 768px) */
        @media (max-width: 768px) {
        .donation-section {
            background-size: contain; /* Adjust the background size to 'contain' for mobile screens */
            }

        .donation-form {
            width: 100%!important; /* Set the form width to 100% on mobile screens */
            max-width: 100%!important; /* Remove any maximum width constraint */
            display: block;
            }
        }

        h1.wbg {
            
            font-family: Oswald,sans-serif;
            line-height: 1.2;
            font-weight: 500;
            padding: 0 15px 4px;
            -webkit-box-decoration-break: clone;
            display: inline;
            border-radius: 3px;
            background: #fff;
        }

        .donation-text p {
            font-size: 18px;
            color: #666;
        }

        .red-text {
            color: #da291c;
        }

        .form-header {
            font-style: normal!important;
            font-weight: 700!important;
            font-family: Lato, sans-serif!important;
            color: #da291c!important;
            text-transform: none!important;
            font-size: 23px!important;
            margin: 10px 0!important;
            text-align: center;
        }

        .donation-form {
            background-color: #f7f7f7;
            padding: 30px;
            border: 1px solid #ddd; /* Add a border for separation */
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            max-width: 400px;
            margin: 0 auto;
        }

        .donation-form h2 {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            font-weight: normal;
            display: block;
            margin-bottom: 5px;
            color: #222;
        }

        /* Input Fields */
        input[type="text"],
        input[type="email"],
        input[type="tel"] {
            width: 100%;
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 14px;
            color:#222;
            outline: none;
        }
        
        /* Name Fields */
        .name-fields {
            display: flex;
            justify-content: space-between;
        }
        
        .name-fields .form-group {
            width: 48%;
        }

        /* Style for Payment Symbols */
        .payment-symbols {
            display: flex; /* Display the symbols horizontally */
            justify-content: center; /* Center the symbols horizontally */
            align-items: center; /* Align the symbols vertically */
            margin-top: 20px; /* Adjust margin as needed */
        }

        .payment-symbols ul {
            list-style: none;
            padding: 0;
            display: flex;
            gap: 33px; /* Adjust the spacing between symbols */
            align-items: center; /* Align the symbols vertically */
        }

        .payment-symbols li img {
            width: 40px; /* Adjust the width of the payment symbols */
            height: auto; /* Maintain aspect ratio */
        }
        .form-submit {
            text-align: center; /* Center-align the button within its container */
            padding-top: 20px;
        }

        /* Donate Button */
        .donate-button {
            width: 95%;
            height: 40px;
            background-color: #007bff;
            color: #fff;
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            display: inline-block; /* Display the button as an inline element */
        }
        
        .donate-button:hover {
            background-color: #0056b3;
        }
        
        /* Style for the PayPal button */
        .paypal-button {
            text-align: center; /* Center-align the PayPal button within its container */
            margin-top: 20px; /* Adjust margin as needed */
        
        }
        
        .paypal-link {
            text-decoration: none; /* Remove underlines from the link */
        }
        
        .paypal-button-style {
            width: 200px; /* Adjust the width of the button */
            height: 40px; /* Adjust the height of the button */
            background-color: #007bff; /* Background color of the button */
            color: #fff; /* Text color of the button */
            padding: 8px 16px; /* Padding inside the button */
            border: none; /* Remove the button border */
            border-radius: 5px; /* Add some border radius for rounded corners */
            font-size: 14px; /* Font size of the button text */
            cursor: pointer;
            transition: background-color 0.3s ease; /* Add a smooth transition for the background color on hover */
            display: inline-block; /* Display the button as an inline element */
        }
        
        .paypal-button-style:hover {
            background-color: #0056b3; /* Change the background color on hover */
        }

        
        

        /* Style for the Bank Details and MTN Mobile Money Sections */
        .bank-details,
        .mobile-money-info {
            background-color: #333;
            color: #fff;
            padding: 40px 0;
        }

        .bank-info h3,
        .mobile-money-info h3 {
            font-size: 24px;
            margin-bottom: 20px;
            color: #fff;
        }

        .bank-info ul,
        .mobile-money-info ul {
            list-style: none;
            padding: 0;
        }

        .bank-info li,
        .mobile-money-info li {
            font-size: 18px;
            margin-bottom: 10px;
        }

        .bank-info li strong,
        .mobile-money-info li strong {
            font-weight: bold;
            margin-right: 10px;
        }