.navbar .menu-icon {
    background:#6A6BF4 !important;
}

.hero {
    height:90vh;
    background-image:linear-gradient(rgba(0, 0, 0, 0.3),
    rgba(0, 0, 0, 0.3)), url('../../images/Classroom-shots/0F7A1294.jpg');
    background-position: 50% 30%;
    background-repeat: no-repeat;
    background-size: 100%;
    color:white;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    padding: 0 5vw;
    padding-bottom:5vh;
}

.hero .introduction {
    position:absolute;
    top:5vh;
    left:50%;
    transform:translateX(-50%);
}

.hero .vision {
    padding-top:20vh;
    padding-left:55vw;
    padding-right:8vw;
}

.hero h1 {
    font-size:7vw;
    font-weight:400;
    line-height:1;
    letter-spacing:-5px;
    margin-top:10vh;
    font-family:'Space Mono', monospace;
    text-transform:uppercase;
    margin-bottom:0;
}

.hero .title-container {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    width:90vw;
}

.hero a img {
    height:6vw;
}

.hero a {
    position:relative;
    overflow:hidden;
    display:inline-block;
    border-radius:100%;
    width:max-content;
    aspect-ratio:1/1;
    margin-bottom:1vh;
}

.main-content {
    padding:15vh 5vw;
    display:flex;
    gap:3vw;
    width:100%;
}

.main-content .text {
    display: flex;
    flex-direction: column;
    gap:8vh;
    width:90%;
}

.main-content p {
    font-size:var(--new-heading-text-size);
}

.main-content .sidebar {
    width:10%;
    position: sticky;
    top: 0;
    height: fit-content;
    z-index: 5;
}

.main-content .sidebar h2 {
    margin-top:0.5vh;
}

/* .navbar {
    background:rgba(255,255,255,0.4);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255,255,255,0.15);
} */

.hero a {
    z-index:2;
}

.hero a::before {
    z-index:-1;
    background:white;
}

.about-programs h1 {
    background: linear-gradient(135deg, #6A6BF4, #5184F5);
    /* Clip the background to the text */
    -webkit-background-clip: text;
    background-clip: text;
    /* Make the text transparent so the background shows through */
    color: transparent;
    font-size:3em;
    margin-bottom:5vh;
}

.about-programs {
    padding: 5vh 5vw;
    padding-bottom:10vh;
}

.about-description {
    display:flex;
    gap:3vw;
    width:100%;
}

.about-description .left-column img {
    width:100%;
    height:55vh;
    object-fit:cover;
    border-radius:7px;
}

.about-description > div {
    display:flex;
    flex-direction:column;
    gap:4vh;
}

.about-description .right-column {
    justify-content: space-between;
}

.about-description .paragraph-text p {
    font-size:var(--new-main-text-size);
}

.about-description .paragraph-text {
    display:flex;
    flex-direction:column;
    gap:3vh;
    margin-top:0.5vh;
}

/* .about-description > div {
    flex:1 1 0;
} */

.about-description .left-column p {
    font-size:var(--new-heading-text-size);
}

.about-programs .image-caption-container {
    display: flex;
    gap:3vw;
    justify-content:space-between;
}

.about-programs .rainbow-star {
    width:4vw;
    min-width:50px;
}

.about-programs .image-caption {
    width:40%;
}

.about-programs .effect-container .grid-effect {
    height:55vh;
}

.skills-grid {
    padding:10vh 5vw;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(500px, 1fr));
    grid-row-gap:7vh;
    grid-column-gap:3vw;
}

.skills-grid img {
    width:100%;
    height:40vh;
    object-fit:cover;
    border-radius:7px;
}

.skills-cell {
    display:flex;
    flex-direction:column;
    gap:1.5vh;
}

.skills-grid h2 {
    font-family:'DM Sans', sans-serif;
    text-transform:initial;
    font-size:var(--new-heading-text-size);
    color:black;
    margin-top:1.5vh;
}

.skills-grid .skills-title {
    font-family:'Space Mono', monospace;
    text-transform:uppercase;
    font-size:var(--new-main-text-size);
    color:#6A6BF4;
    width:33%;
    margin-top:0;
}

.skills-grid .skills-cell:first-child {
    justify-content: space-between;
}

.skills-grid .ascii {
    width:50%;
}

@media screen and (max-width:1300px) {
    .hero a {
        margin-bottom:0;
        display:none;
    }
    .hero {
        background-size:cover !important;
        height:90vh;
    }

    .hero h1 {
        font-size:14vw;
    }

        .projects {
        display:none;
    }
}

@media screen and (max-width:768px) {
    .main-content, .about-description {
        flex-direction: column;
    }

    .main-content .sidebar {
        width:100%;
    }

    .main-content {
        padding:10vh 5vw;
    }

    .about-programs h1 {
        font-size:var(--new-heading-text-size);
        margin-bottom:3vh;
    }

    .about-programs img {
        height:40vh !important;
    }

    .about-description {
        gap:3vh;
    }

    .about-programs .image-caption-container {
        display:none;
    }

    .skills-grid {
        display:flex;
        flex-direction:column;
        gap:3vh;
        padding: 5vh 5vw;
    }

    .skills-cell {
        margin-bottom:4vh;
    }

    .skills-cell:first-child {
        margin-bottom:0;
    }

    .skills-cell:last-child {
        margin-bottom:0;
    }

    .skills-grid .skills-title {
        width:100%;
    }

    .skills-grid .ascii {
        display:none;
    }

    .about-programs .effect-container .grid-effect {
        height:40vh;
    }
}