@media(max-width:1200px) {

    /* banner */
    .banner_main .main .left_colum .third_row {
        font-size: 24px;
    }

    .banner_main .main .left_colum .fourth_row {
        font-size: 15px;
    }

    .banner_main .main .right_colum .left_animation {
        left: 12%;
    }

    .banner_main .main .right_colum .right_animation {
        left: 68%;
    }

    /* banner */

    /* about_me */

    .about_main .main .left_colum .radius_image {

        height: 380px;
        width: 388px;
    }

    .about_main .main .left_colum .top_radius {
        height: 199px;
        width: 199px;
        left: 5%;
        top: 7%;
    }

    .about_main .main .left_colum .icon_radius {
        left: 78%;
        top: 18%;
        height: 55px;
        width: 55px;
    }

    .about_main .main .left_colum .right_animation {

        left: 50%;
        top: 76%;
    }

    .about_main .main .right_colum .secound_row h3 {
        font-size: 28px;
    }

    /* about_me */

    /* portfolio */

    .portfolio .main .portfolio_sub .left_row .last {
        width: 70%;
    }

    /* portfolio */

}


@media(max-width:995px) {


    /* nav_bar */
    .nap_main .main .nav_bar .midil_colum ul li {
        padding: 0px 10px;
        font-size: 13px;
    }

    * .nap_main .main .nav_bar .right_colum button {
        padding: 7px 15px;
    }

    /* /nav_bar */



    /* banner */
    .banner_main .main .left_colum .first_row {
        font-size: 14px;
    }

    .banner_main .main .left_colum .third_row {
        font-size: 21px;
    }

    .banner_main .main .left_colum .fourth_row {
        font-size: 14px;
        width: 93%;
    }

    .banner_main .main .right_colum .img {
        width: 100%;
    }

    .banner_main .main .right_colum .right_animation {
        left: 50%;
    }

    .banner_main .main .right_colum .p {

        top: 71%;
        left: 20%;
    }

    /* banner */


    /* service */

    .service_main .main .heading_sub {
        justify-content: center;
        column-gap: 67px;
        row-gap: 80px;
    }

    .service_main .main .heading_sub .service_first {
        width: 45%;


    }


    /* service */


    /* about_me */

    .about_main .main {
        justify-content: space-between;
    }

    .about_main .main .right_colum {
        width: 51%;
    }

    .about_main .main .left_colum .radius_image {
        height: 340px;
        width: 320px;
    }


    .about_main .main .left_colum .top_radius {

        left: 0%;
        top: 6%;
    }

    .about_main .main .right_colum .secound_row h3 {
        font-size: 20px;
    }

    .about_main .main .right_colum .third_row {
        font-size: 14px;
    }

    .about_main .main .right_colum .forth_row {
        width: 100%;
        justify-content: space-between;
        font-size: 14px;
    }

    .about_main .main .right_colum .forth_row .first_colum {
        width: 47%;
    }

    .about_main .main .right_colum .five_row {
        padding: 0px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .about_main .main .left_colum .right_animation {
        left: 45%;
        top: 72%;
    }

    /* about_me */

    /* skills */
    .skils_main .main .colum_main .left_row {
        row-gap: 45px;
    }

    .skils_main .main .colum_main .left_row .colum {
        width: 45%;
    }

    /* skills */

    /* portfolio */

    .portfolio .main .portfolio_sub {
        row-gap: 45px;
    }

    .portfolio .main .portfolio_sub .left_row {
        width: 46%;
    }

    /* portfolio */


}

@media(max-width:780px) {


    /* nav_bar */

    .nap_main .main .nav_bar .menu {
        display: block;
    }


    .nap_main .main .nav_bar .right_colum {
        display: none;
    }

    .nap_main .main .nav_bar .midil_colum ul {
        display: block;
       background-color: #16232b;
        position: absolute;
        left: -100%;
        height: 100vh;
    }

    .nap_main .main .nav_bar .midil_colum ul li {
  
        padding: 15px 0px;
        position: relative;
        top: 30%;
        font-size: 17px;
    }

    


    /* nav_bar */


    /* banner */


    .banner_main .main {
        padding: 0px 0px;
    }

    .banner_main .main {
        display: block;
        justify-items: center;
    }

    .banner_main .main .left_colum {
        width: 90%;
        padding: 25px 0px;
    }

    .banner_main .main .right_colum {
        width: 90%;
        justify-items: center;
    }

    .banner_main .main .right_colum .right_animation {
        left: 60%;
    }

    .banner_main .main .right_colum .left_animation {
        left: 0%;
    }


    /* banner */

    /* marque */

    .marque .sub_marque_main .sub_marque .web_deginer{
        font-size: 23px
    }

    /* marque */

    /* about_me */

    .about_main .main {
        display: block;
        justify-items: center;
    }

    .about_main .main .left_colum {
        width: 90%;
    }

    .about_main .main .right_colum {
        width: 90%;
    }

    .about_main .main .left_colum .radius_image {

        height: 425px;
        width: 450px;
    }

    .about_main .main .left_colum .top_radius {
        height: 230px;
        width: 230px;
        left: 11%;
        top: 7%;
    }

    .about_main .main .left_colum .icon_radius {
        height: 60px;
        width: 60px;
        left: 75%;
        top: 20%;
    }

    .about_main .main .left_colum .right_animation {
        left: 57%;
        top: 81%;
    }

    .about_main .main .right_colum .five_row {
        padding: 0px;
        flex-wrap: wrap;
        justify-content: start;
    }


    /* about_me */

    /* service */

    .service_main .main .heading_sub {
        justify-content: center;
        column-gap: 67px;
        row-gap: 80px;
    }

    .service_main .main .heading_sub .service_first {
        width: 90%;


    }

    .service_main .main .heading h3 {
        font-size: 25px;
    }

    .service_main .main .heading p {
        font-size: 15px;
    }

    /* service */


    /* skills */

    .skils_main .main .heading h3 {
        font-size: 25px;
    }

    .skils_main .main .heading p {
        font-size: 15px;
    }

    /* skills */

    /* portfolio */

    .portfolio .main .heading h3 {
        font-size: 25px;
    }

    .portfolio .main .heading p {
        font-size: 15px;
    }

    .portfolio .main .portfolio_sub {
        justify-content: center;
    }

    .portfolio .main .portfolio_sub .left_row {
        width: 90%;
    }

    .portfolio .main .portfolio_sub .left_row .last {
        width: 200px;
    }

    .about_main .main .left_colum .radius_image {
        height: 400px;
        width: 430px;
    }

    .about_main .main .left_colum .icon_radius {
        left: 82%;
    }

    .about_main .main .left_colum .top_radius {
        left: 6%;
        top: 6%;
    }

    /* portfolio */

    /* contact_me */

    .contact_me .main .heading p{
        width: 90%;
    }
    .contact_me .main .contact_sub {
        display: block;
        justify-items: center;
    }

    .contact_me .main .contact_sub .left_side {
        width: 90%;
    }

    .contact_me .main .contact_sub .right_side {
        width: 90%;
        margin-top: 20px;
    }

    /* contact_me */



}


@media(max-width:610px) {

    .skils_main .main {
        justify-items: center;
    }

    .skils_main .main .heading h3 {
        width: 85%;
    }

    .skils_main .main .colum_main {
        width: 90%;

    }
}

@media(max-width:588px) {

    /* nav_bar */
    .nap_main .main {
        justify-items: center;
    }

    .nap_main .main .nav_bar {
        width: 95%;
    }

    /* nav_bar*/
}

@media(max-width:510px) {

    /* nav_bar */
    .nap_main .main .nav_bar .menu {
        left: 80%;
    }

    /* nav_bar */

    /* banner */

    .banner_main .main .right_colum .left_animation {
        height: 70px;
        width: 150px;
    }

    .banner_main .main .right_colum .right_animation {
        left: 59%;
        height: 70px;
        width: 150px;
    }

    .banner_main .main .right_colum .left_animation p {
        font-size: 17px;
    }

    .banner_main .main .right_colum .right_animation p {
        font-size: 17px;
    }

    /* banner */

    /* marque */

    .marque .sub_marque_main .sub_marque{
        gap: 30px;
    }


    /* marque */

    /* about_me */

    .about_main .main .left_colum .radius_image {
        width: 90%;
        height: 370px;
    }

    .about_main .main .left_colum .right_animation {
        width: 33%;
    }

    .about_main .main .left_colum .right_animation .content {
        font-size: 12px;
    }

    .about_main .main .right_colum .five_row {
        justify-content: center;
    }

    /* about_me */


    /* skills */
    .skils_main .main .colum_main .left_row {
        justify-content: center;
    }

    .skils_main .main .colum_main .left_row .colum {
        width: 95%;
    }

    /* skills */

    /* portfolio */

    .portfolio .main .portfolio_sub {
        padding: 0px;
    }

    /* portfolio */

    /* contact_me */

    .contact_me .main .contact_sub .left_side{
        height: auto;
    }

    /* contact_me */

}


@media(max-width:430px) {

    /* about_me */
    .about_main .main .left_colum .radius_image {
        height: 325px;
    }

    .about_main .main .left_colum .right_animation {
        left: 47%;
        width: 45%;
    }

    .about_main .main .left_colum .icon_radius {
        height: 50px;
        width: 50px;
    }

    .about_main .main .right_colum {
        width: 86%;
    }

}



@media(max-width:410px) {


    /* banner */
    .banner_main .main .right_colum .left_animation {
        height: 50px;
        width: 135px;
    }

    .banner_main .main .right_colum .right_animation {
        left: 59%;
        height: 50px;
        width: 135px;
    }

    .banner_main .main .right_colum .left_animation p {
        font-size: 14px;
    }

    .banner_main .main .right_colum .right_animation p {
        font-size: 14px;
    }

    .banner_main .main .right_colum .p {
        top: 71%;
        left: 25%;
    }

    .banner_main .main .right_colum .p img {
        width: 80%;
        height: 80%;
    }


    /*   banner */

    /* service*/

    .service_main .main .heading h3 {
        font-size: 21px;
    }

    .service_main .main .heading p {
        font-size: 12px;
    }

    .service_main .main .heading_sub .service_first p {
        font-size: 15px;
    }

    /* service */

    /* skills */

    .skils_main .main .heading h3 {
        font-size: 21px;
    }

    .skils_main .main .heading p {
        font-size: 12px;
    }

    /* skills */


    /* portfolio */

    .portfolio .main .heading h3 {
        font-size: 21px;
    }

    .portfolio .main .heading p {
        font-size: 12px;
    }

    /* portfolio */

    /* contact_me */

        .contact_me .main .heading p {
            font-size: 12px;
        }

    /* contact_me */
}

@media(max-width:370px) {

    /* banner */
    .banner_main .main .right_colum .right_animation {
        left: 52%;

    }

    .banner_main .main .left_colum .first_row {
        font-size: 12px;
    }

    /* banner */

    /* skills */

    .service_main .main .heading_sub .service_first p {
        font-size: 13px;
    }

    /* skills */

    /* about_me */

    .about_main .main .left_colum .radius_image {
        height: 280px;
    }

    .about_main .main .left_colum .right_animation {
        width: 40%;
    }

    .about_main .main .left_colum .right_animation .content {
        font-size: 10px;
    }

    .about_main .main .right_colum .forth_row .first_colum {
        font-size: 12px;
    }

    .about_main .main .left_colum .top_radius {
        height: 200px;
        width: 200px;
    }

    /* about_me */

    /* portfolio */

    .portfolio .main .portfolio_sub .left_row h4 {
        font-size: 20px;
    }

    .portfolio .main .portfolio_sub .left_row p {
        font-size: 12px;
    }

    .portfolio .main .portfolio_sub .left_row .img {
        height: 200px;
    }

    /* portfolio */

}

@media(max-width:315px) {

    /*    banner */
    .banner_main .main .right_colum .right_animation {
        left: 46%;

    }

    .banner_main .main .left_colum .five_row {
        width: 250px;
    }

    .banner_main .main .left_colum .five_row .first_button {
        font-size: 13px;
    }

    .banner_main .main .left_colum .five_row .secound_button {
        font-size: 13px;
    }

    /* banner */
}