/*==================================================
MOBILE RESPONSIVE
Gunawan Brothers Portfolio
==================================================*/

/*=========================================
GLOBAL
=========================================*/


@media screen and (max-width:768px){


    html{
        font-size:14px;
    }

    body{
        overflow-x:hidden;
    }

    .container{
        width:94%;
        margin:auto;
    }






    /*=========================================
    MOON
    =========================================*/

        .moon-wrapper{
            top:40px;
            right:20px;
        }


    /*=========================================
    NAVBAR
    =========================================*/

    nav{
        padding:15px 20px;
    }

    .logo{
        font-size:1.3rem;
    }

    .nav-links{
        display:none;
    }


    /*=========================================
    HERO
    =========================================*/

    .hero{
        min-height:auto;
        padding:120px 0 60px;
    }

    .hero .container{
        display:flex;
        flex-direction:column-reverse;
        align-items:center;
        gap:40px;
    }

    .hero-content{
        width:100%;
        text-align:center;
    }

    .hero-content h1{
        font-size:2.5rem;
    }

    .hero-content h2{
        font-size:1.3rem;
    }

    .hero-content p{
        font-size:1rem;
        line-height:1.8;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-image{
        width:100%;
        display:flex;
        justify-content:center;
    }

    .profile-image{
        width:240px;
        max-width:80%;
    }



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

    .about-grid{
        display:block;
    }

    .about-image{
        text-align:center;
        margin-bottom:40px;
    }

    .about-content{
        text-align:center;
    }


    /*========================================= 
    SKILLS 
    =========================================*/

    .skills-wrapper{
        display:block;
        width:100%;
    }

    .skills-menu{
        width:100%;
        margin-bottom:25px;
    }

    .skill-screen{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    .skill-screen {
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
        display:block;
        position:static;
    }


    /*=========================================
    PROJECT
    =========================================*/

    .project-row{
        display:grid;
        grid-template-columns:80px minmax(0,1fr);
        align-items:center;
        column-gap:15px;
        row-gap:15px;
    }

    .project-icon{
        margin-bottom:0;
        width:80px;
        height:80px;
    }

    .project-title{
        margin:0;
        font-size:1.8rem;
    }


    .project-description{
        grid-column:1 / -1;
    }

    .projects-stage {
        min-height: auto;
    }

    .project-preview {
        width: 100%;
        height: auto;
    }

    .preview-track {
        gap: 0;
    }

    .preview-slide {
        height: 220px;   /* sebelumnya 500px */
    }



    /*=========================================
    PROJECT VIEWER
    =========================================*/

    .viewer{
        width:96%;
        height:92%;
    }

    .viewer-header{
        padding:20px;
    }

    .viewer-header h2{
        font-size:2rem;
    }

    .viewer-body{
        padding:20px;
    }

    .viewer-content{
        display:block;
    }

    .viewer-left{
        width:100%;
        margin-bottom:30px;
    }

    .viewer-right{
        width:100%;
    }

    .viewer-modules li{
        margin-bottom:10px;
    }

    #reportPreview img{
        width:100%;
        height:auto;
        border-radius:10px;
    }


    /*=========================================
    CONTACT
    =========================================*/

    .contact-grid{
        display:block;
    }

    .contact-info{
        margin-bottom:30px;
    }


    /*=========================================
    FOOTER
    =========================================*/

    footer{
        text-align:center;
    }

}