@media screen and (max-width: 600px) {
    .content h4{
        font-size: 26px;
        line-height: 32px;
    }

    .content h2{
        font-size: 26px;
        line-height: 32px;
    }

    .content p{
        font-size: 15px;
        line-height: 20px;
    }

    .nav{
        padding-top: 50px;
        height: 80px;
    }

    .nav-container {
        width: 100% !important;
        position: relative !important;
        margin: 0 auto !important;
    }

    .brand img{
        width: 30px;
        margin-top:  15px;
    }

    .header{
        background-color: #87c080 !important;
        background-image: url("../images/20.png");
    }

    .header-wrapper {
        top: calc(20% + 30px);
    }

    .header-wrapper img{
        width: 75%;
    }

    .header-wrapper p{
        font-size: 16px;
        line-height: 21px;
    }

    .card-cause{
        border-radius: 10px;
        box-shadow: none;
        background-color: #87c080;
    }

    .card-cause .card-content{
        padding: 15px;
    }

    .card-cause img{
        width: 80%;
        max-width: 120px;
    }

    .card-cause .col{
        margin-bottom: 80px;
    }

    .cause-data{
        padding-top: 0px;
    }

    .cause-text{
        padding-top: 40px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .cause-text p{
        font-size: 16px;
        line-height: 19px;
        color: #123147;
    }

    .bottom-head{
        width: calc(100%);
        height: calc(95vh);
        background-image: url("../images/21.png");
        border-bottom: 1px solid #f0f0f0;
    }

    .bottom-head-area{
        width: 90%;
        max-width: 800px; 
        margin: auto; 
        padding-top: 60px;
    }

    .about-home{
        padding-top: 0px;
        padding-bottom: 0px;
        text-align: center;
    }

    .how{
        margin-top: 40px;
    }

    .how img{
        margin-top: 0px;
        width: 55%;
        max-width: 150px;
    }

    .mission{
        margin-top: 40px;
    }

    .owl-dots {
        display: block !important;
        text-align: center;
        margin-top: 15px;
    }

    .owl-dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        background: #c9c9c9 !important;
        border-radius: 50%;
        margin: 0 5px;
    }

    .owl-dot.active {
        background: #e7e7e7 !important; /* warna aktif */
    }
}