@keyframes touch-anim {
    0% {
        left: 0;
    }
    100% {
        left: -5vw;
    }
}
@keyframes blink-anim {
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.title span img {
    height: 6.29vh;
    width: auto;
}
.project-container {
    position: absolute;
    overflow-x: scroll;
    width: 100%;
    height: 81.57vh;
    top: 18.51vh;
    left: 0;
    z-index: 7;
}
.project-container::-webkit-scrollbar {
    display: none;
}
.projects {
    position: absolute;
    left: 42.86vw;
    top: 0;
    display: flex;
    align-items: center;
}
.projects .logo, .project-bar p {
    animation: blink-anim 2s infinite;
}
.projects .logo img {
    position: relative;
    width: 4.37vw;
    animation: touch-anim 2s infinite cubic-bezier(.88,0,.47,1);
}
.project-item {
    width: 20.79vw;
    height: 76.29vh;
    z-index: 6;
}
.project-bar {
    width: 25.72vw;
    height: 9.90vh;
    margin-right: -14.4vw;
    clip-path: polygon(20.24% 0, 100% 0, 100% 100%, 0 100%);
}
.project-bar p {
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 20.24%;
    text-transform: uppercase;
    font-size: 1.94vh;
    color: #ffffff!important;
}
.project {
    width: 100%;
    height: 100%;
    clip-path: polygon(27.25% 0, 100% 0, 100% 84.65%, 71.75% 100%, 0 100%, 0 14.75%);
}
.project img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 6;
}
.project-footer {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 7%;
    word-break: break-word;
    width: 100%;
    height: 7.9%;
    margin-top: -16.9%;
    font-size: 1.37vh;
    text-transform: uppercase;
    z-index: 6;
    bottom: 0;
    text-align: center;
}
.details-footer-container {
    display: flex;
}
.detail-footer {
    position: relative;
    display: flex;
    text-transform: uppercase;
    width: 6.88vw!important;
    height: 5.81vh;
    margin-top: -14.5%;
    left: 13.59vw;
    z-index: 8;
    font-size: 2.31vh;
    clip-path: polygon(0 0, 100% 0, 58.41% 100%, 0 100%);
}
.details-footer-container .detail-footer:nth-child(2) {
    clip-path: polygon(40.7% 0, 100% 0, 100% 100%, 0 100%);
    margin-left: -2vw;
}
.detail-footer p {
    width: 3.48vw;
    display: flex;
    justify-content: end;
    flex-wrap: wrap;
    text-align: end;
}
.detail-footer span {
    width: 100%;
    position: relative;
    font-size: 1.48vh;
    left: 0;
}
.details-footer-container .detail-footer p {
    width: 3.8vw;
    display: flex;
    justify-content: space-between;
    padding-left: 0.46vw;
    line-height: 1.4;
}
.details-footer-container .detail-footer:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
}
.details-footer-container .detail-footer:nth-child(2) p {
    padding-left: 1.97vw;   
}
.details-footer-container .detail-footer span {
    width: auto;
    line-height: 1.7;
}
.details-footer-container img {
    position: absolute;
    height: 1.75vh;
    left: 1.82vw;
    bottom: 0.18vh;
}
.details-footer-container .detail-footer:nth-child(2) img {
    width: 1.35vw;
    height: auto;
    top: 0.18vh;
    left: 4.06vw;
}
.two-footer {
    left: 10.93vw;
}
.foreground * {
    position: absolute;
}
.foreground h2 {
    width: 31.25vw;
    text-transform: uppercase;
    font-size: 4.81vh;
    display: flex;
    color: #C2A39A!important;
}
.main-text {
    top: 27.12vh;
    left: 15.41vw;
}
.main-text h2:nth-child(1) span {
    left: 7.39vw;
    bottom: -7.22vh;
}
.main-text h2:nth-child(2) {
    top: 14.63vh;
    left: -2.76vw;
}
.main-text h2:nth-child(2) span {
    left: 5.2vw;
    bottom: -7.22vh;
}
.foreground p {
    position: absolute;
    left: 7.65vw;
    bottom: 28.24vh;
    font-size: 4.25vh;
    line-height: 125%;
    color: #C2A39A!important;
}