/* ==================== 
1. resets & defaults
2. base styles
3. layout
4. components
5. content by pages
==================== */


:root{
    --font-family: '63Fonts', sans-serif;
    --font-family-caps: 'CMD-Opal', sans-serif;
    --bs-font-sans-serif: var(--font-family);

    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;

    --bs-body-color-rgb: 0,0,0;
    --bs-body-color: #000;
    --bs-secondary-color: #717182;
    --bs-tertiary-color: #90A1B9;

    --bs-heading-color: #0a0a0a;

    --bs-primary-rgb: 24,42,229;
    --bs-primary: #182AE5;
    --bs-primary-bg-subtle: #4455FF;
    --bs-primary-text-emphasis: #1421AC;

    --bs-secondary-rgb: 84,84,84;
    --bs-secondary: #545454;
    --bs-secondary-bg-subtle: #BDBCBF;

    --bs-success-rgb: 41,186,44;
    --bs-success: #29BA2C;
    --bs-success-bg-subtle: #58D15A;
    --bs-success-text-emphasis: #19871B;

    --bs-danger-rgb: 233,35,35;
    --bs-danger: #E92323;

    --bs-light-rgb: 227,227,227;
    --bs-light: #E3E3E3;
    --bs-light-bg-subtle: #F3F3F5;
    --bs-light-text-emphasis: #BDBCBF;

    --bs-dark-rgb: 10,13,44;
    --bs-dark: #0A0D2C;


    --btn-primary: var(--bs-primary);
    --btn-primary-hover: var(--bs-primary-bg-subtle);
    --btn-primary-active: var(--bs-primary-text-emphasis);

    --bs-link-color-rgb: var(--bs-body-color-rgb);
    --bs-link-color: var(--bs-body-color);
    --bs-link-hover-color: var(--bs-link-color);
    --bs-link-hover-color-rgb: var(--bs-link-color-rgb);

    --bs-border-color: #EAEAEA;
    --bs-border-color-translucent: rgba(234,234,234,1);


    --app-content-px: 1rem;

    --app-header-spacing-y: 14px;
    --app-header-box-width: var(--container-size-6);
    --app-header-box-height: 72px;
    --app-header-height: calc(var(--app-header-box-height) + var(--app-header-spacing-y) * 2);


    --container-size-1: 522px;
    --container-size-2: 652px;
    --container-size-3: 878px;
    --container-size-4: 1104px;
    --container-size-5: 1216px;
    --container-size-6: 1328px;


    /*--display-1: 11.25rem;*/
    --display-1: 4rem;
    --display-2: 3.5rem;
    --display-3: 3rem;
    --display-4: 2.75rem;
    --display-5: 2.5rem;
    --display-6: 2.25rem;

    --fs-h1: 2.5rem;
    --fs-h2: 2rem;
    --fs-h3: 1.75rem;
    --fs-h4: 1.5rem;
    --fs-h5: 1.25rem;
    --fs-h6: 1.125rem;

    --fs-text: var(--fs-text3);
    --fs-text1: 1.25rem;
    --fs-text2: 1.125rem;
    --fs-text3: 1rem;
    --fs-text4: 0.875rem;
    --fs-text5: 12px;
    --fs-text6: 11px;


    --element-size-1: 1.875rem;
    --element-size-2: 2.25rem;
    --element-size-3: 2.875rem;
    --element-size-4: 3.875rem;
    --element-size-5: 4.25rem;

    --form-control-height: var(--element-size-3);
    --form-control-px: 1rem;
    --form-control-py: .375rem;
    --form-control-fs: 1rem;
    --form-control-fw: 400;
    --form-control-color: var(--bs-secondary);
    --form-control-bg: var(--bs-light-bg-subtle);
    --form-control-border-color: var(--bs-light-bg-subtle);
    --form-control-placeholder-color: var(--bs-tertiary-color);

    --bs-form-invalid-color: var(--bs-danger);
    --bs-form-invalid-border-color: var(--bs-danger);


    --icon-size-xxs: 14px;
    --icon-size-xs: 16px;
    --icon-size-sm: 20px;
    --icon-size-md: 24px;
    --icon-size-lg: 28px;
    --icon-size-xl: 32px;
    --icon-size-2xl: 36px;
    --icon-size-3xl: 48px;
    --icon-size-4xl: 64px;


    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.25rem;
    --bs-border-radius-lg: 1.125rem;
    --bs-border-radius-xl: 1.5rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-3xl: 2.75rem;
}

@media (min-width: 768px) {
    :root{
        --app-header-box-height: 92px;

        --app-content-px: 1.5rem;

        --display-1: 5rem;
        --display-2: 4.5rem;
        --display-3: 4rem;
        --display-4: 3.5rem;
        --display-5: 3rem;
        --display-6: 2.5rem;
    }
}
@media (min-width: 992px) {
    :root{
        --display-1: clamp(6.25rem, -4.995rem + 18.137vw, 10.875rem);
        --display-2: clamp(5rem, -4.662rem + 15.584vw, 8rem);
        --display-3: clamp(4rem, -0.831rem + 7.792vw, 5.5rem);
        --display-4: clamp(3.5rem, 1.89rem + 2.597vw, 4rem);
        --display-5: clamp(3rem, 1.39rem + 2.597vw, 3.5rem);
        --display-6: clamp(2.375rem, 0.362rem + 3.247vw, 3rem);
    }
}



/* ==================== 1. resets & defaults ==================== */
html,body,
h1,h2,h3,h4,h5,h6,
ul,ol,p,figure,
form,fieldset,input,textarea{
    margin: 0;
    padding: 0;
}

header,nav,main,article,section,aside,footer,figure{
    display: block;
}

*{box-sizing: border-box; -webkit-tap-highlight-color: transparent;}

/* ----- */

html,body{
    width: 100%;
    height: 100%;
}

nav ul,.nav ul{list-style: none;}
a img,fieldset{border:0;}

.logo img{display: block;}
.img-container img,
.thumb img,
figure img{
    display: block;
    max-width: 100%;
}

button,
input[type=button],
input[type=submit]{
    cursor: pointer;
    outline: none !important;
}

a,a:hover,a:focus{text-decoration: none;}
a.is-active{cursor: default;}

.disabled-click{pointer-events: none;}

/* ----- */

.no-scroll,
.no-scroll body{
    height: 100% !important;
    overflow: hidden;
}

.item-fade{opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; z-index: -1;}
.item-fade.fade-in{opacity: 1; visibility: visible; z-index: 1;}

/* ----- */

.text-nocase{text-transform: none !important;}

.highlight {background-color: #ffff00;}

b{font-weight: 500}
strong{font-weight: 700}

/* ----- */

body{
    background: var(--bs-body-bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    color: var(--bs-body-color);
    font-size: 14px;
}



/* ==================== 2. base styles ==================== */


/* ----------- fonts ----------- */
body,input,textarea,button{
    font-family: var(--font-family);
}
.text-uppercase{
    font-feature-settings: "case" on;
}
/* ----------- /fonts ----------- */


/* ----------- container ----------- */
.container,
.container-xxs,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-fluid{
    width: 100%;
    padding-left: var(--app-content-px);
    padding-right: var(--app-content-px);
    margin: 0 auto;
}
.container,
.container-xxs,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.container-xl{
    --container-width: var(--container-size-4, 100%);
    max-width: calc(var(--container-width) + var(--app-content-px) * 2);
}

.container .container-xxs,
.container .container-xs,
.container .container-sm,
.container .container-md,
.container .container-lg{
    max-width: var(--container-width);
    padding-left: 0;
    padding-right: 0;
}

/*.container,
.container-md,
.t63-section[data-content-size="md"] .container{
    --container-width: calc(var(--container-size-4) + var(--app-content-px) * 2);
}*/

.container-xxs,
.t63-section[data-content-size="xxs"] .container{
    --container-width: var(--container-size-1);
}

.container-xs,
.t63-section[data-content-size="xs"] .container{
    --container-width: var(--container-size-2);
}

.container-sm,
.t63-section[data-content-size="sm"] .container{
    --container-width: var(--container-size-3);
}

/*.container-md,
.t63-section[data-content-size="md"] .container{
	--container-width: var(--container-size-4);
}*/

.container-lg,
.t63-section[data-content-size="lg"] .container{
    --container-width: var(--container-size-5);
}

.container-xl,
.t63-section[data-content-size="xl"] .container{
    --container-width: var(--container-size-6);
}

.container-fluid,
.t63-section[data-content-size="fluid"] .container{
    max-width: 100%;
}
/* ----------- /container ----------- */


/* ----------- row ----------- */

/* ----------- /row ----------- */


/* ----------- icons ----------- */
.i-xxs{
    width: var(--icon-size-xxs) !important;
}
.i-xs{
    width: var(--icon-size-xs) !important;
}
.i-sm{
    width: var(--icon-size-sm) !important;
}
.i-md{
    width: var(--icon-size-md) !important;
}
.i-lg{
    width: var(--icon-size-lg) !important;
}
.i-xxl,
.i-2xl{
    width: var(--icon-size-2xl) !important;
}
.i-3xl{
    width: var(--icon-size-3xl) !important;
}
.i-4xl{
    width: var(--icon-size-4xl) !important;
}
/* ----------- /icons ----------- */


/* ----------- rotate ----------- */
.r-0::before{
    transform: rotate(0deg);
}
.r-45::before{
    transform: rotate(45deg);
}
.r-90::before{
    transform: rotate(90deg);
}
.r-180::before{
    transform: rotate(180deg);
}
.r-270::before{
    transform: rotate(270deg);
}
.r-360::before{
    transform: rotate(360deg);
}
/* ----------- /rotate ----------- */


/* ----------- colors ----------- */
.text-white{
    color: #fff !important;
}

.text-muted {
    color: var(--bs-light-text-emphasis) !important;
}

.link-primary:focus,
.link-primary:hover {
    color: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
    -webkit-text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity,1))!important;
    text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
/* ----------- /colors ----------- */


/* ---------- scroll ---------- */
.os-scrollbar{
    --scrollbar-width: 4px;
    --scrollbar-color: var(--bs-light-bg-subtle);
    --scrollbar-handle-color: var(--bs-secondary);
    --spacing-right: 5px;
}
.os-scrollbar.os-scrollbar-vertical{
    background-color: var(--scrollbar-color) !important;
	width: var(--scrollbar-width) !important;
	padding: 0 !important;
    right: var(--spacing-right);
}
.os-scrollbar-handle{
	background-color: var(--scrollbar-handle-color) !important;
	border-radius: 4px !important;
}
.os-host-resize-disabled.os-host-scrollbar-horizontal-hidden>.os-scrollbar-vertical {
    top: var(--scrollbar-top,0) !important;
    bottom: var(--scrollbar-bottom,0) !important;
}

.bg-light-subtle .os-scrollbar{
    --scrollbar-color: transparent;
    --scrollbar-handle-color: #C5C5C5;
}

.desktop .scrollable-container{
	overflow: hidden !important;
}
.mobile .scrollable-container,
.tablet .scrollable-container{
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
/* ---------- /scroll ---------- */



/* ==================== 3. layout ==================== */


.app{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}


/* ---------- header ---------- */
.app-header{
    --header-items-gap: 2rem;

    width: 100%;
    padding: var(--app-header-spacing-y) 0.5rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 350;
}
.app-header .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--header-items-gap);
    max-width: var(--app-header-box-width);
    height: var(--app-header-box-height);
    background-color: rgba(255,255,255,0.33);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.33);
    border-radius: 100px;
    padding: 0.75rem 1.125rem;
}

.app-header .logo{
    flex-grow: 1;
    max-width: 222px;
    margin-left: 0.375rem;
}
.app-header .logo img{
    width: 100%;
}

.app-header .main-wrap > div,
.app-header .main-wrap .wrap{
    display: flex;
    align-items: center;
    gap: var(--header-items-gap);
}

.app-header .i-btn{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-width: 0;
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-secondary);
    --bs-btn-active-color: var(--bs-primary);

    position: relative;
}

.app-header .dropdown-menu{
    --top: calc( var(--dropdown-btn-size) + (var(--app-header-box-height) - var(--dropdown-btn-size)) / 2 + 0.625rem);
    transform: translate(0px,var(--top)) !important;
    width: var(--bs-dropdown-min-width);
}

/* --- nav --- */
.app-header nav{
    --dropdown-btn-size: 2.625rem;
}

.app-header nav .btn-header{
    --bs-btn-font-weight: 400;
}
.app-header nav .dropdown-menu{
    --bs-dropdown-min-width: 100%;

    --bs-dropdown-item-padding-x: 1.75rem;

    width: 100%;
}

/* --- lang --- */
.app-header .btn-lang{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-width: 0;
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-active-color: var(--bs-primary);
}

/* --- search --- */
.app-header .search-wrap{
    --dropdown-btn-size: 2.25rem;
    --input-width: 100%;
}

.app-header .btn-search{
    --btn-size: var(--dropdown-btn-size);
}

.app-header .btn-search:not([aria-expanded="true"]) .i-xmark,
.app-header .btn-search[aria-expanded="true"] .i-zoom{
    display: none;
}

.app-header .search-wrap .dropdown-menu{
    --bs-dropdown-min-width: 218px;
    --bs-dropdown-bg: rgba(255,255,255,.32);
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 0;
}
.app-header .search-box{
    display: flex;
}
.app-header .search-box .btn{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --btn-size: 2.625rem;

    flex-shrink: 0;
}
.app-header .search-box input{
    width: var(--input-width);
    height: 2.25rem;
    border: none;
    border-radius: 1.5rem;
    outline: none;
    padding: 0.125rem 0.5rem 0.125rem 1rem;
    margin: 3px 4px 3px 0;
}

/* --- notifications --- */
.app-header .notifications-wrap{
    --dropdown-btn-size: 1.5rem;
}
.app-header .btn-notification{
    --bs-btn-border-width: 0;

    --btn-size: var(--dropdown-btn-size);
}
.app-header .btn-notification > i{
    width: 11px;
    height: 11px;
    background-color: var(--bs-danger);
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 1px;
}

.app-header .notifications-wrap .dropdown-menu{
    --bs-dropdown-min-width: 318px;

    --bs-dropdown-item-padding-y: 0.4375rem;
    --bs-dropdown-link-color: var(--bs-secondary);
}
.app-header .notifications-wrap .scrollable-container{
    max-height: 216px;
}
.app-header .notifications-wrap .dropdown-item{
    min-height: 54px;
    gap: 0.625rem;
}
.app-header .notifications-wrap .dropdown-item::before{
    align-self: stretch;
    content: "";
    flex-shrink: 0;
    min-height: 38px;
    border-left: 0.375rem solid;
    border-color: inherit;
}

/* --- user --- */
.app-header .user-wrap{
    --dropdown-btn-size: 3.25rem;
}
.app-header .btn-user{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-width: 0;

    --btn-size: var(--dropdown-btn-size);
    --icon-size: 3.25rem;
}
.app-header .user-wrap .dropdown-menu{
    --bs-dropdown-min-width: 298px;

    --bs-dropdown-item-padding-x: 2.25rem;
    --bs-dropdown-item-padding-y: 0.75rem;
}
.app-header .user-wrap .btn-logout{
    --bs-dropdown-link-color: var(--bs-primary);
    --bs-dropdown-link-hover-color: var(--bs-primary);
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-color: var(--bs-primary);
    --bs-dropdown-link-active-bg: transparent;

    margin-top: 0.75rem;
}
.app-header .user-wrap .btn-logout:hover{
    font-weight: bold;
}

.app-header .btn-hamburger{
    --padding: 0.25rem;
    --icons-size: 2rem;
}

@media (min-width: 768px) {
    .app-header{
        padding-left: var(--app-content-px);
        padding-right: var(--app-content-px);
    }
}

@media (min-width: 1200px) {
    .app-header .btn-hamburger,
    .app-header .main-wrap .foo{
        display: none !important;
    }

    /* gaps */
    .app-header{
        --header-items-gap: clamp(1.75rem, -7.25rem + 12vw, 2.5rem);
    }
    .app-header nav{
        --header-items-gap: clamp(1rem, -17rem + 24vw, 2.5rem);
    }

    /* is auth */
    .app-header.is-auth{
        --header-items-gap: clamp(1rem, -7.182rem + 10.909vw, 1.75rem);
    }
    .app-header.is-auth .container{
        padding-right: 0.75rem;
    }
    .app-header.is-auth nav{
        --header-items-gap: clamp(0.25rem, -5.205rem + 7.273vw, 0.75rem);
    }
    .app-header.is-auth nav .btn-header{
        --bs-btn-padding-x: clamp(1rem, -2rem + 4vw, 1.25rem);
    }

    /* --- --- */

    .app-header .btn-header{
        --bs-btn-padding-x: 1.25rem;
        --bs-btn-padding-y: 0.25rem;
        --bs-btn-font-size: 0.875rem;
        --bs-btn-font-weight: 500;

        --btn-size: 2.625rem;

        --bs-btn-hover-bg: #fff;
        --bs-btn-active-bg: #fff;
    }

    .app-header .i-btn{
        --bs-btn-hover-color: var(--bs-primary);
    }

    .app-header .dropdown-menu{
        --top: calc( var(--dropdown-btn-size) + (var(--app-header-box-height) - var(--dropdown-btn-size)) / 2 + 0.625rem);
        transform: translate(0px,var(--top)) !important;
        width: var(--bs-dropdown-min-width);
    }


    /* --- nav --- */
    .app-header nav > ul{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--header-items-gap);
    }
    .app-header nav .dropdown-item::after{
        content: "";
        width: 16px;
        height: 16px;
        background: url(../../images/icons/arrow_right_primary.svg) center no-repeat;
        background-size: 100% auto;
        margin: auto -0.75rem auto auto;
        opacity: 0;
        transition: opacity 0.15s ease-in-out;
    }
    .app-header nav .dropdown-item:hover::after{
        opacity: 1;
    }

    /* --- search --- */
    .app-header .search-wrap{
        --dropdown-btn-size: 3.25rem;
        --input-width: 172px;
    }

    .app-header .btn-search{
        --bs-btn-hover-bg: #fff;
        --bs-btn-active-bg: #fff;
    }

    /* --- user --- */
    .app-header .user-wrap{
        --dropdown-btn-size: 3.875rem;
    }
    .app-header .btn-user {
        --bs-btn-padding-x: 0.25rem;
        --bs-btn-padding-y: 0.25rem;

        --btn-size: var(--dropdown-btn-size);
        --icon-size: 3.25rem;

        --bs-btn-hover-bg: #fff;
        --bs-btn-active-bg: #fff;
    }
}
@media (min-width: 1340px){
    .app-header .logo{
        max-width: 240px;
    }

    .app-header .btn-header{
        --bs-btn-font-size: 1rem;
    }
}

@media (max-width: 1199px) {
    .app-header .btn-header.btn-lang{
        display: none !important;
    }

    .app-header.nav-is-open > .container{
        border-color: var(--bs-secondary);
        backdrop-filter: none;
    }
    .app-header .main-wrap{
        display: none;
        width: 100%;
        height: 100vh;
        background-color: var(--bs-light);
        padding-top: var(--app-header-height);
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .app-header.nav-is-open .main-wrap{
        display: block;
    }
    .app-header .main-wrap > div{
        flex-direction: column;
        align-items: inherit;
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 var(--app-content-px);
    }

    .app-header .main-wrap .wrap{
        order: 1;
        justify-content: flex-end;
        padding-top: 1.5rem;
        position: relative;
    }
    .app-header .main-wrap .wrap .dropdown{
        position: unset;
    }
    .app-header .main-wrap .wrap .dropdown-menu{
        --top: 0.375rem;
        --bs-dropdown-min-width: 100%;

        width: 100%;
        top: 100% !important;
    }

    /* --- nav --- */
    .app-header nav{
        order: 2;
        justify-content: flex-start;
        padding-top: 0.75rem;
    }
    .app-header nav > ul > li{
        border-bottom: 1px solid var(--bs-primary);
        padding: 0.5rem 0.75rem;
    }
    .app-header nav .btn-header {
        --bs-btn-padding-x: 0;
        --bs-btn-padding-y: 0.5rem;
        --bs-btn-font-size: 1.25rem;
        --btn-size: auto;
    }
    .app-header nav .dropdown-menu{
        --bs-dropdown-min-width: 100%;
        --bs-dropdown-padding-x: 0;
        --bs-dropdown-padding-y: 0.25rem;
        --bs-dropdown-bg: transparent;
        --bs-dropdown-border-width: 0;
        --bs-dropdown-border-color: transparent;
        --bs-dropdown-border-radius: 0;
        --bs-dropdown-box-shadow: none;

        --bs-dropdown-item-padding-x: 0;
        --bs-dropdown-item-padding-y: 0.5rem;
        --bs-dropdown-item-border-radius: 0;
        --bs-dropdown-link-color: var(--bs-body-color);
        --bs-dropdown-link-hover-color: var(--bs-body-color);
        --bs-dropdown-link-hover-bg: transparent;
        --bs-dropdown-link-active-color: var(--bs-body-color);
        --bs-dropdown-link-active-bg: transparent;
        --bs-dropdown-font-size: 1.25rem;

        transform: none !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
    }
    .app-header nav .dropdown-menu.show{
        display: none;
    }
    .app-header nav .dropdown-item{
        font-weight: 500;
    }

    /* --- auth --- */
    .app-header .btn-auth{
        order: 3;
        margin: 1.5rem auto auto;
    }

    /* --- foo --- */
    .app-header .foo{
        flex-shrink: 0;
        order: 4;
        margin-top: auto;
        padding-bottom: 1.25rem;
        overflow: hidden;
    }
    .app-header .foo .row{
        align-items: center;
        justify-content: space-between;
    }
    .app-header .foo .row > *{
        display: flex;
    }
    .app-header .foo img{
        width: 2.25rem;
    }
    .app-header .foo .btn-lang{
        --bs-btn-padding-x: 0;
        --bs-btn-padding-y: 0;
        --btn-size: 3.5rem;
    }

    .app-header:not(.is-auth) .main-wrap .wrap{
        display: none !important;
    }
}
/* ---------- /header ---------- */


/* ---------- page ---------- */
.app-page{
    flex-grow: 1;
    width: 100%;
    position: relative;
}

/* --- page head --- */
.page-head{
    --bs-aspect-ratio: 220px;

    width: 100%;
    position: relative;
}
.page-head .img-wrap{
    border-bottom-left-radius: var(--bs-border-radius-lg);
    border-bottom-right-radius: var(--bs-border-radius-lg);
}

.page-head.bg-primary .img-wrap::before{
    background-color: rgba(var(--bs-primary-rgb),.14);
    position: relative;
    z-index: 2;
}

/* --- section --- */
.section{
    --section-py: 3rem;

    padding-top: var(--section-py);
    padding-bottom: var(--section-py);
    position: relative;
    z-index: 1;
}
.section-overlap{
    --section-overlap-size: 1.375rem;

    margin-bottom: calc(var(--section-overlap-size) * -1);
}

@media (min-width: 768px) {
    /* --- page head --- */
    .page-head {
        --bs-aspect-ratio: 318px;
    }

    /* --- section --- */
    .section{
        --section-py: 5rem;
    }
}
/* ---------- /page ---------- */


/* ---------- aside ---------- */
.col-aside{
    position: relative;
}

.nav-aside{
    --nav-border-color: var(--bs-border-color);
    --nav-border-width: var(--bs-border-width);
    --nav-border-radius: var(--bs-border-radius-sm);

    --nav-item-px: 2rem;
    --nav-item-py: 0.625rem;
    --nav-item-color: var(--bs-body-color);
    --nav-item-hover-color: var(--bs-primary);
    --nav-item-active-color: var(--bs-primary);
    --nav-item-fs: 1rem;
    --nav-item-fw: 400;

    display: flex;
    flex-direction: column;
    background-color: var(--bs-body-bg);
    border: var(--nav-border-width) solid var(--nav-border-color);
    border-radius: var(--nav-border-radius);
    overflow: hidden;
}
.nav-aside .nav-item{
    display: flex;
    align-items: center;
    border-bottom: var(--nav-border-width) solid var(--nav-border-color);
    padding: var(--nav-item-py) var(--nav-item-px);
    position: relative;

    color: var(--nav-item-color);
    font-size: var(--nav-item-fs);
    font-weight: var(--nav-item-fw);

    transition: color 0.15s ease-in-out;
}
.nav-aside .nav-item:last-child{
    --nav-border-width: 0;
}
.nav-aside .nav-item:hover,
.nav-aside .nav-item.active{
    color: var(--nav-item-hover-color);
}
.nav-aside .nav-item.active{
    --nav-item-fw: bold;
}
.nav-aside .nav-item.active::before{
    content: "";
    height: 100%;
    border-left: 0.25rem solid var(--nav-item-hover-color);
    position: absolute;
    top: 0;
    left: 0;
}

@media (min-width: 992px) {
    .col-aside{
        width: 30%;
        max-width: calc(314px + var(--bs-gutter-x));
    }

    .col-aside .btn-hamburger{
        display: none !important;
    }
}
@media (max-width: 991px) {
    .nav-aside-wrap{
        position: relative;
        z-index: 5;
    }
    .col-aside .nav-aside{
        width: 100%;
        max-width: 314px;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
        position: absolute;
        top: 0.25rem;
        left: 0;
        z-index: 5;

        transition: all 0.15s ease-in-out;
    }
    .col-aside .nav-aside:not(.show){
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
}
/* ---------- /aside ---------- */


/* ---------- footer ---------- */
.app-footer{
    flex-shrink: 0;
    width: 100%;
    background-color: var(--bs-primary);
    border-top-left-radius: var(--bs-border-radius-xl);
    border-top-right-radius: var(--bs-border-radius-xl);
    overflow: hidden;
    position: relative;
    z-index: 10;

    color: #EFE6DA;
    font-size: 1rem;
}
.app-footer .container {
    max-width: var(--app-header-box-width);
}

.app-footer a{
    color: inherit;
}
.app-footer a:hover{
    text-decoration: underline;
}

.app-footer > .container{
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.app-footer .foo-links{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.app-footer .bottom-bar{
    background-color: #000;
    padding: 0.875rem 0;

    color: #fff;
    font-size: 14px;
    text-align: center;
}
.app-footer .createdby{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
}
.app-footer .createdby img{
    display: block;
    height: 1rem;
}

@media (max-width: 575px) {
    .app-footer{
        text-align: center;
    }
    .app-footer > .container{
        padding-top: 3rem;
        padding-bottom: 2.75rem;
    }
    .app-footer .foo-links{
        gap: 0.75rem;
        padding-top: 1rem;
    }
}
/* ---------- /footer ---------- */



/* ==================== 4. components ==================== */


/* ----------- hamburger ----------- */
.btn-hamburger{
    --padding: 0.25rem;
    --icon-size: 1.5rem;

    flex-shrink: 0;
    background-color: transparent;
    border: 0;
    padding: var(--padding);
}
.hamburger{
    width: var(--icon-size);
    height: auto;
}
.hamburger > *{
    transition: transform 0.15s ease-in-out,width 0.15s ease-in-out;
}
.hamburger.is-active > *:nth-child(1),
.is-active .hamburger > *:nth-child(1),
.nav-is-open .hamburger > *:nth-child(1){
    transform: rotate(45deg) translate(7px, -7px);
}
.hamburger.is-active > *:nth-child(2),
.is-active .hamburger > *:nth-child(2),
.nav-is-open .hamburger > *:nth-child(2){
    width: 0;
}
.hamburger.is-active > *:nth-child(3),
.is-active .hamburger > *:nth-child(3),
.nav-is-open .hamburger > *:nth-child(3){
    transform: rotate(-45deg) translate(-17px, -2px);
}
/* ----------- /hamburger ----------- */


/* ---------- title,text ---------- */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.title {
    display: block;
    color: var(--bs-body-color);
    /*font-weight: 600;*/
}
.title *{
    font-weight: inherit;
    line-height: inherit;
}

.title:not(.slide-title):not(.full-featured) *:not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6):not([class*="display-"]) {
    font-size: inherit;
}

.title a{
    color: inherit;
}


.display-title{
    font-family: var(--font-family-caps);
    font-weight: normal;
    line-height: 1;
}


h1{
    font-size: var(--fs-h1);
}
h2{
    font-size: var(--fs-h2);
}
h3{
    font-size: var(--fs-h3);
}
h4{
    font-size: var(--fs-h4);
}
h5{
    font-size: var(--fs-h5);
}
h6{
    font-size: var(--fs-h6);
}

.h1{font-size: var(--fs-h1) !important;}
.h2{font-size: var(--fs-h2) !important;}
.h3{font-size: var(--fs-h3) !important;}
.h4{font-size: var(--fs-h4) !important;}
.h5{font-size: var(--fs-h5) !important;}
.h6{font-size: var(--fs-h6) !important;}

.display-1{font-size: var(--display-1) !important; line-height: 0.8;}
.display-2{font-size: var(--display-2) !important;}
.display-3{font-size: var(--display-3) !important;}
.display-4{font-size: var(--display-4) !important;}
.display-5{font-size: var(--display-5) !important;}
.display-6{font-size: var(--display-6) !important;}

.text,
.text-wrap{
    color: var(--bs-body-color);
    font-size: var(--fs-text);
    font-weight: 400;
}

.fs-1{
    font-size: var(--fs-text1) !important;
}
.fs-2{
    font-size: var(--fs-text2) !important;
}
.fs-3{
    font-size: var(--fs-text3) !important;
}
.fs-4{
    font-size: var(--fs-text4) !important;
}
.fs-5{
    font-size: var(--fs-text5) !important;
}
.fs-6{
    font-size: var(--fs-text6) !important;
}

.text-wrap:before,
.text-wrap:after {
    display: table;
    content: " ";
}
.text-wrap:after{
    clear:both;
}

.text-wrap > *{margin-bottom:20px;}
.text-wrap > *:last-child{margin-bottom:0;}
.text-wrap ul,.text-wrap ol{padding-left:1.125rem;}
.text-wrap li + li,.text-wrap li ul,.text-wrap li ol{margin-top:0.125rem;}

.text-wrap img{
    max-width: 100%;
    height: auto;
    border-radius: 15px;
    margin-bottom: 5px;
}
.text-wrap img[style*="float: left"]{
    margin-right: 15px;
}
.text-wrap img[style*="float: right"]{
    margin-left: 15px;
}

.text-wrap hr{
    margin: 35px 0;
}
.text-wrap hr + img,
.text-wrap hr + * img{
    margin-top: 8px;
}

.text-wrap a:not(.btn){
    --bs-link-decoration: underline;
    --bs-link-hover-decoration: none;
}
.link{
    --bs-link-decoration: none;
    --bs-link-hover-decoration: underline;
}
.link,
.text-wrap a:not(.btn){
    text-decoration: var(--bs-link-decoration);
}
.link:hover,
.text-wrap a:not(.btn):hover{
    text-decoration: var(--bs-link-hover-decoration);
}

button.link{
    background: none;
    border: 0;
    padding: 0;
}

.text-wrap audio,
.text-wrap video{
    display: block;
    width: 100%;
    outline: none;
}
.text-wrap video{
    height: auto;
}

.text-wrap iframe{
    display: block;
    max-width: 100%;
}

.text-wrap table {
    width: 100%;
    border: 1px solid #dee2e6;
    color: inherit;
}
.text-wrap table th,
.text-wrap table td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    vertical-align: top;
}
.text-wrap table thead th {
    border-bottom: 2px solid #dee2e6;
    vertical-align: bottom;
}
.text-wrap table tbody + tbody {
    border-top: 2px solid #dee2e6;
}

.text-wrap .table-plain {
    border: 0;
}
.text-wrap .table-plain th,
.text-wrap .table-plain td {
    border: 0;
    border-top: 1px solid #dee2e6;
}
/* ---------- /title,text ---------- */


/* ---------- buttons ---------- */
.btn{
    --bs-btn-padding-x: 1.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: var(--font-family);
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 700;
    --bs-btn-line-height: 1.5;
    --bs-btn-border-radius: calc(var(--btn-size) / 2);
    --bs-btn-box-shadow: none;
    --bs-btn-disabled-opacity: 1;
    --bs-btn-active-border-color: transparent;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-color: var(--bs-body-color);

    --btn-size: var(--element-size-3);
    --icon-size: 1.5rem;
    --btn-gap: 0.625rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    min-width: var(--btn-size);
    min-height: var(--btn-size);
}

.btn-xs{
    --bs-btn-padding-x: 1rem;
    --btn-size: var(--element-size-1);
    --bs-btn-font-size: 14px;
}
.btn-sm{
	--bs-btn-padding-x: 1.25rem;
	--btn-size: var(--element-size-2);
}
.btn-lg{
    --btn-size: var(--element-size-4);
}
.btn-xl{
    --bs-btn-padding-x: 2rem;
    --btn-size: var(--element-size-5);
}

.btn img,
.btn svg{
    flex-shrink: 0;
    width: var(--icon-size);
    height: auto;
}

/* primary */
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--btn-primary);
	--bs-btn-border-color: var(--btn-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--btn-primary-hover);
	--bs-btn-hover-border-color: var(--btn-primary-hover);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--btn-primary-active);
	--bs-btn-active-border-color: var(--btn-primary-active);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-secondary);
	--bs-btn-disabled-border-color: var(--bs-secondary);
}


/* is loading */
.btn.is-loading{
    background-image: url("../../images/icons/spinner_white.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px 28px;
    pointer-events: none;
}
.btn.is-loading > *{
    opacity: 0;
}


@media (min-width: 992px) {
    /* btn-animated */
    .btn.btn-animated{
        align-items: stretch;
        justify-content: flex-start;
        background: none !important;
        border: none !important;
        padding: 0 !important;
    }
    .btn.btn-animated.btn-lg{
        --bs-btn-padding-x: 1.875rem;
        --icon-size: 2.25rem;
    }

    .btn-animated > *{
        display: flex;
        align-items: center;
        min-width: var(--btn-size);
        height: var(--btn-size);
    }
    .btn-animated > span::before,
    .btn-animated > i{
        background-color: var(--bs-btn-bg);
        border-radius: var(--bs-btn-border-radius);
    }

    .btn-animated > span{
        padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
        position: relative;
        z-index: 1;

        color: var(--bs-btn-color);
        text-align: left;
    }
    .btn-animated > span::before{
        content: "";
        width: 100%;
        height: 100%;

        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;

        transition: width 0.4s cubic-bezier(0.25, 0.7, 0.25, 1.5);
    }

    .btn-animated > i{
        justify-content: center;
        position: relative;
        z-index: 2;
    }
    .btn-animated > i img{
        width: var(--icon-size);
        transform: rotate(-45deg);

        transition: transform 0.4s cubic-bezier(0.25, 0.7, 0.25, 1.5);
    }

    .btn-animated:hover > span::before{
        width: calc(100% + var(--btn-size) + var(--btn-gap));
    }
    .btn-animated:hover > i img{
        transform: rotate(0deg);
    }
}
@media (max-width: 991px) {
    /* btn-animated */
    .btn-animated > i{
        display: none;
    }
}
/* ---------- /buttons ---------- */


/* ---------- pagination ---------- */
.pagination{
    --bs-pagination-padding-x: 0.25rem;
    --bs-pagination-padding-y: 0.25rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 0;
    --bs-pagination-border-color: transparent;
    --bs-pagination-border-radius: 50%;
    --bs-pagination-hover-color: var(--btn-primary);
    --bs-pagination-hover-bg: transparent;
    --bs-pagination-hover-border-color: transparent;
    --bs-pagination-focus-color: var(--bs-body-color);
    --bs-pagination-focus-bg: transparent;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--btn-primary);
    --bs-pagination-active-border-color: var(--btn-primary);

    --pagination-item-size: 1.5rem;
    --pagination-icon-size: 1.125rem;

    justify-content: center;
    gap: 0.5rem;
}
.pagination .page-item{
    flex-shrink: 0;
}
.pagination .page-link{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-item-size);
    height: var(--pagination-item-size);
    border-radius: var(--bs-pagination-border-radius);
    font-weight: bold;
}
.pagination .page-link.active:focus{
    color: var(--bs-pagination-active-color);
}
.pagination img,
.pagination svg{
    width: var(--pagination-icon-size);
    height: auto;
}
/* ---------- /pagination ---------- */


/* ---------- badge ---------- */
.badge{
    --bs-badge-padding-x: 0.75rem;
    --bs-badge-padding-y: 0.5rem;
    --bs-badge-font-size: 0.75rem;
    --bs-badge-font-weight: 400;
    --bs-badge-color: #fff;
    --bs-badge-border-radius: 5px;
}
/* ---------- /badge ---------- */


/* ---------- form ---------- */
.form-group{
    margin-bottom: 0.75rem;
}

.form-label{
    margin-bottom: 0.375rem;

    color: var(--bs-body-color);
    font-size: 0.875rem;
}

.form-control,
.form-select{
    min-height: var(--form-control-height);
    padding: var(--form-control-py) var(--form-control-px);

    font-size: var(--form-control-fs);
    font-weight: var(--form-control-fw);
}
.form-control,
.form-select,
.form-control:focus,
.form-select:focus{
    background-color: var(--form-control-bg);
    border-color: var(--form-control-border-color);
    box-shadow: none;

    color: var(--form-control-color);
}

.form-select{
    /*--color: #f00;*/
    /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");*/
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-control::placeholder{
    color: var(--form-control-placeholder-color);
}

.form-control[readonly],
.form-select[readonly]{
    color: var(--form-control-placeholder-color);
}

.date-input{
    --form-control-color: var(--bs-primary);
    --form-control-fw: bold;

    background-image: url(../../images/icons/calendar_primary.svg);
    background-position: 0.625rem center;
    background-repeat: no-repeat;
    background-size: 1.5rem auto;
    padding-left: 2.75rem;
}


/* checkbox, radio */
.form-check{
    display: inline-flex;
    align-items: flex-start;
    gap: 2px;
    padding: 0;
}
.form-check .form-check-input{
    margin-left: 0;
}

.form-check-input{
    --form-check-width: 1.125rem;
    --form-check-outer-width: 2.5rem;
    --form-check-bg-color: transparent;
    --form-check-outer-bg: transparent;
    --form-check-border-color: var(--bs-secondary);
    --form-check-box-shadow: none;

    width: var(--form-check-width);
    height: var(--form-check-width);
    background-color: var(--form-check-bg-color) !important;
    background-image: url(../../images/icons/tick_white.svg);
    background-position: -50px center;
    background-size: 16px auto;
    border: 2px solid var(--form-check-border-color) !important;
    border-radius: 2px;
    box-shadow: var(--form-check-box-shadow) !important;
    margin: calc((var(--form-check-outer-width) - var(--form-check-width))/2);
    position: relative;
    z-index: 1;
}
.form-check-input::before{
    content: "";
    width: var(--form-check-outer-width);
    height: var(--form-check-outer-width);
    background-color: var(--form-check-outer-bg);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.form-check-input:hover{
    --form-check-outer-bg: rgba(29,27,38,0.08);
    --form-check-border-color: rgba(29,27,38,1);
}
.form-check-input:active{
    --form-check-outer-bg: rgba(29,27,38,0.15);
    /*--form-check-border-color: rgba(29,27,38,1);*/
}
.form-check-input:checked{
    --form-check-bg-color: var(--form-check-border-color);
    background-position: center;
}

.form-check .form-check-label{
    align-self: center;
    color: var(--bs-secondary);
    font-size: 14px;
}

.form-check a{
    color: var(--bs-primary);
}
.form-check a:hover{
    text-decoration: underline;
}


/* form check btn group */
.form-check-btn-group{
    --padding: 0.375rem;

    display: flex;
    gap: 0.5rem;
    background-color: var(--bs-light-bg-subtle);
    border-radius: var(--bs-border-radius-3xl);
    padding: var(--padding);
}
.form-check-btn-group label{
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    border-radius: var(--bs-border-radius-3xl);
    position: relative;
    z-index: 1;

    color: var(--bs-body-color);
    font-size: 0.875rem;
    font-weight: bold;
    cursor: pointer;
}
.form-check-btn-group input{
    position: absolute;
    visibility: hidden;
}
.form-check-btn-group label > span{
    color: inherit;
    transition: color 0.15s ease-in-out;
}
.form-check-btn-group label > span::before{
    content: "";
    width: 100%;
    height: 100%;
    background-color: transparent;
    border-radius: var(--bs-border-radius-3xl);

    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    transition: background-color 0.15s ease-in-out;
}
.form-check-btn-group label > input:checked ~ span{
    color: #fff;
}
.form-check-btn-group label > input:checked ~ span::before{
    background-color: var(--bs-success);
}
@media (min-width: 768px) {
    .form-check-btn-group{
        gap: 1rem;
    }
    .form-check-btn-group label{
        font-size: 1rem;
    }
}


/* form controls with icon-btn */
.input-with-icon-btn{
    position: relative;
}
.input-with-icon-btn .form-control{
    padding-right: 40px;
}
.input-with-icon-btn .btn{
    min-width: 40px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

/* form container */
.form-container .row{
    --bs-gutter-y: 1.25rem;
}
.form-container .form-group{
    margin-bottom: 1.25rem;
}
.form-container .form-group:last-child,
.form-container .form-check:last-child{
    margin-bottom: 0;
}
.form-container hr{
    margin: 1.75rem 0;
}

.form-container .form-control,
.form-container .form-select{
    --form-control-height: var(--element-size-2)
}

@media (min-width: 992px) {
    .form-container{
        margin-bottom: 1rem;
    }
    .form-container .row{
        --bs-gutter-x: 2rem;
    }
}
@media (min-width: 1200px) {
    .form-container .row{
        --bs-gutter-x: 3rem;
    }
}


/* error */
.error-text,
.global-error-text,
.invalid-feedback{
    color: var(--bs-form-invalid-color);
    font-size: 12px;
    line-height: 1.25;
}

.error-text {
    display: none;
}
.global-error-text {
    display: block;
    margin-bottom: 1.25rem;
    text-align: center;
}

.has-error .form-control:not(:focus),
.has-error .form-select:not(:focus){
    border-color: var(--bs-form-invalid-border-color);
}
.has-error .error-text,
.has-error .invalid-feedback{
    display: block;
}

.form-control.is-invalid,
.form-select.is-invalid{
    background-image: none;
    box-shadow: none !important;
}
/* ---------- /form ---------- */


/* ---------- calendar ---------- */
body .air-datepicker{
    --adp-width: calc(280px + var(--adp-padding) * 2);
    --adp-z-index: 999;
    --adp-padding: 0.5rem;
    --adp-font-family: var(--bs-font-sans-serif);
    --adp-font-size: 1rem;

    --adp-background-color-hover: #F0F2FF;
    --adp-background-color-active: var(--adp-background-color-hover);

    --adp-color: var(--bs-body-color);
    --adp-color-current-date: var(--bs-primary);
    --adp-color-other-month: #B3B3B3;
    --adp-color-other-month-hover: var(--bs-light-text-emphasis);


    --adp-nav-color-secondary: var(--adp-color);
    --adp-nav-height: auto;
    --adp-nav-arrow-color: var(--adp-color);
    --adp-nav-action-size: 32px;

    --adp-day-name-color: #757575;
    --adp-day-cell-height: 2.5rem;

    --adp-cell-border-radius: 0.5rem;
    --adp-cell-background-color-hover: var(--adp-background-color-hover);
    --adp-cell-background-color-selected: var(--bs-primary);
    --adp-cell-background-color-selected-hover: var(--bs-primary-bg-subtle);
}

.air-datepicker .air-datepicker-cell{
    margin: 1px;
}
.air-datepicker .air-datepicker-nav{
    border: none;
    padding-bottom: 0;
}
.air-datepicker .air-datepicker-body--day-names{
    margin: 0 0 0.625rem;
}
.air-datepicker .air-datepicker-body--day-name{
    font-size: 12px;
}
/* ---------- /calendar ---------- */


/* ---------- bg-img ---------- */
.bg-img{
    display: block;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 1;
}
.bg-img:not(.ratio)::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.bg-img--cover{
    background-size: cover;
}
.bg-img--contain{
    background-size: contain;
}
.bg-img.fit-container{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/* ---------- /bg-img ---------- */


/* ---------- ratio, fit ---------- */
.ratio{
    overflow: hidden;
}
.ratio img,
.ratio video,
.object-fit-cover{
    object-fit: cover;
}
.object-fit-contain{
    object-fit: contain;
}
/* ---------- /ratio, fit ---------- */


/* ---------- dropdown ---------- */
.btn[data-bs-toggle="dropdown"] .i-chevron{
    width: 1rem;
}

.dropdown-menu{
    --bs-dropdown-spacer: 0;
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-color: #fff;
    --bs-dropdown-border-radius: 1.5rem;
    --bs-dropdown-box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
    --bs-dropdown-padding-x: 0;
    --bs-dropdown-padding-y: 1.25rem;

    --bs-dropdown-item-border-radius: 0;
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: #D9DCFF;
    --bs-dropdown-link-active-color: var(--bs-body-color);
    --bs-dropdown-link-active-bg: #D9DCFF;
    --bs-dropdown-item-padding-x: 1.25rem;
    --bs-dropdown-item-padding-y: 0.375rem;
    --bs-dropdown-font-size: 1rem;

    box-shadow: var(--bs-dropdown-box-shadow);
}
.dropdown-menu ul{
    list-style: none;
}
.dropdown-item{
    display: flex;
    align-items: center;
    gap: 0.75rem;

    white-space: normal;
    line-height: 1.25;

    transition: color 0.15s ease-in-out,background-color 0.15s ease-in-out;
}
/* ---------- /dropdown ---------- */


/* ---------- separator ---------- */
hr{
    width: 100%;
    border-top-color: #E5E5E5;
    opacity: 1;
    margin: 1.5rem 0;
}
/* ---------- /separator ---------- */


/* ---------- slider ---------- */
.swiper:not(.swiper-initialized){
    opacity: 0;
}

.swiper .swiper-slide{
    display: flex;
    flex-direction: column;
    height: auto;
}

.swiper.swiper-horizontal>.swiper-pagination-bullets{
    --swiper-pagination-bullet-width: 0.75rem;
    --swiper-pagination-bullet-height: 0.75rem;
    --swiper-pagination-bullet-horizontal-gap: 0.5rem;
    --swiper-pagination-color: #D9D9D9;
    --swiper-pagination-bullet-inactive-color: trasparent;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-border-radius: 50%;
    --swiper-pagination-bottom: calc(1.25rem + var(--section-overlap-size,0));

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--swiper-pagination-bullet-horizontal-gap);
}
.swiper .swiper-pagination-bullet{
    border: 1px solid var(--swiper-pagination-color);
    margin: 0 !important;
}

@media (min-width: 768px) {
    .swiper.swiper-horizontal>.swiper-pagination-bullets{
        --swiper-pagination-bullet-width: 1rem;
        --swiper-pagination-bullet-height: 1rem;
        --swiper-pagination-bullet-horizontal-gap: 0.625rem;
        --swiper-pagination-bottom: calc(1.75rem + var(--section-overlap-size,0));
    }
}
/* ---------- /slider ---------- */


/* ---------- card ---------- */
.card{
    --bs-card-border-radius: var(--bs-border-radius-sm);
    --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-border-width));

    --bs-card-cap-padding-x: var(--bs-card-spacer-y);
    --bs-card-cap-padding-y: var(--bs-card-spacer-x);
    --bs-card-box-shadow: none;

    box-shadow: var(--bs-card-box-shadow);
}
.card.bg-light-subtle{
    --bs-card-border-color: var(--bs-light-bg-subtle);
}

@media (min-width: 768px) {
    .card{
        --bs-card-spacer-y: 1.25rem;
        --bs-card-spacer-x: 1.25rem;
    }
    .card-p-lg{
        --bs-card-spacer-y: 2.25rem;
        --bs-card-spacer-x: 2.25rem;
    }
}
/* ---------- /card ---------- */


/* ---------- tabs ---------- */
.nav-tabs{
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--bs-heading-color);
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;

    --bs-nav-link-color: var(--bs-heading-color);
    --bs-nav-link-padding-x: 1.5rem;
    --bs-nav-link-padding-y: 0.75rem;
    --bs-nav-link-font-size: 1rem;
    --bs-nav-link-font-weight: 400;
}
/* ---------- /tabs ---------- */


/* ---------- accordion ---------- */
.accordion-item{
    --spacing-x: 0.5rem;
    --spacing-y: 0.75rem;
    --i-toggle-width: 1.5rem;

    border-bottom: 2px solid var(--bs-primary);
    color: var(--bs-primary);
}

.accordion-item-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-x);
    padding: var(--spacing-y) var(--spacing-x);
    cursor: pointer;
    transition: padding 0.2s ease-in-out;
}
.accordion-item-head .i-toggle{
    flex-shrink: 0;
    width: var(--i-toggle-width);
    height: auto;
    transition: transform 0.2s ease-in-out;
}

.accordion-item-head .title{
    padding-top: 0.25rem;
    color: inherit;
    font-size: 1.5rem;
}

.accordion-item-body{
    padding: 0 calc(var(--spacing-x) * 2 + var(--i-toggle-width)) 0 var(--spacing-x);
}
.accordion-item-body .text-wrap{
    margin-bottom: 1.5rem;

    color: inherit;
    font-size: 1rem;
}

.accordion-is-open .accordion-item-head{
    padding-bottom: 1.125rem;
}
.accordion-is-open .i-toggle{
    transform: rotate(-45deg);
}

/* --- accordion with img --- */
.accordion-with-img .col-img{
    --bs-aspect-ratio: 128%;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.accordion-with-img .col-img > figure{
    width: 100%;
    border-radius: var(--bs-border-radius-xl);
}
.accordion-with-img .col-img img{
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.accordion-with-img .col-img img.show{
    opacity: 1;
}

.accordion-with-img .col-info{
    flex-grow: 1;
    border-left: 2px solid var(--bs-primary);
    padding: 1.75rem 0 1rem 0.5rem;
}
.accordion-with-img .col-info .accordion-item:first-child{
    border-top: 2px solid var(--bs-primary);
}

@media (min-width: 768px) {
    /* --- accordion with img --- */
    .accordion-with-img{
        display: flex;
    }
    .accordion-with-img .col-img {
        flex-shrink: 0;
        width: 32%;
        padding-right: 1rem;
    }
}
@media (min-width: 992px) {
    .accordion-item{
        --spacing-x: 1.375rem;
        --spacing-y: 1.875rem;
        --i-toggle-width: 2.25rem;
    }

    .accordion-item-head .title{
        padding-top: 0.25rem;
        font-size: 1.75rem;
    }
    .accordion-item-body .text-wrap{
        max-width: 420px;
        margin-left: auto;

        font-size: 1.125rem;
    }

    /* --- accordion with img --- */
    .accordion-with-img .col-img {
        width: 42%;
        max-width: 542px;
        padding-right: 1rem;
    }
    .accordion-with-img .col-img > figure{
        max-width: 314px;
    }

    .accordion-with-img .col-info{
        padding: 2rem 0 1rem 1.375rem;
    }
}

@media (max-width: 991px) {

    /* --- accordion with img --- */
    .accordion-with-img .col-img{
        margin-bottom: 2rem;
    }
}
/* ---------- /accordion ---------- */


/* ---------- modal ---------- */
.modal-backdrop{
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.68;
}
.modal{
    --bs-modal-bg: #fff;
    --bs-modal-border-color: #fff;
    --bs-modal-border-radius: var(--bs-border-radius-xl);
    --bs-modal-box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
    --bs-modal-padding: var(--modal-padding-y) var(--modal-padding-x);
    --bs-modal-header-padding-x: var(--modal-padding-x);
    --bs-modal-header-padding-y: 1.25rem;
    --bs-modal-header-padding: var(--bs-modal-header-padding-y) var(--bs-modal-header-padding-x);

    --modal-padding-x: 1.5rem;
    --modal-padding-y: 1.5rem;

    --modal-close-btn-size: 1.5rem;
    --modal-close-btn-mb: 0.75rem;
    --modal-additional-spacing-top: 0px;
    --modal-header-height: 0px;

    padding: var(--modal-additional-spacing-top) 0.625rem 0;
}
.modal-dialog{
    --bs-modal-width: 522px;
    height: calc(100% - var(--bs-modal-margin) * 2);
    margin-left: auto;
    margin-right: auto;
}

.modal-sm{
	--bs-modal-width: 372px;
}
.modal-lg{
    --bs-modal-width: 896px;
}
.modal-xl{
    --bs-modal-width: 1200px;
}

.modal-content{
    box-shadow: var(--bs-modal-box-shadow);
}

.modal-title{
    font-size: 1.25rem;
    font-weight: bold;
}

.modal-body .modal-title{
    margin-bottom: 1.25rem;
}

.modal-btn-close{
    display: flex;
    width: var(--modal-close-btn-size);
    background-color: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
    padding: 0;
}
.modal-btn-close > img{
    width: 100%;
    max-width: var(--modal-close-btn-size);
    height: auto;
}
.modal-content > .modal-btn-close{
    position: absolute;
    z-index: 2;
}

.modal-body{
    --scrollbar-top: 1.5rem;
    --scrollbar-bottom: 1.5rem;

    max-height: calc(100vh - var(--bs-modal-margin) * 2 - var(--modal-additional-spacing-top) - var(--modal-header-height));
}
.modal-header + .modal-body{
    --scrollbar-top: 0;
    padding-top: 0;
}
.modal-body.scrollable-container{
    border-radius: var(--bs-modal-border-radius);
}
.modal-header + .modal-body.scrollable-container{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* msg */
.msg-modal .modal-content{
    min-height: 460px;
}
.msg-modal .modal-body{
    display: flex;
    flex-direction: column;
}

@media (min-width: 576px) {
    .modal{
        padding-left: var(--app-content-px);
        padding-right: var(--app-content-px);
    }
    .modal-dialog:not(.modal-lg) .modal-content > .modal-btn-close{
        bottom: calc(100% - 0.25rem);
        left: calc(100% - 0.25rem);
    }
}
@media (min-width: 992px) {
    .modal-lg .modal-content > .modal-btn-close{
        bottom: calc(100% - 0.25rem);
        left: calc(100% - 0.25rem);
    }
}

@media (max-width: 991px) {
    .modal{
        --modal-additional-spacing-top: calc(var(--modal-close-btn-size) + var(--modal-close-btn-mb));
    }
    .modal-lg .modal-content > .modal-btn-close{
        bottom: calc(100% + var(--modal-close-btn-mb));
        right: -0.25rem;
    }
}
@media (max-width: 575px) {
    .modal-content > .modal-btn-close{
        bottom: calc(100% + var(--modal-close-btn-mb));
        right: -0.25rem;
    }
}
/* ---------- /modal ---------- */


/* ---------- auth modal ---------- */
.auth-modal ~ .modal-backdrop{
    --bs-backdrop-bg: var(--bs-dark);
    --bs-backdrop-opacity: 0.65;
}
.auth-modal{
    --bs-modal-border-color: #fff;
    --bs-modal-border-radius: var(--bs-border-radius-3xl);
    --modal-padding-x: 1rem;
    --modal-padding-y: 1.25rem;
}

.auth-modal .modal-header{
    --bs-modal-header-border-width: 0;

    flex-wrap: wrap;
}

.auth-modal .modal-body{
    --scrollbar-top: 2.5rem;
    --scrollbar-bottom: 2.5rem;

    padding-bottom: calc(var(--modal-padding-y) + 0.375rem);
    font-size: 1rem;
}
.auth-modal .modal-header + .modal-body{
    --scrollbar-top: 0;
    padding-top: 0;
}

.auth-modal .link{
    --bs-link-decoration: none;
    --bs-link-hover-decoration: underline;
}

.auth-modal hr{
    margin: 0.75rem 0;
}

/* --- progress --- */
.auth-modal .progress-wrap{
    display: flex;
    gap: 0.5rem;
    width: 100%;
}
.auth-modal .progress-wrap > *{
    width: 3.375rem;
    height: 6px;
    background-color: var(--bs-light-bg-subtle);
    border-radius: 3px;
}
.auth-modal[data-active-step="1"] .progress-wrap > *:nth-child(1),
.auth-modal[data-active-step="2"] .progress-wrap > *:nth-child(2),
.auth-modal[data-active-step="3"] .progress-wrap > *:nth-child(3){
    background-color: var(--bs-success);
}

/* --- form check group --- */
.auth-modal .form-check-btn-group{
    --item-max-width: 202px;

    justify-content: space-between;
    width: 100%;
    margin: 0.25rem 0 2rem;
}
.auth-modal .form-check-btn-group label{
    max-width: var(--item-max-width);
}
.auth-modal .form-check-btn-group label.active{
    pointer-events: none;
}
.auth-modal[data-active-step="2"] .form-check-btn-group,
.auth-modal[data-active-step="3"] .form-check-btn-group{
    max-width: calc(var(--padding) + var(--item-max-width));
}
.auth-modal[data-active-step="2"] .form-check-btn-group label:not(.active),
.auth-modal[data-active-step="3"] .form-check-btn-group label:not(.active){
    display: none;
}

.auth-modal .form-check .form-check-label{
    color: inherit;
}

/* --- msg --- */
.auth-modal.msg-modal .modal-body{
    height: 500px;
    max-height: calc(100vh - var(--app-header-height) - 20px);
}

@media (min-width: 575px) {
    /* --- progress --- */
    .auth-modal .progress-wrap{
        width: auto;
        margin-left: auto;
    }
}
@media (min-width: 768px) {
    .auth-modal {
        --modal-padding-x: 1.75rem;
    }
}
@media (min-width: 1200px) {
    .btn-auth.active{
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--bs-tertiary-color);
        --bs-btn-active-border-color: var(--bs-tertiary-color);
    }

    .auth-modal ~ .modal-backdrop{
        z-index: 340;
    }
    .auth-modal{
        height: calc(100vh - var(--app-header-height));
        top: var(--app-header-height);
    }
    .auth-modal .modal-dialog{
        --bs-modal-width: var(--app-header-box-width);
        --bs-modal-margin: 0;

        height: calc(100% - 0.5rem);
    }
    .auth-modal .modal-content{
        max-width: 522px;
        max-height: calc(100vh - var(--app-header-height) - 0.75rem);
        margin-left: auto;
    }

    .auth-modal .modal-btn-close{
        display: none !important;
    }
}
@media (max-width: 1199px) {
    .auth-modal .modal-dialog{
        display: flex;
        align-items: center;
        height: calc(100% - var(--bs-modal-margin) * 2);
    }
    /*.auth-modal .modal-content{
        max-height: 100%;
    }*/
}
/* ---------- /auth modal ---------- */


/* ---------- comments modal ---------- */
.comments-modal{
    --modal-padding-x: 1rem;
    --modal-padding-y: 1rem;
    --bs-modal-border-color: var(--bs-border-color);
}

/* --- content --- */
.comments-modal .container{
    max-width: 314px;
    padding: 0 0 0.25rem;
}

.comments-modal .form-control{
    --form-control-bg: #fff;
    --form-control-border-color: var(--bs-border-color);
}

.comments-modal .card-comments{
    --bs-card-border-radius: 0.875rem;
}

/* --- items --- */
.comment-item{
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1.625rem;
}
.comment-item .item-wrap-with-icon{
    --gap: 0.75rem;
    --icon-wrap-size: 2.625rem;
    --color: var(--bs-body-color);
    --font-size: 1rem;

    font-weight: bold;
}
.comment-item .card{
    --bs-card-border-radius: 1.5rem;
    border-bottom-left-radius: 0;
}
.card-comments .scrollable-container{
    --scrollbar-top: var(--bs-card-spacer-y);
    --scrollbar-bottom: var(--bs-card-spacer-y);
}

@media (min-width: 768px) {
    .comments-modal{
        --modal-padding-x: 1.5rem;
        --modal-padding-y: 1.5rem;
    }

    /* --- scroll --- */
    .comments-modal .modal-body.scrollable-container{
        overflow: visible;
    }

    .comments-modal .modal-body .scrollable-container{
        max-height: calc(100vh - var(--bs-modal-margin) * 2 - var(--modal-padding-y) * 2);
    }
    .comments-modal .modal-body .os-scrollbar{
        --scrollbar-color: transparent;
        --scrollbar-handle-color: #C5C5C5;
    }

    .comments-modal .col-start .scrollable-container{
        padding-right: var(--modal-padding-x);
    }
}

@media (min-width: 768px) and (min-height: 710px) {
    /* --- scroll --- */
    .comments-modal .modal-body .scrollable-container{
        max-height: 606px;
    }
}

@media (max-width: 768px) {
    .comments-modal .modal-body .scrollable-container{
        overflow: visible;
    }

    .comments-modal .card-comments{
        margin: 0 calc(var(--bs-card-spacer-x) * -1) calc(var(--bs-card-spacer-y) * -1);
    }

    .comment-item .card{
        --bs-card-spacer-y: 1.25rem;
        --bs-card-spacer-x: 1.5rem;
    }
}
/* ---------- /comments modal ---------- */


/* ---------- main slider ---------- */
.swiper.main-slider{
    --info-wrap-py: 5rem;

    width: 100%;
}
.main-slider .swiper-slide{
    min-height: 520px;
}

.main-slider .img-wrap::after{
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(var(--bs-primary-rgb),.14);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.main-slider .info-wrap{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 100%;
    padding-top: calc(var(--app-header-height) - var(--app-header-spacing-y) + var(--info-wrap-py));
    padding-bottom: calc(var(--section-overlap-size) + 3.5rem);
    position: relative;
    z-index: 2;
}
.main-slider .info-wrap > .container{
    margin-top: auto;
}
.main-slider .info-wrap .slide-title{
    color: #FFF9F2;
    font-size: 2.375rem;
    line-height: 1;
}
.main-slider .info-wrap .btn{
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .main-slider .info-wrap .slide-title{
        font-size: var(--display-3);
        line-height: 0.865;
    }
}
@media (min-width: 992px) {
    .swiper.main-slider{
        --bs-aspect-ratio: 60%;
    }
    .main-slider .info-wrap{
        padding-bottom: calc(var(--section-overlap-size) + var(--info-wrap-py));
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .main-slider .info-wrap > .container{
        display: flex;
        align-items: flex-end;
    }
    .main-slider .info-wrap .slide-title{
        flex-grow: 1;
        max-width: 720px;
        margin: 0 auto;
    }
}
@media (min-width: 1600px) {
    .swiper.main-slider {
        --bs-aspect-ratio: 1000px;
    }
}

@media (max-width: 991px) {
    .main-slider .img-wrap{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .main-slider .info-wrap > .container{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
}
/* ---------- /main slider ---------- */


/* ---------- statistics ---------- */
.stats-item{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-left: 2px solid var(--bs-primary);
    padding: 0.75rem 0 0.625rem 1.125rem;

    color: var(--bs-primary);
    font-family: var(--font-family-caps);
    font-weight: normal;
}
.stats-item .value{
    font-size: var(--display-2);
    line-height: 0.95;
}
.stats-item .name{
    border-top: 2px solid var(--bs-primary);
    padding: 1rem 1.25rem 0 0;

    font-size: 1rem;
    line-height: 1;
}

.stats-wrap .row{
    --bs-gutter-x: 2rem;
}

@media (min-width: 400px) {
    .stats-wrap .row{
        --bs-gutter-x: clamp(3rem, -3.462rem + 17.949vw, 10rem);
    }
}
@media (min-width: 768px) {
    .stats-item .value{
        font-size: var(--display-2);
    }
    .stats-item .name{
        font-size: var(--display-6);
    }
}
/* ---------- /statistics ---------- */


/* ---------- item with icon ---------- */
.item-with-icon{
    --gap: 0.5rem;
    --icon-size: 1.5rem;
    --font-size: 1rem;

    display: inline-flex;
    align-items: center;
    gap: var(--gap);

    font-size: var(--font-size);
}
.item-wrap-with-icon > img,
.item-wrap-with-icon > svg{
    flex-shrink: 0;
    width: var(--icon-size);
    height: auto;
}

/* --- wrap --- */
.item-wrap-with-icon{
    --gap: 1rem;
    --icon-wrap-size: 3rem;
    --color: var(--bs-secondary);
    --font-size: 14px;

    display: flex;
    align-items: center;
    gap: var(--gap);

    color: var(--color);
    font-size: var(--font-size);
}
.item-wrap-with-icon > i{
    flex-shrink: 0;
    width: var(--icon-wrap-size);
    border-radius: 50%;
}
.item-wrap-with-icon > i img{
    object-fit: contain;
}

@media (min-width: 576px) {
    .item-wrap-with-icon{
        --gap: 1.25rem;
        --icon-wrap-size: 4rem;
        }
}
/* ---------- /item with icon ---------- */


/* ---------- item 2col with img ---------- */
.item-2col-with-img{
    padding: 4rem 0;
}
.item-2col-with-img .img-wrap{
    --bs-aspect-ratio: 72.395%;

    border-radius: var(--bs-border-radius-xl);
    z-index: 1;
}
.item-2col-with-img .img-wrap::before{
    background: #000000;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0.45) 0%, rgba(41, 41, 41, 0.45) 39%, rgba(0, 0, 0, 0) 100%);
    position: relative;
    z-index: 1;
}

.item-2col-with-img .col-img .overlay,
.item-2col-with-img .col-img .overlay::before{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.item-2col-with-img .col-img .text{
    color: #fff;
    font-size: 1rem;
    font-weight: normal;
    padding: 1rem;
}

.item-2col-with-img .col-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.item-2col-with-img hr{
    border-top-width: 2px;
    margin: 1.75rem 0;
}

@media (min-width: 768px) {
    .item-2col-with-img .col-img .text{
        padding: 1.875rem;
    }
}
@media (min-width: 992px){
    .item-2col-with-img{
        padding: 6.5rem 0;
    }
    .item-2col-with-img .col-img .overlay::before{
        content: "";
        aspect-ratio: 1.381;
        clip-path: shape(from 99.06% 81.29%,curve to 100% 77.98% with 99.67% 80.39%/100% 79.21%,vline to 4.87%,curve to 96.47% 0% with 100% 2.18%/98.42% 0%,hline to 3.53%,curve to 0% 4.87% with 1.58% 0%/0% 2.18%,vline to 95.13%,curve to 3.53% 100% with 0% 97.82%/1.58% 100%,hline to 84.99%,curve to 87.58% 98.44% with 85.97% 100%/86.91% 99.43%,line to 99.06% 81.29%,close);
        background: var(--bs-primary);
        z-index: -1;
    }
    .item-2col-with-img .col-img .link-wrap{
        display: flex;
        align-items: self-end;
        gap: clamp(2.25rem, -1.776rem + 6.494vw, 3.5rem);
        position: absolute;
        bottom: 0;
        right: 0;

        color: #fff;
        font-size: clamp(0.75rem, -0.055rem + 1.299vw, 1rem);
        font-weight: bold;
    }
    .item-2col-with-img .col-img .link-wrap > span{
        margin-bottom: 0.875rem;
    }
    .item-2col-with-img .col-img .link-wrap > i{
        --size: clamp(1.75rem, -0.666rem + 3.896vw, 2.5rem);
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--size);
        height: var(--size);
        background-color: var(--bs-primary);
        border-radius: 50%;
    }
    .item-2col-with-img .col-img .link-wrap > i img{
        width: 80%;
    }

    .item-2col-with-img .img-wrap,
    .item-2col-with-img .col-img .overlay::before,
    .item-2col-with-img .col-img .overlay .link-wrap{
        transition: opacity 0.15s ease-in-out;
    }
    .item-2col-with-img .col-img:hover .img-wrap,
    .item-2col-with-img .col-img:not(:hover) .overlay::before,
    .item-2col-with-img .col-img:not(:hover) .overlay .link-wrap{
        opacity: 0;
    }
}
@media (min-width: 1200px){
    .item-2col-with-img .col-info{
        padding-top: 1.875rem;
    }
}

@media (max-width: 991px) {
    .item-2col-with-img .col-img .link-wrap{
        display: none !important;
    }
}
/* ---------- /item 2col with img ---------- */


/* ---------- projects ---------- */
.projects-list{
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
    max-width: 430px;
    margin: 0 auto;
}

.projects-list-item{
    --bs-card-spacer-y: 1.375rem;
    --bs-card-border-radius: 1.375rem;
    --bs-card-box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);

    --bs-card-cap-padding-y: 1.25rem;
    --bs-card-cap-bg: #F0F2FF;
    --bs-card-cap-color: var(--bs-secondary)
}
.projects-list-item .price{
    color: var(--bs-danger);
    font-size: 1.25rem;
    font-weight: bold;
}

/* --- folders --- */
.folders-grid{
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 1.5rem;
}
.folder{
    --icon-head-color: #0D1BA4;
    --icon-head-hover-color: var(--bs-primary);
    --icon-body-color: var(--bs-primary);
    --icon-body-hover-color: var(--bs-primary-bg-subtle);

    display: flex;
    flex-direction: column;
    width: 5.5rem;

    color: var(--bs-secondary);
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
}
.folder img,
.folder svg{
    width: 4rem;
    height: auto;
    margin: 0 auto 0.25rem;
}
.folder svg > *{
    transition: fill 0.15s ease-in-out;
}
.folder svg > *:nth-child(1){
    fill: var(--icon-head-color);
}
.folder svg > *:nth-child(2){
    fill: var(--icon-body-color);
}
.folder:hover svg > *:nth-child(1){
    fill: var(--icon-head-hover-color);
}
.folder:hover svg > *:nth-child(2){
    fill: var(--icon-body-hover-color);
}

.folder-success{
    --icon-head-color: var(--bs-success-text-emphasis);
    --icon-head-hover-color: var(--bs-success);
    --icon-body-color: var(--bs-success);
    --icon-body-hover-color: var(--bs-success-bg-subtle);
}

/* --- files --- */
.files-grid{
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 1.5rem;
}
.file{
    --icon-size: 4rem;

    display: flex;
    flex-direction: column;
    width: 5.5rem;

    color: var(--bs-secondary);
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
    position: relative;
}
.file img{
    width: 100%;
    height: auto;
}
.file .i-wrap{
    width: var(--icon-size);
    margin: 0 auto 0.25rem;
    position: relative;
}
.file .i-wrap::after{
    content: "";
    width: 100%;
    height: 100%;
    background: url(../../images/icons/pdf_hover.svg) no-repeat;
    background-size: var(--icon-size) auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
.file:hover .i-wrap::after{
    opacity: 1;
}
/* ---------- /projects ---------- */


/* ---------- map ---------- */
.map-container{
    --bs-aspect-ratio: 60%;
    border-radius: var(--bs-border-radius-sm);
}
/* ---------- map ---------- */



/* ==================== 5. content by pages ==================== */


/* ---------- home ---------- */
.landing-section{
    padding-bottom: 5rem;
}
.landing-section .section-title{
    margin: 4rem 0 3.5rem;

    color: var(--bs-primary);
    font-size: var(--display-1);
    line-height: 1;
}
@media (min-width: 768px) {
    .landing-section{
        padding-bottom: 7rem;
    }
    .landing-section .section-title {
        margin: 5.5rem 0 4.5rem;
        line-height: 0.8;
    }
}
@media (min-width: 992px) {
    .landing-section{
        padding-bottom: 10rem;
    }
    .landing-section .section-title {
        margin: 7rem 0 5.5rem;
    }
}
/* ---------- /home ---------- */


/* ---------- pdf ---------- */
.pdf-container{
    --container-height: calc(100vh - var(--app-header-height) - 100px);
    --item-height: auto;
}
.pdf-container .scrollable-container{
    max-height: var(--container-height);
}
.pdf-container .row{
    --bs-gutter-x: 0.5rem;
}

.pdf-container .scrollable-container .os-scrollbar{
    --scrollbar-color: transparent;
    --scrollbar-handle-color: #C5C5C5;
}

/* item */
.pdf-page{
    --font-size: 14px;
    --gap: 0.375rem;

    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding-bottom: calc(var(--gap) * 2);

    color: #000;
    font-size: var(--font-size);
    line-height: 1;
    text-align: center;
}
.pdf-page > div{
    display: flex;
    max-height: var(--item-height);
    overflow: hidden;
}
.pdf-page img{
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: top center;
}

/* pages */
.pdf-pages{
    --px: 0.5rem;
    --py: 0.625rem;
    --item-height: calc(var(--container-height) - var(--py) * 2 - 0.5rem);

    padding: var(--py) var(--px);
    background-color: var(--bs-light-bg-subtle);
    border-radius: 4px;
}
.pdf-pages .os-scrollbar{
    --scrollbar-width: 4px;
    --scrollbar-top: var(--py);
    --scrollbar-bottom: var(--py);
    --spacing-right: 2px;
}

/* nav */
.pdf-nav.scrollable-container{
    padding-right: 1rem;
    margin-right: -1rem;
}
.pdf-nav .pdf-page{
    --font-size: 12px;
    --gap: 0.25rem;
}
.pdf-nav .pdf-page > div{
    background-color: #D9D9D9;
    border-radius: 0.25rem;
    padding: 0.375rem;
    cursor: pointer;
}
/* ---------- /pdf ---------- */


/* ---------- section ---------- */
/* ---------- /section ---------- */

.dx-selection {
    background-color: var(--bs-primary) !important;
}
.icon-blue {
    color: rgb(15, 93, 233);
}