@font-face {
    font-family: 'Odin Rounded - Light';
    src: url('../fonts/Odin Rounded - Light.otf') format('opentype');
}

@font-face {
    font-family: 'Oswald-Regular';
    src: url('../fonts/Oswald-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Oswald-ExtraLight';
    src: url('../fonts/Oswald-ExtraLight.ttf') format('truetype');
}

/*custom body padding top so that navbar doesn't block first element*/
body {
    padding-top: 8% !important;
}

.about-banner {
    width: 100%;
    max-width: 100%;
    height: auto;
    position:relative;
}

    .about-banner img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    .about-banner .banner-text{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        max-width:100%;
        height:100%;
        padding:2%;
    }

.Slogan{
    margin-top:25%;
    margin-left:2%;
}

    .Slogan h1 {
        color: white;
        font-family: 'Odin Rounded - Light';
        font-size:500%;
    }
.Slogan h1 span{
    color: yellow;
}

.Mission{
    margin-top:40%;
    width:50%;
    text-align: -webkit-auto;
}

    .Mission h2 {
        color: yellow;
        font-family: 'Odin Rounded - Light';
        font-size:400%;
    }

    .Mission p {
        color: white;
        font-family: 'Odin Rounded - Light';
        font-size:200%;
    }
.Guideline-Section {
    background-image: url('../imgs/Home-Page-Imgs/Seamless Red Background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    padding: 5%;
}

    .Guideline-Section .Guideline-Element {
        display: flex;
        text-align:-webkit-auto;
    }

        .Guideline-Section .Guideline-Element img {
            padding-right: 2%;
            padding-bottom: 2%;
        }

        .Guideline-Section .Guideline-Element h1 {
            font-family: 'Odin Rounded - Light';
            font-size: 2rem;
        }

        .Guideline-Section .Guideline-Element p {
            font-family: Oswald-ExtraLight;
            font-size: 1.5rem;
        }

.Team-members-section {
    background-color: white;
}

    .Team-members-section h1 {
        text-align: center;
        font-family: 'Odin Rounded - Light';
    }

    .Team-members-section .Team-members-photos {
        width: 100%;
        max-width: 100%;
        height: auto;
        padding: 1%;
    }

        .Team-members-section .Team-members-photos div {
            width: 100%;
            max-width: 100%;
            height: auto;
        }

        .Team-members-section .Team-members-photos img {
            width: 100%;
            max-width: 100%;
            height: auto;
        }

        .Team-members-section .Team-members-photos h3 {
            text-align: center;
            font-family: 'Odin Rounded - Light';
        }

        .Team-members-section .Team-members-photos h2 {
            text-align: center;
            font-family: 'Odin Rounded - Light';
        }

.Culture-Section {
    background-image: url('../imgs/About-Page-Imgs/Fancy Office BG.jpg');
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    min-height: 100%;
    width: 100%;
    width: 100%;
    max-width: 100%;
    height: auto;
    padding: 3%;
    margin: 0;
}

    .Culture-Section .Culture-Description h1 {
        text-align: center;
        color: white;
        font-family: 'Odin Rounded - Light';
        font-size: 3rem;
    }

    .Culture-Section .Culture-Description p {
        text-align: center;
        color: white;
        font-family: Oswald-ExtraLight;
        font-size: 1.5rem;
    }

    .Culture-Section .Culture-Description div {
        position: absolute;
        top: 33%;
        left: 0%;
        background-color: rgb(0 0 0 / 0.60);
    }

.Story-Section {
    background-image: url('../imgs/About-Page-Imgs/Our story BG.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

    .Story-Section div {
        padding: 5%;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

        .Story-Section div img {
            width: 80%;
            max-width: 100%;
            height: auto;
        }

        .Story-Section div p {
            font-family: Oswald-ExtraLight;
            color: white;
            font-size: 3rem;
        }

        .Story-Section div span {
            color: yellow;
            font-family: 'Odin Rounded - Light';
            font-size: 3rem;
            text-align: center;
        }
/*tablets devices*/
@media screen and (max-width: 1280px) and (min-width:540px) {
    /*custom body padding top so that navbar doesn't block first element*/
    body {
        padding-top: 18% !important;
    }

    .Culture-Section .Culture-Description div {
        position: relative;
        top: 0%;
        left: 0%;
    }

    .Slogan {
        margin-left: 1%;
    }

        .Slogan h1 {
            color: white;
            font-size: 200%;
        }

            .Slogan h1 span {
                color: yellow;
            }

    .Mission {
        margin-top: 30%;
        width: 70%;
    }

        .Mission h2 {
            color: yellow;
            font-size: 200%;
        }

        .Mission p {
            color: white;
            font-size: 150%;
        }
}


/*Mobile devices*/
@media screen and (max-width: 480px) {
    /*custom body padding top so that navbar doesn't block first element*/
    body {
        padding-top: 19% !important;
    }

    .Guideline-Section .Guideline-Element {
        display: block;
        justify-content: center;
        text-align: center;
    }

        .Guideline-Section .Guideline-Element img {
            padding: 2%;
            width: 50%;
            height: auto;
        }

    .Culture-Section .Culture-Description div {
        position: relative;
        top: 0%;
        left: 0%;
    }

    .Story-Section div p {
        text-align: center;
        font-size: 2rem;
    }

    .Story-Section div span {
        text-align: center;
        font-size: 2rem;
    }

    .Slogan {
        margin-left: 1%;
    }
        .Slogan h1 {
            color: white;
            font-size: 100%;
        }

            .Slogan h1 span {
                color: yellow;
            }

    .Mission {
        margin-top: 30%;
        width: 70%;
    }

        .Mission h2 {
            color: yellow;
            font-size: 100%;
        }

        .Mission p {
            color: white;
            font-size: 80%;
        }
}