/* =========================================================
   KIYA LEARNING AUSTRALIA
   HEADER
   TOP BAR + MAIN NAVIGATION
========================================================= */

:root{

    --kl-primary:#f4511e;
    --kl-primary-dark:#e33d0e;
    --kl-primary-light:#fff1ec;

    --kl-red:#ff4f55;

    --kl-dark:#17181c;
    --kl-text:#202124;
    --kl-muted:#72747a;

    --kl-border:#eeeeee;

}


/* =========================================================
   RESET
========================================================= */

.kl-topbar *,
.kl-header *{
    box-sizing:border-box;
}


/* =========================================================
   TOP BAR
========================================================= */

.kl-topbar{

    position:relative;

    z-index:1200;

    width:100%;

    min-height:46px;

    background:#000000;

    color:#fff;

}


.kl-topbar-inner{

    min-height:46px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}


/* =========================================================
   TOP LEFT
========================================================= */

.kl-topbar-left{

    display:flex;

    align-items:center;

}


.kl-topbar-trial{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:36px;

    padding:0 21px;

    background:#e90000;

    color:#fff !important;

    border-radius:5px;

    text-decoration:none !important;

    font-size:12px;

    font-weight:700;

    line-height:1;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.kl-topbar-trial:hover{

    background:#c90000;

    color:#fff !important;

    transform:translateY(-1px);

    box-shadow:
        0 6px 15px rgba(180,0,0,.20);

}


/* =========================================================
   TOP RIGHT
========================================================= */

.kl-topbar-right{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:7px;

}


.kl-topbar-right a{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff !important;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.30);

    border-radius:4px;

    text-decoration:none !important;

    transition:
        background .2s ease,
        transform .2s ease;

}


.kl-topbar-right a i{

    font-size:14px;

}


.kl-topbar-right a:hover{

    color:#ff5557 !important;

    background:#fff;

    transform:translateY(-2px);

}


/* =========================================================
   MAIN HEADER
========================================================= */

.kl-header{

    position:relative;

    z-index:1100;

    width:100%;

    background:#fff;

    border-bottom:1px solid rgba(0,0,0,.06);

    transition:
        background .3s ease,
        box-shadow .3s ease;

}


/* =========================================================
   NAVBAR
========================================================= */

.kl-header .navbar{

    min-height:76px;

    padding:0;

}


.kl-header .container{

    display:flex;

    align-items:center;

}


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

.kl-brand{

    display:flex;

    align-items:center;

    flex-shrink:0;

    padding:0 !important;

    margin:0;

    text-decoration:none;

}


.kl-logo{

    display:block;

    width:170px;

    height:auto;

    max-height:58px;

    object-fit:contain;

    transition:
        width .3s ease;

}


/* =========================================================
   STICKY HEADER
========================================================= */

.kl-header.is-scrolled{

    position:fixed;

    top:0;

    left:0;

    right:0;

    background:rgba(255,255,255,.97);

    backdrop-filter:blur(15px);

    -webkit-backdrop-filter:blur(15px);

    box-shadow:
        0 8px 28px rgba(0,0,0,.08);

    animation:
        klHeaderSlide .25s ease;

}


@keyframes klHeaderSlide{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}


.kl-header.is-scrolled .navbar{

    min-height:66px;

}


.kl-header.is-scrolled .kl-logo{

    width:155px;

}


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

.kl-header .navbar-nav{

    display:flex;

    align-items:center;

    gap:2px;

}


.kl-nav-link{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:44px;

    padding:9px 9px !important;

    color:#111 !important;

    background:transparent;

    border-radius:0;

    font-size:15px;

    font-weight:500;

    line-height:1.2;

    white-space:nowrap;

    text-decoration:none !important;

    transition:
        color .2s ease,
        background .2s ease;

}


.kl-nav-link:hover{

    color:#f4511e !important;

    background:transparent;

}


.kl-nav-link.active{

    color:#f4511e !important;

    font-weight:600;

}


.kl-nav-link.active::after{

    content:"";

    position:absolute;

    left:9px;

    right:9px;

    bottom:0;

    height:2px;

    background:#f4511e;

    border-radius:4px;

}


/* =========================================================
   BOOTSTRAP DROPDOWN ARROW
========================================================= */

.kl-nav-dropdown .dropdown-toggle::after{

    margin-left:6px;

    vertical-align:middle;

    border-top:
        4px solid currentColor;

    border-right:
        4px solid transparent;

    border-left:
        4px solid transparent;

    border-bottom:0;

    transition:
        transform .2s ease;

}


.kl-nav-dropdown.show
.dropdown-toggle::after{

    transform:rotate(180deg);

}


/* =========================================================
   MAIN DROPDOWN
========================================================= */

.kl-main-dropdown{

    min-width:220px;

    margin-top:2px !important;

    padding:7px 0;

    background:#fff;

    border:1px solid #eeeeee;

    border-radius:3px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.10);

}


.kl-main-dropdown.show{

    animation:
        klDropdownIn .18s ease;

}


@keyframes klDropdownIn{

    from{

        opacity:0;

        transform:translateY(4px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/* =========================================================
   DROPDOWN ITEMS
========================================================= */

.kl-main-dropdown .dropdown-item{

    display:flex;

    align-items:center;

    min-height:38px;

    padding:8px 14px;

    color:#171717;

    background:#fff;

    font-size:15px;

    font-weight:500;

    line-height:1.25;

    white-space:normal;

    transition:
        color .18s ease,
        background .18s ease,
        padding-left .18s ease;

}


.kl-main-dropdown .dropdown-item:hover,
.kl-main-dropdown .dropdown-item:focus{

    color:#f4511e;

    background:#fff7f4;

    padding-left:18px;

}


/* =========================================================
   REDUCED DROPDOWN BOTTOM SPACE
========================================================= */

.kl-main-dropdown > li:last-child .dropdown-item{

    margin-bottom:0;

}


.kl-main-dropdown > li{

    margin:0;

    padding:0;

}


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

.kl-language-menu{

    min-width:250px;

}


.kl-submenu-item{

    position:relative;

}


.kl-submenu-toggle{

    display:flex !important;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    width:100%;

}


.kl-submenu-toggle i{

    margin-left:auto;

    color:#777;

    font-size:11px;

    transition:
        color .2s ease,
        transform .2s ease;

}


.kl-submenu-item:hover
.kl-submenu-toggle i{

    color:#f4511e;

}


/* =========================================================
   NESTED SUBMENU
========================================================= */

.kl-submenu{

    position:absolute;

    top:-7px;

    left:100%;

    min-width:230px;

    margin:0;

    padding:7px 0;

    list-style:none;

    background:#fff;

    border:1px solid #eeeeee;

    border-radius:3px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.10);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transform:translateX(5px);

    transition:
        opacity .18s ease,
        visibility .18s ease,
        transform .18s ease;

}


.kl-submenu-item:hover > .kl-submenu{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    transform:translateX(0);

}


.kl-submenu .dropdown-item{

    min-height:38px;

}


/* =========================================================
   CTA
========================================================= */

.kl-nav-cta{

    margin-left:7px;

}


.kl-header-btn{

    min-height:42px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:0 16px;

    color:#fff !important;

    background:#f4511e;

    border:1px solid #f4511e;

    border-radius:5px;

    font-size:13px;

    font-weight:700;

    line-height:1;

    white-space:nowrap;

    text-decoration:none !important;

    box-shadow:
        0 7px 18px rgba(244,81,30,.18);

    transition:
        background .2s ease,
        transform .2s ease,
        box-shadow .2s ease;

}


.kl-header-btn:hover{

    color:#fff !important;

    background:#e33d0e;

    border-color:#e33d0e;

    transform:translateY(-2px);

    box-shadow:
        0 10px 24px rgba(244,81,30,.25);

}


.kl-header-btn i{

    font-size:12px;

}


/* =========================================================
   MOBILE TOGGLE
========================================================= */

.kl-navbar-toggler{

    width:42px;

    height:42px;

    padding:8px;

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

    background:#fff;

    border:1px solid #e5e5e5 !important;

    border-radius:5px;

    box-shadow:none !important;

}


.kl-navbar-toggler span{

    display:block;

    width:20px;

    height:2px;

    background:#202124;

    border-radius:4px;

    transition:.2s ease;

}


.kl-navbar-toggler:hover{

    border-color:#f4511e !important;

}


.kl-navbar-toggler:hover span{

    background:#f4511e;

}


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

@media(min-width:992px){

    .kl-header .navbar-collapse{

        display:flex !important;

        align-items:center;

    }


    .kl-main-dropdown{

        position:absolute;

        top:100%;

    }


    .kl-nav-dropdown{

        position:relative;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1199.98px){

    .kl-nav-link{

        padding-left:7px !important;

        padding-right:7px !important;

        font-size:14px;

    }


    .kl-header-btn{

        padding-left:13px;

        padding-right:13px;

        font-size:12px;

    }


    .kl-logo{

        width:155px;

    }

}


/* =========================================================
   TABLET / MOBILE
========================================================= */

@media(max-width:991.98px){

    /* TOP BAR */

    .kl-topbar{

        min-height:44px;

    }


    .kl-topbar-inner{

        min-height:44px;

    }


    .kl-topbar-trial{

        min-height:34px;

        padding:0 16px;

        font-size:11px;

    }


    .kl-topbar-right{

        gap:5px;

    }


    .kl-topbar-right a{

        width:27px;

        height:27px;

    }


    /* MAIN HEADER */

    .kl-header .navbar{

        min-height:70px;

    }


    .kl-header .container{

        flex-wrap:wrap;

    }


    .kl-logo{

        width:150px;

        max-height:52px;

    }


    .kl-navbar-toggler{

        display:flex;

        margin-left:auto;

    }


    /* NAV COLLAPSE */

    .kl-header .navbar-collapse{

        width:100%;

        flex-basis:100%;

        margin-top:6px;

        padding:5px 0 8px;

        border-top:1px solid #eeeeee;

    }


    .kl-header .navbar-nav{

        width:100%;

        display:flex;

        align-items:stretch !important;

        gap:1px;

    }


    .kl-header .nav-item{

        width:100%;

    }


    .kl-nav-link{

        width:100%;

        min-height:42px;

        justify-content:flex-start;

        padding:10px 10px !important;

        font-size:14px;

        border-radius:4px;

    }


    .kl-nav-link.active::after{

        display:none;

    }


    .kl-nav-link:hover{

        background:#fff6f2;

    }


    /* MOBILE DROPDOWN */

    .kl-main-dropdown{

        position:static !important;

        width:100%;

        min-width:0;

        margin:2px 0 3px !important;

        padding:4px 6px;

        border:1px solid #eeeeee;

        border-radius:5px;

        box-shadow:none;

        transform:none !important;

    }


    .kl-main-dropdown.show{

        animation:
            klMobileDropdown .18s ease;

    }


    @keyframes klMobileDropdown{

        from{

            opacity:0;

            transform:translateY(-3px) !important;

        }

        to{

            opacity:1;

            transform:translateY(0) !important;

        }

    }


    .kl-main-dropdown .dropdown-item{

        min-height:40px;

        padding:9px 10px;

        font-size:14px;

    }


    .kl-main-dropdown .dropdown-item:hover,
    .kl-main-dropdown .dropdown-item:focus{

        padding-left:14px;

    }


    /* =====================================================
       MOBILE LANGUAGE SUBMENU
    ===================================================== */

    .kl-submenu{

        position:static;

        width:100%;

        min-width:0;

        display:none;

        margin:0;

        padding:3px 5px 3px 12px;

        border:0;

        border-left:2px solid #f4511e;

        border-radius:0;

        box-shadow:none;

        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:none;

    }


    .kl-submenu-item.submenu-open > .kl-submenu{

        display:block;

    }


    .kl-submenu-item.submenu-open
    > .kl-submenu-toggle
    i{

        transform:rotate(90deg);

        color:#f4511e;

    }


    .kl-submenu .dropdown-item{

        min-height:37px;

        font-size:13px;

    }


    /* CTA */

    .kl-nav-cta{

        margin:6px 0 0;

    }


    .kl-header-btn{

        width:100%;

        min-height:43px;

    }


    /* STICKY */

    .kl-header.is-scrolled{

        position:fixed;

    }


    .kl-header.is-scrolled .navbar{

        min-height:66px;

    }

}


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

@media(max-width:767.98px){

    .kl-topbar-inner{

        padding-left:8px;

        padding-right:8px;

    }


    .kl-topbar-right{

        gap:4px;

    }


    .kl-topbar-right a{

        width:25px;

        height:25px;

    }


    .kl-topbar-right a i{

        font-size:12px;

    }


    .kl-logo{

        width:145px;

    }

}


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

@media(max-width:575.98px){

    .kl-topbar{

        min-height:42px;

    }


    .kl-topbar-inner{

        min-height:42px;

    }


    .kl-topbar-trial{

        min-height:32px;

        padding:0 12px;

        font-size:10px;

    }


    .kl-topbar-right a{

        width:24px;

        height:24px;

    }


    .kl-topbar-right a i{

        font-size:11px;

    }


    .kl-header .navbar{

        min-height:64px;

    }


    .kl-logo{

        width:138px;

        max-height:48px;

    }


    .kl-navbar-toggler{

        width:39px;

        height:39px;

    }


    .kl-navbar-toggler span{

        width:18px;

    }


    .kl-header .navbar-collapse{

        margin-top:5px;

        padding-top:4px;

        padding-bottom:6px;

    }


    .kl-nav-link{

        min-height:40px;

        font-size:13px;

    }


    .kl-main-dropdown .dropdown-item{

        min-height:38px;

        font-size:13px;

    }

}


/* =========================================================
   EXTRA SMALL
========================================================= */

@media(max-width:390px){

    .kl-topbar-trial{

        padding:0 10px;

        font-size:9px;

    }


    .kl-topbar-right{

        gap:3px;

    }


    .kl-topbar-right a{

        width:22px;

        height:22px;

    }


    .kl-topbar-right a i{

        font-size:10px;

    }


    .kl-logo{

        width:130px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.kl-nav-link:focus-visible,
.kl-header-btn:focus-visible,
.kl-topbar-trial:focus-visible,
.kl-topbar-right a:focus-visible,
.kl-navbar-toggler:focus-visible,
.kl-main-dropdown .dropdown-item:focus-visible{

    outline:2px solid #f4511e;

    outline-offset:2px;

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .kl-header,
    .kl-logo,
    .kl-nav-link,
    .kl-header-btn,
    .kl-topbar-trial,
    .kl-topbar-right a,
    .kl-submenu{

        transition:none !important;

        animation:none !important;

    }

}