@media(max-width: 600px){



    .side-menu{
        display: none;
    }

    /* header  */
    .header{
        height: 35px;
        margin-top: 0;
    }
    .header .nav-title{
        height: 35px;
        padding-left: 5px;
    }
    .header .nav-title img{
        /* height: 15px; */
        width: 12%;
        margin: 0;
    }
    .header .nav-title h3{
        padding: 0;
        font-weight: 300;
        font-size: 11px;
    }
    .header .nav-btns{
        height: 35px;
        margin: 0;
    }
    .header .nav-btns .rightup{
        width: 60%;
        height: 14px;
    }

    /* banner */
    
    .banner .dp-align{
        display: none;
    }
    .banner .mobile-dp{
        display: block; 
        padding-right: 150px;
        padding-left: 150px;
        padding-top: 10px;
        margin: 0 auto;
        position: relative;
    }
    .banner .mobile-dp img{
        width: 100%;
    }
    .banner .caption{
        padding: 0;

    }
    .banner .caption h3 {
        width: 22%;
        margin: 0;
        font-weight: 400;
        font-size: 10px;
        margin-top: 2px;   
    }
    .banner .caption img {
        width: 7%;
    }
    .banner .caption2 h1{
        font-size: 45px;
    }
    .banner .caption2 h1 img{
        width: 2%;
        margin: 0;
    }
    .banner .caption2 p{
        font-weight: 200;
        font-size: 8px;
        line-height: 8.01px;
        margin: 2px;
    }
    .banner .grdint{
        font-weight: 300;
        font-size: 6px !important;
        margin-bottom: 2px;
    }
    .banner .grdint img{
        width: 4%;
        margin-bottom: 20px;
    }

    .banner .downlt{
        height: 16px;
    }

    .banner .downlt p {
        margin: 0;
        font-weight: 300;
        font-size: 3px;
    }

    .banner .downrt{
        height: 16px;
    }

    .banner .downrt p {
        margin: 0;
        font-weight: 300;
        font-size: 3px;
    }

    .animbg2{
        height: 620px;
        top: -150px;
    }

    /* about  */
    .about-me .abt-bio{
        height: 185px;
        width: 100%;
        border-radius: 12px;
        margin-top: 20px;
        margin-bottom: 8px;
    }
    .about-me .abt-bio h3{
        font-family: "Fjalla One", sans-serif;
        font-size: 12px;
        font-weight: 400;
        padding-left: 20px;
        padding-top: 10px;
        margin-bottom: 0;
        height: 21px;
    }
    .about-me .abt-bio h6{
        font-size: 6px;
        padding-left: 60px;
    }
    .about-me .abt-bio .abt-cap{
        padding-left: 30px;
        padding-right: 20px;
        padding-top: 0;
        padding-bottom: 0;

    }
    .about-me .abt-bio .frst-stanza {
        font-weight: 300;
        font-size: 8px;
        line-height: 11.45px;
        /* padding-left: 35px; */
        padding-top: 10px;
        text-indent: 35px;
        margin-bottom: 0px;
    }
    .about-me .abt-bio p{
        font-weight: 300;
        font-size: 8px;
        line-height: 11.45px;
        /* padding-left: 35px; */
        padding-top: 10px;
    }
    .about-me .abt-bio img {
        /* width: 10%;
        position: absolute;
        right: 20px;
        bottom: 18px; */
        display: none;
    }

    /* .btncv {
        width: 80px;
        height: 20px;
        border-radius: 50px;
        border: 1px solid black;
        text-align: center;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
    } */

    .btncv {
        width: 110px;
        height: 30px;
        border-radius: 50px;
        border: 1px solid white;
        text-align: center;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
        align-items: center;
    }

    .btncv .pulse-button{
        font-size: 15px;
        font-weight: 400;
    }
    

    /* education  */
    .edu-exp .education {
        width: 100%;
        border-radius: 3px;
        padding: 12px 8px;
        margin-top: 12px;
        margin-bottom: 0px;
        display: block;
        height: auto;
        
    }
    .edu-exp .square1 {
        width: 70px;
        height: 25px;
        border-radius: 3px;
        margin: 0 auto;   
    }
    .edu-exp h3 {
        font-size: 12px;
        font-weight: 300;
        text-align: center;
        margin: 0;
    }
    .edu-exp .education .ulms{
        margin: 0;
        height: 50px;
        justify-content: left;
        margin-top: 10px;
    }
    .education .ulms .brick1{
        margin: 0;
    }
    .education .ulms .brick1 img {
        width: 50px;
        height: 50px;
    }
    .education .ulms .caption1 {
        margin-left: 10px;
        display: block;
    }
    .education .ulms .caption1 p{
        font-size: 7px;
        font-weight: 200;
    }
    .education .ulms .caption1 h5{
        font-size: 12px;
        line-height: 12.06px;
        height: 26px;
    }
    .education .ulms .caption1 h6{
        font-size: 9px;
        margin: 0;
        height: 10px;
    }


    .edu-exp .education .skilzhub{
        margin: 0;
        height: 50px;
        justify-content: left;
        margin-top: 10px;
    }
    .education .skilzhub .brick2{
        margin: 0;
    }
    .education .skilzhub .brick2 img {
        width: 50px;
        height: 50px;
    }
    .education .skilzhub .caption2 {
        margin-left: 10px;
        display: block;
    }
    .education .skilzhub .caption2 p{
        font-size: 7px;
        font-weight: 200;
    }
    .education .skilzhub .caption2 h5{
        font-size: 12px;
        line-height: 12.06px;
        height: 26px;
    }
    .education .skilzhub .caption2 h6{
        font-size: 9px;
        margin: 0;
        height: 10px;
    }


    .edu-exp .education .kcreative{
        margin: 0;
        height: 50px;
        justify-content: left;
        margin-top: 10px;
    }
    .education .kcreative .brick3{
        margin: 0;
    }
    .education .kcreative .brick3 img {
        width: 50px;
        height: 50px;
    }
    .education .kcreative .caption3 {
        margin-left: 10px;
        display: block;
    }
    .education .kcreative .caption3 p{
        font-size: 7px;
        font-weight: 200;
    }
    .education .kcreative .caption3 h5{
        font-size: 12px;
        line-height: 12.06px;
        height: 26px;
    }
    .education .kcreative .caption3 h6{
        font-size: 9px;
        margin: 0;
        height: 10px;
    }
    

    /* experience  */

    .edu-exp .experience {
        width: 100%;
        border-radius: 3px;
        padding: 12px 8px;
        margin-top: 12px;
        margin-bottom: 12px;
        display: block;
        height: auto;
        
    }
    .edu-exp .square1 {
        width: 70px;
        height: 25px;
        border-radius: 3px;
        margin: 0 auto;   
    }
    .edu-exp h3 {
        font-size: 12px;
        font-weight: 300;
        text-align: center;
        margin: 0;
    }
    .edu-exp .experience .null1{
        margin: 0;
        height: 50px;
        justify-content: left;
        margin-top: 10px;
    }
    .experience .null1 .brick4{
        margin: 0;
    }
    .experience .null1 .brick4 img {
        width: 50px;
        height: 50px;
    }
    .experience .null1 .caption4 {
        margin-left: 10px;
        display: block;
    }
    .experience .null1 .caption4 p{
        font-size: 7px;
        font-weight: 200;
    }
    .experience .null1 .caption4 h5{
        font-size: 12px;
        line-height: 12.06px;
        height: 26px;
    }
    .experience .null1 .caption4 h6{
        font-size: 9px;
        margin: 0;
        height: 10px;
    }


    .edu-exp .experience .null2{
        margin: 0;
        height: 50px;
        justify-content: left;
        margin-top: 10px;
    }
    .experience .null2 .brick5{
        margin: 0;
    }
    .experience .null2 .brick5 img {
        width: 50px;
        height: 50px;
    }
    .experience .null2 .caption5 {
        margin-left: 10px;
        display: block;
    }
    .experience .null2 .caption5 p{
        font-size: 7px;
        font-weight: 200;
    }
    .experience .null2 .caption5 h5{
        font-size: 12px;
        line-height: 12.06px;
        height: 26px;
    }
    .experience .null2 .caption5 h6{
        font-size: 9px;
        margin: 0;
        height: 10px;
    }


    .edu-exp .experience .visual-ethics{
        margin: 0;
        height: 50px;
        justify-content: left;
        margin-top: 10px;
    }
    .experience .visual-ethics .brick6{
        margin: 0;
    }
    .experience .visual-ethics .brick6 img {
        width: 50px;
        height: 50px;
    }
    .experience .visual-ethics .caption6 {
        margin-left: 10px;
        display: block;
    }
    .experience .visual-ethics .caption6 p{
        font-size: 7px;
        font-weight: 200;
    }
    .experience .visual-ethics .caption6 h5{
        font-size: 12px;
        line-height: 12.06px;
        height: 26px;
    }
    .experience .visual-ethics .caption6 h6{
        font-size: 9px;
        margin: 0;
        height: 10px;
    }

    /* skills  */

    .skills-tool .square2 {
        width: 70px;
        height: 25px;
        border-radius: 3px;
    }
    .skills-tool .square2 h3 {
        font-size: 12px;
        font-weight: 300;
    }
    .skills-tool p {
        font-size: 8px;
        font-weight: 200;
        margin-top: 8px;
        margin-bottom: 8px;
    }
    .skills-tool .shortbio {
        font-size: 10px;
        font-weight: 300;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 30px;
    }

    /* fig  */
    .skills-tool .figma .round1 {
        width: 80px;
        height: 80px;
    }
    .skills-tool .figma .round1 img {
        width: 19px;
        height: 27px;
    }
    .skills-tool .figma .round1 p {
        font-size: 15px;
        font-weight: 500;
    }
    .skills-tool .figma p {
        font-size: 12px;
        font-weight: 300;
        padding-top: 7px;
        width: 100%;
    }

    /* ivis  */
    .skills-tool .invision .round2 {
        width: 80px;
        height: 80px;
    }
    .skills-tool .invision .round2 img {
        width: 31px;
        height: 31px;
    }
    .skills-tool .invision .round2 p {
        font-size: 15px;
        font-weight: 500;
    }
    .skills-tool .invision p {
        font-size: 12px;
        font-weight: 300;
        padding-top: 7px;
        width: 100%;
    }

    /* ps  */
    .skills-tool .photoshop .round1 {
        width: 80px;
        height: 80px;
    }
    .skills-tool .photoshop .round1 img {  
        width: 32px;
        height: 31px;
    }
    .skills-tool .photoshop .round1 p {
        font-size: 15px;
        font-weight: 500;
    }
    .skills-tool .photoshop p {
        font-size: 12px;
        font-weight: 300;
        padding-top: 7px;
        width: 100%;
    }
    
    /* cnva  */
    .skills-tool .canva .round2 {
        width: 80px;
        height: 80px;
    }
    .skills-tool .canva .round2 img {
        width: 32px;
        height: 31px;
    }
    .skills-tool .canva .round2 p {
        font-size: 15px;
        font-weight: 500;
    }
    .skills-tool .canva p {
        font-size: 12px;
        font-weight: 300;
        padding-top: 7px;
        width: 100%;
    }
    


    .skills-tool .pair3 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .skills-tool .davinci {
        margin-right: 3px;
    }
    .skills-tool .premier {
        margin-left: 3px;
    }

    /* davin  */
    .skills-tool .davinci .round1 {
        width: 80px;
        height: 80px;
    }
    .skills-tool .davinci .round1 img {  
        width: 32px;
        height: 32px;
    }
    .skills-tool .davinci .round1 p {
        font-size: 15px;
        font-weight: 500;
    }
    .skills-tool .davinci p {
        font-size: 12px;
        font-weight: 300;
        padding-top: 7px;
        width: 100%;
    }

    /* pr  */
    .skills-tool .premier .round2 {
        width: 80px;
        height: 80px;
    }
    .skills-tool .premier .round2 img {
        width: 32px;
        height: 31px;
    }
    .skills-tool .premier .round2 p {
        font-size: 15px;
        font-weight: 500;
    }
    .skills-tool .premier p {
        font-size: 12px;
        font-weight: 300;
        padding-top: 7px;
        width: 100%;
    }

    /* tools  */

    /* fig  */
    .skills-tool .html .round1 {
        width: 80px;
        height: 80px;
    }
    .skills-tool .html .round1 img {
        width: 45% ;
        
    }
    .skills-tool .html p {
        font-size: 12px;
        font-weight: 300;
        padding-top: 7px;
        width: 100%;
    }

    /* ivis  */
    .skills-tool .css .round2 {
        width: 80px;
        height: 80px;
    }
    .skills-tool .css .round2 img {
        width: 45%;
    }
    .skills-tool .css p {
        font-size: 12px;
        font-weight: 300;
        padding-top: 7px;
        width: 100%;
    }

    /* ps  */
    .skills-tool .js .round1 {
        width: 80px;
        height: 80px;
    }
    .skills-tool .js .round1 img {  
        width: 42%;
    }
    .skills-tool .js p {
        font-size: 12px;
        font-weight: 300;
        padding-top: 7px;
        width: 100%;
    }
    
    /* cnva  */
    .skills-tool .jquery .round2 {
        width: 80px;
        height: 80px;
    }
    .skills-tool .jquery .round2 img {
        width: 45%;
    }
    .skills-tool .jquery p {
        font-size: 12px;
        font-weight: 300;
        padding-top: 7px;
        width: 100%;
    }
    


    .skills-tool .pair6 {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .skills-tool .bootstrap {
        margin-right: 3px;
    }
    .skills-tool .ftp {
        margin-left: 3px;
    }

    /* davin  */
    .skills-tool .bootstrap .round1 {
        width: 80px;
        height: 80px;
    }
    .skills-tool .bootstrap .round1 img {  
        width: 45%;
    }
    .skills-tool .bootstrap p {
        font-size: 12px;
        font-weight: 300;
        padding-top: 7px;
        width: 100%;
    }

    /* pr  */
    .skills-tool .ftp .round2 {
        width: 80px;
        height: 80px;
    }
    .skills-tool .ftp .round2 img {
        width: 42%;
    }
    .skills-tool .ftp p {
        font-size: 12px;
        font-weight: 300;
        padding-top: 7px;
        width: 100%;
    }

    
    
    /* button  */
    .skills-tool .btn1 {
        margin-top: 8px;
        margin-bottom: 16px;
    }
    .skills-tool .btn1 ul li a.activelocation{
        width: 74px;
        font-size: 14px;
        font-weight: 300;
    }
    .skills-tool .btn1 ul li a{
        width: 74px;
        font-size: 14px;
        font-weight: 300;
    }

    /* project  */
    .project .square3 {
        width: 70px;
        height: 25px;
        border-radius: 3px;
        margin-bottom: 14px;
    }
    .project .square3 h3 {
        font-size: 12px;
        font-weight: 300;
    }
    .project .btn2 {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .project .btn2 ul li a.activelocation{
        width: 74px;
        font-size: 14px;
        font-weight: 300;
    }
    .project .btn2 ul li a{
        width: 74px;
        font-size: 14px;
        font-weight: 300;
    }

    .project .item.slick-slide.slick-center{
        background-size: contain;
    }
    

    /* contact  */
    .contact .square4 {
        width: 70px;
        height: 25px;
        border-radius: 3px;
        margin-bottom: 14px;
    }
    .contact .square4 h3 {
        font-size: 12px;
        font-weight: 300;
    }
    .contact .msg-box {
        align-items: center;
    }
    .contact .msg-box .namesection {
        border-radius: 3px;
        margin-top: 10px;
    }
    .contact .msg-box .namesection input{
        padding-left: 10px;
        height: 30px;
    }
    .contact .msg-box .msgsection {
        border-radius: 3px;
        margin-top: 10px;
    }
    .contact .msg-box .msgsection input{
        padding-left: 10px;
        height: 100px;
    }
    .contact .msg-box .btnsend {
        width: 65px;
        height: 20px;
        margin-bottom: 7px;
        margin-top: 7px;
    }

    .contact .msg-box .btnsend .button-wrapper{
        width: 65px;
        height: 20px;
        margin-bottom: 7px;
        margin-top: 7px;
    }
    
    .contact .contact-box {
        border-radius: 3px;
        margin-top: 10px;
    }
    .contact .contact-box .square3 {
        width: 70px;
        height: 23px;
        border-radius: 3px;
        margin: 0 auto;
        margin-top: 8px;
    }
    .contact .contact-box .square3 h4 {
        font-size: 10px;
        font-weight: 300;
    }
    .contact .contact-box .contact-icn {
        width: 30px;
        height: 30px;
        border-radius: 3px;
        margin-left: 5px;
        margin-top: 10px;
    }
    .contact .contact-box .contact-icn img {
        width: 17px;
    }
    .contact .contact-box .contact-info {
        border-radius: 3px;
        margin-left: 5px;
        margin-top: 10px;
        margin-right: 5px;
        padding-bottom: 7px;
        padding-left: 5px;
    }
    .contact .contact-box .contact-info h6 {
        font-size: 12px;
        font-weight: 300;
        margin-left: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .contact .contact-box .contact-info a {
        font-size: 10px;
        font-weight: 200;
        margin-left: 5px;
        margin-top: 5px;
        padding-bottom: 5px;
    }
    .contact .contact-box .locate-icn {
        width: 30px;
        height: 30px;
        border-radius: 3px;
        margin-left: 5px;
        margin-top: 10px;
    }
    .contact .contact-box .locate-icn img {
        width: 17px;
    }
    .contact .contact-box .locate-info {
        border-radius: 3px;
        margin-left: 5px;
        margin-top: 5px;
        margin-right: 5px;
        padding-left: 5px;
        margin-bottom: 7px;
    }
    .contact .contact-box .locate-info h6 {
        font-size: 12px;
        font-weight: 300;
        margin-left: 5px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .contact .contact-box .locate-info p {
        font-size: 12px;
        font-weight: 300;
        margin-left: 5px;
        margin-top: 5px;
        padding-bottom: 5px;
    }
    .contact .contact-box .locate-info a {
        font-size: 6px;
        font-weight: 300;
    }
    .contact .contact-box .boxpair-1{
        padding-right: 15px;
        padding-left: 15px;
    }
    .contact .contact-box .boxpair-2{
        padding-right: 15px;
        padding-left: 15px;
    }
    .btnsend {
        display: flex;
        /* margin: 0; */
        /* margin-top: 10px; */
        /* margin-bottom: 10px; */
        align-items: center;
        /* text-align: center; */
        justify-content: center;
    }
    .button-wrapper {
        position: relative;
        /* margin: 0; */
        /* text-align: center; */
        /* display: flex; */
        /* justify-content: center; */
        /* align-items: center; */
    }
    .button {
        display: flex;
        font-size: 12px;
        line-height: 28px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 2px;
        /* padding: 8px 28px; */
        background-color: rgba(255, 255, 255, 0.49);
        color: black;
        border-radius: 100px;
        border: 0px;
        cursor: pointer;
        width: 65px;
        height: 20px;
        /* margin-bottom: 7px; */
        /* margin-top: 7px; */
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .bg6 .title-line {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .social{
        margin: 0 auto;
        width: 200px;
        display: flex;
        justify-content: space-between;

    }
    .social img{
        width: 50%;
    }
    .footer span {
        border: 1px solid black;
        margin-top: 30px;
        margin-bottom: 10px;
        display: flex;
    }
    .footer p {
        font-size: 6px;
        font-weight: 100;
        text-align: center;
        margin: 0;
    }











}