/* =========================================================
   SITE SEO ANALYZER — MOBILE MENU REDESIGN V1
   Approved compact icon-row design
========================================================= */

@media (max-width: 767px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .modern-header {
        height: 72px !important;
        background: #FFFFFF !important;
        border-bottom: 1px solid #E5EAF1 !important;
        box-shadow: 0 3px 14px rgba(15,31,58,.04) !important;
    }

    body {
        padding-top: 72px !important;
    }

    .modern-header-container {
        height: 72px !important;

        /* Logo intentionally close to left edge */
        padding-left: 5px !important;
        padding-right: 12px !important;

        gap: 8px !important;
    }


    /* -----------------------------------------------------
       LOGO — CLOSE TO LEFT EDGE
    ----------------------------------------------------- */

    .modern-brand {
        height: 72px !important;
        max-width: calc(100% - 62px) !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .modern-brand .logo {
        height: 72px !important;
        max-width: 220px !important;

        margin: 0 !important;
        padding: 0 !important;

        justify-content: flex-start !important;
    }

    .modern-brand .logo img,
    .modern-brand .logo a img {
        width: auto !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: 43px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-position: left center !important;
    }


    /* -----------------------------------------------------
       MENU / CLOSE BUTTON
    ----------------------------------------------------- */

    .modern-menu-button {
        display: flex !important;

        flex: 0 0 48px !important;

        width: 48px !important;
        height: 48px !important;

        margin-left: auto !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        background: #F8FBFF !important;

        border: 1px solid #CFE0F8 !important;
        border-radius: 13px !important;

        color: #1457D9 !important;

        box-shadow: none !important;
    }

    .modern-menu-button .fa {
        margin: 0 !important;

        font-size: 23px !important;
        line-height: 1 !important;
    }


    /* -----------------------------------------------------
       MOBILE MENU PANEL
    ----------------------------------------------------- */

    .modern-navigation {
        display: none;

        position: fixed !important;

        top: 78px !important;
        left: 8px !important;
        right: 8px !important;

        width: auto !important;

        max-height: calc(100vh - 88px) !important;

        margin: 0 !important;
        padding: 10px 18px 8px !important;

        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;

        background: #FFFFFF !important;

        border: 1px solid #E3E9F1 !important;
        border-radius: 18px !important;

        box-shadow:
            0 18px 45px rgba(15,31,58,.12) !important;

        z-index: 10000 !important;
    }

    .modern-navigation.open {
        display: block !important;
    }


    /* -----------------------------------------------------
       NAVIGATION LIST
    ----------------------------------------------------- */

    .modern-navigation .main-nav {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        list-style: none !important;
    }

    .modern-navigation .main-nav > li {
        position: relative !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-bottom: 1px solid #E8EDF4 !important;

        list-style: none !important;
    }


    /* -----------------------------------------------------
       NORMAL MENU ROW
    ----------------------------------------------------- */

    .modern-navigation .main-nav > li > a {
        position: relative !important;

        display: flex !important;

        width: 100% !important;
        min-height: 66px !important;
        height: auto !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 16px !important;

        margin: 0 !important;
        padding: 12px 4px !important;

        color: #233B63 !important;
        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;

        font-family: 'Poppins', sans-serif !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;

        text-decoration: none !important;
        white-space: normal !important;
    }

    .modern-navigation .main-nav > li > a:hover,
    .modern-navigation .main-nav > li > a:focus {
        color: #1457D9 !important;
        background: transparent !important;
    }

    .modern-navigation .main-nav > li > a::after {
        display: none !important;
    }


    /* -----------------------------------------------------
       GENERATED ICON
    ----------------------------------------------------- */

    .ssa-mobile-nav-icon {
        display: inline-flex !important;

        flex: 0 0 38px !important;

        width: 38px !important;
        height: 38px !important;

        align-items: center !important;
        justify-content: center !important;

        color: #173B70 !important;

        font-size: 22px !important;
        line-height: 1 !important;
    }

    .ssa-mobile-nav-icon .fa {
        margin: 0 !important;

        color: inherit !important;

        font-size: inherit !important;
    }

    .modern-navigation .main-nav > li:first-child
    .ssa-mobile-nav-icon {
        color: #1687E8 !important;
    }


    /* -----------------------------------------------------
       LANGUAGE ROW
    ----------------------------------------------------- */

    .modern-navigation .main-nav > li.modern-language {
        margin: 0 !important;

        border-bottom: 0 !important;
    }

    .modern-language > a {
        display: flex !important;

        width: 100% !important;
        height: auto !important;
        min-height: 66px !important;

        margin: 0 !important;
        padding: 12px 4px !important;

        align-items: center !important;
        justify-content: flex-start !important;

        gap: 16px !important;

        color: #233B63 !important;
        background: transparent !important;

        border: 0 !important;
        border-radius: 0 !important;
    }

    .modern-language > a .fa-globe {
        display: inline-flex !important;

        flex: 0 0 38px !important;

        width: 38px !important;

        justify-content: center !important;

        color: #173B70 !important;

        font-size: 24px !important;
    }

    .ssa-mobile-language-text {
        display: inline-block !important;

        color: #233B63 !important;

        font-size: 17px !important;
        font-weight: 500 !important;
    }

    .ssa-mobile-language-arrow {
        margin-left: auto !important;

        color: #173B70 !important;

        font-size: 15px !important;
    }


    /* -----------------------------------------------------
       LANGUAGE DROPDOWN
    ----------------------------------------------------- */

    .modern-navigation .modern-language .dropdown-menu {
        position: static !important;

        float: none !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 0 8px !important;
        padding: 6px !important;

        border-radius: 10px !important;

        box-shadow: none !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .modern-header-container {
        padding-left: 3px !important;
        padding-right: 10px !important;
    }

    .modern-brand .logo {
        max-width: 200px !important;
    }

    .modern-brand .logo img,
    .modern-brand .logo a img {
        max-height: 41px !important;
    }

    .modern-navigation {
        left: 7px !important;
        right: 7px !important;

        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .modern-navigation .main-nav > li > a,
    .modern-language > a {
        min-height: 62px !important;

        gap: 13px !important;

        font-size: 16px !important;
    }

    .ssa-mobile-nav-icon,
    .modern-language > a .fa-globe {
        flex-basis: 35px !important;
        width: 35px !important;
    }
}

/* =========================================================
   SITE SEO ANALYZER — DESKTOP NAVIGATION REDESIGN V1
   Mobile <= 767px remains untouched
========================================================= */

@media (min-width: 768px) {

    /* HEADER */
    .modern-header {
        height: 76px !important;
        background: #FFFFFF !important;
        border-bottom: 1px solid #E5EAF1 !important;
        box-shadow: 0 3px 16px rgba(15,31,58,.045) !important;
    }

    body {
        padding-top: 76px !important;
    }

    .modern-header-container {
        width: 100% !important;
        max-width: 1440px !important;
        height: 76px !important;

        margin: 0 auto !important;

        /* Move logo closer to left side */
        padding-left: 12px !important;
        padding-right: 20px !important;

        gap: 20px !important;
    }


    /* =====================================================
       LOGO
    ===================================================== */

    .modern-brand {
        flex: 0 0 auto !important;

        width: auto !important;
        max-width: 245px !important;
        height: 76px !important;

        margin: 0 !important;
    }

    .modern-brand .logo {
        width: auto !important;
        max-width: 245px !important;
        height: 76px !important;

        margin: 0 !important;
        padding: 0 !important;

        justify-content: flex-start !important;
    }

    .modern-brand .logo img,
    .modern-brand .logo a img {
        width: auto !important;
        height: auto !important;

        max-width: 235px !important;
        max-height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain !important;
        object-position: left center !important;
    }


    /* =====================================================
       NAVIGATION
    ===================================================== */

    .modern-navigation {
        display: flex !important;

        position: static !important;

        flex: 1 1 auto !important;

        align-items: center !important;

        width: auto !important;

        margin-left: auto !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .modern-navigation .main-nav {
        display: flex !important;

        align-items: center !important;
        justify-content: flex-end !important;

        gap: 3px !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .modern-navigation .main-nav > li {
        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }


    /* =====================================================
       NAVIGATION LINKS
    ===================================================== */

    .modern-navigation .main-nav > li > a {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 7px !important;

        width: auto !important;
        height: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 0 10px !important;

        color: #233B63 !important;
        background: transparent !important;

        border: 1px solid transparent !important;
        border-radius: 10px !important;

        font-family: 'Poppins', sans-serif !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        line-height: 1 !important;

        white-space: nowrap !important;

        transition:
            color .18s ease,
            background .18s ease,
            border-color .18s ease !important;
    }

    .modern-navigation .main-nav > li > a:hover,
    .modern-navigation .main-nav > li > a:focus {
        color: #1457D9 !important;

        background: #F5F9FF !important;

        border-color: #DCE9FA !important;

        text-decoration: none !important;
    }

    .modern-navigation .main-nav > li > a::after {
        display: none !important;
    }


    /* =====================================================
       DESKTOP ICONS
    ===================================================== */

    .ssa-mobile-nav-icon {
        display: inline-flex !important;

        flex: 0 0 auto !important;

        width: auto !important;
        height: auto !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;

        color: #173B70 !important;

        font-size: 15px !important;
        line-height: 1 !important;
    }

    .ssa-mobile-nav-icon .fa {
        margin: 0 !important;

        color: inherit !important;

        font-size: inherit !important;
    }

    .modern-navigation .main-nav > li:first-child
    .ssa-mobile-nav-icon {
        color: #1687E8 !important;
    }

    .modern-navigation .main-nav > li > a:hover
    .ssa-mobile-nav-icon {
        color: #1457D9 !important;
    }


    /* =====================================================
       LANGUAGE
    ===================================================== */

    .modern-navigation .main-nav > li.modern-language {
        margin-left: 4px !important;
    }

    .modern-language > a {
        display: flex !important;

        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 0 !important;

        color: #233B63 !important;
        background: #F8FAFC !important;

        border: 1px solid #E2E8F0 !important;
        border-radius: 10px !important;
    }

    .modern-language > a:hover {
        color: #1457D9 !important;
        background: #EFF6FF !important;
        border-color: #BFDBFE !important;
    }

    .modern-language > a .fa-globe {
        display: inline-block !important;

        width: auto !important;

        color: inherit !important;

        font-size: 18px !important;
    }

    /*
     * Text and arrow are useful in mobile,
     * but desktop only needs compact globe.
     */
    .ssa-mobile-language-text,
    .ssa-mobile-language-arrow {
        display: none !important;
    }


    /* =====================================================
       LANGUAGE DROPDOWN
    ===================================================== */

    .modern-navigation .modern-language .dropdown-menu {
        position: absolute !important;

        top: 52px !important;
        right: 0 !important;
        left: auto !important;

        float: none !important;

        width: auto !important;
        min-width: 185px !important;

        margin: 0 !important;
        padding: 7px !important;

        background: #FFFFFF !important;

        border: 1px solid #E2E8F0 !important;
        border-radius: 11px !important;

        box-shadow:
            0 15px 35px rgba(15,31,58,.12) !important;
    }

}


/* =========================================================
   TABLET DESKTOP NAV — FIT SAFELY
========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

    .modern-header-container {
        padding-left: 8px !important;
        padding-right: 10px !important;
        gap: 10px !important;
    }

    .modern-brand {
        max-width: 185px !important;
    }

    .modern-brand .logo {
        max-width: 185px !important;
    }

    .modern-brand .logo img,
    .modern-brand .logo a img {
        max-width: 180px !important;
        max-height: 42px !important;
    }

    .modern-navigation .main-nav {
        gap: 0 !important;
    }

    .modern-navigation .main-nav > li > a {
        gap: 4px !important;

        padding-left: 6px !important;
        padding-right: 6px !important;

        font-size: 11px !important;
    }

    .ssa-mobile-nav-icon {
        font-size: 13px !important;
    }

    .modern-language > a {
        width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
    }

}

/* =========================================================
   LOGO — TRUE LEFT EDGE ALIGNMENT V1
   Desktop + Mobile
========================================================= */

/* DESKTOP */
@media (min-width: 768px) {

    .modern-header-container {
        max-width: none !important;
        width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 8px !important;
        padding-right: 20px !important;
    }

    .modern-brand {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .modern-brand .logo,
    .modern-brand .logo a {
        margin-left: 0 !important;
        padding-left: 0 !important;
        justify-content: flex-start !important;
    }

}


/* MOBILE */
@media (max-width: 767px) {

    .modern-header-container {
        width: 100% !important;
        max-width: none !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        padding-left: 3px !important;
        padding-right: 10px !important;
    }

    .modern-brand {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    .modern-brand .logo,
    .modern-brand .logo a {
        margin-left: 0 !important;
        padding-left: 0 !important;

        justify-content: flex-start !important;
    }

}


/* VERY SMALL MOBILE */
@media (max-width: 480px) {

    .modern-header-container {
        padding-left: 2px !important;
    }

}