@font-face {
    font-family: 'NAMU 1750';
    src: url("/static/fonts/namu_1750.1a4303357518.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'IBM Plex Sans';
    src: url("/static/fonts/IBMPlexSans-VariableFont_wdth,wght.d08bceeb7cd6.woff2") format('woff2');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-display: swap;
}

@font-face {
    font-family: 'Helvetica Regular';
    src: url("/static/fonts/helvetica_regular.3b55940461a8.woff2") format('woff2');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-display: swap;
}

@font-face {
    font-family: 'Inria Sans';
    src: url("/static/fonts/inria-sans-v15-latin-regular.315d3be2aa9c.woff2") format('woff2');
    font-weight: 100 900;
    font-stretch: 75% 125%;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url("/static/fonts/FiraSans-Bold.413d3b47c24e.woff2") format('woff2');
    font-weight: 700;
    font-stretch: 75% 125%;
    font-display: swap;
}

@font-face {
    font-family: 'Fira Sans';
    src: url("/static/fonts/FiraSans-Regular.f665a2d95f0d.woff2") format('woff2');
    font-weight: 400;
    font-stretch: 75% 125%;
    font-display: swap;
}

/** {*/
/*    border: 1px solid red;*/
/*}*/

:root {
    --font-namu: 'NAMU 1750', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-ibm: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-helvetica: 'Helvetica Regular', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-inria-sans: 'Inria Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --color-light-gray: #F3F3F6;
    --color-koamaru-dark: #3146AE;
    --color-koamaru-light: #2B3771;
    --color-chinese-black: #0D0C22;
    --color-ukraine-blue: #13122E;
    --color-ancilliary: #E0EB92;
    --color-body-font: #363646;
    --color-stroke: #CFCED3;
    --color-border-content: rgba(11, 11, 11, 0.10);

    --marquee-duration: 25s;

}

/** {*/
/*    outline: 1px solid red;*/
/*}*/

html {
    scroll-behavior: smooth;
    scroll-padding-top: 160px;
}

body {
    font-family: 'NAMU 1750', -apple-system, BlinkMacSystemFont, sans-serif;
    /*font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;*/
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

@media (max-width: 640px) {
    body {
        font-size: 16px; /* Regular smartphones */
    }
}

@media (max-width: 400px) {
    body {
        font-size: 14px; /* Small-screen smartphones */
    }
}

.container-96 {
    width: 100%;
    @media (width >= 40rem) {
        max-width: 40rem;
    }
    @media (width >= 48rem) {
        max-width: 48rem;
    }
    @media (width >= 64rem) {
        max-width: 64rem;
    }
    @media (width >= 96rem) {
        max-width: 1128px;
    }
}

.container-1320 {
    width: 100%;
    margin: 0 auto;
    @media (width >= 40rem) {
        max-width: 40rem;
    }
    @media (width >= 48rem) {
        max-width: 48rem;
    }
    @media (width >= 64rem) {
        max-width: 64rem;
    }
    @media (width >= 96rem) {
        max-width: 82.5rem;
    }
}

/*shoelace.style*/
/*sl-drawer:not(:defined),*/
/*sl-carousel:not(:defined),*/
/*sl-details:not(:defined) {*/
/*    display: none;*/
/*}*/

/*sl-input:not(:defined),*/
/*sl-select:not(:defined),*/
/*sl-textarea:not(:defined),*/
/*sl-details:not(:defined) {*/
/*  visibility: hidden;*/
/*  opacity: 0;*/
/*}*/

/*sl-input,*/
/*sl-select,*/
/*sl-textarea,*/
/*sl-details {*/
/*  visibility: visible;*/
/*  opacity: 1;*/
/*  transition: opacity 0.3s ease-in;*/
/*}*/

sl-drawer:not(:defined) {
    display: none;
}

/*skeleton*/

@keyframes shine {
    0% {
        background-position: -32px;
    }
    40%, 100% {
        background-position: 208px;
    }
}

sl-input:not(:defined) > * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

sl-input.input-skeleton:not(:defined) {
    display: block;
    width: 100%;
    height: 67px;
    border-radius: 8px;
    background: linear-gradient(90deg, #ececec 0px, #f4f4f4 40px, #ececec 80px);
    background-size: 250px 100%;
    animation: shine 2s infinite ease-out;
}

sl-details:not(:defined) > * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


sl-details.exclusive_access_widget:not(:defined) {
    display: block;
    width: 100%;
    height: 56px;
    border-radius: 8px;
    /*background: linear-gradient(90deg, #ececec 0px, #f4f4f4 40px, #ececec 80px);*/
    background: white;
    background-size: 250px 100%;
    animation: shine 2s infinite ease-out;
}

sl-select:not(:defined) > * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/*end*/

/*shoelace.style end*/

/* Fonts */
.font-namu {
    font-family: var(--font-namu), sans-serif;
}

.font-ibm {
    font-family: var(--font-ibm), sans-serif;
}

.font-helvetica {
    font-family: var(--font-helvetica), sans-serif;
}

.font-inria-sans {
    font-family: var(--font-inria-sans), sans-serif;
}

/* Text colors */
.text-light-gray {
    color: var(--color-light-gray);
}

.text-koamaru-dark {
    color: var(--color-koamaru-dark);
}

.text-koamaru-light {
    color: var(--color-koamaru-light);
}

.text-chinese-black {
    color: var(--color-chinese-black);
}

.text-ukraine-blue {
    color: var(--color-ukraine-blue);
}

.text-ancilliary {
    color: var(--color-ancilliary);
}

.text-body-font {
    color: var(--color-body-font);
}

.text-stroke {
    color: var(--color-stroke);
}

/* Backgrounds */
.bg-light-gray {
    background-color: var(--color-light-gray);
}

.bg-koamaru-dark {
    background-color: var(--color-koamaru-dark);
}

.bg-koamaru-light {
    background-color: var(--color-koamaru-light);
}

.bg-chinese-black {
    background-color: var(--color-chinese-black);
}

.bg-ukraine-blue {
    background-color: var(--color-ukraine-blue);
}

.bg-ancilliary {
    background-color: var(--color-ancilliary);
}

.bg-body-font {
    background-color: var(--color-body-font);
}

.bg-stroke {
    background-color: var(--color-stroke);
}

/* Borders */
.border-light-gray {
    border-color: var(--color-light-gray);
}

.border-koamaru-dark {
    border-color: var(--color-koamaru-dark);
}

.border-koamaru-light {
    border-color: var(--color-koamaru-light);
}

.border-chinese-black {
    border-color: var(--color-chinese-black);
}

.border-ukraine-blue {
    border-color: var(--color-ukraine-blue);
}

.border-ancilliary {
    border-color: var(--color-ancilliary);
}

.border-body-font {
    border-color: var(--color-body-font);
}

.border-stroke {
    border-color: var(--color-stroke);
}

.header {
    background-color: var(--color-chinese-black);
}

.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.language-switcher__flag {
    font-size: 18px;
    line-height: 1;
    pointer-events: none;
}

.language-switcher__label {
    display: none;
}

.language-switcher__select {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    outline: none;
    padding: 5px 20px 5px 0;
    font-family: var(--font-ibm), sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    cursor: pointer;
}

.language-switcher__select option {
    background: var(--color-chinese-black);
    color: #fff;
}



@media (min-width: 640px) {
    .header {
        transition: background-color 0.3s ease;
    }

    body.home-page .header {
        background-color: transparent;
    }

    body.home-page .header.scrolled {
        background-color: var(--color-chinese-black);
    }

    body.inner-page .header {
        background-color: var(--color-chinese-black);
    }

    .header.scrolled {
        background-color: var(--color-chinese-black);
    }
}

.actual {
    background-color: var(--color-ukraine-blue);
    background: radial-gradient(ellipse 1600px 700px at 95% 5%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 30%, transparent 50%),
    var(--color-ukraine-blue);
}

.actual sl-carousel::part(base) {
    height: 460px;
}

/*burger menu*/
.nav_burger {
    width: 100%;
    max-width: 470px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
}

.nav_link_burger {
    white-space: nowrap;
    color: var(--color-light-gray);
    font-weight: 500;
    cursor: pointer;
    font-size: 16px;
}

.active {
    color: var(--color-light-gray);
}

sl-drawer.drawer-placement-start::part(panel) {
    background: var(--color-ukraine-blue);
}

sl-drawer.drawer-placement-start::part(title) {
    color: var(--color-light-gray);
}

.btn-close-menu::part(base) {
    color: var(--color-light-gray);
}

/*burger end*/

.clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/*start*/
.slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and old Edge */
}

.slider .slider-track {
    display: flex;
    gap: 15px;
    margin: 0 auto;
}

.slider .slide {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    border-radius: 10px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: white;
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.progress {
    height: 100%;
    width: 10%;
    background: var(--color-koamaru-light);
    transition: width 0.2s;
}

/*end*/

sl-input::part(form-control-label),
sl-select::part(form-control-label),
sl-textarea::part(form-control-label) {
    color: var(--color-chinese-black);
    font-family: var(--font-ibm), sans-serif;
    margin-bottom: 6px;
}

sl-input::part(base),
sl-select::part(base),
sl-textarea::part(base) {
    border-radius: 8px;
    border: 1px solid var(--color-stroke);
    font-family: var(--font-ibm), sans-serif;
    color: var(--color-body-font);
}

sl-select::part(combobox) {
    margin-top: 4px;
}

sl-textarea::part(textarea) {
    resize: none;
    height: 88px;
}

sl-option[data-current]::part(base) {
    background-color: var(--color-koamaru-light);
    /*color: white;*/
}

sl-checkbox::part(control control--checked) {
    border-color: var(--color-koamaru-light);
    background-color: var(--color-koamaru-light);
}

.btn {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-inline: 24px;
    padding-block: 12px;
    border-radius: 8px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 300;
    font-size: 14px;
    transition: all 0.2s ease-in-out;
    @media (width > 48rem) {
        width: fit-content;
    }
}

.btn:hover {
    opacity: 0.9;
}

.btn:active {
    opacity: 1;
    transform: scale(0.98);
}

.btn:disabled,
.btn.disabled {
    color: white !important;
    background-color: var(--color-stroke) !important;
    cursor: default;
    opacity: 1;
    pointer-events: none;
    border: none !important;
}

.btn-blue {
    background-color: var(--color-koamaru-light);
    color: white;
}

.btn-ukraine-blue {
    background-color: var(--color-ukraine-blue);
    color: white;
}

.btn-white {
    border: 1px solid var(--color-body-font);
    color: var(--color-body-font);
    background-color: transparent;
}

.btn-white:hover {
    opacity: 1;
    background-color: var(--color-slate-100);
}

.btn-white:active {
    background-color: transparent;
}

.btn-chinese-white {
    background-color: white;
    color: var(--color-chinese-black);
}

.btn-chinese-white:hover {
    opacity: 1;
    background-color: var(--color-slate-100);
}

.btn-chinese-white:active {
    background-color: var(--color-slate-200);
}

.btn-koamaru-light {
    border: 1px solid var(--color-koamaru-light);
    color: var(--color-koamaru-light);
    background-color: transparent;
}

.btn-koamaru-light:hover {
    opacity: 1;
    background-color: var(--color-slate-100);
}

.btn-koamaru-light:active {
    background-color: transparent;
}

.btn-koamaru {
    border: 1px solid var(--color-koamaru-light);
    background-color: var(--color-koamaru-light);
    color: var(--color-slate-100);
}

.btn-koamaru:hover {
    opacity: 0.9;
}

.btn-koamaru:active {
    opacity: 0.8;
}

.btn-transparent {
    border: 1px solid white;
    background-color: transparent;
    color: var(--color-slate-100);
}

.btn-transparent:hover {
    border: 1px solid var(--color-slate-300);
}

.btn-transparent:active {
    opacity: 0.8;
}

.btn-gray {
    border: 1px solid var(--color-body-font);
    background-color: var(--color-light-gray);
    color: var(--color-body-font);
}

.btn-gray:hover {
    background-color: var(--color-gray-200);
    opacity: 1;
}

.btn-gray:active {
    background-color: var(--color-slate-100);
}


.btn-gray {
    border: 1px solid var(--color-body-font);
    background-color: var(--color-light-gray);
    color: var(--color-body-font);
}

.btn-gray:hover {
    background-color: var(--color-gray-200);
    opacity: 1;
}

.btn-gray:active {
    background-color: var(--color-slate-100);
}



.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

/* Infinite Scroll for Partners */
.marquee-container {
    overflow: hidden;
    user-select: none;
    width: 100%;
    position: relative;
    display: flex;
}

.marquee-content {
    display: flex;
    flex-shrink: 0;
    gap: 40px;
    padding-right: 40px;
    align-items: center;
    will-change: transform;
    animation: marquee-scroll linear infinite;
    animation-duration: var(--marquee-duration, 20s);
}

.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-100%, 0, 0);
    }
}

.pagination .page-link {
    height: 36px;
    width: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.pagination .page-link.active {
    background-color: var(--color-koamaru-light);
    color: white;
}

.table {
    width: 100%;
}

.table th {
    padding: 12px;
    white-space: nowrap;
    font-family: var(--font-namu), sans-serif;
    color: var(--color-chinese-black);
    font-weight: 300;
    border-bottom: 1px solid var(--color-stroke);
    text-align: start;
}

.table tbody tr {
    border-bottom: 1px solid var(--color-stroke);
}

.table tbody tr th,
.table tbody tr td:nth-child(3),
.table tbody tr td:nth-child(4) {
    font-family: var(--font-ibm), sans-serif;
    color: var(--color-body-font);
    padding: 12px;
    white-space: nowrap;
}

.table tbody tr td:nth-child(2) {
    font-family: var(--font-ibm), sans-serif;
    color: var(--color-koamaru-light);
    padding: 12px;
    text-decoration: underline;
}

.list-disc {
    list-style-type: disc;
    padding-left: 1.5rem;
}

sl-details::part(base) {
    border-radius: 8px;
}

sl-details::part(summary) {
    font-family: var(--font-namu), sans-serif;
    color: var(--color-chinese-black);
    font-size: 20px;
    font-weight: 300;
}

sl-details::part(content) {
    padding-top: 0;
}

sl-details.exclusive_access_widget::part(base) {
    border: none;
}

.render_blog_card__body p {
    text-wrap: wrap;
}

.unreset-ui ul {
  list-style: disc;
  margin-left: 1.5rem;
}

.unreset-ui ol {
  list-style: decimal;
  margin-left: 1.5rem;
}

.unreset-ui li {
  display: list-item;
}

.custom-body {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 140%;
    color: #363646;
}

.custom-body p {
    margin-bottom: 1em;
}

.custom-body h1 {
    font-family: NAMU, sans-serif;
    font-size: 32px;
    font-weight: 300;
    line-height: 120%;
    color: #0D0C22;
    margin-bottom: 0.5em;
    margin-top: 1em;
}

.custom-body h2 {
    font-family: NAMU, sans-serif;
    font-size: 26px;
    font-weight: 300;
    line-height: 120%;
    color: #0D0C22;
    margin-bottom: 0.5em;
    margin-top: 1em;
}

.custom-body h3 {
    font-family: NAMU, sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 120%;
    color: #0D0C22;
    margin-bottom: 0.5em;
    margin-top: 1em;
}

.custom-body h4,
.custom-body h5,
.custom-body h6 {
    font-family: NAMU, sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 120%;
    color: #0D0C22;
    margin-bottom: 0.4em;
    margin-top: 0.8em;
}

.custom-body strong,
.custom-body b {
    font-weight: 700;
}

.custom-body em,
.custom-body i {
    font-style: italic;
}

.custom-body u {
    text-decoration: underline;
}

.custom-body s {
    text-decoration: line-through;
}

.custom-body ul {
    list-style: disc;
    margin-left: 1.5rem;
    margin-bottom: 1em;
}

.custom-body ol {
    list-style: decimal;
    margin-left: 1.5rem;
    margin-bottom: 1em;
}

.custom-body li {
    margin-bottom: 0.25em;
}

.custom-body a {
    color: #0D0C22;
    text-decoration: underline;
}

.custom-body a:hover {
    opacity: 0.7;
}

.custom-body blockquote {
    border-left: 3px solid #0D0C22;
    padding-left: 1rem;
    margin: 1em 0;
    color: #363646;
    font-style: italic;
}

.custom-body code {
    background: #f1f5f9;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

.custom-body pre {
    background: #f1f5f9;
    padding: 1em;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1em;
}

.custom-body pre code {
    background: none;
    padding: 0;
}

.custom-body img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0.5em 0;
}

.custom-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
    font-size: 14px;
}

.custom-body th,
.custom-body td {
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    text-align: left;
}

.custom-body th {
    font-weight: 600;
    color: #0D0C22;
}

.custom-body hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 1.5em 0;
}


/* Navigation dropdown customization */
/* Removed sl-dropdown styles as they were replaced by pure CSS implementation */

/* Chevron animation */
.nav-chevron {
    transition: transform 0.2s ease;
}

.bg-koamaru-dark {
    background-color: var(--color-koamaru-dark);
}

/* Ensure sub-menu stays open when hovering over the bridge */
.group:hover .absolute {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Invisible bridge to prevent menu closing when moving mouse from link to menu */
.group .absolute::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    width: 100%;
    height: 16px;
}