@media screen and (max-width: 991px) {
    .header-area .main-nav .nav {
        display: none;
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: #fff;
        padding: 0;
        margin: 0;
        z-index: 999;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    .header-area .main-nav .nav.active {
        display: block;
    }

    .header-area .main-nav .nav li {
        width: 100%;
        padding: 0;
        border-bottom: 1px solid #eee;
    }

    /* .header-area .main-nav .nav li:last-child {
        border-bottom: none;
    } */

    .header-area .main-nav .nav li a {
        padding: 15px 20px;
        display: block;
        width: 100%;
    }

    /* Fix for login button in mobile view */
    .header-area .main-nav .nav li .main-red-button {
        margin: 10px 20px;
    }

    .header-area .main-nav .nav li .main-red-button a {
        padding: 10px 20px;
        width: calc(100% - 40px);
        text-align: center;
        border-radius: 20px;
    }

    .menu-trigger {
        display: block !important;
    }
}


/* Mobile auth links styling */
.mobile-auth-links {
    padding: 10px 20px;
    border-bottom: 1px solid #eee;
    width: 100%;
}

.mobile-auth-links a {
    color: #1e1e1e !important;
    font-weight: 500;
    display: block;
    width: 100%;
}

/* .mobile-auth-links:last-child {
    border-bottom: none;
} */

@media (max-width: 768px) {
    .mobile-auth-links {
        border-bottom: 1px solid rgba(0,0,0,0.1);
        text-align: center;
    }
    
    .mobile-auth-links a:hover {
        color: #ff3b2c;
    }
}