.project-page {
    padding: 140px 40px;
}

body {
    background: linear-gradient(
        to right,
        #040616 0%,
        #0D133D 100%
    );
}


.project-wrapper {
    padding: 80px;
}

.project-layout {
    display: flex;
    gap: 80px;
    align-items: center;
}

.left-column {
    flex: 1;
}



.project-text {
    max-width: 520px;
}


.project-text h1 {
    font-family: "Playfair", serif;
    font-size: 56px;
    font-weight: 500;
    text-align: left;
}


.subtitle{
    font-family: "Inter", sans-serif;
    font-size: 18px;
    margin-top: 10px;
}


.project-text p {
    font-family: "Inter", sans-serif;
    line-height: 1.6;
    margin-top: 20px;
    text-align: justify;
}



.right-column {
    flex: 2;
    position: relative;
    overflow: hidden;
}

@keyframes project-textFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-text {
    opacity: 0;
    transform: translateY(60px);
    animation: homeFadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}




.image-scroll{
    display:flex;
    gap:40px;
    overflow-x:auto;
    overflow-y: hidden;
    scroll-behavior:smooth;
}

.image-scroll img{
    max-width:550px;
    height: auto;
    flex-shrink:0;
}




.video-link {
    display: inline-block;
    margin-top: 20px;
    color: white;
    text-decoration: underline;
    transition: opacity .3s ease;
}

.video-link:hover {
    opacity: .6;
}






.right-column::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100px;
    height:100%;
    pointer-events:none;
}

@keyframes image-scrollFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.image-scroll {
    opacity: 0;
    transform: translateY(60px);
    animation: homeFadeUp 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.3s;
}