.elementor-128 .elementor-element.elementor-element-5d602c88:not(.elementor-motion-effects-element-type-background), .elementor-128 .elementor-element.elementor-element-5d602c88 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#C7253E;}.elementor-128 .elementor-element.elementor-element-5d602c88 > .elementor-background-overlay{background-image:url("https://ppitpeduli.puspitur.com/wp-content/uploads/2025/02/Merah-Putih-Tegas-Modern-Hari-Donor-Darah-Sedunia-Poster-80-x-59.4-cm-2.png");opacity:0.15;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-128 .elementor-element.elementor-element-5d602c88 > .elementor-container{max-width:1000px;}.elementor-128 .elementor-element.elementor-element-5d602c88{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0px;margin-bottom:0px;padding:70px 50px 50px 50px;}.elementor-128 .elementor-element.elementor-element-5d602c88 > .elementor-shape-bottom svg{width:calc(199% + 1.3px);height:51px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-128 .elementor-element.elementor-element-5b73e92a .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:51px;font-weight:900;color:#FFFFFF;}.elementor-widget-text-editor{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-128 .elementor-element.elementor-element-39d383d9 > .elementor-widget-container{margin:-12px 0px 0px 0px;}.elementor-128 .elementor-element.elementor-element-39d383d9{color:#FFFFFF;font-family:"Montserrat", Sans-serif;font-size:16px;font-weight:400;}.elementor-128 .elementor-element.elementor-element-1801a95b > .elementor-container{max-width:1000px;}.elementor-128 .elementor-element.elementor-element-1801a95b{padding:030px 0px 0px 0px;}.elementor-128 .elementor-element.elementor-element-7c78e546 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-weight:700;color:#C7253E;}.elementor-widget-accordion .elementor-accordion-icon, .elementor-widget-accordion .elementor-accordion-title{color:var( --e-global-color-primary );}.elementor-widget-accordion .elementor-accordion-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-accordion .elementor-active .elementor-accordion-icon, .elementor-widget-accordion .elementor-active .elementor-accordion-title{color:var( --e-global-color-accent );}.elementor-widget-accordion .elementor-active .elementor-accordion-icon svg{fill:var( --e-global-color-accent );}.elementor-widget-accordion .elementor-accordion-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-accordion .elementor-tab-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-accordion-item{border-width:1px;border-color:#38A2879C;}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-accordion-item .elementor-tab-content{border-width:1px;border-top-color:#38A2879C;}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-accordion-item .elementor-tab-title.elementor-active{border-width:1px;border-bottom-color:#38A2879C;}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-accordion-icon, .elementor-128 .elementor-element.elementor-element-49158422 .elementor-accordion-title{color:#FABC3F;}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-accordion-icon svg{fill:#FABC3F;}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-active .elementor-accordion-icon, .elementor-128 .elementor-element.elementor-element-49158422 .elementor-active .elementor-accordion-title{color:#BDA137;}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-active .elementor-accordion-icon svg{fill:#BDA137;}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-accordion-title{font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:600;line-height:1.3em;}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-tab-title .elementor-accordion-icon i:before{color:#FABC3F;}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-tab-title .elementor-accordion-icon svg{fill:#FABC3F;}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-accordion-icon.elementor-accordion-icon-left{margin-right:3px;}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-accordion-icon.elementor-accordion-icon-right{margin-left:3px;}.elementor-128 .elementor-element.elementor-element-49158422 .elementor-tab-content{color:#7A7A7ACC;font-family:"Roboto", Sans-serif;font-size:13px;font-weight:400;line-height:1.7em;}.elementor-128 .elementor-element.elementor-element-385d3f80 > .elementor-widget-container{background-color:#FABC3F;padding:010px 020px 20px 010px;border-radius:10px 10px 10px 10px;}.elementor-128 .elementor-element.elementor-element-385d3f80{color:#FFFFFF;font-family:"Montserrat", Sans-serif;font-size:13px;font-weight:400;line-height:1.7em;text-shadow:0px 0px 10px rgba(0,0,0,0.3);}:root{--page-title-display:none;}@media(min-width:768px){.elementor-128 .elementor-element.elementor-element-37f425de{width:100%;}.elementor-128 .elementor-element.elementor-element-32338ee6{width:63.3%;}.elementor-128 .elementor-element.elementor-element-10b9cd7b{width:36.5%;}}@media(max-width:767px){.elementor-128 .elementor-element.elementor-element-5d602c88:not(.elementor-motion-effects-element-type-background), .elementor-128 .elementor-element.elementor-element-5d602c88 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:cover;}.elementor-128 .elementor-element.elementor-element-5d602c88{padding:30px 30px 30px 30px;}.elementor-128 .elementor-element.elementor-element-5b73e92a{text-align:center;}.elementor-128 .elementor-element.elementor-element-5b73e92a .elementor-heading-title{font-size:38px;}.elementor-128 .elementor-element.elementor-element-39d383d9{text-align:center;font-size:12px;}.elementor-128 .elementor-element.elementor-element-1801a95b{padding:020px 015px 030px 015px;}.elementor-128 .elementor-element.elementor-element-32338ee6 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-128 .elementor-element.elementor-element-7c78e546{text-align:center;}}/* Start custom CSS for html, class: .elementor-element-185a22c5 */body {
    font-family: Arial, sans-serif;
    background-color: #f3f7f0;
    color: #333;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.tabs {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.tab-btn {
    flex: 2;
    padding: 10px;
    cursor: pointer;
    background-color: white;
    color: #FABC3F;
    border-color: #FABC3F;
    border: 0.5px solid #FABC3F;
    border-radius: 0px;
    transition: background-color 0.3s ease;
}

.tab-btn.active {
    background-color: #C7253E;
    color: white;
}

.tab-btn:hover {
    background-color: #C7253E;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

label {
    display: block;
    margin: 10px 0 5px;
}

input[type="text"] {
    width: calc(100% - 20px);
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
}

button {
    padding: 10px 15px;
    background-color: #C7253E;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left:auto;margin-right:auto;
}

button:hover {
    background-color: #FABC3F;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #ccc;
    width: 80%;
    max-width: 400px;
    border-radius: 10px;
    text-align: center;
}

.close-button {
    padding: 10px 15px;
    background-color: white;
    color: #28a745;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
    transition: background-color 0.3s ease;
}

.close-button:hover {
    color: white;
    background-color: red;
    
}

.modal-buttons {
    margin-top: 20px;
}

.donate-button {
    float: right;
    padding: 10px 15px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
    transition: background-color 0.3s ease;
}

.donate-button:hover {
    background-color: #C7253E;
}

.donate-button2 {
    padding: 10px 15px;
    background-color: white;
    color: #28a745;
    border-color: green;
    border: 0.5px solid #28a745;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 5px;
    transition: background-color 0.3s ease;
}

.button-container {
    display: flex; /* Use flexbox for alignment */
    justify-content: center; /* Center the buttons horizontally */
    align-items: center; /* Center vertically if needed */
    margin: 0 auto; /* Ensure the container is centered within the form */
    max-width: 500px; /* Optional: Limit the width of the button area */
}

.button-container button {
    margin: 0 5px; /* Small gap between the buttons (left and right margins) */
    padding: 10px 20px; /* Adjust button size */
    font-size: 16px; /* Adjust font size */
    cursor: pointer; /* Pointer cursor for hover effect */
}


    .grey-text {
        color: #FABC3F;
         opacity: 0.7;
    }/* End custom CSS */