/* Existing CSS */

.workRow {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative; /* Added for overlay positioning */
}

.workImg {
    max-height: 100px;
    max-width: 80%;
    transition: transform 0.3s ease; /* Added for animation */
}

/* Background styles for work rows */
.skyy {
    background-image: url("../img/work/SYV_strip.jpg");
    background-position: center;
}

.oneStep {
    background-image: url("../img/work/oss_strip.png");
    background-position: center;
}

.wetOnes {
    background: linear-gradient(45deg, #008df6, #007fde);
}

.getClean {
    background-image: url("../img/work/gwoc_strip.png");
    background-position: center;
}

.hydroFive {
    background-image: url("../img/work/hydro_strip.png");
    background-position: center;
}

.playtex {
    background-image: url("../img/work/psport_strip.png");
    background-position: center;
}

.firstTimeShave {
    background: linear-gradient(45deg, #a243b0, #dc7cc4, #e4a0a3);
}

.rise {
    background: #edf766;
}

.workBody {
    background: linear-gradient(to right, #098785, #067775);
}

/* Added CSS for "COMING SOON" overlay */
.workRow.comingSoon::after {
    content: "COMING SOON";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.workRow.comingSoon:hover::after {
    opacity: 1;
}

/* Animation for active rows */
.workRow:not(.comingSoon):hover .workImg {
    transform: scale(1.05);
}

/* Existing CSS for password fields (unchanged) */
.passwordError {
    text-align: center;
    color: #ffffff;
    background-color: lightcoral;
    height: 50px;
    line-height: 50px;
    margin-bottom: 20px;
    width: 310px;
}

.passwordInput {
    display: flex;
    flex-direction: row;
    height: 50px;
    padding: 0;
    margin: 40px 0 0 0;
}

.passwordField {
    width: 250px;
    padding: 0 0 0 10px;
    font-size: 25px;
    height: 50px;
    line-height: 50px;
    border: none;
    margin: 0;
}

.passwordSubmit {
    background-color: #89c1c0;
    color: white;
    border: none;
    margin: 0;
    padding: 0;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 50px;
}

.passwordLock {
    background-image: url("../img/work/lock.svg");
    background-position: center;
    height: 75px;
    background-repeat: no-repeat;
}