/* =====================================
   BUTTON
===================================== */

.btn-round{

    border-radius:30px;

    padding:12px 30px;

    font-weight:600;

}

.btn-success{

    background:var(--primary);

    border:2px solid var(--primary);

}

.btn-donasi{

    background:#fff;

    color:var(--primary);

    border:2px solid var(--primary);

}

.btn-donasi:hover{

    background:var(--primary);

    color:#fff;

}


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

.card-box{

    background:#fff;

    border-radius:20px;

    box-shadow:var(--shadow);

    transition:var(--transition);

    text-align:center;

    height:100%;

}

.card-box:hover{

    transform:translateY(-8px);

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

}


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

.circle-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    margin:auto auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--primary);

    color:#fff;

    font-size:2rem;

}


/* ==========================================================
   SCROLL REVEAL ANIMATION
   BERANDA
========================================================== */

/*
   Mencegah animasi left/right membuat
   halaman melebar secara horizontal.
*/

html,
body {
    overflow-x: clip;
    overflow-y: auto;
}


[data-reveal] {

    opacity: 0;

    transform: translateY(60px);

    transition:
        opacity 1s cubic-bezier(.25, .46, .45, .94),
        transform 1s cubic-bezier(.25, .46, .45, .94);

    will-change:
        opacity,
        transform;
}


[data-reveal].is-visible {

    opacity: 1;

    transform: translateY(0);

}


/* ==========================================================
   REVEAL DARI KIRI
========================================================== */

[data-reveal="left"] {

    opacity: 0;

    transform: translateX(-220px);

    transition:
        opacity 1s cubic-bezier(.25, .46, .45, .94),
        transform 1s cubic-bezier(.25, .46, .45, .94);

}


[data-reveal="left"].is-visible {

    opacity: 1;

    transform: translateX(0);

}


/* ==========================================================
   REVEAL DARI KANAN
========================================================== */

[data-reveal="right"] {

    opacity: 0;

    transform: translateX(220px);

    transition:
        opacity 1s cubic-bezier(.25, .46, .45, .94),
        transform 1s cubic-bezier(.25, .46, .45, .94);

}


[data-reveal="right"].is-visible {

    opacity: 1;

    transform: translateX(0);

}


/* ==========================================================
   REVEAL ZOOM
========================================================== */

[data-reveal="zoom"] {

    opacity: 0;

    transform:
        translateY(60px)
        scale(.92);

    transition:
        opacity 1s cubic-bezier(.25, .46, .45, .94),
        transform 1s cubic-bezier(.25, .46, .45, .94);

    will-change:
        opacity,
        transform;
}


[data-reveal="zoom"].is-visible {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

}


/* ==========================================================
   MOBILE
   JARAK ANIMASI LEBIH KECIL
========================================================== */

@media (max-width: 767.98px) {

    [data-reveal="left"] {

        transform: translateX(-60px);

    }


    [data-reveal="right"] {

        transform: translateX(60px);

    }


    [data-reveal="left"].is-visible {

        transform: translateX(0);

    }


    [data-reveal="right"].is-visible {

        transform: translateX(0);

    }

}


/* ==========================================================
   AKSESIBILITAS
========================================================== */

@media (prefers-reduced-motion: reduce) {

    [data-reveal],
    [data-reveal="left"],
    [data-reveal="right"],
    [data-reveal="zoom"] {

        opacity: 1;

        transform: none;

        transition: none;

    }

}

/* ==========================================================
   TEXT SPAN REVEAL
========================================================== */

span[data-reveal] {
    display: inline-block;
    vertical-align: top;
}


/* ==========================================================
   MOBILE
   Natural wrapping + LEFT / RIGHT
========================================================== */

@media (max-width: 767.98px) {

    span[data-reveal],
    span[data-reveal="left"],
    span[data-reveal="right"],
    span[data-reveal="zoom"] {

        display: inline;

        opacity: 0;

        transform: none;

        position: relative;

        transition:
            opacity 1.3s cubic-bezier(.22, .61, .36, 1),
            left 1.3s cubic-bezier(.22, .61, .36, 1);
    }


    /* ------------------------------------------
       LEFT
    ------------------------------------------ */

    span[data-reveal="left"] {
        left: -40px;
    }


    span[data-reveal="left"].is-visible {
        opacity: 1;
        left: 0;
    }


    /* ------------------------------------------
       RIGHT
    ------------------------------------------ */

    span[data-reveal="right"] {
        left: 40px;
    }


    span[data-reveal="right"].is-visible {
        opacity: 1;
        left: 0;
    }


    /* ------------------------------------------
       ZOOM
    ------------------------------------------ */

    span[data-reveal="zoom"] {
        left: 0;
    }


    span[data-reveal="zoom"].is-visible {
        opacity: 1;
        left: 0;
    }

}