@font-face {
    font-family: "Jakarta-Sans";
    src: url("../fonts/PlusJakartaSans-VariableFont_wght.ttf") format("truetype");
    font-weight: 200 800;
    font-display: swap;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Jakarta-Sans";
    background: #ffffff;
    color: #111;
    line-height: 1.9;
    font-size: 15px;

}

/* img {
    display: block;
    width: 100%;
} */

a {

    color: #111;
    text-decoration: none;

}

/* .container {

    width: 1180px;
    max-width: 92%;
    margin: auto;

} */

.container {

    width: 100%;
    max-width: 1440px;
    margin: auto;
}

/* =========================================================
   GLOBAL SKELETON SYSTEM
   ========================================================= */


/* =========================================================
   01. ABOUT PAGE SKELETON
   ========================================================= */

#global-skeleton.skeleton-about {

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    z-index: 99999;

    background: #ffffff;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}


/* =========================================================
   ABOUT - HIDE STATE
   ========================================================= */

#global-skeleton.skeleton-about.hide {

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   ABOUT - CONTAINER
   ========================================================= */

.skeleton-about .skeleton-container {

    width: 1180px;
    max-width: 92%;

    margin: 0 auto;

    padding-top: 120px;
}


/* =========================================================
   ABOUT - MAIN LAYOUT
   ========================================================= */

.skeleton-about .skeleton-wrapper {

    display: grid;

    grid-template-columns: 430px 1fr;

    gap: 70px;

    align-items: start;
}


/* =========================================================
   ABOUT - IMAGE
   ========================================================= */

.skeleton-about .skeleton-image {

    width: 100%;
    height: 550px;

    background: #eeeeee;

    border-radius: 20px;

    animation:
        skeleton-loading 1.4s infinite ease-in-out;
}


/* =========================================================
   ABOUT - CONTENT
   ========================================================= */

.skeleton-about .skeleton-content {

    padding-top: 20px;
}


/* =========================================================
   ABOUT - TITLE
   ========================================================= */

.skeleton-about .skeleton-title {

    width: 60%;
    height: 55px;

    margin-bottom: 40px;

    background: #eeeeee;

    border-radius: 6px;

    animation:
        skeleton-loading 1.4s infinite ease-in-out;
}


/* =========================================================
   ABOUT - TEXT
   ========================================================= */

.skeleton-about .skeleton-text {

    width: 100%;
    height: 16px;

    margin-bottom: 15px;

    background: #eeeeee;

    border-radius: 4px;

    animation:
        skeleton-loading 1.4s infinite ease-in-out;
}


/* =========================================================
   ABOUT - MEDIUM TEXT
   ========================================================= */

.skeleton-about .skeleton-text.medium {

    width: 75%;
}


/* =========================================================
   ABOUT - SHORT TEXT
   ========================================================= */

.skeleton-about .skeleton-text.short {

    width: 50%;

    margin-bottom: 35px;
}


/* =========================================================
   02. PROJECT LIST SKELETON
   ========================================================= */

#global-skeleton.skeleton-projects {

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    z-index: 99999;

    background: #ffffff;

    opacity: 1;
    visibility: visible;

    overflow: hidden;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}


/* =========================================================
   PROJECTS - HIDE STATE
   ========================================================= */

#global-skeleton.skeleton-projects.hide {

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   PROJECTS - GRID
   ========================================================= */

.skeleton-projects .skeleton-project-grid {

    width: 100%;
    max-width: 1440px;

    margin: 40px auto 80px;

    padding: 0 40px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;

    box-sizing: border-box;
}


/* =========================================================
   PROJECTS - CARD
   ========================================================= */

.skeleton-projects .skeleton-project-card {

    width: 100%;
}


/* =========================================================
   PROJECTS - IMAGE
   ========================================================= */

.skeleton-projects .skeleton-project-image {

    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    max-height: 280px;

    background: #eeeeee;

    border-radius: 6px;

    animation:
        skeleton-loading 1.4s infinite ease-in-out;
}


/* =========================================================
   PROJECTS - TITLE
   ========================================================= */

.skeleton-projects .skeleton-project-title {

    width: 65%;

    height: 18px;

    margin-top: 12px;

    background: #eeeeee;

    border-radius: 4px;

    animation:
        skeleton-loading 1.4s infinite ease-in-out;
}


/* =========================================================
   PROJECTS - OPTIONAL META
   ========================================================= */

.skeleton-projects .skeleton-project-meta {

    width: 45%;

    height: 12px;

    margin-top: 8px;

    background: #eeeeee;

    border-radius: 4px;

    animation:
        skeleton-loading 1.4s infinite ease-in-out;
}


/* =========================================================
   03. NEWS PAGE SKELETON
   ========================================================= */

#global-skeleton.skeleton-news {

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    z-index: 99999;

    background: #f7f7f7;

    opacity: 1;
    visibility: visible;

    overflow: hidden;

    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}


/* =========================================================
   NEWS - HIDE STATE
   ========================================================= */

#global-skeleton.skeleton-news.hide {

    opacity: 0;
    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   NEWS - CONTAINER
   ========================================================= */

.skeleton-news .skeleton-news-container {

    width: 80%;
    max-width: 1200px;

    margin: 50px auto;

    padding: 40px;

    background: #ffffff;

    border-radius: 8px;

    box-sizing: border-box;
}

/* =========================================================
   NEWS - ITEM
   ========================================================= */

.skeleton-news .skeleton-news-item {

    display: flex;

    gap: 25px;

    padding: 25px 0;

    border-bottom: 1px solid #dddddd;
}


/* =========================================================
   NEWS - IMAGE
   ========================================================= */

.skeleton-news .skeleton-news-image {

    flex: 0 0 180px;

    width: 180px;
    height: 180px;

    background: #eeeeee;

    border: 1px solid #dddddd;

    border-radius: 8px;

    animation:
        skeleton-loading 1.4s infinite ease-in-out;
}


/* =========================================================
   NEWS - CONTENT
   ========================================================= */

.skeleton-news .skeleton-news-content {

    flex: 1;

    padding-top: 2px;
}


/* =========================================================
   NEWS - ITEM TITLE
   ========================================================= */

.skeleton-news .skeleton-news-item-title {

    width: 65%;
    height: 26px;

    margin-bottom: 18px;

    background: #eeeeee;

    border-radius: 5px;

    animation:
        skeleton-loading 1.4s infinite ease-in-out;
}


/* =========================================================
   NEWS - META
   ========================================================= */

.skeleton-news .skeleton-news-meta {

    width: 25%;
    height: 14px;

    margin-bottom: 18px;

    background: #eeeeee;

    border-radius: 4px;

    animation:
        skeleton-loading 1.4s infinite ease-in-out;
}


/* =========================================================
   NEWS - DESCRIPTION
   ========================================================= */

.skeleton-news .skeleton-news-text {

    width: 100%;
    height: 14px;

    margin-bottom: 12px;

    background: #eeeeee;

    border-radius: 4px;

    animation:
        skeleton-loading 1.4s infinite ease-in-out;
}


/* =========================================================
   NEWS - DESCRIPTION MEDIUM
   ========================================================= */

.skeleton-news .skeleton-news-text.medium {

    width: 80%;
}


/* =========================================================
   NEWS - DESCRIPTION SHORT
   ========================================================= */

.skeleton-news .skeleton-news-text.short {

    width: 55%;
}


/* =========================================================
   04. GLOBAL SKELETON ANIMATION
   ========================================================= */

@keyframes skeleton-loading {

    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }

}


/* =========================================================
   05. ABOUT - TABLET
   Max Width: 991px
   ========================================================= */

@media (max-width: 991px) {

    /* =========================
       ABOUT
       ========================= */

    .skeleton-about .skeleton-wrapper {

        grid-template-columns: 1fr;

        gap: 40px;
    }


    .skeleton-about .skeleton-image {

        max-width: 420px;

        height: 500px;

        margin: 0 auto;
    }


    /* =========================
       PROJECTS
       ========================= */

    .skeleton-projects .skeleton-project-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* =========================
       NEWS
       ========================= */

    .skeleton-news .skeleton-news-container {

        width: 90%;

        padding: 30px;
    }


    .skeleton-news .skeleton-news-image {

        flex: 0 0 160px;

        width: 160px;
        height: 160px;
    }

}


/* =========================================================
   06. ABOUT - MOBILE
   Max Width: 768px
   ========================================================= */

@media (max-width: 768px) {

    /* =========================
       ABOUT
       ========================= */

    .skeleton-about .skeleton-container {

        padding-top: 100px;
    }


    .skeleton-about .skeleton-image {

        height: 400px;
    }


    .skeleton-about .skeleton-title {

        height: 42px;
    }


    .skeleton-about .skeleton-text {

        height: 14px;

        margin-bottom: 12px;
    }


    /* =========================
       NEWS
       ========================= */

    .skeleton-news .skeleton-news-container {

        width: 92%;

        margin: 30px auto;

        padding: 20px;
    }


    .skeleton-news .skeleton-news-title {

        width: 140px;

        height: 32px;

        margin-bottom: 25px;
    }


    .skeleton-news .skeleton-news-item {

        display: block;

        padding: 25px 0;
    }


    .skeleton-news .skeleton-news-image {

        width: 100%;

        height: 220px;

        margin-bottom: 20px;
    }


    .skeleton-news .skeleton-news-item-title {

        width: 80%;

        height: 22px;

        margin-bottom: 15px;
    }


    .skeleton-news .skeleton-news-meta {

        width: 35%;

        margin-bottom: 15px;
    }


    .skeleton-news .skeleton-news-text {

        height: 13px;

        margin-bottom: 10px;
    }

}


/* =========================================================
   07. PROJECTS - MOBILE
   Max Width: 640px
   ========================================================= */

@media (max-width: 640px) {

    .skeleton-projects .skeleton-project-grid {

        grid-template-columns: 1fr;

        margin: 20px auto 20px;

        padding: 0 20px;
    }


    .skeleton-projects .skeleton-project-image {

        max-height: 220px;
    }

}