.ticker-container {
	background-color: #00CCCC; /* Bright color to draw attention */
	padding: 20px 0;
	overflow: hidden;
	position: -webkit-sticky; /* Safari */
	position: sticky; /* Sticky for all other modern browsers */
	top: 0;
	z-index: 1000; /* Ensure the banner stays on top */
	white-space: nowrap;
	width: 100%; /* Ensure the banner takes the full width of the page */
	border-bottom: 1px solid #F60;
	#border-top: 2px solid #ff8d1d;
}

/* ====== Ticker-Tape ====== */
.ticker-tape-section {
    overflow: hidden;
    margin: 10px -10px;
}

.ticker-tape-section__container {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    white-space: nowrap; /* Prevent wrapping */
}

.ticker-tape__text-block--one {
    display: inline-flex;
    justify-content: flex-start;
    margin-right: 100px; /* Add space between blocks */
    animation: autoSliderOne 100s linear infinite; /* Animation for the first block */
	animation-delay: -40s; /* Start halfway through the animation */
}

.ticker-tape__text-block--two {
    display: inline-flex;
    justify-content: flex-start;
    margin-right: 100px; /* Add space between blocks */
    animation: autoSliderTwo 100s linear infinite; /* Animation for the second block */
	animation-delay: -39s; /* Adjust to start at a specific position */
}

.ticker-tape__text-block--three {
    display: inline-flex;
    justify-content: flex-start;
    margin-right: 100px; /* Add space between blocks */
    animation: autoSliderTwo 100s linear infinite; /* Animation for the second block */
	animation-delay: -38s; /* Adjust to start at a specific position */
}

.ticker-tape__text-block--four {
    display: inline-flex;
    justify-content: flex-start;
    margin-right: 100px; /* Add space between blocks */
    animation: autoSliderTwo 100s linear infinite; /* Animation for the second block */
	animation-delay: -37s; /* Adjust to start at a specific position */
}

.ticker-tape--text {
	flex: 1;
	margin-right: 20px;
	font: normal 16px/40px Roboto Condensed, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 0px;            
	color: #ffffff;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Keyframes for Block One */
@keyframes autoSliderOne {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-200%);
    }
}

/* Keyframes for Block Two */
@keyframes autoSliderTwo {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-200%);
    }
}


.donate-button {
	position: absolute;
	left: 10%;
	top: 50%;
	transform: translateY(-50%);
	background-color: #F60; /* Solid background color */
	color: #FFFFFF; /* Text color */
	font-size: 28px;
	font-weight: bold;
	text-shadow: none;
	border: none;
	padding: 20px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	display: flex; /* Flexbox for alignment */
	align-items: center; /* Vertically align items */
	justify-content: space-between; /* Align text to the left and image to the right */
	gap: 10px; /* Space between text and image */
	transition: background-color 0.3s ease;
}

.donate-button__main-text {
	font-size: 28px; /* Large text for "Learn More" */
	font-weight: bold;
	display: block; /* Block display for stacking text */
	margin-bottom: 5px; /* Space between main and sub-text */
}

.donate-button__sub-text {
	font-size: 16px; /* Smaller text for "firestorm relief" */
	font-weight: normal;
	display: block;
}

.donate-button:hover {
	background-color: #BB77BB; /* Darker shade for hover effect */
	text-shadow: none; /* Optional: Keep text clean without shadows */
	color: #FFFFFF; /* Ensure good contrast on hover */
}

.donate-button img {
	height: 60px; /* Adjust image size */
	width: 60px; /* Keep the image proportional */
	margin-left: 0; /* Remove unnecessary margin-left */
	flex-shrink: 0; /* Prevent the image from resizing */
}


.quote-button {
	margin-top: 20px;
	margin-bottom: 20px;
	background: url(../images/donate-button3.jpg) center top repeat-x;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px rgba(255, 255, 255, 0.2);
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.7),
				inset 0px 0px 1px rgba(255, 255, 255, 0.5);
	cursor: pointer;
}
.quote-button:hover {
	background: url(../images/donate-button2.jpg) center top repeat-x;
	color: #fff;
}