.offering-section{
    --orange:#ee6509;
    --orange-dark:#bd3b00;
    --yellow:#ffd83d;
    position:relative;
    overflow:hidden;
    padding:75px 0;
    background:
        radial-gradient(circle at 8% 22%,rgba(255,255,255,.14) 0 3px,transparent 4px),
        radial-gradient(circle at 93% 72%,rgba(255,255,255,.13) 0 4px,transparent 5px),
        linear-gradient(118deg,#ff8b15 0%,#f26a0c 43%,#d94a00 100%);
    font-family:"Google Sans",Arial,sans-serif;
    isolation:isolate;
}

.offering-section:before{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    border:90px solid rgba(255,255,255,.055);
    border-radius:50%;
    top:-300px;
    right:10%;
    z-index:-1;
}

.offering-section:after{
    content:"";
    position:absolute;
    width:700px;
    height:280px;
    left:-100px;
    bottom:-180px;
    background:rgba(120,32,0,.12);
    transform:rotate(-8deg);
    border-radius:50%;
    z-index:-1;
}

.offering-shape{
    position:absolute;
    pointer-events:none;
    z-index:-1;
}

.shape-one{
    width:210px;
    height:210px;
    border:2px solid rgba(255,255,255,.12);
    border-radius:50%;
    left:-90px;
    top:35px;
}

.shape-two{
    width:110px;
    height:110px;
    border:20px solid rgba(255,216,61,.12);
    border-radius:50%;
    right:4%;
    top:-35px;
}

.shape-three{
    width:17px;
    height:17px;
    border-radius:50%;
    background:#ffd83d;
    right:44%;
    top:38px;
    box-shadow:
        33px 25px 0 rgba(255,255,255,.20),
        -25px 65px 0 rgba(255,255,255,.12);
}

.offering-content{
    max-width:850px;
    position:relative;
}

.offering-tag{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
    color:#fff;
    font-weight:700;
    font-size:14px;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.offering-tag > span{
    display:inline-block;
    width:34px;
    height:3px;
    background:#ffd83d;
    border-radius:10px;
}

.offering-tag i{
    font-size:5px;
    color:#ffd83d;
}

.offering-content h2{
    color:#fff;
    font-size:clamp(34px,4.3vw,62px);
    font-weight:700;
    line-height:1.03;
    letter-spacing:-2px;
    margin:0 0 25px;
}

.offering-content h2 span{
    display:block;
    color:#fff6db;
}

.verse-box{
    max-width:790px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:19px 23px;
    background:linear-gradient(135deg,#ffe664,#ffc928);
    border-left:6px solid #873200;
    border-radius:5px;
    box-shadow:0 13px 30px rgba(104,31,0,.16);
    position:relative;
    overflow:hidden;
}

.verse-box:after{
    content:"";
    width:110px;
    height:110px;
    border-radius:50%;
    border:20px solid rgba(255,255,255,.18);
    position:absolute;
    right:-45px;
    top:-45px;
}

.verse-icon{
    flex:0 0 55px;
    width:55px;
    height:55px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    color:#d64c00;
    font-size:23px;
    box-shadow:0 5px 15px rgba(109,46,0,.15);
}

.verse-box p{
    color:#572800;
    font-size:18px;
    line-height:1.55;
    font-weight:600;
    margin:0 0 3px;
    position:relative;
    z-index:2;
}

.verse-box strong{
    color:#982e00;
    font-size:14px;
    position:relative;
    z-index:2;
}

.offering-divider{
    max-width:650px;
    display:flex;
    align-items:center;
    gap:13px;
    margin:25px 0 18px;
    color:#ffd83d;
}

.offering-divider span{
    display:block;
    height:1px;
    flex:1;
    background:linear-gradient(to right,rgba(255,255,255,.12),rgba(255,255,255,.7));
}

.offering-divider span:last-child{
    background:linear-gradient(to left,rgba(255,255,255,.12),rgba(255,255,255,.7));
}

.offering-divider i{
    font-size:17px;
}

.offering-description{
    max-width:760px;
    color:rgba(255,255,255,.94);
    font-size:17px;
    line-height:1.8;
    margin:0;
}

.donate-area{
    text-align:center;
    padding:25px 20px;
    position:relative;
}

.heart-circle{
    width:100px;
    height:100px;
    border-radius:50%;
    margin:0 auto 17px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ff8f3d;
    font-size:45px;
    border:2px dashed rgba(255,255,255,.6);
    position:relative;
}

.heart-circle:before{
    content:"";
    position:absolute;
    inset:9px;
    border-radius:50%;
    background: #fff;
}

.heart-circle i{
    position:relative;
    z-index:2;
}

.give-label{
    color:#fff;
    font-size:15px;
    font-weight:600;
    margin-bottom:14px;
}

.donate-btn{
    min-width:200px;
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    padding:8px 8px 8px 23px;
    min-height:57px;
    background:#fff;
    color:#c43c00;
    border-radius:5px;
    text-decoration:none;
    font-weight:700;
    font-size:17px;
    box-shadow:0 12px 26px rgba(105,28,0,.23);
    transition:.3s ease;
}

.donate-btn i{
    width:41px;
    height:41px;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffd83d;
    color:#873000;
    transition:.3s ease;
}

.donate-btn:hover{
    color:#873000;
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(105,28,0,.30);
}

.donate-btn:hover i{
    transform:translateX(3px);
}

.secure-text{
    margin-top:15px;
    font-size:12px;
    color:rgba(255,255,255,.78);
}

.secure-text i{
    color:#ffd83d;
    margin-right:5px;
}

@media(max-width:991.98px){
    .offering-section{
        padding:60px 0;
    }

    .donate-area{
        margin-top:35px;
        padding-bottom:0;
    }

    .offering-content{
        text-align:center;
        margin:auto;
    }

    .offering-tag{
        justify-content:center;
    }

    .verse-box{
        text-align:left;
        margin:auto;
    }

    .offering-divider,
    .offering-description{
        margin-left:auto;
        margin-right:auto;
    }
}

@media(max-width:575.98px){
    .offering-section{
        padding:45px 12px;
    }

    .offering-content h2{
        font-size:35px;
        letter-spacing:-1px;
    }

    .offering-tag{
        font-size:11px;
        letter-spacing:1px;
        gap:6px;
    }

    .verse-box{
        align-items:flex-start;
        padding:17px 15px;
        gap:12px;
    }

    .verse-icon{
        flex:0 0 43px;
        width:43px;
        height:43px;
        font-size:18px;
    }

    .verse-box p{
        font-size:15px;
        line-height:1.55;
    }

    .offering-description{
        font-size:15px;
        line-height:1.7;
    }

    .heart-circle{
        width:82px;
        height:82px;
        font-size:35px;
    }

    .donate-btn{
        width:100%;
        max-width:280px;
    }
}