#org-navigation-default{
    .fa-arrow-right {
        @apply hidden;
    }
}

.org-header--active {
    .header-container {
        @apply fixed z-[99999];
    }
}

.org-navigation {
    @apply bg-white md:bg-[transparent]  pt-24 md:pt-0 h-screen w-full grid grid-cols-1 auto-rows-auto justify-between lg:items-center lg:pr-0 z-[9999];

    .top {
        @apply grid-rows-1 flex h-12 px-8 w-full justify-between space-x-4 md:space-x-0 lg:absolute lg:col-span-2 lg:top-7 lg:z-50;

        .search {
            @apply relative h-full flex-1 md:hidden;

            input {
                @apply rounded-full w-full h-full border-0 bg-gray-50;
            }

            > div {
                @apply absolute bg-white top-1.5 right-1.5 w-9 h-9 rounded-full flex justify-center items-center;
            }

            i {
                @apply text-sm text-black;
            }
        }

        .logo {
            @apply hidden md:flex items-center;

            img {
                @apply w-32 h-auto lg:w-40;
            }
        }
    }

    .nav-left{
        @apply md:pt-24 md:col-span-2 px-4 lg:px-8 grid h-full bg-white;
        grid-template-rows: 1fr;

        @media (max-width: 768px) {
            grid-template-rows: max-content 1fr max-content;
        }

        .selector-wrapper{
            @apply flex justify-end min-h-[3rem] md:hidden md:mb-16;
        }

        .selector {
            .selector-sub{
                @apply mt-0;
            }
        }

        .sub-nav{
            @apply self-end;
        }
    }

    .sub-nav {
        @apply flex lg:flex lg:items-end md:pb-10 gap-8;
        @apply lg:row-start-3;

        .mol-work-cta{
            @apply flex-[2]
        }

        >ul{
            @apply flex-1 flex flex-col gap-4;
        }

        h2.atm-heading{
            @apply text-h5 mb-2;
        }

        h3.atm-heading{
            @apply text-h6 m-0;
        }

        .atm-button {
            @apply mt-4;
        }
    }

    @media (max-height: 680px) {
        .atm-nav-link {
            @apply text-lg;
        }
    }
}

.org-header--active {
    .header-container {
        @apply fixed z-[99999];
    }
}