/*========================================
ABOUT
========================================*/

.about-section{

    

    position:relative;
    
    
}

#penolong-amil{
    background:linear-gradient(
        180deg,
        #F7FAFF 0%,
        #EEF5FF 100%
    );
}
.page-title{
    margin-top:200px;

text-align: center;
}
.site-canvas{

    width:min(70%,1600px);

    margin-top: 50px;
    border:2px solid rgba(37,99,235,.10);
    box-shadow:
        0 8px 30px rgba(18,53,120,.08),
        0 2px 8px rgba(18,53,120,.05);
    justify-content: center;
   
    

}


/*========================================
GRID
========================================*/

.about-grid{

    display:grid;

    grid-template-columns:.7fr 1.3fr;

    gap:50px;

    align-items:center;

    margin-top:20px;
    margin-bottom: 20px;

    padding:60px;

    border-radius:var(--radius-xl);

    border:1px solid var(--border);

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfcfe
        );

    box-shadow:var(--shadow-card);

    transition:.35s;
    

}

.about-grid:hover{

    box-shadow:var(--shadow-hover);

}


.about-right strong{
    color:#2563eb;
    
}

/*========================================
IMAGE
========================================*/

.about-left{

    display:flex;

    justify-content:center;

    align-items:center;

}

.about-image{

    width:110%;

    object-fit:cover;

    display:block;

    border-radius:24px;

    border:8px solid #fff;

    box-shadow:var(--shadow-card);

    transition:.5s ease;

}

.about-image:hover{

    transform:scale(1.02);

}

/*========================================
CONTENT
========================================*/

.about-right{

    display:flex;

    flex-direction:column;

    align-items:flex-start;
    margin-top:0px;

}

.section-label{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:28px;

    padding:10px 22px;

    

    

    
    color:var(--primary);

    font-size:35px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;
    
    
    
    border:1px solid rgba(37,99,235,.08);

    
    
    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #123578,
        #2563eb
    );

    color:#fff;

    box-shadow:
        0 20px 45px rgba(18,53,120,.18);

}

.section-label::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--primary-light);
    
    

}

.about-right h2{

    margin-bottom:25px;

    font-size:52px;

    line-height:1.15;

    color:var(--primary);

    font-weight:700;

}

.about-right p{

    margin-bottom:10px;

    font-size:28px;

    line-height:1.7;

    color:var(--text-light);

    font-weight:400;

}



/*========================================
PENOLONG AMIL
========================================*/

.penolong-bottom{

    grid-column:1 / -1;

    margin-top:-50px;

    padding-top:0px;

    border-top:1px solid var(--border);

}

.penolong-bottom h2{
    text-align: center;
   
    margin-bottom:30px;

    font-size:52px;

    color:var(--primary);

}

/*========================================
PENOLONG GRID
========================================*/

.penolong-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:22px;

    margin-bottom:20px;

}

/*========================================
PENOLONG CARD
========================================*/

.penolong-card{

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:center;
    align-items:center;

    text-align:center;

    min-height:120px;

    padding:24px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fbfcfe
        );

    border:2px solid rgba(37,99,235,.08);

    border-radius:20px;

    font-size:26px;

    font-weight:600;

    line-height:1.5;

    color:var(--text);

    box-shadow:
        0 8px 30px rgba(18,53,120,.08),
        0 2px 8px rgba(18,53,120,.05);

    transition:.35s;

}

.penolong-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:
        linear-gradient(
            90deg,
            #123578,
            #2563eb
        );

    transform:scaleX(0);

    transition:.35s;

}

.penolong-card:hover{

    transform:translateY(-6px);

    border-color:#dbeafe;

    box-shadow:var(--shadow-hover);

}

.penolong-card:hover::before{

    transform:scaleX(1);

}

/*========================================
RESIT BOX
========================================*/

.resit-box{

    position:relative;

    overflow:hidden;

    padding:25px;

    

    border:1px solid rgba(37,99,235,.08);

    
    
    border-radius:18px;

    background:
    linear-gradient(
        135deg,
        #123578,
        #2563eb
    );

    color:#fff;

    box-shadow:
        0 20px 45px rgba(18,53,120,.18);

}

.resit-box::after{

    content:"";

    position:absolute;

    right:-60px;
    top:-60px;

    width:220px;
    height:220px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(37,99,235,.08),

        transparent 70%

    );

}

.resit-box h3{

    position:relative;

    margin-bottom:20px;

    font-size:36px;

    color:var(--primary);

    z-index:2;

}

.resit-box p{

    position:relative;

    margin:0;

    font-size:28px;

    line-height:1.7;

    

    z-index:2;
    
    
    
    

}

/*========================================
MANFAAT AGIHAN SEMULA ZAKAT
========================================*/

.impact-section{
    padding:0px 0;
    background:#f8fafc;
    position:relative;
    overflow:hidden;
}

/*========================================
HEADER
========================================*/

.impact-header{
    max-width:1300px;
    margin:0 auto 50px;
    text-align:center;
}



.impact-header h2{
    margin:25px 0;
    font-size:48px;
    line-height:1.2;
    color:var(--primary);
}

.impact-header p{
    width:90%;
    margin:0 auto;
    font-size:30px;
    line-height:1.7;
    color:#6b7280;
}

/*========================================
BANNER IMAGE
========================================*/

.impact-banner{

    max-width:1100px;
    margin:0 auto 60px;

    position:relative;
    overflow:hidden;

    border-radius:28px;

    border:1px solid rgba(37,99,235,.08);

    box-shadow:
        0 25px 60px rgba(18,53,120,.12),
        0 10px 30px rgba(37,99,235,.08);

}

.impact-image{

    width:100%;
    height:420px;

    display:block;

    object-fit:cover;

}

.impact-banner::after{

    content:"";

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(18,53,120,.05),
        rgba(18,53,120,.18)
    );

}

/*========================================
BENEFIT GRID
========================================*/

.impact-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px !important;

}

/*========================================
CARD
========================================*/


.impact-card{

    position:relative;
    overflow:hidden;

    background:#fff;

    border-radius:24px;

    padding:15px 10px !important;

    text-align:center;

    border:1px solid rgba(37,99,235,.08);

    transition:.35s;

    box-shadow:
        0 8px 30px rgba(18,53,120,.08),
        0 2px 8px rgba(18,53,120,.05);

}

.impact-card::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:5px;

    background:
    linear-gradient(
        90deg,
        #123578,
        #2563eb,
        #c8a650
    );

    transform:scaleX(0);

    transition:.35s;

}

.impact-card:hover::before{

    transform:scaleX(1);

}

.impact-card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 45px rgba(18,53,120,.12);

}




/*========================================
ICON
========================================*/

.impact-icon{

    width:70px !important;
    height:70px !important;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#eef4ff;

    transition:.35s;

}


.svg-icon{

    width:78px;
    height:78px;

    fill:none;

    stroke:var(--primary);
    stroke-width:1.8;

}

.svg-icon path,
.svg-icon circle{

    stroke-linecap:round;
    stroke-linejoin:round;

}

.impact-card:hover .impact-icon{

    background:var(--primary);

}

.impact-card:hover .svg-icon{

    stroke:#fff;

}

/*========================================
CARD CONTENT
========================================*/

.impact-card h3{

    margin-bottom:28px;

    font-size:32px !important;
    line-height:1;
    font-weight: 50px !important;

    color:var(--primary);

}

.impact-line{

    width:65px;
    height:4px;

    margin:0 auto 20px;

    border-radius:999px;

    background:#c8a650;

}

.impact-card p{

    margin:0;

    font-size:26px !important;
    line-height:1;
    font-weight: 10px !important;
    color:#6b7280;
    padding:20px;

}

/*========================================
HIGHLIGHT
========================================*/

.impact-highlight{

    margin-top:70px;

    display:flex;
    align-items:center;

    gap:35px;

    padding:45px;

    border-radius:28px;

    background:
    linear-gradient(
        135deg,
        #123578,
        #2563eb
    );

    color:#fff;

    box-shadow:
        0 20px 45px rgba(18,53,120,.18);

}

.impact-highlight-circle{

    width:130px;
    height:130px;

    flex-shrink:0;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.12);

}

.highlight-svg{

    width:70px;
    height:70px;

    stroke:#fff;

}

.impact-highlight-content{

    flex:1;

}



.impact-highlight-content h3{

    margin-bottom:18px;

    font-size:32px !important;
    padding:20px;
    color:#fff;
    line-height: 1;

}

.impact-highlight-content p{

    margin:0;

    font-size:26px !important;
    line-height:1.2;
    padding-left:20px;
    padding-right:30px;
    color:rgba(255,255,255,.95);

}

.impact-highlight strong{

    color:#ffd76a;

}

/*========================================
DECORATION
========================================*/

.impact-section::before{

    content:"";

    position:absolute;

    right:-180px;
    top:-180px;

    width:450px;
    height:450px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(37,99,235,.05),
        transparent 70%
    );

}

.impact-section::after{

    content:"";

    position:absolute;

    left:-150px;
    bottom:-150px;

    width:350px;
    height:350px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(200,166,80,.05),
        transparent 70%
    );

}

/*========================================
CARA MEMOHON
========================================*/

.about-bottom{
    grid-column:1 / -1;
    margin-top:20px;
}



/* Grid */

.step-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;

}

/* Card */

.step-card{

    background:#fff;
    border-radius:24px;
    padding:40px 30px;

    text-align:center;

    border:1px solid rgba(37,99,235,.08);

    box-shadow:0 15px 45px rgba(18,53,120,.08);

    transition:.35s ease;

    position:relative;

    overflow:hidden;

}

.step-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:linear-gradient(
        90deg,
        #2563eb,
        #123578
    );

}

.permohonan-title{
    font-size:30px;
    text-align: center;
    margin-bottom: 30px;
}

.step-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(18,53,120,.15);

}

/* Circle */

.step-circle{

    width:85px;
    height:85px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:32px;
    font-weight:800;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563eb,
        #123578
    );

    box-shadow:0 12px 30px rgba(37,99,235,.25);

}

/* Icon */



/* Title */

.step-card h3{

    font-size:30px;

    color:var(--primary);

    margin-bottom:18px;

}

/* Description */

.step-card p{

    font-size:26px;

    color:#64748b;

    line-height:1.8;

    margin:0;

}
.download-icon{
    width:70px;
    height:70px;
    margin:18px auto;
    border-radius:18px;
    background:#eef6ff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.download-icon svg{
    width:60px;
    height:60px;
    color:#1565c0;
}
/*========================================
CTA
========================================*/

.about-cta{
    padding:100px 0;
    text-align:center;
    background:linear-gradient(135deg,#123578,#1d4ed8);
    color:#fff;
}

.about-cta .section-label{
    background:rgba(255,255,255,.15);
    color:#fff;
}

.about-cta h2{
    margin:25px 0;
    font-size:46px;
    color:#fff;
}

.about-cta p{
    max-width:720px;
    margin:0 auto 40px;
    font-size:18px;
    line-height:1.9;
    color:rgba(255,255,255,.9);
}

.hero-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

/*========================================
PERKHIDMATAN BERKAITAN
========================================*/

.related-ribbon{

   
    border:1px solid #E7ECF3;
    border-radius:18px;

    background:#fff;

    text-align:center;


}

.related-ribbon h2{

    margin-bottom:22px;

    font-size:34px;
    color:#13294B;

}

.ribbon-nav{

    display:flex;
    flex-wrap:wrap;

    align-items:center;
    margin:0 auto;
    justify-content: center;

    gap:14px;

}

.ribbon-nav a{

    text-decoration:none;

    color:#13294B;
    font-size:26px;

    font-weight:600;

    padding:10px 18px;

    border-radius:12px;

    background:#F7F9FC;

    transition:.25s;

}

.ribbon-nav a:hover{

    background:#1E5EFF;

    color:#fff;

}

.ribbon-arrow{

    color:#A0AEC0;

    font-size:26px;

    font-weight:700;

}

.ribbon-nav a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.ribbon-icon{
    width:22px;
    height:22px;
    flex-shrink:0;
}

.ribbon-nav span{
    font-size:20px;
}