/* #region About header Stylings */

    .about-header {
        position: relative;
        height: calc(100vh - 120px);
        margin: 0;
        padding: 0;
        border-radius: 0px 0px 5rem 5rem;   
    }

    .about-header .img-container {
        position: relative;
        width: 80%;
        height: auto;
        aspect-ratio: 1 / 1;
        padding: 10px;
        box-shadow: 0px 0px 10px var(--def-shadow-clr);
        border-radius: 50%;
        backdrop-filter: blur(5px) saturate(140%) brightness(1.1);
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .about-header .img-container img {
        object-fit: contain;
        margin: 50px;
        height: calc(100% - 100px);
        width: calc(100% - 100px);
    } 

    .about-header .text-content {
        text-align: left;
        padding-right: 20%;
    }

    @media (max-width: 768px) {

        .about-header .img-container {
            width: 100%;
            height: 100%;
        }

        .about-header .text-content {
            text-align: center;
            padding: 10px;
            padding-right: 0%;
        }

        .about-header {
            position: relative;
            height: 100vh;
        }
    }

/* #endregion */

/* #region VMV */
.vmv {
    height: 100vh;
    width: 100vw;
}

.vmv-container {
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}

.vmv-header {
    width: 50%;
}

.vmv-content {
    width: 100%;
    padding-right: 20%;
}

.vmv-content img {
    width: 50%;
    height: 50%;
    object-fit: contain;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .vmv-container {
        justify-content: space-evenly;
    }

    .vmv-header {
        display: flex;
        align-items: end;
        justify-content: flex-end;
        height: 100%;
        width: 100%;
        text-align: right;
    }

    .vmv-content {
        padding: 30px 0;
        padding-left: 20px;
        height: 100%;
        width: 100%;
        text-align: right;
    }
}

/* #endregion */

.legacy {
    position: relative;
}

.legacy-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
}

.legacy-content .history {
    position: relative;
    display: flex;
    height: 70%;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
    overflow: hidden;
}

.legacy-content .history .img-container {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1; 
}

.legacy-content .history .img-container img {
    position: relative;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

@keyframes image-scale {
    from {
        transform: scale(1);
        filter: brightness(1) blur(0);
    }
    to {
        transform: scale(1.3);
        filter: brightness(0.7) blur(10px);
    }
}

.legacy-content .history .img-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    backdrop-filter: blur(2px) brightness(0.7);
    z-index: 1;
}

.legacy-content .history .text-content {
    width: 80%;
    text-align: center;
    color: var(--def-txtinvert-clr);
    line-height: 1.5;
    text-shadow: 0px 0px 10px var(--def-shadow-clr);
    z-index: 1;
    padding: 1rem;
}

.legacy-content .history .text-content .title {
    margin: 10px 0;
    font-size: 1.5rem;
}

.legacy-content .history .text-content .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px 0;
}

.legacy-content .history .text-content .content a p {
    margin: 2rem 0;
    padding: 0.5rem 1rem;
    border: 2px solid var(--def-txtinvert-clr);
}

.legacy-content .history .text-content .content a p:hover {
    background: var(--def-txtinvert-clr);
    color: var(--def-txt-clr);
    border: 2px solid var(--def-txtinvert-clr);
}

/* Responsive Styles */
@media (max-width: 768px) {

    .legacy-content .history {
        height: 100%;
        width: 100%;
        padding: 0rem 0rem;

    }

    .legacy-content .history .text-content {
        width: 100%;
        text-justify: distribute-all-lines;
    }

    .legacy-content .history .text-content .content p {
        font-size: 0.8rem;
    }
}