@media (max-width: 768px){
    .col-1,
    .col-2,
    .col-3,
    .col-4{
        width: 100%;
    }
    .row{
        flex-wrap: wrap;
    }
    .container{
        width: 86.6667vw;
    }
    #logo > svg{
        width: 4.8773vw;
        height: 7.3147vw;
    }
    #toggle > svg{
        width: 5.8667vw;
        height: 5.8667vw;
    }
    #hero_section{
        height: 90vh;
    }
    #hero_logo{
        flex-wrap: wrap;
        font-size: 37.6347vw;
        line-height: 0.8;
        margin-top: 15vh;
    }
    #hero_logo > span.special_char{
        font-size: 37.6347vw;
        margin-left: -9.0833vw;
        margin-top: -1.5125vw;
    }
    #hero_slogan{
        font-size: 4.2667vw;
    }
    #scroll_btn{
        gap: 2.6667vw;
    }
    #scroll_btn > svg{
        width: 16vw;
        height: 16vw;
    }
    #scroll_btn > p{
        width: 14.9333vw;
    }
    #scroll_btn > p{
        font-size: 4.2667vw;
    }
    p{
        font-size: 4.2667vw;
    }
    .hero_description{
        font-size: 3.7333vw;
        display: none;
    }

    .subtitle{
        font-size: 17.0667vw;
    }
    .subtitle > span{
        font-size: 17.0667vw;
    }
    #about_circles {
        width: 31.0213vw;
        height: 17.9893vw;
    }

    #about_circles > circle:nth-child(1){
        stroke-dasharray: 54vw;
        stroke-dashoffset: 54vw;
        animation: rotate_circle_1 3s infinite linear;
    }
    @keyframes rotate_circle_1{
        0%{
            stroke-dashoffset: 54vw;
        }100%{
            stroke-dashoffset: -54vw;
        }
    }
    #about_circles > circle:nth-child(2){
        stroke-dasharray: 54vw;
        stroke-dashoffset: -54vw;
        animation: rotate_circle_2 3s infinite linear;
        animation-delay: 1.5s;
    }
    @keyframes rotate_circle_2{
        0%{
            stroke-dashoffset: -54vw;
        }100%{
            stroke-dashoffset: 54vw;
        }
    }
    .slide_text{
        font-size: 3.7333vw;
    }
    #experience_numbers{
        margin-top: 9.3333vw;
        gap: 8vw;
    }
    #experience_numbers > div{
        gap: 2.6667vw;
    }
    #experience_numbers > div > span{
        font-size: 12.8vw;
    }
    #about_me_content > div:nth-child(1){
        order: 1;
    }
    #about_me_content > div:nth-child(2){
        order: 2;
    }
    #about_me_content > div:nth-child(3){
        order: 4;
        padding-top: 9.3333vw;
    }
    #about_me_content > div:nth-child(4){
        order: 3;
    }
    #skills_list{
        padding-top: 9.3vw;
        margin-top: 0;
    }
    #skills_list > div{
        flex-direction: column;
        height: initial;
        padding: 9.3vw 0;
        border-bottom: 0.2667vw solid #FFFFFF1A;
    }
    #skills_list > div > span{
        font-size: 5.6vw;
    }
    #skills_list > div > p{
        font-size: 3.7333vw;
        margin-top: 5vw;
    }
    #skills_list > div > div{
        justify-content: flex-start;
        margin-top: 8vw;
    }
    .discuss{
        font-size: 4.2667vw;
    }
    #have_a_task{
        margin-top: 40vw;
        padding-top: 40vw;
    }
    .have_a_task_content_line{
        display: none;
    }
    #have_a_task_content_body{
        padding-bottom: 40vw;
    }
    #have_a_task_content_body{
        width: 86.6667vw;
        margin-left: auto;
        margin-right: auto;
    }
    #have_a_task_content_body .row{
        border: none !important;
    }
    #have_a_task_discuss{
        padding: 5.3333vw;
        border-image: linear-gradient(90deg, transparent, #000, transparent) 30;
        border-top: 0.2667vw solid;
        justify-content: flex-end;
    }
    #have_a_task_discuss > div{
        gap: 1.0417vw;
    }
    #have_a_task_discuss > div > span{
        font-size: 5.3333vw;
    }
    #have_a_task_discuss > div > svg{
        margin-top: 0.5208vw;
        width: 3.7333vw;
    }
    #have_a_task_content_body .row textarea{
        border-image: linear-gradient(90deg, transparent, #000, transparent) 30;
        border-top: 0.2667vw solid;
        padding: 5.3333vw;
        font-size: 4.2667vw;
        min-height: 40vw;
        height: initial;
    }
    #have_a_task_content_body .row textarea:not(#user_message_field){
        min-height: initial;
    }
    #pre_footer_line{
        position: relative;
        margin-top: 10.625vw;
        height: 50vw;
    }
    #pre_footer_line > svg{
        position: absolute;
        right: 20%;
        width: 200vw;
        height: 60vw;
    }
    #footer_content ul{
        display: none;
    }
    #copyrights{
        display: none;
    }
    #footer_social > a{
        width: 31vw;
        height: 31vw;
        margin-right: -1vw;
        margin-left: -1vw;
    }
    #footer_social{
        justify-content: center;
    }
    #footer_mobile_content{
        display: block;
    }
    #footer_mobile_content > ul {
        margin-top: 9.3333vw;
    }
    #footer_mobile_content > ul > li{
        font-size: 3.7333vw;
        line-height: 1.7;
    }
    #footer_mobile_content > p{
        margin-top: 60vw;
        font-size: 3.7333vw;
    }
    footer{
        padding-bottom: 9.3333vw;
    }
    #menu_big_links > a{
        font-size: 19.2vw;
    }
}