:root {
--black-color: #000;
--theme-color: #005b9e;
--white-color: #fff;
}
#primary {
width: 100%;
}
.ast-container {
padding: 0 !important;
}
.widget-area {
display: none;
}
.donation-section {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
margin-bottom: 20px;
.hero-section-header {
width: 60%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
.h-s-main {
display: flex;
justify-content: center;
width: 100%;
.left {
width: 100%;
.left-heading {
font-size: 26px;
font-weight: 600;
color: var(--theme-color) !important;
}
p {
text-align: center;
margin-bottom: 0 !important;
}
}
}
}
}
.payment-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 60%;
.p-s-heading {
color: var(--black-color);
font-size: 24px;
font-weight: 550;
}
hr {
width: 100%;
}
.donation-options {
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
width: 100%;
.top {
background-color: var(--theme-color);
border-radius: 6px;
padding: 12px 10px;
width: 100%;
span {
color: var(--white-color);
font-size: 18px;
}
}
.bottom {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
gap: 4px;
width: 100%;
.input-cover {
display: flex;
justify-content: center;
width: 100%;
gap: 10px;
.amount-label {
place-content: center;
color: var(--black-color);
font-size: 18px;
font-weight: 600;
text-align: center;
flex-grow: 1;
cursor: pointer;
width: 100%;
height: 100%;
display: block;
padding: 10px 0px;
}          
.input-cover-child {
background-color: var(--white-color);    
cursor: pointer;
place-content: center;
border-radius: 10px;
width: 100%;
input {
z-index: 99;
position: relative;
}
}
.input-cover-child-l {
width: 100%;
place-content: center;
}
}
.input-cover-child:hover
{
background: #fbf09880;
}      
}
.input-cover-child:has(input[type="radio"]:checked) {
background-color: #fbf09880;
border: 1px solid #e3cf5a;
border-radius: 8px;
}        
}
}
.billing-info {
width: 60%;
.billing-info-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.b-i-heading {
color: var(--black-color);
font-size: 24px;
font-weight: 600;
}
.b-i-line-flex {
display: flex;
gap: 10px;
align-items: center;
width: 100%;
.lable-inp-cover {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
.b-i-label {
font-size: 14px;
font-weight: 550;
text-align: left;
}
}
}
}
.submitBtn {
background-color: var(--theme-color) !important;
font-size: 20px;
font-weight: 600;
} .banner-container {
background-image: url(https://hebrewdict.com/wp-content/uploads/2024/12/banner.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 100vw;
height: 250px;
display: flex;
justify-content: center;
align-items: start;
margin-bottom: 20px;
padding-top: 20px;
.sub-heading {
display: none;
font-size: 38px;
font-weight: 600;
color: var(--black-color) !important;
}
}
.toggle-wrapper {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.toggle-switch {
display: flex;
border-radius: 30px;
background-color: #e7ecf1;
overflow: hidden;
width: fit-content;
}
.option {
padding: 10px 20px;
cursor: pointer;
color: #1a1a1a;
transition: color 0.3s;
}
.option.selected {
background-color: #003087;
color: white;
font-weight: bold;
display: flex;
align-items: center;
border-radius: 30px;
}
@media (max-width:768px) {
.donation-section { 
.h-s-main {
flex-wrap:wrap !important;
.left {
width: 100% !important;
}
.right {
width: 100% !important;
img {
width: 100% !important;
}
}
}
}
.hero-section-header {
width: 90% !important;
}
.payment-section {
width: 90% !important; 
}
.payment-section {
& .donation-options {
.donation-desc {
width: 100%;
}
}
}
.billing-info {
width: 95%;
}
}
@media (max-width: 992px) {
.banner-container {
height: 200px !important;
}
}
@media (min-width: 1500px) {
.billing-info {
width: 40%;
}
.hero-section-header {
width: 40% !important;
}
.payment-section {
width: 40% !important; 
}
}