@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Jost:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
    font-family: Inter Fallback;
    src: local("Arial");
    ascent-override: 90.44%;
    descent-override: 22.52%;
    line-gap-override: 0.00%;
    size-adjust: 107.12%
}

.__className_8a43de {
    font-family: Inter, Inter Fallback;
    font-style: normal
}

.__variable_8a43de {
    --body-font: "Inter", "Inter Fallback"
}


.__className_2e2523 {
    font-family: Jost, Jost Fallback;
    font-style: normal
}

.__variable_2e2523 {
    --heading-font: "Jost", "Jost Fallback"
}

:root {
    --f-button-width: 40px;
    --f-button-height: 40px;
    --f-button-border: 0;
    --f-button-border-radius: 0;
    --f-button-color: #374151;
    --f-button-bg: #f8f8f8;
    --f-button-shadow: none;
    --f-button-transition: all .15s ease;
    --f-button-transform: none;
    --f-button-outline-width: 1px;
    --f-button-outline-color: rgba(0, 0, 0, .7);
    --f-button-svg-width: 20px;
    --f-button-svg-height: 20px;
    --f-button-svg-stroke-width: 1.5;
    --f-button-svg-fill: none;
    --f-button-svg-filter: none;
    --f-button-svg-opacity: 1;
    --f-button-svg-disabled-opacity: .5;
    --f-button-svg-transition: opacity .15s ease;
    --f-button-svg-transform: none
}

.f-button {
    width: var(--f-button-width);
    height: var(--f-button-height);
    border: var(--f-button-border);
    border-radius: var(--f-button-border-radius);
    color: var(--f-button-color);
    background: var(--f-button-bg);
    box-shadow: var(--f-button-shadow);
    transform: var(--f-button-transform);
    transition: var(--f-button-transition);
    -webkit-backdrop-filter: var(--f-button-backdrop-filter);
    backdrop-filter: var(--f-button-backdrop-filter);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
    position: relative;
    margin: 0;
    padding: 0;
    pointer-events: all;
    cursor: pointer;
    overflow: hidden
}

@media (hover:hover) {
    .f-button:hover:not([aria-disabled]) {
        color: var(--f-button-hover-color, var(--f-button-color));
        background-color: var(--f-button-hover-bg, var(--f-button-bg))
    }
}

.f-button:active:not([aria-disabled]) {
    color: var(--f-button-active-color, var(--f-button-hover-color, var(--f-button-color)));
    background-color: var(--f-button-active-bg, var(--f-button-hover-bg, var(--f-button-bg)))
}

.f-button:focus {
    outline: none
}

.f-button:focus-visible {
    outline: var(--f-button-outline-width) solid var(--f-button-outline-color);
    outline-offset: var(--f-button-outline-offset);
    position: relative;
    z-index: 1
}

.f-button svg {
    width: var(--f-button-svg-width);
    height: var(--f-button-svg-height);
    transform: var(--f-button-svg-transform);
    fill: var(--f-button-svg-fill);
    filter: var(--f-button-svg-filter);
    opacity: var(--f-button-svg-opacity, 1);
    transition: var(--f-button-svg-transition);
    stroke: currentColor;
    stroke-width: var(--f-button-svg-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none
}

.f-button[aria-disabled] {
    cursor: default
}

.f-button[aria-disabled] svg {
    opacity: var(--f-button-svg-disabled-opacity)
}

[data-panzoom-action=toggleFS] g:first-child {
    display: flex
}

.in-fullscreen [data-panzoom-action=toggleFS] g:first-child,
[data-panzoom-action=toggleFS] g:last-child {
    display: none
}

.in-fullscreen [data-panzoom-action=toggleFS] g:last-child,
[data-autoplay-action=toggle] svg g:first-child {
    display: flex
}

.has-autoplay [data-autoplay-action=toggle] svg g:first-child,
[data-autoplay-action=toggle] svg g:last-child {
    display: none
}

.has-autoplay [data-autoplay-action=toggle] svg g:last-child {
    display: flex
}

:-webkit-full-screen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:first-child {
    display: none
}

:fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:first-child {
    display: none
}

:-webkit-full-screen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:last-child {
    display: flex
}

:fullscreen [data-fullscreen-action=toggle] svg [data-fullscreen-action=toggle] svg g:last-child {
    display: flex
}

:root {
    --f-spinner-color-1: rgba(0, 0, 0, .1);
    --f-spinner-color-2: rgba(17, 24, 28, .8);
    --f-spinner-width: 50px;
    --f-spinner-height: 50px;
    --f-spinner-border-radius: 50%;
    --f-spinner-border-width: 4px
}

.f-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: calc(var(--f-spinner-width) * -.5) 0 0 calc(var(--f-spinner-height) * -.5);
    padding: 0;
    width: var(--f-spinner-width);
    height: var(--f-spinner-height);
    border-radius: var(--f-spinner-border-radius);
    border: var(--f-spinner-border-width) solid var(--f-spinner-color-1);
    border-top-color: var(--f-spinner-color-2);
    animation: f-spinner .75s linear infinite, f-fadeIn .2s ease .2s both
}

@keyframes f-spinner {
    to {
        transform: rotate(1turn)
    }
}

.f-panzoom,
.f-zoomable {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-direction: column
}

.f-panzoom:after,
.f-panzoom:before,
.f-zoomable:after,
.f-zoomable:before {
    display: block;
    content: ""
}

.f-panzoom:not(.has-controls):before,
.f-zoomable:not(.has-controls):before {
    margin-bottom: auto
}

.f-panzoom:after,
.f-zoomable:after {
    margin-top: auto
}

.f-panzoom.in-fullscreen,
.f-zoomable.in-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    z-index: 9999
}

.f-panzoom__wrapper {
    position: relative;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%
}

.f-panzoom__wrapper.will-zoom-out {
    cursor: zoom-out
}

.f-panzoom__wrapper.can-drag {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab
}

.f-panzoom__wrapper.will-zoom-in {
    cursor: zoom-in
}

.f-panzoom__wrapper.is-dragging {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.f-panzoom__wrapper.has-error {
    display: none
}

.f-panzoom__content {
    display: block;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%
}

.f-panzoom__content.has-lazyerror,
.f-panzoom__content.is-lazyloading {
    visibility: hidden
}

img.f-panzoom__content {
    width: auto;
    height: auto;
    vertical-align: top;
    object-fit: contain;
    transition: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.f-panzoom__wrapper>.f-panzoom__content {
    visibility: hidden
}

.f-panzoom__viewport {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.f-panzoom__viewport>.f-panzoom__content {
    width: 100%;
    height: 100%;
    object-fit: fill
}

picture.f-panzoom__content img {
    vertical-align: top;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    transition: none
}

.f-panzoom__protected,
picture.f-panzoom__content img {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.f-panzoom__protected {
    position: absolute;
    inset: 0;
    z-index: 1
}

html.with-panzoom-in-fullscreen {
    overflow: hidden
}

.f-fadeIn {
    animation: var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;
    z-index: 2
}

.f-fadeOut {
    animation: var(--f-transition-duration, .2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;
    z-index: 1
}

@keyframes f-fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes f-fadeOut {
    to {
        opacity: 0
    }
}

.f-crossfadeIn {
    animation: var(--f-transition-duration, .2s) ease both f-crossfadeIn;
    z-index: 2
}

.f-crossfadeOut {
    animation: calc(var(--f-transition-duration, .2s) * .2) ease calc(var(--f-transition-duration, .2s) * .8) both f-crossfadeOut;
    z-index: 1
}

@keyframes f-crossfadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes f-crossfadeOut {
    to {
        opacity: 0
    }
}

.is-horizontal .f-slideIn.from-next {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideInNextX
}

.is-horizontal .f-slideIn.from-prev {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideInPrevX
}

.is-horizontal .f-slideOut.to-next {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideOutNextX
}

.is-horizontal .f-slideOut.to-prev {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideOutPrevX
}

@keyframes f-slideInPrevX {
    0% {
        transform: translate(calc(100% + var(--f-carousel-gap, 0)))
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes f-slideInNextX {
    0% {
        transform: translate(calc(-100% - var(--f-carousel-gap, 0)))
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes f-slideOutNextX {
    to {
        transform: translate(calc(-100% - var(--f-carousel-gap, 0)))
    }
}

@keyframes f-slideOutPrevX {
    to {
        transform: translate(calc(100% + var(--f-carousel-gap, 0)))
    }
}

.is-vertical .f-slideIn.from-next {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideInNextY
}

.is-vertical .f-slideIn.from-prev {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideInPrevY
}

.is-vertical .f-slideOut.to-next {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideOutNextY
}

.is-vertical .f-slideOut.to-prev {
    animation: var(--f-transition-duration, .85s) cubic-bezier(.16, 1, .3, 1) f-slideOutPrevY
}

@keyframes f-slideInPrevY {
    0% {
        transform: translateY(calc(100% + var(--f-carousel-gap, 0)))
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes f-slideInNextY {
    0% {
        transform: translateY(calc(-100% - var(--f-carousel-gap, 0)))
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes f-slideOutNextY {
    to {
        transform: translateY(calc(-100% - var(--f-carousel-gap, 0)))
    }
}

@keyframes f-slideOutPrevY {
    to {
        transform: translateY(calc(100% + var(--f-carousel-gap, 0)))
    }
}

.f-zoomInUp {
    animation: var(--f-transition-duration, .3s) ease both f-zoomInUp
}

.f-zoomOutDown {
    animation: var(--f-transition-duration, .3s) ease both f-zoomOutDown
}

@keyframes f-zoomInUp {
    0% {
        transform: scale(var(--f-zoomInUp-scale, .975)) translate3d(var(--f-zoomInUp-x, 0), var(--f-zoomInUp-y, 16px), 0);
        opacity: var(--f-zoomInUp-opacity, 0)
    }

    to {
        transform: scale(1) translateZ(0);
        opacity: 1
    }
}

@keyframes f-zoomOutDown {
    to {
        transform: scale(var(--f-zoomOutDown-scale, .975)) translate3d(var(--f-zoomOutDown-x, 0), var(--f-zoomOutDown-y, 16px), 0);
        opacity: 0
    }
}

.f-throwOutUp {
    animation: var(--f-throwOutUp-duration, .2s) ease-out both f-throwOutUp
}

.f-throwOutDown {
    animation: var(--f-throwOutDown-duration, .2s) ease-out both f-throwOutDown
}

@keyframes f-throwOutUp {
    to {
        transform: translate3d(0, calc(var(--f-throwOutUp-y, 150px) * -1), 0);
        opacity: 0
    }
}

@keyframes f-throwOutDown {
    to {
        transform: translate3d(0, var(--f-throwOutDown-y, 150px), 0);
        opacity: 0
    }
}

.has-gmap .f-html,
.has-iframe .f-html,
.has-pdf .f-html {
    width: 100%;
    height: 100%;
    min-height: 1px;
    overflow: visible
}

.has-gmap .f-html,
.has-pdf .f-html {
    padding: 0
}

.f-html {
    position: relative;
    box-sizing: border-box;
    margin: var(--f-html-margin, 0);
    padding: var(--f-html-padding, 2rem);
    color: var(--f-html-color, currentColor);
    background: var(--f-html-bg)
}

.f-html.is-error {
    text-align: center
}

.f-iframe {
    display: block;
    margin: 0;
    border: 0;
    height: 100%;
    width: 100%
}

.f-caption {
    align-self: center;
    flex-shrink: 0;
    margin: var(--f-caption-margin);
    padding: var(--f-caption-padding, 16px 8px);
    max-width: 100%;
    max-height: calc(80vh - 100px);
    overflow: auto;
    overflow-wrap: anywhere;
    line-height: var(--f-caption-line-height);
    color: var(--f-caption-color);
    background: var(--f-caption-bg);
    font: var(--f-caption-font)
}

.has-html5video .f-html,
.has-vimeo .f-html,
.has-youtube .f-html {
    padding: 0;
    width: 100%;
    height: 100%;
    min-height: 1px;
    overflow: visible;
    max-width: var(--f-video-width, 960px);
    max-height: var(--f-video-height, 540px);
    aspect-ratio: var(--f-video-aspect-ratio);
    background: var(--f-video-bg, rgba(0, 0, 0, .9))
}

.f-html5video {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
    background: transparent
}

.f-button.is-arrow {
    --f-button-width: var(--f-arrow-width, 46px);
    --f-button-height: var(--f-arrow-height, 46px);
    --f-button-svg-width: var(--f-arrow-svg-width, 24px);
    --f-button-svg-height: var(--f-arrow-svg-height, 24px);
    --f-button-svg-stroke-width: var(--f-arrow-svg-stroke-width, 1.75);
    --f-button-border-radius: var(--f-arrow-border-radius, unset);
    --f-button-bg: var(--f-arrow-bg, transparent);
    --f-button-hover-bg: var(--f-arrow-hover-bg, var(--f-arrow-bg));
    --f-button-active-bg: var(--f-arrow-active-bg, var(--f-arrow-hover-bg));
    --f-button-shadow: var(--f-arrow-shadow);
    --f-button-color: var(--f-arrow-color);
    --f-button-hover-color: var(--f-arrow-hover-color, var(--f-arrow-color));
    --f-button-active-color: var(--f-arrow-active-color, var(--f-arrow-hover-color));
    overflow: visible
}

.f-button.is-arrow.is-next,
.f-button.is-arrow.is-prev {
    position: absolute;
    transform: translate(0);
    z-index: 20
}

.is-horizontal .f-button.is-arrow.is-next,
.is-horizontal .f-button.is-arrow.is-prev {
    inset: 50% auto auto;
    transform: translateY(-50%)
}

.is-horizontal.is-ltr .f-button.is-arrow.is-prev {
    left: var(--f-arrow-pos, 0)
}

.is-horizontal.is-ltr .f-button.is-arrow.is-next {
    right: var(--f-arrow-pos, 0)
}

.is-horizontal.is-rtl .f-button.is-arrow.is-prev {
    right: var(--f-arrow-pos, 0);
    transform: translateY(-50%) rotateY(180deg)
}

.is-horizontal.is-rtl .f-button.is-arrow.is-next {
    left: var(--f-arrow-pos, 0);
    transform: translateY(-50%) rotateY(180deg)
}

.is-vertical.is-ltr .f-button.is-arrow.is-prev,
.is-vertical.is-rtl .f-button.is-arrow.is-prev {
    top: var(--f-arrow-pos, 0);
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(-50%)
}

.is-vertical.is-ltr .f-button.is-arrow.is-next,
.is-vertical.is-rtl .f-button.is-arrow.is-next {
    top: auto;
    right: auto;
    bottom: var(--f-arrow-pos, 0);
    left: 50%;
    transform: translate(-50%)
}

.is-vertical .f-button.is-arrow.is-next svg,
.is-vertical .f-button.is-arrow.is-prev svg {
    transform: rotate(90deg)
}

.f-carousel__toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    margin: var(--f-toolbar-margin, 0);
    padding: var(--f-toolbar-padding, 8px);
    line-height: var(--f-toolbar-line-height);
    background: var(--f-toolbar-bg, none);
    box-shadow: var(--f-toolbar-shadow, none);
    -webkit-backdrop-filter: var(--f-toolbar-backdrop-filter);
    backdrop-filter: var(--f-toolbar-backdrop-filter);
    position: relative;
    z-index: 20;
    color: var(--f-toolbar-color, currentColor);
    font-size: var(--f-toolbar-font-size, 17px);
    font-weight: var(--f-toolbar-font-weight, inherit);
    font-family: var(--f-toolbar-font, -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif);
    text-shadow: var(--f-toolbar-text-shadow);
    text-align: center;
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: subpixel-antialiased;
    white-space: nowrap;
    pointer-events: none
}

.f-carousel__toolbar.is-absolute {
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.f-carousel__toolbar__column {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: var(--f-toolbar-gap, 0)
}

.f-carousel__toolbar__column.is-left {
    display: flex;
    justify-self: flex-start;
    justify-content: flex-start
}

.f-carousel__toolbar__column.is-middle {
    display: flex;
    justify-content: center
}

.f-carousel__toolbar__column.is-right {
    display: flex;
    justify-self: flex-end;
    justify-content: flex-end;
    flex-flow: nowrap
}

.f-carousel__toolbar__column {
    pointer-events: none
}

.f-carousel__toolbar__column>* {
    pointer-events: all
}

.f-counter {
    position: relative;
    display: flex;
    flex-direction: row;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    margin: var(--f-counter-margin, 0);
    padding: var(--f-counter-padding, 4px);
    line-height: var(--f-counter-line-height);
    background: var(--f-counter-bg);
    border-radius: var(--f-counter-border-radius)
}

.f-counter span {
    padding: 0 var(--f-counter-gap, 4px)
}

:root {
    --f-thumbs-gap: 8px;
    --f-thumbs-margin: 0;
    --f-thumbs-padding-x: 8px;
    --f-thumbs-padding-y: 8px;
    --f-thumbs-z-index: 1;
    --f-thumb-width: 96px;
    --f-thumb-height: 72px;
    --f-thumb-clip-width: 46px;
    --f-thumb-extra-gap: 16px;
    --f-thumb-fit: cover;
    --f-thumb-opacity: 1;
    --f-thumb-transition: opacity .3s ease, transform .15s ease;
    --f-thumb-border: none;
    --f-thumb-border-radius: 4px;
    --f-thumb-transfors: none;
    --f-thumb-shadow: none;
    --f-thumb-bg: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .05));
    --f-thumb-focus-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff;
    --f-thumb-selected-shadow: inset 0 0 0 .8px #222, inset 0 0 0 2.25px #fff
}

.f-thumbs {
    flex-shrink: 0;
    margin: var(--f-thumbs-margin);
    padding: 0;
    background: var(--f-thumbs-bg);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    transition: max-height .3s ease, max-width .3s ease;
    position: relative;
    overflow: hidden;
    z-index: var(--f-thumbs-z-index)
}

.f-thumbs.is-horizontal {
    max-height: calc(var(--f-carousel-slide-height) + var(--f-thumbs-padding-y) * 2 + var(--f-thumbs-gap) * 2)
}

.f-thumbs.is-vertical {
    max-width: calc(var(--f-carousel-slide-width) + var(--f-thumbs-padding-x) * 2 + var(--f-thumbs-gap) * 2)
}

.f-thumbs.is-ltr {
    direction: ltr
}

.f-thumbs.is-rtl {
    direction: rtl
}

.f-thumbs__viewport {
    margin: var(--f-thumbs-padding-y) var(--f-thumbs-padding-x);
    overflow: visible;
    display: grid
}

.f-thumbs.is-vertical .f-thumbs__viewport {
    height: calc(100% - var(--f-thumbs-padding-y) * 2)
}

.f-thumbs__slide {
    position: relative;
    box-sizing: border-box;
    grid-area: 1/1;
    width: var(--f-carousel-slide-width);
    height: var(--f-carousel-slide-height);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
    overflow: visible
}

.f-thumbs__slide:hover button {
    opacity: var(--f-thumb-hover-opacity, 1);
    transform: var(--f-thumb-hover-transform, none)
}

.f-thumbs__slide:hover button:after {
    border: var(--f-thumb-hover-border, none);
    box-shadow: var(--f-thumb-hover-shadow, var(--f-thumb-shadow))
}

.f-thumbs__slide button {
    all: unset;
    margin: auto;
    padding: 0;
    position: relative;
    overflow: visible;
    width: 100%;
    height: 100%;
    outline: none;
    transition: var(--f-thumb-transition);
    border-radius: var(--f-thumb-border-radius);
    opacity: var(--f-thumb-opacity);
    transform: var(--f-thumb-transform);
    background: var(--f-thumb-bg)
}

.f-thumbs__slide button:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: none;
    border-radius: inherit;
    border: var(--f-thumb-border);
    box-shadow: var(--f-thumb-shadow)
}

.f-thumbs__slide button:focus-within {
    opacity: var(--f-thumb-focus-opacity, 1);
    transform: var(--f-thumb-focus-transform, none)
}

.f-thumbs__slide button:focus-within:after {
    border: var(--f-thumb-focus-border, none);
    box-shadow: var(--f-thumb-focus-shadow, var(--f-thumb-shadow))
}

.f-thumbs__slide:active {
    opacity: var(--f-thumb-active-opacity, 1);
    transform: var(--f-thumb-active-transform, none)
}

.f-thumbs__slide:active:after {
    border: var(--f-thumb-active-border, none);
    box-shadow: var(--f-thumb-active-shadow, var(--f-thumb-shadow))
}

.f-thumbs__slide.is-selected {
    z-index: 2
}

.f-thumbs__slide.is-selected button {
    opacity: var(--f-thumb-selected-opacity, 1);
    transform: var(--f-thumb-selected-transform, none)
}

.f-thumbs__slide.is-selected button:after {
    border: var(--f-thumb-selected-border, none);
    box-shadow: var(--f-thumb-selected-shadow, var(--f-thumb-shadow))
}

.f-thumbs__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--f-thumb-fit);
    border-radius: inherit;
    pointer-events: none
}

.f-thumbs__slide img.has-lazyerror {
    display: none
}

.f-thumbs.is-classic {
    --f-carousel-slide-width: var(--f-thumb-width);
    --f-carousel-slide-height: var(--f-thumb-height);
    --f-carousel-gap: var(--f-thumbs-gap)
}

.f-thumbs.is-modern {
    --f-carousel-slide-width: calc(var(--f-thumb-clip-width) + var(--f-thumbs-gap));
    --f-carousel-slide-height: var(--f-thumb-height);
    --f-carousel-gap: 0;
    --width-diff: calc((var(--f-thumb-width) - var(--f-thumb-clip-width)))
}

.f-thumbs.is-modern .f-thumbs__viewport {
    width: calc(100% + var(--f-carousel-slide-width) * 2);
    margin-inline: calc(var(--f-carousel-slide-width) * -1)
}

.f-thumbs.is-modern .f-thumbs__slide {
    --clip-shift: calc((var(--width-diff) * .5) * var(--progress));
    --clip-path: inset(0 var(--clip-shift) round var(--f-thumb-border-radius, 0));
    padding: 0;
    overflow: visible;
    left: var(--shift, 0);
    will-change: left;
    transition: left var(--f-transition-duration) var(--f-transition-easing)
}

.f-thumbs.is-modern .f-thumbs__slide button {
    display: block;
    margin-inline: 50%;
    width: var(--f-thumb-width);
    -webkit-clip-path: var(--clip-path);
    clip-path: var(--clip-path);
    border: none;
    box-shadow: none;
    transition: opacity var(--f-thumb-transition-duration, .2s) var(--f-thumb-transition-easing, ease), -webkit-clip-path var(--f-transition-duration) var(--f-transition-easing);
    transition: clip-path var(--f-transition-duration) var(--f-transition-easing), opacity var(--f-thumb-transition-duration, .2s) var(--f-thumb-transition-easing, ease);
    transition: clip-path var(--f-transition-duration) var(--f-transition-easing), opacity var(--f-thumb-transition-duration, .2s) var(--f-thumb-transition-easing, ease), -webkit-clip-path var(--f-transition-duration) var(--f-transition-easing)
}

.f-thumbs.is-modern .f-thumbs__slide button:after {
    display: none
}

.f-thumbs.is-modern .f-thumbs__slide:focus:not(:focus-visible) {
    outline: none
}

.f-thumbs.is-modern .f-thumbs__slide:focus-within:not(.is-selected) button:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: var(--clip-shift);
    bottom: 0;
    right: var(--clip-shift);
    transition: border var(--f-transition-duration) var(--f-transition-easing), box-shadow var(--f-transition-duration) var(--f-transition-easing);
    border-radius: inherit;
    border: var(--f-thumb-focus-border, none);
    box-shadow: var(--f-thumb-focus-shadow, none)
}

.f-thumbs.is-modern {
    --f-transition-duration: .25s;
    --f-transition-easing: ease-out
}

.f-thumbs.is-modern.is-syncing {
    --f-transition-duration: 0s
}

:root {
    --f-progressbar-height: 3px;
    --f-progressbar-color: var(--f-carousel-theme-color, #575ad6);
    --f-progressbar-opacity: 1;
    --f-progressbar-z-index: 30
}

.f-progressbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--f-progressbar-z-index);
    height: var(--f-progressbar-height);
    transform: scaleX(0);
    transform-origin: 0;
    opacity: var(--f-progressbar-opacity);
    background: var(--f-progressbar-color);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    pointer-events: none;
    animation-name: f-progressbar;
    animation-play-state: running;
    animation-timing-function: linear
}

.f-progressbar:empty {
    display: block
}

button>.f-progressbar {
    --f-progressbar-height: 100%;
    --f-progressbar-opacity: .2
}

@keyframes f-progressbar {
    0% {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

[data-fullscreen-action=toggle] svg g:first-child {
    display: flex
}

[data-fullscreen-action=toggle] svg g:last-child {
    display: none
}

:-webkit-full-screen [data-fullscreen-action=toggle] svg g:first-child {
    display: none
}

:fullscreen [data-fullscreen-action=toggle] svg g:first-child {
    display: none
}

:-webkit-full-screen [data-fullscreen-action=toggle] svg g:last-child {
    display: flex
}

:fullscreen [data-fullscreen-action=toggle] svg g:last-child {
    display: flex
}

.in-fullscreen-mode>.f-carousel {
    flex: 1 1;
    min-width: 0 !important;
    min-height: 0 !important
}

html.with-fancybox {
    width: auto;
    overflow: visible;
    scroll-behavior: auto
}

html.with-fancybox body.hide-scrollbar {
    width: auto;
    margin-right: calc(var(--f-body-margin, 0px) + var(--f-scrollbar-compensate, 0px));
    overflow: hidden !important;
    overscroll-behavior-y: none
}

.fancybox__dialog {
    width: 100%;
    height: 100vh;
    max-height: unset;
    max-width: unset;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    background: transparent;
    touch-action: none
}

.fancybox__dialog:focus {
    outline: none
}

.fancybox__dialog::-webkit-backdrop {
    opacity: 0
}

.fancybox__dialog::backdrop {
    opacity: 0
}

@supports (height:100dvh) {
    .fancybox__dialog {
        height: 100dvh
    }
}

.fancybox__dialog :empty {
    display: block
}

div.fancybox__dialog {
    position: fixed;
    inset: 0;
    z-index: 1050
}

.fancybox__container {
    --fancybox-color: #dbdbdb;
    --fancybox-backdrop-bg: rgba(24, 24, 27, .95);
    --f-toolbar-margin: 0;
    --f-toolbar-padding: 8px;
    --f-toolbar-gap: 0;
    --f-toolbar-color: #ddd;
    --f-toolbar-font-size: 16px;
    --f-toolbar-font-weight: 500;
    --f-toolbar-font: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
    --f-toolbar-line-height: var(--f-button-height);
    --f-toolbar-text-shadow: 1px 1px 1px rgba(0, 0, 0, .75);
    --f-toolbar-shadow: none;
    --f-toolbar-bg: none;
    --f-counter-margin: 0;
    --f-counter-padding: 0px 10px;
    --f-counter-gap: 4px;
    --f-counter-line-height: var(--f-button-height);
    --f-carousel-gap: 17px;
    --f-carousel-slide-width: 100%;
    --f-carousel-slide-height: 100%;
    --f-carousel-slide-padding: 0;
    --f-carousel-slide-bg: unset;
    --f-html-color: #222;
    --f-html-bg: #fff;
    --f-error-color: #fff;
    --f-error-bg: #333;
    --f-caption-margin: 0;
    --f-caption-padding: 16px 8px;
    --f-caption-color: var(--fancybox-color, #dbdbdb);
    --f-caption-bg: transparent;
    --f-caption-font: inherit;
    --f-caption-line-height: 1.375;
    --f-spinner-color-1: rgba(255, 255, 255, .2);
    --f-spinner-color-2: rgba(255, 255, 255, .8);
    --f-spinner-width: 50px;
    --f-spinner-height: 50px;
    --f-spinner-border-radius: 50%;
    --f-spinner-border-width: 4px;
    --f-progressbar-color: rgba(255, 255, 255);
    --f-button-width: 46px;
    --f-button-height: 46px;
    --f-button-color: #ddd;
    --f-button-hover-color: #fff;
    --f-button-outline-width: 1px;
    --f-button-outline-color: rgba(255, 255, 255, .75);
    --f-button-outline-offset: 0px;
    --f-button-bg: rgba(54, 54, 54, .75);
    --f-button-border: 0;
    --f-button-border-radius: 0;
    --f-button-shadow: none;
    --f-button-transition: all .2s ease;
    --f-button-transform: none;
    --f-button-svg-width: 24px;
    --f-button-svg-height: 24px;
    --f-button-svg-stroke-width: 1.75;
    --f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, .01)), drop-shadow(1px 2px 1px rgba(24, 24, 27, .05));
    --f-button-svg-fill: none;
    --f-button-svg-disabled-opacity: .5;
    --f-arrow-pos: 32px;
    --f-arrow-width: 50px;
    --f-arrow-height: 50px;
    --f-arrow-svg-width: 24px;
    --f-arrow-svg-height: 24px;
    --f-arrow-svg-stroke-width: 2;
    --f-arrow-border-radius: 50%;
    --f-arrow-bg: rgba(54, 54, 54, .65);
    --f-arrow-color: #ddd;
    --f-arrow-hover-color: #fff;
    --f-close-button-width: 34px;
    --f-close-button-height: 34px;
    --f-close-border-radius: 4px;
    --f-close-button-color: #fff;
    --f-close-button-hover-color: #fff;
    --f-close-button-bg: transparent;
    --f-close-button-hover-bg: transparent;
    --f-close-button-active-bg: transparent;
    --f-close-button-svg-width: 22px;
    --f-close-button-svg-height: 22px;
    --f-thumbs-margin: 0px;
    --f-thumbs-padding-x: 8px;
    --f-thumbs-padding-y: 8px;
    --f-thumbs-bg: none;
    --f-thumb-transition: all .2s ease;
    --f-thumb-width: 94px;
    --f-thumb-height: 76px;
    --f-thumb-opacity: 1;
    --f-thumb-border: none;
    --f-thumb-shadow: none;
    --f-thumb-transform: none;
    --f-thumb-focus-opacity: 1;
    --f-thumb-focus-border: none;
    --f-thumb-focus-shadow: inset 0 0 0 2px rgba(255, 255, 255, .65);
    --f-thumb-focus-transform: none;
    --f-thumb-hover-opacity: 1;
    --f-thumb-hover-border: none;
    --f-thumb-hover-transform: none;
    --f-thumb-active-opacity: var(--f-thumb-hover-opacity);
    --f-thumb-active-border: var(--f-thumb-hover-border);
    --f-thumb-active-transform: var(--f-thumb-hover-transform);
    --f-thumb-selected-opacity: 1;
    --f-thumb-selected-border: none;
    --f-thumb-selected-shadow: inset 0 0 0 2px #fff;
    --f-thumb-selected-transform: none
}

.fancybox__container[theme=light] {
    --fancybox-color: #222;
    --fancybox-backdrop-bg: rgba(255, 255, 255, .97);
    --f-toolbar-color: var(--fancybox-color, #222);
    --f-toolbar-text-shadow: none;
    --f-toolbar-font-weight: 400;
    --f-html-color: var(--fancybox-color, #222);
    --f-html-bg: #fff;
    --f-error-color: #555;
    --f-error-bg: #fff;
    --f-video-bg: #fff;
    --f-caption-color: #333;
    --f-spinner-color-1: rgba(0, 0, 0, .2);
    --f-spinner-color-2: rgba(0, 0, 0, .8);
    --f-spinner-border-width: 3.5px;
    --f-progressbar-color: rgba(111, 111, 116);
    --f-button-color: #333;
    --f-button-hover-color: #000;
    --f-button-outline-color: rgba(0, 0, 0, .85);
    --f-button-bg: rgba(255, 255, 255, .85);
    --f-button-svg-stroke-width: 1.3;
    --f-button-svg-filter: none;
    --f-arrow-bg: rgba(255, 255, 255, .85);
    --f-arrow-color: #333;
    --f-arrow-hover-color: #000;
    --f-arrow-svg-stroke-width: 1.3;
    --f-close-button-color: #555;
    --f-close-button-hover-color: #000;
    --f-thumb-bg: linear-gradient(#ebeff2, #e2e8f0);
    --f-thumb-focus-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #888;
    --f-thumb-selected-shadow: 0 0 0 1.8px #fff, 0px 0px 0px 2.25px #000
}

.fancybox__container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.fancybox__container:focus {
    outline: none
}

.fancybox__container.has-vertical-thumbs {
    flex-direction: row-reverse
}

.fancybox__container.has-vertical-thumbs:not(.is-closing) .fancybox__viewport {
    overflow-x: clip;
    overflow-y: visible
}

.fancybox__container .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>:not(.f-html, .f-panzoom__wrapper, .f-spinner),
.fancybox__container .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected),
.fancybox__container .fancybox__carousel>:not(.fancybox__viewport),
.fancybox__container>:not(.fancybox__carousel) {
    opacity: var(--f-drag-opacity, 1)
}

.fancybox__container:not(.is-ready, .is-hiding) {
    visibility: hidden
}

.fancybox__container.is-revealing .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>:not(.f-html, .f-panzoom__wrapper, .f-spinner),
.fancybox__container.is-revealing .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected),
.fancybox__container.is-revealing .fancybox__carousel>:not(.fancybox__viewport),
.fancybox__container.is-revealing>:not(.fancybox__carousel) {
    animation: var(--f-interface-enter-duration, .35s) ease none f-fadeIn
}

.fancybox__container.is-hiding .fancybox__carousel>.fancybox__viewport>.fancybox__slide.is-selected>:not(.f-html, .f-panzoom__wrapper),
.fancybox__container.is-hiding .fancybox__carousel>.fancybox__viewport>.fancybox__slide:not(.is-selected),
.fancybox__container.is-hiding .fancybox__carousel>:not(.fancybox__viewport),
.fancybox__container.is-hiding>:not(.fancybox__carousel) {
    animation: var(--f-interface-exit-duration, .35s) ease forwards f-fadeOut
}

.fancybox__container.is-idle .f-carousel__toolbar {
    pointer-events: none;
    opacity: 0
}

.fancybox__container.is-idle .f-button.is-arrow {
    opacity: 0
}

.fancybox__container.is-idle.is-ready .f-carousel__toolbar {
    pointer-events: none;
    animation: f-fadeOut .15s ease-out both
}

.fancybox__container.is-idle.is-ready .f-button.is-arrow {
    animation: f-fadeOut .15s ease-out both
}

.fancybox__backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--fancybox-backdrop-bg)
}

.fancybox__carousel {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    position: relative;
    z-index: 10;
    overflow-y: visible;
    overflow-x: clip
}

.fancybox__carousel.is-vertical {
    --f-carousel-slide-height: 100%
}

.fancybox__carousel.is-ltr {
    direction: ltr
}

.fancybox__carousel.is-rtl {
    direction: rtl
}

.fancybox__carousel>.f-button.is-arrow:before {
    position: absolute;
    content: "";
    inset: -30px;
    z-index: 1
}

.fancybox__viewport {
    display: grid;
    flex: 1 1;
    min-height: 0;
    min-width: 0;
    position: relative;
    overflow: visible;
    transform: translate3d(0, var(--f-drag-offset, 0), 0)
}

.fancybox__viewport.is-draggable {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab
}

.fancybox__viewport.is-dragging {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.fancybox__viewport [contenteditable],
.fancybox__viewport [data-selectable] {
    cursor: auto
}

.fancybox__slide {
    box-sizing: border-box;
    position: relative;
    grid-area: 1/1;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: var(--f-carousel-slide-width);
    height: var(--f-carousel-slide-height);
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    margin: 0;
    padding: var(--f-carousel-slide-padding);
    background: var(--f-carousel-slide-bg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform
}

.fancybox__slide:after,
.fancybox__slide:before {
    display: block;
    content: ""
}

.fancybox__slide:before {
    margin-bottom: auto
}

.fancybox__slide:after {
    margin-top: auto
}

.fancybox__slide.is-selected {
    z-index: 1
}

.fancybox__slide.f-zoomable {
    overflow: visible
}

.fancybox__slide.has-error {
    --f-html-color: var(--f-error-color, --f-html-color);
    --f-html-bg: var(--f-error-bg, --f-html-bg)
}

.fancybox__slide.has-html {
    overflow: auto;
    padding: 8px
}

.fancybox__slide.has-close-btn {
    padding-top: 34px
}

.fancybox__slide.has-controls:before {
    margin: 0
}

.fancybox__slide .f-spinner {
    cursor: pointer
}

.fancybox__container.is-closing .f-caption,
.fancybox__slide.is-loading .f-caption {
    visibility: hidden
}

.fancybox__container.is-closing .fancybox__carousel {
    overflow: visible
}

.f-button.is-close-button {
    --f-button-width: var(--f-close-button-width);
    --f-button-height: var(--f-close-button-height);
    --f-button-border-radius: var(--f-close-border-radius);
    --f-button-color: var(--f-close-button-color);
    --f-button-hover-color: var(--f-close-button-hover-color);
    --f-button-bg: var(--f-close-button-bg);
    --f-button-hover-bg: var(--f-close-button-hover-bg);
    --f-button-active-bg: var(--f-close-button-active-bg);
    --f-button-svg-width: var(--f-close-button-svg-width);
    --f-button-svg-height: var(--f-close-button-svg-height);
    position: absolute;
    top: calc(var(--f-button-height) * -1);
    right: 0;
    z-index: 40
}


:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    z-index: 1
}

.swiper {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    -webkit-margin-start: var(--swiper-centered-offset-before);
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    -webkit-margin-before: var(--swiper-centered-offset-before);
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0))
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border-radius: 50%;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-top: 4px solid transparent
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s linear infinite
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.swiper-virtual .swiper-slide {
    -webkit-backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper:after {
    height: 1px;
    width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper:after {
    width: 1px;
    height: var(--swiper-virtual-size)
}

.swiper-scrollbar {
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    position: relative;
    touch-action: none;
    background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, .1))
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical>.swiper-scrollbar {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%))
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, .5));
    border-radius: var(--swiper-scrollbar-border-radius, 10px);
    left: 0;
    top: 0
}

.swiper-scrollbar-cursor-drag {
    cursor: move
}

.swiper-scrollbar-lock {
    display: none
}

.swiper-zoom-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain
}

.swiper-slide-zoomed {
    cursor: move;
    touch-action: none
}

.swiper .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
    transition-timing-function: ease-out;
    margin: 0 auto
}

.swiper-grid>.swiper-wrapper {
    flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
    flex-wrap: wrap;
    flex-direction: column
}

.swiper.swiper-cube {
    overflow: visible
}

.swiper-cube .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%
}

.swiper-cube .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
    transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: .6;
    z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
    content: "";
    background: #000;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    filter: blur(50px)
}

.swiper-cube .swiper-slide-next+.swiper-slide {
    pointer-events: auto;
    visibility: visible
}

.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper.swiper-flip {
    overflow: visible
}

.swiper-flip .swiper-slide {
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top {
    z-index: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.swiper-creative .swiper-slide {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition-property: transform, opacity, height
}

.swiper.swiper-cards {
    overflow: visible
}

.swiper-cards .swiper-slide {
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden
}

.swiper-fade.swiper-free-mode .swiper-slide {
    transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
    pointer-events: none
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
    pointer-events: auto
}

:root {
    --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: calc(var(--swiper-navigation-size) / 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color, var(--swiper-theme-color))
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: .35;
    cursor: auto;
    pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
    display: none !important
}

.swiper-button-next svg,
.swiper-button-prev svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center
}

.swiper-rtl .swiper-button-next svg,
.swiper-rtl .swiper-button-prev svg {
    transform: rotate(180deg)
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 10px);
    right: auto
}

.swiper-button-lock {
    display: none
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: normal;
    line-height: 1
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: "prev"
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 10px);
    left: auto
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: "next"
}

.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: opacity .3s;
    transform: translateZ(0);
    z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
    display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: var(--swiper-pagination-bottom, 8px);
    top: var(--swiper-pagination-top, auto);
    left: 0;
    width: 100%
}

.swiper-pagination-bullets-dynamic {
    overflow: hidden;
    font-size: 0
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transform: scale(.33);
    position: relative
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
    transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
    transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
    transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
    transform: scale(.33)
}

.swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: var(--swiper-pagination-bullet-inactive-color, #000);
    opacity: var(--swiper-pagination-bullet-inactive-opacity, .2)
}

button.swiper-pagination-bullet {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer
}

.swiper-pagination-bullet:only-child {
    display: none !important
}

.swiper-pagination-bullet-active {
    opacity: var(--swiper-pagination-bullet-opacity, 1);
    background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
    right: var(--swiper-pagination-right, 8px);
    left: var(--swiper-pagination-left, auto);
    top: 50%;
    transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    display: inline-block;
    transition: transform .2s, top .2s
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: transform .2s, left .2s
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
    transition: transform .2s, right .2s
}

.swiper-pagination-fraction {
    color: var(--swiper-pagination-fraction-color, inherit)
}

.swiper-pagination-progressbar {
    background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));
    position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0
}

.swiper-pagination-lock {
    display: none
}


@font-face {
    font-family: flaticon_xtrade;
    src: url(../assets/flaticon_xtrade.b7f8c47c.woff2) format("woff2"), url(../assets/flaticon_xtrade.e4ecf3e6.woff) format("woff"), url(../assets/flaticon_xtrade.5c03545a.eot#iefix) format("embedded-opentype"), url(../assets/flaticon_xtrade.badd2d2d.ttf) format("truetype"), url(../assets/flaticon_xtrade.91311c45.svg#flaticon_xtrade) format("svg")
}

i[class^=flaticon-] {
    display: inline-flex
}

i[class*=" flaticon-"]:before,
i[class^=flaticon-]:before {
    font-family: flaticon_xtrade !important;
    font-style: normal;
    font-weight: 400 !important;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.flaticon-left-chevron:before {
    content: "\f101"
}

.flaticon-right-arrow:before {
    content: "\f102"
}

.flaticon-upper-right-arrow:before {
    content: "\f103"
}

.flaticon-arrow-upper-right:before {
    content: "\f104"
}

.flaticon-arrow-upper-right-1:before {
    content: "\f105"
}

.flaticon-arrow:before {
    content: "\f106"
}

.flaticon-arrow-1:before {
    content: "\f107"
}

.flaticon-candlestick-chart:before {
    content: "\f108"
}

.flaticon-christmas-stars:before {
    content: "\f109"
}

.flaticon-sparkler:before {
    content: "\f10a"
}

.flaticon-sparkler-1:before {
    content: "\f10b"
}

.flaticon-star:before {
    content: "\f10c"
}

.flaticon-compass:before {
    content: "\f10d"
}

.flaticon-chart:before {
    content: "\f10e"
}

.flaticon-chart-1:before {
    content: "\f10f"
}

.flaticon-christmas-star:before {
    content: "\f110"
}

.flaticon-star-1:before {
    content: "\f111"
}

.flaticon-market-analysis:before {
    content: "\f112"
}

.flaticon-stock-market-1:before {
    content: "\f113"
}

.flaticon-balance-sheet:before {
    content: "\f114"
}

.flaticon-graph:before {
    content: "\f115"
}

.flaticon-forex:before {
    content: "\f116"
}

.flaticon-right-arrow-1:before {
    content: "\f117"
}

.flaticon-check:before {
    content: "\f118"
}

.flaticon-search-interface-symbol:before {
    content: "\f119"
}

.flaticon-down-arrow:before {
    content: "\f11a"
}

.flaticon-cam-recorder:before {
    content: "\f11b"
}

.flaticon-ux:before {
    content: "\f11c"
}

.flaticon-live:before {
    content: "\f11d"
}

.flaticon-live-1:before {
    content: "\f11e"
}

.flaticon-favorites:before {
    content: "\f11f"
}

.flaticon-star-2:before {
    content: "\f120"
}

.flaticon-star-3:before {
    content: "\f121"
}

.flaticon-sparkle:before {
    content: "\f122"
}

.flaticon-star-4:before {
    content: "\f123"
}

.flaticon-star-5:before {
    content: "\f124"
}

.flaticon-favourite:before {
    content: "\f125"
}

.flaticon-highlight:before {
    content: "\f126"
}

.flaticon-burst:before {
    content: "\f127"
}

.flaticon-arrows:before {
    content: "\f128"
}

.flaticon-left-arrow:before {
    content: "\f129"
}

.flaticon-arrow-up:before {
    content: "\f12a"
}

.flaticon-right-arrow-2:before {
    content: "\f12b"
}

.flaticon-24-hours:before {
    content: "\f12c"
}

.flaticon-market-share:before {
    content: "\f12d"
}

.flaticon-team-leader:before {
    content: "\f12e"
}

.client-info img {
    border-radius: 50%;
}

:root {
    --heading-font: "Jost", sans-serif;
    --body-font: "Inter", sans-serif;
    --base-h: 154;
    --base-s: 100%;
    --base-l: 54%;
    --base: var(--base-h) var(--base-s) var(--base-l);
    --base-d-100: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.1);
    --base-d-200: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.2);
    --base-d-300: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.3);
    --base-d-400: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.4);
    --base-d-500: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.5);
    --base-d-600: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.6);
    --base-d-700: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.7);
    --base-d-800: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.8);
    --base-d-900: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 0.9);
    --base-d-1000: var(--base-h) var(--base-s) calc(var(--base-l) - var(--base-l) * 1);
    --base-l-100: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.1);
    --base-l-200: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.2);
    --base-l-300: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.3);
    --base-l-400: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.4);
    --base-l-500: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.5);
    --base-l-600: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.6);
    --base-l-700: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.7);
    --base-l-800: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.8);
    --base-l-900: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 0.9);
    --base-l-1000: var(--base-h) calc(var(--base-s)) calc(var(--base-l) + (100% - var(--base-l)) * 1);
    --base-two-h: 72;
    --base-two-s: 100%;
    --base-two-l: 64%;
    --base-two: var(--base-two-h) var(--base-two-s) var(--base-two-l);
    --base-two-d-100: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.1);
    --base-two-d-200: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.2);
    --base-two-d-300: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.3);
    --base-two-d-400: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.4);
    --base-two-d-500: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.5);
    --base-two-d-600: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.6);
    --base-two-d-700: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.7);
    --base-two-d-800: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.8);
    --base-two-d-900: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 0.9);
    --base-two-d-1000: var(--base-two-h) var(--base-two-s) calc(var(--base-two-l) - var(--base-two-l) * 1);
    --base-two-l-100: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.1);
    --base-two-l-200: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.2);
    --base-two-l-300: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.3);
    --base-two-l-400: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.4);
    --base-two-l-500: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.5);
    --base-two-l-600: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.6);
    --base-two-l-700: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.7);
    --base-two-l-800: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.8);
    --base-two-l-900: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 0.9);
    --base-two-l-1000: var(--base-two-h) calc(var(--base-two-s)) calc(var(--base-two-l) + (100% - var(--base-two-l)) * 1);
    --white: 0 0% 100%;
    --body-color: 0 0% 85%;
    --heading-color: 0 0% 93%;
    --black: 180 2% 8%;
    --black-two: 0 0% 11%;
    --gray: 0 0% 26%;
    --gray-two: 0 0% 85%;
    --border-color: 0 0% 88%;
    --section-bg: 208 100% 97%;
    --primary-h: 238;
    --primary-s: 100%;
    --primary-l: 40%;
    --primary: var(--primary-h) var(--primary-s) var(--primary-l);
    --primary-d-100: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.1);
    --primary-d-200: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.2);
    --primary-d-300: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.3);
    --primary-d-400: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.4);
    --primary-d-500: var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--primary-l) * 0.5);
    --primary-l-100: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.1);
    --primary-l-200: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.2);
    --primary-l-300: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.3);
    --primary-l-400: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.4);
    --primary-l-500: var(--primary-h) calc(var(--primary-s)) calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5);
    --secondary-h: 208;
    --secondary-s: 7%;
    --secondary-l: 46%;
    --secondary: var(--secondary-h) var(--secondary-s) var(--secondary-l);
    --secondary-d-100: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.1);
    --secondary-d-200: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.2);
    --secondary-d-300: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.3);
    --secondary-d-400: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.4);
    --secondary-d-500: var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - var(--secondary-l) * 0.5);
    --secondary-l-100: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.1);
    --secondary-l-200: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.2);
    --secondary-l-300: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.3);
    --secondary-l-400: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.4);
    --secondary-l-500: var(--secondary-h) calc(var(--secondary-s)) calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5);
    --success-h: 112;
    --success-s: 100%;
    --success-l: 40%;
    --success: var(--success-h) var(--success-s) var(--success-l);
    --success-d-100: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.1);
    --success-d-200: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.2);
    --success-d-300: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.3);
    --success-d-400: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.4);
    --success-d-500: var(--success-h) var(--success-s) calc(var(--success-l) - var(--success-l) * 0.5);
    --success-l-100: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.1);
    --success-l-200: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.2);
    --success-l-300: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.3);
    --success-l-400: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.4);
    --success-l-500: var(--success-h) calc(var(--success-s)) calc(var(--success-l) + (100% - var(--success-l)) * 0.5);
    --danger-h: 0;
    --danger-s: 96%;
    --danger-l: 63%;
    --danger: var(--danger-h) var(--danger-s) var(--danger-l);
    --danger-d-100: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.1);
    --danger-d-200: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.2);
    --danger-d-300: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.3);
    --danger-d-400: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.4);
    --danger-d-500: var(--danger-h) var(--danger-s) calc(var(--danger-l) - var(--danger-l) * 0.5);
    --danger-l-100: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.1);
    --danger-l-200: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.2);
    --danger-l-300: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.3);
    --danger-l-400: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.4);
    --danger-l-500: var(--danger-h) calc(var(--danger-s)) calc(var(--danger-l) + (100% - var(--danger-l)) * 0.5);
    --warning-h: 40;
    --warning-s: 100%;
    --warning-l: 46%;
    --warning: var(--warning-h) var(--warning-s) var(--warning-l);
    --warning-d-100: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.1);
    --warning-d-200: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.2);
    --warning-d-300: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.3);
    --warning-d-400: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.4);
    --warning-d-500: var(--warning-h) var(--warning-s) calc(var(--warning-l) - var(--warning-l) * 0.5);
    --warning-l-100: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.1);
    --warning-l-200: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.2);
    --warning-l-300: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.3);
    --warning-l-400: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.4);
    --warning-l-500: var(--warning-h) calc(var(--warning-s)) calc(var(--warning-l) + (100% - var(--warning-l)) * 0.5);
    --info-h: 196;
    --info-s: 100%;
    --info-l: 50%;
    --info: var(--info-h) var(--info-s) var(--info-l);
    --info-d-100: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.1);
    --info-d-200: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.2);
    --info-d-300: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.3);
    --info-d-400: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.4);
    --info-d-500: var(--info-h) var(--info-s) calc(var(--info-l) - var(--info-l) * 0.5);
    --info-l-100: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.1);
    --info-l-200: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.2);
    --info-l-300: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.3);
    --info-l-400: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.4);
    --info-l-500: var(--info-h) calc(var(--info-s)) calc(var(--info-l) + (100% - var(--info-l)) * 0.5)
}

:root [data-theme=dark] {
    --white: 200 9% 7%;
    --black: 210 40% 98%
}

.fit-image {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.flex-wrap,
.form--check,
.form--radio {
    display: flex;
    flex-wrap: wrap
}

.action-buttons,
.flex-align,
.flex-center {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.flex-center {
    justify-content: center
}

.flex-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center
}

.alert__link:before,
.pa-extend {
    position: absolute;
    content: ""
}

.custom--accordion .accordion-button[aria-expanded=false]:after,
.custom--accordion .accordion-button[aria-expanded=true]:after,
.top-center-extend {
    top: 50%;
    transform: translateY(-50%)
}

.left-center-extend {
    left: 50%;
    transform: translateX(-50%)
}

.top-left-center-extend {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.fs-10 {
    font-size: .625rem
}

.fs-11 {
    font-size: .6875rem
}

.fs-12 {
    font-size: .75rem
}

.fs-13 {
    font-size: .8125rem
}

.fs-14 {
    font-size: .875rem
}

.fs-15 {
    font-size: .9375rem
}

.fs-16 {
    font-size: 1rem
}

@media screen and (max-width:1199px) {
    .fs-16 {
        font-size: .9375rem
    }
}

.fs-17 {
    font-size: 1.0625rem
}

@media screen and (max-width:1199px) {
    .fs-17 {
        font-size: 1rem
    }
}

@media screen and (max-width:767px) {
    .fs-17 {
        font-size: .9375rem
    }
}

.fs-18 {
    font-size: 1.125rem
}

@media screen and (max-width:1399px) {
    .fs-18 {
        font-size: 1.0625rem
    }
}

@media screen and (max-width:767px) {
    .fs-18 {
        font-size: 1rem
    }
}

.fs-20 {
    font-size: 1.25rem
}

@media screen and (max-width:1399px) {
    .fs-20 {
        font-size: 1.125rem
    }
}

@media screen and (max-width:767px) {
    .fs-20 {
        font-size: 1.0625rem
    }
}

.fs-21 {
    font-size: 1.3125rem
}

@media screen and (max-width:1399px) {
    .fs-21 {
        font-size: 1.1875rem
    }
}

@media screen and (max-width:767px) {
    .fs-21 {
        font-size: 1.125rem
    }
}

.fs-22 {
    font-size: 1.375rem
}

@media screen and (max-width:1399px) {
    .fs-22 {
        font-size: 1.25rem
    }
}

@media screen and (max-width:767px) {
    .fs-22 {
        font-size: 1.1875rem
    }
}

.fs-23 {
    font-size: 1.4375rem
}

@media screen and (max-width:1399px) {
    .fs-23 {
        font-size: 1.3125rem
    }
}

@media screen and (max-width:767px) {
    .fs-23 {
        font-size: 1.25rem
    }
}

.fs-24 {
    font-size: 1.5rem
}

@media screen and (max-width:1399px) {
    .fs-24 {
        font-size: 1.375rem
    }
}

@media screen and (max-width:767px) {
    .fs-24 {
        font-size: 1.3125rem
    }
}

.fs-25 {
    font-size: 1.5625rem
}

@media screen and (max-width:1399px) {
    .fs-25 {
        font-size: 1.4375rem
    }
}

@media screen and (max-width:767px) {
    .fs-25 {
        font-size: 1.375rem
    }
}

.fs-26 {
    font-size: 1.625rem
}

@media screen and (max-width:1399px) {
    .fs-26 {
        font-size: 1.5rem
    }
}

@media screen and (max-width:767px) {
    .fs-26 {
        font-size: 1.4375rem
    }
}

.fs-27 {
    font-size: 1.6875rem
}

@media screen and (max-width:1399px) {
    .fs-27 {
        font-size: 1.5625rem
    }
}

@media screen and (max-width:767px) {
    .fs-27 {
        font-size: 1.5rem
    }
}

.fs-28 {
    font-size: 1.75rem
}

@media screen and (max-width:1399px) {
    .fs-28 {
        font-size: 1.625rem
    }
}

@media screen and (max-width:767px) {
    .fs-28 {
        font-size: 1.5625rem
    }
}

.fs-29 {
    font-size: 1.8125rem
}

@media screen and (max-width:1399px) {
    .fs-29 {
        font-size: 1.6875rem
    }
}

@media screen and (max-width:767px) {
    .fs-29 {
        font-size: 1.625rem
    }
}

.fs-30 {
    font-size: 1.875rem
}

@media screen and (max-width:1399px) {
    .fs-30 {
        font-size: 1.75rem
    }
}

@media screen and (max-width:767px) {
    .fs-30 {
        font-size: 1.6875rem
    }
}

.fs-31 {
    font-size: 1.9375rem
}

@media screen and (max-width:1399px) {
    .fs-31 {
        font-size: 1.8125rem
    }
}

@media screen and (max-width:767px) {
    .fs-31 {
        font-size: 1.75rem
    }
}

.fs-32 {
    font-size: 2rem
}

@media screen and (max-width:1399px) {
    .fs-32 {
        font-size: 1.875rem
    }
}

@media screen and (max-width:767px) {
    .fs-32 {
        font-size: 1.8125rem
    }
}

.fs-33 {
    font-size: 2.0625rem
}

@media screen and (max-width:1399px) {
    .fs-33 {
        font-size: 1.9375rem
    }
}

@media screen and (max-width:767px) {
    .fs-33 {
        font-size: 1.875rem
    }
}

.fs-34 {
    font-size: 2.125rem
}

@media screen and (max-width:1399px) {
    .fs-34 {
        font-size: 2rem
    }
}

@media screen and (max-width:767px) {
    .fs-34 {
        font-size: 1.9375rem
    }
}

.fs-35 {
    font-size: 2.1875rem
}

@media screen and (max-width:1399px) {
    .fs-35 {
        font-size: 2.0625rem
    }
}

@media screen and (max-width:767px) {
    .fs-35 {
        font-size: 2rem
    }
}

.fs-36 {
    font-size: 2.25rem
}

@media screen and (max-width:1399px) {
    .fs-36 {
        font-size: 2.125rem
    }
}

@media screen and (max-width:767px) {
    .fs-36 {
        font-size: 2.0625rem
    }
}

.fs-37 {
    font-size: 2.3125rem
}

@media screen and (max-width:1399px) {
    .fs-37 {
        font-size: 2.1875rem
    }
}

@media screen and (max-width:767px) {
    .fs-37 {
        font-size: 2.125rem
    }
}

.fs-38 {
    font-size: 2.375rem
}

@media screen and (max-width:1399px) {
    .fs-38 {
        font-size: 2.25rem
    }
}

@media screen and (max-width:767px) {
    .fs-38 {
        font-size: 2.1875rem
    }
}

.fs-39 {
    font-size: 2.4375rem
}

@media screen and (max-width:1399px) {
    .fs-39 {
        font-size: 2.3125rem
    }
}

@media screen and (max-width:767px) {
    .fs-39 {
        font-size: 2.25rem
    }
}

.fs-40 {
    font-size: 2.5rem
}

@media screen and (max-width:1399px) {
    .fs-40 {
        font-size: 2.375rem
    }
}

@media screen and (max-width:767px) {
    .fs-40 {
        font-size: 2.3125rem
    }
}

.fs-41 {
    font-size: 2.5625rem
}

@media screen and (max-width:1399px) {
    .fs-41 {
        font-size: 2.4375rem
    }
}

@media screen and (max-width:767px) {
    .fs-41 {
        font-size: 2.375rem
    }
}

.fs-42 {
    font-size: 2.625rem
}

@media screen and (max-width:1399px) {
    .fs-42 {
        font-size: 2.5rem
    }
}

@media screen and (max-width:767px) {
    .fs-42 {
        font-size: 2.4375rem
    }
}

.fs-43 {
    font-size: 2.6875rem
}

@media screen and (max-width:1399px) {
    .fs-43 {
        font-size: 2.5625rem
    }
}

@media screen and (max-width:767px) {
    .fs-43 {
        font-size: 2.5rem
    }
}

.fs-44 {
    font-size: 2.75rem
}

@media screen and (max-width:1399px) {
    .fs-44 {
        font-size: 2.625rem
    }
}

@media screen and (max-width:767px) {
    .fs-44 {
        font-size: 2.5625rem
    }
}

.fs-45 {
    font-size: 2.8125rem
}

@media screen and (max-width:1399px) {
    .fs-45 {
        font-size: 2.6875rem
    }
}

@media screen and (max-width:767px) {
    .fs-45 {
        font-size: 2.625rem
    }
}

.fs-46 {
    font-size: 2.875rem
}

@media screen and (max-width:1399px) {
    .fs-46 {
        font-size: 2.75rem
    }
}

@media screen and (max-width:767px) {
    .fs-46 {
        font-size: 2.6875rem
    }
}

.fs-47 {
    font-size: 2.9375rem
}

@media screen and (max-width:1399px) {
    .fs-47 {
        font-size: 2.8125rem
    }
}

@media screen and (max-width:767px) {
    .fs-47 {
        font-size: 2.75rem
    }
}

.fs-48 {
    font-size: 3rem
}

@media screen and (max-width:1399px) {
    .fs-48 {
        font-size: 2.875rem
    }
}

@media screen and (max-width:767px) {
    .fs-48 {
        font-size: 2.8125rem
    }
}

.fs-49 {
    font-size: 3.0625rem
}

@media screen and (max-width:1399px) {
    .fs-49 {
        font-size: 2.9375rem
    }
}

@media screen and (max-width:767px) {
    .fs-49 {
        font-size: 2.875rem
    }
}

.fs-50 {
    font-size: 3.125rem
}

@media screen and (max-width:1399px) {
    .fs-50 {
        font-size: 3rem
    }
}

@media screen and (max-width:767px) {
    .fs-50 {
        font-size: 2.9375rem
    }
}

.fs-51 {
    font-size: 3.1875rem
}

@media screen and (max-width:1399px) {
    .fs-51 {
        font-size: 3.0625rem
    }
}

@media screen and (max-width:767px) {
    .fs-51 {
        font-size: 3rem
    }
}

.fs-52 {
    font-size: 3.25rem
}

@media screen and (max-width:1399px) {
    .fs-52 {
        font-size: 3.125rem
    }
}

@media screen and (max-width:767px) {
    .fs-52 {
        font-size: 3.0625rem
    }
}

.fs-53 {
    font-size: 3.3125rem
}

@media screen and (max-width:1399px) {
    .fs-53 {
        font-size: 3.1875rem
    }
}

@media screen and (max-width:767px) {
    .fs-53 {
        font-size: 3.125rem
    }
}

.fs-54 {
    font-size: 3.375rem
}

@media screen and (max-width:1399px) {
    .fs-54 {
        font-size: 3.25rem
    }
}

@media screen and (max-width:767px) {
    .fs-54 {
        font-size: 3.1875rem
    }
}

.fs-55 {
    font-size: 3.4375rem
}

@media screen and (max-width:1399px) {
    .fs-55 {
        font-size: 3.3125rem
    }
}

@media screen and (max-width:767px) {
    .fs-55 {
        font-size: 3.25rem
    }
}

.fs-56 {
    font-size: 3.5rem
}

@media screen and (max-width:1399px) {
    .fs-56 {
        font-size: 3.375rem
    }
}

@media screen and (max-width:767px) {
    .fs-56 {
        font-size: 3.3125rem
    }
}

.fs-57 {
    font-size: 3.5625rem
}

@media screen and (max-width:1399px) {
    .fs-57 {
        font-size: 3.4375rem
    }
}

@media screen and (max-width:767px) {
    .fs-57 {
        font-size: 3.375rem
    }
}

.fs-58 {
    font-size: 3.625rem
}

@media screen and (max-width:1399px) {
    .fs-58 {
        font-size: 3.5rem
    }
}

@media screen and (max-width:767px) {
    .fs-58 {
        font-size: 3.4375rem
    }
}

.fs-59 {
    font-size: 3.6875rem
}

@media screen and (max-width:1399px) {
    .fs-59 {
        font-size: 3.5625rem
    }
}

@media screen and (max-width:767px) {
    .fs-59 {
        font-size: 3.5rem
    }
}

.fs-60 {
    font-size: 3.75rem
}

@media screen and (max-width:1399px) {
    .fs-60 {
        font-size: 3.625rem
    }
}

@media screen and (max-width:767px) {
    .fs-60 {
        font-size: 3.5rem
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body {
    font-family: var(--body-font);
    color: hsl(var(--body-color));
    word-break: break-word;
    background-color: hsl(var(--black));
    min-height: 100vh;
    display: flex;
    flex-direction: column
}

p {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    color: #D9D9D9
}

@media screen and (max-width:424px) {
    p {
        font-size: .875rem
    }
}

span {
    display: inline-block
}

figure {
    margin: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 20px;
    font-family: var(--heading-font);
    color: hsl(var(--heading-color));
    line-height: 1.3;
    font-weight: 700
}

@media screen and (max-width:767px) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0 0 15px
    }
}

h1 {
    font-size: 3.75rem
}

@media screen and (max-width:1399px) {
    h1 {
        font-size: 3.125rem
    }
}

@media screen and (max-width:1199px) {
    h1 {
        font-size: 2.8125rem
    }
}

@media screen and (max-width:991px) {
    h1 {
        font-size: 2.5rem !important
    }
}

@media screen and (max-width:575px) {
    h1 {
        font-size: 1.875rem !important
    }
}

h1 span {
    display: inline
}

h2 {
    font-size: 2.5rem
}

@media screen and (max-width:1399px) {
    h2 {
        font-size: 2.8125rem
    }
}

@media screen and (max-width:1199px) {
    h2 {
        font-size: 2.5rem
    }
}

@media screen and (max-width:991px) {
    h2 {
        font-size: 2.1875rem
    }
}

@media screen and (max-width:767px) {
    h2 {
        font-size: 1.875rem
    }
}

h3 {
    font-size: 2rem
}

@media screen and (max-width:1399px) {
    h3 {
        font-size: 2rem
    }
}

@media screen and (max-width:1199px) {
    h3 {
        font-size: 1.875rem
    }
}

@media screen and (max-width:991px) {
    h3 {
        font-size: 1.875rem
    }
}

@media screen and (max-width:767px) {
    h3 {
        font-size: 1.625rem
    }
}

h4 {
    font-size: 1.5rem
}

@media screen and (max-width:1399px) {
    h4 {
        font-size: 1.3125rem
    }
}

@media screen and (max-width:1199px) {
    h4 {
        font-size: 1.25rem
    }
}

@media screen and (max-width:991px) {
    h4 {
        font-size: 1.1875rem
    }
}

h5 {
    font-size: 1.25rem
}

@media screen and (max-width:1399px) {
    h5 {
        font-size: 1.1875rem
    }
}

@media screen and (max-width:1199px) {
    h5 {
        font-size: 1.125rem
    }
}

@media screen and (max-width:991px) {
    h5 {
        font-size: 1.0625rem
    }
}

@media screen and (max-width:767px) {
    h5 {
        font-size: 1rem
    }
}

@media screen and (max-width:575px) {
    h5 {
        font-size: 1rem
    }
}

h6 {
    font-size: 1rem
}

@media screen and (max-width:1399px) {
    h6 {
        font-size: 1rem
    }
}

@media screen and (max-width:1199px) {
    h6 {
        font-size: .9375rem
    }
}

@media screen and (max-width:991px) {
    h6 {
        font-size: .875rem
    }
}

@media screen and (max-width:767px) {
    h6 {
        font-size: .875rem
    }
}

@media screen and (max-width:575px) {
    h6 {
        font-size: .875rem
    }
}

h1>a,
h2>a,
h3>a,
h4>a,
h5>a,
h6>a {
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    transition: .2s linear;
    line-height: inherit
}

a {
    display: inline-block;
    transition: .2s linear;
    text-decoration: none;
    color: hsl(var(--info));
    cursor: pointer
}

a:hover {
    color: hsl(var(--base))
}

img {
    max-width: 100%;
    height: auto
}

select {
    cursor: pointer
}

ol,
ul {
    padding: 0;
    margin: 0;
    list-style: none
}

button {
    border: 0;
    background-color: transparent
}

button:focus {
    outline: none;
    box-shadow: none
}

.form-select:focus {
    outline: 0;
    box-shadow: none
}

.dashboard-body h1,
.dashboard-body h2,
.dashboard-body h3,
.dashboard-body h4,
.dashboard-body h5,
.dashboard-body h6 {
    font-family: var(--body-font)
}

@media screen and (min-width:425px) and (max-width:575px) {
    .col-xsm-6 {
        width: 50%
    }
}

.section-bg {
    background-color: hsl(var(--section-bg))
}

.text-muted {
    color: hsl(var(--white)/.6) !important
}

.bg-img {
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: 50%;
    width: 100%;
    height: 100%
}

.gradient-text {
    background-image: linear-gradient(180deg, hsl(var(--base-d-200)) 0, hsl(var(--base)) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text
}

.gradient-text::selection {
    color: hsl(var(--white));
    -webkit-text-fill-color: hsl(var(--white));
    background: transparent
}

.slide-transition {
    align-items: center;
    transition-timing-function: linear
}

.inner-slide-element {
    width: auto;
    display: inline-block;
    padding: 0 15px
}

.slide-text-black,
.slide-text-stock {
    color: hsl(var(--black));
    text-align: center;
    font-family: Jost;
    font-size: 80px;
    font-weight: 700
}

@media screen and (max-width:991px) {

    .slide-text-black,
    .slide-text-stock {
        font-size: 60px
    }
}

@media screen and (max-width:575px) {

    .slide-text-black,
    .slide-text-stock {
        font-size: 40px
    }
}

@media screen and (max-width:991px) {
    .slide-icon img {
        height: 60px
    }
}

@media msm-screen {
    .slide-icon img {
        height: 50px
    }
}

.slide-text-stock {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: hsl(var(--black));
    -webkit-text-fill-color: transparent
}

.wrapper {
    overflow-x: hidden
}

.section-content.text-center span {
    justify-content: center
}

.section-content h6,
.section-content span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: hsl(var(--base));
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 1.125rem
}

@media screen and (max-width:767px) {

    .section-content h6,
    .section-content span {
        font-size: .875rem
    }
}

.section-content h6:after,
.section-content h6:before,
.section-content span:after,
.section-content span:before {
    content: "\f110";
    font-style: normal;
    text-transform: none;
    line-height: 0;
    -webkit-font-smoothing: antialiased;
    font-family: flaticon_xtrade !important;
    font-weight: 400 !important;
    font-feature-settings: normal;
    font-variant: normal
}

.btn-slider-next,
.btn-slider-prev {
    --nav-offset: -7%;
    border: 1px solid hsl(var(--base-two));
    width: 48px;
    height: 48px;
    border-radius: 100%;
    color: hsl(var(--white));
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    transition: all .5s
}

@media screen and (max-width:1399px) {

    .btn-slider-next,
    .btn-slider-prev {
        --nav-offset: -5%
    }
}

@media screen and (max-width:991px) {

    .btn-slider-next,
    .btn-slider-prev {
        position: relative;
        bottom: 0;
        top: auto;
        transform: translateY(0)
    }
}

.btn-slider-next:hover,
.btn-slider-prev:hover {
    background-color: hsl(var(--base-two));
    color: hsl(var(--black))
}

.btn-slider-next:after,
.btn-slider-prev:after {
    font-size: 22px
}

.btn-slider-next {
    right: var(--nav-offset)
}

.btn-slider-prev {
    left: var(--nav-offset)
}

.swiper-button-disabled {
    opacity: .2;
    cursor: auto
}

@media screen and (max-width:991px) {
    .slider-btn {
        display: flex;
        align-items: center;
        gap: 15px
    }

    .btn-slider-next,
    .btn-slider-prev {
        --nav-offset: 0;
        border-radius: 7px
    }
}

.progress {
    --bs-progress-height: 5px;
    border-radius: 5px;
    background-color: hsl(var(--white)/.2);
    overflow: unset
}

.progress .progress-bar {
    transition: width 2s ease-in-out;
    width: 25%;
    background: hsl(var(--base));
    border-radius: 5px
}

.text-slide .swiper-wrapper {
    align-items: center;
    transition-timing-function: linear
}

.text-slide .swiper-slide {
    width: auto !important
}

.tradingview-widget-container a[href*="tradingview.com"],
.tradingview-widget-container a[href*=TradingView],
.tradingview-widget-container div[class*=branding],
.tradingview-widget-container div[class*=copyright],
.tradingview-widget-container iframe[src*="tradingview.com"]+div,
.tradingview-widget-container iframe[src*="tradingview.com"]~div[class*=branding],
.tradingview-widget-container iframe[src*="tradingview.com"]~div[class*=copyright],
.tradingview-widget-container p[class*=branding],
.tradingview-widget-container p[class*=copyright],
.tradingview-widget-container span[class*=branding],
.tradingview-widget-container span[class*=copyright],
.tradingview-widget-copyright {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important
}

iframe[src*="tradingview.com"] {
    border: none !important
}

[class*=TradingView] a[href*="tradingview.com"],
[class*=TradingView] a[href*=TradingView],
[class*=TradingView] div[class*=branding],
[class*=TradingView] div[class*=copyright],
[class*=TradingView] p[class*=branding],
[class*=TradingView] p[class*=copyright],
[class*=TradingView] span[class*=branding],
[class*=TradingView] span[class*=copyright],
[class*=tradingview] a[href*="tradingview.com"],
[class*=tradingview] a[href*=TradingView],
[class*=tradingview] div[class*=branding],
[class*=tradingview] div[class*=copyright],
[class*=tradingview] p[class*=branding],
[class*=tradingview] p[class*=copyright],
[class*=tradingview] span[class*=branding],
[class*=tradingview] span[class*=copyright] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important
}

.bg--base {
    background-color: hsl(var(--base)) !important
}

.bg--primary {
    background-color: hsl(var(--primary)) !important
}

.bg--secondary {
    background-color: hsl(var(--secondary)) !important
}

.bg--success {
    background-color: hsl(var(--success)) !important
}

.bg--danger {
    background-color: hsl(var(--danger)) !important
}

.bg--warning {
    background-color: hsl(var(--warning)) !important
}

.bg--info {
    background-color: hsl(var(--info)) !important
}

.bg--black {
    background-color: hsl(var(--black)) !important
}

.bg--black-two {
    background-color: hsl(var(--black-two)) !important
}

.text--base {
    color: hsl(var(--base)) !important
}

.text--primary {
    color: hsl(var(--primary)) !important
}

.text--secondary {
    color: hsl(var(--secondary)) !important
}

.text--success {
    color: hsl(var(--success)) !important
}

.text--danger {
    color: hsl(var(--danger)) !important
}

.text--warning {
    color: hsl(var(--warning)) !important
}

.text--info {
    color: hsl(var(--info)) !important
}

.my-120 {
    margin-top: 60px;
    margin-bottom: 60px
}

@media (min-width:576px) {
    .my-120 {
        margin-top: 80px;
        margin-bottom: 80px
    }
}

@media (min-width:992px) {
    .my-120 {
        margin-top: 120px;
        margin-bottom: 120px
    }
}

.mt-120 {
    margin-top: 60px
}

@media (min-width:576px) {
    .mt-120 {
        margin-top: 80px
    }
}

@media (min-width:992px) {
    .mt-120 {
        margin-top: 120px
    }
}

.mb-120 {
    margin-bottom: 60px
}

@media (min-width:576px) {
    .mb-120 {
        margin-bottom: 80px
    }
}

@media (min-width:992px) {
    .mb-120 {
        margin-bottom: 120px
    }
}

.my-60 {
    margin-top: 30px;
    margin-bottom: 30px
}

@media (min-width:576px) {
    .my-60 {
        margin-top: 40px;
        margin-bottom: 40px
    }
}

@media (min-width:992px) {
    .my-60 {
        margin-top: 60px;
        margin-bottom: 60px
    }
}

.mt-60 {
    margin-top: 30px
}

@media (min-width:576px) {
    .mt-60 {
        margin-top: 40px
    }
}

@media (min-width:992px) {
    .mt-60 {
        margin-top: 60px
    }
}

.mb-60 {
    margin-bottom: 30px
}

@media (min-width:576px) {
    .mb-60 {
        margin-bottom: 40px
    }
}

@media (min-width:992px) {
    .mb-60 {
        margin-bottom: 60px
    }
}

.py-120 {
    padding-top: 60px;
    padding-bottom: 60px
}

@media (min-width:576px) {
    .py-120 {
        padding-top: 80px;
        padding-bottom: 80px
    }
}

@media (min-width:992px) {
    .py-120 {
        padding-top: 120px;
        padding-bottom: 120px
    }
}

.pt-120 {
    padding-top: 60px
}

@media (min-width:576px) {
    .pt-120 {
        padding-top: 80px
    }
}

@media (min-width:992px) {
    .pt-120 {
        padding-top: 120px
    }
}

.pb-120 {
    padding-bottom: 60px
}

@media (min-width:576px) {
    .pb-120 {
        padding-bottom: 80px
    }
}

@media (min-width:992px) {
    .pb-120 {
        padding-bottom: 120px
    }
}

.py-60 {
    padding-top: 30px;
    padding-bottom: 30px
}

@media (min-width:576px) {
    .py-60 {
        padding-top: 40px;
        padding-bottom: 40px
    }
}

@media (min-width:992px) {
    .py-60 {
        padding-top: 60px;
        padding-bottom: 60px
    }
}

.pt-60 {
    padding-top: 30px
}

@media (min-width:576px) {
    .pt-60 {
        padding-top: 40px
    }
}

@media (min-width:992px) {
    .pt-60 {
        padding-top: 60px
    }
}

.pb-60 {
    padding-bottom: 30px
}

@media (min-width:576px) {
    .pb-60 {
        padding-bottom: 40px
    }
}

@media (min-width:992px) {
    .pb-60 {
        padding-bottom: 60px
    }
}

.border--base {
    border-color: hsl(var(--base)) !important
}

.border--primary {
    border-color: hsl(var(--primary)) !important
}

.border--secondary {
    border-color: hsl(var(--secondary)) !important
}

.border--success {
    border-color: hsl(var(--success)) !important
}

.border--danger {
    border-color: hsl(var(--danger)) !important
}

.border--warning {
    border-color: hsl(var(--warning)) !important
}

.border--info {
    border-color: hsl(var(--info)) !important
}

.custom--accordion {
    font-family: Inter
}

.custom--accordion h2 {
    font-family: Inter;
    font-weight: 600
}

.custom--accordion .accordion-item {
    --border-radius: 10px;
    border: 1px solid hsl(var(--black)/.09);
    background-color: transparent !important;
    border-radius: var(--border-radius);
    overflow: hidden
}

.custom--accordion .accordion-item:not(:last-child) {
    margin-bottom: 20px
}

.custom--accordion .accordion-header {
    line-height: 1
}

.custom--accordion .accordion-body {
    padding: 20px 30px;
    background-color: hsl(var(--black-two))
}

@media screen and (max-width:575px) {
    .custom--accordion .accordion-body {
        padding: 15px
    }
}

@media screen and (max-width:424px) {
    .custom--accordion .accordion-body {
        padding: 10px
    }
}

.custom--accordion .accordion-body p {
    font-weight: 300
}

.custom--accordion .accordion-body .text {
    max-width: 60%
}

@media screen and (max-width:575px) {
    .custom--accordion .accordion-body .text {
        max-width: 100%
    }
}

.custom--accordion:first-of-type .accordion-button.collapsed,
.custom--accordion:last-of-type .accordion-button.collapsed {
    border-radius: var(--border-radius)
}

.custom--accordion .accordion-button {
    background-color: hsl(var(--black-two));
    color: var(--heading-color);
    font-size: 1.125rem;
    padding: 20px 30px
}

@media screen and (max-width:575px) {
    .custom--accordion .accordion-button {
        padding: 13px 30px 13px 13px;
        font-size: 1rem;
        line-height: 1.3
    }
}

.custom--accordion .accordion-button:after {
    background-image: none
}

.custom--accordion .accordion-button:focus {
    box-shadow: none
}

.custom--accordion .accordion-button:not(.collapsed) {
    background-color: hsl(var(--base));
    color: hsl(var(--black));
    box-shadow: none
}

.custom--accordion .accordion-button:not(.collapsed):after {
    background-image: none;
    color: hsl(var(--black))
}

.custom--accordion .accordion-button[aria-expanded=false]:after,
.custom--accordion .accordion-button[aria-expanded=true]:after {
    font-family: Font Awesome\ 6 free;
    font-weight: 900;
    content: "\f106";
    display: inline-block;
    position: absolute;
    right: 15px;
    height: unset
}

.custom--accordion .accordion-button[aria-expanded=false]:after {
    content: "\f107";
    color: hsl(var(--body-color))
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    color: none;
    background-color: none;
    border-color: none
}

.pill {
    border-radius: 40px !important
}

.btn {
    color: hsl(var(--white));
    font-weight: 500;
    padding: 17px 29px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
    font-family: var(--title-font);
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer
}

@media screen and (max-width:767px) {
    .btn {
        padding: 14px 25px;
        font-size: .875rem
    }
}

@media screen and (max-width:575px) {
    .btn {
        padding: 12px 20px
    }
}

.btn i {
    line-height: 0;
    position: relative;
    bottom: -3px
}

.btn:focus,
.btn:focus-visible,
.btn:hover {
    box-shadow: none !important
}

.btn:active {
    top: 1px
}

.btn--lg {
    padding: 20px 35px
}

@media screen and (max-width:991px) {
    .btn--lg {
        padding: 18px 30px
    }
}

@media screen and (max-width:767px) {
    .btn--lg {
        padding: 16px 25px
    }
}

.btn--sm {
    padding: 7px 18px;
    font-weight: 600;
    font-size: .75rem
}

@media screen and (max-width:767px) {
    .btn--sm {
        padding: 8px 12px
    }
}

.btn--icon {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: .9375rem;
    padding: 0
}

.btn--base {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--black))
}

.btn--base:focus .btn--base:focus-visible,
.btn--base:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--black)) !important
}

.btn-outline--base {
    background-color: transparent !important;
    border: 1px solid hsl(var(--base)) !important;
    color: hsl(var(--white)) !important
}

.btn-outline--base:focus .btn-outline--base:focus-visible,
.btn-outline--base:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--black)) !important
}

.btn--base-two {
    background-color: hsl(var(--base-two)) !important;
    color: hsl(var(--black))
}

.btn--base-two:focus .btn--base-two:focus-visible,
.btn--base-two:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--black)) !important
}

.btn-outline--base-two {
    background-color: transparent !important;
    border: 1px solid hsl(var(--base-two)) !important;
    color: hsl(var(--white)) !important
}

.btn-outline--base-two:focus .btn-outline--base-two:focus-visible,
.btn-outline--base-two:hover {
    background-color: hsl(var(--base-two)) !important;
    color: hsl(var(--black)) !important
}

.btn--black-two {
    background-color: hsl(var(--black-two)) !important;
    color: hsl(var(--black))
}

.btn--black-two:focus .btn--black-two:focus-visible,
.btn--black-two:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--black)) !important
}

.btn-outline--black-two {
    background-color: transparent !important;
    border: 1px solid hsl(var(--black-two)) !important;
    color: hsl(var(--white)) !important
}

.btn-outline--black-two:focus .btn-outline--black-two:focus-visible,
.btn-outline--black-two:hover {
    background-color: hsl(var(--black-two)) !important;
    color: hsl(var(--black)) !important
}

.btn--primary {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--black))
}

.btn--primary:focus .btn--primary:focus-visible,
.btn--primary:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--black)) !important
}

.btn-outline--primary {
    background-color: transparent !important;
    border: 1px solid hsl(var(--primary)) !important;
    color: hsl(var(--white)) !important
}

.btn-outline--primary:focus .btn-outline--primary:focus-visible,
.btn-outline--primary:hover {
    background-color: hsl(var(--primary)) !important;
    color: hsl(var(--black)) !important
}

.btn--secondary {
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--black))
}

.btn--secondary:focus .btn--secondary:focus-visible,
.btn--secondary:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--black)) !important
}

.btn-outline--secondary {
    background-color: transparent !important;
    border: 1px solid hsl(var(--secondary)) !important;
    color: hsl(var(--white)) !important
}

.btn-outline--secondary:focus .btn-outline--secondary:focus-visible,
.btn-outline--secondary:hover {
    background-color: hsl(var(--secondary)) !important;
    color: hsl(var(--black)) !important
}

.btn--danger {
    background-color: hsl(var(--danger)) !important;
    color: hsl(var(--black))
}

.btn--danger:focus .btn--danger:focus-visible,
.btn--danger:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--black)) !important
}

.btn-outline--danger {
    background-color: transparent !important;
    border: 1px solid hsl(var(--danger)) !important;
    color: hsl(var(--white)) !important
}

.btn-outline--danger:focus .btn-outline--danger:focus-visible,
.btn-outline--danger:hover {
    background-color: hsl(var(--danger)) !important;
    color: hsl(var(--black)) !important
}

.btn--warning {
    background-color: hsl(var(--warning)) !important;
    color: hsl(var(--black))
}

.btn--warning:focus .btn--warning:focus-visible,
.btn--warning:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--black)) !important
}

.btn-outline--warning {
    background-color: transparent !important;
    border: 1px solid hsl(var(--warning)) !important;
    color: hsl(var(--white)) !important
}

.btn-outline--warning:focus .btn-outline--warning:focus-visible,
.btn-outline--warning:hover {
    background-color: hsl(var(--warning)) !important;
    color: hsl(var(--black)) !important
}

.btn--info {
    background-color: hsl(var(--info)) !important;
    color: hsl(var(--black))
}

.btn--info:focus .btn--info:focus-visible,
.btn--info:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--black)) !important
}

.btn-outline--info {
    background-color: transparent !important;
    border: 1px solid hsl(var(--info)) !important;
    color: hsl(var(--white)) !important
}

.btn-outline--info:focus .btn-outline--info:focus-visible,
.btn-outline--info:hover {
    background-color: hsl(var(--info)) !important;
    color: hsl(var(--black)) !important
}

.form--label {
    margin-bottom: 6px;
    font-size: .9375rem;
    color: hsl(var(--black)/.6);
    font-weight: 500
}

.form-group {
    margin-bottom: 1rem
}

.select {
    color: hsl(var(--black)/.6) !important
}

.select:focus {
    border-color: hsl(var(--base));
    color: hsl(var(--black)) !important
}

.select option {
    background-color: hsl(var(--black));
    color: hsl(var(--white))
}

.form-control {
    border-radius: 7px;
    font-weight: 400;
    outline: none;
    width: 100%;
    padding: 18px;
    background-color: transparent;
    border: 1px solid hsl(var(--white)/.12);
    color: hsl(var(--white));
    line-height: 1
}

.form-control::placeholder {
    color: hsl(var(--gray-two)/.8);
    font-size: 1rem
}

.form-control:focus {
    border-color: hsl(var(--base));
    background: transparent;
    color: hsl(var(--white));
    box-shadow: none
}

.form-control:disabled,
.form-control[readonly] {
    background-color: hsl(var(--white)/.12);
    opacity: 1;
    border: 0
}

.form-control[type=password] {
    color: hsl(var(--white)/.5)
}

.form-control[type=password]:focus {
    color: hsl(var(--white))
}

.form-control[type=file] {
    line-height: 50px;
    padding: 0;
    position: relative
}

.form-control[type=file]::-webkit-file-upload-button {
    border: 1px solid hsl(var(--white)/.08);
    padding: 4px 6px;
    border-radius: .2em;
    background-color: hsl(var(--base)) !important;
    -webkit-transition: .2s linear;
    transition: .2s linear;
    line-height: 25px;
    position: relative;
    margin-left: 15px;
    color: hsl(var(--body-color)) !important
}

.form-control[type=file]::file-selector-button {
    border: 1px solid hsl(var(--white)/.08);
    padding: 4px 6px;
    border-radius: .2em;
    background-color: hsl(var(--base)) !important;
    transition: .2s linear;
    line-height: 25px;
    position: relative;
    margin-left: 15px;
    color: hsl(var(--body-color)) !important
}

.form-control[type=file]::-webkit-file-upload-button:hover {
    background-color: hsl(var(--base));
    border: 1px solid hsl(var(--base));
    color: hsl(var(--black))
}

.form-control[type=file]::file-selector-button:hover {
    background-color: hsl(var(--base));
    border: 1px solid hsl(var(--base));
    color: hsl(var(--black))
}

textarea.form--control {
    height: 130px
}

input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s
}

input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 1000px transparent;
    -webkit-text-fill-color: hsl(var(--white)) !important;
    caret-color: hsl(var(--white))
}

.input--group {
    position: relative
}

input#confirm-password,
input#your-password {
    padding-right: 50px
}

.password-show-hide {
    position: absolute;
    right: 20px;
    z-index: 5;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--black)/.4)
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none
}

input[type=number] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

.form--check a {
    display: inline
}

.form--check .form-check-input {
    box-shadow: none;
    background-color: transparent;
    box-shadow: none !important;
    border: 0;
    position: relative;
    border-radius: 3px;
    width: 16px;
    height: 16px;
    border: 1px solid hsl(var(--white)/.2);
    cursor: pointer
}

.form--check .form-check-input:checked {
    background-color: hsl(var(--base)) !important;
    border-color: hsl(var(--base)) !important;
    box-shadow: none
}

.form--check .form-check-input:checked[type=checkbox] {
    background-image: none
}

.form--check .form-check-input:checked:before {
    position: absolute;
    content: "\f00c";
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    color: hsl(var(--black));
    font-size: .6875rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.form--check .form-check-label {
    font-weight: 600;
    width: calc(100% - 16px);
    padding-left: 12px;
    cursor: pointer;
    font-size: .875rem
}

@media screen and (max-width:424px) {

    .form--check a,
    .form--check label {
        font-size: .9375rem
    }
}

.form--radio .form-check-input {
    box-shadow: none;
    border: 1px solid hsl(var(--black)/.2);
    position: relative;
    background-color: transparent;
    cursor: pointer;
    width: 16px;
    height: 16px
}

.form--radio .form-check-input:active {
    filter: brightness(100%)
}

.form--radio .form-check-input:checked {
    background-color: transparent;
    border-color: hsl(var(--base))
}

.form--radio .form-check-input:checked[type=radio] {
    background-image: none
}

.form--radio .form-check-input:checked:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background-color: hsl(var(--base));
    border-radius: 50%;
    z-index: 999
}

.form--radio .form-check-label {
    font-weight: 600;
    width: calc(100% - 16px);
    padding-left: 12px;
    cursor: pointer;
    font-size: .875rem
}

.form--switch .form-check-input {
    border-radius: 3px;
    border: 0;
    background-color: hsl(var(--black)/.2) !important;
    padding: 10px !important;
    margin-left: 0;
    margin-bottom: 5px;
    width: 70px;
    height: 38px;
    cursor: pointer
}

.form--switch .form-check-input,
.form--switch .form-check-input:focus {
    background-image: none;
    position: relative;
    box-shadow: none;
    border-radius: 40px
}

.form--switch .form-check-input:focus {
    border: 0
}

.form--switch .form-check-input:before {
    position: absolute;
    content: "";
    width: 28px;
    height: 28px;
    background-color: hsl(var(--white));
    top: 50%;
    transform: translateY(-50%);
    border-radius: 2px;
    left: 5px;
    border-radius: 50%;
    transition: .2s linear
}

.form--switch .form-check-input:checked {
    background-color: hsl(var(--base)) !important
}

.form--switch .form-check-input:checked:before {
    left: calc(100% - 33px);
    background-color: hsl(var(--white)) !important
}

.form--switch .form-check-input:checked[type=checkbox] {
    background-image: none
}

.form--switch .form-check-label {
    width: calc(100% - 14px);
    padding-left: 5px;
    cursor: pointer
}

.input--group {
    border-radius: 5px;
    border: 1px solid hsl(var(--border-color))
}

.input--group .form--control {
    border-width: 0 !important;
    padding-right: 5px;
    box-shadow: unset
}

.input--group .input-group-text+.form--control {
    padding-right: 20px;
    padding-left: 10px
}

.input--group:focus-within {
    border: 1px solid hsl(var(--base))
}

.input--group .input-group-text {
    border-width: 0;
    height: calc(100% - 10px);
    margin: 5px;
    border-radius: 5px;
    background-color: hsl(var(--black)/.1);
    color: hsl(var(--body-color))
}

.input--group-text {
    margin-left: 5px
}

.input--group .form--control[readonly] {
    background: hsl(var(--black)/.3) !important
}

.input--group .form--control[readonly]:focus {
    border-color: hsl(var(--black)/.3)
}

.input--group:has(.form--control[readonly]) {
    background: hsl(var(--black)/.3) !important
}

.input--group:has(.form--control[readonly]):focus-within {
    border-color: hsl(var(--black)/.4) !important
}

.forgot-text {
    color: hsl(var(--body-color));
    font-size: .875rem
}

.custom--modal .modal-header {
    border-bottom: 1px solid hsl(var(--black)/.12);
    padding: 15px
}

.custom--modal .modal-header.close {
    width: 35px;
    height: 35px;
    background-color: hsl(var(--danger));
    font-size: 1.5625rem;
    line-height: 1;
    border-radius: 4px;
    transition: .2s linear
}

.custom--modal .modal-header.close:hover {
    background-color: hsl(var(--danger-l-100))
}

.custom--modal .modal-header.close :focus {
    box-shadow: none
}

.custom--modal .modal-content {
    border-radius: 10px !important
}

.custom--modal .modal-body {
    padding: 15px
}

.custom--modal .modal-icon i {
    font-size: 2rem;
    color: hsl(var(--base));
    border: 3px solid hsl(var(--base));
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%
}

.custom--modal .modal-footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-top: 1px solid hsl(var(--black)/.12);
    justify-content: flex-end
}

.pagination {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 56px
}

@media screen and (max-width:1199px) {
    .pagination {
        margin-top: 48px
    }
}

@media screen and (max-width:991px) {
    .pagination {
        margin-top: 40px
    }
}

@media screen and (max-width:767px) {
    .pagination {
        margin-top: 32px
    }
}

.pagination .page-item.active .page-link {
    background-color: hsl(var(--base));
    color: hsl(var(--black));
    border-color: hsl(var(--base))
}

.pagination .page-item .page-link {
    border: 1px solid hsl(var(--black)/.15);
    margin: 0 5px;
    border-radius: 7px;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    font-weight: 500;
    padding: 0;
    color: hsl(var(--body-color))
}

.pagination .page-item .page-link:hover {
    background-color: hsl(var(--base));
    color: hsl(var(--black));
    border-color: hsl(var(--base))
}

.pagination .page-item .page-link:focus {
    box-shadow: none
}

@media screen and (max-width:374px) {
    .customer {
        display: block;
        text-align: left
    }
}

.customer__thumb {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden
}

@media screen and (max-width:374px) {
    .customer__thumb {
        margin-left: auto
    }
}

.customer__content {
    width: calc(100% - 35px);
    padding-left: 15px;
    text-align: left
}

@media screen and (max-width:424px) {
    .customer__content {
        padding-left: 8px
    }
}

@media screen and (max-width:374px) {
    .customer__content {
        width: 100%;
        padding-left: 0;
        padding-top: 5px
    }
}

.customer__name {
    margin-bottom: 0;
    font-size: .8125rem;
    color: hsl(var(--black)/.7)
}

.action-buttons {
    gap: 10px;
    justify-content: flex-end
}

.action-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%
}

.edit-btn {
    color: hsl(var(--info));
    background-color: hsl(var(--info)/.08)
}

.delete-btn {
    color: hsl(var(--danger));
    background-color: hsl(var(--danger)/.08)
}

.table {
    margin: 0;
    border-collapse: collapse;
    border-collapse: separate;
    border-spacing: 0
}

.table thead tr th {
    background-color: hsl(var(--white));
    text-align: center;
    padding: 15px 20px;
    color: hsl(var(--black)/.7);
    font-family: var(--heading-font);
    font-weight: 600;
    border-bottom: 0;
    max-width: 170px;
    font-size: .875rem;
    border: 1px solid hsl(var(--black)/.08);
    background-color: hsl(var(--base)/.03)
}

.table thead tr th:not(:first-child) {
    border-left: 0
}

.table thead tr th:first-child {
    text-align: left;
    border-radius: 6px 0 0 0
}

.table thead tr th:last-child {
    border-radius: 0 6px 0 0;
    text-align: right
}

.table thead tr th:nth-child(2) {
    text-align: left
}

.table tbody {
    border: 0 !important;
    background-color: hsl(var(--white))
}

.table tbody tr {
    border-bottom: 1px solid hsl(var(--black)/.08)
}

.table tbody tr:last-child {
    border-bottom: 0
}

.table tbody tr:last-child td {
    border-bottom: 1px solid hsl(var(--black)/.08)
}

.table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 6px
}

.table tbody tr:last-child td:last-child {
    border-radius: 0 0 6px 0
}

.table tbody tr td {
    text-align: center;
    vertical-align: middle;
    padding: 10px 15px;
    border: 0;
    color: hsl(var(--black)/.7);
    max-width: 170px;
    font-size: .8125rem;
    border-bottom: 1px solid hsl(var(--black)/.08);
    border-right: 1px solid hsl(var(--black)/.08)
}

.table tbody tr td,
.table tbody tr td:before {
    font-family: var(--heading-font);
    font-weight: 500
}

.table tbody tr td:before {
    content: attr(data-label);
    font-size: .9375rem;
    color: hsl(var(--black));
    display: none;
    width: 45% !important;
    text-align: left
}

.table tbody tr td:first-child {
    text-align: left;
    border-left: 1px solid hsl(var(--black)/.08);
    font-size: .875rem
}

.table tbody tr td:last-child {
    text-align: right;
    border-right: 1px solid hsl(var(--black)/.08)
}

@media screen and (max-width:767px) {
    .table--responsive--md thead {
        display: none
    }

    .table--responsive--md tbody tr {
        display: block
    }

    .table--responsive--md tbody tr:last-child td {
        border-bottom: 0
    }

    .table--responsive--md tbody tr td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        text-align: right;
        padding: 10px 15px;
        border: none;
        border-bottom: 1px solid hsl(var(--black)/.8);
        max-width: unset
    }

    .table--responsive--md tbody tr td:last-child {
        border: none
    }

    .table--responsive--md tbody tr td:first-child {
        text-align: right;
        border-left: 0
    }

    .table--responsive--md tbody tr td:before {
        display: block;
        font-size: .875rem;
        color: hsl(var(--black)/.7)
    }

    .table--responsive--md tbody tr td {
        border: 0
    }
}

@media screen and (max-width:991px) {
    .table--responsive--lg thead {
        display: none
    }

    .table--responsive--lg tbody tr {
        display: block
    }

    .table--responsive--lg tbody tr:nth-child(2n) {
        background-color: hsl(var(--black)/.02)
    }

    .table--responsive--lg tbody tr:last-child td {
        border-bottom: 0
    }

    .table--responsive--lg tbody tr td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        text-align: right;
        padding: 10px 15px;
        border: none;
        border-bottom: 1px solid hsl(var(--black)/.08);
        max-width: unset
    }

    .table--responsive--lg tbody tr td:last-child {
        border: none
    }

    .table--responsive--lg tbody tr td:first-child {
        text-align: right;
        border-left: 0
    }

    .table--responsive--lg tbody tr td:before {
        display: block;
        font-size: .875rem;
        color: hsl(var(--black)/.7)
    }

    .table--responsive--lg tbody tr td {
        border: none
    }
}

@media screen and (max-width:1199px) {
    .table--responsive--xl thead {
        display: none
    }

    .table--responsive--xl tbody tr {
        display: block
    }

    .table--responsive--xl tbody tr:nth-child(2n) {
        background-color: hsl(var(--black)/.02)
    }

    .table--responsive--xl tbody tr td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        text-align: right;
        padding: 10px 15px;
        border: none;
        border-bottom: 1px solid hsl(var(--black)/.08);
        max-width: unset
    }

    .table--responsive--xl tbody tr td:last-child {
        border: none
    }

    .table--responsive--xl tbody tr td:first-child {
        text-align: right;
        border-left: 0
    }

    .table--responsive--xl tbody tr td:before {
        display: block;
        font-size: .875rem;
        color: hsl(var(--black)/.7)
    }

    .table--responsive--xl tbody tr td {
        border: 0
    }
}

@media screen and (max-width:1399px) {
    .table--responsive--xxl thead {
        display: none
    }

    .table--responsive--xxl tbody tr {
        display: block
    }

    .table--responsive--xxl tbody tr:last-child td {
        border-bottom: 0
    }

    .table--responsive--xxl tbody tr td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        text-align: right;
        padding: 10px 15px;
        border: none;
        border-bottom: 1px solid hsl(var(--black)/.08);
        max-width: unset
    }

    .table--responsive--xxl tbody tr td:last-child {
        border: none
    }

    .table--responsive--xxl tbody tr td:first-child {
        text-align: right;
        border-left: 0
    }

    .table--responsive--xxl tbody tr td:before {
        display: block;
        font-size: .875rem;
        color: hsl(var(--black)/.7)
    }

    .table--responsive--xxl tbody tr td {
        border: 0
    }
}

.custom--tab {
    justify-content: center;
    border-radius: 6px;
    margin-bottom: 40px
}

.custom--tab .nav-item {
    border-bottom: 0;
    padding: 5px
}

.custom--tab .nav-item .nav-link {
    color: hsl(var(--white));
    padding: 8px 25px;
    background-color: transparent !important;
    border-radius: 5px;
    transition: .4s;
    border: 1px solid hsl(var(--black)/.08) !important
}

@media screen and (max-width:1199px) {
    .custom--tab .nav-item .nav-link {
        padding: 12px 15px
    }
}

.custom--tab .nav-item .nav-link.active {
    color: hsl(var(--white));
    background-color: hsl(var(--base-d-200)) !important;
    border: 1px solid transparent !important
}

.custom--tab .nav-item .nav-link.active:hover {
    color: hsl(var(--white))
}

.custom--tab .nav-item .nav-link:hover {
    color: hsl(var(--base))
}

.custom--badge {
    font-size: .75rem;
    border-radius: 5px;
    padding: 8px 10px;
    font-weight: 500;
    position: relative;
    text-align: center
}

.badge--base {
    background-color: hsl(var(--base)/.15) !important;
    color: hsl(var(--base)) !important
}

.badge--primary {
    background-color: hsl(var(--primary)/.15) !important;
    color: hsl(var(--primary)) !important
}

.badge--secondary {
    background-color: hsl(var(--secondary)/.15) !important;
    color: hsl(var(--secondary)) !important
}

.badge--success {
    background-color: hsl(var(--success)/.15) !important;
    color: hsl(var(--success)) !important
}

.badge--danger {
    background-color: hsl(var(--danger)/.15) !important;
    color: hsl(var(--danger)) !important
}

.badge--warning {
    background-color: hsl(var(--warning)/.15) !important;
    color: hsl(var(--warning)) !important
}

.badge--info {
    background-color: hsl(var(--info)/.15) !important;
    color: hsl(var(--info)) !important
}

.alert {
    margin-bottom: 0;
    background-color: hsl(var(--white)) !important;
    font-weight: 400;
    padding: 17px 24px;
    border-radius: 5px
}

@media screen and (max-width:991px) {
    .alert {
        padding: 16px
    }
}

@media screen and (max-width:575px) {
    .alert {
        padding: 12px
    }
}

.alert__icon {
    font-size: 1.5rem;
    line-height: 1
}

.alert__content {
    width: calc(100% - 24px);
    padding-left: 32px
}

@media screen and (max-width:991px) {
    .alert__content {
        padding-left: 16px
    }
}

@media screen and (max-width:575px) {
    .alert__content {
        padding-left: 0;
        width: 100%;
        margin-top: 6px
    }
}

.alert__title {
    font-size: 1rem;
    color: hsl(var(--base-two)/.8);
    font-weight: 600;
    font-family: var(--heading-font);
    margin-bottom: 6px
}

.alert__desc {
    color: hsl(var(--base-two)/.5);
    display: block;
    line-height: 1.375
}

@media screen and (max-width:424px) {
    .alert__desc {
        font-size: .8125rem
    }
}

.alert__link {
    position: relative
}

.alert__link:hover:before {
    visibility: visible;
    opacity: 1;
    bottom: 0
}

.alert__link:before {
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background-color: hsl(var(--base));
    visibility: hidden;
    opacity: 0;
    transition: .2s ease-in-out
}

.alert--base {
    border-color: hsl(var(--base)/.6)
}

.alert--base .alert__icon {
    color: hsl(var(--base))
}

.alert--primary {
    border-color: hsl(var(--primary)/.6)
}

.alert--primary .alert__icon {
    color: hsl(var(--primary))
}

.alert--success {
    border-color: hsl(var(--success)/.6)
}

.alert--success .alert__icon {
    color: hsl(var(--success))
}

.alert--info {
    border-color: hsl(var(--info)/.6)
}

.alert--info .alert__icon {
    color: hsl(var(--info))
}

.alert--danger {
    border-color: hsl(var(--danger)/.6)
}

.alert--danger .alert__icon {
    color: hsl(var(--danger))
}

.alert--warning {
    border-color: hsl(var(--warning)/.6)
}

.alert--warning .alert__icon {
    color: hsl(var(--warning))
}

.alert--secondary {
    border-color: hsl(var(--secondary)/.6)
}

.alert--secondary .alert__icon {
    color: hsl(var(--secondary))
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    background-color: hsl(var(--section-bg));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: grid;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: height .5s, opacity .5s, border-radius .5s
}

#preloader #text {
    display: flex;
    align-items: center;
    gap: 12px
}

@media screen and (max-width:767px) {
    #preloader #text {
        gap: 7px
    }
}

#preloader #text p {
    color: hsl(var(--white));
    font-size: 3.75rem;
    font-weight: 800;
    margin: 0;
    opacity: 0;
    animation: fadeIn 1.5s ease-in-out infinite;
    font-family: var(--title-font)
}

@media screen and (max-width:767px) {
    #preloader #text p {
        font-size: 2.5rem
    }
}

#preloader #text p.active {
    background: var(--gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

#preloader #text p:first-child {
    animation-delay: 0s
}

#preloader #text p:nth-child(2) {
    animation-delay: .2s
}

#preloader #text p:nth-child(3) {
    animation-delay: .4s
}

#preloader #text p:nth-child(4) {
    animation-delay: .6s
}

#preloader #text p:nth-child(5) {
    animation-delay: .8s
}

#preloader #text p:nth-child(6) {
    animation-delay: 1s
}

#preloader #text p:nth-child(7) {
    animation-delay: 1.2s
}

#preloader #text p:nth-child(8) {
    animation-delay: 1.4s
}

#preloader #text p:nth-child(9) {
    animation-delay: 1.6s
}

#preloader #text p:nth-child(10) {
    animation-delay: 1.8s
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.navbar-main {
    width: 100%;
    height: auto;
    z-index: 111;
    padding: 20px 0;
    position: fixed;
    top: 0;
    transition: all .5s
}

.navbar-main.navbar-shrink {
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    background: hsl(var(--black));
    padding: 8px 0;
}

@media screen and (max-width:991px) {
    .navbar-main .logo-img {
        height: 40px
    }
}

.logo-img {
    width: 100%;
    max-width: 250px;
}

.navbar-main .right-nav {
    display: flex;
    align-items: center;
    gap: 20px;
    order: 1
}

.navbar-main .right-nav .btn {
    padding: 13px 24px
}

@media screen and (max-width:424px) {
    .navbar-main .right-nav .btn {
        display: none !important
    }
}

@media screen and (max-width:767px) {
    .navbar-main .right-nav .btn {
        padding: 13px 17px
    }
}

@media screen and (max-width:1199px) {
    .navbar-main .right-nav {
        gap: 10px
    }
}

@media screen and (max-width:991px) {
    .navbar-main .right-nav {
        gap: 5px
    }
}

.navbar-toggler {
    opacity: 1;
    padding: 4px 8px !important;
    border-radius: 5px;
    outline: none;
    box-shadow: none !important;
    border: 1px solid hsl(var(--base));
    background-color: hsl(var(--base));
    color: hsl(var(--white));
    transition: all .4s
}

.navbar-toggler:hover {
    background-color: hsl(var(--base));
    color: hsl(var(--black))
}

@media screen and (max-width:767px) {
    .navbar-toggler {
        padding: 1px 8px
    }
}

.navbar-toggler svg {
    width: 35px;
    height: 35px
}

.navbar-nav {
    gap: 1.5rem;
    position: relative
}

@media screen and (max-width:1199px) {
    .navbar-nav {
        gap: .9375rem
    }
}

@media screen and (max-width:991px) {
    .navbar-nav {
        gap: 0
    }

    .navbar-nav .nav-item {
        display: block;
        width: 100%
    }
}

.navbar-nav .nav-item .nav-link {
    color: hsl(var(--white)/.85);
    font-size: 1rem;
    font-weight: 500;
    padding: 1.5625rem .3125rem;
    text-transform: capitalize;
    display: flex;
    align-items: center
}

@media screen and (max-width:1199px) {
    .navbar-nav .nav-item .nav-link {
        font-size: .9375rem;
        padding-left: .3125rem;
        padding-right: .3125rem
    }
}

@media screen and (max-width:991px) {
    .navbar-nav .nav-item .nav-link {
        padding: .625rem;
        color: hsl(var(--white));
        font-size: .9375rem
    }
}

.navbar-nav .nav-item .nav-link.active,
.navbar-nav .nav-item .nav-link:hover {
    color: hsl(var(--base));
    position: relative
}

.navbar-nav .nav-item .nav-link.active span:before,
.navbar-nav .nav-item .nav-link:hover span:before {
    width: 100%;
    transition: all .5s ease-in-out
}

.navbar-nav .nav-item .dropdown-toggle:after {
    content: "\f107";
    font-weight: 900;
    font-family: Font Awesome\ 6 free;
    border: 0
}

@media screen and (max-width:991px) {
    .navbar-nav .nav-item .dropdown-toggle:after {
        margin-left: auto
    }
}

@media (max-width:991.98px) {
    .navbar-nav .nav-item.dropdown .nav-link {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .navbar-nav .nav-item.dropdown .nav-link:after {
        content: "\f107";
        font-weight: 900;
        font-family: Font Awesome\ 6 free;
        margin-left: auto
    }
}

.navbar-nav .nav-item .dropdown-menu {
    transition: .5s;
    margin-top: 0;
    padding: 5px 10px;
    min-width: 220px;
    border: 1px solid hsl(var(--border-color));
    border-radius: 5px;
    gap: 5px
}

@media screen and (max-width:991px) {
    .navbar-nav .nav-item .dropdown-menu {
        background-color: hsl(var(--black-two));
        border: 0
    }
}

@media (min-width:991.98px) {
    .navbar-nav .nav-item .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden
    }

    .navbar-nav .nav-item .dropdown-menu.fade-down {
        top: 80%;
        transform: rotateX(-75deg);
        transform-origin: 0 0
    }

    .navbar-nav .nav-item .dropdown-menu.fade-up {
        top: 100%
    }
}

.navbar-nav .nav-item .dropdown-menu a {
    margin: 5px 0;
    background: none;
    transition: .5s;
    position: relative;
    font-weight: 500;
    font-size: .875rem;
    border: 0;
    color: hsl(var(--gray3));
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    border-radius: 5px
}

@media screen and (max-width:991px) {
    .navbar-nav .nav-item .dropdown-menu a {
        color: hsl(var(--white))
    }
}

.navbar-nav .nav-item .dropdown-menu a:after {
    content: "\f061";
    font-weight: 900;
    font-family: Font Awesome\ 6 free;
    transform: translateX(-20px);
    transition: all .3s;
    opacity: 0
}

.navbar-nav .nav-item .dropdown-menu a.active,
.navbar-nav .nav-item .dropdown-menu a:hover {
    color: hsl(var(--black));
    background-color: hsl(var(--base))
}

.navbar-nav .nav-item .dropdown-menu a.active:before,
.navbar-nav .nav-item .dropdown-menu a:hover:before {
    opacity: 1;
    width: 10px
}

.navbar-nav .nav-item .dropdown-menu a.active:after,
.navbar-nav .nav-item .dropdown-menu a:hover:after {
    transform: translateX(0);
    opacity: 1
}

.navbar-nav .nav-item:hover .nav-link {
    color: hsl(var(--base))
}

.navbar-nav .nav-item:hover .dropdown-menu {
    transition: .5s;
    opacity: 1
}

@media (min-width:991.98px) {
    .navbar-nav .nav-item:hover .dropdown-menu {
        visibility: visible;
        top: 100%;
        transform: rotateX(0deg)
    }
}

#offcanvasNavbar {
    background-color: hsl(var(--black))
}

@media screen and (max-width:991px) {
    #offcanvasNavbar {
        min-height: 100vh
    }
}

@media screen and (max-width:767px) {
    #offcanvasNavbar .btn {
        padding: 15px 20px
    }
}

.btn-close {
    outline: none;
    box-shadow: none !important;
    filter: invert(100%) sepia(0) saturate(7498%) hue-rotate(42deg) brightness(102%) contrast(87%);
    opacity: 1
}

.footer-area {
    background-color: hsl(var(--black));
    color: hsl(var(--white));
    margin-top: auto
}

.footer-area.bg-img {
    background-size: contain;
    background-position: top
}

@media screen and (max-width:1199px) {
    .footer-logo-con {
        text-align: center
    }

    .footer-logo-con .social-list {
        justify-content: center
    }
}

.footer-item__logo {
    margin-bottom: 20px
}

.footer-item__logo a img {
    width: 100%;
    height: 100%;
    max-width: 280px;
    margin-bottom: 8px;
}

.footer-item__title {
    color: hsl(var(--white));
    padding-bottom: 10px;
    margin-bottom: 25px;
    position: relative;
    font-size: 1.4375rem
}

@media screen and (max-width:767px) {
    .footer-item__title {
        margin-bottom: 18px
    }
}

.footer-item .social-list {
    margin-top: 30px
}

@media screen and (max-width:991px) {
    .footer-item .social-list {
        margin-top: 20px
    }
}

@media screen and (max-width:575px) {
    .footer-item .social-list {
        margin-top: 15px
    }
}


.footer-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.footer-menu__item {
    display: block;
    padding-bottom: 16px
}

.footer-menu__item:last-child {
    padding-bottom: 0
}

.footer-menu__link {
    color: hsl(var(--body-color))
}

.footer-menu__link:hover {
    color: hsl(var(--base));
    text-decoration: underline
}

.footer-contact-menu__item {
    display: flex;
    padding-bottom: 12px
}

.footer-contact-menu__item:last-child {
    padding-bottom: 0
}

.footer-contact-menu__item-icon {
    width: 15px;
    color: hsl(var(--base));
    font-size: 1.25rem
}

.footer-contact-menu__item-content {
    width: calc(100% - 15px);
    padding-left: 15px
}

.footer-contact-menu__item-content p:hover {
    color: hsl(var(--base))
}

.bottom-footer {
    border-top: 1px solid hsl(var(--black-two))
}

.bottom-footer-text a {
    color: hsl(var(--base))
}

.footer-shape img {
    position: absolute
}

.footer-shape img:first-child {
    left: -15%
}

.footer-shape img:last-child {
    right: -15%;
    bottom: -10%
}

.progress-wrap {
    position: fixed;
    right: 50px;
    bottom: 50px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 100px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all .2s linear;
    background: none
}

@media screen and (max-width:991px) {
    .progress-wrap {
        right: 10px;
        bottom: 20px;
        height: 35px;
        width: 35px
    }
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.progress-wrap:hover:after {
    opacity: 0
}

.progress-wrap:hover:before {
    opacity: 1
}

.progress-wrap:after,
.progress-wrap:before {
    position: absolute;
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    content: "\f062";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: hsl(var(--base));
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: block;
    z-index: 2;
    transition: all .2s linear;
    display: flex;
    align-items: center;
    justify-content: center
}

.progress-wrap svg path {
    fill: none
}

.progress-wrap svg.progress-circle path {
    stroke: hsl(var(--base));
    stroke-width: 5;
    box-sizing: border-box;
    transition: all .2s linear
}

::selection {
    color: hsl(var(--white));
    background: hsl(var(--base-d-100))
}

.social-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.social-list__item {
    margin-right: 10px
}

.social-list__item:last-child {
    margin-right: 0
}

.social-list__link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: .3s;
    cursor: pointer;
    border: 1px solid hsl(var(--base));
    color: hsl(var(--white))
}

.social-list__link.active,
.social-list__link:focus,
.social-list__link:hover {
    background-color: hsl(var(--base-two));
    color: hsl(var(--black)) !important;
    border-color: hsl(var(--base-two)) !important
}

@media screen and (max-width:767px) {
    .social-list__link {
        width: 35px;
        height: 35px;
        font-size: .875rem
    }
}

.social-icon {
    gap: 10px;
    margin-top: 17px
}

.social-icon,
.social-icon a {
    display: flex;
    align-items: center;
    justify-content: center
}

.social-icon a {
    border: 1px solid hsl(var(--gray)/.25);
    color: hsl(var(--white));
    border-radius: 5px;
    width: 32px;
    height: 32px;
    font-size: .875rem;
    transition: all .3s
}

.social-icon a:hover {
    background-color: hsl(var(--base));
    color: hsl(var(--black))
}

.breadcrumb {
    position: relative;
    z-index: 1;
    padding: 200px 0 120px;
    margin-bottom: 0;
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

@media screen and (max-width:991px) {
    .breadcrumb {
        padding: 115px 0 60px
    }
}

@media screen and (max-width:767px) {
    .breadcrumb {
        padding: 105px 0 40px
    }
}

.breadcrumb:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background-color: hsl(var(--black)/.8);
    width: 100%;
    height: 100%;
    z-index: -1
}

.breadcrumb__wrapper {
    text-align: center
}

.breadcrumb__title {
    margin-bottom: 10px;
    color: hsl(var(--white));
    font-size: 3.125rem
}

@media screen and (max-width:991px) {
    .breadcrumb__title {
        font-size: 2.5rem
    }
}

@media screen and (max-width:767px) {
    .breadcrumb__title {
        font-size: 2.1875rem
    }
}

@media screen and (max-width:424px) {
    .breadcrumb__title {
        font-size: 1.875rem
    }
}

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-family: Jost
}

.breadcrumb__item {
    color: hsl(var(--white));
    padding: 0 5px;
    font-weight: 400;
    font-size: 1.25rem
}

@media screen and (max-width:991px) {
    .breadcrumb__item {
        font-size: 1.125rem
    }
}

@media screen and (max-width:767px) {
    .breadcrumb__item {
        font-size: 1rem
    }
}

.breadcrumb__item-text {
    color: hsl(var(--base))
}

.breadcrumb__item i {
    transform: translateY(3px)
}

.breadcrumb__link {
    color: hsl(var(--white));
    font-weight: 400
}

.breadcrumb__link:hover {
    color: hsl(var(--base))
}

.breadcrumb__date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 5px 0 0
}

.breadcrumb__date li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500
}

.breadcrumb__date li:before {
    content: "\f111";
    font-family: Font Awesome\ 6 free;
    font-weight: 900;
    font-size: 7px;
    color: hsl(var(--base))
}

.banner-one-section {
    padding: 200px 0 80px;
    display: grid;
    align-items: center;
    justify-content: center
}

.banner-one-section .shape-icon img {
    position: absolute
}

.banner-one-section .shape-icon img:first-child {
    left: -100px;
    top: -70px
}

.banner-one-section .shape-icon img:nth-child(2) {
    left: 48%;
    bottom: -30%;
    color: hsl(var(--base-two))
}

.banner-one-section .shape-icon img:nth-child(3) {
    right: 0;
    top: -10%;
    color: hsl(var(--base))
}

.banner-one-section .banner_content h1 {
    margin-top: 10px;
    font-size: 50px
}

.banner-one-section .banner_content h1 i {
    color: hsl(var(--base-two));
    position: relative;
    bottom: -6px;
    font-size: 50px
}

@media screen and (max-width:991px) {
    .banner-one-section .banner_content h1 i {
        font-size: 35px
    }
}

.banner-one-section .banner_content p {
    padding-bottom: 40px
}

.banner-one-section .banner-img {
    position: relative;
    z-index: 1
}

.banner-one-section .banner-img:before {
    width: 616px;
    height: 616px;
    background-image: var(--shape-url);
    opacity: .1;
    border-radius: 50%
}

.banner-one-section .banner-img:after,
.banner-one-section .banner-img:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1
}

.banner-one-section .banner-img:after {
    width: 416px;
    height: 416px;
    flex-shrink: 0;
    border-radius: 416px;
    opacity: .5;
    background: hsl(var(--base-two));
    mix-blend-mode: screen;
    filter: blur(130px)
}

.banner-two-section {
    min-height: 100vh;
    display: grid;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1
}

@media screen and (max-width:1199px) {
    .banner-two-section {
        padding: 100px 0 40px
    }
}

.banner-two-section:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 330px;
    background-image: var(--shape-url1);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    opacity: .25
}

@media screen and (max-width:1199px) {
    .banner-two-section:after {
        height: 200px
    }
}

@media screen and (max-width:991px) {
    .banner-two-section:after {
        height: 200px
    }
}

.banner-two-section .sub-title {
    border: 1px solid hsl(var(--base));
    padding: 15px 20px;
    font-size: 1.25rem;
    font-weight: 500;
    border-radius: 10px
}

@media screen and (max-width:1199px) {
    .banner-two-section .sub-title {
        font-size: 1.125rem;
        padding: 10px 15px
    }
}

@media screen and (max-width:767px) {
    .banner-two-section .sub-title {
        font-size: 1rem
    }
}

@media screen and (max-width:424px) {
    .banner-two-section .sub-title {
        font-size: .875rem
    }
}

.banner-two-section h1 {
    margin-top: 20px
}

.banner-two-section h1 strong {
    font-weight: 700;
    border-bottom: 1px solid;
    color: hsl(var(--base-two))
}

.banner-two-section p {
    max-width: 684px;
    margin: 30px auto 40px;
    font-size: 1.125rem;
    font-weight: 400
}

@media screen and (max-width:424px) {
    .banner-two-section p {
        font-size: 1rem
    }
}

.banner-two-section .banner-content {
    position: relative;
    z-index: 1
}

.banner-two-section .banner-content:before {
    width: 800px;
    height: 800px;
    background-image: var(--shape-url3);
    opacity: .1;
    border-radius: 50%
}

.banner-two-section .banner-content:after,
.banner-two-section .banner-content:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1
}

.banner-two-section .banner-content:after {
    width: 594px;
    height: 594px;
    flex-shrink: 0;
    border-radius: 416px;
    opacity: .25;
    background: hsl(var(--base-two));
    mix-blend-mode: screen;
    filter: blur(222px)
}

.banner-two-section .shape-icon img {
    position: absolute
}

@media screen and (max-width:1199px) {
    .banner-two-section .shape-icon img {
        transform: scale(.7)
    }
}

.banner-two-section .shape-icon img:first-child {
    left: 0;
    top: -15%
}

@media screen and (max-width:1199px) {
    .banner-two-section .shape-icon img:first-child {
        top: -10%
    }
}

.banner-two-section .shape-icon img:nth-child(2) {
    right: 0;
    top: 0
}

.banner-two-section .shape-icon img:nth-child(3) {
    left: 15%;
    bottom: -5%
}

.banner-two-section .shape-icon img:nth-child(4) {
    right: 15%;
    bottom: -5%
}

.info-box {
    border-radius: 8px;
    border: 2px solid hsl(var(--body-color)/.3);
    background: hsl(var(--black)/.3);
    text-align: center;
    padding: 20px 30px;
    min-width: 244px
}

.info-box .fs-40 {
    line-height: .9
}

.info-box p {
    padding-top: 10px
}

@media screen and (max-width:991px) {
    .about-shape {
        display: none
    }
}

.about-shape img {
    position: absolute
}

.about-shape img:first-child {
    right: -10%
}

.about-shape img:last-child {
    bottom: 25%;
    left: -15%
}

@media screen and (max-width:991px) {
    .services-section .slider-btn {
        justify-content: center;
        margin-top: 24px
    }
}

.services-box {
    height: 100%;
}

.services-box,
.courses-box {
    background-color: hsl(var(--black-two));
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    z-index: 1;

}

.courses-box {
    border: 1px solid hsl(var(--black-two));
    transition: 0.35s;
}

.courses-box:hover {
    border-color: #14ff99;
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(20, 255, 153, .12);
}

.services-box:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    background-color: hsl(var(--base));
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin: 0 auto;
    z-index: -1;
    transition: all .3s
}

.services-box:hover:before {
    width: 100%;
    height: 100%;
    border-radius: 0;
    top: 0;
    border-radius: 10px
}

.services-box:hover .icon {
    background-color: hsl(var(--black));
    color: hsl(var(--base))
}

.services-box .icon,
.services-box:hover a,
.services-box:hover p {
    color: hsl(var(--black))
}

.services-box .icon {
    background-color: hsl(var(--base));
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto;
    transition: all .3s
}

.services-box .icon i {
    position: relative
}

.services-box h3 {
    margin-bottom: 0;
    padding: 15px 0;
    font-size: 26px;
}

.courses-box h3 {
    font-size: 24px;
    margin-bottom: 0;
    padding: 15px 0
}

.services-box .learn-more,
.courses-box .learn-more {
    margin-top: 20px;
    border-bottom: 1px solid hsl(var(--base));
    color: hsl(var(--white));
    padding-bottom: 4px
}

.services-shape img {
    position: absolute
}

.services-shape img:first-child {
    left: -10%;
    top: 20%
}

.services-shape img:last-child {
    right: -7%
}

.services-two-shape img {
    position: absolute
}

.services-two-shape img:first-child {
    right: -14%;
    bottom: 0
}

.services-two-shape img:last-child {
    left: -9%
}

.services-details img {
    border-radius: 10px
}

.services-details .custom--accordion .accordion-button {
    background-color: hsl(var(--gray)/.12)
}

.services-details .custom--accordion .accordion-button:not(.collapsed) {
    background-color: hsl(var(--base));
    color: hsl(var(--black))
}

.services-details .custom--accordion .accordion-body {
    background-color: hsl(var(--gray)/.12)
}

.people-shape img {
    position: absolute
}

.people-shape img:first-child {
    left: -5%;
    top: 20px
}

.people-shape img:nth-child(2) {
    right: -10%;
    bottom: 5%
}

.trade-list {
    columns: 200px 2
}

.trade-list li {
    color: hsl(var(--white));
    font-weight: 500;
    padding: 5px 0
}

.trade-list li:before {
    content: "\f00c";
    font-family: Font Awesome\ 6 free;
    font-weight: 900;
    margin-right: 10px;
    color: hsl(var(--base))
}

.trade-shape img {
    position: absolute
}

.trade-shape img:first-child {
    left: -10%
}

.trade-shape img:last-child {
    right: -7%;
    bottom: 0
}

.trabe-info {
    border-radius: 10px;
    padding: 30px 30px 50px
}

.table-nav {
    border-radius: 0;
    border-bottom: 1.5px solid hsl(var(--white)/.15)
}

.table-nav .nav {
    gap: 35px
}

@media screen and (max-width:1399px) {
    .table-nav .nav {
        gap: 24px
    }
}

@media screen and (max-width:991px) {
    .table-nav .nav {
        gap: 20px;
        row-gap: 0
    }
}

.table-nav .nav-link {
    border-radius: 0;
    background: none;
    text-transform: capitalize;
    font-size: 1.25rem;
    font-weight: 600;
    font-family: var(--heading-font);
    color: hsl(var(--white));
    padding: 20px 0 30px
}

@media screen and (max-width:1199px) {
    .table-nav .nav-link {
        font-size: 1.125rem
    }
}

@media screen and (max-width:991px) {
    .table-nav .nav-link {
        padding: 10px 0;
        font-size: 1rem
    }
}

.table-nav .nav-link.active {
    background: none;
    border-bottom: 2px solid hsl(var(--base));
    color: hsl(var(--base))
}

.table-nav form {
    position: relative
}

.table-nav form input {
    min-width: 100%;
    max-width: 384px;
    height: 53px;
    border-radius: 8px;
    border: 1.5px solid hsl(var(--white)/.2);
    color: hsl(var(--white));
    background: transparent;
    padding-left: 50px;
    padding-right: 10px
}

.table-nav form input::placeholder {
    color: hsl(var(--white)/.7)
}

.table-nav form button {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--white))
}

.trade-content .trade-chart-head {
    cursor: pointer
}

.trade-content .trade-chart-body {
    padding: 0;
    overflow: hidden;
    border: 0
}

.trade-content .trade-chart-body iframe {
    border-top: 0;
    border: 1px solid hsl(var(--white));
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    width: 100%
}

.trade-content .tradingChart {
    height: 280px
}

.trade-content ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 50px;
    padding: 15px;
    border-radius: 8px;
    border: 1.5px solid hsl(var(--white)/.15);
    width: 100%
}

.trade-content ul.bg--base {
    border-radius: 8px
}

.trade-content ul.bg--base li {
    color: hsl(var(--black));
    font-weight: 500
}

.trade-content ul li {
    color: hsl(var(--white));
    font-size: .875rem
}

.trade-content ul li:last-child {
    text-align: center
}

.trade-content ul li button {
    color: hsl(var(--white))
}

.trade-smartet-shape img {
    position: absolute
}

.trade-smartet-shape img:first-child {
    right: -7%
}

.trade-smartet-shape img:last-child {
    top: 15%;
    left: -7%
}

.people-trust-section .nav-link {
    border: 1px solid hsl(var(--base));
    transition: all .4s;
    font-weight: 500;
    color: hsl(var(--white));
    display: flex;
    align-items: center;
    height: 50px
}

.people-trust-section .nav-link i {
    color: hsl(var(--base));
    font-size: 25px;
    margin-right: 10px
}

.people-trust-section .nav-link i:before {
    line-height: auto
}

.people-trust-section .nav-link.active,
.people-trust-section .nav-link:hover {
    border-color: hsl(var(--base-two));
    background-color: hsl(var(--base-two));
    color: hsl(var(--black))
}

.people-trust-section .nav-link.active i,
.people-trust-section .nav-link:hover i {
    color: hsl(var(--black))
}

.people-list {
    columns: 200px 2
}

.people-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px
}

.people-list li:before {
    content: "\f00c";
    font-family: Font Awesome\ 6 free;
    font-weight: 900;
    color: hsl(var(--base))
}

.people-video img {
    border-radius: 15px
}

.people-box {
    border-radius: 8px;
    border: 2px solid hsl(var(--gray)/.3);
    background-color: hsl(var(--black)/.3);
    text-align: center;
    padding: 30px
}

@media screen and (max-width:575px) {
    .people-box {
        padding: 20px
    }
}

.people-box h2 {
    line-height: .8
}

@media screen and (max-width:575px) {
    .people-box h2 {
        font-size: 1.5625rem
    }

    .people-box p {
        font-size: .875rem
    }
}

.trade-table-content {
    min-width: 700px;
    margin-bottom: 12px
}

.video-container {
    position: relative;
    cursor: none;
    max-width: 100%
}

.video-container .play-button {
    position: absolute;
    border: 3px solid hsl(var(--white));
    border-radius: 100px;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    cursor: none;
    display: flex;
    align-items: center;
    justify-content: center
}

@media screen and (max-width:767px) {
    .video-container .play-button {
        width: 65px;
        height: 65px
    }
}

.video-container .video {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.video-container .play-icon {
    font-size: 40px;
    color: hsl(var(--white))
}

@media screen and (max-width:767px) {
    .video-container .play-icon {
        font-size: 26px
    }
}

.at-tab {
    display: none
}

.at-title {
    cursor: pointer;
    position: relative;
    transition: background-color .3s ease;
    border-radius: 10px
}

.at-title:after {
    content: "\f107";
    font-family: Font Awesome\ 6 free;
    font-weight: 900;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 25px;
    transition: all .3s ease;
    font-size: 15px
}

.at-title.active,
.at-title:hover {
    background-color: hsl(var(--base))
}

.at-title.active:after,
.at-title:hover:after {
    content: "\f106";
    color: hsl(var(--black))
}

.at-title.active li,
.at-title:hover li {
    color: hsl(var(--black))
}

.at-title.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.number-section {
    background-color: hsl(var(--base));
    position: relative;
    z-index: 1
}

.number-section:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--the-img) no-repeat center;
    background-size: cover
}

.number-section .number-count {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    justify-content: space-between;
    text-align: center
}

@media screen and (max-width:767px) {
    .number-section .number-count {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 24px
    }
}

.number-section .number-count .fs-60 {
    line-height: .8;
    display: flex;
    align-items: center;
    color: hsl(var(--black));
    justify-content: center
}

@media screen and (max-width:991px) {
    .number-section .number-count .fs-60 {
        font-size: 40px
    }
}

@media screen and (max-width:575px) {
    .number-section .number-count .fs-60 {
        font-size: 35px
    }
}

.number-section .number-count p {
    color: hsl(var(--black)/.7);
    padding-top: 10px
}

.number-section .number-box {
    border-right: 2px solid hsl(var(--black))
}

.number-section .number-box:last-child {
    border: 0
}

@media screen and (max-width:767px) {
    .number-section .number-box:nth-child(2) {
        border: 0
    }
}

.pricing-section .swiper-pagination {
    position: relative;
    margin-top: 40px
}

.pricing-section .swiper-pagination-bullet {
    background-color: hsl(var(--white));
    width: 10px;
    height: 10px;
    margin: 0 7px !important
}

.pricing-section .swiper-pagination-bullet-active {
    background-color: hsl(var(--base-two))
}

.pricing-shape img {
    position: absolute
}

.pricing-shape img:first-child {
    right: -14%;
    top: 10%
}

.pricing-shape img:nth-child(2) {
    left: -14%;
    bottom: 0
}

.pricing-content {
    background-color: hsl(var(--gray)/.12);
    padding: 30px;
    border-radius: 15px;
    display: grid;
    grid-gap: 24px;
    gap: 24px;
    transition: all .3s;
    border: 1px solid hsl(0 0% 26%/.12);
}

.pricing-content:hover {
    border: 1px solid #14ff99;
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(20, 255, 153, .12);
}

@media screen and (max-width:1199px) {
    .pricing-content {
        padding: 24px
    }
}

.pricing-content h2,
.pricing-content h6 {
    color: hsl(var(--white));
    font-size: 20px;
}

.pricing-content h2 {
    font-size: 3rem;
    font-weight: 600;
    color: #15df88;
}

@media screen and (max-width:1199px) {
    .pricing-content h2 {
        font-size: 2.8125rem
    }
}

.pricing-content .pricing-body {
    background-color: hsl(var(--gray)/.2);
    border-radius: 15px;
    padding: 24px
}

@media screen and (max-width:1199px) {
    .pricing-content .pricing-body {
        padding: 20px
    }
}

.pricing-content .pricing-body ul {
    display: grid;
    grid-gap: 10px;
    gap: 10px
}

.pricing-content .pricing-body li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem
}

@media screen and (max-width:1199px) {
    .pricing-content .pricing-body li {
        font-size: .875rem
    }
}

.pricing-content .pricing-body li:before {
    content: "\f00c";
    font-family: Font Awesome\ 6 free;
    font-weight: 900;
    color: hsl(var(--base))
}

.pricing-content .btn {
    width: 100%;
    border-radius: 15px;
    color: hsl(var(--black));
    background-color: hsl(var(--base)) !important;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center
}

.pricing-content .btn:hover {
    background-color: hsl(var(--base)) !important;
    color: hsl(var(--black))
}

.testimonial-section .swiper-pagination {
    position: relative;
    margin-top: 40px
}

.testimonial-section .swiper-pagination-bullet {
    background-color: hsl(var(--white));
    width: 10px;
    height: 10px;
    margin: 0 7px !important
}

.testimonial-section .swiper-pagination-bullet-active {
    background-color: hsl(var(--base-two))
}

.testimonial-shape img {
    position: absolute
}

.testimonial-shape img:first-child {
    right: -15%;
    top: -10px
}

.testimonial-shape img:last-child {
    bottom: -15%;
    left: -15%
}

.testimonial-item {
    background-color: hsl(var(--gray)/.12);
    border-radius: 15px;
    position: relative;
    padding: 30px
}

.testimonial-item .start-client {
    position: absolute;
    background-color: hsl(var(--black-two));
    right: 0;
    top: 0;
    border-bottom-left-radius: 15px;
    padding: 0 20px 15px
}

.testimonial-item .start-client:after,
.testimonial-item .start-client:before {
    content: "";
    position: absolute;
    --border-shape: 15px;
    --border2-shape: -15px;
    width: var(--border-shape);
    height: var(--border-shape);
    background-size: cover;
    background-color: hsl(var(--black-two));
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAABwCAMAAAANKy+zAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAANJQTFRFAAAAGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbn5jZLgAAAEZ0Uk5TAP8It0fK8wJvzo/6BK4XVye/d9IcImTH7wzlMfaf6l01stx/8fggQD38isSZfmIeTGfgEZVEbFCHwaPnD+3Ygiye1xXjeeHouDIAAAIPSURBVHicxdiHVhpBFMbxLwtmKSsdEYEAsawx2I0aS0ws7/9KGRL1HKWty8z8vxf4nSl7753VQW3vz7B1/cl79JJm3N+/WvkMyM9p/Dg/q24Q8r8EneNRvkjI/1e/trrFyCZRvFdn5HF2zjNdRh4f+9HZCSOblGpfIdlkt2f3Y08uSw/7XyDZnPhBHpJNsiuUbM1OIRv7OyVLcYuSzbqXvWupZeliOXsJWcHdNiRLlZ+ULK2lLmvLyioNKdksO10nsSCrmaqw2JAVPqUYF63IUufjg4MlWe0rSpb6H7xo9mRVflGyboaULN1hso6SP4gsyxokruO2ZTUfKVmNhI9A+7JukjVtB7LaGUpWkIR2Iiei3chJaEey2gufQK5knS7q2M5kNRf8VXMn6/f8hu1QVjx3OnMp6xiTVcDkcJWSFcxuXI5l7axTsi4weeYtcy9HMyq4e3nWUXuQVcZkTf2qvciNW0qeut9+5Gn77Uk+nOzVnmTlMDmcqCe+ZA2+UfJE/fYnl7YoWTVMDq4p+d0o6lMO65SsPiZHG5T8pob6lYN1StYmJp92KVk9TB5gslqYXMbk6JaSXycE/3IHk5XH5Bwml4qUrAwm5zC5gsm6x+QCJmcxOdimZFUxeROTY0weHzQjjw8aki8xuYzJFUwOu5Rsxm5KHmFyDpOzmHyIyVGRknWCyVVM7mHyJSbX/gICsCIViQTHogAAAABJRU5ErkJggg==);
    mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAABwCAMAAAANKy+zAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAANJQTFRFAAAAGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbGxsbn5jZLgAAAEZ0Uk5TAP8It0fK8wJvzo/6BK4XVye/d9IcImTH7wzlMfaf6l01stx/8fggQD38isSZfmIeTGfgEZVEbFCHwaPnD+3Ygiye1xXjeeHouDIAAAIPSURBVHicxdiHVhpBFMbxLwtmKSsdEYEAsawx2I0aS0ws7/9KGRL1HKWty8z8vxf4nSl7753VQW3vz7B1/cl79JJm3N+/WvkMyM9p/Dg/q24Q8r8EneNRvkjI/1e/trrFyCZRvFdn5HF2zjNdRh4f+9HZCSOblGpfIdlkt2f3Y08uSw/7XyDZnPhBHpJNsiuUbM1OIRv7OyVLcYuSzbqXvWupZeliOXsJWcHdNiRLlZ+ULK2lLmvLyioNKdksO10nsSCrmaqw2JAVPqUYF63IUufjg4MlWe0rSpb6H7xo9mRVflGyboaULN1hso6SP4gsyxokruO2ZTUfKVmNhI9A+7JukjVtB7LaGUpWkIR2Iiei3chJaEey2gufQK5knS7q2M5kNRf8VXMn6/f8hu1QVjx3OnMp6xiTVcDkcJWSFcxuXI5l7axTsi4weeYtcy9HMyq4e3nWUXuQVcZkTf2qvciNW0qeut9+5Gn77Uk+nOzVnmTlMDmcqCe+ZA2+UfJE/fYnl7YoWTVMDq4p+d0o6lMO65SsPiZHG5T8pob6lYN1StYmJp92KVk9TB5gslqYXMbk6JaSXycE/3IHk5XH5Bwml4qUrAwm5zC5gsm6x+QCJmcxOdimZFUxeROTY0weHzQjjw8aki8xuYzJFUwOu5Rsxm5KHmFyDpOzmHyIyVGRknWCyVVM7mHyJSbX/gICsCIViQTHogAAAABJRU5ErkJggg==);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.testimonial-item .start-client:before {
    left: var(--border2-shape)
}

.testimonial-item .start-client:after {
    bottom: var(--border2-shape);
    right: 0
}

.testimonial-item .client-text {
    padding: 26px 0
}

.faq-shape img {
    position: absolute
}

.faq-shape img:first-child {
    left: -10%
}

.faq-shape img:last-child {
    bottom: 50px;
    right: -13%
}

.blog-shape img {
    position: absolute
}

.blog-shape img:first-child {
    left: -13%;
    top: 14%
}

.blog-shape img:last-child {
    right: -15%;
    bottom: 5%
}

.blog-section .col-lg-6 .blog-item h4 {
    font-size: 1.875rem
}

@media screen and (max-width:1199px) {
    .blog-section .col-lg-6 .blog-item h4 {
        font-size: 1.5625rem
    }
}

@media screen and (max-width:991px) {
    .blog-section .col-lg-6 .blog-item h4 {
        font-size: 1.25rem
    }
}

.blog-item {
    background-color: hsl(var(--gray)/.12);
    padding: 30px;
    border-radius: 15px
}

@media screen and (max-width:575px) {
    .blog-item {
        padding: 20px
    }
}

.blog-item img {
    border-radius: 15px
}

.blog-item h4 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.blog-item .blog-list {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 18px 0 15px
}

@media screen and (max-width:767px) {
    .blog-item .blog-list {
        gap: 20px
    }
}

.blog-item .blog-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500
}

@media screen and (max-width:575px) {
    .blog-item .blog-list li {
        font-size: 14px
    }
}

.blog-item .blog-list li:before {
    content: "\f111";
    font-family: Font Awesome\ 6 free;
    font-weight: 900;
    font-size: 7px;
    color: hsl(var(--base))
}

.blog-item .btn {
    margin-top: 10px;
    padding: 12px 20px;
    font-weight: 600
}

.blog-details-content {
    display: grid;
    grid-gap: 24px;
    gap: 24px;
    border: 1px solid hsl(var(--gray)/.25);
    border-radius: 15px;
    padding: 30px
}

.blog-details-content img {
    border-radius: 13px
}

.blog-details-content ul {
    display: grid;
    grid-gap: 10px;
    gap: 10px
}

.blog-details-content ul li {
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--white));
    display: flex;
    align-items: center;
    gap: 15px;
    transition: .4s
}

.blog-details-content ul li:before {
    content: "\f111";
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    font-size: 8px;
    color: hsl(var(--base-two))
}

.blog-que {
    background: hsl(var(--gray)/.12);
    padding: 24px;
    border-radius: 13px;
    position: relative;
    z-index: 1
}

.blog-que svg {
    position: absolute;
    z-index: -1;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .3
}

.blog-que p {
    font-style: italic
}

.blog-que .user {
    font-size: 1.125rem;
    font-weight: 700;
    color: hsl(var(--white));
    position: relative;
    padding-left: 50px;
    margin-top: 15px
}

.blog-que .user:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 8px;
    width: 40px;
    height: 2px;
    background: hsl(var(--base))
}

.sidebar-item {
    background: hsl(var(--gray)/.12);
    padding: 24px 24px 30px;
    border-radius: 10px
}

@media screen and (max-width:575px) {
    .sidebar-item {
        padding: 20px
    }
}

.sidebar-item h5 {
    padding-bottom: 20px;
    margin-bottom: 0
}

.sidebar-item form {
    position: relative
}

.sidebar-item form input {
    width: 100%;
    height: 62px;
    border-radius: 8px;
    border: 1px solid hsl(var(--white)/.12);
    background: none;
    outline: none;
    box-sizing: none;
    color: hsl(var(--white));
    font-size: 1rem;
    font-weight: 400;
    padding: 0 20px
}

.sidebar-item form input::placeholder {
    color: hsl(var(--white)/.5)
}

.sidebar-item form button {
    background: none;
    outline: none;
    box-shadow: none;
    position: absolute;
    right: 0;
    top: 0;
    color: hsl(var(--gray));
    padding: 18px;
    transition: all .3s
}

.sidebar-item form button:hover {
    color: hsl(var(--white))
}

.sidebar-item .category-file {
    display: grid;
    grid-gap: 15px;
    gap: 15px
}

.sidebar-item .category-file a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: hsl(var(--white)/.5);
    border: 1px solid hsl(var(--white)/.12);
    padding: 15px;
    border-radius: 8px;
    transition: all .3s
}

.sidebar-item .category-file a:hover {
    background-color: hsl(var(--base));
    color: hsl(var(--black))
}

.sidebar-item .category-file a:hover .category-title i {
    color: hsl(var(--black))
}

.sidebar-item .category-file .category-title i {
    color: hsl(var(--base));
    margin-right: 8px
}

.sidebar-item .recent-post {
    display: grid;
    grid-gap: 15px;
    gap: 15px
}

.sidebar-item .recent-post__item {
    display: grid;
    grid-template-columns: 80px 1fr;
    grid-gap: 15px;
    gap: 15px;
    background-color: hsl(var(--black-two));
    padding: 10px;
    border-radius: 10px;
    transition: all .4s;
    align-items: center
}

.sidebar-item .recent-post__item:hover {
    transform: translateY(-5px)
}

.sidebar-item .recent-post__item .img {
    border-radius: 10px;
    overflow: hidden
}

.sidebar-item .recent-post__item .img img {
    width: 100%
}

.sidebar-item .recent-post__item .date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    color: hsl(var(--white)/.7)
}

@media screen and (max-width:424px) {
    .sidebar-item .recent-post__item .date {
        font-size: .625rem
    }
}

.sidebar-item .recent-post__item .date:before {
    content: "\f111";
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    font-size: 6px;
    color: hsl(var(--base))
}

.sidebar-item .recent-post__item h6 {
    font-size: 1rem;
    line-height: 1.4;
    margin-top: 10px;
    color: hsl(var(--white)/.9);
    margin-bottom: 0
}

@media screen and (max-width:575px) {
    .sidebar-item .recent-post__item h6 {
        font-size: .875rem
    }
}

@media screen and (max-width:424px) {
    .sidebar-item .recent-post__item h6 {
        font-size: .75rem
    }
}

.sidebar-item .recent-post__item h6 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.sidebar-item .tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.sidebar-item .tags-list a {
    padding: 8px 12px;
    display: inline-block;
    border-radius: 5px;
    border: 1px solid hsl(var(--border-color)/.2);
    font-size: .875rem;
    font-weight: 500;
    color: hsl(var(--white)/.7);
    transition: all .4s;
    font-family: Jost
}

.sidebar-item .tags-list a:hover {
    background-color: hsl(var(--base));
    color: hsl(var(--black))
}

.blogs-tags p strong {
    color: hsl(var(--white));
    margin-right: 10px;
    font-size: 1.25rem
}

.blogs-tags p a {
    color: hsl(var(--body-color));
    margin: 0 5px
}

.call-to-action-section {
    position: relative;
    z-index: 1
}

.call-to-action-section:after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: hsl(var(--black))
}

@media screen and (max-width:575px) {
    .call-to-action-section h2 {
        font-size: 1.5rem
    }
}

.call-action-box {
    border: 1px solid hsl(var(--base-two));
    background-color: hsl(var(--black-two));
    border-radius: 20px;
    padding: 60px
}

@media screen and (max-width:575px) {
    .call-action-box {
        padding: 40px
    }
}

@media screen and (max-width:424px) {
    .call-action-box {
        padding: 20px
    }
}

.call-shape img {
    position: absolute;
    bottom: 50px;
    left: 48%
}

@media screen and (max-width:991px) {
    .call-shape img {
        bottom: auto;
        top: 5%;
        left: 10%
    }
}

.process-item {
    --process-p: 40px;
    background-color: hsl(var(--gray)/.12);
    border-radius: 15px;
    padding: var(--process-p);
    position: relative;
    z-index: 1
}

@media screen and (max-width:767px) {
    .process-item {
        --process-p: 30px
    }
}

.process-item:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: var(--process-p);
    top: var(--process-p);
    background-color: hsl(var(--base));
    border-radius: 100%;
    width: 60px;
    height: 60px;
    transition: all .4s
}

.process-item:hover:before {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 15px
}

.process-item:hover .number {
    background-color: hsl(var(--black));
    color: hsl(var(--base))
}

.process-item:hover p {
    color: hsl(var(--black)/.8)
}

.process-item .number,
.process-item:hover h4 {
    color: hsl(var(--black))
}

.process-item .number {
    background-color: hsl(var(--base));
    width: 60px;
    height: 60px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5625rem;
    font-weight: 600;
    transition: all .3s
}

.process-item .process-title {
    max-width: 218px;
    margin-bottom: 0
}

.process-item h4,
.process-item p {
    transition: all .4s
}

.roadmap-features {
    position: relative
}

@media screen and (max-width:767px) {
    .roadmap-features {
        padding-left: 20px
    }
}

.roadmap-features:before {
    content: "";
    position: absolute;
    width: 2px;
    height: 100%;
    background-color: hsl(var(--white));
    left: 50%;
    transform: translateX(-50%)
}

@media screen and (max-width:767px) {
    .roadmap-features:before {
        left: 0
    }
}

.roadmap-features .roadmap-line {
    position: absolute;
    width: 2px;
    height: 20%;
    background-color: hsl(var(--base));
    left: 50%;
    transform: translateX(-50%);
    height: 400px
}

@media screen and (max-width:767px) {
    .roadmap-features .roadmap-line {
        left: 0
    }
}

.roadmap-features .roadmap-line:after,
.roadmap-features .roadmap-line:before {
    content: "\f111";
    font-family: Font Awesome\ 6 free;
    font-weight: 900;
    font-size: 10px;
    position: absolute;
    left: -9px;
    color: hsl(var(--base));
    border: 1px solid hsl(var(--white));
    border-radius: 100px;
    padding: 2.5px 4px
}

.roadmap-features .roadmap-line:before {
    top: -7px
}

.roadmap-features .roadmap-line:after {
    bottom: -7px
}

.roadmap-content {
    display: grid;
    grid-row-gap: 60px;
    row-gap: 60px
}

.roadmap-content .roadmap-item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 80px;
    gap: 80px;
    align-items: center
}

@media screen and (max-width:767px) {
    .roadmap-content .roadmap-item {
        grid-template-columns: 1fr;
        gap: 24px
    }
}

.roadmap-content .roadmap-item:nth-child(2n) .roadmap-number {
    background-color: hsl(var(--base-two));
    order: 1;
    margin-right: auto;
    margin-left: 0
}

@media screen and (max-width:767px) {
    .roadmap-content .roadmap-item:nth-child(2n) .roadmap-number {
        order: 0;
        margin-right: 0
    }
}

.roadmap-content .roadmap-item .roadmap-number {
    background-color: hsl(var(--base));
    border-radius: 15px;
    padding: 35px;
    min-width: 270px;
    text-align: center;
    margin-left: auto
}

@media screen and (max-width:767px) {
    .roadmap-content .roadmap-item .roadmap-number {
        margin-left: 0
    }
}

.roadmap-content .roadmap-item .roadmap-number h4 {
    color: hsl(var(--black))
}

.roadmap-content .roadmap-item .roadmap-number p {
    color: hsl(var(--gray))
}

.roadmap-content .roadmap-item .roadmap-text {
    background-color: hsl(var(--black-two));
    border: 1px solid hsl(var(--gray-two)/.12);
    padding: 40px;
    border-radius: 15px
}

@media screen and (max-width:575px) {
    .roadmap-content .roadmap-item .roadmap-text {
        padding: 24px
    }

    .roadmap-content .roadmap-item .roadmap-text p {
        font-size: 14px
    }
}

.team-slide .swiper-pagination {
    position: relative;
    margin-top: 40px
}

.team-slide .swiper-pagination-bullet {
    background-color: hsl(var(--white));
    width: 10px;
    height: 10px;
    margin: 0 7px !important
}

.team-slide .swiper-pagination-bullet-active {
    background-color: hsl(var(--base-two))
}

.team-item {
    background-color: hsl(var(--black-two));
    border: 1px solid hsl(var(--gray)/.25);
    border-radius: 15px;
    padding: 15px;
    transition: all .3s ease-in-out
}

@media screen and (max-width:575px) {
    .team-item {
        max-width: 300px;
        margin: 0 auto
    }
}

.team-item:hover {
    border-color: hsl(var(--base));
    box-shadow: 0 0 10px hsl(var(--base)/.2)
}

.team-item:hover img {
    transform: scale(1.05) rotate(2deg);
    filter: brightness(1.1)
}

.team-item .team-img {
    overflow: hidden;
    border-radius: 10px;
    display: block
}

.team-item .team-img img {
    transition: all .3s ease-in-out;
    width: 100%
}

.team-item .team-content {
    text-align: center;
    padding: 20px 0 15px
}

.team-details-content .team-add-list {
    display: grid;
    grid-gap: 5px;
    gap: 5px
}

.team-details-content .team-add-list li span:first-child {
    min-width: 150px
}

.team-details-content .team-add-list li span:last-child {
    color: hsl(var(--white))
}

.team-details-img img {
    border-radius: 10px
}

.professional-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 50px;
    gap: 50px;
    grid-row-gap: 20px;
    row-gap: 20px
}

@media screen and (max-width:991px) {
    .professional-content {
        grid-template-columns: 1fr
    }
}

.professional-content .fs-16 {
    padding-bottom: 10px;
    font-weight: 500
}

.professional-content .percentage {
    font-size: .9375rem;
    color: hsl(var(--white));
    font-weight: 500;
    transform: translate(-20px, -30px)
}

@media screen and (max-width:424px) {
    .professional-content .percentage {
        width: 42px
    }
}

.contact-map {
    width: 100%;
    height: 500px;
    border-radius: 15px
}

@media screen and (max-width:991px) {
    .contact-map {
        height: 400px
    }
}

@media screen and (max-width:767px) {
    .contact-map {
        height: 300px
    }
}

.contact-info,
.enquiry-form {
    background-color: hsl(var(--gray)/.12);
    border-radius: 15px;
    padding: 30px
}

.contact-info ul li,
.enquiry-form ul li {
    align-items: center
}

.contact-info ul li:hover .icon,
.enquiry-form ul li:hover .icon {
    background-color: hsl(var(--base));
    color: hsl(var(--black))
}

.contact-info ul li:hover a,
.contact-info ul li:hover p,
.enquiry-form ul li:hover a,
.enquiry-form ul li:hover p {
    color: hsl(var(--base))
}

.contact-info ul .icon,
.enquiry-form ul .icon {
    background: hsl(var(--white)/.12);
    color: hsl(var(--body-color));
    width: 40px;
    height: 40px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    font-size: 1rem
}

.contact-info ul p,
.enquiry-form ul p {
    max-width: 225px
}

.contact-info ul p a,
.enquiry-form ul p a {
    color: hsl(var(--body-color))
}

.contact-info .social-icon,
.enquiry-form .social-icon {
    justify-content: start
}

.contact-info .social-icon a,
.enquiry-form .social-icon a {
    width: 50px;
    height: 50px;
    font-size: 1rem
}

.contact-info .social-icon a:hover,
.enquiry-form .social-icon a:hover {
    color: hsl(var(--black))
}

.login-section {
    min-height: 100vh;
    display: grid;
    align-items: center;
    padding: 130px 0 100px;
    position: relative;
    z-index: 1
}

.login-section:after,
.login-section:before {
    content: "";
    position: absolute;
    width: 100%;
    background-image: var(--login-bg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    z-index: -1
}

.login-section:before {
    background-image: var(--login-after);
    height: 100%;
    opacity: .05
}

.login-section:after {
    bottom: 0;
    height: 330px;
    opacity: .15
}

.login-section .login-content-box {
    background-color: hsl(var(--black)/.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 50px;
    gap: 50px
}

@media screen and (max-width:991px) {
    .login-section .login-content-box {
        grid-template-columns: 1fr;
        padding: 30px;
        gap: 30px
    }
}

.login-section .forgot-password {
    grid-template-columns: 1fr
}

.login-section .forgot-password .back-home-btn {
    color: hsl(var(--white))
}

.login-section .forgot-password .back-home-btn:hover {
    color: hsl(var(--base))
}

.login-section .forgot-password .btn {
    width: 100%
}

.login-img-box {
    background-image: var(--login-img);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    border-radius: 10px;
    padding: 50px 30px;
    display: grid;
    align-content: center;
    justify-content: center;
    position: relative;
    z-index: 1
}

.login-img-box:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(var(--black)/.7);
    border-radius: 10px
}

.login-img-box h3 {
    padding-top: 10px
}

.or-form {
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    gap: 1px;
    justify-content: space-between
}

.or-form:after,
.or-form:before {
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: .8px;
    background: hsl(var(--white)/.2);
    z-index: -1;
    width: 34%
}

.or-form span {
    font-weight: 600;
    display: inline-block;
    padding: 0 10px;
    font-size: .875rem
}

@media screen and (max-width:767px) {
    .or-form span {
        font-size: .8125rem;
        padding: 0 5px
    }
}

.other-sing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    gap: 24px
}

.other-sing button {
    background: hsl(var(--base)/.1);
    width: 100%;
    height: 50px;
    border-radius: 5px;
    font-size: 1.25rem;
    font-weight: 500;
    color: hsl(var(--white)/.7);
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    transition: all .4s
}

.account-item {
    background-color: hsl(var(--black-two));
    border-radius: 15px;
    padding: 20px;
    transition: all .3s ease-in-out;
    border: 1px solid hsl(var(--black-two))
}

.account-item:hover {
    border-color: hsl(var(--black));
    box-shadow: 0 0 10px hsl(var(--white)/.05)
}

.account-item:hover img {
    transform: scale(1.05) rotate(2deg);
    filter: brightness(1.1)
}

.account-item .account-img {
    border-radius: 15px;
    overflow: hidden
}

.account-item .account-img img {
    transition: all .3s ease-in-out
}

.account-item .account-text p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .9375rem;
    max-width: 360px
}

.account-item .account-text .opne-account {
    color: hsl(var(--white)/.8)
}

.account-item .account-text .opne-account:hover {
    color: hsl(var(--base))
}

.account-item .account-text .btn {
    width: 40px;
    height: 40px;
    border-radius: 100px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.account-item .account-text .btn:hover i {
    transform: rotate(10deg)
}

.account-item .account-text .btn i {
    transform: translateY(-3px);
    transition: all .3s ease-in-out
}

.account-details-content img {
    border-radius: 15px
}

.account-details-content .info-inner {
    position: relative;
    display: block;
    border: 1px solid hsl(var(--gray));
    border-radius: 10px;
    margin: 10px 0
}

@media screen and (max-width:991px) {
    .account-details-content .info-inner {
        padding: 20px
    }
}

.account-details-content .info-inner .info-list:first-child {
    border-bottom: 1px solid hsl(var(--gray))
}

@media screen and (max-width:991px) {
    .account-details-content .info-inner .info-list:first-child {
        border: none
    }
}

.account-details-content .info-inner .info-list li {
    position: relative;
    float: left;
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    color: var(--title-color);
    padding: 22px 30px;
    border-right: 1px solid hsl(var(--gray))
}

.account-details-content .info-inner .info-list li:last-child {
    border: none !important
}

@media screen and (max-width:1199px) {
    .account-details-content .info-inner .info-list li {
        padding: 20px;
        font-size: 14px
    }
}

@media screen and (max-width:991px) {
    .account-details-content .info-inner .info-list li {
        width: 50%;
        padding: 12px 20px
    }

    .account-details-content .info-inner .info-list li:nth-child(2) {
        border: none
    }
}

@media screen and (max-width:767px) {
    .account-details-content .info-inner .info-list li {
        width: 100%;
        border: 0
    }
}

.account-benefits {
    columns: 200px 2;
    column-gap: 20px
}

.account-benefits li {
    background-color: hsl(var(--black-two));
    padding: 14px 20px;
    border-radius: 10px;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px
}

.account-benefits li:before {
    content: "\f14a";
    font-family: Font Awesome\ 6 free;
    font-weight: 900;
    color: hsl(var(--base-two));
    font-size: 25px
}

.account-stander {
    columns: 250px 2;
    column-gap: 20px
}

.account-stander li {
    border: 1px solid hsl(var(--black-two));
    padding: 20px;
    border-radius: 10px;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.account-stander li span {
    font-size: 16px
}

@media screen and (max-width:1399px) {
    .account-stander li span {
        font-size: 15px
    }
}

@media screen and (max-width:767px) {
    .account-stander li span {
        font-size: 14px
    }
}

.account-stander li span:first-child {
    display: flex;
    align-items: center;
    gap: 10px
}

.account-stander li span:first-child:before {
    content: "\f101";
    font-family: Font Awesome\ 6 free;
    font-weight: 900;
    color: hsl(var(--black));
    font-size: 13px;
    background-color: hsl(var(--base-two));
    border-radius: 3px;
    padding: 2px 5px
}

#tradingview-ticker-tape {
    background-color: hsl(var(--gray)/.12);
    border-radius: 6px;
    padding: 15px
}

.market-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 24px;
    gap: 24px;
    background-color: hsl(var(--gray)/.12);
    border: 1px solid hsl(var(--gray)/.12);
    border-radius: 15px;
    overflow: hidden;
    padding: 24px;
    transition: all .3s ease-in-out
}

@media screen and (max-width:767px) {
    .market-card {
        grid-template-columns: 1fr
    }
}

@media screen and (max-width:424px) {
    .market-card {
        padding: 15px
    }
}

.market-card:hover {
    box-shadow: 0 0 10px hsl(var(--white)/.05)
}

.market-card:hover img {
    transform: scale(1.05) rotate(2deg);
    filter: brightness(1.1)
}

.market-card .market-img {
    overflow: hidden;
    border-radius: 10px
}

.market-card .market-img img {
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.market-card .market-text .btn {
    margin-top: 24px;
    padding: 12px 20px;
    font-weight: 600
}

.market-details-content img {
    border-radius: 15px
}

.market-details-content ul {
    display: grid;
    grid-gap: 10px;
    gap: 10px
}

.market-details-content ul li {
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: .4s
}

.market-details-content ul li:before {
    content: "\f111";
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    font-size: 8px;
    color: hsl(var(--base-two))
}

.marketview-widget-container {
    padding: 0 10px 15px;
    border-radius: 10px;
    overflow: hidden;
    background-color: hsl(var(--gray)/.12);
    border: none !important;
    box-shadow: none !important
}

#tradingview-ticker-tape a[href*="tradingview.com"],
#tradingview-ticker-tape a[href*=TradingView],
#tradingview-ticker-tape div[class*=branding],
#tradingview-ticker-tape div[class*=copyright],
#tradingview-ticker-tape p[class*=branding],
#tradingview-ticker-tape p[class*=copyright],
#tradingview-ticker-tape span[class*=branding],
#tradingview-ticker-tape span[class*=copyright],
.marketview-widget-container a[href*="tradingview.com"],
.marketview-widget-container a[href*=TradingView],
.marketview-widget-container div[class*=branding],
.marketview-widget-container div[class*=copyright],
.marketview-widget-container p[class*=branding],
.marketview-widget-container p[class*=copyright],
.marketview-widget-container span[class*=branding],
.marketview-widget-container span[class*=copyright] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important
}

.tradingview-widget-copyright {
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    font-size: 13px !important;
    line-height: 32px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-family: -apple-system, BlinkMacSystemFont, Trebuchet MS, Roboto, Ubuntu, sans-serif !important;
    color: #B2B5BE !important;
    display: none !important
}

.trading-view-box {
    background-color: hsl(var(--gray)/.12);
    border-radius: 6px;
    padding: 15px
}

.privacy-content h4 {
    font-size: 1.6875rem;
    margin-top: 15px
}

.privacy-content ul {
    display: grid;
    grid-gap: 10px;
    gap: 10px;
    margin-left: 30px;
    margin-top: 15px
}

.privacy-content ul li {
    display: flex;
    align-items: center;
    gap: 10px
}

.privacy-content ul li:before {
    content: "\f111";
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    font-size: 5px;
    color: hsl(var(--base-two));
    opacity: .6
}

.privacy-content ol {
    list-style: lower-alpha;
    margin-left: 35px;
    padding-top: 6px
}

.error-section {
    min-height: 100vh;
    display: grid;
    align-items: center;
    padding: 130px 0 100px;
    position: relative;
    z-index: 1;
    background-color: hsl(var(--black)/.98)
}

.error-section:after,
.error-section:before {
    content: "";
    position: absolute;
    width: 100%;
    background-image: var(--the-bg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    z-index: -1
}

.error-section:before {
    background-image: var(--the-before);
    height: 100%;
    opacity: .05
}

.error-section:after {
    bottom: 0;
    height: 330px;
    opacity: .15
}

.error-section .error-img {
    max-width: 600px;
    margin: 0 auto
}

.error-section .error-icons {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    justify-content: center
}

.error-section .error-icons img {
    width: 100%
}

.error-section .error-icons img:nth-child(2) {
    animation: alltuchtopdown 1.6s ease-in-out 0s infinite alternate
}

.learn-section {
    position: relative;
}

.learn-section .section-heading {
    max-width: 700px;
    margin: auto;
}

.learn-section .section-heading h2 {
    color: #fff;
    font-size: 52px;
    margin-bottom: 20px;
}

.learn-section .section-heading p {
    color: #bfbfbf;
}

.learn-card {
    background: #121212;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 35px;
    height: 100%;
    transition: .4s;
}

.learn-card:hover {
    transform: translateY(-8px);
    border-color: var(--base-color, #14e188);
}

.learn-card .icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #1d1d1d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #14e188;
    font-size: 28px;
    margin-bottom: 25px;
}

.learn-card h4 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 15px;
}

.learn-card p {
    color: #bfbfbf;
    margin: 0;
    line-height: 1.8;
}

.curriculum-timeline {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.curriculum-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 2px;
    height: 97%;
    background: linear-gradient(to bottom, #14ff99, #daff47);
}

.timeline-item {
    position: relative;
    padding: 25px 60px;
}



.timeline-item::before {
    content: '';
    position: absolute;
    top: 25px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #14ff99;
    border: 4px solid #000;
    box-shadow: 0 0 15px rgba(20, 255, 153, .7);
    z-index: 2;
}

.timeline-item.left::before {
    right: -10px;
}

.timeline-item.right::before {
    left: -10px;
}

.timeline-content {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 35px;
    transition: .35s ease;
    position: relative;
    overflow: hidden;
}

.timeline-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(#14ff99, #daff47);
}

.timeline-content:hover {
    transform: translateY(-8px);
    border-color: #14ff99;
    box-shadow: 0 20px 45px rgba(20, 255, 153, .12);
}

.module-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, #14ff99, #0dcf7b);
    color: #000;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 20px;
}

.timeline-content h4 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 8px;
    display: inline;
    margin-left: 15px;
}

.timeline-content p {
    color: #a9a9a9;
    line-height: 1.8;
    margin-bottom: 20px;
}

.timeline-content ul {
    margin: 0 0 25px;
    padding: 0;
    list-style: none;
}

.timeline-content ul li {
    color: #fff;
    padding-left: 28px;
    margin-bottom: 8px;
    position: relative;
    font-size: 15px;
}

.timeline-content ul li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #14ff99;
    font-weight: 700;
}

.module-info {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px;
}

.module-info span {
    background: #111;
    border: 1px solid rgba(20, 255, 153, .25);
    color: #fff;
    padding: 10px 18px;
    border-radius: 30px;
    font-size: 14px;
    transition: .3s;
}

.module-info span:hover {
    background: #14ff99;
    color: #000;
}

.module-info i {
    color: #daff47;
    margin-right: 6px;
}

@media(max-width:991px) {

    .curriculum-timeline {
        grid-template-columns: 1fr;
    }

    .curriculum-timeline::before {
        left: 18px;
    }

    .timeline-item::before {

        top: 50px;
    }

    .timeline-item,
    .timeline-item.left,
    .timeline-item.right {
        width: 100%;
        left: 0;
        padding-left: 60px;
        padding-right: 0;
    }

    .timeline-item::before,
    .timeline-item.left::before,
    .timeline-item.right::before {
        left: 8px;
    }

    .timeline-content {
        padding: 25px;
    }

    .timeline-content h4 {
        font-size: 22px;
        display: block;
        margin-left: 0px;
    }

}

.course-audience {
    background: #000;
}

.audience-card {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    height: 100%;
    transition: .35s;
    position: relative;
    overflow: hidden;
}

.audience-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #14ff99, #daff47);
}

.audience-card:hover {
    transform: translateY(-8px);
    border-color: #14ff99;
    box-shadow: 0 15px 35px rgba(20, 255, 153, .15);
}

.audience-card .icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: rgba(20, 255, 153, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #14ff99;
    border: 1px solid rgba(20, 255, 153, .3);
}

.audience-card h4 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 15px;
}

.audience-card p {
    color: #b8b8b8;
    line-height: 1.8;
    margin: 0;
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 25px;
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    padding: 30px;
    transition: .35s;
    height: 100%;
}

.feature-item:hover {
    border-color: #14ff99;
    transform: translateX(8px);
    box-shadow: 0 15px 35px rgba(20, 255, 153, .12);
}

.feature-icon {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 18px;
    background: linear-gradient(135deg, #14ff99, #daff47);
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-icon i {
    color: #000;
    font-size: 22px;
}

.feature-content h4 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 10px;
}

.feature-content p {
    color: #bcbcbc;
    line-height: 1.8;
    margin: 0;
    font-size: 15px;
}

@media(max-width:767px) {

    .feature-item {
        flex-direction: column;
        text-align: center;
    }

    .feature-icon {
        margin-bottom: 15px;
    }

    .feature-list {
        grid-template-columns: 1fr;
    }

}

.mentor-image img {
    border-radius: 25px;
    width: 100%;
    border: 2px solid rgba(20, 255, 153, .15);
}

.mentor-list {
    margin-top: 35px;
}

.mentor-item {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 15px;
}

.mentor-item i {
    color: #14ff99;
    font-size: 20px;
}

.mentor-item span {
    color: #fff;
    font-size: 16px;
}

.mentor-section p {
    color: #bdbdbd;
    line-height: 1.9;
}

.call-img img {
    border-radius: 20px;
}

.testimonial-item {
    min-height: 370px;
    height: 370px;
}

/* money back guarantee */
.guarantee-section {
    position: relative;
    overflow: hidden;
}

.guarantee-badge-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
}

.guarantee-badge {
    width: 280px;
    height: 280px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(20, 255, 153, .16), #0d0d0d 70%);
    border: 2px solid rgba(20, 255, 153, .35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 60px rgba(20, 255, 153, .18), inset 0 0 40px rgba(0, 0, 0, .45);
}

.guarantee-badge::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px dashed rgb(114, 195, 77);
    animation: guarantee-spin 18s linear infinite;
}

@keyframes guarantee-spin {
    to {
        transform: rotate(360deg);
    }
}

.guarantee-badge i.fa-shield-halved {
    font-size: 40px;
    background: linear-gradient(135deg, #14ff99, #daff47);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 10px;
}

.guarantee-badge-percent {
    font-size: 52px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.guarantee-badge-label {
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #bfbfbf;
    margin-top: 8px;
}

.guarantee-list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}

.guarantee-list li {
    color: #fff;
    padding-left: 30px;
    position: relative;
    font-size: 15px;
}

.guarantee-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(20, 255, 153, .12);
    color: #14ff99;
    font-weight: 700;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guarantee-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.guarantee-note {
    color: #8a8a8a;
    font-size: 12px;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .guarantee-badge {
        width: 220px;
        height: 220px;
    }

    .guarantee-badge-percent {
        font-size: 40px;
    }

    .guarantee-list {
        grid-template-columns: 1fr;
    }
}