:root {
    --primary: #212529;
    --primary-light: #484d51;
    --primary-dark: #000000;
    --secondary: #e8bf6a;
    --secondary-light: #fff19a;
    --secondary-dark: #b38f3c;
    --tertiary: #9ac249;
    --tertiary-light: #cdf579;
    --tertiary-dark: #699115;
    --tertiary-darker: #4b6f16;
    --logo-brown: rgb(63, 32, 29);
}

.carousel-item {
    height: 60vh;
    min-height: 500px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.text-fade {
    text-shadow: 10px 10px 10px #1c1a25, 2px 2px 3px #137817;
}
.colour-primary {
    color: var(--primary);
}

.colour-primary-light {
    color: var(--primary-light);
}

.colour-primary-dark {
    color: var(--primary-dark);
}

.colour-secondary {
     color: var(--secondary);
 }

.colour-secondary-light {
    color: var(--secondary-light);
}

.colour-secondary-dark {
    color: var(--secondary-dark);
}

.colour-tertiary {
    color: var(--tertiary);
}

.colour-tertiary-light {
    color: var(--tertiary-light);
}

.colour-tertiary-dark {
    color: var(--tertiary-dark);
}

.background-colour-primary {
    background-color: var(--primary);
}

.background-colour-primary-light {
    background-color: var(--primary-light);
}

.background-colour-primary-dark {
    background-color: var(--primary-dark);
}

.background-colour-secondary {
     background-color: var(--secondary);
 }

.background-colour-secondary-light {
    background-color: var(--secondary-light);
}

.background-colour-secondary-dark {
    background-color: var(--secondary-dark);
}

.background-colour-tertiary {
    background-color: var(--tertiary);
}

.background-colour-tertiary-light {
    background-color: var(--tertiary-light);
}

.background-colour-tertiary-dark {
    background-color: var(--tertiary-dark);
}

.background-colour-logo-brown {
    background-color: var(--logo-brown);
}
.important-background-colour-logo-brown {
    background-color: var(--logo-brown)!important;
}
/* Color palette: https://material.io/resources/color/#!/?view.left=1&view.right=1&primary.color=212529&secondary.color=E8BF6A
Tertiary: #9AC249
 */
.navbar-brand img {
    max-height: 10vh;
}
.navbar-brand {
    margin-right: unset!important;
}
.nav-item {
    font-family: 'Alata', sans-serif;
}
@media (min-width: 576px) {
    .navbar {
        position: absolute;
        height: 10vh;
        left: 0px;
        right: 0px;
        border-bottom-style: ridge;
        border-bottom-width: 2px;
        border-color: rgba(200, 255, 200, 0.3);
        background-color: rgba(0, 0, 0, 0.5)!important;
        transition: background-color 0.3s ease-in-out;
    }
    .navbar.scrolled {
        position: sticky;
        background-color: black!important;
        transition: background-color 0.3s ease-in-out;
    }
    .scroll.scrolled {
        top: -10vh;
        position: relative;
    }
}
@media (max-width: 576px) {
    .navbar {
        border-bottom-style: ridge;
        border-bottom-width: 2px;
        border-color: rgba(200, 255, 200, 0.3);
    }
}
@media (min-width: 576px) {
    .carousel {
        position: relative;
    }
}

.sectionHeader {
    font-family: 'Tajawal', sans-serif;
    font-size: 64px;
}
.footer-name {
    font-size: 17px;
}

.footer-image {
    max-width: 55%;
}

.footer-pages {
    font-size: 30px;
    font-family: 'Tajawal', sans-serif;
}
.roundTop {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

.roundBottom {
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.vertical-center {
    margin-top: auto;
    margin-bottom: auto;
}
.balooPaaji {
    font-family: 'Baloo Paaji 2', cursive;
}
.poppins {
    font-family: 'Poppins', sans-serif;
}
.tajawal {
    font-family: 'Tajawal', sans-serif;
}
.openSans {
    font-family: 'Open Sans', sans-serif;
}
.quickSand {
    font-family: 'Quicksand', sans-serif;
}
.righteous {
    font-family: 'Righteous', cursive;
}
.alata {
    font-family: 'Alata', sans-serif;
}
.comfortaa {
    font-family: 'Comfortaa', cursive;
}