/* ==========================================
   RESPONSIVE MOBILE
========================================== */

@media(max-width:768px){


   
/* 
    /* SAMPAH */

    /* .bin{
        width:130px;
        height:130px;
        font-size:24px;
    } */

    /* POHON */

    /* .spot{
        width:100px;
        height:100px;
        font-size:50px;
    } */ 

    /* SERTIFIKAT */

    .certificate{
        margin:20px;
        padding:20px;
    }

    /* HOME */

    .home-wrapper{

        justify-content:flex-start;

        padding-top:75px;
    }

    .hero-title{

        position:relative;

        top:auto;
        left:auto;

        transform:none;

        width:100%;

        padding:0 10px;

        margin-bottom:75px;
    }

    .hero-title h1{

        font-size:28px;

        gap:8px;

        flex-wrap:wrap;
    }

    .hero-title h2{

        font-size:18px;
    }

    .hero-title p{

        font-size:12px;

        line-height:1.4;
    }

    .title-logo{

        width:50px;
        height:50px;

        top:15px;
    }

    .menu-panel{

        width:92%;

        margin-top:0;

        padding:18px;

        border-radius:20px;
    }

    .menu-btn{

        font-size:17px;

        padding:14px;
    }

    /* MATAHARI */

    .sun{

        width:45px;
        height:45px;

        top:10px;
        right:10px;
    }
    /* tombol soound */
    .audio-control{

        bottom:15px;
        right:15px;

        padding:8px 12px;
    }

    #volumeSlider{

        width:70px;
    }



}