/* ---- VARIABLES ----- */
:root{
    --green: #1E5D10;
    --white: #FFFFFF;
    --light-green: #A5DE9A;
    --grey: #3D3D3D;
    --light-grey: #F5F5F5;

    --primary-color: var(--green);
    --secondary-color: var(--light-green);
    --primary-text: var(--grey);
    --secondary-text: var(--white);
}

/* ---- FONTS ---- */
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url("fonts/poppins-v21-latin-regular-85e41d033dfb0f41597ae33a1110a71c.woff2") format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 400;
    src: url("fonts/poppins-v21-latin-italic-e5957e9847ed6f3bac136fefbd8a1978.woff2") format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url("fonts/poppins-v21-latin-700-e5e3ee63146e1c16a24860d10ebdad10.woff2") format('woff2');
}
@font-face {
    font-display: swap;
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 700;
    src: url("fonts/poppins-v21-latin-700italic-ef07fea5c44e1144efe768b09efe2911.woff2") format('woff2');
}

/* ---- TYPO ---- */
*{
    font-family: 'Poppins', sans-serif !important;
}
.primary-heading{
    font-weight: 700;
    font-size: 3rem;
    color: var(--secondary-text);
}
.secondary-heading{
    font-size: 2.5rem;
    color: var(--primary-color);
    font-weight: 700;
    margin-block-end: 2rem;
}
a{
    color: var(--primary-color) !important;
}

/* ---- LAYOUT ---- */
html{
    scroll-behavior: smooth;
}
section, footer{
    padding-block: 2rem;
}
@media screen and (min-width: 62rem){
    section{
        padding-block: 5rem;
    }
}

/* ---- COMPONENTS ---- */
.button{
    background-color: var(--primary-color) !important;
    color: var(--secondary-text) !important;
    width: fit-content !important;
}
.button:hover, .button:focus{
    background-color: #1e4415 !important;
}
.form-control:focus, .button:focus{
    box-shadow: none !important;
    border-color: var(--primary-color) !important;
}
.btn-danger{
    color: #fff !important;
}

/* ---- SKIP-LINKS ---- */
.skip-links a{
    position: absolute;
    top: -100vh;
    left:50%;
    display: inline-block;
    padding: 1rem;
    color: var(--primary-color);
    background-color: #FFF;
    transform: translateX(-50%);
    z-index: 10;
}
.skip-links a:focus{
    top: 0;
}

/* ---- BREADCRUMB ---- */
.breadcrumb{
    margin-block-start: 1rem;
}
.breadcrumb-item > a {
    color: #000 !important;
    text-decoration: none;
}
.breadcrumb-item > a:hover{
    text-decoration: underline;
}

/* ---- BREADCRUMP FOR HERO WITH BACKGROUND IMAGE ---- */
.hero-breadcrumb-container{
    align-self: start;
}
.hero-breadcrumb{
    margin-block-start: 1rem;;
}
.hero-breadcrumb-item > a{
    color: var(--white) !important;
    text-shadow: 0 0 10px #000000;
}
.hero-active{
    color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: 0 0 10px #000000;
}
.hero-breadcrumb-item:before{
    color: var(--white) !important;
}

/* ---- NAVBAR ---- */
#main-nav{
    background-color: var(--primary-color);
}
.navbar{
    align-content: center;
}
.nav-logo{
    height: 3rem;
}
.navbar-collapse{
    background-color: var(--primary-color);
}
.nav-item:first-of-type{
    padding-block-start: 1rem;
}
.nav-link{
    color: var(--secondary-text) !important;
    padding-block: 1rem !important;
}
.navbar-toggler{
    border: none !important;
}
.navbar-toggler-icon{
    filter: invert(99%) sepia(73%) saturate(206%) hue-rotate(270deg) brightness(118%) contrast(100%);
}
.dropdown-menu{
    background-color: var(--primary-color) !important;
    border: none !important;
    border-radius: 0 !important;
}
.dropdown-item{
    padding: 1rem !important;
    color: var(--secondary-text) !important;
}
.nav-link:hover, .dropdown-item:hover, .dropdown-item:focus{
    background-color: var(--primary-color) !important;
    text-decoration: underline;
}

@media screen and (min-width: 62rem){
    .navbar{
        height: 5rem;
    }
    .nav-logo{
        height: 4rem;
    }
    .nav-item:first-of-type{
        padding-block-start: 0;
    }
}

/* ---- HISTORY, EDUCATION & DISTRIBUTION HERO ---- */
.hero{
    height: 25rem;
    background-position: center;
    background-size: cover;
    position: relative;
    padding: 0;
}
.hero-content-container {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    align-items: center;
    text-align: center;
}
.hero-content-title {
    text-shadow: 0 0 10px #000000;
    font-size: 1.5rem !important;
}
@media screen and (min-width: 62rem){
    .hero{
        height: 50vh;
    }
    .hero-content-title{
        font-size: 3rem !important;
    }
}

/* ---- FOOTER ---- */
footer{
    background-color: var(--primary-color);
}
.footer-container{
    display: flex;
    justify-content: center;
}
.footer-content{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-inline-start: 2px solid #FFF;
    padding-inline-start: 1rem;
}
footer a{
    color: var(--secondary-text) !important;
    text-decoration: none;
}
.footer-item{
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--secondary-text) !important;
}
.footer-address {
    display: flex;
    align-items: center;
}
.footer-address > p{
    margin: 0;
}
.footer-logo{
    filter: invert(93%) sepia(10%) saturate(1288%) hue-rotate(52deg) brightness(94%) contrast(84%);
}
@media screen and (min-width: 90rem){
    .footer-content{
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border: none;
    }
}