nav {
    position: relative;
    height: 550px;
    z-index: 1;
    overflow: hidden;
}

/* Background image */
nav::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/admin.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -2;
}

/* Gradient overlay */
nav::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
    background-image: url("../images/TRSC.png");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    opacity: 1; /* initial dim */
    transition: opacity 1.5s ease-in-out;
}

nav:hover::after {
    opacity: 0; /* removes dim overlay on hover */
         
}
 
@media (min-width: 600px) and (max-width: 1024px) {
    nav {         
        height: 300px;        
    }
}
/* Move blocks further left and shrink more on extra small screens */
@media (max-width: 600px) {
    nav {
        height: 200px;
    }
}