:root {
    --about-page-main: #22052f;
    --about-page-second: #7f2c57;
    --about-page-third: #c13a5f;
    --about-page-fourth: #ff6a4f;
    --about-page-shadow: #11021a;
}



.about-page {
    position: absolute;
    font-family: "Inter", sans-serif;
    color: var(--about-page-main);
    margin: 0;
    top: 0;
    left: 0;
    /* width: 100%; */
    background-image: radial-gradient(var(--about-page-second), var(--about-page-third));
    z-index: 1;
    overflow: hidden;
    mask-image: url('#maskAbout');
    -webkit-mask-image: url('#maskAbout');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-mode: alpha;
    will-change: opacity;
    text-shadow: 0 0 2ex var(--about-page-shadow), 0 0 2px var(--about-page-shadow);
    /* Performance hint */
}

.about-page .container {
    max-width: 1200px;
    min-height: 100%;
    margin: 0 auto;
    display: grid;
    opacity: 0.7;
    grid-auto-columns: 1fr;
    grid-template-rows: auto 1fr 1fr 1fr 1fr auto;

    grid-template-areas:
        "about-header about-header about-header about-header about-header"
        "about-page-main about-page-main about-page-main about-page-main about-page-main"
        "about-page-main about-page-main about-page-main about-page-main about-page-main"
        "about-page-main about-page-main about-page-main about-page-main about-page-main"
        "about-page-main about-page-main about-page-main about-page-main about-page-main"

        "footer footer footer footer footer";
    grid-gap: 10px;


    padding: 10px;

}

.about-page header {
    grid-area: about-header;
    font-family: "Kanit", sans-serif;
}

#hamburger-icon-about>span {
    width: 100%;
    height: 0.4rem;
    border-radius: 0.2rem;
    background-color: var(--about-page-main);

    box-shadow: 0.05rem 0.2rem var(--about-page-second);

}

.about-page i {
    color: var(--about-page-main);


}

.about-page .info i {
    color: var(--about-page-main);
}

.about-page i:hover {
    color: var(--about-page-fourth);
}

.about-page a::after {
    background-color: var(--about-page-main);
}

.about-page a::before {
    background-color: var(--about-page-main);
}





.about-page header {
    grid-area: about-header;
}

.about-page-main {
    display: flex;
    gap: 5rem;
    flex-direction: column;
    grid-area: about-page-main;
    margin-top: 5rem;
    padding: 0 5rem;

}

.intro {
    font-size: 2rem;
    margin-bottom: 3rem;
}

.about-page-main .span-text {

    font-size: 1.6rem;

}


.about-page-main>div {

    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.about-page-main-top>div {
    flex: 1;

}

.about-page-main-top:last-child {
    padding: 5rem;
}

.about-page-main-bottom div:nth-child(1) {
    flex: 1 1 48%;
}

.about-page-main-bottom div:nth-child(2) {
    padding-left: 3.5rem;
    flex: 1 1 48%;
}

.about-page-main-bottom div:last-child {
    flex: 1 1 100%;
    margin-top: 5rem;
}

.zuerich {
    max-width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 1rem;
}



.about-page-main-top-image {
    align-self: flex-start;

    position: relative;
    max-height: min-content;
}

.about-page-main-top-image img {

    width: 100%;
    height: auto;
}

.about-page-main-bottom-image h1 {
    font-size: 35rem;
    color: var(--about-page-main);
    margin: 0;
    padding: 0;
}

.zuerich-bottom {
    position: absolute;
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    left: 0;
    z-index: -1;
    max-height: inherit;

}

.zuerich-top {
    position: relative;
    filter: none;
    top: 0;
    left: 0;
    z-index: 1;
    clip-path: circle(50px at var(--x) var(--y));
    transition: clip-path 0.2s ease;
}

.about-page a {
    text-decoration: none;
    color: var(--about-page-main);
}

.hover-text {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
    gap: 1rem;
}

.intro {
    font-size: 3rem;

}

.hover-text h3 {
    margin: 0;


}

.hover-text:first-child {
    margin-right: 5rem;
}




.repellant {
    display: inline-block;
    transition: transform 0.3s ease-out;
}

.span-text {


    word-wrap: break-word;

}



.word {
    display: inline-block;
    /* Force words to wrap as units */
    white-space: nowrap;
    /* Prevent word breaks */
    margin-right: 8px;
    /* Add space between words */
}



@media screen and (max-width: 900px) {
    .about-page .container {
        padding: 0;

    }

    .about-page-main {
        padding: 0;
        gap: 10rem;
    }

    .about-page-main-bottom-image h1 {
        font-size: 25rem;

    }

    .hover-text:nth-child(-n+2) {
        margin: 0;
        gap: 0.5rem;
    }

    .about-page-main-bottom .hover-text:nth-child(-n+2) {
        padding: 0;
        margin-top: 7rem;
        flex: 1 1 100%;

    }

    .about-page-main-bottom .hover-text:last-child {
        margin-top: 2rem;
    }

    .about-page-main-bottom,
    .about-page-main-top {
        flex-direction: column;

        padding: 0 1rem;
    }

    .about-page-main>div {
        gap: 5rem;
        ;
        flex-wrap: nowrap;
    }
}