.introCont span{
 
    width: 300px;
    display:inline-block;
    font-weight: 700;
    

}

.topSection .description{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: column;
    column-gap: 15px;
    margin-top: 45px;
    max-width:1440px;
}

.topSection .descriptionText{
grid-column: 3 / span 3;
}

.topSection .detailCont{
    grid-column: 2 / span 1;
    margin-top: 3px;
    }

.topSection{
    padding-top:150px;
    
}

.introCont{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: column;
    column-gap: 15px;
    position: sticky;
    top: 15px;
    max-width:1440px;
}

.introCont .desc{
    grid-column: 2 / span 4;
}

.introCont{
    color: white;
    mix-blend-mode: difference;
    z-index:1;  
}

.imageList{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: column;
    column-gap: 15px;
    margin-top: 55px;
    max-width: 1440px;
}

.imageList .projImg{
    grid-column: 3 / span 3;
    width:100%;
}



.imageList .projImg:nth-child(2n){
    grid-column: 4 / span 3;
}

.imageList > .vidControls{
    grid-column: 2 / span 1;
}

.video-cont{
position: relative;
}

#process{
    display:flex;
    flex-wrap: nowrap;
    /* width:100%; */
    height:80vh;
    margin: 0 200px;
    /* overflow: hidden; */
    box-sizing: border-box;
    
}

.processTitle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    z-index: 0;
    color: white;
    mix-blend-mode: difference;
}

#process .processImgCont{
    flex: 1;
    flex-shrink:0;
    overflow: visible;
    position: relative;
}



#process img{
    width:400px;
    position: absolute;
    transform:translate(-50%, -50%);
    left:50%;
    top: 50%;
    opacity: 0;
    pointer-events: none;
}

.processImgCont:hover img{
    opacity: 1!important;
}

.processBorder{
    border-bottom: solid 1px black;
    border-top: solid 1px black;
    margin-top: 150px;
    position: relative;

}

.imageList video{
    display: block;
    /* grid-column: 3 / span 4; */
}

.vidControls div:hover{
opacity: 0.2;
}

.vidControls div{
cursor: pointer;    
}

.video-cont:hover .vidControls.play{
    opacity: 1;
}

.vidControls {
display: flex;
gap:30px;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
color: white;
mix-blend-mode:difference;
position:absolute;
left:0;
top:0;

}

.vidControls.play{
    opacity: 0;
}



.processBar{
    height:100%;
    position:absolute;
    top:0;
    left:0;
    border-right: 1px solid black;
    opacity: 0;
}

.processBorder:hover .processBar{
    opacity: 1;
}

.footerText{
    margin-top: 150px;
}

.projectNavProj{
    /* Removed fixed positioning and related properties */
    /* position: fixed; */
    /* bottom: 10px; */
    /* left: 15px; */
    /* z-index: 11; */
    margin-top: 300px; /* Re-added margin to create space above links */
}

.projectNavProj a:hover p{
    opacity: 0.2!important; /* Re-enabled hover opacity */
}

.projectNavProj .projectLinkCont p {
    padding: 5px 10px; /* Add padding to project page links */
    display: inline-block; /* Ensure padding is applied correctly */
}