/*
 * Final frontpage override.
 * Loaded after Moodle/Moove generated CSS and main.css to lock the guest hero layout.
 */

html body#page-site-index.notloggedin #page.frontpage-guest-page,
#page.frontpage-guest-page {
    width: 100% !important;
    max-width: none !important;
    margin-top: 70px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
}

html body#page-site-index.notloggedin #page-wrapper {
    width: 100% !important;
    max-width: none !important;
    padding-top: 0 !important;
    overflow-x: hidden !important;
}

#page.frontpage-guest-page #page-header.frontpage-guest-header {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(100vh - 48px) !important;
    min-height: 827px !important;
    margin: -22px 0 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #eef7ff url("IOT.png") center -150px / cover no-repeat !important;
}

#page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #intro {
    position: absolute !important;
    top: 38% !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(50vw - 690px) !important;
    z-index: 5 !important;
    display: block !important;
    width: 700px !important;
    max-width: 700px !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
}

#page.frontpage-guest-page #mooveslideshow,
#page.frontpage-guest-page #mooveslideshow .carousel-inner,
#page.frontpage-guest-page #mooveslideshow .carousel-item {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 805px !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#page.frontpage-guest-page #mooveslideshow .carousel-item {
    background: #eef7ff url("IOT.png") center -150px / cover no-repeat !important;
}

#page.frontpage-guest-page #mooveslideshow .carousel-item img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    object-fit: cover !important;
    object-position: center top !important;
}

#page.frontpage-guest-page #mooveslideshow .carousel-caption {
    position: absolute !important;
    top: 38% !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(50vw - 690px) !important;
    z-index: 5 !important;
    display: block !important;
    width: 700px !important;
    max-width: 700px !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    text-shadow: none !important;
    transform: translateY(-50%) !important;
}

#page.frontpage-guest-page #mooveslideshow .carousel-caption.animated {
    animation: none !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
}

#page.frontpage-guest-page #mooveslideshow .carousel-caption .title,
#page.frontpage-guest-page #intro h1 {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 26px 30px 27px !important;
    border: 1px solid rgba(124, 225, 235, 0.25) !important;
    border-radius: 16px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(24, 61, 78, 0.92), rgba(31, 121, 142, 0.80)) !important;
    box-shadow: 0 18px 36px rgba(9, 31, 50, 0.26) !important;
    text-shadow: none !important;
    font-size: 35px !important;
    font-weight: 800 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
}

#page.frontpage-guest-page .frontpage-hero-title span {
    display: block !important;
    white-space: nowrap !important;
}

#page.frontpage-guest-page #mooveslideshow .carousel-caption .title::after,
#page.frontpage-guest-page #intro h1::after {
    content: "" !important;
    display: block !important;
    width: 64px !important;
    height: 4px !important;
    margin-top: 16px !important;
    border-radius: 999px !important;
    background: #73dfe7 !important;
}

#page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox:not(.row),
#page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #boxForm {
    position: absolute !important;
    top: 38% !important;
    right: auto !important;
    bottom: auto !important;
    left: calc(50vw + 200px) !important;
    z-index: 6 !important;
    display: block !important;
    width: 500px !important;
    max-width: min(500px, calc(100vw - 64px)) !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}

#page.frontpage-guest-page #boxForm,
#page.frontpage-guest-page .hero-login-card {
    border: 1px solid rgba(219, 230, 243, 0.82) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 22px 52px rgba(25, 45, 75, 0.18) !important;
    backdrop-filter: blur(12px);
}

#page.frontpage-guest-page #boxForm .card-body {
    min-height: 500px !important;
    padding: 38px 36px !important;
}

#page.frontpage-guest-page #boxForm h3 {
    white-space: nowrap !important;
    font-size: 29px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
}

#page.frontpage-guest-page #boxForm .input-group {
    height: 48px !important;
    margin-bottom: 20px !important;
}

#page.frontpage-guest-page #boxForm .input-group-addon {
    width: 52px !important;
    min-width: 52px !important;
    height: 48px !important;
}

#page.frontpage-guest-page #boxForm .form-control {
    height: 46px !important;
    min-height: 46px !important;
}

#page.frontpage-guest-page #boxForm .btn-primary {
    height: 48px !important;
    min-height: 48px !important;
}

@media (max-width: 1240px) {
    #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #intro {
        top: 31% !important;
        left: 32px !important;
        width: min(610px, calc(100vw - 64px)) !important;
        max-width: min(610px, calc(100vw - 64px)) !important;
    }

    #page.frontpage-guest-page #mooveslideshow .carousel-caption {
        top: 31% !important;
        left: 32px !important;
        width: min(610px, calc(100vw - 64px)) !important;
        max-width: min(610px, calc(100vw - 64px)) !important;
    }

    #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox:not(.row),
    #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #boxForm {
        top: auto !important;
        right: auto !important;
        bottom: 46px !important;
        left: 32px !important;
        width: min(390px, calc(100vw - 64px)) !important;
        max-width: min(390px, calc(100vw - 64px)) !important;
        transform: none !important;
    }
}

@media (max-width: 767.98px) {
    #page.frontpage-guest-page #page-header.frontpage-guest-header,
    #page.frontpage-guest-page #mooveslideshow,
    #page.frontpage-guest-page #mooveslideshow .carousel-inner,
    #page.frontpage-guest-page #mooveslideshow .carousel-item {
        height: auto !important;
        min-height: 900px !important;
    }

    #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #intro {
        top: 88px !important;
        left: 18px !important;
        width: calc(100vw - 36px) !important;
        max-width: calc(100vw - 36px) !important;
        transform: none !important;
    }

    #page.frontpage-guest-page #mooveslideshow .carousel-caption {
        top: 88px !important;
        left: 18px !important;
        width: calc(100vw - 36px) !important;
        max-width: calc(100vw - 36px) !important;
        transform: none !important;
    }

    #page.frontpage-guest-page #mooveslideshow .carousel-caption.animated {
        transform: none !important;
    }

    #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox:not(.row),
    #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #boxForm {
        right: auto !important;
        bottom: 30px !important;
        left: 18px !important;
        width: calc(100vw - 36px) !important;
        max-width: calc(100vw - 36px) !important;
    }

    #page.frontpage-guest-page #boxForm h3 {
        white-space: normal !important;
    }
}

/* Frontpage final text spacing and language selector polish. */
#page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #intro,
#page.frontpage-guest-page #mooveslideshow .carousel-caption {
    width: 780px !important;
    max-width: min(780px, calc(100vw - 64px)) !important;
}

#page.frontpage-guest-page #mooveslideshow .carousel-caption .title,
#page.frontpage-guest-page #intro h1 {
    padding: 30px 38px 32px !important;
    background: linear-gradient(135deg, rgba(20, 58, 74, 0.96), rgba(38, 143, 167, 0.88)) !important;
    font-size: 34px !important;
    line-height: 1.16 !important;
}

#page.frontpage-guest-page .frontpage-marketing .container {
    max-width: 1480px !important;
    padding-right: 18px !important;
    padding-left: 18px !important;
}

#page.frontpage-guest-page .frontpage-marketing .card-deck {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

#page.frontpage-guest-page .frontpage-marketing .card-body {
    grid-template-rows: 190px auto auto 1fr !important;
    row-gap: 18px !important;
    padding: 28px 18px 32px !important;
}

#page.frontpage-guest-page .frontpage-marketing .card h2,
#page.frontpage-guest-page .frontpage-marketing .card h3,
#page.frontpage-guest-page .frontpage-marketing .card p {
    max-width: 100% !important;
    text-wrap: balance !important;
}

#page.frontpage-guest-page .frontpage-marketing .card h3 {
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.15px !important;
}

#page.frontpage-guest-page .frontpage-marketing .card p {
    font-size: 13.5px !important;
    line-height: 1.68 !important;
}

nav.navbar .lang-menu .lang-selector {
    position: relative !important;
}

nav.navbar .lang-menu .lang-selector-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

nav.navbar .lang-menu .lang-selector-toggle::after {
    display: none !important;
}

nav.navbar .lang-menu .lang-selector-menu {
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 178px !important;
    padding: 10px !important;
    border: 1px solid #dce7f5 !important;
    border-radius: 18px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 18px 38px rgba(20, 55, 92, 0.16) !important;
}

nav.navbar .lang-menu .lang-selector-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    color: #2b5ec7 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

nav.navbar .lang-menu .lang-selector-item + .lang-selector-item {
    margin-top: 6px !important;
}

nav.navbar .lang-menu .lang-selector-item:hover,
nav.navbar .lang-menu .lang-selector-item:focus {
    color: #1d4fb5 !important;
    background: #eef4ff !important;
}

@media (max-width: 1240px) {
    #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #intro,
    #page.frontpage-guest-page #mooveslideshow .carousel-caption {
        width: min(650px, calc(100vw - 64px)) !important;
        max-width: min(650px, calc(100vw - 64px)) !important;
    }

    #page.frontpage-guest-page .frontpage-marketing .card h3 {
        white-space: normal !important;
        font-size: 16px !important;
        letter-spacing: 0 !important;
    }
}

/* Live frontpage redesign v3. */
html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #intro,
html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow .carousel-caption {
    top: 41% !important;
    left: clamp(58px, calc(50vw - 700px), 138px) !important;
    width: min(760px, calc(100vw - 610px)) !important;
    max-width: 760px !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #boxForm,
html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox:not(.row) {
    top: 40% !important;
    right: clamp(52px, calc(50vw - 700px), 142px) !important;
    left: auto !important;
    width: 448px !important;
    max-width: min(448px, calc(100vw - 64px)) !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header #intro h1,
html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow .carousel-caption .title {
    position: relative !important;
    padding: 38px 42px 34px !important;
    border: 1px solid rgba(142, 241, 247, 0.22) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at top right, rgba(80, 218, 240, 0.22), transparent 28%),
        linear-gradient(135deg, rgba(16, 66, 83, 0.98), rgba(46, 173, 196, 0.92)) !important;
    box-shadow: 0 26px 54px rgba(7, 26, 43, 0.24) !important;
    font-size: 29px !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.02em !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow .carousel-caption .title::after,
html body#page-site-index.notloggedin #page.frontpage-guest-page #intro h1::after {
    width: 78px !important;
    height: 5px !important;
    margin-top: 18px !important;
    background: linear-gradient(90deg, #9bf0ff, #6ee2f0) !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm,
html body#page-site-index.notloggedin #page.frontpage-guest-page .hero-login-card {
    border: 1px solid rgba(223, 236, 248, 0.86) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.82) !important;
    box-shadow: 0 28px 72px rgba(20, 45, 78, 0.18) !important;
    backdrop-filter: blur(18px) saturate(135%);
}

html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm .card-body {
    min-height: 534px !important;
    padding: 36px 36px 34px !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm h3 {
    margin-bottom: 30px !important;
    font-size: 28px !important;
    line-height: 1.14 !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm h3::after {
    width: 72px !important;
    height: 4px !important;
    margin-top: 16px !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .container {
    max-width: 1600px !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card-deck {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card-body {
    display: grid !important;
    grid-template-rows: 190px auto auto 1fr !important;
    row-gap: 18px !important;
    padding: 28px 16px 34px !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card h3 {
    max-width: 100% !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: 9.8px !important;
    line-height: 1.16 !important;
    letter-spacing: -0.16px !important;
    font-weight: 800 !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card p {
    max-width: 100% !important;
    margin-top: 8px !important;
    font-size: 13.8px !important;
    line-height: 1.72 !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body#page-site-index.notloggedin nav.navbar .nav-plugin-output:empty,
html body#page-site-index.notloggedin nav.navbar .usermenu {
    display: none !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-toggle,
html body#page-site-index.notloggedin nav.navbar .lang-menu .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-menu {
    top: calc(100% + 12px) !important;
    right: -4px !important;
    left: auto !important;
    min-width: 196px !important;
    padding: 12px !important;
    border: 1px solid #dce7f5 !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 22px 44px rgba(20, 55, 92, 0.18) !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -8px !important;
    right: 18px !important;
    width: 16px !important;
    height: 16px !important;
    border-top: 1px solid #dce7f5 !important;
    border-left: 1px solid #dce7f5 !important;
    background: #ffffff !important;
    transform: rotate(45deg) !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-align: left !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    border: 1px solid #dbe7f7 !important;
    border-radius: 14px !important;
    color: #2d62ca !important;
    background: linear-gradient(180deg, #f7fbff, #eef5ff) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-align: center !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item[href*="lang=kk"]::before {
    content: "Қазақша";
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item[href*="lang=ru"]::before {
    content: "Русский";
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item + .dropdown-item {
    margin-top: 8px !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item:hover::before,
html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item:focus::before {
    border-color: #c5daf8 !important;
    color: #224fb0 !important;
    background: linear-gradient(180deg, #ffffff, #eaf2ff) !important;
    box-shadow: 0 10px 18px rgba(52, 100, 190, 0.10) !important;
}

@media (max-width: 1240px) {
    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #intro,
    html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow .carousel-caption {
        top: 32% !important;
        left: 32px !important;
        width: min(640px, calc(100vw - 64px)) !important;
        max-width: min(640px, calc(100vw - 64px)) !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #boxForm,
    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox:not(.row) {
        right: auto !important;
        left: 32px !important;
        width: min(420px, calc(100vw - 64px)) !important;
        max-width: min(420px, calc(100vw - 64px)) !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card h3 {
        white-space: normal !important;
        font-size: 16px !important;
        letter-spacing: 0 !important;
    }
}

/* Marketing cards redesign v4. */
html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card.frontpage-feature-card,
html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card.frontpage-feature-card:hover {
    min-height: 640px !important;
    border: 1px solid rgba(205, 222, 241, 0.92) !important;
    border-radius: 30px !important;
    background:
        radial-gradient(circle at top right, rgba(108, 214, 237, 0.10), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    box-shadow: 0 18px 42px rgba(25, 49, 84, 0.08) !important;
    transform: none !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card.frontpage-feature-card::before {
    content: "" !important;
    position: absolute !important;
    top: 18px !important;
    left: 18px !important;
    width: 74px !important;
    height: 74px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, rgba(111, 209, 234, 0.18), rgba(77, 129, 228, 0.06)) !important;
    pointer-events: none !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card-body {
    display: grid !important;
    grid-template-rows: 186px auto auto 1fr !important;
    row-gap: 18px !important;
    padding: 32px 22px 24px !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card img {
    align-self: center !important;
    width: 164px !important;
    height: 164px !important;
    margin: 0 auto !important;
    padding: 12px !important;
    border-radius: 28px !important;
    background: radial-gradient(circle at top, rgba(113, 214, 238, 0.18), rgba(255, 255, 255, 0.98) 62%) !important;
    box-shadow: 0 18px 34px rgba(83, 128, 201, 0.12) !important;
    object-fit: contain !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card h2 {
    max-width: 100% !important;
    margin: 4px auto 0 !important;
    color: #384457 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.14 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card h3 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100% !important;
    min-height: 54px !important;
    margin: 0 auto !important;
    padding: 10px 16px !important;
    border: 1px solid #dbe8f8 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #f6fbff, #eef5ff) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    color: #3d68b8 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 14px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card p {
    display: block !important;
    max-width: 100% !important;
    margin: 6px 0 0 !important;
    padding: 18px 18px 20px !important;
    border: 1px solid #e3edf8 !important;
    border-radius: 20px !important;
    background: rgba(247, 250, 255, 0.95) !important;
    color: #74859c !important;
    font-size: 15px !important;
    line-height: 1.72 !important;
    text-align: center !important;
}

@media (max-width: 1240px) {
    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card.frontpage-feature-card,
    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card.frontpage-feature-card:hover {
        min-height: 0 !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card h3 {
        font-size: 15px !important;
    }
}

/* Frontpage navbar and language selector final polish. */
html body#page-site-index.notloggedin nav.navbar::after {
    bottom: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, #7fcff4, #6fd8f2, #67cdef) !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .lang-selector-menu,
html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-menu {
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    min-width: 210px !important;
    padding: 12px !important;
    border: 1px solid #dce7f5 !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.99) !important;
    box-shadow: 0 22px 44px rgba(20, 55, 92, 0.16) !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-menu::before {
    display: none !important;
    content: none !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .lang-selector-item,
html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 18px !important;
    border: 1px solid #dfe8f7 !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #f8fbff, #eef5ff) !important;
    box-shadow: none !important;
    color: #2758bc !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .lang-selector-item + .lang-selector-item,
html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item + .dropdown-item {
    margin-top: 8px !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .lang-selector-item:hover,
html body#page-site-index.notloggedin nav.navbar .lang-menu .lang-selector-item:focus,
html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item:hover,
html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item:focus {
    border-color: #cadcf8 !important;
    background: linear-gradient(180deg, #ffffff, #ebf3ff) !important;
    color: #1f4cae !important;
    box-shadow: 0 10px 18px rgba(52, 100, 190, 0.10) !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .lang-selector-label {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-align: center !important;
}

html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item::before {
    display: none !important;
    content: none !important;
}

html body#page-site-index.notloggedin nav.navbar .frontpage-course-search {
    overflow: hidden !important;
}

html body#page-site-index.notloggedin nav.navbar .frontpage-course-search input {
    margin: 0 !important;
    border: 0 !important;
    border-right: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    border-radius: 13px 0 0 13px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: none !important;
}

html body#page-site-index.notloggedin nav.navbar .frontpage-course-search button {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 48px !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    z-index: 2 !important;
    margin-left: -10px !important;
    border: 0 !important;
    border-radius: 0 13px 13px 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    box-shadow: -14px 0 0 #276bdc !important;
    padding: 0 !important;
}

html body#page-site-index.notloggedin nav.navbar .frontpage-course-search button::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -14px !important;
    width: 14px !important;
    background: #276bdc !important;
}

html body#page-site-index.notloggedin nav.navbar .frontpage-course-search button i {
    margin: 0 !important;
    line-height: 1 !important;
    transform: translateX(-7px) !important;
}

@media (max-width: 767.98px) {
    html body#page-site-index.notloggedin nav.navbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        row-gap: 10px !important;
        padding: 8px 12px !important;
    }

    html body#page-site-index.notloggedin nav.navbar .frontpage-course-search {
        order: 3 !important;
        flex: 1 0 100% !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    html body#page-site-index.notloggedin nav.navbar .frontpage-course-search input {
        min-height: 46px !important;
        font-size: 16px !important;
        border-radius: 16px 0 0 16px !important;
    }

    html body#page-site-index.notloggedin nav.navbar .frontpage-course-search button {
        flex: 0 0 46px !important;
        width: 46px !important;
        margin-left: -8px !important;
        border-radius: 0 16px 16px 0 !important;
        box-shadow: -10px 0 0 #276bdc !important;
    }

    html body#page-site-index.notloggedin nav.navbar .frontpage-course-search button::before {
        left: -10px !important;
        width: 10px !important;
    }

    html body#page-site-index.notloggedin nav.navbar .frontpage-course-search button i {
        transform: translateX(-5px) !important;
    }

    html body#page-site-index.notloggedin nav.navbar .btn-login-top,
    html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-toggle,
    html body#page-site-index.notloggedin nav.navbar .lang-menu .nav-link {
        min-height: 46px !important;
        padding: 0 16px !important;
        border-radius: 16px !important;
    }

    html body#page-site-index.notloggedin nav.navbar .lang-menu .lang-selector-menu,
    html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-menu {
        min-width: 170px !important;
        padding: 10px !important;
        border-radius: 18px !important;
    }

    html body#page-site-index.notloggedin nav.navbar .lang-menu .lang-selector-item,
    html body#page-site-index.notloggedin nav.navbar .lang-menu .dropdown-item {
        min-height: 44px !important;
        font-size: 15px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page {
        margin-top: var(--ui-navbar-height, 72px) !important;
        background: linear-gradient(180deg, #f7fbff 0%, #ffffff 28%) !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 14px 12px 20px !important;
        border-radius: 0 0 30px 30px !important;
        background-position: center center !important;
        background-size: cover !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row {
        position: relative !important;
        inset: auto !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        min-height: 0 !important;
        padding: 0 !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #intro,
    html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow .carousel-caption,
    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox.row > #boxForm,
    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header > #loginbox:not(.row) {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        transform: none !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow,
    html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow .carousel-inner,
    html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow .carousel-item {
        height: auto !important;
        min-height: 0 !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow .carousel-indicators {
        display: none !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header #intro h1,
    html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow .carousel-caption .title {
        padding: 20px 18px 18px !important;
        border-radius: 24px !important;
        font-size: clamp(1.48rem, 7.1vw, 2.08rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.03em !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header #intro h1 .hero-title-line,
    html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow .carousel-caption .title .hero-title-line,
    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-hero-title span {
        display: block !important;
        white-space: normal !important;
        text-wrap: balance !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header #intro h1::after,
    html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow .carousel-caption .title::after {
        width: 72px !important;
        height: 4px !important;
        margin-top: 14px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm,
    html body#page-site-index.notloggedin #page.frontpage-guest-page .hero-login-card {
        border-radius: 26px !important;
        background: rgba(255, 255, 255, 0.94) !important;
        box-shadow: 0 18px 38px rgba(19, 41, 70, 0.16) !important;
        backdrop-filter: blur(16px) saturate(120%);
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm .card-body {
        min-height: 0 !important;
        padding: 22px 18px 20px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm h3 {
        margin-bottom: 20px !important;
        font-size: clamp(1.44rem, 5.8vw, 1.9rem) !important;
        line-height: 1.14 !important;
        white-space: normal !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm label {
        font-size: 0.95rem !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm .input-group {
        height: auto !important;
        margin-bottom: 14px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm .input-group-addon {
        width: 48px !important;
        min-width: 48px !important;
        height: 48px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm .form-control {
        height: 48px !important;
        min-height: 48px !important;
        font-size: 16px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm .btn-primary,
    html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm .btn-register {
        min-height: 48px !important;
        width: 100% !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm .frontpage-login-forgot {
        margin: 14px 0 12px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing {
        padding: 18px 0 24px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .container {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card-deck {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card.frontpage-feature-card,
    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card.frontpage-feature-card:hover {
        min-height: 0 !important;
        border-radius: 24px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card.frontpage-feature-card::before {
        top: 12px !important;
        left: 12px !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card-body {
        grid-template-rows: auto auto auto auto !important;
        row-gap: 10px !important;
        padding: 16px 14px 14px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card img {
        width: 96px !important;
        height: 96px !important;
        padding: 8px !important;
        border-radius: 20px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card h2 {
        margin: 0 !important;
        font-size: 1.28rem !important;
        line-height: 1.12 !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card h3 {
        margin: 0 !important;
        min-height: 0 !important;
        padding: 10px 12px !important;
        font-size: 12.5px !important;
        line-height: 1.28 !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card p {
        margin: 0 !important;
        padding: 12px 12px 14px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    html body#page-site-index.notloggedin #theme_switch_link {
        display: none !important;
    }
}

@media (max-width: 479.98px) {
    html body#page-site-index.notloggedin nav.navbar {
        padding: 8px 10px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header {
        padding: 12px 10px 18px !important;
        border-radius: 0 0 24px 24px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #page-header.frontpage-guest-header #intro h1,
    html body#page-site-index.notloggedin #page.frontpage-guest-page #mooveslideshow .carousel-caption .title {
        padding: 18px 16px 16px !important;
        border-radius: 22px !important;
        font-size: clamp(1.34rem, 7vw, 1.78rem) !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page #boxForm .card-body {
        padding: 20px 16px 18px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .container {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card-body {
        row-gap: 9px !important;
        padding: 14px 12px 12px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card img {
        width: 88px !important;
        height: 88px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card h2 {
        font-size: 1.18rem !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card h3 {
        padding: 9px 11px !important;
        font-size: 12px !important;
    }

    html body#page-site-index.notloggedin #page.frontpage-guest-page .frontpage-marketing .card p {
        padding: 11px 11px 12px !important;
        font-size: 12.6px !important;
        line-height: 1.46 !important;
        text-align: center !important;
    }
}