/* Font Poopins */


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');





@media only screen and (min-width: 320px) and (max-width: 767px) {





    body,


    html {


        height: 100%


    }





    .header{


        width: 100%;


    }





    /* HOME */


    .jumbotron-home{


        margin-top: 20%;


        background-image: url('../images/assets/kiri.svg'), url('../images/assets/kanan.svg');


        background-repeat: no-repeat, no-repeat;


        background-size: 500px, 200px;


        background-position: 200% 100%, 100% 100%;


    }





    .jumbotron-home .display-4{


        font-size: 40px;


    }





     .btn-download{


        height: 50px;


        width: 130px;


    }





    .jumbotron-home .illustration{


        margin-top: 10%;


    }





    .post-dribbble .card-dribbble {


        margin-top: 2%;


        border-radius: 30px;


        overflow: hidden;


    }





    .post-dribbble .card-dribbble img{


        width: 100%;


        height: 80vw;


        object-fit: cover;


        transition: transform .5s;


    }





    .home-tools{


        margin-top: 10%;


    }





    .home-tools .tools{


        width: 100%;


    }





    /* Home Contact */


    .home-contact .background{


        margin-top: -40%;


        background-color: #F2F2F2;


        height: 200px;


        z-index: -1;


        position: relative;


    }





    .card-contact .card-body{


        margin-top: 10%;


    }





    .card-contact h5{


        font-size: 20px;


    }





    .card-contact .email-me {


        margin: auto;


        width: 100%;


        padding-top: 50px;


    }





    .home-contact .contact-card{


        width: 100%;


    }





    .contact-card .assets-contact img{


        max-width: 70px;


    }





    /* PROJECT */


    .jumbotron-project .isi-project{


        margin-top: 10%;


    }





    .isi-project .card-columns {


        column-count: 2;


    }





    /* PROJECT DETAIL */


    section{


        margin-top: 25%;


    }





    .project-detail{


        margin: 0 auto;


        width: 80%;


    }





    .project-detail .selection-category{


        column-count: 2;


    }





    .selection .selection-tags, .selection-tags p{


        text-align: center;


    }





    .selection-link{


         text-align: left;


    }





    /* BLOG */


    .blog{


        margin-top: 25%;


    }





    .search-blog .card .body{


        margin-top: 3%;


        padding: 10px;


    }





    .search-blog .card .body input{


        margin-top: 1%;


        width: 120%;


    }





    .blog .popular-blog{


        margin-top: 10%;


    }





    .card-blog-populartop .card-img-popular{


        margin-top: 5%;


        width: 100%;


        height: 50vw;


        object-fit: cover;


    }





    .blog .all-blog{


        margin-top: 15%;


    }





    .blog .card-all-blog .card-img-top{


        width: 100%;


        height: 50vw;


        object-fit: cover;


    }





    /* BLOG DETAIL */


    .blog-detail{


        margin: 0 auto;


        width: 80%;


    }





    .blog-detail .header-blog-detail{


        margin-top: 15%;


    }


    /* CONTACT */


    .contact{


        margin-top: 25%;


    }





    .contact .container{


        margin: 0 auto;


        width: 90%;


    }





    /* FOOTER */


    footer {


        padding-top: 10%;


        background-color: #F2F2F2;


        position: relative;


    }





    .footer h6{


        margin-bottom: 10%;


    }


}