@media(max-width:768px)

{

    body,
    .main-header,
    .hero-section,
    .services-section,
    .payment-section,
    .tauliah-section,
    .main-footer
    {

        min-width:0 !important;
        width:100% !important;
        max-width:100% !important;
        
    

    }



    body
    {

    min-width:0 !important;

    }
/* =========================================
   1. RESET
========================================= */

    html,
    body
    {

    overflow-x:hidden;

    }

    *{

    box-sizing:border-box;

    }

/* =========================================
   2. LAYOUT
========================================= */

.container
    {

    padding-left:20px;
    padding-right:20px;

    }

/* =========================================
   3. HEADER
========================================= */

.main-header
    {

    position:relative;

    overflow:visible;

    padding:14px 20px;

    background:
    linear-gradient(
        135deg,
        #1800ad,
        #4f46ff
    );

    box-shadow:
    0 8px 24px rgba(24,0,173,0.18);

    }


.header-container
    {
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;
    }
.header-brand
    {
        display:flex;

        align-items:center;

        gap:10px;
        flex: 1;
        min-width: 0;
    }
.header-brand img
    {
    width:56px;

    height:auto;

    object-fit:contain;
    }
.header-brand span
    {    
        font-size:20px !important;
        white-space: nowrap;

        font-weight:700;

        color:#ffffff;
        letter-spacing:-0.4px;
        
    }

.menu-toggle
    {

    display:flex !important;
    flex-shrink: 0; 
    margin-left: auto;

    align-items:center;

    justify-content:center;

    width:44px;

    height:44px;

    background:none;

    border:none;

    color:#ffffff;

    font-size:34px;

    cursor:pointer;

    padding:0;

    line-height:1;

    z-index:99999;

    }

.header-nav
    {

    display:none !important;
    
    }

.mobile-menu
    {

    position:absolute;

    top:72px;

    right:14px;

    width:220px;

    display:none;

    flex-direction:column;

    padding:12px;

    gap:6px;

    background:
    rgba(255,255,255,0.22);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border:
    1px solid rgba(255,255,255,0.12);

    box-shadow:
    0 12px 30px rgba(0,0,0,0.10);

    z-index:9999;

    }
.mobile-menu.active
    {

    display:flex;

    }
.mobile-menu a
    {

    color:#111827;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    padding:12px 14px;

    border-radius:12px;

    background:
    rgba(79,70,255,0.08);

    }

/* animation */
@keyframes menuFade
    {
        from
        {

        opacity:0;

        transform:translateY(-12px);

        }

        to
        {

        opacity:1;

        transform:translateY(0);

        }
        
    }


.mobile-menu.active a:nth-child(1)
    {
    
    visibility:visible;

    animation:
    menuFade 0.65s forwards;

    animation-delay:0.12s;

    }

.mobile-menu.active a:nth-child(2)
    {
    visibility:visible;

    animation:
    menuFade 0.65s forwards;

    animation-delay:0.28s;

    }

.mobile-menu.active a:nth-child(3)
    {
    visibility:visible;

    animation:
    menuFade 0.65s forwards;

    animation-delay:0.44s;

    }

/* =========================================
   4. HERO
========================================= */

.hero-section
    {
    background:
     linear-gradient(
    to right,
    rgba(237,243,255,0.60) 0%,
    rgba(237,243,255,0.18) 28%,
    rgba(237,243,255,0.03) 55%,
    rgba(237,243,255,0.00) 100%
    ),
    url('../images/hero-mobile.webp');

    background-size:110%;
    background-position:bottom;
    background-repeat:no-repeat;

    min-height:610px;
 

    display:flex;
    align-items:flex-start;
    padding-top:20px;
    
    }

.hero-title
    {
    padding-top: 10px;
    font-size:38px !important;
    
    line-height:0.85 !important;

    letter-spacing:1px;
    font-family:'Avenir Next',sans-serif;
    font-weight:900;   
    margin-top: -20px;
    margin-left:10px;
    }
.hero-subheading
    {
    margin-top:-20px;
    font-size:22px !important;
    font-family:'Avenir Next',sans-serif !important;
    font-weight:1000 !important;
    line-height:1 !important;
    letter-spacing:1;
    margin-bottom:22px;
    margin-left:10px;

    }

   .hero-description
    {

    font-size:14px !important;
    margin-left:10px;
    margin-right: 15px;
    line-height:1.2 !important;
    color:#000000 ;
    align-items: center !important;
    top:125px !important;
    background:rgba(255,255,255,0.38);
    position:relative;
    backdrop-filter:blur(5px);

    -webkit-backdrop-filter:blur(10px);

    padding:10px 10px;

    border-radius:10px;

    border:0px solid rgba(255,255,255,0.35);

    box-shadow:
    0 4px 14px rgba(0,0,0,0.06);

    display:inline-block;
    


    }


.hero-org-logos
    {
    margin-left:10px;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:15px !important;

    margin-top:-20px;
    }

/* TOP ROW */

.logo-top
    {

    display:flex;
    align-items:center;
    gap:12px;
    }

/* LZS */

.logo-lzs
    {

    width:220px !important;
    height:auto !important;
    display:block;

    }

/* AMIL */

.logo-amil
    {

    width:80px !important;
    height:auto !important;
    display:block;

    }

/* TAHFIZ */

.logo-tahfiz
    {

    width:78px !important;
    height:auto !important;
    display:block;

    margin-left:4px;
    margin-top:-8px;

    }

.hero-btn{
    
    font-size: 14px !important;

    display:flex !important;

    margin-left:10px;

    align-items:center !important;

    justify-content: flex-start !important;
    padding: 18px !important;

    width:70% !important;

    height:40px !important;

    top:120px;
    position:relative;
    
    gap: 15px !important;

    z-index:10;

    border-radius:10px !important;

    background:
    linear-gradient(
    135deg,
    #2a00ff 0%,
    #4d46ff 100%
    ) !important;

}

.hero-btn svg
    {

    width:19px !important;

    height:19px !important;

    stroke-width:2.5 !important;

    opacity:0.92;

    }

/* =========================================
   5. SERVICES
========================================= */

.services-section
    {
    position:relative;

    padding-top:60px !important;
    
    background:
    radial-gradient(
    ellipse at top,
    rgba(255,255,255,0.50) 0%,
    rgba(255,255,255,0) 28%
    ),
    linear-gradient(
    180deg,
    #2400ff 0%,
    #14008f 100%
    );
    

    }
    

.section-title
    {
        margin-top: 20px;
        margin-bottom:22px;
        text-align:center;
    }
    
.section-title h2
    {
        font-size:34px;
        line-height:0.92;
        letter-spacing:1px;
        margin-top: 10px;
        margin-bottom:0px !important;
        text-align: center !important;
    }
.section-title p
    {
        font-size:18px;
        line-height:1.8;
        
    }
.service-title{
    
width:100%;

    text-align:center;
    line-height:1;
    
}

.service-title h2{
    font-size:36px;
    color:#fff;
    margin-top: -30px; 
 
}
.service-grid
    {
        display:grid;
        grid-template-columns:1fr;
        gap:16px;
        margin-top:10px !important;
        
    }
    
.service-card
    {
    width:80% !important;
    max-width:380px !important;
    margin:0 auto;
    margin-left: 16px !important;
    height:auto;
    min-height: unset;
    }
.service-card img
    {
    width:100% !important;
    height:210px;
    object-fit:cover;
    }
.service-content
    {
    padding:18px;
    }
.service-btn
    {
    width:65% !important;
    height:44px;
    font-size: 14px;
    margin-top: -6px;
    }

/* =========================================
   6. ZAKAT GRID
========================================= */

.zakat-grid
    {
        display:grid;
        grid-template-columns:repeat(4,1fr) !important;
        gap:8px;
        margin-top:26px;
        margin-left: 10px;
        margin-right: 10px;
    }
.zakat-card
    {
        max-height:100px;
        width: 100%;
        padding:12px 6px;
        border-radius:18px;
    }
.zakat-icon
    {
        width:35px;
        height:35px;
        margin-bottom:8px;
    }
.zakat-card h3
    {
        font-size:11px;
        line-height:1.3;
    }

/* =========================================
   7. PAYMENT
========================================= */
.payment-wrapper{

    display:flex !important;
    flex-direction:column !important;

    gap:24px !important;

}

.payment-section
    {
       padding-top: 40px !important;
       margin-top: 0!important;
    }

.site-canvas{

    min-width:0 !important;
    width:80% !important;
    max-width:80% !important;

    padding-left:16px;
    padding-right:16px;

}

.nisab-card{

    display:grid;
    grid-template-columns:1fr;
    gap:26px;
    margin-top: 0 !important;

}

.payment-left{
    
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:0 !important;
    margin-left:0 !important;
    width:100% !important;
    

}

.payment-left,
.payment-card{

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

}

.payment-features li{

    font-size:14px;
    line-height:0.5 !important;
    margin-bottom:10px;

}

    
.payment-features  
    {
    text-align: center;

    }
    

.payment-left h2
    {
    
        font-size:22px;
    }
    
    .payment-card *{

    min-width:0;

    }
.payment-card
    {
        order: 2;
        margin-top:2px;
        padding:10px;
        border-radius:24px;
        background:rgba(255,255,255,0.95);
        box-shadow:
        0 10px 30px rgba(0,0,0,0.08);
        overflow: hidden;
        width:100% !important;
        margin-right:0 !important;
        margin-bottom:0 !important;
        padding:18px !important;
    }

.form-progress
    {
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        width:100%;
        gap:6px;
        margin-bottom:16px;
    }
.progress-step
    {
        flex:1;
        min-width:0;
        font-size: 13px;
        text-align: center;
    }
.progress-line
    {
        flex:0 0 24px;
    margin-top:18px;

    }

.form-title
    {
        font-size:18px;
        text-align:center;
        margin-bottom:18px;
        margin-bottom: 10px;
    }

.radio-group
    {
        display:flex;
        gap:30px;
    }

.payment-card input,
.payment-card select,
.payment-card textarea
    {
        width:100%;
        font-size:13px;
        border-radius:10px;
        position:relative;
        height:38px;
    }
    
    .payment-card label{
        margin-top: 7px;

    font-size:15px;

}

.payment-card input
{   
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    padding-right: 12px;
    font-size:14px !important;
    margin-bottom: 2px;   
}

.zakat-row,
.form-row,
.income-row{

    display:flex;
    align-items:center;
    gap:10px;

    width:100%;
    overflow:hidden;

}

.zakat-row label,
.form-row label,
.income-row label{

    flex:1;
    min-width:0;

    font-size:16px !important;
    line-height:1.35;

}

.zakat-row .input-wrapper,
.form-row .input-wrapper,
.income-row .input-wrapper{

    width:120px;
    min-width:120px;
    flex-shrink:0;

}

.zakat-row input,
.form-row input,
.income-row input{

    width:100% !important;
    min-width:0 !important;

}

.zakat-row .amount,
.form-row .amount,
.income-row .amount{

    width:auto !important;
    min-width: 0 !important;
    font-size: 16px;
    overflow: hidden;
    text-align:right;
    flex-shrink:0;

}


.next-btn,
.submit-btn,
.back-btn
    {
        width:100%;
        height:45px;
        border-radius:14px;
        flex:1;
        font-size:15px;
        margin-top: 10px;

    }
    
    .progress-step span{

        width:36px;

        height:36px;

        font-size:16px !important;
        

    }
    
    .progress-step p
    {

    font-size:11px;
    text-align:center;
    line-height:1.3;
    }

.step-buttons
    {
    display:flex;
    align-items: center;
    gap:8px;
    width: 100%;

    }

.payment-note
    {
        font-size:13px !important;
        line-height:1;
        text-align:center;
        padding:8px;
        margin: 4px;
    }

.akad-box
    {
    padding:22px 18px !important;
    border-radius:24px;
    min-height:auto;
    }
.akad-arabic
    {
    font-size:25px !important;
    margin-bottom:18px !important;
    line-height:1.6;
    }
.akad-text
    {
    font-size:16px !important;
    line-height:1.3 !important;
    }

/* =========================================
   8. TAULIAH
========================================= */

.tauliah-section{
    padding:0px 0px !important;

        margin:0px 0px !important;

        border-radius:0px !important;
}
.tauliah-grid{
    display:grid;

        grid-template-columns:1fr !important;

        gap:20px !important;
}
.tauliah-text{
    max-width:100% !important;

        margin-left:5px !important;
        margin-right: 5px !important;
}

.tauliah-text h2{

        font-size:36px !important;

        line-height:1.1 !important;

        letter-spacing:1px !important;

        margin-bottom:24px !important;
        margin-top: 10px;
        margin-left:5px !important;
        margin-right: 5px !important;
    }

    .tauliah-description{

        font-size:16px !important;

        line-height:1.4 !important;
        margin-left:5px !important;
        margin-right: 5px !important;
    }
.tauliah-link{width:100%;

        height:40px;
        align-content: center;  
        border-radius:18px !important;
        max-width: 70% !important;
        font-size:18px !important;}
        
        
.tauliah-image img{border-radius:8px !important;
        margin-top: 15px !important;
        margin-bottom: 15px!important;
        margin-left:0px!important;
        margin-right: 15px!important;
   
}

/* =========================================
   9. FOOTER
========================================= */

 .main-footer{

        padding:60px 24px;

    }

    .footer-container{

        display:flex;

        flex-direction:column;

        gap:40px;

    }

    .footer-left,
    .footer-right{

        width:100%;

    }

    .footer-left h3{

        font-size:24px;

        margin-bottom:20px;

    }

    .footer-left p,
    .footer-right p{

        font-size:16px;

        line-height:1.9;

    }


/* =========================================
   10. FLOAT BUTTON
========================================= */

.bayar-float,
.whatsapp-float{

    position:fixed;

    right:16px !important;

    width:58px !important;

    height:58px !important;

    border-radius:20px !important;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:9999;

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:
    1px solid rgba(255,255,255,0.18);

    box-shadow:
    0 10px 26px rgba(0,0,0,0.16),
    0 4px 12px rgba(0,0,0,0.08);

    transition:
    transform 0.25s ease,
    opacity 0.25s ease;

}

/* PAY BUTTON */

.bayar-float{

    bottom:92px;

    background:rgba(255,255,255,0.18) !important;

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,0.22);

    box-shadow:
    0 8px 24px rgba(255,255,255,0.16),
    0 4px 12px rgba(0,0,0,0.10) !important;

}

.bayar-float img{

    width:55px !important;

    height:55px !important;

    min-width:55px !important;

    min-height:55px !important;

    max-width:none !important;

    display:block !important;

    object-fit:contain !important;

}

/* WHATSAPP */



.whatsapp-float{

    

    bottom:10px;

   

    background:rgba(255,255,255,0.18) !important;

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,0.22);

    box-shadow:
    0 8px 24px rgba(255,255,255,0.16),
    0 4px 12px rgba(0,0,0,0.10) !important;
}

.whatsapp-float img{

    width:60px !important;

    height:60px !important;

    min-width:60px !important;

    min-height:60px !important;

    max-width:none !important;

    display:block !important;

    object-fit:contain !important;

}


.whatsapp-float.float-show,
.whatsapp-float.float-hide{

    transform:none !important;

}




.bayar-float:active,
.whatsapp-float:active{

    transform:scale(0.92);

}

/* HIDE */

.float-hide{

    opacity:0;

    pointer-events:none;

   

}

/* SHOW */

.float-show{

    opacity:1;

    pointer-events:auto;

   

}

/* =========================
   FLOAT LABEL
========================= */

.bayar-float,
.whatsapp-float{

    position:fixed;

    overflow:visible !important;

}

/* BAYAR */

.bayar-float::before{

    content:'Bayar Sekarang';

    position:absolute;

    right:72px;

    top:50%;

    transform:translateY(-50%);

    background:rgba(17,24,39,0.92);

    color:#ffffff;

    padding:10px 14px;

    border-radius:12px;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

    box-shadow:
    0 8px 20px rgba(0,0,0,0.18);
    
    background:rgba(0,0,0,0.45);

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

color:#ffffff;

border:1px solid rgba(255,255,255,0.10);

box-shadow:
0 0 12px rgba(255,255,255,0.18);

}

/* WHATSAPP */

.whatsapp-float::before{

    content:'Hubungi Kami';

    position:absolute;

    right:72px;

    top:50%;

    transform:translateY(-50%);

    padding:10px 14px;

    border-radius:12px;

    font-size:13px;

    font-weight:600;

    white-space:nowrap;

    background:rgba(0,0,0,0.45);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    color:#ffffff;

    border:1px solid rgba(255,255,255,0.10);

    box-shadow:
    0 0 12px rgba(255,255,255,0.18);

}





}