.projectsSection{
    overflow-x: hidden;
    width: 100%;
    height: auto;
    background-color: #0c121c;
}
.projectSectionHeader{
    height: 80vh;
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    padding-top: 5rem;
    padding-bottom: .2em;
    font-family: Poppins, sans-serif;
    padding-left: 10rem;
    margin-bottom: 10rem;
}
.project_Section_title{
    overflow-y: hidden;
}
.projectCards{
    width: 100vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.projectCard{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw;
    height: 90vh;
    background:linear-gradient(180deg, #fe5a5a -0.34%, #0c121c);
    box-shadow: 20px 20px 40px -6px rgba(0,0,0,0.2);
    backdrop-filter: blur(7.6px);
    -webkit-backdrop-filter: blur(7.6px);
    border-radius: 20px;
    margin-bottom: 8rem;
    position: relative;

    /* transform: translateX(90%); */
}
.projectDetails{ 
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background: rgba( 255, 255, 255, 0.15 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 6.5px );
   -webkit-backdrop-filter: blur( 6.5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}
.projectDetailsLeft{
    width: 60%;
    padding: 2rem 0 0 2rem;
}
.projectTitle{
   font-size: 2rem;
   font-weight: 700;
   letter-spacing: 1px;
   color: #fdfeff;
   margin-bottom: 1rem;
}
.projectUI{
    width: 100%;
}
.projectUI img{
    width: 100%;
    height: auto;
    object-fit: contain;
}
.projectLinks{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-top: 0.5rem;
    gap: 0.5rem;
    font-size: 2rem;
    padding-left: 2rem;
}
.projectCode, .projectLink{
    cursor: pointer;
}

/*Right Side of the Project section*/
.projectDetailsRight{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}
.prpjectDescription div{
    margin-bottom: 1rem;
}
.ri-bard-fill{
    color: rgb(255 255 0);
    padding-right: 5px;
}