:root {
    --brown: #785036 ;
    --light-brown: #CBAC8E;
    --cream: #FFE5B6;
}

@font-face {
    font-family: 'JosefinSans-Regular';
    src: url('../fonts/josefin_sans/JosefinSans-Regular.ttf');
}

@font-face {
    font-family: 'PlayfairDisplay-Regular';
    src: url('../fonts/playfair_display/PlayfairDisplay-Regular.ttf');
}

@font-face {
    font-family: 'Satisfy-Regular';
    src: url('../fonts/satisfy/Satisfy-Regular.ttf');
}

body {
    background-color: var(--cream);
}

footer * {
    font-size: 1rem;
    font-family: 'JosefinSans-Regular', sans-serif;
    color: var(--light-brown);
}

footer {
    background-color: var(--brown);
}

footer .logo-col img {
    width: 60px;
}

footer .logo-col p {
    max-width: 400px;
}

footer .links-col ul li a {
    text-decoration: none;
    color: var(--light-brown);
}

footer .lower-footer {
    color: var(--cream);
}

footer .address {
    text-transform: uppercase;
}

footer .contact-col p {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* HOME */
.home-nav {
    background-color: var(--brown);
}

.home-nav nav a img {
    width: 80px;
}

.home-nav h3 {
    font-family: 'PlayfairDisplay-Regular', sans-serif;
    font-size: 1.4rem;
    color: var(--light-brown);
}

.home-nav nav p {
    font-size: .8rem;
    color: var(--light-brown);
}

.home-nav nav ul li a {
    font-family: 'PlayfairDisplay-Regular', sans-serif;
    color: var(--light-brown) !important;

    transition: all .3s;
}

.home-nav nav ul li a:hover {
    color: #3e3e3e !important;
}

.home-nav nav ul li a.active {
    color: var(--cream) !important;
    font-weight: 500;
}

.home-nav button {
    color: var(--light-brown);
}

#home #hero {
    height: calc(100vh - 106px);
}

#home #hero .img-bg {
    background-image: linear-gradient(rgba(203, 172, 142, 0.5), rgba(203, 172, 142, 0.5)), url('../images/home\ cover.jpg');
    background-size: cover;
    background-position: center;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}

#home #hero h2 {
    max-width: 800px;
    text-align: center;
    font-weight: 900;
    font-size: 3rem;
    color: var(--light-brown);
    text-shadow: 0 0 10px var(--brown);
    padding: 24px;
}

#home #hero p {
    height: 20%;
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

/* ABOUT */
.other-page.about nav {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url('../images/about\ us\ \(1\).png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.other-page nav h3 {
    font-size: 25px;
    font-family: 'Satisfy-Regular', sans-serif;

}

.other-page nav h3 img {
    width: 50px;
}

.other-page nav ul {
    list-style: none;
    display: inline-flex;
    padding: 10px 30px;
    border-radius: 35px;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;

    background-color: var(--brown);
}

.other-page nav ul li:not(:last-child) {
    margin-right: 16px;
}

.other-page nav ul li a {
    text-decoration: none;
    color: var(--light-brown);
    text-transform: uppercase;
    font-family: playfairdisplay-regular, sans-serif;

    transition: all .3s;
}

.other-page nav ul li a:hover {
    color: #3e3e3e !important;
}

.other-page nav ul li a.active {
    color: var(--cream) !important;
    font-weight: 500;
}

#about h1 {
    font-family: 'Satisfy-Regular', sans-serif;
}

#about .texts {
    font-family: 'JosefinSans-Regular', sans-serif;
}

#about .filler {
    height: 200px;
    background-image: url('../images/about-us-filler.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#about .box {
    padding: 20px;
    height: 100%;
    background-color: var(--brown);

    transition: all .3s;
}

#about .box:hover {
    transform: translateY(-10px);
}

#about .box p b {
    color: var(--cream);
}

/* SCHOLARSHIPS */
.other-page.scholarships nav {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url('../images/scho.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#scholarships .box {
    padding: 20px;
    height: 100%;
    background-color: var(--brown);
    color: var(--light-brown);

    transition: all .3s;
}

#scholarships .box:hover {
    transform: translateY(-10px);
}

#scholarships .box img {
    width: 45%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

#scholarships .box .requirements h6 a {
    color: var(--light-brown);
}

/* JOBLIST */
.other-page.joblist nav {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url('../images/joblist.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#joblist .box {
    padding: 20px;
    height: 100%;
    background-color: var(--brown);
    color: var(--light-brown);

    transition: all .3s;
}

#joblist .box:hover {
    transform: translateY(-10px);
}

#joblist .box img {
    width: 45%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

#joblist .full-details h6 a {
    color: var(--light-brown);
}

/* TESTIMONIALS */
.other-page.testimonials nav {
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), url('../images/testimonial\ pic.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#testimonials .box {
    padding: 8px;
    height: 100%;
    background-color: var(--brown);
    color: var(--light-brown);

    transition: all .3s;
}

#testimonials .box:hover {
    transform: translateY(-10px);
}

#testimonials .box img {
    width: 35%;
    min-width: 100px;
    max-width: 150px;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin: 10px;
}

#testimonials .box h6 {
    margin-bottom: 8px !important;
}