:root{
    --color-active: #037171;
}
@font-face {
    font-family: 'Bebas Neue';
    src: url('../fonts/Bebas_Neue/BebasNeue-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Beau Rivage';
    src: url('../fonts/Beau_Rivage/BeauRivage-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Josefin Sans';
    src: url('../fonts/Josefin_Sans/JosefinSans-Light.ttf');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Josefin Sans';
    src: url('../fonts/Josefin_Sans/JosefinSans-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Josefin Sans';
    src: url('../fonts/Josefin_Sans/JosefinSans-Medium.ttf');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Josefin Sans';
    src: url('../fonts/Josefin_Sans/JosefinSans-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Josefin Sans';
    src: url('../fonts/Josefin_Sans/JosefinSans-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'RF Dewi Extended';
    src: url('../fonts/RF_Dewi/RFDewiExpanded-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'RF Dewi Extended';
    src: url('../fonts/RF_Dewi/RFDewiExpanded-Semibold.ttf');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'RF Dewi Extended';
    src: url('../fonts/RF_Dewi/RFDewiExpanded-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'RF Dewi Extended';
    src: url('../fonts/RF_Dewi/RFDewiExpanded-Black.ttf');
    font-weight: 900;
    font-style: normal;
}
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #fff2;
    border-radius: 5px;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'RF Dewi Extended', sans-serif;
    outline: none;
    color: #fff;
} 

body{
    background: #111010;
}
img{
    max-width: 100%;
}
p{
    font-size: 0.9375vw;
    line-height: 170%;
}
a{
    text-decoration: none;
}
ul{
    list-style-type: none;
}
header{
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9999;
    mix-blend-mode: difference;
}
.discuss{
    display: inline-block;
    position: relative;
    padding: 0.2604vw 0;
    font-size: 0.9375vw;
    color: #037171;
    font-weight: 900;
    /* text-transform: uppercase; */
    /* text-decoration: underline; */
    cursor: pointer;
}
.discuss:before{
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.1042vw;
    background-color: #037171;
}
#menu{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #111010;
    z-index: 999;
    transform: rotate(90deg);
    transform-origin: bottom right;
    transition: 1s;
    overflow: hidden;
}
#menu.show{
    transform: rotate(0);
}
#menu_big_links{
    position: relative;
    height: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
#menu_big_links > a{
    position: relative;
    font-family: "Bebas Neue";
    font-size: 6.6667vw;
    line-height: 1;
    transition: .3s;
    cursor: pointer;
    user-select: none;
    /* opacity: .3; */
}
#menu_big_links:hover > a{
    opacity: .15;
}
#menu_big_links > a:hover{
    /* transform: translateX(2.6042vw) skewX(-15deg); */
    opacity: 1;
    /* transform: translateX(1vw); */
}
/* #menu_big_links > a:before{
    content: '';
    position: absolute;
    top: calc(100% - 1.4062vw);
    right: 150%;
    width: 150%;
    height: 0.1042vw;
    background: #fff;
    transition: .3s;
}
#menu_big_links > a:hover:before{
    right: 0;
} */
#menu_overlay_text{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    top: -30%;
    right: 10%;
    overflow: hidden;
    width: 100vh;
    height: 30vw;
    transform: rotate(90deg);
    pointer-events: none;
    transform-origin: left;
    
}
#menu_overlay_text > span:first-child{
    opacity: 1;
}
#menu_overlay_text > span{
    left: 0;
    position: absolute;
    display: block;
    color: #fff;
    font-family: "Bebas Neue";
    font-size: 20.0417vw;
    line-height: 1;
    opacity: 0;
    transition: .3s;
}
#logo > svg{
    width: 0.9525vw;
    height: 1.4287vw;
}
#toggle{
    cursor: pointer;
    transition: .5s;
}
#toggle > svg{
    width: 1.4062vw;
    height: 1.4062vw;
}
#toggle:hover{
    transform: rotate(45deg);
}
#toggle.active{
    transform: rotate(45deg);
}
#toggle.active:hover{
    transform: rotate(90deg);
}

#overlay_image{
    position: fixed;
    display: flex;
    flex-direction: column;
    z-index: -1;
    width: 20.8333vw;
    height: 13.0208vw;
    overflow: hidden;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
}
#overlay_image.show{
    animation: show_overlay_image .5s forwards;
}
#overlay_image.hide{
    animation: hide_overlay_image .5s forwards;
}
@keyframes show_overlay_image{
    0%{
        opacity: 0;
    }100%{
        opacity: 1;
    }
}
@keyframes hide_overlay_image{
    0%{
        opacity: 1;
    }100%{
        opacity: 0;
    }
}
#overlay_image > img{
    width: 20.8333vw;
    height: 13.0208vw;
    transition: .5s;
}
#overlay_image.img-1 > img:nth-child(1){
    margin-top: 0;
}
#overlay_image.img-2 > img:nth-child(1){
    margin-top: -13.0208vw;
}
#overlay_image.img-3 > img:nth-child(1){
    margin-top: -26.0417vw;
}
#overlay_image.img-4 > img:nth-child(1){
    margin-top: -39.0625vw;
}
.container{
    width: 93.3333vw;
    margin: 0 auto;
    height: 100%;
}
.row{
    display: flex;
    justify-content: space-between;
    gap: 2.5vw;
}
.col-1 {
    width: 25%;
}

.col-2 {
    width: 50%;
}

.col-3 {
    width: 75%;
}

.col-4 {
    width: 100%;
}
.slide_text{
    font-size: 0.9375vw;
    line-height: 1.7;
}
.slide_text > div{
    overflow: hidden;
}
.slide_text > div > span{
    display: block;
    transform: translateY(100%);
}
#header_content{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3.125vw 0;
}
#hero_section{
    height: 80vh;
}
#hero_section_content{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#hero_logo{
    display: flex;
    font-size: 13.3333vw;
    line-height: 1;
    text-transform: uppercase;
    overflow: hidden;
    margin-left: -0.5208vw;
}
#hero_logo > span.char{
    font-family: 'Bebas Neue';
    transform: translateY(13.3333vw);
    transition: transform .5s;
    white-space: break-spaces;
}
#hero_logo > span.special_char{
    display: inline-block;
    font-family: 'Beau Rivage';
    font-size: 13.3333vw;
    text-transform: uppercase;
    margin-left: -2.0833vw;
    margin-top: -0.3125vw;
}
#hero_section_content > div:nth-child(1) > div:nth-child(2){
    margin-top: -0.5208vw;
}
#hero_slogan{
    font-size: 1.6667vw;
    font-weight: 600;
    opacity: 0;
}
.hero_description{
    font-size: 0.9375vw;
    line-height: 170%;
}
.hero_description > div{
    overflow: hidden;
}
.hero_description > div > span{
    display: block;
    transform: translateY(2.6042vw);
}
#hero_desc_2{
    margin-top: 6.25vw;
}
#hero_desc_2 .char{
    opacity: 0;
}
#hero_desc_1 .char{
    opacity: 0;
}
#scroll_btn{
    display: flex;
    align-items: center;
    gap: 0.7812vw;
    cursor: pointer;
    opacity: 0;
    transform: translateY(5.2083vw);
}
#scroll_btn > svg{
    width: 4.1667vw;
    height: 4.1667vw;
    transition: .3s;
}
#scroll_btn:hover svg{
    transform: rotate(45deg);
}
#scroll_btn > p{
    width: 6.8125vw;
    font-size: 0.9375vw;
    font-weight: 300;
    line-height: 120%;
    padding-top: 0.2604vw;
}
#scroll_btn > p > span{
    font-weight: 600;
}
#about_me{
    margin-top: 18.2292vw;
}
.subtitle{
    display: flex;
    font-family: 'Bebas Neue';
    font-size: 6.6667vw;
    font-weight: 400;
    line-height: 100%;

    /* opacity: 0; */
    overflow: hidden;
}
.subtitle > span{
    display: block;
    font-family: 'Bebas Neue';
    font-size: 6.6667vw;
    font-weight: 400;
    line-height: 100%;
    transform: translateY(100%);
    white-space: break-spaces;
}
#about_me_content > div:nth-child(2){
    padding-top: 9.375vw;
}
#about_me_content > div:nth-child(3){
    padding-top: 20.8333vw;
}
#about_me_content > div:nth-child(4){
    padding-top: 9.375vw;
}
#about_circles{
    margin-top: 2.5vw;
    opacity: 0;
}
#about_circles{
    width: 12.1179vw;
    height: 7.0274vw;
}
#about_circles > circle:nth-child(1){
    stroke-dasharray: 22.1354vw;
    stroke-dashoffset: 22.1354vw;
    animation: rotate_circle_1 3s infinite linear;
}
@keyframes rotate_circle_1{
    0%{
        stroke-dashoffset: 22.1354vw;
    }100%{
        stroke-dashoffset: -22.1354vw;
    }
}
#about_circles > circle:nth-child(2){
    stroke-dasharray: 22.1354vw;
    stroke-dashoffset: -22.1354vw;
    animation: rotate_circle_2 3s infinite linear;
    animation-delay: 1.5s;
}
@keyframes rotate_circle_2{
    0%{
        stroke-dashoffset: -22.1354vw;
    }100%{
        stroke-dashoffset: 22.1354vw;
    }
}

#ih_person{
    transform: translateY(50%);
    opacity: 0;
}
#experience_numbers{
    display: flex;
    flex-direction: column;
    gap: 2.5vw;
    margin-top: 2.5vw;
}
#experience_numbers > div{
    display: flex;
    gap: 1.0417vw;
    align-items: center;
    opacity: 0;
    transform: translateY(5.2083vw);
}
#experience_numbers > div > span{
    color: #037171;
    font-size: 3.3333vw;
    font-weight: 700;
    line-height: 100%;
}
#experience_numbers > div > p{
    line-height: 120%;
}
#skills{
    padding-top: 13.2292vw;
    margin-top: 5vw;
}
#skills_list{
    margin-top: 3.125vw;
    overflow: hidden;
}
#skills_list > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.6042vw 0;
    border-bottom: 0.0521vw solid #fff;
    height: 13.0208vw;
}
#skills_list > div:nth-child(even){
    transform: translateX(-120%);
}
#skills_list > div:nth-child(odd){
    transform: translateX(120%);
}
#skills_list > div > span{
    font-size: 1.25vw;
    font-weight: 700;
}
#skills_list > div > p{
    font-size: 0.9375vw;
    line-height: 170%;
}
#skills_list > div > div{
    display: flex;
    justify-content: flex-end;
}


#portfolio{
    padding-top: 13.2292vw;
    margin-top: 5vw;
}
#portfolio_slider{
    width: 100%;
    margin-top: 6.25vw;
    overflow: hidden;
    opacity: 0;
    transform: translateY(2.6042vw);
}
#portfolio_slider_init{
    max-width: 100%;
}
#portfolio_slider_init{
    display: flex;
    gap: 2.0833vw;
}
#portfolio_slider_init > a{
    flex-shrink: 0;
    /* width: 35%; */
}
#portfolio_slider_init a.developed{
    position: relative;
}
#portfolio_slider_init a.developed:before{
    position: absolute;
    content: 'In develop';
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3vw;
    color: #fff;
    text-transform: uppercase;
    opacity: 0;
    transition: .3s;
}
#portfolio_slider_init a.developed:hover:before{
    opacity: 1;
}
#portfolio_slider_init a.developed:hover > img{
    opacity: .1;
}
#portfolio_slider_init a{
    margin: 0 1.0417vw;
}
#portfolio_footer{
    margin-top: 6.25vw;
}



#have_a_task{
    background-color: #fff;
    margin-top: 13.0208vw;
    padding-top: 9.375vw;
}
#have_a_task *{
    color: #101011;
}
#have_a_task_content_heading p{
    margin-top: 4%;
    opacity: 0;
}
#have_a_task_content_body{
    position: relative;
    margin-top: 7.8125vw;
    padding-bottom: 13.0208vw;
    transform: scaleX(0);
    transform-origin: center;
}
.have_a_task_content_line{
    width: 0.0521vw;
    height: 100%;
    position: absolute;
    background: linear-gradient(180deg, #000, transparent 95%);
}
.have_a_task_content_line:nth-child(1){
    left: 25%;
}
.have_a_task_content_line:nth-child(2){
    left: 50%;
}
.have_a_task_content_line:nth-child(3){
    left: 75%;
}
#have_a_task_content_body .row{
    border-image: linear-gradient(90deg, transparent, #000, transparent) 30;
    border-top: 0.0521vw solid;
    gap: 0;
}
#have_a_task_content_body .row:last-child{
    border-bottom: 0.0521vw solid;
}
#have_a_task_content_body textarea{
    width: 100%;
    height: 14.5833vw;
    padding: 1.5625vw;
    font-size: 0.9375vw;
    line-height: 170%;
    border: none;
    resize: none;
}
#have_a_task_discuss{
    width: 100%;
    height: 100%;
    padding: 1.5625vw;
    display: flex;
    align-items: flex-end;
    cursor: pointer;
}
#have_a_task_discuss > div{
    display: flex;
    align-items: center;
    gap: 1.0417vw;
}
#have_a_task_discuss > div > span{
    font-size: 2.0833vw;
    font-weight: 600;
    line-height: 170%;
    text-decoration-line: underline;
}
#have_a_task_discuss > div > svg{
    margin-top: 0.5208vw;
    width: 0.7292vw;
}

#pre_footer_line{
    margin-top: 15.625vw;
}
#pre_footer_line > svg{
    width: 82.7604vw;
    height: 13.125vw;
}
#pre_footer_line > svg > path:first-child{
    stroke-dasharray: 2300;
    stroke-dashoffset: 2300;
}
#pre_footer_line > svg > path:last-child{
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}
footer{
    margin-top: 7.8125vw;
    padding-bottom: 2.0833vw;
    opacity: 0;
}
footer ul{
    margin-top: 1.0417vw;
}
footer ul > li{
    font-size: 0.9375vw;
    font-weight: 300;
    margin-bottom: 0.8333vw;
}
#copyrights{
    font-size: 0.9375vw;
    font-weight: 300;
    margin-top: 10.4167vw;
}
#footer_social{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#footer_social > a{
    position: relative;
    display: block;
    width: 15.625vw;
    height: 15.625vw;
    border-radius: 50%;
    transition: .3s;
    overflow: hidden;
}
#footer_social > a > svg > circle{
    stroke-dasharray: 950;
    transition: 1s;
}
#footer_social > a:hover > svg > circle{
    stroke-dasharray: 400;
    stroke-dashoffset: 1325;
}
#footer_social > a > svg:nth-child(2){
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: 1s;
}
#footer_social > a:hover > svg:nth-child(2){
    transform: scale(1.2) rotate(15deg);
}

/* #footer_social > a:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    z-index: 0;
    transform: scale(0);
    transform-origin: center;
    transition: .1s ease-in-out;
} */
#footer_social > a:not(:last-child){
    margin-right: -2.6042vw;
}
/* #footer_social > a:hover:before{
    transform: scale(1);
} */
#footer_mobile_content{
    display: none;
}


#animation_overlay{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 99999;
    transform: translateY(100%);
}