@media (min-width: 992px) {
    #openMenu {
        display: none;
    }
    #closeMenu {
        display: none;
    }
}
@media (max-width: 991px) {
    #openMenu {
        background-color: transparent;
        border: none;
        color: #0798bc;
        font-size: 25px;
    }
    #menuOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        z-index: 10;
    }
    #mainNav {
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: linear-gradient(to right, #124f6c 20%, #8cd11d 100%);
        padding: 20px;
        /* box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); */
        transition: right 0.3s ease;
        z-index: 11;
    }
    .close-btn {
        background: none;
        border: none;
        font-size: 24px;
        position: absolute;
        top: 0;
        line-height: normal;
        right: 0;
        cursor: pointer;
        color: #124f6c;
        background-color: var(--bs-white);
    }
    .main-nav > li {
        position: relative;
        margin-right: 20px;
        display: flex;
    }
    #menuOverlay.show {
        display: block;
    }
    #mainNav.open {
        right: 0;
    }
}
@media (max-width: 768px) {
    .green-bg-padding{
        flex-direction: column;
    }
}