/* Third Content */

:root {
--trda-content-bg: linear-gradient(240deg, rgba(83, 160, 32), #2fa45e);
--trda-accent: rgba(230, 220, 245);
}

.third-content {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* First Half */

.trd-academic {
    background: url(/resource/home/images/trda-legacy-background.jpg);
    background-position: left;
    background-size: cover ;

    overflow: hidden;
    min-height: 50vh;
    position: relative;
    display: grid;
}

.trda-legacy {
    z-index: 0;
    position: absolute;
    left: 1.5rem;
    top: 2rem;
    display: flex;
    align-items: center;
    gap: .2em;
    transition: position 600ms ease, left 600ms ease, top 600ms ease, bottom 600ms ease;
}
.trda-legacy span {
    font-family: 'Material Icons';
    font-size: 2em;
}
.trda-legacy h1 {
    font-family: 'Poppins';
    font-size: 2em;
}

.trda-content {
    background: var(--trda-content-bg);

    position: absolute;
    bottom: -100%;
    z-index: 1;
    height: 100%;
    width: 100%;
    padding: 2rem;
    font-family: 'Poppins';
    transition: position 700ms ease, bottom 700ms ease;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: auto;
}

.trda-text {
    max-height: max-content;
}
#trda-title {
    font-size: 3rem; 
    font-weight: bolder; 
    pointer-events: none;
}
#trda-division {
    color: #f0f0f0;
    font-size: 1rem;
    font-style: oblique;
    text-transform: uppercase;
    margin-bottom: 20px;
    pointer-events: none;
}
#trda-description {
    font-size: 1.2rem;
    margin-bottom: 50px;
}
.trda-links {
    display: flex;
    gap: 1em;
}
.trda-content a {
    font-size: 1.3rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--trda-accent);
    border: 3px solid var(--trda-accent); 
    border-radius: 10px;
    padding: 9px 15px;
    background-color: rgba(0,0,0,0);
    transition: .3s ease;
}
.trda-content a:hover {
    color: #2fa45e;
    background-color: var(--trda-accent);

}

/* HOVER ANIMATION */

.trd-academic:hover .trda-legacy {
    top: 70%;
}
.trd-academic:hover .trda-content{
    position: absolute;
    bottom: -0%;
}