.donation-page .container {
    display: flex;
    flex-direction: column; /* Stack children vertically */
}

.donation-page p {
    font-family: "Lato", sans-serif;
}

.donation-page h1, .donation-page h2 {
    font-family: "Raleway", sans-serif;
}

.donation-banner {
    width: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: orange;
    margin-bottom: 30px;
}

.donation-banner h1 {
    color: white;
    font-size: 48px;
}

.donation-banner p {
    color: white;
    font-size: 30px;
    line-height: 1.2;
}

.donation-banner img {
    width: 500px;
    border-radius: 30px;
}

.donation-page .sections-wrapper {
    display: flex;
    justify-content: space-between; /* Adjust this based on your spacing needs */
}

.donation-page .left-section, .donation-page .right-section {
    flex: 1; /* Adjust the flex-basis as needed to control width */
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    text-align: left; /* Center text alignment */
    flex-direction: column; /* Stack children vertically inside the sections */
    /* Optionally add padding or margins here for spacing */
    margin-right: 50px;
}

.donate-btn {
    align-self: flex-start; /* Aligns the button to the left */
    margin-top: 20px;
}

.donation-banner button {
    width: 200px;
    height: 50px;
    border: none;
    background-color: #add8e6;
    border-radius: 30px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 8px 0 #87b3c9, 0 8px 15px rgba(0, 0, 0, 0.2); /* 3D shadow effect */
    transition: all 0.2s ease; /* Smooth transition for hover and click effects */
}

    .donation-banner button:hover {
        transform: translateY(-2px); /* Slight lift on hover */
        box-shadow: 0 10px 0 #87b3c9, 0 10px 20px rgba(0, 0, 0, 0.2); /* Adjust shadow for hover effect */
    }

    .donation-banner button:active {
        transform: translateY(4px); /* Simulates button being pushed down */
        box-shadow: 0 4px 0 #87b3c9, 0 4px 10px rgba(0, 0, 0, 0.2); /* Minimal shadow when pressed */
    }



.non-profit {
    text-align: center;
    margin-bottom: 80px;
}

.non-profit h2 {
    color: #6a0dad;
}

.non-profit p {
    font-size: 28px;
    line-height: 1.2;
}

.support-our-mission img {
    width: 400px;
}

.support-our-mission img:hover {
    cursor: pointer;
}

.support-our-mission {
    margin-bottom: 80px;
}

.support-our-mission p, .why-donate p, .other-support p {
    font-size: 24px;
    line-height: 1.2;
}

.why-donate {
    margin-bottom: 80px;
}

.donate-now h3 {
    text-align: center;
    color: #ffa500;
    margin-bottom: 30px;
}

.donation-page .donate-now .container {
    max-width: 600px; /* Limits the width of the form for better readability */
    margin: 0 auto; /* Centers the form container */
    padding: 20px;
    background-color: #f4f4f9; /* Light background for the form area */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.donation-page .donate-now form {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between form fields */
}

.donation-page .donate-now label {
    font-weight: bold; /* Makes labels bold */
    margin-bottom: 5px; /* Space between label and input */
    display: block; /* Ensures label is above the input */
    color: #333; /* Dark color for better readability */
    margin-top: 10px;
}

.donation-page .donate-now input,
.donation-page .donate-now select,
.donation-page .donate-now button {
    width: 100%; /* Makes all input elements the same width */
    padding: 10px; /* Padding for better touch interaction */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 4px; /* Rounded edges for inputs */
    font-size: 16px; /* Slightly larger font size for readability */
}

    .donation-page .donate-now input[type="email"],
    .donation-page .donate-now input[type="number"] {
        background-color: #fff; /* White background for input fields */
    }

.donation-page .donate-now button {
    background-color: #ffa500; /* Bootstrap primary color for the button */
    color: white;
    padding: 12px 20px;
    font-size: 18px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

    .donation-page .donate-now button:hover {
        background-color: #0056b3; /* Darker shade on hover */
    }

.donate-now {
    margin-bottom: 80px;
}

.other-support img {
    width: 300px;
}

.purple {
    color: #6a0dad;
}

.blue {
    color: #4a90e2;
}

.titled-header {
    font-size: 30px !important;
    margin-bottom: 30px;
}

.other-support {
    margin-bottom: 80px;
}

.other-support i {
    font-size: 30px !important;
    margin-right: 30px;
}

.other-support .social-icons-inline {
    margin-top: 30px;
}

.orange {
    color: #ffa500;
}

@media (max-width: 992px) { /* For tablets */
    .donation-page .sections-wrapper {
        flex-direction: column; /* Stack sections vertically */
        gap: 20px; /* Add some space between stacked sections */
    }

    .donation-banner img, .support-our-mission img, .other-support img {
        width: 100%; /* Full width on smaller screens */
    }

    .donation-page .left-section, .donation-page .right-section {
        margin-right: 0; /* Remove margin for mobile */
    }

    .donation-banner h1, .donation-banner p, .non-profit p, .support-our-mission p, .why-donate p, .other-support p {
        
    }

    .donation-page {
        margin-top: -10px;
    }

    .support-our-mission img {
        max-width: 200px;
    }

    .other-support .right-section img {
        max-width: 300px;
    }

    .other-support .left-section {
        margin-top: 50px;
    }
}

@media (max-width: 768px) { /* For mobile phones */
    .donation-banner {
        padding-top: 30px;
        padding-bottom: 30px;
    }

        .donation-banner h1 {
            font-size: 36px; /* Smaller headers for mobile */
        }

        .donation-banner p {
            font-size: 20px; /* Smaller paragraph text */
        }

    .non-profit p, .support-our-mission p, .why-donate p, .other-support p {
        font-size: 18px; /* Smaller text for mobile readability */
    }

    .donation-page .donate-now form {
        gap: 10px; /* Smaller gaps in forms for compact appearance */
    }

    .donation-page .donate-now input,
    .donation-page .donate-now select,
    .donation-page .donate-now button {
        padding: 8px; /* Slightly smaller padding for form elements */
    }

    .other-support i {
        font-size: 24px; /* Smaller icons */
        margin-right: 20px; /* Less margin between icons */
    }
}

/* Share section */

/* Styles for social icons */
.social-icons-inline {
    margin-top: 10px;
}

    .social-icons-inline a i {
        font-size: 30px;
        margin-right: 15px;
    }

        .social-icons-inline a i.fa-facebook {
            color: #3b5998;
        }

        .social-icons-inline a i.fa-twitter {
            color: #1da1f2;
        }

        .social-icons-inline a i.fa-whatsapp {
            color: #25D366;
        }

/* Styles for copy link section */
.copy-link {
    margin-top: 20px;
    position: relative; /* Allows the notification to be positioned relative to this container */
}

    .copy-link input {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
    }

    .copy-link button {
        margin-top: 10px;
        width: 100%;
        padding: 10px;
        background-color: #6a0dad;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

        .copy-link button:active {
            transform: translateY(2px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

/* Notification for copying to clipboard */
.copy-notification {
    display: none;
    position: absolute;
    top: 60%;
    right: -180px; /* Adjust this value to position the notification correctly */
    transform: translateY(-50%);
    background-color: #ffc107;
    color: #333;
    padding: 10px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    z-index: 1000;
    white-space: nowrap;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

    .copy-notification.show {
        display: block;
        opacity: 1;
        transform: translateY(-50%) translateX(0);
    }

    .copy-notification.hide {
        opacity: 0;
        transform: translateY(-50%) translateX(-10px);
    }