/* --------------------------------------------------
Project: Forward a miracle
File Type: style.css
Description: Main stylesheet file
Created: 2026-02-25
Last Update: 2026-02-27
--------------------------------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
* { box-sizing: border-box; text-decoration: none; list-style: none; padding: 0; margin: 0; margin-bottom: 0px; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .shimmer-main-content, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; }
*, *:before, *:after { box-sizing: border-box; outline: none; }
html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: initial !important; }
body { color: var(--secondary-white); overflow-x: hidden; font-size: 1rem; font-weight: 400; line-height: 1.5; }
h1, h2, h3, h4, h5, h6 {font-weight: 600; line-height: 1; color: var(--white); line-height: 1; font-family: var(--primary-family); color: var(--primary-purple);}
h1 { font-size: 3.75rem; line-height: 1.2; }
h2 { font-size: 2.5rem; line-height: 1.15; }
h3 { font-size: 2.25rem; line-height: 1.25; }
h4 { font-size: 1.75rem; line-height: 1.5; }
h5 { font-size: 1.125rem; line-height: 1.6; }
h6 { font-size: 1rem; line-height: 1.8; }
p, div, a, button, input, select { font-family: var(--primary-family);}
p {font-size: 1rem; line-height: 1; margin-bottom: 0px;}
a, button {outline: none; text-decoration: none !important; transition: all 0.3s ease-out 0s;line-height: 1;}
select {outline: none; }

/* ----------------
    Custom root 
-----------------*/
:root {
    --primary-family: 'Helvetica Neue';
    --secondary-family: 'Roboto';
    --black: #000000;
	--white: #ffffff;
	--primary-color: #1E95C6;
	--primary-purple: #B37BB5;
    --primary-yellow: #F8F497;
	--secondary-color: #FDFBE3;
}

/* ----------------
    Demo (:root) 
-----------------
    color: var(--primary-color);
    font-family: var(--primary-family);
*/

/* ----------------
    Fonts 
-----------------*/
@font-face {
    font-family: 'Helvetica Neue';
    font-weight: 900;
    font-style: normal;
    src: url('/assets/frontend/fonts/helvetica-black.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica Neue';
    font-weight: 800;
    font-style: normal;
    src: url('/assets/frontend/fonts/helvetica-heavy.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica Neue';
    font-weight: 700;
    font-style: normal;
    src: url('/assets/frontend/fonts/helvetica-bold.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica Neue';
    font-weight: 500;
    font-style: normal;
    src: url('/assets/frontend/fonts/helvetica-medium.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica Neue';
    font-weight: 500;
    font-style: italic;
    src: url('/assets/frontend/fonts/helvetica-mediumitalic.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica Neue';
    font-weight: 400;
    font-style: normal;
    src: url('/assets/frontend/fonts/helvetica-roman.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica Neue';
    font-weight: 300;
    font-style: normal;
    src: url('/assets/frontend/fonts/helvetica-light.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica Neue';
    font-weight: 300;
    font-style: italic;
    src: url('/assets/frontend/fonts/helvetica-lightitalic.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica Neue';
    font-weight: 200;
    font-style: normal;
    src: url('/assets/frontend/fonts/helvetica-thin.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica Neue';
    font-weight: 200;
    font-style: italic;
    src: url('/assets/frontend/fonts/helvetica-thinitalic.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica Neue';
    font-weight: 100;
    font-style: normal;
    src: url('/assets/frontend/fonts/helvetica-ultralight.otf') format('opentype');
}
@font-face {
    font-family: 'Helvetica Neue';
    font-weight: 100;
    font-style: italic;
    src: url('/assets/frontend/fonts/helvetica-ultralightitalic.otf') format('opentype');
}

/* ----------------
    Default Style 
-----------------*/
.pd-x { padding-left: 50px; padding-right: 50px; }
.container { max-width: 1340px; padding: 0px; }
.container-sm { max-width: 940px; padding: 0px; }
.container-fluid { padding: 0px !important; }
img { height: auto; max-width: 100%; vertical-align: middle; }
.center { text-align:center; }
.sticky-area { position: sticky; bottom: 20px; z-index: 99; }
.main-content-wrapper { min-height: calc(100dvh - 300px); }
.yellow-bg { background: var(--primary-yellow) !important; }

/* ----------------
    Button Area 
-----------------*/
.button-primary { position: relative; display: inline-flex; padding: 10px 10px 10px 20px; justify-content: center; align-items: center; gap: 10px; border-radius: 50px; background: var(--primary-purple); border: initial; outline: initial; color: var(--white); text-align: center; font-family: var(--primary-family); font-size: 25px; font-weight: 500; line-height: 1; letter-spacing: -0.275px; white-space: nowrap; }
.ico-sign { --width: 49px; display: flex; align-items: center; justify-content: center; width: var(--width); min-width: var(--width); aspect-ratio: 1/1; border-radius: 50px; background: var(--secondary-color); color: var(--primary-purple); font-size: 25px; }
.purple-ico-sign { --width: 49px; display: flex; align-items: center; justify-content: center; width: var(--width); min-width: var(--width); aspect-ratio: 1/1; border-radius: 50px; font-size: 25px; background: var(--primary-purple); color: var(--secondary-color); }
.button-secondary { position: relative; padding: 5px; display: flex; align-items: center; gap: 10px; justify-content: center; border-radius: 20px; background: var(--secondary-color); color: var(--primary-purple); text-align: center; font-family: var(--primary-family); font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.22px; border: initial; outline: initial; width: 100%; }
.ico-next { font-size: 45px; line-height: 1; display: flex; align-items: center; width: 45px; aspect-ratio: 1/1; justify-content: center; }

/* ----------------
    Title With Icon 
-----------------*/
.title-with-ico { display: flex; align-items: center; gap: 10px; justify-content: center; }
.title-with-ico h3 { color: var(--primary-purple); font-family: var(--primary-family); font-size: 25px; font-weight: 700; line-height: 1; letter-spacing: -0.275px; }
.title-with-ico .ico-sign { background: var(--primary-purple); color: var(--secondary-color); }

/* ----------------
    Notify info
-----------------*/
.notify-wrapper { padding: 0px 20px; }
.notify-info-text { position: relative; max-width: 1340px; margin: 20px auto; border: 1px solid #ff0000; padding: 10px 20px; border-radius: 6px; background: #fdfbe3; color: #ff0000; font-size: 18px; font-family: 'Helvetica Neue'; }

/* ----------------
    Header Area 
-----------------*/
.header-wrapper { padding-top: 20px; padding-bottom: 20px; position: relative; z-index: 999; width: 100%; background: var(--primary-purple); -webkit-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out; }
.header-wrapper.is-active { background: var(--primary-color); }
.nav-wrapper { padding: 0 !important; margin: initial; gap: 20px; align-items: stretch !important; }
.nav-wrapper .navbar-brand { max-width: 120px; padding: inherit; margin: inherit; align-self: center; }
.nav-wrapper .navbar-toggler { color: var(--primary-yellow); background: initial; border: initial; font-size: 25px; display: flex; align-items: center; justify-content: center; padding: 0px; outline: initial; }
.nav-wrapper .navbar-toggler:focus { box-shadow: initial; }
.nav-wrapper .navbar-toggler-icon { display: inline-block; width: initial; height: initial; background: initial; }
.navbar-items { display: flex; align-items: stretch; gap: 50px; width: 100%; justify-content: flex-end; }
.nav-item { position: relative; display: flex; }
.nav-link { display: flex; align-items: center; color: var(--primary-yellow); font-family: var(--primary-family); font-size: 20px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.right-side { align-self: center; }
.header-wrapper .btn-wrap { display: flex; padding: 7px 50px; justify-content: center; align-items: center; gap: 10px; border-radius: 100px; background: var(--primary-color); border: initial; outline: initial; color: var(--primary-yellow); font-family: var(--primary-family); font-size: 20px; font-weight: 700; line-height: 1; text-transform: uppercase; }

/* ----------------
    Footer Area 
-----------------*/
.footer-widget-area { padding: 50px; background: #F8E7F9; }
.copyright-block { padding: 20px 50px; background: #323232; }
.logo-with-links, .copyright-inner { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.ft-menu-list { display: flex; align-items: center; gap: 100px; }
.ft-link { color: var(--primary-purple); font-family: var(--primary-family); font-size: 16px; font-weight: 400; line-height: 1; text-transform: uppercase; }
.ft-logo { display: inline-flex; align-items: center; gap: 20px; }
.ft-logo img { height: 50px; }
.copyright-inner p { color: var(--white); font-family: var(--primary-family); font-size: 16px; font-weight: 400; line-height: 1; }
.copyright-inner img { max-height: 18px; }

/* ----------------
    Banner 
-----------------*/
/* .banner-wrapper { min-height: 400px; }*/
.banner-wrapper img { width: 100%; object-fit: cover; }
.mobile-img { display: none; }
.banner-wrapper .section-inner-content { position: relative; }
.banner-wrapper .button-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; font-size: 28px; color: #ffffff; border: 6px solid rgb(255 255 255 / 90%); background: rgb(0 0 0 / 40%); border-radius: 50%; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0px 0px 15px rgb(0 0 0 / 50%); }

/* ----------------
    Main About
-----------------*/
.about-wrapper { background: var(--secondary-color); padding-top: 50px; padding-bottom: 50px; }
.about-content-block { display: flex; flex-direction: column; align-items: center; gap: 30px; max-width: 940px; margin: 0 auto; }
.about-content-block .chain-box-outer, .about-content-block .chain-box-wrapper { width: 100%; }
.donation-info-wrapper { padding: 30px; border-radius: 20px; background: var(--white) }
.donation-info-block { display: flex; gap: 30px; }
.donation-info-wrapper .chain-box-wrapper { padding: 30px; width: 100%; max-width: 450px; }
.donation-info-block .chain-amount-area { flex-direction: column; align-items: stretch; }
.donation-info-block .chain-title { justify-content: center; }
.donation-info-wrapper .chain-box-inner { flex-direction: column; gap: 30px; }
.chain-box-wrapper { display: inline-flex; align-items: stretch; flex-direction: column; padding: 30px 50px; border-radius: 20px; background: var(--primary-color); text-align: center; justify-content: space-between; }
.chain-box-inner { display: flex; align-items: stretch; gap: 50px; }
.chain-box-inner:not(:last-child) { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 2px solid var(--white); }
.chain-title { display: flex; align-items: center; gap: 10px; }
.chain-title h4 { color: var(--white); text-align: center; font-family: var(--primary-family); font-size: 25px; font-weight: 700; line-height: 1; letter-spacing: -0.275px; }
.chain-title .ico-sign { background: var(--white); }
.three-block.chain-amount-box { gap: 6px; }
.three-block.chain-amount-box p { gap: 3px; }
.three-block .chain-box-wrapper { padding: 30px; }
.chain-amount-area { display: flex; align-items: center; gap: 20px; flex: 1; }
.chain-amount-box { display: flex; align-items: center; gap: 10px; justify-content: space-between; border-radius: 50px; background: var(--white); border: initial; outline: initial; padding: 10px 10px 10px 15px; color: var(--primary-purple); font-family: var(--primary-family); line-height: 1; letter-spacing: -0.22px; flex: 1; }
.chain-amount-box p { font-size: 20px; font-style: italic; font-weight: 400; width: 100%; display: flex; align-items: center; gap: 5px; justify-content: center; }
.chain-amount-box p span { font-size: 25px; font-weight: 700; }
.chain-amount-box .ico-sign { background: var(--primary-purple); color: var(--secondary-color); }
.text-content-group { display: flex; flex-direction: column; gap: 30px; justify-content: center; width: 100%; }
.text-content-group h3 { color: var(--black); font-family: var(--primary-family); font-size: 25px; font-weight: 700; line-height: 140%; }
.text-content-group p, .text-content-group b, .about-wrapper .button-area-group b { color: var(--black); font-family: var(--primary-family); font-size: 20px; font-weight: 400; line-height: 28px; }
.text-content-group b, .about-wrapper .button-area-group b { font-weight: 700; font-size: 25px; }
.content-group-block h3 { margin-bottom: 5px; }
.about-listing-wrapper h6 { color: var(--black); font-family: var(--primary-family); font-size: 20px; font-weight: 700; line-height: 22px; }
.about-listing { counter-reset: custom; display: flex; align-items: stretch; gap: 30px; margin-top: 10px; }
.about-listing li { position: relative; counter-increment: custom; display: flex; align-items: stretch; flex-direction: column; gap: 10px; color: var(--black); font-family: var(--primary-family); font-size: 16px; font-weight: 400; line-height: 125%; text-align: left; flex: 1; }
.about-list-text { display: flex; align-items: flex-start; gap: 10px; }
.about-listing .about-list-text:before { content: counters(custom, ".") " "; color: var(--black); font-family: var(--primary-family); font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: -0.22px; margin-top: 2px; }
.about-list-ico { position: relative; padding: 10px; font-size: 62px; color: var(--secondary-color); border-radius: 20px; background: var(--primary-purple); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.content-group-block br { line-height: 10px; }
.about-list-content:last-child .circle-arrow-block { display: none; }
.content-group-block .content-box { position: relative; padding: 12px; border: 2px solid var(--primary-purple); border-radius: 4px; margin-top: 10px; }
.content-group-block .content-box p { color: var(--primary-purple); }

/* ----------------
    All Chain Grid 
-----------------*/
.details-chain-wrapper { padding: 30px 50px; }
.details-chain-list { display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr)); gap: 10px; margin-top: 20px; }
.chain-item { padding: 20px; text-align: center; color: var(--white); transition: transform 0.2s ease; border-radius: 20px; background: var(--primary-color); }
.chain-item:hover { transform: translateY(-5px); }
.chain-title-no { color: var(--primary-yellow); text-align: center; font-family: var(--primary-family); font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.22px; }
.chain-block { margin-top: 11px; }
.badge-label { color: var(--white); font-family: var(--primary-family); font-size: 16px; font-style: italic; font-weight: 400; line-height: 1; letter-spacing: -0.176px; margin-bottom: 5px; }
.badge-text { display: flex; color: var(--primary-purple); text-align: center; font-family: var(--primary-family); font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.22px; border-radius: 20px; background: var(--secondary-color); align-items: flex-end; justify-content: center; min-height: 24px; }

/* load More */
.load-more-area { text-align: center; margin-top: 20px; }
.load-more-area .purple-ico-sign { font-size: 20px; }
.load-more-btn { display: inline-flex; align-items: center; gap: 10px; color: var(--primary-purple); font-family: var(--primary-family); font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.22px; }
.load-more-btn:hover { opacity: 0.9; }

/* ----------------
    All FWD (Scroll) 
-----------------*/
.all-fwd-wrapper { padding-top: 30px; padding-bottom: 30px; }
.all-fwd-wrapper .section-inner-content { text-align: center; }
.item-content-wrapper { width: 100%; }
/* .fwd-x-scroll { display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; } */
.fwd-x-scroll {
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    flex-wrap: nowrap;
}
.fwd-x-scroll::-webkit-scrollbar {
    opacity: 0;
}
/* .fwd-x-scroll .fwd-items { overflow-x: auto; overflow-y: hidden; } */
.empty-box {
    /* min-width: calc(100vw - 50%); */
    min-width: 50px;
}
/* .fwd-x-scroll .fwd-item:first-child { margin-left: 50px; }
.fwd-x-scroll .fwd-item:last-child, .fwd-x-scroll .fwd-items .button-area-group { margin-right: 50px; } */
.fwd-x-scroll .fwd-items .fwd-item.button-area-group {
    padding: 0;
    background: initial;
    border-radius: initial;
}
.fwd-x-scroll .fwd-items { display: inline-flex; margin: 0 auto;}

.fwd-items { display: flex; align-items: stretch; gap: 30px; align-self: stretch; }
.fwd-item { --width: 220px; position: relative; display: flex; padding: 30px; align-items: stretch; border-radius: 20px; background: var(--primary-color); width: var(--width); min-width: var(--width); }
.bg-ico { position: absolute; top: 11px; left: 0; right: 0; z-index: 1; }
.item-content-text { position: relative; display: flex; flex-direction: column; gap: 11px; z-index: 2; }
.title-names { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left; }
.title-names p { color: var(--white); font-family: var(--primary-family); font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -0.22px; }
.title-names i { color: var(--white); font-family: var(--primary-family); font-size: 16px; font-style: italic; font-weight: 400; line-height: 1; letter-spacing: -0.176px; }
.fwd-content-bottom { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.all-fwd-wrapper .button-area-group { text-align: center; display: flex; }
.all-fwd-wrapper .button-primary { padding: 45px 30px; justify-content: space-between; flex-direction: column; border-radius: 20px; min-width: 220px; }
.circle-arrow-block { display: flex; width: 50px; justify-content: center; align-items: center; gap: 10px; aspect-ratio: 1/1; border-radius: 50px; position: absolute; top: 50%; right: -40px; transform: translateY(-50%); z-index: 9; box-sizing: border-box; }

/* ----------------
    Form Steps 
-----------------*/
.steps-wrapper { padding-top: 50px; padding-bottom: 20px; background: var(--secondary-color); }
.steps-inner-content { margin-top: 30px; }
.step { display:none; }
.step.active { display:block; }
.card { color: var(--white); padding: 30px; border-radius: 20px; background: var(--primary-color); display: flex; gap: 24px; border: initial; }
.card-inner, .card-inner-wrapper { display: flex; gap: 24px; flex-direction: column; }
.step-head-area { position: relative; }
.step-head-area h2 { text-transform: uppercase; display: flex; align-items: center; gap: 13px; margin-bottom: 10px; }
.step-head-area h2, .step-head-area h3 { color: var(--white); font-family: var(--primary-family); font-size: 20px; font-weight: 700; line-height: 1; }
.step-circle { --size: 49px; display: flex; width: var(--size); height: var(--size); padding: 10px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; aspect-ratio: 1/1; border-radius: 50px; background: var(--secondary-color); color: var(--primary-purple); text-align: center; font-family: var(--primary-family); font-size: 20px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.step-head-area p { margin-top: 24px; }
.note { color: var(--white); font-family: var(--primary-family); font-size: 16px; font-weight: 400; line-height: 1; }
.step-input-row, .step-input-col { display: flex; gap: 20px; width: 100%; }
.card-field-area { margin-bottom: 30px; }
.step-input-inner { width: 100%; }
.label-text { color: var(--white); font-family: var(--primary-family); font-size: 16px; font-weight: 400; line-height: 1; text-transform: uppercase; margin-bottom: 10px; }
.control-form { position: relative; width: 100%; padding: 20px; border-radius: 5px; border: 1px solid #00709E; background: var(--white); color: var(--black); font-family: var(--primary-family); font-size: 16px; font-weight: 400; line-height: 1; outline: initial; }
.simple-btn { color: var(--primary-purple); text-align: center; font-family: var(--primary-family); font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: -0.22px; border: initial; background: initial; outline: initial; }
.steps-inner-content .button-area-group { display: flex; justify-content: center; gap: 30px; margin: 30px 0px; }
.card-inner .remove-btn { order: -1; }
.add-btn, .remove-btn { position: relative; border: initial; background: initial; color: var(--white); font-family: var(--primary-family); font-size: 20px; font-weight: 700; letter-spacing: -0.22px; display: inline-flex; gap: 10px; align-items: center; width: fit-content; }
.add-btn i, .remove-btn i { --size: 30px; display: flex; align-items: center; justify-content: center; width: var(--size); height: var(--size); border-radius: 50%; background: var(--secondary-color); color: var(--primary-purple); font-size: 18px; }
.choose-amount { display: flex; align-items: stretch; gap: 20px;flex-wrap: wrap; }
.btn-group-inner { width: calc(25% - 15px); }
.choose-amount .hidden-input { display: none; }
.choose-amount .amount { background: var(--white); padding: 15px 40px; border-radius: 5px; border: none; color: var(--primary-purple); font-family: var(--primary-family); font-size: 35px; font-weight: 400; line-height: 1; outline: initial; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 100px; width: 100%; }
.choose-amount .amount p { color: var(--primary-purple); font-family: var(--primary-family); font-size: 15px; font-weight: 400; line-height: 1; white-space: nowrap; padding-top: 5px; margin-top: 5px; border-top: 1px solid var(--primary-purple); transition: all 0.3s ease; }
.choose-amount input:checked + .amount { background:var(--primary-purple); color:#FDFBE3; font-weight: 700; }
.choose-amount input:checked + .amount p { color:var(--white); border-color: var(--white); }
.amount.custom-input { padding: 15px 30px; }
.custom-amount-text { color: var(--primary-purple); font-family: var(--primary-family); font-size: 15px; font-weight: 400; line-height: 1; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--primary-purple); display: flex; transition: all 0.3s ease; align-items: center; justify-content: center; width: 100%; }
.custom-input  input { position: relative; width: 100%; border: initial; outline: initial; background: initial; color: var(--primary-purple); font-family: var(--primary-family); font-size: 35px; font-weight: 400; line-height: 1; text-transform: uppercase; transition: all 0.3s ease; }
.custom-input.active input, .custom-input.active .custom-amount-text, .custom-input.active .doller { color: var(--secondary-color); }
.custom-input.active .custom-amount-text { border-color: var(--white); }
.custom-amount { display: flex; gap: 2px; }
.custom-input.active { background: var(--primary-purple); }
.notification-box .error { color: #ff0000; }
label.error { display: none !important; }
.control-form.error { border-color: #ff0000; }
.error-box { margin: 10px 0; padding: 10px; border-radius: 3px 3px 3px 3px; color: #D8000C; background-color: #FFBABA; position: relative; width: 100%; display: flex; gap: 10px; }
.error-box:before { content: "\f057"; display: block; font-family: 'Font Awesome 7 Pro'; }
.in-mobile { position: absolute; top: -3px; right: 0; display: inline-flex; padding: 12px 14px 8px 14px; justify-content: center; align-items: center; gap: 10px; border-radius: 50px; background: var(--primary-purple); border: initial; outline: initial; color: var(--white); text-align: center; font-family: var(--primary-family); font-size: 18px; font-weight: 500; line-height: 19px; letter-spacing: -0.275px; }

/* ----------------
    Thanku 
-----------------*/
.thank-you-top h2 { color: var(--white); text-align: center; font-family: var(--secondary-family); font-size: 30px; font-weight: 700; line-height: 1; margin-bottom: 5px; }
.thank-you-top p { color: var(--white); text-align: center; font-family: var(--secondary-family); font-size: 20px; font-weight: 400; line-height: 1; }
.thank-you-top, .link-below { display: flex; gap: 30px; align-items: center; justify-content: center; flex-direction: column; width: 100%; }
.link-below-inner { position: relative; }
.link-below-inner br { display: none; }
.thank-you-top .button-primary { font-size: 18px; white-space: normal; }
.thank-you-top .ico-sign { --width: 35px; font-size: 20px; }
.md-check { font-size: 105px; }
.thank-you-bottom p { color: var(--white); text-align: center; font-family: var(--secondary-family); font-size: 15px; font-weight: 400; line-height: 1; }
.final-amount { background: var(--primary-purple); display: inline-block; padding: 10px 40px; border-radius: 5px; color: var(--secondary-color); text-align: center; font-family: var(--primary-family); font-size: 35px; font-weight: 700; line-height: 1; margin: 10px 0; }
.toast { transform: scale(.6) translateY(-50%); visibility: hidden; opacity: 0; background: #3E474F; border-radius: 6px; padding: 6px 20px; bottom: 100%; right: 0; position: absolute; z-index: 1; color: var(--white); text-align: center; font-family: var(--primary-family); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: -0.198px; display: inline-flex !important; width: max-content; transition: all .65s cubic-bezier(.84,-0.18,.31,1.26) .2s; }
.toast::before { transform: scale(.6) translateY(-90%); visibility: hidden; opacity: 0; border-style: solid; border-width: 1em 0.75em 0 0.75em; border-color: #3E474F transparent transparent transparent; bottom: 100%; content: ""; right: 10px; position: absolute; z-index: 2; top: 100%; transition: all .65s cubic-bezier(.84,-0.18,.31,1.26), opacity .65s .5s; }
.toast.show, .toast.show::before { transform: scale(1) translateY(0); visibility: visible; opacity: 1; }

/* ----------------
    Details Page 
-----------------*/
.details-listing-area, .fwd-x-scroll { margin-top: 20px; }
.details-listing-area .fwd-items { flex-wrap: wrap; justify-content: center; }
.details-listing-area .fwd-item:last-child .circle-arrow-block { display: none; }

/* ----------------
    Donate Page 
-----------------*/
.donate-content-block .button-area-group { display: flex; align-items: center; flex-direction: column; gap: 30px; margin-top: 20px; }
.button-area-group { text-align: center; }
.donate-content-block { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.donate-content-block .content-group-block p { margin-top: 6px; }

/* ----------------
   Single Donate Page 
-----------------*/
/* .single-donate .choose-amount { flex-wrap: wrap; }
.single-donate .choose-amount .amount { width: 100%; } */

/* ----------------
   Modal
-----------------*/
.popup-modal-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgb(0 0 0 / 90%); z-index: 999; display: none; }
.popup-modal-wrapper.overlay { display: block; }
.close-btn { position: absolute; top: 20px; right: 20px; width: 35px; height: 35px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; border: initial; border-radius: 50%; box-shadow: 0px 0px 3px 2px #000; color: #000; z-index: 9; }
.video-container { overflow: hidden; position: relative; }
.iframe-block { width: 100%; height: 100dvh; z-index: 1; }


/* ----------------
    Responsive Style 
-----------------*/
@media screen and (max-width: 1300px) {
    .details-chain-list { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 10px; margin-top: 20px; }
}
@media screen and (max-width: 1024px) {
    .details-chain-list { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; margin-top: 20px; }
    .main-content-wrapper { min-height: calc(100dvh - 260px); }
    .about-wrapper, .footer-widget-area, .all-fwd-wrapper { padding-top: 30px; padding-bottom: 30px; }
    .about-content-block { gap: 20px; }
    .pd-x { padding-left: 20px; padding-right: 20px; }
    .chain-box-wrapper { padding: 30px 40px; }
    .details-chain-wrapper { padding: 30px 20px; }
    .donate-content-block .donation-info-wrapper, .donation-info-wrapper .chain-box-wrapper { padding: 30px 20px; }

}

@media screen and (max-width: 991px) {
    .details-chain-list { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; margin-top: 20px; }
    .ft-menu-list { gap: 50px; }
    .donation-info-wrapper { padding: 20px; }
    .chain-title h4, .button-primary, .title-with-ico h3, .chain-amount-box p span, .text-content-group h3 { font-size: 20px; }
    .text-content-group p { font-size: 14px; line-height: 22px; }
    .text-content-group { gap: 10px; }
    .load-more-area { margin-top: 10px; }
    .three-block .chain-box-wrapper { padding: 20px; }
    .chain-box-wrapper { padding: 35px 20px; }
    .chain-amount-box p { font-size: 17px; }
    .ico-sign, .purple-ico-sign { --width: 35px; font-size: 18px; }
    .badge-label { font-size: 14px; }
    .load-more-btn { font-size: 16px; }
    .fwd-items { gap: 25px; }
    .circle-arrow-block { width: 38px; right: -30px; }
    .donation-info-wrapper .donation-info-block { flex-direction: column; }
    .donation-info-wrapper .chain-box-wrapper { max-width: initial; }
    .empty-box { min-width: 20px; }
    /* .fwd-x-scroll .fwd-item:first-child { margin-left: 20px; }
    .fwd-x-scroll .fwd-item:last-child, .fwd-x-scroll .fwd-items .button-area-group { margin-right: 20px; } */
    .logo-with-links, .copyright-inner { gap: 30px; }

}

@media screen and (min-width: 768px) {
    .nav-wrapper .navbar-toggler { display: none; }
    .nav-wrapper .navbar-collapse { display: flex !important; flex-basis: auto; align-items: stretch; gap: 50px; }

}

@media screen and (max-width: 767px) {
    .header-wrapper .btn-wrap { display: inline-flex; }
    .navbar-items { gap: 20px; flex-direction: column; margin-bottom: 20px; }

    /* about */
    .about-listing-wrapper h6 { font-size: 15px; }
    .about-listing { flex-direction: column; }
    .about-listing li { flex-direction: row; gap: 15px; align-items: center; font-size: 14px; line-height: 128%; }
    .about-list-text { max-width: 300px; }
    .about-listing .circle-arrow-block { width: 45px; top: initial; bottom: -40px; right: 50%; transform: translateX(50%); }
    .about-listing .circle-arrow-block svg { width: 100%; transform: rotate(90deg); }
    .about-listing .about-list-text:before { font-size: 18px; }
    
    /* Chain - Boxs */
    .chain-box-inner, .donation-info-wrapper .chain-box-inner { flex-direction: column; gap: 20px; }
    .chain-box-inner:not(:last-child) { padding-bottom: 20px; margin-bottom: 20px; }
    .chain-amount-area { align-items: stretch; flex-direction: column; }
    .chain-title { justify-content: center; }
    .donation-info-block { flex-direction: column; }
    .donation-info-wrapper .chain-box-wrapper { max-width: initial; padding: 30px 20px; }
    
    /* All - Chain - Boxs */
    .details-chain-list { display: grid; grid-template-columns: repeat(2, minmax(152px, 1fr)); gap: 10px; margin-top: 20px; }
    
    /* All - FWD - Boxs */ 
    .all-fwd-wrapper { overflow: hidden; }
    .fwd-item { --width: calc(50% - 16px); padding: 15px; min-width: 150px; }
    .details-listing-area .button-area-group {
        --width: calc(50% - 16px);
        min-width: 150px;
        width: var(--width);
    }
    .details-listing-area .button-primary {
        width: 100%;
    }
    .all-fwd-wrapper .button-primary { --width: calc(50% - 16px); min-width: 150px; padding: 15px; justify-content: center; gap: 20px; }
    .title-names p { font-size: 18px; }
    .title-names i { font-size: 14px; }
    .button-secondary { font-size: 16px; }
    .bg-ico, .bg-ico svg { width: 95%; }
    
    /* Donate Form */
    .card { padding: 30px 20px; }
    .step-circle { --size: 35px; font-size: 18px; }
    .step-head-area h3 { font-size: 18px; }
    .label-text { margin-bottom: 5px; }
    .label-text, .note { font-size: 14px; margin-bottom: 5px; }
    .control-form { padding: 14px 16px; }
    .add-btn, .remove-btn { font-size: 18px; }
    .add-btn i, .remove-btn i { --size: 25px; font-size: 18px; }
    .ico-next { font-size: 35px; width: 35px; }
    .choose-amount .amount { font-size: 30px; padding: 15px 30px; }
    .custom-input  input { font-size: 30px; }
    .choose-amount { gap: 10px; }
    .btn-group-inner { width: calc(25% - 8px); }
    .thank-you-top p { font-size: 16px; }
    .md-check { font-size: 75px; }
    .final-amount { font-size: 25px; }

}

@media screen and (max-width: 600px) {
    .main-content-wrapper { min-height: calc(100dvh - 384px); }

    /* Banner */
    .banner-wrapper img { aspect-ratio: 1/1; max-height: initial; }
    .desktop-img { display: none; }
    .mobile-img { display: block; }

    /* About */
    .about-wrapper { background: var(--primary-yellow); }
    .about-content-block .button-primary, .about-content-block .button-area-group { width: 100%; }
    .button-primary small { width: 100%; }
    
    /* footer */
    .ft-logo img { height: 52px; }
    .logo-with-links, .copyright-inner { align-items: stretch; flex-direction: column; }
    .ft-logo { justify-content: space-between; }
    .logo-with-links, .copyright-inner, .ft-menu-list { align-items: stretch; gap: 20px; flex-direction: column; }
    .ft-link, .copyright-inner p { font-size: 14px; }
    
    /* Donate Form */
    .thank-you-top p, .thank-you-bottom p { font-size: 14px; }
    .step-input-row, .step-input-col { flex-direction: column; }
    .card-field-area .step-input-col { flex-direction: row; }
    .choose-amount { flex-wrap: wrap; }
    .btn-group-inner.amount-with-text { width: 100%; }
    .amount-with-text .amount { flex-direction: row-reverse; }
    .choose-amount .amount p { font-size: 14px; max-width: 110px; border-right: 1px solid var(--primary-purple); border-top: initial; margin: 0px 10px 0px 0px; padding: 0px 10px 0px 0px; width: 100%; white-space: normal; }
    .btn-group-inner, .amount.custom-input, .btn-group-inner { width: calc(50% - 5px); }
    .choose-amount .btn-group-inner .amount { font-size: 25px; padding: 30px 20px; width: 100%; }
    .choose-amount .amount { min-height: 90px; }
    .choose-amount .amount.custom-input { padding: 15px 20px; font-size: 25px; }
    .custom-input  input { font-size: 25px; }
    .button-area-group .button-primary { width: 100%; }
    .button-area-group .btn-text, .button-area-group .btn-text, .thank-you-top .button-primary .btn-text { width: 100%; }
    .simple-btn.back { min-width: 76px; }
    .link-below-inner br { display: block; }
    .thank-you-top .button-primary, .link-below-inner { width: 100%; }
    .content-group-block .content-box { text-align: center; }

}
.ecp-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.ecp-wrapper input {
    padding-right: 40px;
}

.ecp-button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
}
.search-area {
    margin-top: 20px;
}