/* --- 1. SHARED STYLES (Applies to all cards S-Y-D-L-E-R) --- */
.card-s, .card-y, .card-d, .card-l, .card-e, .card-r {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

/* Common Overlay & Top Letter */
.card-s::before, .card-y::before, .card-d::before, .card-l::before, .card-e::before, .card-r::before {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.65);
    color: #FFFFFF;
    font-family: serif;
    font-size: 60px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10px;
    transition: all 0.5s ease-in-out;
    z-index: 2;
    box-sizing: border-box;
}

/* Common Bottom Text */
.card-s::after, .card-y::after, .card-d::after, .card-l::after, .card-e::after, .card-r::after {
    position: absolute;
    bottom: 10px; left: 0; width: 100%;
    color: #FFFFFF;
    text-align: center;
    font-family: serif;
    font-size: 18px;
    letter-spacing: 1px;
    transition: all 0.5s ease-in-out;
    z-index: 3;
}

/* Common Hover State */
.card-s:hover::before, .card-y:hover::before, .card-d:hover::before, .card-l:hover::before, .card-e:hover::before, .card-r:hover::before {
    font-size: 16px;
    font-family: sans-serif;
    font-weight: normal;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.85);
    text-align: center;
    padding: 15px;
}

.card-s:hover::after, .card-y:hover::after, .card-d:hover::after, .card-l:hover::after, .card-e:hover::after, .card-r:hover::after {
    opacity: 0;
    transform: translateY(20px);
}

/* --- 2. UNIQUE CONTENT --- */

/* Card S */
.card-s::before { content: 'S'; }
.card-s::after { content: 'Sportsmanship'; }
.card-s:hover::before { content: 'Being a team player and honoring others in the industry.'; }

/* Card Y */
.card-y::before { content: 'Y'; }
.card-y::after { content: 'Yielding Excellence'; }
.card-y:hover::before { content: 'Striving for excellence in every aspect.'; }

/* Card D */
.card-d::before { content: 'D'; }
.card-d::after { content: 'Dedication'; }
.card-d:hover::before { content: 'Committed to delivering outstanding results.'; }

/* Card L */
.card-l::before { content: 'L'; }
.card-l::after { content: 'Lifelong Learning'; }
.card-l:hover::before { content: 'Embracing a culture of continuous learning and growth.'; }

/* Card E */
.card-e::before { content: 'E'; }
.card-e::after { content: 'Empowerment'; }
.card-e:hover::before { content: 'Empowering individuals and organizations through technology.'; }

/* Card R */
.card-r::before { content: 'R'; }
.card-r::after { content: 'Respect'; }
.card-r:hover::before { content: 'Treating others with due regard, the way we would wish to be treated.'; }

/**/
/* The 'hover-lift' class - can be used on any element */
.hover-lift {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !important;
    cursor: pointer;
}

/* The actual hover movement */
.hover-lift:hover {
    transform: translateY(-10px); /* Moves it UP by 10 pixels */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* Adds a deep shadow for depth */
    z-index: 10; /* Ensures it stays on top of other elements while lifting */
}