@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

#welcome-video {
    --size: 12vw;

    position: fixed;
    right: 10px;
    z-index: 10;

    width: var(--size);
    height: var(--size);

    top: calc((100vh - var(--size)) / 2);
}

@media only screen and (max-width: 992px) {
    #welcome-video {
        --size: 25vw;

        right: 0;
            
        width: var(--size);
        height: var(--size);
    
        top: calc(100vh - var(--size));
    }
}

/* Section Welcome */
#section-welcome > div {
    display: flex;
    flex-direction: row;
}

#section-welcome > div > div {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 40vw;
}

#section-welcome li {
    margin: 6px 0px;

    list-style-type: "- ";
}

#section-welcome img {
    max-width: 30vw;

    margin: auto;
}

#section-welcome > div:nth-child(2) {
    display: flex;
    justify-content: center;
    gap: 16px;

    margin-top: 4vh;
}

@media only screen and (max-width: 992px) {
    #section-welcome > div {
        flex-direction: column;
    }

    #section-welcome div > div {
        width: 80vw;

        align-items: center;
    }
}

/* Section You are ... */
#section-you-are {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

@media only screen and (max-width: 992px) {
    #section-you-are {
        flex-direction: column;
        align-items: center;
    }
}

/* Section Formation */
#section-formation > div {
    display: flex;
    flex-direction: row;
}

#section-formation > div > div {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 40vw;
}

#section-formation li {
    margin: 6px 0px;

    list-style-type: "- ";
}

#section-formation img {
    width: 30vw;
    max-width: 30vw;

    margin: auto;
}

#section-formation h4 {
    margin: 0;
}

#section-formation ul {
    margin-top: 2px;
}

#section-formation > div:nth-child(2) {
    display: flex;
    justify-content: center;
    gap: 16px;

    margin-top: 4vh;
}

#section-formation > div > div > div {
    padding-left: 4vw;
}

@media only screen and (max-width: 992px) {
    #section-formation > div {
        flex-direction: column;
    }

    #section-formation > div > div {
        width: 80vw;

        align-items: center;
    }

    #section-formation > div > div > div {
        padding-left: 8vw;
    }
}

/* Section Resources */
#section-resources > div {
    display: flex;
    flex-direction: row;
    gap: 32px;

    padding: 8vh 2vw;
}

#section-resources img {
    max-width: 35vw;
}

#section-resources > div > div {
    width: 35vw;
}

#section-resources p {
    margin-bottom: 6vh;
}

#section-resources > div > div > a {
    width: 25vw;

    margin: 2vh 5vw;
}

@media only screen and (max-width: 992px) {
    #section-resources > div {
        flex-direction: column;
    }

    #section-resources img {
        max-width: 80vw;
    }

    #section-resources > div > div {
        width: 80vw;
    }

    #section-resources > div > div > a {
        width: 60vw;
    }
}

/* Section Research */
#section-research img {
    max-width: 30vw;
}

#section-research > div {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    
    margin-top: 8vh;
}

#section-research > div > div {
    width: 35vw;
    justify-content: center;
}

#section-research > div > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    width: 25vw;
}

@media only screen and (max-width: 992px) {
    #section-research img {
        max-width: 80vw;
    }

    #section-research > div {
        flex-direction: column;
        align-items: center;
    }

    #section-research > div > div {
        width: 80vw;
    }

    #section-research > div > div:nth-child(2) {
        width: 80vw;
    }
}

/* Section Us */
#section-us img {
    max-width: 20vw;

    border: 1px solid var(--yellow);
    border-radius: 100%;
}

#section-us > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#section-us > div > div {
    position: relative;

    margin: 2vw 10vh;
    
    text-align: center;
}

#section-us details {
    cursor: pointer;
    margin-left: 2px;
}

#section-us details[open] {
    max-width: 20vw;
}

@media only screen and (max-width: 992px) {
    #section-us > div {
        flex-direction: column;
    }

    #section-us img {
        max-width: 60vw;
    }

    #section-us > div > div {
        margin: 16px 0;
    }

    #section-us details[open] {
        max-width: 80vw;
    }
}

.bg-custom {
    background-color: #262746;
}

.bg-custom-light {
    background-color: #faf5ef;
}

.card {
    background-color: #faf5ef !important;
}

.card.bg-custom-light {
    background-color: #faf5ef !important;
}

body, .card, h3, p, a {
    font-family: 'Montserrat', sans-serif;
}

.montserrat {
    font-family: 'Montserrat', sans-serif;
}