/* =========================================================
   T.K BUSINESS CONSULTING
   PREMIUM NAVBAR SYSTEM  ·  v2 (mobile-performance pass)
   Clean • Smooth • Modern • Responsive

   WHAT CHANGED (visual design is the same):
   1. Removed backdrop-filter (was blurring the whole screen
      on mobile; on the dropdowns it was invisible anyway
      because the background is ~98% opaque).
   2. Removed padding-left transitions (they force layout on
      every frame). Replaced with transform, which is
      GPU-composited.
   3. Hover effects are now wrapped in
      (hover: hover) and (pointer: fine), so they no longer
      "stick" after a tap on phones. Touch gets :active
      feedback instead.
   4. Fixed a bug where tapping the mobile dropdown button
      cancelled its rotate(180deg) because :hover overrode
      the .open state.
   5. Transitions only animate cheap properties
      (transform / opacity / colors), never layout.
   6. Mobile panel gets its own compositor layer, scroll
      containment, overscroll lock, dvh height and
      safe-area padding for notched phones.
   7. Added tap-highlight removal + touch-action for
      instant taps (no 300ms delay).
   8. Desktop dropdowns also open on :focus-within
      (keyboard accessibility).
   9. Header is fixed to the top while scrolling.
  10. Mobile panel width moved to the outer panel so the
      close button / CTA / social icons are no longer cut off.
  11. New flag toggle for the language switch (.tk-lang).
========================================================= */

:root {
    --tk-blue: #1d43fe;
    --tk-blue-dark: #1636d4;
    --tk-navy: #17213a;
    --tk-text: #4f5b70;
    --tk-muted: #8b94a6;
    --tk-border: #e8ebf2;
    --tk-soft-blue: #f3f6ff;
    --tk-soft-blue-2: #f7f9ff;
    --tk-white: #ffffff;

    --tk-shadow-sm: 0 4px 14px rgba(20, 35, 70, 0.06);
    --tk-shadow-md: 0 10px 30px rgba(20, 35, 70, 0.09);
    --tk-shadow-lg: 0 22px 55px rgba(20, 35, 70, 0.13);

    --tk-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Header height. Fallback values here; the small JS snippet
       measures the real height and overrides this variable. */
    --tk-header-h: 89px;
}

@media (max-width: 1199.98px) {
    :root {
        --tk-header-h: 83px;
    }
}

@media (max-width: 991.98px) {
    :root {
        --tk-header-h: 77px;
    }
}

@media (max-width: 575.98px) {
    :root {
        --tk-header-h: 71px;
    }
}

/* =========================================================
   GLOBAL HEADER
========================================================= */

/* =========================================================
   FIXED HEADER: always stays at the top while scrolling.
   The header is taken out of the page flow, so the body gets
   padding equal to the header height to stop content sliding
   underneath it.
========================================================= */

html {
    scroll-padding-top: var(
        --tk-header-h
    ); /* in-page #anchors aren't hidden under the header */
}

body {
    padding-top: var(--tk-header-h);
}

.transparent-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
}

/* The theme's own sticky script swaps the header to another
   position and plays a slide-in animation. Cancel that so it
   doesn't fight the fixed wrapper (and so no transform exists
   on the header, which would misplace the mobile menu). */
.transparent-header .tg-header__area {
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

.transparent-header .tg-header__area,
.transparent-header.tg-header__area,
.tg-header__area.sticky-menu,
.tg-header__area.sticky {
    animation: none !important;
    transform: none !important;
}

/* The theme's spacer element is no longer needed */
#header-fixed-height {
    display: none !important;
}

.tg-header__area {
    position: relative;
    width: 100%;
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid rgba(23, 33, 58, 0.06);
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

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

.tg-header__area.sticky-menu,
.tg-header__area.sticky,
.tg-header__area.is-scrolled {
    background: rgba(255, 255, 255, 0.985);
    border-bottom-color: rgba(29, 67, 254, 0.07);
    box-shadow: 0 8px 30px rgba(20, 35, 70, 0.07);
}

/* =========================================================
   HEADER CONTAINER
========================================================= */

.tgmenu__wrap {
    width: 100%;
}

.tgmenu__nav {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 88px;
    gap: 25px;
}

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

.logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: 15px;
}

.logo a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.logo img {
    display: block;
    width: auto !important;
    height: 70px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    transition: transform 0.3s var(--tk-ease);
}

/* Logo hover only on real hover devices (mouse / trackpad).
   drop-shadow filter is expensive, so it stays desktop-only. */
@media (hover: hover) and (pointer: fine) {
    .logo img {
        transition:
            transform 0.3s var(--tk-ease),
            filter 0.3s ease;
    }

    .logo:hover img {
        transform: translateY(-1px) scale(1.025);
        filter: drop-shadow(0 6px 14px rgba(29, 67, 254, 0.08));
    }
}

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

.tgmenu__navbar-wrap {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
}

.tgmenu__navbar-wrap > ul.navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 3px;
    list-style: none;
}

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

.tgmenu__navbar-wrap .navigation > li {
    position: relative;
    margin: 0;
    padding: 0;
}

/* Dropdown items get extra interaction space.
   Removes the "gap problem" when moving into the dropdown. */
@media (min-width: 992px) {
    .tgmenu__navbar-wrap .navigation > li.menu-item-has-children {
        padding-bottom: 10px;
        margin-bottom: -10px;
    }
}

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

.tgmenu__navbar-wrap .navigation > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 10px;
    color: var(--tk-text);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

/* =========================================================
   NAV HOVER
========================================================= */

.tgmenu__navbar-wrap .navigation > li:hover > a {
    color: var(--tk-blue);
    background: var(--tk-soft-blue);
}

/* =========================================================
   NAV ACTIVE
========================================================= */

.tgmenu__navbar-wrap .navigation > li.active > a {
    color: var(--tk-blue);
    background: rgba(29, 67, 254, 0.07);
}

/* Active line (animated with transform, not width) */

.tgmenu__navbar-wrap .navigation > li.active > a::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 22px;
    height: 2px;
    border-radius: 20px;
    background: var(--tk-blue);
    transform: translateX(-50%) scaleX(0.727); /* 16px / 22px */
    transition: transform 0.25s var(--tk-ease);
}

.tgmenu__navbar-wrap .navigation > li:hover > a::before {
    transform: translateX(-50%) scaleX(1);
}

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

.tgmenu__navbar-wrap .navigation > li.menu-item-has-children > a::after {
    content: "\f107";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    border-radius: 50%;
    background: #f1f4fb;
    color: #7d8799;
    font-family: "Font Awesome 5 Free";
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    transition:
        transform 0.35s var(--tk-ease),
        background-color 0.25s ease,
        color 0.25s ease;
}

.tgmenu__navbar-wrap .navigation > li.menu-item-has-children:hover > a::after {
    background: rgba(29, 67, 254, 0.1);
    color: var(--tk-blue);
    transform: rotate(180deg);
}

/* =========================================================
   DROPDOWN HOVER BRIDGE
========================================================= */

@media (min-width: 992px) {
    .tgmenu__navbar-wrap .navigation > li.menu-item-has-children::after {
        content: "";
        position: absolute;
        left: -12px;
        right: -12px;
        top: 100%;
        height: 20px;
        background: transparent;
        pointer-events: auto;
    }
}

/* =========================================================
   MEGA MENU
   (backdrop-filter removed: the background is ~98% opaque,
   so the blur was invisible but still costly to render.)
========================================================= */

.tg-mega-menu-wrap {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    width: min(780px, calc(100vw - 40px));
    margin: 0;
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px) scale(0.985);
    transform-origin: top center;
    background: #ffffff;
    border: 1px solid rgba(29, 67, 254, 0.09);
    border-radius: 18px;
    box-shadow:
        0 8px 20px rgba(20, 35, 70, 0.04),
        0 22px 55px rgba(20, 35, 70, 0.12),
        0 2px 5px rgba(29, 67, 254, 0.04);
    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.32s var(--tk-ease);
    z-index: 9999;
}

/* Mega menu arrow */

.tg-mega-menu-wrap::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-left: 1px solid rgba(29, 67, 254, 0.09);
    border-top: 1px solid rgba(29, 67, 254, 0.09);
    transform: translateX(-50%) rotate(45deg);
    z-index: -1;
}

/* Mega menu blue accent */

.tg-mega-menu-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 28px;
    width: 38px;
    height: 3px;
    border-radius: 0 0 8px 8px;
    background: var(--tk-blue);
    opacity: 0.9;
}

/* Show mega menu (hover + keyboard focus) */

.tgmenu__navbar-wrap .navigation > li:hover > .tg-mega-menu-wrap,
.tgmenu__navbar-wrap .navigation > li:focus-within > .tg-mega-menu-wrap {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

/* =========================================================
   MEGA MENU GRID
========================================================= */

.tg-mega-menu-wrap .row {
    margin-left: -6px;
    margin-right: -6px;
}

.tg-mega-menu-wrap .row > * {
    padding-left: 6px;
    padding-right: 6px;
}

/* =========================================================
   MEGA MENU ITEM
========================================================= */

.tg-mega-menu-wrap .mega-menu-item {
    position: relative;
    height: 100%;
    overflow: hidden;
    border: 1px solid #edf0f5;
    border-radius: 13px;
    background: #ffffff;
    transition:
        border-color 0.25s ease,
        box-shadow 0.3s ease,
        transform 0.3s var(--tk-ease);
}

.tg-mega-menu-wrap .mega-menu-item:hover {
    border-color: rgba(29, 67, 254, 0.18);
    box-shadow: 0 10px 26px rgba(29, 67, 254, 0.09);
    transform: translateY(-3px);
}

/* Mega thumbnail */

.tg-mega-menu-wrap .mega-menu-thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1.5 / 1;
    background: #f4f6fa;
}

.tg-mega-menu-wrap .mega-menu-thumb a {
    display: block;
    width: 100%;
    height: 100%;
}

.tg-mega-menu-wrap .mega-menu-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--tk-ease);
}

.tg-mega-menu-wrap .mega-menu-item:hover .mega-menu-thumb img {
    transform: scale(1.07);
}

/* Mega image overlay */

.tg-mega-menu-wrap .mega-menu-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(29, 67, 254, 0) 45%,
        rgba(10, 25, 65, 0.22) 100%
    );
    pointer-events: none;
}

/* Mega content */

.tg-mega-menu-wrap .mega-menu-content {
    position: relative;
    padding: 12px 13px 13px;
}

.tg-mega-menu-wrap .mega-menu-content .title {
    margin: 0;
}

.tg-mega-menu-wrap .mega-menu-content .title a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--tk-navy);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Mega arrow */

.tg-mega-menu-wrap .mega-menu-content .title a::after {
    content: "\f061";
    flex: 0 0 auto;
    color: var(--tk-blue);
    font-family: "Font Awesome 5 Free";
    font-size: 8px;
    font-weight: 900;
    opacity: 0;
    transform: translateX(-5px);
    transition:
        opacity 0.2s ease,
        transform 0.25s var(--tk-ease);
}

.tg-mega-menu-wrap .mega-menu-item:hover .mega-menu-content .title a {
    color: var(--tk-blue);
}

.tg-mega-menu-wrap .mega-menu-item:hover .mega-menu-content .title a::after {
    opacity: 1;
    transform: translateX(0);
}

/* Active mega item */

.tg-mega-menu-wrap .mega-menu-item.active {
    border-color: rgba(29, 67, 254, 0.25);
    box-shadow: 0 8px 24px rgba(29, 67, 254, 0.09);
}

.tg-mega-menu-wrap .mega-menu-item.active .mega-menu-content .title a {
    color: var(--tk-blue);
}

/* =========================================================
   SIMPLE DROPDOWN
========================================================= */

.tgmenu__navbar-wrap .navigation > li > .sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    min-width: 220px;
    margin: 0;
    padding: 7px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px) scale(0.985);
    transform-origin: top center;
    background: #ffffff;
    border: 1px solid rgba(29, 67, 254, 0.09);
    border-radius: 15px;
    box-shadow:
        0 8px 20px rgba(20, 35, 70, 0.04),
        0 20px 48px rgba(20, 35, 70, 0.12);
    list-style: none;
    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.3s var(--tk-ease);
    z-index: 9999;
}

/* Simple dropdown arrow */

.tgmenu__navbar-wrap .navigation > li > .sub-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 11px;
    height: 11px;
    background: #ffffff;
    border-left: 1px solid rgba(29, 67, 254, 0.09);
    border-top: 1px solid rgba(29, 67, 254, 0.09);
    transform: translateX(-50%) rotate(45deg);
}

/* Simple dropdown blue accent */

.tgmenu__navbar-wrap .navigation > li > .sub-menu::after {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    width: 30px;
    height: 3px;
    border-radius: 0 0 6px 6px;
    background: var(--tk-blue);
}

/* Show simple dropdown (hover + keyboard focus) */

.tgmenu__navbar-wrap .navigation > li:hover > .sub-menu,
.tgmenu__navbar-wrap .navigation > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

/* =========================================================
   SUBMENU ITEMS
========================================================= */

.tgmenu__navbar-wrap .navigation > li > .sub-menu li {
    position: relative;
    margin: 0;
}

/* Submenu link.
   The hover "slide" now uses transform on the text via ::after
   spacing instead of animating padding-left (which forced layout). */

.tgmenu__navbar-wrap .navigation > li > .sub-menu li a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 41px;
    padding: 0 12px 0 13px;
    border-radius: 9px;
    color: var(--tk-text) !important;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

/* Submenu arrow */

.tgmenu__navbar-wrap .navigation > li > .sub-menu li a::after {
    content: "\f105";
    margin-left: auto;
    color: #a4acba;
    font-family: "Font Awesome 5 Free";
    font-size: 9px;
    font-weight: 900;
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity 0.2s ease,
        transform 0.25s var(--tk-ease),
        color 0.2s ease;
}

/* Submenu hover */

.tgmenu__navbar-wrap .navigation > li > .sub-menu li a:hover {
    color: var(--tk-blue) !important;
    background: #f4f7ff;
}

.tgmenu__navbar-wrap .navigation > li > .sub-menu li a:hover::after {
    opacity: 1;
    color: var(--tk-blue);
    transform: translateX(0);
}

/* Submenu active */

.tgmenu__navbar-wrap .navigation > li > .sub-menu li.active > a {
    color: var(--tk-blue) !important;
    background: rgba(29, 67, 254, 0.07);
}

.tgmenu__navbar-wrap .navigation > li > .sub-menu li.active > a::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 3px;
    height: 17px;
    border-radius: 0 4px 4px 0;
    background: var(--tk-blue);
    transform: translateY(-50%);
}

/* =========================================================
   HEADER ACTIONS
========================================================= */

.tgmenu__action {
    flex: 0 0 auto;
}

.tgmenu__action > ul {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Contact button */

.tgmenu__action .tg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--tk-blue);
    border-radius: 10px;
    background: var(--tk-blue);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(29, 67, 254, 0.16);
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s var(--tk-ease);
}

.tgmenu__action .tg-btn:hover {
    background: var(--tk-blue-dark);
    border-color: var(--tk-blue-dark);
    box-shadow: 0 9px 22px rgba(29, 67, 254, 0.22);
    transform: translateY(-1px);
}

/* Language / header button */

.tgmenu__action .header-btn {
    display: flex;
    align-items: center;
}

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

.mobile-nav-toggler {
    position: relative !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto;
    width: 43px !important;
    height: 43px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e1e6f0 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    color: var(--tk-blue) !important;
    cursor: pointer !important;
    box-shadow: var(--tk-shadow-sm) !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s var(--tk-ease) !important;
}

.mobile-nav-toggler i {
    display: block !important;
    color: var(--tk-blue) !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

/* Inner border */

.mobile-nav-toggler::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(29, 67, 254, 0.06);
    border-radius: 8px;
    pointer-events: none;
}

/* Touch feedback (instant, no sticky hover) */

.mobile-nav-toggler:active {
    background: #f7f9ff !important;
    border-color: rgba(29, 67, 254, 0.3) !important;
    transform: scale(0.94) !important;
}

/* Mouse hover only */

@media (hover: hover) and (pointer: fine) {
    .mobile-nav-toggler:hover {
        background: #f7f9ff !important;
        border-color: rgba(29, 67, 254, 0.3) !important;
        box-shadow: 0 7px 20px rgba(29, 67, 254, 0.12) !important;
        transform: translateY(-1px);
    }
}

/* =========================================================
   MOBILE MENU OVERLAY
   (blur removed: blurring the full page behind a sliding
   panel is one of the most expensive things on mobile GPUs.
   Slightly darker tint compensates visually.)
========================================================= */

.tgmobile__menu {
    background: rgba(15, 25, 50, 0.4);
}

/* =========================================================
   MOBILE MENU BOX
========================================================= */

.tgmobile__menu-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    padding: 0 !important;
    background: #ffffff;
    box-shadow: -8px 0 32px rgba(15, 30, 60, 0.1);
}

/* Use the real visible viewport height on mobile browsers
   (fixes the address-bar jump / cut-off footer) */
@supports (height: 100dvh) {
    .tgmobile__menu-box {
        height: 100dvh;
    }
}

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

.tk-mob__header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    min-height: 76px;
    padding: 12px 20px;
    overflow: hidden;
    border-bottom: 1px solid #edf0f5;
    background: #ffffff;
}

/* Blue decorative line */

.tk-mob__header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--tk-blue);
}

/* Decorative circle */

.tk-mob__header::after {
    content: "";
    position: absolute;
    right: -34px;
    top: -45px;
    width: 105px;
    height: 105px;
    border-radius: 50%;
    background: rgba(29, 67, 254, 0.045);
    pointer-events: none;
}

.tk-mob__header > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 2;
}

.tk-mob__header img {
    display: block;
    width: auto !important;
    height: 46px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
}

/* =========================================================
   MOBILE CLOSE BUTTON
========================================================= */

.tk-mob__header .close-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #e6e9f0;
    border-radius: 11px;
    background: #f8f9fc;
    color: #566074;
    font-size: 14px;
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.3s var(--tk-ease);
}

.tk-mob__header .close-btn:active {
    border-color: rgba(29, 67, 254, 0.2);
    background: var(--tk-soft-blue);
    color: var(--tk-blue);
    transform: scale(0.92);
}

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

.tk-mob__scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 7px 0 12px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* stops the page behind from scrolling */
    contain: content; /* isolates layout/paint from the rest of the page */
    scrollbar-width: thin;
    scrollbar-color: rgba(29, 67, 254, 0.25) transparent;
}

.tk-mob__scroll::-webkit-scrollbar {
    width: 4px;
}

.tk-mob__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.tk-mob__scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(29, 67, 254, 0.22);
}

/* =========================================================
   MOBILE SECTION LABEL
========================================================= */

.tk-mob__section-label {
    position: relative;
    margin: 0;
    padding: 15px 20px 8px;
    color: #a0a7b5;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    line-height: 1.4;
    text-transform: uppercase;
}

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

.tk-mob__nav {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tk-mob__item {
    position: relative;
    margin: 0;
}

/* =========================================================
   MOBILE NAV LINK
   (no padding transition: hover/tap movement is done with
   transform on the label, which never triggers layout)
========================================================= */

.tk-mob__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 8px 20px;
    border-bottom: 1px solid rgba(20, 35, 70, 0.045);
    color: var(--tk-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 0.15s ease;
}

.tk-mob__link:active {
    background: #f1f4ff;
}

/* Active item */

.tk-mob__item.is-active {
    background: #f4f6ff;
}

.tk-mob__item.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 30px;
    border-radius: 0 4px 4px 0;
    background: var(--tk-blue);
    transform: translateY(-50%);
}

.tk-mob__item.is-active .tk-mob__link {
    color: var(--tk-blue);
}

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

.tk-mob__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eef2ff;
    color: var(--tk-blue);
    font-size: 13px;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s var(--tk-ease);
}

/* Keep all icon variants consistent */

.tk-mob__icon--blue,
.tk-mob__icon--teal,
.tk-mob__icon--coral,
.tk-mob__icon--amber,
.tk-mob__icon--purple {
    background: #eef2ff;
    color: var(--tk-blue);
}

/* Active icon (box-shadow is static, never animated) */

.tk-mob__item.is-active .tk-mob__icon {
    background: var(--tk-blue);
    color: #ffffff;
    box-shadow: 0 5px 13px rgba(29, 67, 254, 0.18);
}

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

.tk-mob__label {
    flex: 1;
    color: var(--tk-navy);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    transition:
        color 0.2s ease,
        transform 0.25s var(--tk-ease);
}

.tk-mob__item.is-active .tk-mob__label {
    color: var(--tk-blue);
    font-weight: 700;
}

/* =========================================================
   MOBILE DROPDOWN BUTTON
========================================================= */

html body .tgmobile__menu .navigation li .dropdown-btn,
html body .tgmobile__menu .navigation li .menu-expand {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(29, 67, 254, 0.12) !important;
    border-radius: 9px !important;
    background: #f7f9ff !important;
    background-image: none !important;
    color: var(--tk-blue) !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.3s var(--tk-ease) !important;
}

/* Open */

html body .tgmobile__menu .navigation li.open .dropdown-btn,
html body .tgmobile__menu .navigation li.open .menu-expand {
    background: rgba(29, 67, 254, 0.08) !important;
    border-color: rgba(29, 67, 254, 0.25) !important;
    color: var(--tk-blue) !important;
    transform: rotate(180deg);
}

/* Active */

html body .tgmobile__menu .navigation li.active .dropdown-btn,
html body .tgmobile__menu .navigation li.active .menu-expand {
    border-color: rgba(29, 67, 254, 0.18) !important;
    color: var(--tk-blue) !important;
    background: #f7f9ff !important;
}

/* Touch press feedback. Rotation is preserved when open
   (this fixes the old bug where :hover cancelled the rotate). */

html body .tgmobile__menu .navigation li .dropdown-btn:active,
html body .tgmobile__menu .navigation li .menu-expand:active {
    transform: scale(0.92);
}

html body .tgmobile__menu .navigation li.open .dropdown-btn:active,
html body .tgmobile__menu .navigation li.open .menu-expand:active {
    transform: rotate(180deg) scale(0.92);
}

/* Remove theme backgrounds */

html body .tgmobile__menu .navigation li .dropdown-btn *,
html body .tgmobile__menu .navigation li .menu-expand * {
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
}

/* =========================================================
   ORIGINAL MOBILE NAV LINK OVERRIDE
========================================================= */

html body .tgmobile__menu .navigation li a {
    color: var(--tk-navy) !important;
}

html body .tgmobile__menu .navigation li.active > a {
    color: var(--tk-blue) !important;
}

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

.tk-mob__footer {
    flex-shrink: 0;
    padding: 14px 16px calc(19px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #edf0f5;
    background: #ffffff;
    box-shadow: 0 -5px 20px rgba(20, 35, 70, 0.035);
}

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

.tk-mob__cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 45px;
    margin-bottom: 12px;
    padding: 10px 16px;
    overflow: hidden;
    border-radius: 11px;
    background: var(--tk-blue);
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 7px 18px rgba(29, 67, 254, 0.16);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        background-color 0.2s ease,
        transform 0.2s var(--tk-ease);
}

.tk-mob__cta::before {
    content: "";
    position: absolute;
    top: 0;
    right: -30px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.tk-mob__cta:active {
    background: var(--tk-blue-dark);
    color: #ffffff !important;
    transform: scale(0.98);
}

.tk-mob__cta i {
    position: relative;
    font-size: 12px;
    z-index: 1;
}

/* =========================================================
   MOBILE FOOTER ROW
========================================================= */

.tk-mob__footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

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

.tk-mob__lang {
    display: flex;
    align-items: center;
}

.tk-mob__lang select,
.tk-mob__lang span,
.tk-mob__lang a {
    color: #4f586b !important;
    font-size: 11.5px !important;
    font-weight: 600;
    text-decoration: none;
}

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

.tk-mob__social {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tk-mob__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border: 1px solid #e8ebf1;
    border-radius: 8px;
    background: #f8f9fc;
    color: #667085;
    font-size: 11px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.25s var(--tk-ease);
}

.tk-mob__social a:active {
    border-color: rgba(29, 67, 254, 0.2);
    background: var(--tk-soft-blue);
    color: var(--tk-blue);
    transform: scale(0.92);
}

/* =========================================================
   MOUSE-ONLY HOVER EFFECTS (mobile menu)
   Wrapped so they never get "stuck" after a tap on touch
   screens, which was a big source of the un-smooth feel.
========================================================= */

@media (hover: hover) and (pointer: fine) {
    /* Link: nudge label + icon instead of animating padding */
    .tk-mob__link:hover {
        background: #f8faff;
    }

    .tk-mob__link:hover .tk-mob__label {
        transform: translateX(4px);
    }

    .tk-mob__item:hover .tk-mob__icon {
        transform: scale(1.05);
    }

    /* Close button */
    .tk-mob__header .close-btn:hover {
        border-color: rgba(29, 67, 254, 0.2);
        background: var(--tk-soft-blue);
        color: var(--tk-blue);
        transform: rotate(6deg) scale(1.03);
    }

    /* Dropdown button */
    html body .tgmobile__menu .navigation li .dropdown-btn:hover,
    html body .tgmobile__menu .navigation li .menu-expand:hover {
        background: var(--tk-blue) !important;
        border-color: var(--tk-blue) !important;
        color: #ffffff !important;
        transform: scale(1.04);
    }

    /* Keeps the rotation when open + hovered */
    html body .tgmobile__menu .navigation li.open .dropdown-btn:hover,
    html body .tgmobile__menu .navigation li.open .menu-expand:hover {
        transform: rotate(180deg) scale(1.04);
    }

    /* CTA */
    .tk-mob__cta:hover {
        background: var(--tk-blue-dark);
        color: #ffffff !important;
        transform: translateY(-1px);
    }

    /* Social */
    .tk-mob__social a:hover {
        border-color: rgba(29, 67, 254, 0.2);
        background: var(--tk-soft-blue);
        color: var(--tk-blue);
        transform: translateY(-2px);
    }
}

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

@media (max-width: 1199.98px) {
    .tgmenu__nav {
        min-height: 82px;
        gap: 18px;
    }

    .logo img {
        height: 64px !important;
    }

    .tgmenu__navbar-wrap .navigation > li > a {
        padding: 0 10px;
        font-size: 12.5px;
    }

    .tgmenu__action .tg-btn {
        padding: 0 15px;
    }

    .tg-mega-menu-wrap {
        width: min(700px, calc(100vw - 30px));
    }
}

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

@media (max-width: 991.98px) {
    /* Remove extra vertical padding the theme adds around the bar,
       so the bar height is exactly the nav min-height below. */
    .tg-header__area,
    .tgmenu__wrap,
    .tgmenu__nav {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .tgmenu__nav {
        min-height: 76px;
        justify-content: space-between;
    }

    .logo {
        margin-right: auto;
    }

    .logo img {
        height: 62px !important;
    }

    .tgmenu__navbar-wrap {
        display: none !important;
    }

    .tgmenu__action {
        display: none !important;
    }

    .mobile-nav-toggler {
        display: inline-flex !important;
    }

    /* Hide desktop dropdowns */
    .tg-mega-menu-wrap,
    .tgmenu__navbar-wrap .navigation > li > .sub-menu {
        display: none;
    }

    /* Panel sizing: the width lives on the OUTER panel (the element
       the theme positions), and the inner box simply fills it.
       Setting the width on the inner box made it wider than its
       parent, pushing the close button, CTA and social icons off
       the right edge of the screen. */
    .tgmobile__menu {
        width: min(360px, 86vw) !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }

    .tgmobile__menu-box {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Own compositor layer for the sliding panel: the big
       box-shadow is rasterised once instead of every frame. */
    .tgmobile__menu-box {
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Keep the sticky header calm on scroll: no shadow fade */
    .tg-header__area {
        transition: background-color 0.2s ease;
    }
}

/* =========================================================
   MOBILE MENU WIDTH
========================================================= */

@media (max-width: 767.98px) {
    .tgmobile__menu {
        width: min(340px, 84vw) !important;
    }
}

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

@media (max-width: 575.98px) {
    .tgmenu__nav {
        min-height: 70px;
    }

    .logo img {
        height: 56px !important;
    }

    .mobile-nav-toggler {
        width: 41px !important;
        height: 41px !important;
        border-radius: 10px !important;
    }

    .mobile-nav-toggler i {
        font-size: 15px !important;
    }

    /* Mobile header */
    .tk-mob__header {
        min-height: 68px;
        padding: 11px 17px;
    }

    .tk-mob__header img {
        height: 43px !important;
    }

    /* Mobile close */
    .tk-mob__header .close-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    /* Mobile links */
    .tk-mob__link {
        min-height: 52px;
        padding-left: 17px;
        padding-right: 17px;
    }

    /* Mobile icon */
    .tk-mob__icon {
        flex-basis: 34px;
        width: 34px;
        height: 34px;
        border-radius: 9px;
    }

    /* Section */
    .tk-mob__section-label {
        padding-left: 17px;
        padding-right: 17px;
    }

    /* Footer */
    .tk-mob__footer {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* CTA */
    .tk-mob__cta {
        min-height: 43px;
        border-radius: 10px;
    }

    /* Mobile menu width */
    .tgmobile__menu {
        width: min(320px, 84vw) !important;
    }
}

/* =========================================================
   VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {
    .tgmobile__menu {
        width: min(300px, 86vw) !important;
    }

    .tk-mob__header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tk-mob__link {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tk-mob__section-label {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tk-mob__footer {
        padding-left: 12px;
        padding-right: 12px;
    }

    .tk-mob__label {
        font-size: 13px;
    }
}

/* =========================================================
   LANGUAGE SWITCH  (flag toggle: EN | KH)
   Used by resources/views/livewire/setting/language.blade.php
   Only transform / opacity are animated, so it stays smooth
   on phones. Height (42px) matches the header buttons.
========================================================= */

.tk-lang {
    --tk-lang-opt: 36px;
    --tk-lang-pad: 2px;

    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(2, var(--tk-lang-opt));
    align-items: center;
    padding: var(--tk-lang-pad);
    border: 1px solid #e1e6f0;
    border-radius: 999px;
    background: #f1f4fb;
    isolation: isolate;
    vertical-align: middle;
    transition: opacity 0.2s ease;
}

/* Sliding indicator */

.tk-lang__thumb {
    position: absolute;
    top: var(--tk-lang-pad);
    left: var(--tk-lang-pad);
    width: var(--tk-lang-opt);
    height: var(--tk-lang-opt);
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 0 0 2px var(--tk-blue),
        0 4px 10px rgba(29, 67, 254, 0.18);
    transform: translateX(0);
    transition: transform 0.35s var(--tk-ease);
    will-change: transform;
    z-index: 0;
}

.tk-lang.is-kh .tk-lang__thumb {
    transform: translateX(var(--tk-lang-opt));
}

/* Flag buttons */

.tk-lang__opt {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tk-lang-opt);
    height: var(--tk-lang-opt);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.tk-lang__opt img {
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    opacity: 0.45;
    transform: scale(0.86);
    transition:
        opacity 0.25s ease,
        transform 0.35s var(--tk-ease);
}

/* Selected flag is full colour and full size */

.tk-lang:not(.is-kh) .tk-lang__opt--en img,
.tk-lang.is-kh .tk-lang__opt--kh img {
    opacity: 1;
    transform: scale(1);
}

/* Mouse hover on the flag that is NOT selected */

@media (hover: hover) and (pointer: fine) {
    .tk-lang__opt:hover img {
        opacity: 0.8;
        transform: scale(0.95);
    }
}

/* While the page is switching language */

.tk-lang.is-busy {
    pointer-events: none;
    opacity: 0.85;
}

.tk-lang__opt:focus-visible {
    outline: 2px solid var(--tk-blue);
    outline-offset: 1px;
}

/* Screen-reader-only text */

.tk-lang__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

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

.tgmenu__navbar-wrap .navigation > li > a:focus-visible,
.tgmenu__action .tg-btn:focus-visible,
.mobile-nav-toggler:focus-visible,
.tk-mob__link:focus-visible,
.tk-mob__cta:focus-visible,
.tk-mob__social a:focus-visible {
    outline: 2px solid var(--tk-blue);
    outline-offset: 3px;
}

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}