.container {
    width: 100vw;
    max-width: 100vw;
    padding: 0;
}
	
b, strong {
    font-weight: 700;
}
	
	
@media(max-width: 480px){
	footer > div > div.tw-flex.tw-flex-wrap.tw-justify-between.tw-mt-4.tw-mb-6 > div.tw-w-full.lg\:tw-w-1\/3.tw-px-0.tw-flex.tw-flex-row.tw-items-center.tw-my-4 > div {
		display: grid;
	}
	
	footer > div > div.tw-flex.tw-flex-wrap.tw-justify-between.tw-mt-4.tw-mb-6 > div.tw-w-full.lg\:tw-w-1\/3.tw-px-0.tw-flex.tw-flex-wrap.tw-my-4.tw-justify-end {
		justify-content: flex-start;
	}
}
<script>
// Define global JavaScript variable for cta_text
var cta_text = "Donate";
</script><script>
  // TRACKING CODES for THANKQ
  var source_code = '210/6311/WEB';
  var destination_code = 'UNRESTRICTED';
  var inputPlaceholderText = "Own amount";

  // Store the variables in local storage
  localStorage.setItem('source_code', source_code);
  localStorage.setItem('destination_code', destination_code);
  localStorage.setItem('inputPlaceholderText', inputPlaceholderText);
   
</script>

select[name="subscription-type"] {
  /* Custom styles here */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
} 
/* Add styles for the overlay and loading animation */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
  display: none;
  z-index: 999; /* Ensure overlay is on top */
}

.loading-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

/* Animation for spinner */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
    
/* Customize the label (the container) */
.custom-radio {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
    input.radio-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 50%;
  left: 1.75rem;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  translate: 0 -50%;
  border: 2px solid #204b57;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
input.radio-input:checked + .custom-radio .checkmark{
  border: 2px solid #ffffff;
}
input.radio-input:checked + .custom-radio .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.custom-radio .checkmark:after {
  top: 50%;
  left:50%;
  translate: -50% -50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ffffff;
}

.button-label {
  display: inline-block;
  margin: 0.5em;
  cursor: pointer;
  transition: 0.3s;
  user-select: none;
  width:100%;
}

input:checked + .button-label {
  background: #204b57;
  color: #efefef;
  width:100%;
}

.hidden {
  display: none;
}
    
#payment > ul > li {
        margin-top: -25px;
    margin-bottom: 25px;
}

#section-2-donation-widget {
    background: url(https://legacy.rsbc.org.uk/wp-content/uploads/2024/02/donation_widget_bg.png);
    background-size: cover !important;
}
    
input[name="other_amount"] {
    padding-left: 1px;
    width: 80%;
}

select[name="subscription-type"] {
    background:none;
}

.inputamount {
    display:flex;
    align-items: baseline;
}
	
	
	
.subscription-type-select {
    width: 100%;
    appearance: none; /* Remove default dropdown arrow */
    background-color: transparent; /* Ensure the custom chevron is visible */
}

.chevronr {
	transform: rotate(90deg);
	transition: transform 0.3s;
	display:inline-flex;
	cursor: pointer;
	z-index:0;
}
	
.chevronr.rotated {
    transform: rotate(180deg); /* Rotate chevron by 180 degrees */
}
	
.chevron {
    font-size: 20px;
    transition: transform 0.3s;
    margin-left: -20px;
    position: relative;
    cursor: pointer;
	z-index:0;
}

#subscription-type-select {
	z-index:1;
	position:relative;
}

.dropdown-wrapper.open .chevron {
    transform: rotate(180deg); /* Pointing up when open */
}

.subscription-type-select {
    cursor: pointer;
}

.widget-methods { 
	height: 65px;
}
	
@media(max-width:700px){
	.widget-methods {
		height:auto;
	}
}
	
@media(max-width:640px){
	#section-2-donation-widget {
		background: rgb(32, 75, 87) !important;
		background-size: cover !important;
	}
}


    /* Dynamic theming styles */
    #section-here-to-help-5089 {
        background-color: white;
    }

    #section-here-to-help-5089 h2,
	#section-here-to-help-5089 h1,
    #section-here-to-help-5089 p {
        color: black;

    }

    #section-here-to-help-5089 p > span{
        color: black;
    }
            
            #section-here-to-help-5089 .tw-rounded-full {
                background-color: #000000;
                color: #FFFFFF;
            }


            /* Hover state for buttons can also be themed */
            #section-here-to-help-5089 .tw-rounded-full:hover {
                background-color: #000000;
                color: #000000;
            }
        
    .on-white {
        color:black !important;
    }

    .card-button {
        cursor:pointer;
    }

    #section-here-to-help-5089 .layout_4_button {
        background-color: #000000 !important; /* Set the button background to white */
        color: #FFFFFF !important; /* Set the button text color to black */
    }
    #section-here-to-help-5089 .layout_4_button:hover {
        background-color: #000000 !important; /* Optional: Set the hover background color */
        color: #FFFFFF !important; /* Optional: Set the hover text color */
    }



    .col-img-rsbc img {
        width: 100%; /* Ensure the image takes the full width of the container */
        height: 100%; /* Ensure the image takes the full height of the container */
        object-fit: cover; /* This will make sure the image covers the container fully */
    }
    @media (max-width: 468px) {
        .cta_3_col {
            margin-top:30px;
        }
    }



    .black-on-hover-<?php echo 5173; ?>:hover {
        color:black !important;
    }


    /* Dynamic theming styles */
    #section-here-to-help-5173 {
        background-color: rgb(32, 75, 87);
    }

    #section-here-to-help-5173 h2,
	#section-here-to-help-5173 h1,
    #section-here-to-help-5173 p {
        color: #FFFFFF;

    }

    #section-here-to-help-5173 p > span{
        color: #FFFFFF;
    }
            
            #section-here-to-help-5173 .tw-rounded-full {
                background-color: #FFFFFF;
                color: #000000;
            }


            /* Hover state for buttons can also be themed */
            #section-here-to-help-5173 .tw-rounded-full:hover {
                background-color: #FFFFFF;
                color: #000000;
            }
        
    .on-white {
        color:black !important;
    }

    .card-button {
        cursor:pointer;
    }

    #section-here-to-help-5173 .layout_4_button {
        background-color: #000000 !important; /* Set the button background to white */
        color: #FFFFFF !important; /* Set the button text color to black */
    }
    #section-here-to-help-5173 .layout_4_button:hover {
        background-color: #000000 !important; /* Optional: Set the hover background color */
        color: #FFFFFF !important; /* Optional: Set the hover text color */
    }



    .col-img-rsbc img {
        width: 100%; /* Ensure the image takes the full width of the container */
        height: 100%; /* Ensure the image takes the full height of the container */
        object-fit: cover; /* This will make sure the image covers the container fully */
    }
    @media (max-width: 468px) {
        .cta_3_col {
            margin-top:30px;
        }
    }



    /* Dynamic theming styles */
    #section-here-to-help-7629 {
        background-color: rgb(255, 204, 0);
    }

    #section-here-to-help-7629 h2,
	#section-here-to-help-7629 h1,
    #section-here-to-help-7629 p {
        color: #000000;

    }

    #section-here-to-help-7629 p > span{
        color: #000000;
    }
            
            #section-here-to-help-7629 .tw-rounded-full {
                background-color: #000000;
                color: #FFFFFF;
            }


            /* Hover state for buttons can also be themed */
            #section-here-to-help-7629 .tw-rounded-full:hover {
                background-color: #000000;
                color: #FFFFFF;
            }
        
    .on-white {
        color:black !important;
    }

    .card-button {
        cursor:pointer;
    }

    #section-here-to-help-7629 .layout_4_button {
        background-color: #000000 !important; /* Set the button background to white */
        color: #FFFFFF !important; /* Set the button text color to black */
    }
    #section-here-to-help-7629 .layout_4_button:hover {
        background-color: #000000 !important; /* Optional: Set the hover background color */
        color: #FFFFFF !important; /* Optional: Set the hover text color */
    }



    .col-img-rsbc img {
        width: 100%; /* Ensure the image takes the full width of the container */
        height: 100%; /* Ensure the image takes the full height of the container */
        object-fit: cover; /* This will make sure the image covers the container fully */
    }
    @media (max-width: 468px) {
        .cta_3_col {
            margin-top:30px;
        }
    }