/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- GOOGLE FONTS _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
@import url("https://use.typekit.net/qpp2roc.css");

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- VARIABLES CSS _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/



/* Houschka Pro Light
font-family: "houschka-pro", sans-serif;
font-weight: 300;
font-style: normal;
Houschka Pro Medium
font-family: "houschka-pro", sans-serif;
font-weight: 500;
font-style: normal;
Houschka Pro Bold
font-family: "houschka-pro", sans-serif;
font-weight: 700;
font-style: normal; */

:root {
    /*_-_-_-_-_-_- Colors _-_-_-_-_-_-*/
    --hue-color:242;

    /* HSL Color Mode */
    --skin-color: hsl(350, 79%, 56%);
    --title-color: #18202a;
    --text-color: hsl(0, 0%, 31%);
    --body-color: hsl(0, 0%, 100%);
    --box-color: hsl(242, 14%, 10%);
    --scroll-bar-color: hsl(242, 12%, 38%);
    --scroll-thumb-color: hsl(242, 12%, 26%);
    --whaite-color:#18202a;
    --pink: #e7364f;
    --pink-dark: #c9283e;

    /*_-_-_-_-_-_- Font and Typography _-_-_-_-_-_-*/
    --body-font: "houschka-pro", sans-serif;

    /* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
    --biggest-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;

    /*_-_-_-_-_-_- Font Weight _-_-_-_-_-_-*/
    --font-medium: 500;
    --font-bold: 600;

    /*_-_-_-_-_-_- Margenes Bottom _-_-_-_-_-_-*/
    --mb-0-25: .25rem;
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;
    --mb-3: 3rem;

    /*_-_-_-_-_-_- Z Index _-_-_-_-_-_-*/
    --z-fixed: 10;
    --z-modal: 100;
}

/* Responsive Typography */
@media screen and (max-width: 1024px) {
    :root {
        --biggest-font-size: 2rem;
        --h1-font-size: 1.5rem;
        --h2-font-size: 1.25rem;
        --h3-font-size: 1.125rem;
        --normal-font-size: .938rem;
        --small-font-size: .813rem;
        --smaller-font-size: .75rem;
    }
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- BASE _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body,
button,
input{
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
}
body{
    background-color: var(--body-color);
    color: var(--text-color);
}
h1,h2,h3{
    color: var(--text-color);
    font-weight: var(--font-bold);
}

ul{
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    max-width: 100%;
    height: auto;
}
button{
    cursor: pointer;
}

button,
input {
    border: none;
    outline: none;
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- LAYOUT _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/

.container{
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}
.grid{
    display: grid;
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- REUSABLE CSS CLASSES _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
.section{
    padding: 6.5rem 0 2rem;
}
.section_title{
    text-align: center;
    font-size: var(--h1-font-size);
    margin-bottom: var(--mb-3);
}
.section_title::before{
    content: attr(data-heading);
    display: block;
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
    color: var(--skin-color);
}
/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- SIDEBAR _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
.sidebar{
    position: fixed;
    width: 100px;
    height: 100vh;
    /* background-color: var(--body-color); */
    background-color: transparent;
    /* border-right: 1px solid var(--box-color); */
    transition: .5s;
}

/* .nav_logo{
    position: absolute;
    left: 0;
    right: 0;
    top: 1.8rem;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background-color: var(--skin-color);
    text-align: center;
    margin: auto;
} */
.nav_logo{
    position: absolute;
    left: 0;
    right: 0;
    top: 1.8rem;
    text-align: center;
    margin: auto;
}
/* .nav_logo_text{
    font-size: 1.125rem;
    color: var(--title-color);
    font-weight: var(--font-bold);
    line-height: 40px;
} */
.nav_menu{
    position: fixed;
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: left top;
    width: 100vh;
}
.menu{
    display: flex;
}
.nav_list{
    display: flex;
    flex-direction: row-reverse;
    margin: -2px auto 0 auto;
}

.nav_link{
    float: right;
    height: 100%;
    line-height: 100px;
    padding: 0 1rem;
    color: var(--title-color);
    font-weight: var(--font-medium);
    position: relative;
    transition: .4s;
}
.btn_share{
    position: absolute;
    bottom: 1.8rem;
    left: 0;
    right: 0;
    text-align: center;
}
.social_share{
    font-size: 1.5rem;
    color: var(--whaite-color);
}
.nav_toggle{
    height: 32px;
    width: 36px;
    cursor: pointer;
    position: fixed;
    right: 1.5rem;
    top: 2rem;
    font-size: 1.2rem;
    border-radius: .25rem;
    background-color: rgb(85, 85, 85);
    color:  rgb(240, 240, 240);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: var(--z-fixed);
}
.nav_close{
    font-size: 1.5rem;
    position: absolute;
    /* top: 1rem; */
    right: 1.25rem;
    cursor: pointer;
    display: none;
    left: 189px;
    /* top: 30px; */
    bottom: 113px;

}

/* Active Link */

.nav_link.active_link, .nav_link:hover{
    color: var(--skin-color);
}
.nav_link.active_link::after, .nav_link:hover::after{
    /* position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--skin-color);
    border-radius: 50%;
    bottom: 1.8rem;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(-90deg) translateX(-0%); */
    /* ----- */
    position: absolute;
    content: '';
    width: 50px;
    height: 1%;
    background-color: var(--skin-color);
    /* ---- */
    /* border-top-left-radius: .5px; */
    /* border-top-right-radius: 2px; */
    /* border-bottom-left-radius: .5px; */
    /* border-bottom-right-radius: 2px; */
    /* --------- */
    bottom: 30px;
    left: 0;
    right: 0;
    margin: 0 0 0 -15px;
    transition: .3s;
    transform: rotate(-90deg) translateX(-0%);
    /* -------- */

    /* position: absolute;
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--skin-color);
    border-radius: 50%;
    bottom: 1.8rem;
    left: 0;
    right: 0;
    margin: auto; */
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- MAIN _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
.main{
    margin-left: 100px;
}

/*_-_-_-_-_-_- Home Section _-_-_-_-_-_-*/

.ser_bg,
.bg_shape{
    position: relative;
    z-index: 0;
}
.ser_bg::before,
.bg_shape::before{
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.ser_bg::before{
    background-image: url('../img/1x/bg_ser_01s.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
.bg_shape::before{
    background-image: url('../img/SVG/bg_shapes.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
}
.ser_bg:hover::before,
.bg_shape:hover::before{
    opacity: .5;
}
/* .ser_bg_02{
    background: url('../img/SVG/bg_ser_02.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100vh;
} */

.home{
    background: url('../img/SVG/desktop_mes.svg');
    /* background: url('../img/SVG/about_me.svg'); */
    background-repeat: no-repeat;
    /* background-size: cover; */
    background-position: 85% center;
    height: 100vh;
}
.bg_logo{
    background: #ffffff url('../img/SVG/logo_bg_02s.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
    /* transform: rotate(-90deg) translateX(-100%); */
}
.home_container{
    position: relative;
    height: 100%;
    align-items: center;
}
.home_social{
    position: absolute;
    top: 1.8rem;
    left: 0;
    display: flex;
    align-items: center;
    column-gap: 3.5rem;
}
.home_social_follow{
    font-weight: var(--font-medium);
    position: relative;
}
.home_social_follow::after{
    content: '';
    position: absolute;
    width: 1rem;
    height: 2px;
    background-color: var(--text-color);
    right: -45%;
    top:50%;
}
/* .home_social_follow::after {
    content: '';
    position: absolute;
    width: 7rem;
    height: 2px;
    background-color: var(--text-color);
    top: 50%;
    margin-left: 10px;
} */
.home_social_links{
    display: inline-flex;
    column-gap: 1rem;
}

.home_social_link{
    font-size: 1.08rem;
    color: var(--text-color);
    transition: .4s;
}
.home_social_link:hover{
    transform: translateY(.25rem);
}
.home_img{
    display: none;
}
.home_title{
    font-size: var(--biggest-font-size);

}
.info_subtitle{
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
}
.home_description{
    max-width: 550px;
    margin-top: 10px;
    margin-bottom: var(--mb-2);
    text-align: justify;
    line-height: 1.25;
}
.my_info{
    display: flex;
    column-gap: 1.8rem;
    position: absolute;
    left: 0;
    bottom: 1.8rem;
}
.info_item{
    display: flex;
    align-items: center;
}
.info_title,
.info_subtitle{
    font-weight: var(--small-font-size);
}

.info_title{
    font-weight: var(--font-medium);
}
.info_icon{
    font-size: 1.8rem;
    color: var(--skin-color);
    margin-right: var(--mb-0-25);
}
/*_-_-_-_-_-_- Buttons _-_-_-_-_-_-*/
.button{
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
    background-color: var(--skin-color);
    color: #ffffff;
    padding: .75rem 1.4rem;
    border-radius: .25rem;
    font-weight: var(--font-medium);
    position: relative;
    z-index: 1;
}
.button::after{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #888888;
    z-index: -1;
    transform-origin: center;
    transform: skewY(10deg);
    border-radius: .25rem;
    transition: .3s;
}
.button:hover::after{
    transform: scale(1);
}
.button_icon{
    font-size: 1.25rem;
}
/*_-_-_-_-_-_- About Section _-_-_-_-_-_-*/
.about_container{
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4rem;
    align-items: center;
}
.about_img{
    width: 480px;
    border-radius: 0.75rem;
    justify-self: center;
}
.about_heading{
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-0-75);
}
.about_description{
    text-align: justify;
    padding-right: 6rem;
    margin-bottom: var(--mb-2);
}
.about_info{
    grid-template-columns: repeat(2, 200px);
    column-gap: .5rem;
    margin-bottom: var(--mb-3);

}
.about_box{
    text-align: center;
    border-radius: .25rem;
    padding: 1rem 1.25rem;
    background-color: rgb(250 250 250);
}
.about_icon{
    font-size: 1.5rem;
    color: var(--skin-color);
    margin-bottom: var(--mb-0-75);
}
.about_title{
    font-size: var(--small-font-size);
}
.bout_subtitle{
    font-size: var(--smaller-font-size);
}
.about_stats{
    grid-template-columns: repeat(2, 1fr);
    gap: .85rem;
    margin-bottom: var(--mb-2);
}
.about_stat{
    text-align: center;
    background-color: hsl(0, 0%, 97%);
    border-radius: .5rem;
    padding: 1rem .85rem;
}
.about_stat_num{
    display: block;
    font-size: var(--h2-font-size);
    font-weight: var(--font-bold);
    color: var(--skin-color);
    line-height: 1;
    margin-bottom: var(--mb-0-5);
}
.about_stat_label{
    display: block;
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
    color: var(--title-color);
    margin-bottom: var(--mb-0-25);
}
.about_stat_text{
    font-size: var(--smaller-font-size);
    color: hsl(0, 0%, 50%);
    line-height: 1.5;
}
@media screen and (max-width: 350px){
    .about_stats{
        grid-template-columns: 1fr;
    }
}
/*_-_-_-_-_-_- Qualification Section _-_-_-_-_-_-*/
.bg_desktop{
    background: url('../img/SVG/desktop_me_04.svg');
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: right 10%; */
    background-position: left top;
}
.qualification_container{
    grid-template-columns: repeat(2, 340px);
    column-gap: 3rem;
    justify-content: center;
}
.qualification_title{
    font-size: var(--h3-font-size);
    font-weight: var(--font-bold);
    margin-bottom: var(--mb-2);
}
.qualification_title i{
    padding-right: 10px;
    color: var(--skin-color);
    font-size: var(--h2-font-size);
}
.timeline_item{
    position: relative;
    padding-left: 3rem;
    margin-bottom: var(--mb-2-5);
}
.timeline_item:last-child{
    margin-bottom: 0;
}
/* .timeline_item::before{
    content: '';
    width: 1px;
    position: absolute;
    left: .48rem;
    top: 0;
    height: 100px;
    background-color: var(--skin-color);
} */

.timeline_item::before {
    content: '';
    width: 1px;
    position: absolute;
    left: 18px;
    top: -6px;
    height: 30px;
    background-color: var(--skin-color);
    transform: rotate(-90deg) translateX(-0%);
}

.circle_dot{
    position: absolute;
    left: 0;
    top: 0;
    height: 1rem;
    width: 1rem;
    border: 2px solid var(--skin-color);
    border-radius: 50%;
    background-color: var(--skin-color);
    transition: .4s;
}
.timeline_item:hover .circle_dot{
    background-color: var(--whaite-color);
    border: 2px solid var(--whaite-color);
}
.timeline_title{
    font-size: var(--font-bold);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-0-25);
}
.timeline_text{
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-0-5);
}
.timeline_date{
    display: flex;
    align-self: center;
    column-gap: .4rem;
    font-size: var(--small-font-size);
    color: var(--skin-color);
}
/*_-_-_-_-_-_- Skills Section _-_-_-_-_-_-*/
.skills_container{
    grid-template-columns: 350px 700px;
    column-gap: 3rem;
    justify-content: center;
}

.skills_header{
    display: flex;
    align-items: center;
    cursor: pointer;
}

.skills_header:not(:last-child){
    margin-bottom: var(--mb-2-5);
}
.skills_icon,.skills_arrow{
    font-size: 2rem;
    color: var(--skin-color);
    transition: .3s;
}
.skills_icon{
    margin-right: var(--mb-0-75);
}
.skills_title{
    font-size: var(--h3-font-size);
    font-weight: var(--font-bold);
    transition: .3s;
}
.skills_subtitle{
    font-size: var(--small-font-size);
    transition: .3s;
}
.skills_arrow{
    margin-left: auto;
}
.skills_header:hover .skills_title,
.skills_active .skills_title{
    color: var(--skin-color);
}
.skills_header:hover .skills_subtitle,
.skills_active .skills_subtitle{
    color: var(--skin-color);
    font-weight: var(--font-medium);
}
.skills_header:hover .skills_icon,
.skills_active .skills_icon{
    transform: scale(1.15);
}
.skills_active .skills_arrow{
    transform: rotate(-90deg);
    transition: .3s;
}
.skills [data-content]{
    display: none;
}
.skills_active[data-content]{
    display: block;
}
.skills_list{
    row-gap: 1.8rem;
}
.skills_titles{
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--mb-0-5);
}
.skills_name{
    font-size: var(--normal-font-size);
    font-weight: var(--font-medium);
}
.skills_bar,
.skills_percentage{
    height: 5px;
    border-radius: .25rem;
}
.skills_bar{
    background-color: hsl(0deg 0% 86.33%);
}
.skills_percentage{
    display: block;
    background-color: var(--skin-color);
}
/*_-_-_-_-_-_- Work Section _-_-_-_-_-_-*/

.work_container{
    grid-template-columns: repeat(3, 400px);
    gap: 1.8rem;
    justify-content: center;
    padding-top: 1rem;
}
.work_more{
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}
.work_filters {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: .75rem;
    margin-bottom: 2rem;
}
.work_item{
    cursor: pointer;
    color: var(--title-color);
    padding: .25rem .75rem;
    font-size: var(--font-medium);
    border-radius: .5rem;
}
.work_card{
    /* background-color: var(--body-color); */
    background-color: hsla(0, 0%, 90%, 0.46);
    padding: 1.25rem;
    border-radius: .5rem;
    position: relative;
}
.work_badge{
    position: absolute;
    top: 1rem;
    inset-inline-start: 1rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    column-gap: .3rem;
    background-color: var(--skin-color);
    color: hsl(0, 0%, 100%);
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    padding: .3rem .7rem;
    border-radius: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.work_badge i{
    font-size: .9rem;
}
.portfolio_item_details{
    display: none;
}
.work_img{
    border-radius: .5rem;
    margin-bottom: var(--mb-1);
    background: hsl(0, 0%, 88%);
}
.work_title{
    font-size: var(--normal-font-size);
    font-size: var(--font-medium);
    margin-bottom: var(--mb-0-5);
}
.work_button{
    color: var(--skin-color);
    font-size: var(--small-font-size);
    display: flex;
    align-items: center;
    column-gap: .25rem;
    cursor: pointer;
}
.work_button_icon{
    font-size: 1rem;
    transition: .3s;
}
.work_button:hover .work_button_icon{
    transform: translateX(.25rem);
}
/* Active Item Work */

.active_work{
    background-color: var(--skin-color);
    color: #ffffff;
}


/*_-_-_-_-_-_- Portfolio Popup _-_-_-_-_-_-*/
.portfolio_popup{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.portfolio_popup.open{
    opacity: 1;
    visibility: visible;
}

.portfolio_popup_inner{
    background-color: var(--body-color);
    width: 98%;
    border-radius: .5rem;
    padding: 2.5rem;
    position: relative;
}
.portfolio_popup_content{
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    column-gap: 3rem;
}
.portfolio_popup_close{
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: var(--skin-color);
    cursor: pointer;
}
.portfolio_popup_img{
    border-radius: .5rem;
}
.portfolio_popup_subtitle{
    font-size: var(--smaller-font-size);
    margin-bottom: var(--font-medium);
    margin-bottom: var(--mb-1);
}
.details_title{
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-1);
}

.details_description{
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-2);
}
.details_info li{
    margin-bottom: var(--mb-0-75);
    text-transform: capitalize;
    font-size: var(--small-font-size);
}
.details_info li:last-child{
    margin-bottom: 0;
}
.details_info li span{
    font-weight: normal;
}
.details_info li a {
    text-transform: lowercase;
    color: var(--skin-color);
}
/*_-_-_-_-_-_- Services Section _-_-_-_-_-_-*/

.services_container{
    grid-template-columns: repeat(4, 280px);
    justify-content: center;
    column-gap: 1.8rem;
}

.services_content{
    position: relative;
    background-color: rgb(250 250 250);
    padding: 3rem 0 2rem 2.5rem;
    border-radius: .25rem; 

}
.services_icon{
    display: block;
    font-size: 1.8rem;
    color: var(--skin-color);
    margin-bottom: var(--mb-1);
}

.services_title{
    font-size: var(--h3-font-size);
    margin-bottom: var(--mb-1);
    font-weight: var(--font-medium);
}
.services_button{
    color: var(--skin-color);
    font-size: var(--small-font-size);
    display: flex;
    align-items: center;
    column-gap: .25rem;
    cursor: pointer;
}
.services_button_icon{
    font-size: 1rem;
    transition: .3s;
}
.services_button:hover .services_button_icon{
    transform: translateX(.25rem);
}
.services_modal{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 1rem;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.services_modal_content{
    width: 500px;
    position: relative;
    background-color: var(--box-color);
    padding: 4.5rem 2.5rem 2.5rem;
    border-radius: .5rem;
}
.services_modal_close{
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: var(--skin-color);
    cursor: pointer;
}
.services_modal_title,
.services_modal_description{
    text-align: center;
}
.services_modal_title{
    font-size: var(--h3-font-size);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-1);
}
.services_modal_description{
    font-size: var(--small-font-size);
    padding: 0 3.5rem;
    margin-bottom: var(--mb-2);
}
.services_modal_services{
    row-gap: var(--mb-0-75);
}
.services_modal_service{
    display: flex;
    align-items: center;
    column-gap: .5rem;
}
.services_modal_icon{
    color: var(--skin-color);
    font-size: 1.2rem;
}
.services_modal_info{
    font-size: var(--small-font-size);
}
/* Active Modal*/

.active_modal{
    opacity: 1;
    visibility: visible;
}


/*_-_-_-_-_-_- Contact Section _-_-_-_-_-_-*/


.contact_container{
    grid-template-columns: 340px 800px;
    column-gap: 3rem;
    justify-content: center;
    align-items: center;
}

.contact_info{
    display: grid;
   row-gap: 1rem;

}

.contact_card{
    background-color: rgb(250 250 250);
    padding: 1rem;
    border-radius: .5rem;
    text-align: center;
}

.contact_card_icon{
    font-size: 1.8rem;
    color: var(--title-color);
    margin-bottom: var(--mb-0-25);
}

.contact_card_title
.contact_card_data{
    font-size: var(--small-font-size);
}
.contact__card_title{
    font-weight: var(--font-medium);
}

.contact_card_data{
   display: block;
   margin-bottom: var(--mb-0-75);
}

.contact_button{
    color: var(--skin-color);
    font-size: var(--small-font-size);
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .25rem;
    cursor: pointer;
}
.contact_button_icon{
    font-size: 1rem;
    transition: .3s;
}
.contact_button:hover .contact_button_icon{
    transform: translateX(.25rem);
}
.input_container{
    position: relative;
    margin-top: .1rem;
    margin-bottom: 1rem;
}
.input{
    width: 100%;
    border: 3px solid #e4e4e4;
    background-color: transparent;
    padding: .6rem 1.2rem;
    color: var(--title-color);
    font-weight: var(--font-medium);
    font-size: var(--normal-font-size);
    letter-spacing: .5px;
    outline: none;
    border-radius: .50rem;
    transition: .3s;

}
textarea.input{
    padding: .8rem 1.2rem;
    min-height: 140px;
    border-radius: .50rem;
    resize: none;
}

.input_container label{
    /* position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    padding: 0 .4rem; */
    color: var(--text-color);
    font-size: 1.rem;
    font-weight: var(--font-medium);
    /* pointer-events: none;
    z-index: 15;
    transition: .5s; */
}
/* 
.input_container.textarea label{
    top: 1rem;
    transform: translateY(0);
}
.input_container span{
    position: absolute;
    top: 0;
    left: 25px;
    color: transparent;
    transform: translateY(-50%);
    font-size: var(--small-font-size);
    padding: 0 .4rem;
    pointer-events: none;
    z-index: var(--z-fixed);
}

.input_container span::before,
.input_container span::after{
    content: '';
    position: absolute;
    width: 10%;
    height: 5px;
    opacity: 0;
    background-color: var(--body-color);
    top: 50%;
    transform: translateY(-50%);
    transition: .3s;
}
.input_container span::before{
    left: 50%;
}
.input_container span::after{
    right: 50%;
}
.input_container.focus label{
    top: 0;
    transform: translateY(-50%);
    left: 25ox;
    font-size: var(--small-font-size);
}
.input_container.focus span::before,
.input_container.focus span::after{
    width: 50%;
    opacity: 1;
} */

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- FOOTER _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
.footer{
    padding-top: 2rem;
}

.footer_container{
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.6rem;
}

.footer_bg{
    background-color: var(--body-color);
    padding: 1rem 0 3.5rem;
}
.footer_title{
    font-size: var(--h1-font-size);
    margin-bottom: var(--mb-0-25);
}
.footer_subtitle{
    font-size: var(--small-font-size);
}
.footer_link{
    display: flex;
    justify-self: center;
    column-gap: 2rem;
}
.footer_link:hover{
    color: var(--skin-color);
}
.footer_socials{
    justify-self: flex-end;
}
.footer_social{
    font-size: 1.25rem;
    margin-right: var(--mb-1-5);
}
.footer_social:hover{
    color: var(--skin-color);
}
.footer_copy{
    font-size: var(--small-font-size);
    text-align: center;
    margin-top: 4.5rem;
}
.footer_title,
.footer_subtitle,
.footer_link,
.footer_social{
    color: var(--title-color);
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- SCROLL UP _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/


/*_-_-_-_-_-_- Show Scroll Up _-_-_-_-_-_-*/


/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- SCROLL BAR _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
/* ::-webkit-scrollbar{
    width: .60rem;
    background-color: var(--scroll-bar-color);
    border-radius: .5rem;
}
::-webkit-scrollbar-thumb{
    background-color: var(--scroll-thumb-color);
} */

::selection {
    color: #8c8c8c;
    background: #e6e6e6;
    }
    ::moz-selection {
        color: #8c8c8c;
        background: #e6e6e6;
    }
    ::-webkit-scrollbar {
    width: 6px;
    height: 8px;
    }
    ::-webkit-scrollbar-track {
    background-color: #bdbdbd;
    border-left: 1px solid #bdbdbd;


    }
    ::-webkit-scrollbar-thumb {
    background-color: rgb(140, 140, 140);
    border-radius: 50px;
}

/*_-_-_-_-_-_-_-_-_-_-_-_- BREAKPOINTS _-_-_-_-_-_-_-_-_-_-_-_-*/
/* For Large Devices */
@media screen and (max-width: 1408px) {
    .container{
        margin-left: var(--mb-2-5);
        margin-right: var(--mb-2-5);
    }
}

@media screen and (max-width: 1216px) {
    .about_container{
        column-gap: 2.5rem;
    }
    .about_description{
        margin-right: 0;
    }
    .work_container{
        grid-template-columns: repeat(2, 330px);
        gap: 2.5rem;
    }
}

@media screen and (max-width: 1024px) {
    .container{
        margin-left: var(--mb-1-5);
        margin-right: var(--mb-1-5);
    }
    .sidebar{
        width: 100%;
        z-index: 999;
        transform: translateX(-100%);
    }
    .show-sidebar{
        transform: translateX(0);
    }
    .nav_logo,
    .btn_share{
        display: none;
    }
    .nav_menu{
        height: 100%;
        width: 210px;
        transform: rotate(0deg) translateX(0);
        display: flex;
        justify-content: center;
        background-color: rgb(239 239 239 / 90%);
    }
    .nav_list{
        flex-direction: column;
        /* height: 100%; */
        justify-content: center;
        align-items: center;
    }
    .nav_link{
        padding: 1rem 0;
        line-height: 1.5;
    }
    /* .nav_link.active_link::after, .nav_link:hover::after {
    bottom: 0;
    } */
    .nav_link.active_link::after, .nav_link:hover::after {
        width: 16px;
        bottom: 15px;
        margin: 0;
        transform: rotate(0deg) translateX(-0%);
    }
    .nav_close{
        display: block;
    }  
    .nav_toggle{
        display: flex;
    }

    .main{
        margin-left: 0;
    }
    .home{
        background-position: right center;
    }
    .home_data{
        margin-top: 60px;
    }
    .about_container{
        grid-template-columns: 1fr;
        row-gap: 2.5rem;
    }
    .about_img{
        width: 350px;
    }
    .about_data {
        text-align: center;
    }
    .about_info{
        justify-content: center;
    }
    .about_box{
        padding: .75rem .5rem;
    }
    .about_description{
        padding: 0 4rem;
        text-align: center;
    }
    .qualification_container{
        grid-template-columns: repeat(2, 290px);
    }
    .skills_container{
        grid-template-columns: 340px 300px;
    }
    .skills_list{
        row-gap: 1.7rem;
    }
    .work_card{
        padding: 1rem;
    }
    .work_img{
        margin-bottom: var(--mb-0-75);
    }
    .work_title{
        margin-bottom: var(--mb-0-25);
    }

    
    .services_container{
        grid-template-columns: repeat(2, 320px);
    }
    .services_content{
        margin-bottom: var(--mb-1-5);
    }
    .portfolio_item_details{
        margin-bottom: var(--mb-1-5);
    }
    .details_info li{
        margin-bottom: var(--mb-1-5);
    }
    .details_title{
        margin-bottom: var(--mb-0-75);
    }
    .contact_container{
        grid-template-columns: 340px 360px;
    }
}

/* For Medium Devices */
@media screen and (max-width: 768px) { 
    .about_img{
        width: 250px;
    }
    .qualification_container{
        grid-template-columns: 290px;
        grid-row: 3rem;
    }
    .skills_container{
        grid-template-columns: 300px;
        row-gap: 3rem;
    }
    .work_container{
        grid-template-columns: 350px;
    }
    .services_container{
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .services_content{
        padding: 3.5rem .5rem 1.25rem 1.5rem;
    }
    .services_icon{
        font-size: 1.5rem;
    }
    .contact_container{
        grid-template-columns: 360px;
        row-gap: 3rem;
    }
    .footer_container{
        grid-template-columns: repeat(2, 1fr);
        row-gap: 3rem;
    }
    .footer_socials{
        justify-self: start;
    }
    .footer_links{
        flex-direction: column;
        row-gap: 1.5rem;
    }
    .footer_bg{
        padding: 1rem 0 3rem;
    }
    .footer_copy{
        margin-top: var(--mb-3);
    }
    .portfolio_popup_inner{
        width: 420px;
        padding: 2.8rem 1.5rem 2.5rem;
    }
    .portfolio_popup_content{
        grid-template-columns: 1fr;
        row-gap: 1.6rem;
    }
    .details_title{
        font-size: var(--normal-font-size);
    }
    .portfolio_popup_close{
        top: 5rem;
    }

}

@media screen and (max-width: 576px) {
    .nav_toggle{
        right: initial;
        left: 1.5rem;
    }
    .home{
        background-image: none;
        height: initial;
        align-items: initial;
        padding: 7rem 0 2rem;
    }
    .home_container{
        row-gap: 2rem;
    }
    .home_img{
        display: block;
        width: 250px;
        justify-self: center;
    }
    .home_social{
        left: initial;
        right: -1rem;
        flex-direction: column;
        row-gap: 3.5rem;
    }
    .home_social_follow{
        font-size: var(--small-font-size);
        transform: rotate(90deg);
    }
    .home_social_links{
        flex-direction: column;
        row-gap: .25rem;
    }
    .home_social_link{
        font-size: var(--normal-font-size);
    }

    .my_info{
        display: none;
    }

    .about_info{
        grid-template-columns: repeat(2, 1fr);
    }
    .about_description{
        padding: 0;
    }
    .services_modal_content{
        padding: 4.5rem 1.5rem 2.5rem;
    }
    .services_modal_description{
        padding: 0;
    }
    .contact_container,
    .work_container{
        grid-template-columns: 300px;
    }
    /* .about_container{
        grid-template-columns: 300px;
        text-align: center;
        justify-content: center;
    } */

    .footer_container{
        grid-template-columns: 1fr;
    }
    .footer_links{
        justify-self: flex-start;
    }

}

/* For Small Devices */
@media screen and (max-width: 350px) {
    .container{
        margin-left: var(--mb-1);
        margin-right: var(--mb-1);
    }

    .home_img{
        width: 200px;
    }
    .home_title{
        font-size: var(--h1-font-size);
    }
    .home_subtitle{
        font-size: var(--normal-font-size);
    }
    .about_info{
        grid-template-columns: repeat(2, 1fr);
        row-gap: .5rem;
    }

    .contact_container,
    .work_container,
    .skills_container,
    .qualification_container{
        grid-template-columns: 1fr;
    }
    .skills_title{
        font-size: var(--normal-font-size);
    }
    .work_item{
        font-size: var(--small-font-size);
    }
    .work_filters{
        column-gap: .25rem;
    }
    .services_container{
        grid-template-columns: max-content;
    }
    .services_content{
        padding-right: 3.5rem;
    }
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- PAGE TRANSITION (WIPE) _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
/* Native cross-document transition where supported; harmless no-op elsewhere */
@view-transition{
    navigation: auto;
}
.page_wipe{
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    pointer-events: none;
}
.pw_bar{
    background-color: var(--pink-dark);
}
.pw_bar[data-dir="left"],
.pw_bar[data-dir="right"]{
    background-color: var(--pink);
}
.pw_bar[data-dir="left"]{
    transform: translateX(-101%);
}
.pw_bar[data-dir="right"]{
    transform: translateX(101%);
}
.pw_bar[data-dir="top"]{
    transform: translateY(-101%);
}
.pw_bar[data-dir="bottom"]{
    transform: translateY(101%);
}
.pw_text{
    position: fixed;
    top: 50%;
    left: 9rem;
    z-index: 1201;
    pointer-events: none;
    text-align: left;
    opacity: 0;
}
.pw_text_main{
    display: block;
    font-size: clamp(3.5rem, 11vw, 8.5rem);
    font-weight: var(--font-bold);
    color: #ffffff;
    letter-spacing: 1px;
    line-height: 1;
    white-space: nowrap;
}
.pw_text_sub{
    display: block;
    margin-top: .4rem;
    font-size: clamp(1rem, 2.4vw, 1.6rem);
    font-weight: var(--font-medium);
    color: #ffffff;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: .9;
    white-space: nowrap;
}
@media screen and (max-width: 768px){
    .pw_text{
        left: 2rem;
    }
    .pw_text_main{
        font-size: clamp(2.5rem, 13vw, 4.5rem);
    }
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- GSAP: CUSTOM CURSOR _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
.cursor_dot,
.cursor_outline{
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999;
    opacity: 0;
}
.cursor_dot{
    width: 8px;
    height: 8px;
    background-color: var(--skin-color);
}
.cursor_outline{
    width: 36px;
    height: 36px;
    border: 1px solid var(--skin-color);
    transition: width .25s, height .25s, background-color .25s, border-color .25s;
}
.cursor_outline.cursor_hover{
    width: 60px;
    height: 60px;
    background-color: hsla(350, 79%, 56%, .1);
}
body.cursor_ready .cursor_dot,
body.cursor_ready .cursor_outline{
    opacity: 1;
}
@media (hover: hover) and (pointer: fine){
    body.cursor_ready,
    body.cursor_ready a,
    body.cursor_ready button,
    body.cursor_ready .work_button,
    body.cursor_ready .skills_header,
    body.cursor_ready .nav_toggle,
    body.cursor_ready .nav_close{
        cursor: none;
    }
}
@media (hover: none), (pointer: coarse){
    .cursor_dot, .cursor_outline{
        display: none;
    }
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- GSAP: TEXT SPLIT / CARDS _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
.char{
    display: inline-block;
    will-change: transform, opacity;
}
.work_card,
.services_content{
    will-change: transform;
}
.work_card{
    display: block;
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- PROJECT DETAILS PAGE _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
.pd_container{
    max-width: 900px;
}
.pd_back{
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
    font-size: var(--small-font-size);
    color: var(--text-color);
    font-weight: var(--font-medium);
    margin-bottom: var(--mb-2-5);
    transition: .3s;
}
.pd_back:hover{
    color: var(--skin-color);
}
.pd_category{
    display: block;
    color: var(--skin-color);
    font-weight: var(--font-medium);
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-0-5);
}
.pd_title{
    font-size: var(--h1-font-size);
    margin-bottom: var(--mb-1-5);
}
.pd_description{
    color: var(--text-color);
    font-size: var(--normal-font-size);
    max-width: 640px;
    margin-bottom: var(--mb-2-5);
}
.pd_hero{
    background-color: hsl(0, 0%, 96%);
    border-radius: .5rem;
    padding: 2rem;
    text-align: center;
    margin-bottom: var(--mb-2-5);
}
.pd_hero img{
    max-width: 100%;
    border-radius: .25rem;
}
.pd_meta{
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 1.75rem 0;
    border-top: 1px solid hsl(0, 0%, 90%);
    border-bottom: 1px solid hsl(0, 0%, 90%);
    margin-bottom: var(--mb-2-5);
}
.pd_meta_item{
    display: flex;
    flex-direction: column;
    row-gap: .35rem;
}
.pd_meta_label{
    font-size: var(--smaller-font-size);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: hsl(0, 0%, 55%);
}
.pd_meta_value{
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
    color: var(--title-color);
}
.pd_tools_row{
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.pd_tool_chip{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: .4rem;
    background-color: hsl(0, 0%, 96%);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
    overflow: hidden;
    flex-shrink: 0;
}
.pd_tool_chip img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.pd_tool_chip_generic i{
    font-size: 1rem;
    color: hsl(0, 0%, 55%);
}
.pd_visit{
    margin-bottom: var(--mb-3);
}
.pd_body_title{
    font-size: var(--h3-font-size);
    color: var(--skin-color);
    margin-bottom: var(--mb-0-75);
    margin-top: var(--mb-2-5);
}
.pd_body_title:first-child{
    margin-top: 0;
}
.pd_body p{
    font-size: var(--normal-font-size);
    color: var(--text-color);
    line-height: 1.7;
}
.pd_process{
    position: relative;
    overflow: hidden;
    margin-top: var(--mb-3);
    padding-top: var(--mb-2-5);
    border-top: 1px solid hsl(0, 0%, 90%);
}
.pd_process_steps{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: var(--mb-1-5);
}
.pd_step{
    position: relative;
    background-color: hsl(0, 0%, 97%);
    border-radius: .5rem;
    padding: 1.5rem 1.25rem 1.25rem;
}
.pd_step_num{
    position: absolute;
    top: 1rem;
    right: 1.1rem;
    font-size: var(--h2-font-size);
    font-weight: var(--font-bold);
    color: hsl(0, 0%, 88%);
}
.pd_step_icon{
    display: block;
    font-size: 1.6rem;
    color: var(--skin-color);
    margin-bottom: var(--mb-0-75);
}
.pd_step_title{
    font-size: var(--small-font-size);
    font-weight: var(--font-bold);
    color: var(--title-color);
    margin-bottom: var(--mb-0-5);
}
.pd_step_text{
    font-size: var(--smaller-font-size);
    color: var(--text-color);
    line-height: 1.6;
}
@media screen and (max-width: 768px){
    .pd_process_steps{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 480px){
    .pd_process_steps{
        grid-template-columns: 1fr;
    }
}
.pd_design{
    position: relative;
    overflow: hidden;
    margin-top: var(--mb-3);
    padding-top: var(--mb-2-5);
    border-top: 1px solid hsl(0, 0%, 90%);
}
.pd_design_group{
    margin-top: var(--mb-2);
}
.pd_design_group:first-of-type{
    margin-top: var(--mb-1);
}
.pd_design_label{
    display: block;
    font-size: var(--smaller-font-size);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: hsl(0, 0%, 55%);
    margin-bottom: var(--mb-1);
}
.pd_colors{
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.pd_color{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 64px;
    padding: 0 1.25rem;
    border-radius: .5rem;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.pd_color_name{
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
}
.pd_color_hex{
    font-size: var(--smaller-font-size);
    opacity: .85;
    text-transform: uppercase;
}
.pd_fonts{
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.pd_font{
    display: flex;
    align-items: baseline;
    column-gap: .5rem;
    padding: .6rem 1rem;
    background-color: hsl(0, 0%, 97%);
    border-radius: .375rem;
}
.pd_font_name{
    font-size: var(--h3-font-size);
    font-weight: var(--font-bold);
    color: var(--title-color);
}
.pd_font_role{
    font-size: var(--smaller-font-size);
    color: hsl(0, 0%, 50%);
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- PROJECT CASE STUDY _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
.pd_section_block{
    position: relative;
    overflow: hidden;
    margin-top: var(--mb-3);
    padding-top: var(--mb-2-5);
    border-top: 1px solid hsl(0, 0%, 90%);
}
.pd_section_icon_bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    font-size: clamp(12rem, 26vw, 22rem);
    line-height: 1;
    color: hsl(0, 0%, 50%);
    opacity: .05;
    pointer-events: none;
}
.pd_title_icon{
    color: var(--skin-color);
    font-size: .85em;
    margin-right: .5rem;
    vertical-align: middle;
}
.pd_split{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.pd_split_item{
    position: relative;
    overflow: hidden;
}
.pd_list{
    margin-top: var(--mb-1);
    padding-left: 1.1rem;
}
.pd_list li{
    font-size: var(--normal-font-size);
    color: var(--text-color);
    line-height: 1.7;
    list-style: disc;
    margin-bottom: .35rem;
}
.pd_points_grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: var(--mb-1-5);
}
.pd_point{
    display: flex;
    column-gap: 1rem;
}
.pd_point_num{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--skin-color);
    color: var(--skin-color);
    font-weight: var(--font-bold);
    font-size: var(--small-font-size);
}
.pd_point_title{
    font-size: var(--small-font-size);
    font-weight: var(--font-bold);
    color: var(--title-color);
    margin-bottom: .35rem;
}
.pd_point_text{
    font-size: var(--smaller-font-size);
    color: var(--text-color);
    line-height: 1.6;
}
.pd_persona_card{
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 2rem;
    margin-top: var(--mb-1-5);
}
.pd_persona_img{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    border-radius: .75rem;
    background-color: hsl(0, 0%, 96%);
}
.pd_persona_img i{
    font-size: 4.5rem;
    color: var(--skin-color);
}
.pd_persona_name{
    font-size: var(--h3-font-size);
    color: var(--title-color);
}
.pd_persona_meta{
    display: block;
    font-size: var(--smaller-font-size);
    color: hsl(0, 0%, 55%);
    margin-bottom: var(--mb-0-75);
}
.pd_persona_bio{
    font-size: var(--small-font-size);
    color: var(--text-color);
    line-height: 1.7;
    margin-bottom: var(--mb-1);
}
.pd_persona_lists{
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.pd_persona_label{
    display: block;
    font-size: var(--smaller-font-size);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: hsl(0, 0%, 55%);
    margin-bottom: var(--mb-0-5);
}
.pd_persona_lists ul{
    padding-left: 1.1rem;
}
.pd_persona_lists li{
    font-size: var(--smaller-font-size);
    color: var(--text-color);
    line-height: 1.6;
    list-style: disc;
    margin-bottom: .3rem;
}
.pd_flow_diagram{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: var(--mb-1-5);
}
.pd_flow_step{
    background-color: hsl(0, 0%, 96%);
    border: 1px solid hsl(0, 0%, 88%);
    border-radius: 1.5rem;
    padding: .5rem 1.1rem;
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    color: var(--title-color);
    white-space: nowrap;
}
.pd_flow_group{
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.pd_flow_arrow{
    color: var(--skin-color);
    font-size: 1.1rem;
    line-height: 1;
}
.pd_artifact_grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: var(--mb-1-5);
}
.pd_artifact{
    background-color: hsl(0, 0%, 97%);
    border-radius: .5rem;
    padding: 1.25rem;
}
.pd_artifact_icon{
    display: block;
    font-size: 1.6rem;
    color: var(--skin-color);
    margin-bottom: var(--mb-0-75);
}
.pd_artifact_title{
    font-size: var(--small-font-size);
    font-weight: var(--font-bold);
    color: var(--title-color);
    margin-bottom: var(--mb-0-5);
}
.pd_artifact_text{
    font-size: var(--smaller-font-size);
    color: var(--text-color);
    line-height: 1.6;
}
.pd_gallery_grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: var(--mb-1-5);
}
.pd_gallery_item{
    background-color: hsl(0, 0%, 96%);
    border-radius: .5rem;
    padding: 1rem;
}
.pd_gallery_item img{
    display: block;
    width: 100%;
    border-radius: .25rem;
}
.pd_gallery_caption{
    display: block;
    font-size: var(--smaller-font-size);
    color: hsl(0, 0%, 50%);
    text-align: center;
    margin-top: .6rem;
}
.pd_tags{
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: var(--mb-1);
}
.pd_tag{
    background-color: var(--skin-color);
    color: var(--skin-color-text, hsl(0, 0%, 100%));
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    padding: .3rem .9rem;
    border-radius: 1rem;
}
.pd_table_wrap{
    overflow-x: auto;
    margin-top: var(--mb-1-5);
}
.pd_journey_table,
.pd_audit_table{
    width: 100%;
    border-collapse: collapse;
    font-size: var(--smaller-font-size);
}
.pd_journey_table th,
.pd_journey_table td,
.pd_audit_table th,
.pd_audit_table td{
    border: 1px solid hsl(0, 0%, 88%);
    padding: .6rem .9rem;
    text-align: center;
    vertical-align: top;
}
.pd_journey_table th:first-child,
.pd_journey_table td:first-child,
.pd_audit_table th:first-child,
.pd_audit_table td:first-child{
    text-align: left;
    white-space: nowrap;
    font-weight: var(--font-medium);
    color: var(--title-color);
    background-color: hsl(0, 0%, 97%);
}
.pd_journey_table th,
.pd_audit_table th{
    background-color: hsl(0, 0%, 96%);
    color: var(--title-color);
    font-weight: var(--font-bold);
}
.pd_journey_emotion{
    display: block;
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: .3rem;
}
.pd_journey_emotion_label{
    display: block;
    font-size: var(--smaller-font-size);
    color: hsl(0, 0%, 50%);
}
.pd_audit_icon{
    font-size: 1.2rem;
}
.pd_audit_icon.yes{
    color: hsl(142, 71%, 38%);
}
.pd_audit_icon.no{
    color: hsl(0, 74%, 52%);
}
.pd_audit_icon.unknown{
    color: hsl(0, 0%, 78%);
}
.pd_pending_badge{
    display: inline-block;
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    color: hsl(38, 92%, 40%);
    background-color: hsl(38, 92%, 94%);
    padding: .2rem .6rem;
    border-radius: 1rem;
    margin-left: .6rem;
    vertical-align: middle;
}
.pd_connect{
    text-align: center;
}
.pd_connect_title{
    margin-top: 0;
    font-size: var(--h2-font-size);
    color: var(--skin-color);
    margin-bottom: var(--mb-1);
}
.pd_connect p{
    max-width: 520px;
    margin: 0 auto var(--mb-1-5);
    color: var(--text-color);
    line-height: 1.7;
}
.pd_connect_details{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: .5rem;
    margin-bottom: var(--mb-2);
}
.pd_connect_link{
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
    color: var(--title-color);
    transition: .3s;
}
.pd_connect_link i{
    color: var(--skin-color);
    font-size: 1.1rem;
}
.pd_connect_link:hover{
    color: var(--skin-color);
}
@media screen and (max-width: 768px){
    .pd_split,
    .pd_points_grid,
    .pd_artifact_grid,
    .pd_persona_lists{
        grid-template-columns: 1fr;
    }
    .pd_persona_card{
        grid-template-columns: 1fr;
    }
    .pd_persona_img{
        width: 96px;
        height: 96px;
    }
    .pd_persona_img i{
        font-size: 3rem;
    }
}
.pd_notfound{
    text-align: center;
    padding: 4rem 0;
}
.pd_notfound h2{
    font-size: var(--h1-font-size);
    margin-bottom: var(--mb-1);
}
.pd_notfound p{
    margin-bottom: var(--mb-2);
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- RESUME PAGE _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
.rs_container{
    max-width: 900px;
}
.rs_header{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 1.5rem;
    padding-bottom: var(--mb-2-5);
    border-bottom: 1px solid hsl(0, 0%, 90%);
    margin-bottom: var(--mb-2-5);
}
.rs_category{
    display: block;
    color: var(--skin-color);
    font-weight: var(--font-medium);
    font-size: var(--small-font-size);
    margin-bottom: var(--mb-0-5);
}
.rs_name{
    font-size: var(--h1-font-size);
    margin-bottom: var(--mb-0-5);
}
.rs_role{
    font-weight: var(--font-medium);
    color: var(--text-color);
    margin-bottom: var(--mb-1);
}
.rs_contact{
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: .5rem;
    font-size: var(--small-font-size);
    color: var(--text-color);
}
.rs_contact li{
    display: flex;
    align-items: center;
    column-gap: .4rem;
}
.rs_contact i{
    color: var(--skin-color);
}
.rs_contact a{
    color: var(--text-color);
}
.rs_contact a:hover{
    color: var(--skin-color);
}
.rs_links{
    margin-top: .5rem;
}
.rs_download{
    flex-shrink: 0;
}
.rs_body p{
    font-size: var(--normal-font-size);
    color: var(--text-color);
    line-height: 1.7;
}
.rs_list{
    list-style: disc;
    padding-left: 1.2rem;
    row-gap: .4rem;
    display: flex;
    flex-direction: column;
}
.rs_list li{
    font-size: var(--small-font-size);
    color: var(--text-color);
    line-height: 1.6;
}
.rs_tags{
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.rs_tag{
    font-size: var(--smaller-font-size);
    font-weight: var(--font-medium);
    color: var(--title-color);
    background-color: hsl(0, 0%, 95%);
    padding: .4rem .85rem;
    border-radius: 2rem;
}
.rs_stats{
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.rs_stat{
    text-align: center;
    background-color: hsl(0, 0%, 97%);
    border-radius: .5rem;
    padding: 1.25rem 1rem;
}
.rs_stat_num{
    display: block;
    font-size: var(--h1-font-size);
    font-weight: var(--font-bold);
    color: var(--skin-color);
    line-height: 1;
    margin-bottom: var(--mb-0-5);
}
.rs_stat_label{
    display: block;
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
    color: var(--title-color);
    margin-bottom: var(--mb-0-25);
}
.rs_stat_text{
    font-size: var(--smaller-font-size);
    color: hsl(0, 0%, 50%);
    line-height: 1.5;
}
@media screen and (max-width: 768px){
    .rs_stats{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width: 480px){
    .rs_stats{
        grid-template-columns: 1fr;
    }
}
.rs_timeline{
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}
.rs_entry{
    padding-left: 1.25rem;
    border-left: 2px solid hsl(0, 0%, 90%);
}
.rs_entry_head{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 1rem;
}
.rs_entry_head h4{
    font-size: var(--normal-font-size);
    font-weight: var(--font-bold);
    color: var(--title-color);
}
.rs_entry_head span{
    font-size: var(--smaller-font-size);
    color: var(--skin-color);
    white-space: nowrap;
}
.rs_entry_company{
    display: block;
    font-size: var(--small-font-size);
    color: hsl(0, 0%, 50%);
    margin-bottom: var(--mb-0-5);
}
@media screen and (max-width: 576px){
    .rs_header{
        align-items: flex-start;
    }
    .rs_download{
        width: 100%;
        justify-content: center;
    }
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- 404 PAGE _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
.not_found{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.not_found_container{
    text-align: center;
}
.not_found_code{
    display: block;
    font-size: 6rem;
    font-weight: var(--font-bold);
    color: var(--skin-color);
    line-height: 1;
    margin-bottom: var(--mb-1);
}
.not_found_title{
    font-size: var(--h1-font-size);
    margin-bottom: var(--mb-1);
}
.not_found_text{
    color: var(--text-color);
    margin-bottom: var(--mb-2);
}

/*_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_- CONTACT FORM STATUS _-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-*/
.contact_status{
    display: flex;
    align-items: center;
    column-gap: .5rem;
    margin-top: var(--mb-1);
    color: hsl(140, 55%, 38%);
    font-size: var(--small-font-size);
    font-weight: var(--font-medium);
}
.contact_status[hidden]{
    display: none;
}

@media screen and (max-width: 768px){
    .pd_meta{
        grid-template-columns: repeat(2, 1fr);
    }
}