html,
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0px;
    height: 100%;
    user-select: none;
    background-color: #F7F8F2;
}

/* Variables */
:root {
    --winOffset: 0px;
    --titlesTopOffset: 0px;
    --projectLabelTopOffset: 0px;

    /* Font families */
    --font-main: 'Inter', sans-serif;
    --font-serif: 'Source Serif Pro', serif;
}

/* ====================================================================== *
                            GLOBAL STYLES
* ====================================================================== */

.slide-pagee {
    transform: translateX(var(--winOffset));
}

.main-container {
    padding: 0px;
    background: #ffffff;
    width: 100%;
}

.page {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100%;
    /*width: calc(100% - var(--pageOffset));*/
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #F7F8F2;
    box-sizing: border-box;
    transition: all 1s;
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    overflow: hidden;
    /*
    background-image: url("../img/UX/paperTex.jpg");
    background-size: cover; /* Resize the background image to cover the entire container */

}

.page-RHG {
    background-color: #F7F8F2;
}

.page-ABOUT {
    background-color: #FBFBF9;
}

.page-WORKS {
    background-color: #ffffff;
}

.title {
    cursor: pointer;
    font-weight: 400;
    font-size: 24px;
    width: 100vh;
    text-align: right;
    position: absolute;
    top: 100%;
    transform-origin: top left;
    transform: rotate(-90deg);
    /*border-top: 1px solid rgb(0, 0, 0);
    border-bottom: 1px solid rgb(0, 0, 0);*/
    /*transition: all 0.1s;*/
    opacity: 1;
    transition: all 0.4s ease;
}

.title-span {

    margin: 0;
    position: absolute;
    right: 0;
    padding-right: 10px;
    padding-left: 40px;
    z-index: 10;
}

.title-active {
    font-weight: 700;
}

.title:hover {
    font-weight: 700;
    color: #fff;
    background-color: #1A1A1A;
}

.title:hover~.lottie path {
    fill: #fff;
}

.content {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 0;
    margin: 0;
}

/*
.title h2 {
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
    top: 50%;
    right: 0;

    transform: translateY(-50%);
    font-weight: 400;
    font-size: 24px;
    background-color: #ffffff;
}

.active,
.title h2:hover {
    font-weight: 600;
}
*/

/* ====================================================================== *
                HOME PAGE
* ====================================================================== */

.container-fx-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "grid-cell";
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container-fx-grid-cell {
    grid-area: grid-cell;
    width: 100%;
    height: 100%;
}

.home-content-container {

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    height: 100%;
}

.home-content {
    flex: 0 1 auto;
    align-self: center;
}

.home-content img {
    max-width: 100%;
}

.lottie {
    width: 55px;
    height: auto;
    pointer-events: none;
    padding-top: 5px;
    padding-left: 5px;
    /*position: absolute;*/
    z-index: 5;
}

.home-title {
    font-family: var(--font-serif);
    font-weight: 200;
    font-size: 30px;
    position: absolute;
    left: 0%;
    top: 0%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home-title-inner {

    border-bottom: 1px solid #1A1A1A;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.title-footer {
    width: 55px;
    height: 100%;
    padding: 0;
    position: absolute;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    pointer-events: none;

}

.title-footer-inner {

    width: 40px;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;

}

.title-footer-inner-icon {
    pointer-events: all;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
}

.title-footer-inner-icon-inner {
    width: 100%;
    height: 100%;
    padding: 30% 20% 30% 20%;
    opacity: 0.75;
    transition: all .2s ease-in-out;
    display: inline-flex;
    align-items: center;

}

.title-footer-inner-icon-inner img {
    width: 75%;
    height: 100%;
    object-fit: contain;
}

.title-footer-inner-icon:hover .title-footer-inner-icon-inner {
    padding: 10% 15% 10% 15%;
    margin-top: 5px;
    margin-bottom: 20px;
    /*opacity: 1; */
}

.image-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* animation purposes */

.glyph {
  display: inline-block;
  padding-right: 1px;
  /* No transition here */
}
.glyph.active {
  transition: transform 0.4s linear;
  transform: rotate(1turn) scale(1.0);
  z-index: 1;
}

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

.about-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.about-flex-cont {

    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
    height: auto;
    width: 100%;
}

.about-flex-cont-top {
    height: 30%;
    padding-top: 50px;
    padding-bottom: 20px;
}

.about-line-horiz {
    max-width: 1280px;
    width: 100%;

    border-bottom: 1px solid #1A1A1A;
}

.about-flex-cont-bottom {
    height: 70%;
    margin-bottom: 20px;
}

/* inner flex containers */
.about-flex-cont-inner {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    height: 100%;
    width: 100%;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.about-flex-cont-inner::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.about-overflow-y {
    overflow-y: auto;
}

.about-bottom-line {
    height: 100%;
    border-right: 1px solid #1A1A1A;
}

.about-left {
    padding-left: 20px;
    padding-right: 20px;
    max-width: calc(1280px * 3/10);
}

.about-left-sticky {
    position: sticky;
    align-self: flex-start;
    top: 0;
    overflow-y: auto;
}

.about-right {
    padding-left: 20px;
    padding-right: 20px;
    max-width: calc(1280px *7/10);
}

/* content classes */

.about-left-top-content {
    text-align: end;
    line-height: 48px;
    font-size: 48px;
    font-weight: 300;
}

.about-left-top-content img {
    /* Maintain aspect ratio */
    max-height: 80%;
    max-width: 80%;
    object-fit: fill;
}

.about-right-top-content {
    font-size: 18px;
    line-height: 30px;
    font-weight: 300;
}

.about-left-bottom-content {
    text-align: end;
    line-height: 2em;
    font-weight: 300;
}

.about-left-bottom-content:first-child {

    margin-top: 50px;
}

.about-right-bottom-content {
    text-align: right;
    font-size: 18px;
    line-height: 30px;
    border-left: 10px solid #1A1A1A;
    padding-top: 20px;
}

/* about table classes */

.table {
    width: 100%;
    max-width: 100%;
    /* prevent accidental max‑width constraints */
    display: flex;
    flex-direction: column;
    font-family: var(--font-main);
    text-align: left;
}

.title-row {
    padding-left: 20px;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    width: 100%;
    color: #fff;
    background: #1A1A1A;
}

/* ----- DATA ROWS ----- */
.table-row {
    display: flex;
    width: 100%;
    color: #1A1A1A;
    background: transparent;
    border-bottom: 1px solid #c4c4c4;
    cursor: pointer;
}

.table-row:hover {
    background-color: #F15A25;
    /* hover background */
    color: #fff;
    /* optional hover text color */
}

.table-cell {
    flex: 1 1 0;
    padding: 0.75em;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-cell-bold {
    font-weight: 600;
}

.row.expanded {
    background: transparent;
    color: #1A1A1A;
}

/* ----- DETAIL ROW ----- */
.detail-row {
    width: 100%;
    font-size: 15px;
    padding: 5px;
    font-weight: 300;
    color: #F15A25;
}

.detail-wrapper {
    max-height: 0;
    overflow: hidden;
    padding: 5px;
    transition: max-height .3s, padding .3s;
    background: #fafafa;
}

.detail-wrapper.open {
    max-height: 200px;
    padding: 5px;
    overflow-y: auto;
}

.detail-wrapper p {
    margin: 0;
    font-style: italic;
    color: #555;
}

/* ----- MOBILE (≤600 px) ----- */
@media (max-width:600px) {
    .table-row {
        flex-direction: column;
        align-items: flex-start;
        border: 1px solid #ddd;
        margin-bottom: 0.5em;
    }

    .table-cell {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #eee;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .table-cell:last-child {
        border-bottom: none;
    }

    .table-cell::before {
        content: attr(data-label) ": ";
        font-weight: bold;
        color: #444;
    }
}


.awards-content:hover,
table.cvTable tr:hover {
    background-color: #F15A25;
    color: #ffffff;
    border-bottom: 1px solid #F15A25;
}

table.cvTable:first-child {
    padding-top: 50px;
}

table.cvTable td:last-child {
    font-weight: 600;
}

table.cvTable td,
table.cvTable th {
    display: table-cell;
    line-height: 20px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
    /* table cell weird-fix to make the content centered */
    width: 600px;
}

.awards {
    display: flex;
    flex-direction: row;
    justify-items: flex-start;
    width: 100%;

    padding-bottom: 50px;
}

.awards-title {
    padding-left: 20px;
    font-size: 18px;
    font-weight: 300;
    border-bottom: 20px solid #1A1A1A;
    box-sizing: border-box;
}

.awards-content {
    display: block;
    padding-left: 20px;
    font-size: 18px;
    line-height: 30px;
    font-weight: 600;
}

/* ====================================================================== *
                WORKS PAGE
* ====================================================================== */

.works-container {

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
    background-color: #fff;
}

.works-container-title {

    width: 100%;
    height: var(--titlesTopOffset);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    pointer-events: none;
    z-index: 10;
    overflow-x: hidden;
    padding-left: 20px;
    padding-right: 20px;
}

.works-container-title-inner {
    max-width: 1280px;
    width: 100%;
    font-size: 48px;
    font-weight: 300;
    letter-spacing: -2px;
}

.works-container-subtitle-inner {
    justify-self: flex-end;
    max-width: 1280px;
    width: 100%;
    font-size: 18px;
    font-weight: 300;
}

.works-container-ticker {

    height: auto;
    font-family: var(--font-serif);
    font-weight: 200;
    font-size: 30px;
    line-height: 50px;
    background-color: #1A1A1A;
    color: #fff;
    white-space: nowrap;
    text-align: left;
    align-self: flex-start;
    justify-self: flex-start;

}

/* ====================================== *
             VIDEO HTML5
* ======================================= */
video::-webkit-media-controls-panel {
    background-image: url("../img/UX/video_controls_BG.jpg");
    filter: brightness(1);
    opacity: 0.5;

    background-image: none !important;
    opacity: 1 !important;
    filter: none !important;
}

video::-webkit-media-controls-timeline {
    box-shadow: none !important;
    display: none;
}

.project-video-wrapper {
    position: relative;
    width: 100%;
    display: block;
}

.project-play-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: rgba(255, 255, 255, 0.0);
    /* transparent, or use a slight overlay if you want */
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s;
    opacity: 1;
    padding: 0;
}

.project-play-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    /* subtle hover effect */
}

.project-play-btn img {
    width: 100px;
    height: 100px;
    pointer-events: none;
    /* ensures clicking the icon triggers the button */
}

/* ================================================== *
                     MEDIA BOXES
* =================================================== */
.grid-container {

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    padding-left: 20px;
    padding-right: 20px;
}

.grid-adjust {

    flex: 0 1 auto;
    align-self: auto;
    width: 100%;
    max-width: 1280px;

}

.grid-banner {
    margin-bottom: 50px;
    margin-top: 50px;
    flex: 0 1 auto;
    align-self: auto;
    cursor: pointer;
    width: 100%;
    max-width: 1280px;
    object-fit: fill;
}


/* ====================================================================== *
                PROJECT
* ====================================================================== */

.project-page {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.project-content {

    width: 100%;
    height: 100%;

    position: absolute;
    z-index: 3;
    background-color: #ffffff;
}

.project-label {
    cursor: pointer;
    top: var(--projectLabelTopOffset);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    align-content: space-around;

    font-size: 18px;
    position: absolute;

    transform-origin: top left;
    transform: rotate(-90deg);

    z-index: 1;
    /*border-left: 1px solid rgb(0, 0, 0);*/
    border-right: 1px solid #1A1A1A;
    background-color: #ffffff;

}

.project-label-inner {

    display: block;
    flex-grow: 0;
    flex-shrink: 1;

    font-size: 18px;
    font-weight: 200;
    text-align: right;
    padding-left: 20px;
}

/* animation purposes */
.works-container-title-inner .letter {
    display: inline-block;
    line-height: 1em;
}

.project-label-btn {

    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    margin-right: 20px;
    margin-left: 15px;

}

.project-label-btn img {
    display: block;
    max-width: 22px;
    max-width: 22px;

}

.project-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    border-bottom: 1px solid #1A1A1A;
    overflow-x: hidden;

}

.project-title-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;

}

.project-title-inner-container {
    max-width: 1280px;
    width: 100%;
    height: var(--titlesTopOffset);
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;

    border-bottom: 1px solid #1A1A1A;

}

.c-title-inner {
    font-size: 48px;
    font-weight: 300;
    text-align: left;
    pointer-events: none;
}

/* animation purposes */
.c-title-inner .letter {
    display: inline-block;
    line-height: 1em;
}

.c-title-next {
    font-size: 20px;
    text-align: right;
    font-weight: 300;
    padding-left: 5px;
    background-color: #C3FF00;
    cursor: pointer;
    align-self: flex-end;
}

.c-title-next:hover {
    background-color: #1A1A1A;
    color: #fff;
    transition: background 0.2s, color 0.2s;
}

.project-content-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
}

.project-content-inner-container {
    width: 100%;
    max-width: 1280px;
    height: 100%;
}

.c-content-copy {
    padding-top: 20px;
    font-weight: 300;
}

.project-filter-container {
    transform-origin: top left;
    transform: rotate(-90deg);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-start;
    font-size: 14px;
    position: absolute;
    z-index: -1;
    top: 100%;
    align-self: flex-end;
    height: calc(1280px + 20px);
    padding-left: 100px;
}

.project-filter {
    align-self: flex-end;
    padding-right: 10px;

}

.c-content-inner {
    height: 100%;
    padding-top: 50px;
    /* keep this class - animation purposes */
}

.c-content-footer {

    width: 100%;
    height: 100px;
}

/* ====================================================================== *
                            SCROLLBAR STYLE
* ====================================================================== */

/* scrollbar width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #999;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #777;
}

/* ====================================================================== *
                            MEDIA QUERIES
* ====================================================================== */



@media screen and (max-width: 480px) {
    .about-right {
        padding-left: 0;
        width: 100%;
    }

    .about-container {
        overflow-y: scroll;
        height: 100%;
    }

    .about-flex-cont-inner {
        justify-content: flex-start;
        flex-wrap: wrap;
        height: 100%;
    }

    .about-right-top-content {
        padding: 0;
        margin: 0;
    }

    table.cvTable {
        width: 100%;
    }

    table.cvTable tr {
        display: flex;
        flex-direction: column-reverse;
        align-items: stretch;
        align-content: normal;
        padding-bottom: 10px;
        width: 100%;
    }

    .cv-table-title span {
        padding-left: 5px;
    }

    table.cvTable td,
    table.cvTable th {
        display: block;
        line-height: 15px;
        padding-left: 0px;
        padding-top: 10px;
        padding-bottom: 5px;
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: auto;
        align-self: stretch;
        width: 100%;
    }

    .awards {
        flex-direction: column;
    }

    .awards-title {
        padding-left: 0px;
    }

    .awards-content {
        padding-left: 0px;
    }
}

@media screen and (max-width: 768px) {
   
    .project-play-btn img {
        width: 60px !important;
        height: 60px !important;
    }

    .home-title-inner {
        display: none !important;
    }
    /* project images */
    .c-content-inner img {
        width: 100%;
    }


    /* about section */

    .about-bottom-line,
    .about-left-bottom-content {
        display: none;
    }

    .about-right {
        padding-left: 0;
        padding-right: 5px;
        width: 100%;
    }

    .about-left-top-content {
        display: none;
        margin: 0;
        padding: 0;
    }

    .about-flex-cont-inner {
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-left: 5px;
    }


    .about-flex-cont-top {
        height: 100%;
        padding-top: 20px;

    }

    .about-line-horiz {
        display: none;
    }

    /* WORKS SECTION */
    .works-container-title-inner,
    .c-title-inner {
        font-size: 30px;
    }

    .c-title-next {
        display: none;
    }
}

/* ====================================================================== *
                            LOADER & SPINNER
* ====================================================================== */
#custom-page-loader {
    all: initial;
    position: fixed !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none;
    z-index: 99999 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.glyph-spinner {
    width: 64px;
    height: 64px;
    display: block;
    margin: auto;
    filter: invert(0.8);
    animation: glyph-spin 1s linear infinite;
    /* Center rotation axis */
    transform-origin: 50% 50%;
}

@keyframes glyph-spin {
    100% {
        transform: rotate(360deg);
    }
}

/* ====================================================================== *
                            SKELETON LOADER
* ====================================================================== */
.skeleton-loader {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    /* 16:9 aspect ratio, adjust as needed */
    background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 2s infinite linear;
    position: relative;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}