#banner h1 {
	font-size: 40px !important;
	color: white;
}

.charity-section {
	padding: 10px 0 20px 0;
}

.charity-section .container {
	display: flex;
	gap: 30px;
}

.charity-section h2 {
	margin-top: 0;
	font-size: 32px;
	line-height: normal;
	color: black;
}

.charity-section p {
	color: black;
}

.charity-section.light-text h2 {
	color: white;
}
.charity-section.light-text p {
	color: white;
}

.charity-section .read-more {
	position: relative;
	font-size: 1.2em;
    color: #000;
    transition: all 0.3s;
    position: relative;
    padding-bottom: 3px;
}
.charity-section .read-more:hover {
	color: green;
}

.charity-section.light-text .read-more {
	color: white;
}
.charity-section.light-text .read-more::after {
	background-color: white;
}

.charity-section .read-more::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background-color: #013220;
  transition: width 0.3s ease;
}

.charity-section .read-more:hover::after {
  width: 100%;
}

.charity-section .text-section {
	width: 50%;
}
.charity-section .logo-section {
	width: 50%;
	display: flex;
}

.charity-section .logo-section img {
	width: 300px;
	height: auto;
	object-fit: contain;
}

.charity-section:nth-of-type(2n) .text-section {
	order: 2;
}
.charity-section:nth-of-type(2n) .logo-section {
	order: 1;
}

@media screen and (max-width: 820px) { 
	.charity-section h2 {
		text-align: center;
	}
	
	.charity-section .container {
		flex-direction: column;
		gap: 40px;
	}
	
	.charity-section .text-section {
		width: 100%;
		order: 1 !important;
	}
	
	.charity-section .logo-section {
		width: 100%;
		order: 2 !important;
	}
	
	.charity-section .logo-section img {
		display: block; 
		margin-left: auto; 
		margin-right: auto;
	}
}