.left-navigation {
    height: 100%;
    width: fit-content;
    max-width: 250px;
    background: var(--background-navbar);
    z-index: 1 ;
}

.left-nav-content {
    position: sticky;
    top: 0;
    height: 100%;
}

.left-navigation.menu-collapsed .logo-wrapper .icon-box {
    height: 32px;
}
.left-nav-content .logo-wrapper {
    padding: var(--spacing-s);
    border-bottom: 1px var(--background-divider-lighter) solid;
}

.left-nav-content .icon-box img {
    height: 100%;
    width: 100%;
}

.left-nav-content .logo-wrapper .logo-text {
    font-size: var(--fs-s);
    line-height: var(--lh-s);
    font-weight: var(--fw-light);
    padding-left: 46px;
    margin-bottom: 0;
    white-space: nowrap;
    color: var(--secondary-b);
}


.menu-divider {
    margin: 20px 20px 10px 20px;
}

.nav-body{
    display: grid;
}

.nav-body .learn-more{
    font-weight: 300;
    font-size: 14px;
    margin: 20px 0px;
}


.find-out-more {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 18px;
    gap: 5px;
    width: fit-content;
    height: fit-content;
    box-sizing: border-box;
    background: var( --button-tertiary-base-background);
    border: 1px solid var(--button-tertiary-base-border);
    border-radius: var(--button-border-radius);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    
}

    .find-out-more svg {
        fill: var(--actions-tertiary-text);
        margin-bottom:2px;
    }
    
    .find-out-more svg,
    .find-out-more span {
        color: var(--actions-tertiary-text);
    }

    .find-out-more:hover {
        background-color: var(--button-tertiary-hover-background);
        border: 1px solid var(--button-tertiary-hover-border);
        color: var(--button-tertiary-hover-color);
    }

        .find-out-more:hover span {
            color: var(--button-tertiary-hover-color);
        }

        .find-out-more:hover svg {
            fill: var(--button-tertiary-hover-color);
        }

 @media (max-width: 767px) {
            .find-out-more {
                padding: 5px 10px;
            }
 }


        @media (max-width: 1230px) {
            .left-navigation {
                position: fixed;
                z-index: var(--z-index-2);
            }
        }


        @media only screen and (max-width: 1229px) {
            .nav-body {
                visibility: hidden;
            }

            .left-navigation {
                height: 110px;
                width: 100vw;
                max-width: 100vw;
            }

                .left-navigation .left-nav-content {
                    width: 100vw;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid var(--background-divider-lighter);
                }

            .left-nav-content .logo-wrapper {
                position: absolute;
                margin-left: 50%;
                transform: translateX(-50%);
                border-bottom: none;
                padding: 15px;
            }

                .left-nav-content .logo-wrapper .logo-text {
                    padding-left: 0px;
                }

            .left-nav-content .btn--back::before {
                color: var(--actions-tertiary-text);
                padding-right: 10px;
                width: 6px;
                height: 12px;
            }

            .nav-body .find-out-more {
                visibility: visible;
                position: absolute;
                right: 20px;
                margin-top: 35px;
                padding: 5px 10px;
            }
        }

        @media only screen and (max-width: 767px) {
            .left-nav-content .logo-wrapper {
                margin-left: 50%;
                transform: translateX(-50%);
            }

            .nav-body .find-out-more {
                visibility: hidden;
            }
        }

        @media (max-height: 660px) {
            .logo-copyright {
                bottom: -50px;
            }
        }


        @media only screen and (max-width: 375px) {
            .left-navigation {
                max-width: unset;
                width: 100%;
            }
        }