.responsive-nav
{
    display: none;
}

.mini-nav
{
    padding: 20px 0;
    background: #fff;
    display: block;
    position: relative;
}

    .mini-nav ul
    {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    
        .mini-nav ul li
        {
            font-size: 12px;
            margin: 0 0 0 40px;
        }
        
            .mini-nav ul li a
            {
                color: #000C2D;
            }

.main-nav
{
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    z-index: 1000;
    position: sticky;
    top: 0;
}

    .main-nav .wrapper
    {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .main-nav .logo img
        {
            max-width: 250px;
        }

        .main-nav nav 
        {
            z-index: 100;
        }
        .main-nav nav ul
        {
            display: flex;
            align-items: center;
        }

            .main-nav nav ul li
            {
                font-size: 16px;
                margin: 0 0 0 20px;
                position: relative;
                display: flex;
            }
            
                .main-nav nav ul li a
                {
                    color: #000C2D;
                    padding: 30px 25px;
                }
                
                .main-nav nav ul li.btn
                {
                    background-color: none;
                    padding: 0;
                }

                .main-nav nav ul li.btn a:hover
                {
                    box-shadow: 0px 10px 20px rgba(5, 31, 72, 0.1);
                    background-color: #082B61;
                }
                
                .main-nav nav ul li.btn a:focus
                {
                    box-shadow: 0px 10px 20px rgba(5, 31, 72, 0.1);
                    background-color: #031736;
                }

                .main-nav nav ul li.btn a
                {
                    color: #fff;
                    padding: 0;
                    padding: 12px 32px;
                    background-color: var(--secondary);
                    transition: all 0.3s ease-in-out;
                }

                    .main-nav nav ul li.menu-item-has-children ul.sub-menu
                    {
                        position: absolute;
                        top: 70px;
                        left: 0;
                        width: auto;
                        height: auto;
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: flex-start;
                        border-top: 4px solid var(--primary);
                        background-color: #fff;
                        padding: 25px 0;
                        opacity: 0;
                        visibility: hidden;
                        z-index: 0;
                        box-shadow: inset 0 0 0 1px rgba(5, 31, 72, 0.1);
                        transition: all 0.2s ease-in-out;
                    }
                    
                    .main-nav nav ul li.menu-item-has-children:hover ul.sub-menu
                    {
                        display: flex;
                        justify-content: center;
                        z-index: 100;
                        visibility: visible;
                        opacity: 1;
                        z-index: 100;
                    }
                    
                        .main-nav nav ul li.menu-item-has-children ul.sub-menu li
                        {
                            margin: 0 !important;
                            text-align: left;
                            display: flex;
                            width: 100%;
                            padding: 0;
                        }
                        
                            .main-nav nav ul li.menu-item-has-children ul.sub-menu li a
                            {
                                display: block;
                                padding: 15px 70px 15px 40px;
                                width: 100%;
                                white-space: nowrap;
                            }

                            .main-nav nav ul li.menu-item-has-children ul.sub-menu li a:hover
                            {
                                color: #fff;
                                background-color: #000C2D;
                            }
                            
.responsive-nav
{
    width: 30px;
    height: auto;
    padding: 20px;
    box-sizing: content-box;
}

    .responsive-nav span
    {
        width: 30px;
        height: 4px;
        background-color: var(--secondary);
        display: block;
        margin-bottom: 6px;
        position: relative;
        top: 0;
        transform: rotate(0);
        transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1);
    }

    .responsive-nav:hover span,
    .responsive-nav:hover span:nth-child(2)
    {
        width: 100%;
    }

    .responsive-nav span:nth-child(2)
    {
        width: 70%;
        margin-bottom: 0;
    }

    .responsive-nav.active span:nth-child(1)
    {
        top: 5px;
        transform: rotate(45deg);
    }

    .responsive-nav.active span:nth-child(2)
    {
        width: 100%;
        top: -5px;
        transform: rotate(-45deg);
    }