:root {
    --font-family: "Montserrat", sans-serif;
    --hero-color: #007aaa;
    --accent-color: #262262;
    /* --special-radial-gradient: radial-gradient(circle at top right,rgba(255, 255, 255, 0.8),transparent 300px),radial-gradient(circle at bottom left,rgba(30,130,230,.8),transparent 300px);
    --small-special-radial-gradient: radial-gradient(circle at top right,rgba(255, 255, 255, 0.8),transparent 10px),radial-gradient(circle at bottom left,rgba(199, 9, 9, 0.8),transparent 50px);
    --accent-pattern: url("/img/accent.png"); */
    --base-color: white;
    --c-grey-100: #f4f6f8;
	--c-grey-200: #e3e3e3;
	--c-grey-300: #b2b2b2;
	--c-grey-400: #7b7b7b;
	--c-grey-500: #3d3d3d;
    --shadow: rgba(0, 0, 0, 0.15) 0px 20px 60px 0px;
}
/* Navigation bar */

/* To hide the home button when in normal screen */
/* .menu div:first-child {
    display: none;
} */

.burger {
    display: none;
    cursor: pointer;
    padding: 8.5px 4px;
    z-index: 10;
    overflow: hidden;
    background: var(--hero-color);
    box-shadow: var(--shadow);
}

.burger div {
    background: var(--base-color);
    width: 30px;
    height: 2px;
    margin: 7px;
    transition: all 0.3s ease;
}

.toggle .l1 {
    transform: rotate(-45deg) translate(-6.5px, 6.5px);
}

.toggle .l2 {
    opacity: 0;
}

.toggle .l3 {
    transform: rotate(45deg) translate(-6.5px, -6.5px);
}

.arrow-relative {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 0.2fr;
}

.arrow-container {
    display: grid;
    justify-content: center;
    align-items: center;
}

.nav-arrow {
    font-size: 1em !important;
    transform: rotate(-90deg);
    transition: transform 100ms ease;
}

.dropdown:hover .nav-arrow {
    transform: rotate(0);
}

@media screen and (max-width: 1020px) {
    .nav-donate {
        left: 20px !important;
        top: 20px;
    }
    .nav-logo a { height: 100px; }
    .nav-logo a img { height: 80px;}
    .nav-logo a div p { font-size: 30px;}
    .menu div:first-child {
        display: revert;
    }
    .navcontent {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
    }
    .menu div .hover { color: var(--hero-color)!important;}
    .menu>div>.hover::before {
        display: none;
    }
    .menu div a {
        padding: 10px 10px !important;
        font-weight: 500 !important;
    }

    .menu div .hover:hover, .dropdown:hover > .hover {
        color: var(--accent-color) !important;
    }
    .menu {
        position: fixed;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        background-color: var(--base-color);
        top: 0 !important;
        left: 0 !important;
        align-items: flex-start;
        z-index: 3;
        justify-content: flex-start;
        width: 100%;
        overflow-y: auto;
        transition: ease 500ms;
        transform: translateY(-100vh);
        flex-direction: row;
        align-content: flex-start;
        column-gap: 20px;
        padding: 20px;
    }

    .dropdown-content {
        display: contents;
        position: relative;
        background-color: revert;
    }

    .menu>div {
        height: revert;
        width: 300px;
    }

    .arrow-container {
        display: none;
    }

    .dropdown-content a {
        color: var(--base-theme) !important;
    }

    .burger {
        display: block;
    }

    .navbar-toggle {
        position: fixed;
        top: 17px;
        right: 20px;
    }

    .active-nav {
        transform: translateY(0);
    }

    .active-nav .hover:hover {
        background-color: var(--hero-theme);
    }

    .active-nav .hover::after {
        display: none;
    }

    .active-nav .dropdown-content a {
        font-weight: 300;
    }

    .active-nav .donate-button .hover:hover {
        background-color: revert !important;
    }

    .active-nav .donate-button {
        position: relative !important;
    }
    .dropdown-content {
        width: 100%;
    }
}

@media screen and (max-width: 870px) {
    .seconday-footer div, .main__quick-history, .footer-grid {
        grid-template-columns: 1fr !important;
        justify-items: center;
    }
    h1 { font-size: 60px;}
    .grid { grid-template-columns: 1fr 1fr !important;}

    .image__header-overlay p { font-size: 30px; }
    h1 {font-size: 30px;}
    h2 {font-size: 25px;}
    h3 {font-size: 20px;}

    .footer-logo img{
        width: 200px;
    }
}

@media screen and (max-width: 720px) {
    .header-banner {
        grid-template-columns: 1fr !important;
    }
    .nav-logo a img{
        width: 100px;
    }
    .grid { grid-template-columns: 1fr !important; gap: 20px;}
    .image__header-banner img {
        aspect-ratio: 1/0.5;
    }
}