/* 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: 1120px) {
    .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: 868px) {
    .header-banner, .seconday-footer div, .main__quick-history {
        grid-template-columns: 1fr !important;
    }
    h1 { font-size: 50px;}
    .grid { grid-template-columns: 1fr 1fr !important;}
}

@media screen and (max-width: 600px) {
    .submenu { display: none;}
    .contact__footer-content, .secondary__footer-content { grid-template-columns: 1fr !important;}
    .social-links__footer-content { justify-items: center !important;}
    .grid { grid-template-columns: 1fr !important; gap: 20px;}
}