/* @media only screen and (max-width: 340px) {} */




@media only screen and (max-width: 700px) {
    body {
        font: normal 15px/30px var(--montserrat);
    }

    /* header area */

    .header-area .container-fluid .navbar .container .collapse .navbar-nav .nav-font.active::after {
        content: " ";
        height: 0;
        width: 0;
        display: block;
        background: none;
        margin: auto;
    }

    /* global class */
    .site-main .title-section {
        font-size: 18px;
        font-weight: 500;
        margin-top: 10%;
    }

    .site-main .img-title {
        margin-top: -12%;
        size: 50px;
    }

    /* end global class */


    /* .header-area .container-fluid {
        position: fixed;
        top: 0;
        z-index: 999;
    } */

    /* end header area */


    /* start jumbotron */
    .site-main .jm-bg-primary {
        background-size: cover;
        background-position: top center;
        background-attachment: fixed;

    }

    .site-main .jumbotron .jm-txt {
        z-index: 1 !important;
        margin-top: 70px;
        padding-left: 0;
    }

    .site-main .jumbotron h4 {
        line-height: 1rem;
        font-size: 17px;
    }

    .site-main .jumbotron h2 {
        font-size: 35px;
        font-weight: 900;
        line-height: 2.7rem;
    }

    .site-main .jumbotron p {
        font-size: 15px;
        line-height: 1.5rem;
        /* color: black; */
    }

    .site-main .jumbotron .container .row .col-lg-6 img {
        margin-top: -60px;
        size: 600px;
    }

    .site-main .jumbotron .container .row .col-lg-6 button {
        margin-top: 5%;
        font-weight: 500;
        border-radius: 35px;
        padding: 3px 10px 3px 10px;
        font-size: 14px;
    }

    /* end jumbotron */

    /* start about */
    .site-main .about {
        background-size: cover;
        /* margin-bottom: 10%; */
    }

    .site-main .about {
        padding-top: 10px;
    }

    .site-main .about .container .ornamen {
        margin-top: 0;
    }

    .site-main .about .container h1 {
        font-size: 35px;
        font-weight: 500;
        text-align: center;
    }

    .site-main .about .container .row .col-lg-5 .row .text-ds p {
        padding-left: 20px;
    }

    .site-main .about .container .row .col-lg-6 .progres-padding {
        margin-bottom: 3%;
    }

    /* end about */

    /* start profil */
    .site-main .profil {
        margin-top: 10%;
        background-size: cover;
        background-position: 30%;
        /* background-attachment: local; */
        margin-bottom: 20px;
    }

    .site-main .profil .container .row img {
        height: 280px;
        width: 280px;
    }

    .site-main .profil .row .col-lg-6 h1 {
        margin-bottom: 10%;
        padding-top: 0;
        margin-top: -5%;
        font-size: 15px;
    }

    .site-main .profil .container .row {
        color: var(--text-color2);
        font-family: var(--paytone);
        margin-bottom: 0;
    }

    /* end profil */

    /* star experience */
    .site-main .experience {
        background-size: cover;

    }

    .site-main .experience .container .row img {
        height: 250px;
        width: 250px;
    }

    .site-main .experience .container .row .bulatan {
        margin-top: -14%;
        box-shadow: var(--shadow-color);
    }

    .site-main .experience .container .owl-carousel .experience-clr {
        padding: 10px;
        line-height: 20px;
        text-align: left;
    }

    .site-main .experience .container .owl-carousel .experience-clr #padding-text {
        padding-bottom: 50px;
    }

    .site-main .experience .container .row .col-lg-6 .row .col-lg-12 .panah {

        margin-right: 20px;
        margin-top: 0;

    }

    .site-main .experience .container .row .col-lg-6 .row .pembungkus-panah .kanan {

        margin-right: 0;

    }

    .site-main .experience .container .row .col-lg-6 .row .pembungkus-panah {
        display: flex;
        justify-content: center;

    }



    @keyframes experienceAnimation {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-35px);
        }

        100% {
            transform: translateY(0);
        }
    }

    @keyframes bulatanAnimation {
        0% {
            width: 70px;
            height: 25px;
        }

        50% {
            width: 50px;
            height: 15px;
        }

        100% {
            width: 70px;
            height: 25px;
        }
    }

    /* end experience */

    /* start portfolio */
    .site-main .portfolio .container .portfolio-btn .port-btn {
        padding-left: 0;
        font-size: 12px;
        padding-left: 5px;
        margin-top: -20%;
    }

    /* end portfolio */

    /* start testimoni */
    .site-main .testimoni .container .owl-theme .testimoni-img {
        height: 120px;
        width: 120px;
        margin-top: 10%;
    }

    .site-main .testimoni .container h4 {
        margin-top: 5%;
    }

    .site-main .testimoni .container .owl-theme .testimoni-text {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        font-size: 14px;
        line-height: 1.5rem;
    }


    /* end testimoni */

}


/* if the viewport is equal to 340px or less than that */
@media only screen and (max-width: 992px) {
    body {
        font: normal 15px/30px var(--montserrat);
    }

    .header-area .container-fluid .navbar .container .collapse .navbar-nav .nav-font.active::after {
        content: " ";
        height: 0;
        width: 0;
        display: block;
        background: none;
        margin: auto;

    }

    /* header area */

    .header-area .container-fluid .navbar .container .collapse .navbar-nav .nav-font.nav-active::after {

        height: 0;
        width: 0;
        display: inline-block;

    }

    /* end header area */

    /* start jumbotron */
    .site-main .jm-bg-primary {
        background-size: cover;
        background-position: top center;
        background-attachment: fixed;
    }


    .site-main .jumbotron .jm-txt {
        z-index: 1 !important;
        /* margin-top: 40px; */
        padding-left: 0;
    }


    .site-main .jumbotron .container .row .col-lg-6 img {
        margin-top: -20%;
        size: 600px;
    }

    .site-main .jumbotron .container .row .col-lg-6 button {
        margin-top: 5%;
    }

    /* end jumbotron */

    /* start about */
    .site-main .about {
        background-size: cover;
    }

    .site-main .about {
        padding-top: 40px;
    }

    .site-main .about .container h1 {
        font-weight: 900;
        text-align: center;
    }

    .site-main .about .container .row .col-lg-5 .row .text-ds p {
        padding-left: 20px;
    }

    .site-main .about .container .row .col-lg-6 .progres-padding {
        margin-bottom: 10%;
    }

    /* end about */

    /* start profil */
    .site-main .profil {
        margin-top: 10%;
        background-size: cover;
        background-position: 30%;
        /* background-attachment: local; */
        margin-bottom: 20px;
    }

    /* .site-main .profil .container .row img {
        height: 380px;
        width: 380px;
    } */

    .site-main .profil .row .col-lg-6 h1 {
        padding-top: 0;
        font-size: 45px;
    }

    .site-main .profil .container .row {
        color: var(--text-color2);
        font-family: var(--paytone);
        margin-bottom: 0;
    }

    /* end profil */

    /* star experience */
    .site-main .experience {
        background-size: cover;

    }

    .site-main .experience .container .tb-m {
        margin-bottom: -500px;
    }

    /* .site-main .experience .container .row img {
        height: 400px;
        width: 400px;
    } */
    /* 
    .site-main .experience .container .row .bulatan {
        margin-top: -10%;
        box-shadow: var(--shadow-color);
    } */

    /* .site-main .experience .container .owl-carousel .experience-clr {
        padding: 10px;
        line-height: 20px;
        text-align: left;
    } */

    .site-main .experience .container .owl-carousel .experience-clr #padding-text {
        padding-bottom: 50px;
    }

    .site-main .experience .container .row .col-lg-6 .row .col-lg-12 .panah {

        margin-right: 20px;
        margin-top: 0;

    }

    .site-main .experience .container .row .col-lg-6 .row .pembungkus-panah .kanan {

        margin-right: 0;

    }

    .site-main .experience .container .row .col-lg-6 .row .pembungkus-panah {
        display: flex;
        justify-content: center;

    }

    /* 

    @keyframes experienceAnimation {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-35px);
        }

        100% {
            transform: translateY(0);
        }
    }

    @keyframes bulatanAnimation {
        0% {
            width: 90px;
            height: 35px;
        }

        50% {
            width: 70px;
            height: 25px;
        }

        100% {
            width: 90px;
            height: 35px;
        }
    } */

    /* end experience */

    /* start portfolio */
    .site-main .portfolio .container .portfolio-btn .port-btn {
        padding-left: 0;
        font-size: 15px;
        padding-left: 5px;
        margin-top: -5%;
    }

    /* end portfolio */

    /* start testimoni */
    .site-main .testimoni .container .owl-theme .testimoni-img {
        height: 120px;
        width: 120px;
        margin-top: 10%;
    }

    .site-main .testimoni .container h4 {
        margin-top: 5%;
    }

    .site-main .testimoni .container .owl-theme .testimoni-text {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        font-size: 14px;
        line-height: 1.5rem;
    }


    /* end testimoni */

}