.donation-banner {
	position: relative;
	padding: 80px 0;
	color: #fff;
	border-radius: 20px;
	overflow: hidden;

    @media screen and (max-width: 768px) {
        margin: 0 4px;
        padding: 60px 16px;
    }
}

.donation-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: brightness(0.55);
	z-index: 1;
}

.donation-content {
	position: relative;
	z-index: 2;
	text-align: left;
    margin: 0 auto;
    max-width: 1320px;
}

.donation-label {
	font-family: 'Closer Text', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: -0.01em;
    color: #FFFFFF;
    padding: 0 0 14px;
    margin: 0 0 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    @media screen and (max-width: 768px) {
        font-size: 16px;
        margin: 0 0 30px;
    }
}

.donation-title {
	font-family: 'Closer Text', sans-serif;
    font-weight: 500;
    font-size: 72px;
    line-height: 104%;
    letter-spacing: -0.02em;
    margin: 0;
    padding: 0 0 80px;

    @media screen and (max-width: 768px) {
        font-size: 32px;
        padding: 0 0 30px;
    }
}

.donation-card {
	background: #F1F5F8;
	padding: 40px;
	border-radius: 20px;
    max-width: 500px;
    margin: 0 auto;

    @media screen and (max-width: 768px) {
        max-width: unset;
        padding: 20px;
    }
}

.donation-card-title {
	font-family: 'Closer Text', sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 110%;
    letter-spacing: -0.02em;
    color: rgba(1, 48, 38, 1);
    padding: 0 0 30px;
    margin: 0;

    @media screen and (max-width: 768px) {
        font-size: 26px;
        padding: 0 0 26px;
        letter-spacing: -0.01em;
    }
}

.donation-amounts {
	/* display: flex;
	flex-wrap: wrap; */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
	row-gap: 10px;
    column-gap: 8px;

    @media screen and (max-width: 768px) {
        row-gap: 6px;
        column-gap: 6px;
    }
}

.amount-btn {
	padding: 10px 20px;
	border-radius: 300px;
	border: 1px solid rgba(0, 71, 53, 1);
	cursor: pointer;
	transition: 0.2s;
    font-family: 'Closer Text', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: -0.01em;
    color: rgba(0, 71, 53, 1);
    background: transparent;

    @media screen and (max-width: 768px) {
        font-size: 14px;
        padding: 12px;
    }
}

.amount-btn.active {
	background: rgba(207, 226, 224, 1);
}

.donate-submit {
    margin-top: 30px;
    width: 100%;
    padding: 16px 0;
    border-radius: 12px;
    background: #004735;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: 'Closer Text', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.01em;

    @media screen and (max-width: 768px) {
        margin-top: 26px;

    }
}

.donate-submit:hover {
    background-color: #CFE2E0;
    color: #004735;
	/* filter: brightness(1.15); */
}

/* mobile */
/* @media (max-width: 600px) {
	.donation-title {
		font-size: 28px;
	}

	.donation-card {
		width: 100%;
	}
} */