/* Google fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

/* CSS Variables */
:root {
    --primary-font: "Inter", sans-serif, weight 500;
    --secondary-font: "Lato", sans-serif;
    --primary-color:  #234423; /*forest green*/
    --secondary-color: #667C56;/*green*/ 
    --highlight-color: #849472; /*grey*/
    --highlight-color-light: #DBDAB0;/*light brown*/
}

/* to prevent overflow*/
html, body {
    overflow-x: hidden;
}
/* Global styles */
body {
    background-color:var(--highlight-color-light);
    font-family: var(--secondary-font);
    font-weight: 400;
    height: auto;
}
h1, 
h2, h3 {
    font-family: var(--primary-font);
    font-weight: 500;
    color: var(--primary-color);
}
p { 
    color: var(--primary-color);
    font-family: var(--secondary-font);
    font-weight: 400;
}

/*navbar*/
.navbar {
    background-color: var(--primary-color);
    text-transform: uppercase;
}
.nav-logo {
    height: 40px;
    max-width: auto;
}
.nav-link { 
    color: var(--highlight-color-light)
}
#navbarNav .nav-link:hover {
    color: var(--secondary-color);
    opacity: 0.8;
}
.navbar-toggler {
    background-color: var(--highlight-color-light);
}
/* this is to make it evident on which page you are on */
nav a.active {
    color: #849472 !important;
    border-bottom: 2px solid #849472;
    padding-bottom: 4px;
}


/*header*/
header {
    background-color:var(--highlight-color-light);
    font-size: large;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    color: var(--primary-color); 
}
.opening-message {
    margin-top: 50px;
    color:var(--primary-color);
}
 .meet-the-directors {
    color:var(--primary-color)
}

/*main content*/
main {
    font-family: var(--secondary-font);
    padding-bottom: 20px;
    color: var(--primary-color);
    padding-left: 2rem;
    padding-right: 2rem;
    background-color:var(--highlight-color-light);
    }
.logo {
    height:auto;
    max-width: 350px;
    width: auto;
}
.logo-home {
    max-width: 350px;
    height:auto;
    width: auto;
}
.carousel-item img {
    max-height: 168px;
    object-fit: cover;
    height: auto;
    width: 100%;
    display:block;
}
.home-btn {
    justify-content: center;
}
/*footer*/
footer {
    background-color: var(--primary-color);
    font-family: var(--secondary-font);  
}
footer i {
    margin-bottom: 1rem;
    color: var(--highlight-color-light);
    padding-right: 0.5rem;
    
}
footer h3 {
    color: var(--highlight-color-light);
    font-family: var(--secondary-font);
    letter-spacing: 2px;
    text-transform: uppercase;
}
footer p {
    color:var(--highlight-color-light)
}
.card { 
    background-color:transparent;
    border:transparent;
}
.table {
    margin-top: 20px;
}
address {
    color: var(--highlight-color-light);
}
.map {
    margin-top: 3.5rem;
}
/*queries*/
@media (min-width:576px) {
    #success {
        justify-content: center;
    }
    .logo {
        justify-content: center;
    }
    .logo-home {
        justify-content: center;
    }
}
@media (min-width: 768px) {
    .logo {
        max-width: 250px;
        height:auto;
    }
    .logo-home {
        max-width: 370px;
        height: auto;
    }
}

@media (min-width: 991px) {
    .logo {
       max-width: 420px;
       height:auto;
    }
    .logo-home {
        max-width: 420px;
        height:auto;
    }
    .carousel-item img {
    max-height: 300px;
}
}
@media (max-width: 576px) {
    footer {
        padding-bottom:2rem;
    }
}