:root{
    --pm-color: #1f1f1f;
    --sd-color: #f5f5f5;
    --pm-color-muted: #1f1f1f50;
    --sd-color-muted: #f5f5f550;

    --font: "JetBrains Mono", monospace;
    --fs-s: 0.6rem;
    --fs-sm: 0.8rem;
    --fs-md: 1rem;
    --fs-lg: 1.2rem;
    --fs-title: 2.5rem;
    --fs-title-strong: 4rem;
    --fs-sub: 1rem;
    --fs-sub-title: 1.6rem;

    --space-s: 0.6rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3.4rem;
    --space-page: 2rem;

    --size-site_header: 80px;
    --size-btn: 44px;
    --size-box: 44px;

    --bg-op: rgba(255, 255, 255, 0.05);
}

@media (max-width: 900px) {
    :root{
        --space-page: 1.5rem;
        --fs-title: 2rem;
        --fs-title-strong: 2.5rem;
    }
}

@media (max-width: 600px) {
    :root{
        --fs-title: 2rem;
        --fs-title-strong: 2rem;
        --fs-sub-title: 1.4rem;

        --size-btn: 36px;
        --size-box: 36px;

        --space-page: 1rem;
    }
}

@media (max-width: 400px) {
    :root{
        --fs-title: 1.6rem;
        --fs-title-strong: 1.8rem;
        --fs-sub: 14px;
        --fs-sub-title: 1.2rem;
    }
}

*{
    box-sizing: border-box;
    margin: 0; padding: 0;
}

body{
    box-sizing: border-box; margin: 0;
    background-color: var(--pm-color);
    color: var(--sd-color);
    font-family: var(--font);
}

html::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

a{
    color: var(--sd-color);
    text-decoration: none;
}

button{
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

img, video{
    width: 100%; height: 100%; object-fit: cover;
}

h6{
    font-size: var(--fs-md);
    font-weight: 400;
}

@media (max-width: 400px) {
    h6{
        font-size: 15px;
    }
}

/* config style start */

.index-main{
    overflow: hidden;
}

.hl-text{
    color: #0ea5e9;
}

.display_overlay{
    width: 100%; height: 100%; 
    position: absolute; top: 0; left: 0;
    background-color: #00000010;
    z-index: 2;
}

.about-main,
.featured-main,
.project-main{
    padding-top: calc(var(--size-site_header) + var(--space-page)); padding-bottom: var(--space-page);
}

#about .bg-site::before,
#project .bg-site::before,
#projects .bg-site::before{
    background-color: var(--bg-op);
    backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(0.2);
    -webkit-backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(0.2);
}

#index header.bg-glass,
#index footer.bg-glass,
#about header.bg-glass,
#project header.bg-glass,
#projects header.bg-glass,
#projects footer.bg-glass{
    backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(0.5);
    -webkit-backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(0.5);
}

.bg-site{
    width: 100%; height: 100%;
    position: fixed; z-index: -1; 
}

.bg-site::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--overlay-opacity, 0.5));
    z-index: 1;
}

.bg-site video,
.bg-site img{
    width: 100%; height: 100%;
    object-fit: cover;
}

.wrapper{
    position: relative;
    max-width: 1600px;
    margin: auto;
    padding: 0 var(--space-page);
}

.wrapper_break_point{
    position: relative;
    max-width: 1600px;
    margin: auto;
    padding: 0 var(--space-page);
}

.bg-card_break_point{
    backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(1);
    -webkit-backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(1);
    background-color: var(--bg-op);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.03),
    0 4px 8px rgba(0,0,0,0.08);
}

.bg-glass_extra{

    background: var(--bg-op);
    backdrop-filter:
        blur(40px)
        saturate(100%)
        brightness(1);

    -webkit-backdrop-filter:
        blur(40px)
        saturate(100%)
        brightness(1);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(255,255,255,0.03),
        0 8px 16px rgba(0,0,0,0.08);
}

.bg-glass,
.bg-card,
.bg-about{

    backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(1);
    -webkit-backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(1);

    background: var(--bg-op);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.03),
    0 4px 8px rgba(0,0,0,0.08);
}

.muted-primary-color{
    color: var(--pm-color-muted);
}

.muted-secondary-color{
    color: var(--sd-color-muted);
}

.button-link {
    width: fit-content; height: var(--size-btn);
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 0 var(--space-md);
    text-decoration: none;
    font-size: var(--fs-sm);
}

.button-link::before,
.button-link::after {
    content: "";
    position: absolute; top: 0;
    width: calc(var(--space-md) / 2); height: 100%;
    transition: width 250ms ease;
}

.button-link::before {
    left: 0;
    border-left: 1px solid var(--sd-color);
    border-top: 1px solid var(--sd-color);
    border-bottom: 1px solid var(--sd-color);
}

.button-link::after {
    right: 0;
    border-right: 1px solid var(--sd-color);
    border-top: 1px solid var(--sd-color);
    border-bottom: 1px solid var(--sd-color);
}

.button-link:hover::before,
.button-link:hover::after {
    width: calc(100% - 2px);
}

.button-link-focus{
    width: fit-content; height: var(--size-btn);
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 0 var(--space-md);
    text-decoration: none;
    font-size: var(--fs-sm);
    background-color: var(--sd-color-muted);
}

.box-stat{
    width: var(--size-btn); height: var(--size-btn);
    display: flex; align-items: center; justify-content: center;
    border-radius: 5px;
    aspect-ratio: 1/1;

    background: rgba(255,255,255,0.04);

    backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(1.02);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(1.02);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(255,255,255,0.03),
        0 8px 16px rgba(0,0,0,0.08);

}

.box-stat .icon{
    width: 1.5rem;
    display: flex; align-items: center; justify-content: center;
}

.box-link{
    width: var(--size-btn); height: var(--size-btn);
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1/1;
    border-radius: 5px;

    background: rgba(255,255,255,0.2);

    backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(1.02);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(1.02);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(255,255,255,0.03),
        0 8px 16px rgba(0,0,0,0.08);
}

.box-link .icon{
    width: 1.5rem;
    display: flex; justify-content: center; align-items: center;
}

.box-des{
    background: rgba(255,255,255,0.04);

    backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(1.02);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(100%)
        brightness(1.02);

}

.space-page{
    padding: 0 var(--space-page);
}

.border-top{
    border-top: 1px solid var(--sd-color-muted);
}

.border-bottom{
    border-bottom: 1px solid var(--sd-color-muted);
}

.border-left{
    border-left: 1px solid var(--sd-color-muted);
}

.border-right{
    border-right: 1px solid var(--sd-color-muted);
}

@media (max-width: 900px) {

    .wrapper_break_point{
        position: relative;
        max-width: 100%;
        margin: 0;
        padding: 0;
    }

    .bg-card_break_point {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;

        background: none;

        box-shadow: none;
    }

    #index{
        overflow: auto;
    }
}

/* config style start */

/* loader style start */


/* loader style end */

/* site style start */

.site_header{
    position: fixed; top: 0; z-index: 99;
    font-size: var(--fs-sm);
}

.site_header, .container, .header-container{
    width: 100%;
}

.site_header .header-container{
    display: grid; grid-template-columns: 240px 1fr 240px; gap: var(--space-sm);
    height: var(--size-site_header);
}

.site_header .header-container .col{
    margin: auto 0;
}

.site_header .header-container .col .site_nav-long{
    width: 100%;
}

.site_logo .name{
    font-size: var(--fs-md);
}

.site_header .site_greating{
    width: 100%;
    display: flex; justify-content: center;
}

.site_header .site_nav-long nav ul{
    width: 100%;
    display: flex; justify-content: end; gap: var(--space-md);
    list-style: none;
}

.site_header .site_nav-short{
    visibility: hidden;
    display: none;
}

.nav-short_fixed{
    display: none;
    visibility: hidden;
}

.nav-short_fixed.active{
    right: 0;
    opacity: 1;
    visibility: visible;
}

@media (max-width: 900px) {

    .site_header .header-container{
        display: grid; grid-template-columns: 1fr auto auto;
    }

    .site_header .site_nav-long{
        visibility: none;
        display: none;
    }

    .site_header .site_nav-short{
        visibility: visible;
        display: block;
    }

    .site_nav-short .btn-open_nav, .nav-short_header .btn-close_nav{
        display: flex; flex-direction: column; gap: 4px;
    }

    .site_nav-short .btn-open_nav .row, .nav-short_header .btn-close_nav .row{
        display: flex; gap: 4px;
    }


    .site_nav-short .btn-open_nav .row .dot, .nav-short_header .btn-close_nav .row .dot{
        background-color: var(--sd-color);
        width: 2px; height: 2px;
        border-radius: 2px;
    }

    .nav-short_fixed{
        position: fixed; top: 0; right: -100%; z-index: 100;

        width: 250px; height: 100dvh;
        display: block;
        opacity: 0;

        transition:
            right 200ms ease,
            opacity 200ms ease,
            visibility 200ms ease;
    }

    .nav-short_fixed.bg-glass_extra{
        backdrop-filter:
            blur(20px)
            saturate(100%)
            brightness(0.5);

        -webkit-backdrop-filter:
            blur(20px)
            saturate(100%)
            brightness(0.5);
    }

    .nav-short_fixed .nav-short_header{
        width: 100%; height: var(--size-site_header);
        padding: 0 var(--space-page);
        display: flex; align-items: center; justify-content: space-between; 
    }

    .nav-short_fixed ul{
        list-style: none; text-decoration: none;
        padding: var(--space-page);
        font-size: var(--fs-sm);
    }

    .nav-short_fixed ul a li{
        padding: var(--space-sm) 0;
    }

}

@media (max-width: 600px) {

    :root{
        --size-site_header: 64px;
    }

    .site_header .site_greating .optional{
        display: none;
        visibility: hidden;
    }

    .nav-short_fixed{
        width: 100%;
    }

}

@media (max-width: 400px) {

    .site_header .site_greating{
        display: none;
        visibility: hidden;
    }

}

/* site header style end */

/* page navigation style start */

.page-navigation{
    width: 100%;
    position: fixed; bottom: var(--space-page);
    z-index: 99;
}

.page-navigation .bg-glass_extra{
    backdrop-filter:
        blur(40px)
        saturate(100%)
        brightness(0.5);

    -webkit-backdrop-filter:
        blur(40px)
        saturate(100%)
        brightness(0.5);
}

.page-navigation .flex{
    display: flex; justify-content: center;
}

.page-navigation .page-nav_container{
    position: relative;
    width: fit-content;
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: 5px;
}

.page-navigation .main-page_title a{
    display: flex; align-items: center;
}

.page-navigation .main-page_title a .arrow{
    display: inline-block;
    transform: rotate(-45deg);
}

.page-navigation span{
    font-size: 12px;
    cursor: pointer;
    color: var(--sd-color-muted);
    transition: color .5s ease;
}

.page-navigation .nav-list{
    display: flex; align-items: center; gap: var(--space-sm);
    color: var(--sd-color-muted);
}

.page-navigation .nav-list span.active {
    color: var(--sd-color);
}

.page-navigation .col-line{
    width: 1px;
    height: 100%;
    background-color: var(--sd-color-muted);
}

@media (max-width: 900px) {
    .page-navigation{
        display: none; visibility: hidden;
    }
}

/* page navigation style end */

/* index main style start */

.index-main {
    position: relative;
    overflow: hidden;
}

.index-main .content-front{
    width: 100%; height: 100vh; height: 100dvh; min-height: fit-content;
    display: flex; flex-direction: column; justify-content: end; gap: var(--space-lg);
    padding-top: calc(var(--size-site_header) + var(--space-page)); padding-bottom: var(--space-page);
}

.index-main .hero{
    position: relative;
    flex: 1;
    display: flex; flex-direction: column; justify-content: center; gap: var(--space-lg);
}

.index-main .hero .hero-title{
    font-size: var(--fs-title);
    font-weight: 600;
}

.index-main .hero .hero-paragraph{
    font-size: var(--fs-sub);
}

.index-main .hero .hero-paragraph .short-br{
    display: none;
}

.index-main .hero .hero-stats .row{
    display: flex; gap: var(--space-lg);
}

.index-main .hero .hero-stats .row .col{
    display: flex; gap: var(--space-sm);
}

.index-main .hero .hero-stats .row .col .stat_detail{
    display: flex; flex-direction: column; justify-content: center;
}

.index-main .hero .hero-stats .row .col .stat_detail p{
    font-size: var(--fs-sm);
}

.index-main .hero .hero-stats .row .col .stat_detail span{
    font-size: var(--fs-sm);
}

.index-main .contact{
    width: 50%;
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm);
    padding: var(--space-s);
    border-radius: 5px;
}

.index-main .contact .quick-link{
    width: 100%;
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-s);
}

.index-main .contact .quick-link p{
    font-size: var(--fs-sm);
}

.index-main .contact .quick-link span{
    font-size: var(--fs-s);
}

.index-main .contact .row{
    display: flex; gap: var(--space-s);
}

.index-main .contact .row .col{
    display: flex; flex-direction: column; justify-content: center;
}

.index-main .content-back{
    width: 50%; height: 100%;
    position: absolute; top: 0; right: 0;
}

.index-main .content-back .slider{
    width: 100%; height: 100%;
    position: relative;
}

.index-main .content-back .slider .card{
    width: 400px; height: 420px;
    border-radius: 5px;
    position: absolute;
    /* bottom: var(--space-page); right: var(--space-page); */
    bottom: calc(-450px - var(--space-page)); right: var(--space-page);
    transition: bottom 0.6s ease;

}

.index-main .content-back .slider .card .card-body{
    width: 100%; height: 100%;
    padding: var(--space-md);
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md);
}

.index-main .content-back .slider .card .card-body .card-header{
    width: 100%;
    display: flex; gap: var(--space-sm); align-items: center;
}

.index-main .content-back .slider .card .card-body .card-header .row{
    flex: 1;
    display: flex; display: flex; gap: var(--space-sm); align-items: center;
}

.index-main .content-back .slider .card .card-body .card-header .card-navigation{
    display: flex; gap: var(--space-s);
}

.index-main .content-back .slider .card .card-body .card-header .card-navigation button{
   width: 2rem; height: 2rem;
   display: flex; justify-content: center; align-items: center;
   padding: 0.5rem;
}

.index-main .content-back .slider .card .card-body .card-header .card-navigation button img{
    width: 100%; height: 100%;
}

.index-main .content-back .slider .card .card-body .card-mid{
    flex: 1;
}

.index-main .content-back .slider .card .card-body .card-mid p{
    font-size: var(--fs-sub);
    text-align: center;
    color: var(--sd-color-muted);
}

.index-main .content-back .slider .card .card-body .card-mid p span{
    color: var(--sd-color);
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el{
    width: 100%; height: 100%;
    display: flex; flex-direction: column; justify-content: center; gap: var(--space-md);
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .pro-preview{
    width: 100%;
    display: flex; justify-content: center; align-items: center;
    border-radius: 5px;
    overflow: hidden;
    background-color: var(--sd-color-muted);
    aspect-ratio: 9 / 6;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .pro-preview img{
    width: 100%;
    object-fit: cover;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row{
    display: flex; gap: var(--space-s); align-items: center;
}

.content-area{
    opacity: 1;
    transition:
        opacity .35s ease,
        filter .35s ease;
}

.content-area.change{
    opacity: 0;
    filter: blur(10px);
}

.index-main .content-back .slider .card .pre-btn:disabled,
.index-main .content-back .slider .card .next-btn:disabled{
    opacity: .4;
    pointer-events: none;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row .col {
    font-size: var(--fs-sm);
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row .col * {
    font-size: inherit;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row .col .icon{
    width: 1.6rem;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row .col .icon img{
    width: 100%;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row .auto-width{
    flex: 1;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row .col .progress{
    width: 100%;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row .col .header{
    display: flex; gap: var(--space-s);
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row .col .progress-bar {
    width: 100%;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row .col .progress-bar progress {
    width: 100%;
    height: 8px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
    overflow: hidden;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row .col .progress-bar progress::-webkit-progress-bar {
    background: var(--sd-color-muted);
    border-radius: 0;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row .col .progress-bar progress::-webkit-progress-value {
    background: var(--sd-color);
    border-radius: 0;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .row .col progress::-webkit-progress-value {
    background: var(--sd-color);
    border-radius: 0;
}

.index-main .content-back .slider .card .card-body .card-footer {
    display: flex; justify-content: end;
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .pro-short-detail .title{
    font-size: var(--fs-sub);
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .pro-short-detail .description{
    width: 100%;
    display: flex; flex-wrap: wrap; gap: 4px;
    font-size: var(--fs-sm);
}

.index-main .content-back .slider .card .card-body .card-mid .mid-el .pro-short-detail .description .box-des{
    padding: 2px 4px;
    border-radius: 3px;
}

@media (max-width: 1024px) {
    .index-main .hero .hero-paragraph .short-br{
        display: block;
    }
}

@media (max-width: 900px) {

    .index-main{
        overflow: auto;
    }

    .index-main .content-front{
        width: 100%;
        display: flex; flex-direction: column; align-items: center; gap: var(--space-lg);
    }

    .index-main .hero{
        width: 100%;
        display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-lg);
        text-align: center;
    }

    .index-main .hero .hero-paragraph .short-br{
        display: none;
    }

    .index-main .hero .hero-stats{
        width: 100%;
        flex: 1;
        order: -1;
    }

    .index-main .hero .hero-stats .row{
        flex-direction: column; gap: var(--space-page);
        text-align: start;
    }

    .index-main .contact{
        width: 100%;
        justify-content: space-between; gap: var(--space-s);
    }

    .index-main .contact .quick-link, .index-main .contact .row{
        gap: var(--space-s);
    }

    .index-main .content-back{
        width: 100%; height: auto;
        position: relative;
    }

    .index-main .content-back .slider{
        width: 100%; height: 100%;
        position: relative;
        display: flex; flex-direction: column; gap: var(--space-page);

        backdrop-filter: blur(20px) saturate(100%) brightness(1.02);
        -webkit-backdrop-filter: blur(20px) saturate(100%) brightness(1.02);
        background: rgba(255, 255, 255, 0.04);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12), 
            inset 0 -1px 0 rgba(255, 255, 255, 0.03), 
            0 4px 8px rgba(0, 0, 0, 0.08);
    }

    .index-main .content-back .slider .row-line{
        height: 1px;
        background-color: var(--sd-color-muted);
    }

    .index-main .content-back .slider .card{
        width: 100%; height: auto;
        position: relative;
        bottom: 0; right: 0;
        transition: none;
        border-radius: 0;
    }

    .index-main .content-back .slider .card .card-body-pro_preview{
        gap: var(--space-page) !important;
    }

    .index-main .content-back .slider .card .card-body .card-mid .mid-el .pro-preview img{
        aspect-ratio: 9 / 6;
    }

    .index-main .content-back .slider .card .card-body{
        padding: var(--space-page);
    }

    .index-main .content-back .slider .card .card-body .card-mid .mid-el-1{
        margin: var(--space-xl) 0;
    }

    .index-main .content-back .slider .card .card-body .card-mid .mid-el-2{
        margin: var(--space-md) 0;
        gap: var(--space-md);
    }

}

@media (max-width: 600px) {

    .index-main .content-back .slider .card .card-body .card-header 
    .card-navigation button{
        width: 1.8rem; height: 1.8rem;
        padding: 0.4rem;
    }

}

@media (max-width: 400px) {

    .index-main .contact .row .none{
        display: none;
        visibility: hidden;
    }

    .index-main .content-back .slider .card .card-body .card-mid .mid-el-1{
        margin: var(--space-md) 0;
    }

    .index-main .content-back .slider .card .card-body .card-mid .mid-el-2{
        margin: var(--space-s) 0;
        gap: var(--space-sm);
    }

    .index-main .content-back .slider .card .card-body .card-footer 
    .pro-short-detail .description{
        font-size: var(--fs-s);
    }
    
}

/* index style end */

/* index footer style start */

.main-footer{
    display: none;
    visibility: hidden;
    margin-top: var(--space-page);
}

.main-footer .footer-container{
    width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-lg);
    text-align: center;
    padding: var(--space-lg) 0;
}

.main-footer .footer-container p{
   font-size: var(--fs-sub);
}

.main-footer .footer-container .footer-social{
    max-width: 600px;
    width: 100%;
}

.main-footer .footer-container .footer-social ul{
    width: 100%;
    display: flex; justify-content: space-between;
    list-style: none;
}

.main-footer .footer-container a{
    text-decoration: underline;
}

.main-footer .slider-name{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    padding-top: var(--space-lg);
}

.main-footer .slider-track{
    display: flex;
    width: max-content;
    animation:slideName 12s linear infinite;
}

.main-footer .slider-track span{
    font-size: var(--fs-title); font-weight: 600; text-transform: uppercase;
    margin-right: 6rem;
}

.main-footer .footer-bottom{
    display: flex; flex-direction: column; gap: var(--space-s);
}

@keyframes slideName{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}


@media (max-width: 900px) {
    #index .main-footer{
        display: block;
        visibility: visible;
    }
}

/* index footer style end */


/* about main style start */

.about-main .content-about{
    width: 100%;
    border-radius: 5px;
}

.about-main .content-about .about-hero{
    width: 100%; height: 800px;
    display: flex; flex-direction: column; gap: var(--space-sm);
    padding-top: 380px;
    position: relative;
    overflow: hidden;
}

.about-main .content-about .about-hero .hero-image{
    width: 100%; height: 100%;
    position: absolute; 
    inset: 0;
    z-index: 0;
}

.about-main .content-about .about-hero .hero-image .image{
    width: 100%; height: 100%;
    background-image: url(assets/img/me2.png);
    background-position: 50% 0;
    background-repeat: no-repeat;
}

.highlight-on-hero{
    display: flex; flex-direction: column; gap: var(--space-sm);align-items: end;
    font-size: var(--fs-sub);
    font-weight: 600;
}

.highlight-on-hero p:nth-child(1){
    color: #f6dd3b;
}

.highlight-on-hero p:nth-child(2){
    color: #8df65c8e;
}

.highlight-on-hero p:nth-child(3){
    color: #8422c5aa;
}

.about-main .content-about .about-hero .hero-line{
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.about-main .content-about .about-hero .hero-title{
    position: relative;
    inset: 0; z-index: 3;
}

.about-main .content-about .about-hero .hero-title .name{
    padding: 0 var(--space-s);
    width: fit-content;
    background-color: var(--sd-color);
    color: var(--pm-color); font-weight: 800; font-size: var(--fs-sub-title); letter-spacing: -1px; white-space: nowrap;
}

.about-main .content-about .about-hero .hero-line .border_line{
    width: 50%;
    height: 1px;
    background-color: var(--sd-color);
}

.about-main .content-about .about-hero .hero-bio{
    width: 100%;
    display: flex; justify-content: space-between;
    position: relative;
    inset: 0; z-index: 3;
    font-size: var(--fs-sub);
}

.about-main .content-about .about-hero .hero-bio .bio{
    max-width: 600px;
    display: flex; flex-direction: column; gap: var(--space-sm);
}

.about-main .content-about .about-title{
    display: flex; justify-content: center;
    padding: var(--space-lg) var(--space-page);
}

.about-skills, .about-tools{
    width: 100%;
    overflow: hidden;
}

.skills-track {
    display: flex;
    width: max-content;
    animation: slide-left 40s linear infinite;
}

.tools-track {
    display: flex;
    width: max-content;
    animation: slide-right 40s linear infinite;
}

.skills-slider .box,
.tools-slider .box {
    flex: 0 0 240px;
    aspect-ratio: 1 / 1;
    display: flex; justify-content: center; align-items: center;
}

.skills-slider .box .image,
.tools-slider .box .image{
    width: 80px;
    aspect-ratio: 1 / 1;
}

.skills-slider:hover .skills-track,
.tools-slider:hover .tools-track {
    animation-play-state: paused;
}

@keyframes slide-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes slide-right {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.about-wid{
    width: 100%;
}

.about-wid .flex-layout{
    display: flex;
    width: 100%;
}

.about-wid .flex-layout .card{
    width: 50%; display: flex; flex-direction: column; gap: var(--space-lg); justify-content: space-between;
    padding: var(--space-lg) var(--space-page);
}

.about-wid .flex-layout .card:first-child{
    border-right: 1px solid var(--sd-color-muted);
}

.about-wid .flex-layout .card-header{
    display: flex; align-items: center;
    gap: var(--space-sm);
}

.about-wid .flex-layout .card-header .image{
    width: var(--size-box); 
    display: flex;
    justify-content: center; align-items: center;
}

.about-wid .flex-layout .card-body ul{
    list-style: none;
    display: flex; flex-direction: column; gap: var(--space-md);
}

.about-wid .flex-layout .card-body ul li{
    font-size: var(--fs-sub);
}

.about-wid .flex-layout .card-body ul li i{
    color: var(--sd-color-muted);
}


.about-wid .flex-layout .card-footer{
    display: flex; justify-content: space-between;
}

.about-educations .flex-layout{
    width: 100%;
    display: flex; justify-content: center; flex-direction: column; align-items: center;
    text-align: center;
}

.about-educations .flex-layout .edu-year{
    color: var(--sd-color-muted);
}

.about-educations .flex-layout .col-line{
    height: 100px;
    width: 1px;
    background-color: var(--sd-color-muted);
}

.about-educations .flex-layout .col-line{
    height: 100px;
    width: 1px;
    background-color: var(--sd-color-muted);
}

.about-educations .flex-layout .col-line_2{
    height: 50px;
    width: 1px;
    background-color: var(--sd-color-muted);
}

.about-educations .flex-layout .edu-data{
    font-size: var(--fs-sub);
}

.about-educations .flex-layout .edu-data a{
    text-decoration: underline;
}

/* In Progress */
.r-status[data-edu_status="0"] {
    color: #f59e0b;
}

/* Awarded */
.r-status[data-edu_status="1"] {
    color: #22c55e;
}

/* Graduated */
.r-status[data-edu_status="2"] {
    color: #0ea5e9;
}

.about-educations .flex-layout .pd{
    padding: var(--space-s);
}

.content-footer{
    padding-bottom: 300px;
}

.content-footer .flex-layout{
    width: 100%;
    display: flex; justify-content: center; flex-direction: column; align-items: center;
    text-align: center;
}

.content-footer .flex-layout .col-line{
   width: 1px;
   height: 300px;
   background-color: var(--sd-color-muted);
}

.content-footer .flex-layout .col-line_2{
   width: 1px;
   height: 50px;
   background-color: var(--sd-color-muted);
   position: relative;
}

.content-footer .flex-layout .col-line_2 span{
    position: absolute; bottom: -22px; left: 0;
    width: 1px; height: 22px; background-color: var(--sd-color-muted);
}

.content-footer .flex-layout .row{
    display: flex; justify-content: center; align-items: center;
}

.content-footer .flex-layout .row .row-line{
    width: 100px; height: 0.5px;
    background-color: var(--sd-color-muted);
}

.content-footer .flex-layout h6{
   padding: var(--space-s);
}


.content-footer .flex-layout h6 span{
    color: var(--sd-color-muted);
}

@media (max-width: 900px) {

    .about-main .content-about{
        border-radius: 0;
    }

    .about-main .content-about .about-hero{
        padding-top: 420px;
    }

    .about-main .content-about .about-hero .hero-bio{
        width: 100%;
        flex-direction: column;
        gap: 6rem;
    }

    .about-main .content-about .about-hero .hero-bio .bio{
        max-width: 100%;
    }

    .about-main .content-about .about-hero .hero-bio .highlight-on-hero{
        text-align: center; justify-content: center; gap: var(--space-md);
    }

    .highlight-on-hero{
        flex-direction: row; flex-wrap: wrap; gap: var(--space-s);
    }

    .about-main .content-about .about-hero .hero-line{
        display: none;
        visibility: none;
    }

    .skills-slider .box,
    .tools-slider .box {
        flex: 0 0 200px;
    }

    .about-wid .flex-layout {
        flex-direction: column;
    }

    .about-wid .flex-layout .card{
        width: 100%;
    }

    .about-wid .flex-layout .card:first-child{
        border-right: none;
        border-bottom: 1px solid var(--sd-color-muted);
    }
}

@media (max-width: 600px) {

    .about-main .content-about .about-hero{
        padding-top: 320px;
        height: 600px;
    }

    .about-main .content-about .about-hero .hero-image .image{
        background-size: cover;
    }

    .about-main .content-about .about-hero .hero-bio{
        gap: 2rem;
    }

    .about-main .content-about .about-hero .hero-bio .highlight-on-hero{
        gap: var(--space-s);
    }

    .skills-slider .box,
    .tools-slider .box {
        flex: 0 0 180px;
    }

    .content-footer .flex-layout .row{
        padding: var(--space-s);
        display: flex; justify-content: center; flex-direction: column; align-items: center; gap: var(--space-page);
    }

    .content-footer .flex-layout .row .row-line{
        width: 1px; height: 25px; 
    }

    .content-footer .flex-layout .col-line_2 span{
        display: none; visibility: hidden;
    }

}

@media (max-width: 450px) {
    
    .about-main .content-about .about-hero .hero-bio{
        gap: 1.2rem;
    }

}

/* about main style end */

/* project main style start */

.featured-main .content-projects-list{
    display: flex; flex-direction: column; gap: var(--space-xl);
}

.featured-main .content-projects-list .featured-project {
    width: 100%;
    margin-top: var(--space-lg);
    display: flex; flex-direction: column; gap: var(--space-lg);
}

.featured-main .content-projects-list .featured-project .featured-project_header{
    width: 100%;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-s);
    text-align: center;
}

.featured-main .content-projects-list .featured-project .featured-project_header ul{
    list-style: none;
    font-size: var(--fs-sub);
}

.featured-main .content-projects-list .featured-project .featured-project_header .tags{
    color: var(--sd-color);
}

.featured-main .content-projects-list .featured-project .featured-project_header .details{
    color: var(--sd-color-muted);
    max-width: 900px;
}

.featured-main .content-projects-list .featured-project .featured-project_header .title{
    font-size: var(--fs-title-strong);
    font-weight: 900;
    text-transform: uppercase;
}

.featured-main .content-projects-list .featured-project .featured-project-display{
    width: 100%;
    aspect-ratio: 9 / 6;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
}

.featured-main .content-projects-list .featured-project .featured-project-display .pre-display{
    width: 100%;
    height: 100%;
}

.featured-main .content-projects-list .projects-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-page);
}

.featured-main .content-projects-list .projects-grid .card .card-display{
    width: 100%;
    border: 1.5px solid var(--sd-color-muted);
    border-radius: 5px;
    aspect-ratio: 9 / 6;
    position: relative;
    overflow: hidden;
}

.featured-main .content-projects-list .projects-grid .card .card-display .image{
    width: 100%;
    height: 100%;
}


.featured-main .content-projects-list .projects-grid .card-sub-title{
    padding-bottom: var(--space-s);
    /* color: var(--sd-color-muted); */
    font-size: var(--fs-sm);
}

.featured-main .content-projects-list .projects-grid .card .card-title{
    font-size: var(--fs-sub-title);
    font-weight: 600;
    padding-top: var(--space-s);
}

.featured-main .content-projects-list  .featured-heading{
    padding: var(--space-page) 0;
}

.featured-main .content-projects-list  .featured-heading .label{
    color: var(--sd-color-muted);
    font-size: var(--fs-sub);
    padding-top: 0.5rem;
}

.featured-main .content-projects-list  .featured-heading h4{
    font-size: var(--fs-sub-title);
}

.featured-main .featured-on-maintan{
    width: 100%; 
    display: flex; justify-content: center;
    font-size: var(--fs-sub);
    text-decoration: underline;
    text-align: center;
}

.featured-main .content-projects-list .projects-grid .card .short-details{
    font-size: var(--fs-sub);
    color: var(--sd-color-muted);
}

@media (max-width: 900px) {

    .featured-main .content-projects-list .featured-project .featured-project_header{
        padding: 0 var(--space-page);
    }

    .featured-main .content-projects-list .featured-project .featured-project-display{
        border-radius: 0;
        aspect-ratio: 9 / 6;
    }

    .featured-main .content-projects-list .projects-grid{
        padding: 0 var(--space-page);
        grid-template-columns: repeat(1, 1fr);
        gap: var(--space-lg);
    }

    .featured-main .content-projects-list  .featured-heading{
        padding: var(--space-page);
    }

    .featured-main .content-projects-list {
        gap: var(--space-lg);
    }

}

@media (max-width: 400px) {
       .featured-main .content-projects-list .projects-grid .card-sub-title{
        font-size: var(--fs-s);
    }

}

/* project main style end */

/* project single page style start */

.project-main .content-project{
    width: 100%;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.project-main .content-project .project-header{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);
    text-align: center;
}

.project-main .content-project .project-header ul{
    list-style: none;
    font-size: var(--fs-sub);
    font-size: var(--fs-sub);
}

.project-main .content-project .project-header .tags{
    color: var(--sd-color-muted);
}

.project-main .content-project .project-header .title{
    font-size: var(--fs-title-strong);
    font-weight: 900;
    text-transform: uppercase;
}

.project-main .content-project .project-header .details{
    max-width: 900px;
    width: 100%;
}

.project-main .content-project .project-display{
    width: 100%;
    aspect-ratio: 9 / 6;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
}

.project-main .content-project .project-display .pre-display{
    width: 100%; height: 100%;
}

.project-main .content-project .project-heading{
    padding: var(--space-page);
}

.project-main .content-project .project-heading h4{
    font-size: var(--fs-sub-title);
}

.project-main .content-project .project-heading .label{
    color: var(--sd-color-muted);
    font-size: var(--fs-sub);
}

.project-main .content-project .project-tech{
    width: 100%;
    display: flex; justify-content: center;
    padding: 0 var(--space-page);

}

.project-main .content-project .project-tech .tech-list{
    max-width: 900px;
    width: 100%;
    padding: var(--space-page) 0;
    display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center;
}

.project-main .content-project .project-tech .tech-list .tech-box{
    padding: var(--space-s) var(--space-sm);
    border: 1px solid var(--sd-color-muted);
    border-radius: 5px;
    cursor: default;
}

.project-main .content-project .project-tech .tech-list .tech-box span{
    font-size: var(--fs-sub);
}

.project-main .content-project .project-highlight{
    padding: 0 var(--space-page);
    padding-bottom: var(--space-page);
}

.project-main .content-project .project-highlight .highlight-grid{
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--space-page);
}

.project-main .content-project .project-highlight .highlight-grid .card .card-display .image{
    width: 100%; height: 100%;
}

.project-main .content-project .project-highlight .highlight-grid .card .card-display{
    width: 100%;
    border-radius: 5px;
    border: 1.5px solid var(--sd-color-muted);
    overflow: hidden;
    aspect-ratio: 9 / 6;
    position: relative;
}

.project-main .content-project .project-highlight .highlight-grid .card .card-details{
    display: flex; flex-direction: column; gap: 2px;
    font-size: var(--fs-sub);
    padding: var(--space-s) 0; 
}

.project-main .content-project .project-highlight .highlight-grid .card .card-details span{
    color: var(--sd-color-muted);
}

#projects .main-footer{
    display: block;
    visibility: visible;
}

@media (max-width: 900px) {

    .project-main .content-project .project-header{
        padding: 0 var(--space-page);
    }

    .project-main .content-project .project-display{
        border-radius: 0;
        aspect-ratio: 9 / 6;
    }

    .project-main .content-project .project-highlight .highlight-grid{
       grid-template-columns: repeat(1, 1fr);
    }
}

/* project single page style end */