@import url("https://use.typekit.net/ojv4ekx.css");
* {
    padding: 0;
    margin: 0;
    font-family: "europa", sans-serif;
    box-sizing: border-box;
    outline: none;
}


/* #e6198e */


/* Color Codes & Other Variables */

:root {
    --primary: #ffb32c;
    --primary-variant: #F17C1C;
    --text: #000;
    --text-variant: #fff;
    --highlight: #8EE619;
}


/* overall adjustments */

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

.container-fluid {
    padding: 3% 10%;
}

.container-fluid-hero {
    padding-top: 3%;
    padding-bottom: 3%;
    padding-left: 10%;
}

.selectDisable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}


/* scroll bar */

::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
    background-color: #000000;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}


/* Navigation Bar */

nav {
    background: var(--text-variant);
    color: var(--primary-variant);
    z-index: 1;
}

.navbar {
    /* padding: 0 0 4.5rem;  */
    padding-left: 10%;
    padding-right: 10%;
}

.navbar-brand {
    font-size: 2rem;
    font-weight: bolder;
    color: #7f068f;
}

.navlink-border:hover {
    border-bottom: 2px solid var(--primary-variant);
}

.nav-link {
    font-size: 1.5 rem;
    font-weight: normal;
    color: var(--primary-variant);
}

.navbar-toggler i {
    color: #e6198e;
}

.navbar-brand:hover,
.nav-link:hover,
.navbar-toggler i:hover {
    color: #e64219;
}

a.nav-link.px-4 {
    margin-top: 20px;
}

.login-btn {
    color: var(--text-variant);
    background-image: linear-gradient(134deg, #bd19e6, #bd19e6, var(--primary-variant));
    border-radius: 30px;
    padding: 10px 45px;
    margin-top: -10px;
}

.login-btn:hover {
    color: var(--text-variant);
    background-image: linear-gradient(134deg, var(--primary-variant), #e6198e, #e6198e);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    border-radius: 30px;
    padding: 10px 45px;
}


/* hero section */

#hero-section {
    position: relative;
    bottom: 0;
    height: 90vh;
    background-color: #f7f7f7;
}

.hero-intro {
    position: relative;
    z-index: 5;
}

#hero-section h1 {
    color: #bd19e6;
    letter-spacing: 1pxs;
    font-weight: 800;
    font-size: 48px;
    line-height: 106%;
    padding-top: 5%;
}

#hero-section span {
    color: #bd19e6;
    font-size: 1.4em;
}

#hero-section p {
    padding-top: 5%;
    color:black;
    font-size: 1.2em;
}

.cta {
    margin-top: 2vh;
    padding: 10px 45px;
    color: #FFF;
    background-image: linear-gradient(to top, #bd19e6, #bd19e6);
    border-radius: 30px;
    /* transition: all ease-in-out 0.25s; */
}

.cta:hover {
    color: #FFF;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
    background-image: linear-gradient(to top, #bd19e6, #bd19e6);
    /* padding: 10px 55px; */
}

.hero-image {
    z-index: 3;
}

.image-width {
    width: 80% !important;
}

.hero-wave {
    background-color: #f7f7f7;
    margin-top: -200px;
    position: absolute;
    bottom: 0;
}

@media only screen and (max-width: 992px) {
    .hero-image {
        display: none;
    }
    .hero-wave {
        display: none;
    }
    #hero-section {
        padding-right: 10%;
    }
    #hero-section h1 {
        font-size: normal;
        color: #fa7f34;
    }
    #hero-section p {
        padding-top: 50px;
        font-size: normal;
    }
}

@media only screen and (max-width: 990px) {
    #hero-section {
        background-image: url('assets/hero-background.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 90vh;
    }
    #hero-section::before {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.45);
        /* margin-bottom: -20%; */
    }
    #hero-section h1 {
        margin-top: 5%;
        font-size: 2.5em;
        color: orange;
    }
    #hero-section p {
        color: seashell;
        padding-top: 20px;
        font-size: normal;
    }
    .cta {
        margin-top: 2%;
    }
}

@media only screen and (min-width: 880px) and (max-width: 1165px) {
    #hero-section {
        padding-top: 5vh;
    }
    ;
}

@media only screen and (max-width: 768px) {
    #hero-section {
        padding-top: 5%;
    }
}


/* description section */

#description-section {
    background-color: #F5F5F9;
    text-align: center;
    padding-bottom: 50px;
}

#description-section h1 {
    margin-top: 100px;
    padding-bottom: 16px;
    color: #35353F;
    font-size: 32px;
    font-weight: bold;
}

#description-section p {
    padding: 0 15%;
    color: #35353F;
    font-size: 1.125rem;
    line-height: 1.75rem;
    opacity: 0.9;
    margin-bottom: 50px;
}

@media only screen and (max-width: 328px) {
    #description-section p {
        padding: 0;
    }
}

#description-section .fa-calendar-check {
    color: #EF9425;
}

#description-section .fa-shopping-cart {
    color: #47BDA1;
}

#description-section .fa-search {
    color: #862783;
}

.description-cta {
    color: var(--text-variant);
    background-color: #bd19e6;
    border-radius: 50px;
    padding: 10px 25px;
}

.description-cta:hover {
    color: #bd19e6;
    background-color: transparent;
}


/* build flex section */

#build-flex {
    background-color: #F5F5F9;
    text-align: center;
    padding-bottom: 100px;
}

#build-flex h1 {
    margin-top: 50px;
    font-weight: 700;
}

#build-flex a {
    color: #EF6700;
}

#build-flex a:hover {
    text-decoration: none;
}

#build-flex span {
    color: #e6198e;
}


/* footer */

footer {
    background-color: #4f8f06;
}

footer h1:hover {
    color: var(--text-variant);
}

#back-to-top:hover {
    color: var(--text-variant);
}

footer p {
    color: #F5F5F5;
}

footer a {
    color: #F5F5F5;
}

footer a:hover {
    color: orange;
    text-decoration: none;
}

@media only screen and (max-width: 990px) {
    footer {
        text-align: center;
    }
}


/* login */

#login {
    height: 100vh;
    overflow: hidden;
}

#login-form {
    padding-top: 5%;
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 8%;
}

#login-form h1 {
    color: #381e56;
}

#login-form h1 a:hover {
    text-decoration: none;
}

#login-form h3 {
    font-weight: bold;
    padding-top: 50px;
}

#login-form p {
    color: grey;
}

.submit-btn {
    color: #F5F5F5;
    padding: 10px 45px;
    background-color: rgba(56, 30, 86, 0.7);
    margin-top: 30px;
}

.submit-btn:hover {
    padding: 10px 55px;
    color: var(--text-variant);
    background-color: rgba(56, 30, 86, 0.9);
}

#login-form .extra {
    text-align: center;
    padding-top: 20px;
}

#login-form a {
    color: #381e56;
}

#login-img {
    position: relative;
    bottom: 0;
    background-color: #381e56;
    padding: 10% 8%;
}


/* signup */

#signup-form {
    padding-top: 1%;
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 8%;
}

#signup-form h1 {
    color: #381e56;
}

#signup-form h1 a:hover {
    text-decoration: none;
}

#signup-form h3 {
    font-weight: bold;
    padding-top: 10px;
}

#signup-form p {
    color: grey;
}

#signup-form .extra {
    text-align: center;
    padding-top: 20px;
}

#signup-form a {
    color: #381e56;
}


/* resources page */

#resources {
    height: 90vh;
}


#resources h1 {
    color: #bd19e6;
    letter-spacing: 1pxs;
    font-weight: 800;
    font-size: 40px;
    line-height: 106%;
    padding-top: 5%;
}

#resources p {
    padding-top: 5%;
    color:black;
    font-size: 1.2em;
}

#resources span {
    color: #bd19e6;
    font-size: 1.4em;
}

@media only screen and (max-width: 768px) {
    #resources {
        padding-top: 5%;
    }
}

@media only screen and (max-width: 992px) {
    #resources {
        padding-right: 5%;
    }
}

@media only screen and (max-width: 990px) {

    #resources {
        height: 90vh;
        background-image: url(assets/resources-hero.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    #resources h1 {
        margin-top: 5%;
        font-size: 2.5em;
        color: orange;
    }

    #resources::before {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background-color: rgba(0, 0, 0, 0.45);
    }

    #resources p {
        color: seashell;
        padding-top: 20px;
        font-size: 1.2em;
    }

}

.resources-btn {
    margin-top: 2%;
    padding: 10px 45px;
    color: #FFF;
    background-image: linear-gradient(to top, #bd19e6, #bd19e6);
    border-radius: 30px;
}

.resources-btn:hover {
    color: #FFF;
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.3);
    background-image: linear-gradient(to top, #EB47A5, #E6198E);
}


/* scholarship & jobs section */


#scholarships p {
    padding-right: 10%;
    font-size: 28px;
    font-weight: 600;
}

.contribution-btn {
    color: var(--text);
    border: 2px solid var(--text);
    padding: 16px 32px;
    border-radius: 10px;
}

#scholarships h1,
#jobs h1 {
    letter-spacing: 2px;
    font-weight: 700;
    text-transform: uppercase;
    color: #bd19e6;
    font-size: 2.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}

#scholarships ul,
#jobs ul {
    list-style: none;
    padding-left: 0px;
}

#scholarships li,
#jobs li {
    background-color: #F5F5F9;
    padding: 30px;
    
    margin-bottom: 5px;
    line-height: 1.75rem;
    font-size: 1.2rem;
}

#scholarships li a,
#jobs li a {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
}

#scholarships li:hover,
#jobs li:hover{
    background-color: #ed37f3;
    border-radius:8px;
    
}

#scholarships a,
#jobs a {
    color: var(--text);
}

#scholarships a:hover,
#jobs a:hover {
    color: #a909b8;
    text-decoration: none;
}

#jobs {
    padding-bottom: 50px;
}