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


:root{
    --font-family: '63Fonts', 'Roboto', sans-serif;

    --bs-font-sans-serif: var(--font-family);
    --bs-body-font-size: var(--body-font-size);

    --bs-body-bg: #010101;
    --bs-body-bg-rgb: 1,1,1;

    --bs-body-color-rgb: 255,255,255;
    --bs-body-color: #fff;
    --bs-secondary-color-rgb: 178,178,178;
    --bs-secondary-color: #B2B2B2;
    --bs-tertiary-color-rgb: 130,130,130;
    --bs-tertiary-color: #828282;

    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255,255,255;

    --bs-heading-color: #fff;

    --bs-gray-light: #E0E0E0;
    --bs-gray: #BDBDBD;
    --bs-gray-dark: #333;

    --bs-primary-rgb: 1,198,137;
    --bs-primary: #01C689;
    --bs-primary-bg-subtle: #3CF4BF;
    --bs-primary-text-emphasis: #19F0C5;
    --color-primary-dark-rgb: 2,171,119;
    --color-primary-dark: #02AB77;

    --bs-secondary-rgb: 38,38,38;
    --bs-secondary: #262626;
    --bs-secondary-dark: #191919;

    --bs-success-rgb: 95,251,188;
    --bs-success: #5FFBBC;
    --color-success-dark-rgb: 47,247,193;
    --color-success-dark: #2FF7C1;

    --bs-danger-rgb: 218,26,33;
    --bs-danger: #da1a21;

    --bs-info-rgb: 0,142,242;
    --bs-info: #008EF2;
    --bs-info-bg-subtle: #6181FA;
    --color-info-dark-rgb: 16,124,200;
    --color-info-dark: #107CC8;

    /*--bs-light-rgb: 224,224,224;
    --bs-light: #E0E0E0;*/

    --bs-light-rgb: 242,242,242;
    --bs-light: #f2f2f2;
    --bs-light-bg-subtle: #f7f7f7;

    --bs-dark-rgb: 22,24,29;
    --bs-dark: #16181D;

    --bs-link-color: #008EF2;
    --bs-link-color-rgb: 0,142,242;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #107CC8;
    --bs-link-hover-color-rgb: 16,124,200;

    --bs-border-color: #4d4d4d;
    --bs-border-color-translucent: rgba(77,77,77,.5);

    --color-indigo: #4B49D1;
    --color-indigo-dark: #3432BB;

    --color-muted: rgba(var(--bs-body-color-rgb),.3);


    --btn-default-color: #fff;

    --btn-primary: var(--bs-primary);
    --btn-primary-hover: var(--color-primary-dark);
    --btn-primary-active: var(--btn-primary-hover);

    --btn-primary-light: rgba(var(--bs-primary-rgb),.1);
    --btn-primary-light-hover: rgba(var(--bs-primary-rgb),.2);
    --btn-primary-light-active: var(--btn-primary-light-hover);

    --btn-secondary: var(--bs-secondary);
    --btn-secondary-hover: var(--bs-secondary-dark);
    --btn-secondary-active: var(--btn-secondary-hover);

    --btn-success: var(--bs-success);
    --btn-success-hover: var(--color-success-dark);
    --btn-success-active: var(--btn-success-hover);

    --btn-info: var(--bs-info);
    --btn-info-hover: var(--color-info-dark);
    --btn-info-active: var(--btn-info-hover);

    --btn-dark: rgba(var(--bs-dark-rgb),.5);
    --btn-dark-hover: rgba(var(--bs-dark-rgb),.8);
    --btn-dark-active: var(--btn-dark-hover);

    --btn-indigo: var(--color-indigo);
    --btn-indigo-hover: var(--color-indigo-dark);
    --btn-indigo-active: var(--btn-indigo-hover);

    --btn-disabled-color: #E0E0E0;
    --btn-disabled-bg: #BDBDBD;


    --app-header-height: 72px;
    --app-header-px: 1rem;
    --app-content-px: 1rem;

    /*--content-py: var(--content-py-2);
    --content-py-1: 2.5rem;
    --content-py-2: 3rem;
    --content-py-3: 3.75rem;
    --content-py-4: 5rem;
    --content-py-5: 6.5rem;
    --content-py-6: 8rem;
    --content-py-7: 22rem;*/


    --container-size-1: 400px;
    --container-size-2: 600px;
    --container-size-3: 730px;
    --container-size-4: 980px;
    --container-size-5: 1160px;
    --container-size-6: 1468px;


    --fs-display-4: 3.75rem;
    --fs-display-5: 3.125rem;
    --fs-display-6: 2.75rem;

    --fs-h1: 2.5rem;
    --fs-h2: 2.125rem;
    --fs-h3: 1.875rem;
    --fs-h4: 1.5rem;
    --fs-h5: 1.25rem;
    --fs-h6: 1.125rem;

    /*--fs-article-h1: 2.75rem;
    --fs-article-h2: 2.125rem;
    --fs-article-h3: 1.75rem;*/

    --fs-text-1: 1.5rem;
    --fs-text-2: 1.25rem;
    --fs-text-3: 1.125rem;
    --fs-text-4: 1rem;
    --fs-text-5: 14px;
    --fs-text-6: 12px;

    --body-font-size: var(--fs-text-4);


    --element-size-1: 1.875rem;
    --element-size-2: 2.375rem;
    --element-size-3: 3rem;
    --element-size-4: 3.25rem;
    --element-size-5: 3.5rem;

    --icon-size-xxs: 14px;
    --icon-size-xs: 1rem;
    --icon-size-sm: 1.25rem;
    --icon-size-md: 1.5rem;
    --icon-size-lg: 1.75rem;
    --icon-size-xl: 2rem;
    --icon-size-xxl: 2.25rem;
    --icon-size-3xl: 3rem;

    --bs-border-radius: var(--bs-border-radius-md);
    --bs-border-radius-xs: 0.375rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-md: 0.9375rem;
    --bs-border-radius-lg: 1.25rem;
    --bs-border-radius-xl: 1.5rem;
    --bs-border-radius-xxl: 2rem;


    --form-control-height: var(--element-size-3);
    --form-control-px: .75rem;
    --form-control-py: .375rem;
    --form-control-fs: 14px;
    --form-control-color: var(--bs-body-color);
    --form-control-placeholder-color: rgba(var(--bs-body-color-rgb),.4);
    --form-control-bg: var(--bs-body-bg);
    --form-control-border-color: var(--bs-border-color-translucent);
    --form-control-border-radius: var(--bs-border-radius-sm);
    --form-control-active-color: var(--form-control-color);
    --form-control-active-bg: var(--form-control-bg);
    --form-control-active-border-color: rgba(var(--bs-info-rgb),.4);
    --form-control-disabled-bg: #F8F9FB;
    --form-control-disabled-border-color: var(--bs-border-color-translucent);
    --form-control-disabled-color: #959BA4;

    --form-check-color: var(--form-control-color);
    --form-check-bg: var(--form-control-bg);
    --form-check-border-color: var(--form-control-border-color);
    --form-check-bg-active: var(--bs-info);
    --form-check-border-color-active: var(--bs-info);
    --form-check-radio-bg-active: #fff;
    --form-check-radio-border-color-active: var(--bs-info);

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

@media (min-width: 768px) {
    :root{
        --app-content-px: 1.5rem;
    }
}
@media (min-width: 992px) {
    :root{
        --app-header-px: 1.5rem;
        --app-content-px: 2rem;

        /*--content-py-1: 3rem;
        --content-py-2: 3.5rem;
        --content-py-3: 5rem;
        --content-py-4: 6rem;
        --content-py-5: 8rem;
        --content-py-6: 10rem;*/
    }
}
@media (min-width: 1300px){
    :root{
        --app-header-px: 2.875rem;
    }
}



/* ==================== 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{opacity: 0.5; pointer-events: none;}
.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{
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}



/* ==================== 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 ----------- */
/*.g-1, .gx-1 {
	--bs-gutter-x: 0.25rem;
}
.g-1, .gy-1 {
	--bs-gutter-y: 0.25rem;
}

.g-2, .gx-2 {
	--bs-gutter-x: 0.5rem;
}
.g-2, .gy-2 {
	--bs-gutter-y: 0.5rem;
}

.g-3, .gx-3 {
	--bs-gutter-x: 1rem;
}
.g-3, .gy-3 {
	--bs-gutter-y: 1rem;
}

.g-4, .gx-4 {
	--bs-gutter-x: 1.5rem;
}
.g-4, .gy-4 {
	--bs-gutter-y: 1.5rem;
}

.g-5, .gx-5 {
	--bs-gutter-x: 3rem;
}
.g-5, .gy-5 {
	--bs-gutter-y: 3rem;
}*/

.grid-items-stretch > div{
    display: flex;
    flex-direction: column;
}
.grid-items-stretch > div > *{
    flex-grow: 1;
}
/* ----------- /row ----------- */


/* ----------- spacing ----------- */

/* padding */
.p-6,.py-6,.pt-6{
    padding-top: 3.5rem !important;
}
.p-6,.py-6,.pb-6{
    padding-bottom: 3.5rem !important;
}

.p-7,.py-7,.pt-7{
    padding-top: 5rem !important;
}
.p-7,.py-7,.pb-7{
    padding-bottom: 5rem !important;
}

.p-8,.py-8,.pt-8{
    padding-top: 6rem !important;
}
.p-8,.py-8,.pb-8{
    padding-bottom: 6rem !important;
}

.p-9,.py-9,.pt-9{
    padding-top: 8rem !important;
}
.p-9,.py-9,.pb-9{
    padding-bottom: 8rem !important;
}

.p-10,.py-10,.pt-10{
    padding-top: 10rem !important;
}
.p-10,.py-10,.pb-10{
    padding-bottom: 10rem !important;
}

/* margin */
.m-6,.my-6,.mt-6{
    margin-top: 3.5rem !important;
}
.m-6,.my-6,.mb-6{
    margin-bottom: 3.5rem !important;
}

.m-7,.my-7,.mt-7{
    margin-top: 5rem !important;
}
.m-7,.my-7,.mb-7{
    margin-bottom: 5rem !important;
}

.m-8,.my-8,.mt-8{
    margin-top: 6rem !important;
}
.m-8,.my-8,.mb-8{
    margin-bottom: 6rem !important;
}

.m-9,.my-9,.mt-9{
    margin-top: 8rem !important;
}
.m-9,.my-9,.mb-9{
    margin-bottom: 8rem !important;
}

.m-10,.my-10,.mt-10{
    margin-top: 10rem !important;
}
.m-10,.my-10,.mb-10{
    margin-bottom: 10rem !important;
}

@media (min-width: 576px) {
    /* padding */
    .p-sm-6,.py-sm-6,.pt-sm-6{
        padding-top: 3.5rem !important;
    }
    .p-sm-6,.py-sm-6,.pb-sm-6{
        padding-bottom: 3.5rem !important;
    }

    .p-sm-7,.py-sm-7,.pt-sm-7{
        padding-top: 5rem !important;
    }
    .p-sm-7,.py-sm-7,.pb-sm-7{
        padding-bottom: 5rem !important;
    }

    .p-sm-8,.py-sm-8,.pt-sm-8{
        padding-top: 6rem !important;
    }
    .p-sm-8,.py-sm-8,.pb-sm-8{
        padding-bottom: 6rem !important;
    }

    .p-sm-9,.py-sm-9,.pt-sm-9{
        padding-top: 8rem !important;
    }
    .p-sm-9,.py-sm-9,.pb-sm-9{
        padding-bottom: 8rem !important;
    }

    .p-sm-10,.py-sm-10,.pt-sm-10{
        padding-top: 10rem !important;
    }
    .p-sm-10,.py-sm-10,.pb-sm-10{
        padding-bottom: 10rem !important;
    }

    /* margin */
    .m-sm-6,.my-sm-6,.mt-sm-6{
        margin-top: 3.5rem !important;
    }
    .m-sm-6,.my-sm-6,.mb-sm-6{
        margin-bottom: 3.5rem !important;
    }

    .m-sm-7,.my-sm-7,.mt-sm-7{
        margin-top: 5rem !important;
    }
    .m-sm-7,.my-sm-7,.mb-sm-7{
        margin-bottom: 5rem !important;
    }

    .m-sm-8,.my-sm-8,.mt-sm-8{
        margin-top: 6rem !important;
    }
    .m-sm-8,.my-sm-8,.mb-sm-8{
        margin-bottom: 6rem !important;
    }

    .m-sm-9,.my-sm-9,.mt-sm-9{
        margin-top: 8rem !important;
    }
    .m-sm-9,.my-sm-9,.mb-sm-9{
        margin-bottom: 8rem !important;
    }

    .m-sm-10,.my-sm-10,.mt-sm-10{
        margin-top: 10rem !important;
    }
    .m-sm-10,.my-sm-10,.mb-sm-10{
        margin-bottom: 10rem !important;
    }
}

@media (min-width: 768px) {
    /* padding */
    .p-md-6,.py-md-6,.pt-md-6{
        padding-top: 3.5rem !important;
    }
    .p-md-6,.py-md-6,.pb-md-6{
        padding-bottom: 3.5rem !important;
    }

    .p-md-7,.py-md-7,.pt-md-7{
        padding-top: 5rem !important;
    }
    .p-md-7,.py-md-7,.pb-md-7{
        padding-bottom: 5rem !important;
    }

    .p-md-8,.py-md-8,.pt-md-8{
        padding-top: 6rem !important;
    }
    .p-md-8,.py-md-8,.pb-md-8{
        padding-bottom: 6rem !important;
    }

    .p-md-9,.py-md-9,.pt-md-9{
        padding-top: 8rem !important;
    }
    .p-md-9,.py-md-9,.pb-md-9{
        padding-bottom: 8rem !important;
    }

    .p-md-10,.py-md-10,.pt-md-10{
        padding-top: 10rem !important;
    }
    .p-md-10,.py-md-10,.pb-md-10{
        padding-bottom: 10rem !important;
    }

    /* margin */
    .m-md-6,.my-md-6,.mt-md-6{
        margin-top: 3.5rem !important;
    }
    .m-md-6,.my-md-6,.mb-md-6{
        margin-bottom: 3.5rem !important;
    }

    .m-md-7,.my-md-7,.mt-md-7{
        margin-top: 5rem !important;
    }
    .m-md-7,.my-md-7,.mb-md-7{
        margin-bottom: 5rem !important;
    }

    .m-md-8,.my-md-8,.mt-md-8{
        margin-top: 6rem !important;
    }
    .m-md-8,.my-md-8,.mb-md-8{
        margin-bottom: 6rem !important;
    }

    .m-md-9,.my-md-9,.mt-md-9{
        margin-top: 8rem !important;
    }
    .m-md-9,.my-md-9,.mb-md-9{
        margin-bottom: 8rem !important;
    }

    .m-md-10,.my-md-10,.mt-md-10{
        margin-top: 10rem !important;
    }
    .m-md-10,.my-md-10,.mb-md-10{
        margin-bottom: 10rem !important;
    }
}

@media (min-width: 992px) {
    /* padding */
    .p-lg-6,.py-lg-6,.pt-lg-6{
        padding-top: 3.5rem !important;
    }
    .p-lg-6,.py-lg-6,.pb-lg-6{
        padding-bottom: 3.5rem !important;
    }

    .p-lg-7,.py-lg-7,.pt-lg-7{
        padding-top: 5rem !important;
    }
    .p-lg-7,.py-lg-7,.pb-lg-7{
        padding-bottom: 5rem !important;
    }

    .p-lg-8,.py-lg-8,.pt-lg-8{
        padding-top: 6rem !important;
    }
    .p-lg-8,.py-lg-8,.pb-lg-8{
        padding-bottom: 6rem !important;
    }

    .p-lg-9,.py-lg-9,.pt-lg-9{
        padding-top: 8rem !important;
    }
    .p-lg-9,.py-lg-9,.pb-lg-9{
        padding-bottom: 8rem !important;
    }

    .p-lg-10,.py-lg-10,.pt-lg-10{
        padding-top: 10rem !important;
    }
    .p-lg-10,.py-lg-10,.pb-lg-10{
        padding-bottom: 10rem !important;
    }

    /* margin */
    .m-lg-6,.my-lg-6,.mt-lg-6{
        margin-top: 3.5rem !important;
    }
    .m-lg-6,.my-lg-6,.mb-lg-6{
        margin-bottom: 3.5rem !important;
    }

    .m-lg-7,.my-lg-7,.mt-lg-7{
        margin-top: 5rem !important;
    }
    .m-lg-7,.my-lg-7,.mb-lg-7{
        margin-bottom: 5rem !important;
    }

    .m-lg-8,.my-lg-8,.mt-lg-8{
        margin-top: 6rem !important;
    }
    .m-lg-8,.my-lg-8,.mb-lg-8{
        margin-bottom: 6rem !important;
    }

    .m-lg-9,.my-lg-9,.mt-lg-9{
        margin-top: 8rem !important;
    }
    .m-lg-9,.my-lg-9,.mb-lg-9{
        margin-bottom: 8rem !important;
    }

    .m-lg-10,.my-lg-10,.mt-lg-10{
        margin-top: 10rem !important;
    }
    .m-lg-10,.my-lg-10,.mb-lg-10{
        margin-bottom: 10rem !important;
    }
}

@media (min-width: 1200px) {
    /* padding */
    .p-xl-6,.py-xl-6,.pt-xl-6{
        padding-top: 3.5rem !important;
    }
    .p-xl-6,.py-xl-6,.pb-xl-6{
        padding-bottom: 3.5rem !important;
    }

    .p-xl-7,.py-xl-7,.pt-xl-7{
        padding-top: 5rem !important;
    }
    .p-xl-7,.py-xl-7,.pb-xl-7{
        padding-bottom: 5rem !important;
    }

    .p-xl-8,.py-xl-8,.pt-xl-8{
        padding-top: 6rem !important;
    }
    .p-xl-8,.py-xl-8,.pb-xl-8{
        padding-bottom: 6rem !important;
    }

    .p-xl-9,.py-xl-9,.pt-xl-9{
        padding-top: 8rem !important;
    }
    .p-xl-9,.py-xl-9,.pb-xl-9{
        padding-bottom: 8rem !important;
    }

    .p-xl-10,.py-xl-10,.pt-xl-10{
        padding-top: 10rem !important;
    }
    .p-xl-10,.py-xl-10,.pb-xl-10{
        padding-bottom: 10rem !important;
    }

    /* margin */
    .m-xl-6,.my-xl-6,.mt-xl-6{
        margin-top: 3.5rem !important;
    }
    .m-xl-6,.my-xl-6,.mb-xl-6{
        margin-bottom: 3.5rem !important;
    }

    .m-xl-7,.my-xl-7,.mt-xl-7{
        margin-top: 5rem !important;
    }
    .m-xl-7,.my-xl-7,.mb-xl-7{
        margin-bottom: 5rem !important;
    }

    .m-xl-8,.my-xl-8,.mt-xl-8{
        margin-top: 6rem !important;
    }
    .m-xl-8,.my-xl-8,.mb-xl-8{
        margin-bottom: 6rem !important;
    }

    .m-xl-9,.my-xl-9,.mt-xl-9{
        margin-top: 8rem !important;
    }
    .m-xl-9,.my-xl-9,.mb-xl-9{
        margin-bottom: 8rem !important;
    }

    .m-xl-10,.my-xl-10,.mt-xl-10{
        margin-top: 10rem !important;
    }
    .m-xl-10,.my-xl-10,.mb-xl-10{
        margin-bottom: 10rem !important;
    }
}

/* padding */
/*.cnt-pt-1,
.cnt-py-1{
    padding-top: var(--content-py-1);
}
.cnt-pt-2,
.cnt-py-2{
    padding-top: var(--content-py-2);
}
.cnt-pt-3,
.cnt-py-3{
    padding-top: var(--content-py-3);
}
.cnt-pt-4,
.cnt-py-4{
    padding-top: var(--content-py-4);
}
.cnt-pt-5,
.cnt-py-5{
    padding-top: var(--content-py-5);
}
.cnt-pt-6,
.cnt-py-6{
    padding-top: var(--content-py-6);
}
.cnt-pt-7,
.cnt-py-7{
    padding-top: var(--content-py-7);
}

.cnt-pb-1,
.cnt-py-1{
    padding-bottom: var(--content-py-1);
}
.cnt-pb-2,
.cnt-py-2{
    padding-bottom: var(--content-py-2);
}
.cnt-pb-3,
.cnt-py-3{
    padding-bottom: var(--content-py-3);
}
.cnt-pb-4,
.cnt-py-4{
    padding-bottom: var(--content-py-4);
}
.cnt-pb-5,
.cnt-py-5{
    padding-bottom: var(--content-py-5);
}
.cnt-pb-6,
.cnt-py-6{
    padding-bottom: var(--content-py-6);
}
.cnt-pb-7,
.cnt-py-7{
    padding-bottom: var(--content-py-7);
}*/


/* margin */
/*.cnt-mt-1,
.cnt-my-1{
    margin-top: var(--content-py-1);
}
.cnt-mt-2,
.cnt-my-2{
    margin-top: var(--content-py-2);
}
.cnt-mt-3,
.cnt-my-3{
    margin-top: var(--content-py-3);
}
.cnt-mt-4,
.cnt-my-4{
    margin-top: var(--content-py-4);
}
.cnt-mt-5,
.cnt-my-5{
    margin-top: var(--content-py-5);
}
.cnt-mt-6,
.cnt-my-6{
    margin-top: var(--content-py-6);
}
.cnt-mt-7,
.cnt-my-7{
    margin-top: var(--content-py-7);
}

.cnt-mb-1,
.cnt-my-1{
    margin-bottom: var(--content-py-1);
}
.cnt-mb-2,
.cnt-my-2{
    margin-bottom: var(--content-py-2);
}
.cnt-mb-4,
.cnt-my-3{
    margin-bottom: var(--content-py-3);
}
.cnt-mb-4,
.cnt-my-4{
    margin-bottom: var(--content-py-4);
}
.cnt-mb-5,
.cnt-my-5{
    margin-bottom: var(--content-py-5);
}
.cnt-mb-6,
.cnt-my-6{
    margin-bottom: var(--content-py-6);
}
.cnt-mb-7,
.cnt-my-7{
    margin-bottom: var(--content-py-7);
}*/
/* ----------- /spacing ----------- */


/* ----------- 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-xl{
    width: var(--icon-size-xl) !important;
}
.i-2xl{
    width: var(--icon-size-xxl) !important;
}
.i-3xl{
    width: var(--icon-size-3xl) !important;
}

.text-icon{
    font-size: inherit;
    font-style: normal;
    line-height: inherit;
}
/* ----------- /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-inherit{
    color: inherit !important;
}

.text-secondary{
    /*--bs-text-opacity: 1;*/
    --bs-secondary-rgb: var(--bs-secondary-color-rgb);
}
.text-muted{
    color: var(--color-muted) !important;
}

.text-gray-light{
    color: var(--bs-gray-light) !important;
}
.text-gray{
    color: var(--bs-gray) !important;
}
.text-gray-dark{
    color: var(--bs-gray-dark) !important;
}

.text-bg-primary-light{
    color: var(--bs-primary) !important;
    background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, .1)) !important;
}
.text-bg-info{
    color: #fff !important;
}
.text-bg-indigo{
    color: #fff !important;
    background-color: var(--color-indigo) !important;
}

hr{
    border-top-color: var(--bs-border-color);
    opacity: 1;
}
/* ----------- /colors ----------- */


/* ---------- backgrounds ---------- */
.bg-1{
    background: url(/images/bg/bg_1.jpg) center right no-repeat;
}
.bg-2{
    background: url(/images/bg/bg_2.png) center right no-repeat;
}
.bg-3{
    background: url(/images/bg/bg_3.png) bottom right no-repeat;
}

.bg-1-full,
.section.bg-1-full{
    z-index: 5;
}
.bg-1-full::before{
    content: "";
    width: 100%;
    height: 1170px;
    background: url(/images/bg/bg_1.jpg) center right no-repeat;
    position: absolute;
    left: 0;
    top: 50%;
    z-index: -1;
    transform: translateY(-50%);
}

/* gradient */
.bg-gradient-1{
    background: #030F1B;
    background: linear-gradient(180deg,rgba(3,15,27,1) 0%, rgba(0,0,0,1) 800px, rgba(0,0,0,1) 1070px);
}

/* lighting */
.bg-lighting,
.section.bg-lighting{
    z-index: 3;
}
.bg-lighting::before{
    content: "";
    border-radius: 50%;
    position: absolute;
    z-index: -1;
}
.bg-lighting-1::before,
.bg-lighting-3::before{
    width: 1800px;
    height: 1200px;
    background: rgb(8,8,8);
    background: linear-gradient(-149deg, rgba(99,56,220,1) 100%, rgba(8,8,8,1) 24%);
    filter: blur(500px);

    top: 300px;
    left: -1500px;

    transform: rotate(-41.84deg);
}
.bg-lighting-2::before{
    width: 1200px;
    height: 1200px;
    background: #663BE0;
    filter: blur(700px);

    top: 50%;
    right: 0;

    transform: translate(50%, -60%);
}
.bg-lighting-3::before{
    opacity: 0.7;
    left: -1600px;
}

.bg-lighting-4::before,
.bg-lighting-5::before,
.bg-lighting-6::before,
.bg-lighting-7::before,
.bg-lighting-8::before{
    width: 2250px;
    height: 1550px;
    background: rgb(8,8,8);
    filter: blur(500px);

    top: 50%;
}
.bg-lighting-4::before{
    background: linear-gradient(40deg, rgba(8,8,8,1) 0%, rgba(8,8,8,1) 24%, rgba(34,182,231,1) 100%);
    left: 0;
    transform: translate(-50%, -30%) rotate(-42deg);
}
.bg-lighting-5::before{
    background: linear-gradient(40deg, rgba(8,8,8,1) 0%, rgba(8,8,8,1) 24%, rgba(169,128,216,1) 100%);
    right: 0;
    transform: translate(40%, -5%) rotate(-42deg);
}
.bg-lighting-6::before{
    background: linear-gradient(40deg, rgba(8,8,8,1) 0%, rgba(8,8,8,1) 24%, rgba(86,175,160,1) 100%);
    top: 100%;
    right: 0;
    transform: translate(40%, -10%) rotate(-42deg);
    opacity: 0.7;
}

.bg-lighting-7::before{
    background: linear-gradient(40deg, rgba(8,8,8,1) 0%, rgba(8,8,8,1) 24%, rgba(99,56,220,1) 100%);
    left: 0;
    transform: translate(-55%, -15%) rotate(-42deg);
    opacity: 0.7;
}

.bg-lighting-8::before{
    background: linear-gradient(40deg, rgba(8,8,8,1) 0%, rgba(8,8,8,1) 24%, rgba(99,56,220,1) 100%);
    top: 0;
    right: 0;
    transform: translate(40%, -40%) rotate(-42deg);
    opacity: 0.7;
}
/* ---------- /backgrounds ---------- */


/* ---------- scroll ---------- */
.scrollable-container{
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.app-page ::-webkit-scrollbar,
.modal ::-webkit-scrollbar{
    width: 5px;
    height: 5px;
}
.app-page ::-webkit-scrollbar-track,
.modal ::-webkit-scrollbar-track{
    background-color: inherit;
    border-radius: 99px;
}
.app-page ::-webkit-scrollbar-thumb,
.modal ::-webkit-scrollbar-thumb{
    background: var(--bs-secondary);
    border-radius: 10px;
}
/* ---------- /scroll ---------- */



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


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


/* ---------- header ---------- */
.app-header{
    --header-px: var(--app-header-px);
    --header-py: 0.75rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--app-header-height);
    background-color: rgba(0,0,0,0.2);
    backdrop-filter: blur(8px);
    padding: var(--header-py) var(--header-px);

    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
}

.app-header .logo{
    position: relative;
    z-index: 10;
}
.app-header .logo img,
.app-header .logo svg{
    height: 30px;
}
.app-header .logo svg .st0{
    fill: #3cb986;
}
.app-header .logo svg .st1{
    fill: #fff;
}

.app-header nav a{
    position: relative;

    color: #fff;
    font-size: 13px;
    font-weight: bold;
    transition: color .15s ease-in-out;
}
.app-header nav a:hover,
.app-header nav a.active{
    color: rgba(255,255,255,.7);
}

.app-header nav a .badge{
    background-color: var(--bs-danger);
    border-radius: 10px;
    padding: 3px 4px 2px;

    position: absolute;
    right: -12px;
    top: -14px;

    font-size: 9px;
    text-transform: uppercase;
}

.app-header .lang-btn{
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 13px;
    --bs-btn-font-weight: 400;
    --bs-btn-border-radius: 5px;
    --btn-size: auto;
    --bs-btn-color: rgba(255,255,255,.5);
    --bs-btn-bg: rgba(255,255,255,.1);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: rgba(255,255,255,.7);
    --bs-btn-hover-bg: rgba(255,255,255,.14);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: rgba(255,255,255,.7);
    --bs-btn-active-bg: rgba(255,255,255,.14);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}

@media (min-width: 1200px){
    .app-header .hamburger{
        display: none;
    }
    .app-header .nav-wrap{
        display: block !important;
    }
    .app-header .nav-wrap > div,
    .app-header nav > ul{
        display: flex;
        align-items: center;
        gap: 1.25rem;
    }
    .app-header .lang-btn{
        order: 2;
        margin-left: 10px;
    }
}

@media (max-width: 1199px){
    .app-header .nav-wrap{
        display: none;
        width: 100%;
        height: 100vh;
        background-color: var(--bs-body-bg);
        padding-top: var(--app-header-height);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;
    }

    .app-header .nav-wrap > div{
        height: 100%;
        padding: 0 1.5rem 2rem;

        -webkit-overflow-scrolling: touch;
        overflow: auto;

        text-align: right;
    }

    .app-header nav li{
        padding: 0;
        margin-bottom: 0.875rem;
    }
    .app-header nav a{
        font-size: 1.5rem;
    }
    .app-header nav a .badge {
        top: -0.5rem;
    }

    .app-header .lang-btn{
        --bs-btn-font-size: 14px;
        margin-bottom: 1.125rem;
    }
}
@media (max-width: 767px){
    /*.app-header nav a{
        font-size: 26px;
    }
    .app-header nav a .badge {
        top: -8px;
    }

    .app-header .lang-btn{
        font-size: 18px;
    }*/
}
/* ---------- /header ---------- */


/* ---------- page ---------- */
.app-page{
    flex-grow: 1;
    width: 100%;
    padding-top: var(--app-header-height);
    position: relative;
}

.app-page-back-btn{
    display: inline-block;
    background: url(/images/icons/back_white.svg) left no-repeat;
    background-size: 13px 13px;
    padding: 2px 2px 2px 18px;
    position: absolute;
    top: calc(var(--app-header-height) + 10px);
    left: var(--app-header-px);
    z-index: 50;

    color: #fff;
    font-size: 14px;
}
.app-page-back-btn:hover{
    color: #fff;
    opacity:0.7;
}

.page-title{
    font-size: var(--fs-display-4);
    line-height: 1.1;
}
/*.page-gradient{
    background: #030F1B;
    background: linear-gradient(180deg,rgba(3, 15, 27, 1) 0%, rgba(1, 1, 1, 1) 1070px);
    background-position: 0 800px;
}*/

.section{
    --section-py: 3rem;
    --section-px: 0;
    --section-head-mb: 2.5rem;

    padding: var(--section-py) var(--section-px);
    position: relative;
    z-index: 10;
}

.section-head{
    max-width: 830px;
    margin: 0 auto var(--section-head-mb);
}
.section-title{
    margin-bottom: var(--section-head-mb);
    color: var(--bs-primary-text-emphasis);
    font-size: var(--fs-display-5);
    text-align: center;
}
.section-text{
    /*max-width: 740px;
    margin: 0 auto;*/

    /*color: var(--bs-secondary-color);*/
    font-size: var(--fs-text-4);
    text-align: center;
}
.section-head .section-title{
    --section-head-mb: 0;
}

@media (min-width: 992px) {
    .section {
        --section-py: 3.5rem;
        --section-head-mb: 3.25rem;
    }
}
/* ---------- /page ---------- */


/* ---------- footer ---------- */
/*.app-footer{
    flex-shrink: 0;
    position: relative;
    z-index: 250;
}*/
/* ---------- /footer ---------- */


/* ---------- floating bar ---------- */
.app-floating-bar{
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0 4px;
    position: fixed;
    bottom: 4px;
    z-index: 500;
    pointer-events: none;
}
.app-floating-bar .card{
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-border-width: 1px;
    --bs-card-border-color: rgba(255,255,255,.07);

    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    pointer-events: auto;
    font-size: 15px;
}
/*.app-floating-bar .card-body{
    display: flex;
    align-items: center;
    gap: 0.875rem;
}*/

@media (min-width: 576px) {
    .app-floating-bar{
        bottom: 1.5rem;
    }
    .app-floating-bar .card{
        --bs-card-spacer-y: 0.75rem;
        --bs-card-spacer-x: 0.875rem;
        --bs-card-border-radius: 50px;
    }
}

@media (max-width: 576px) {
    .app-floating-bar{
        text-align: center;
    }
}
/* ---------- /floating bar ---------- */



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


/* ----------- hamburger ----------- */
.hamburger,
.hamburger span,
.hamburger span::before,
.hamburger span::after{
    width: 18px;
}

.hamburger{
    flex-shrink: 0;
    display: block;
    height: 14px;
    background-color: transparent;
    border: 0;
    padding: 0;
    overflow: visible;
    position: relative;
    z-index: 50;
}
.hamburger:before{
    content: "";
    position: absolute;
    top: -12px;
    bottom: -12px;
    left: -12px;
    right: -12px;
}

.hamburger span,
.hamburger span::before,
.hamburger span::after {
    display: block;
    height: 1px;
    background-color: var(--bs-body-color);
    position: absolute;
    transition: transform 0.15s ease;
}
.hamburger span{
    top: 0;
}
.hamburger span::before,
.hamburger span::after {
    content: "";
    display: block;
}
.hamburger span::before {
    width: 100%;
    top: 6px;
    transition-property: transform, opacity;
}
.hamburger span::after {
    top: 12px;
}

.hamburger.is-active span,
.nav-is-open .hamburger span{
    transform: translate3d(-1px, 7px, 0) rotate(45deg);
}
.hamburger.is-active span::before,
.nav-is-open .hamburger span::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0;
}
.hamburger.is-active span::after,
.nav-is-open .hamburger span::after {
    transform: translate3d(0, -12px, 0) rotate(-90deg);
}
.hamburger.is-active span,
.hamburger.is-active span::before,
.hamburger.is-active span::after,
.nav-is-open .hamburger span,
.nav-is-open .hamburger span::before,
.nav-is-open .hamburger span::after{
    width: 21px;
}
/* ----------- /hamburger ----------- */


/* ---------- title,text ---------- */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,
.title {
    display: block;
    color: var(--bs-heading-color);
    font-weight: bold;
}
.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-4{
    font-size: var(--fs-display-4) !important;
}
.display-5{
    font-size: var(--fs-display-5) !important;
}
.display-6{
    font-size: var(--fs-display-6) !important;
}

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;}


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

/*.text-wrap h1{
    font-size: var(--fs-article-h1);
}
.text-wrap h2{
    font-size: var(--fs-article-h2);
}
.text-wrap h3{
    font-size: var(--fs-article-h3);
}*/

.fs-1{
    font-size: var(--fs-text-1) !important;
}
.fs-2{
    font-size: var(--fs-text-2) !important;
}
.fs-3{
    font-size: var(--fs-text-3) !important;
}
.fs-4{
    font-size: var(--fs-text-4) !important;
}
.fs-5{
    font-size: var(--fs-text-5) !important;
}
.fs-6{
    font-size: var(--fs-text-6) !important;
}

html{
    font-size: 14px;
}

@media (min-width: 768px){
    html{
        font-size: 16px;
    }
}

.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:20px;}
/*.text-wrap li + li,.text-wrap li ul,.text-wrap li ol{margin-top:5px;}*/

.check-list{
    list-style: none;
    padding-left: 0 !important;
}
.check-list li{
    min-height: 24px;
    background: url(/images/icons/check_green.svg) 0 3px no-repeat;
    background-size: 16px auto;
    padding-left: 28px;
}
.check-list li + li{
    margin-top: 15px;
}

.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;
}

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

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: 2rem;
    --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: var(--bs-border-radius-sm);
    --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(--btn-default-color);

    --bs-border-radius-pill: calc(var(--btn-size) * 0.5);

    --btn-size: var(--element-size-3);

    --icon-size: 24px;
    --btn-icon-color: var(--bs-btn-color);
    --btn-icon-hover-color: var(--bs-btn-hover-color);

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

.btn-xs{
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-border-radius: var(--bs-border-radius-xs);
    --bs-btn-font-size: 12px;
    --btn-size: var(--element-size-1);
    --icon-size: 18px;
}
.btn-sm{
    --bs-btn-padding-x: 1.5rem;
    --btn-size: var(--element-size-2);
    --bs-btn-font-size: 0.9375rem;
}
.btn-lg{
    --bs-btn-padding-x: 2.5rem;
    --btn-size: var(--element-size-4);
    --bs-btn-font-size: 1.125rem;
}
.btn-xl{
    --bs-btn-padding-x: 2.5rem;
    --btn-size: var(--element-size-5);
    --bs-btn-font-size: 1.125rem;
}

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

/* white */
.btn-white{
    background-color: rgba(255,255,255,0.5);
    border-color: rgba(255,255,255,0.5);
}
.btn-white:hover{
    background-color: rgba(255,255,255,0.7);
}
.btn.btn-outline-white{
    border-color: #fff;
    color: #fff !important;
}
.btn.btn-outline-white:hover{
    background-color: #fff;
    border-color: #fff;
}

/* primary */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-primary);
    --bs-btn-border-color: rgba(153,255,192,.3);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-primary-hover);
    --bs-btn-hover-border-color: var(--bs-btn-border-color);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-primary-active);
    --bs-btn-active-border-color: var(--bs-btn-border-color);
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}

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

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

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

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

/* dark */
.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-dark);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--btn-dark-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--btn-dark-active);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}
.btn-outline-dark{
    --bs-btn-color: rgba(255,255,255,.35);
    --bs-btn-border-color: rgba(var(--bs-dark-rgb),.6);
    --bs-btn-hover-color: rgba(255,255,255,.6);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: rgba(var(--bs-dark-rgb),1);
    --bs-btn-active-color: rgba(255,255,255,.7);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: rgba(var(--bs-dark-rgb),1);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}

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


/* 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;
}

/* btn-row */
/*.app-page .btn-row{
	margin: 20px 0;
}
.app-page .btn-row:last-child{
	margin-bottom: 0;
}
.app-page .btn-row > div{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	padding-left: -6px;
	padding-right: -6px;
}
.app-page .btn-row > div .btn{
	margin: 6px;
}*/
/* ---------- /buttons ---------- */


/* ---------- 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 ---------- */


/* ---------- pagination ---------- */
/*.pagination{
    --bs-pagination-padding-x: 0.25rem;
    --bs-pagination-padding-y: 0.25rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--btn-default-color);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-width: 0;
    --bs-pagination-border-color: transparent;
    --bs-pagination-border-radius: var(--border-radius-sm);
    --bs-pagination-hover-color: var(--btn-default-color);
    --bs-pagination-hover-bg: #ECECF5;
    --bs-pagination-hover-border-color: var(--btn-primary);
    --bs-pagination-focus-color: var(--btn-default-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);
    --bs-pagination-disabled-color: var(--btn-disabled-color);
    --bs-pagination-disabled-bg: var(--btn-disabled-bg);
    --bs-pagination-disabled-border-color: var(--btn-disabled-bg);

    --pagination-item-size: var(--form-element-size-2);

    justify-content: center;
    gap: 0.5rem;
    margin: 3rem 0;
}
.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);
}*/
/* ---------- /pagination ---------- */


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

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

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

.form-text{
    margin-top: 0.5rem;
    color: var(--bs-secondary-color);
    font-size: 14px;
}
.form-text img{
    width: 16px;
    height: auto;
}
.form-text.d-flex{
    align-items: flex-start;
    gap: 0.25rem;
}
.form-text.d-flex img{
    position: relative;
    top: 2px;
}

.form-control,
.form-select{
    height: var(--form-control-height);
    background-color: var(--form-control-bg);
    border-color: var(--form-control-border-color);
    border-radius: var(--form-control-border-radius);
    padding: var(--form-control-py) var(--form-control-px);

    color: var(--form-control-color);
    font-size: var(--form-control-fs);
}

.form-select{
    background-image: url(/images/icons/chevron_gray_light.svg);
    background-position: center right 12px;
    background-size: 14px auto;
    padding-right: 38px;
}

textarea.form-control{
    height: auto;
}

.form-control:focus,
.form-select:focus,
.virtual-select .vscomp-wrapper:focus .vscomp-toggle-button,
.virtual-select .vscomp-wrapper.focused .vscomp-toggle-button{
    background-color: var(--form-control-active-bg);
    border-color: var(--form-control-active-border-color);
    box-shadow: none;
    color: var(--form-control-active-color);
}

.form-control.disabled,
.form-select.disabled,
.form-control[disabled],
.form-select[disabled]{
    color: var(--form-control-disabled-color);
    background-color: var(--form-control-disabled-bg);
    border-color: var(--form-control-disabled-border-color);
}

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


/* checkbox, radio */
.form-check{
    display: inline-flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 18px;
    padding: 0;
    margin: 0;

    color: var(--form-check-color);
    font-size: 14px;
    line-height: 1.25;
}
.form-check-reverse{
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.form-check-label {
    align-self: center;
    color: inherit;
    font-size: inherit;
}

.form-check .form-check-input{
    margin: 0;
}
.form-check-input{
    flex-shrink: 0;
    width: var(--input-size);
    height: var(--input-size);
    background-color: var(--form-check-bg) !important;
    border-color: var(--form-check-border-color) !important;
}
.form-check-input[type="checkbox"]{
    --input-size: 21px;

    background-image: url(/images/icons/check_white.svg);
    background-repeat: no-repeat;
    background-position: -50px center;
    background-size: 11px auto;
    border-radius: 3px;
}
.form-check-input[type="radio"]{
    --bs-form-check-bg-image: none;
    --input-size: 18px;

    border-radius: 50%;
}
.form-check-input:focus,
.form-check-input:active{
    box-shadow: none;
    filter: none;
}
.form-check-input[type="radio"]:checked{
    --form-check-bg: var(--form-check-radio-bg-active);
    --form-check-border-color: var(--form-check-radio-border-color-active);

    border-width: 5px;
}
.form-check-input[type="checkbox"]:checked{
    --form-check-bg: var(--form-check-bg-active);
    --form-check-border-color: var(--form-check-border-color-active);

    background-position: center;
}

.form-check a,
.form-check a:hover{
    --bs-link-color-rgb: var(--bs-body-color-rgb);
}
.form-check a:hover{
    text-decoration: underline;
}

.btn.hide-input{
    position: relative;
    overflow: hidden;
}
.btn.hide-input input{
    opacity: 0;
    position: absolute;
    right: 100%;
}


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

.error-text,
.invalid-feedback{
    padding: 0 14px;
}

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

.has-error .form-control,
.has-error .form-select{
    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{
    box-shadow: none !important;
}
/* ---------- /form ---------- */


/* ---------- 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{
    display: block;
    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"]{
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn[data-bs-toggle="dropdown"]::after{
    flex-shrink: 0;
    content: "";
    width: 15px;
    height: 15px;
    background: url(//images/icons/chevron.svg) center no-repeat;
    background-size: 100% auto;
    transition: transform 0.15s cubic-bezier(0,0,.2,1);
}
.btn[data-bs-toggle="dropdown"][aria-expanded="true"]::after{
    transform: rotate(180deg);
}

.dropdown-menu{
    --bs-dropdown-spacer: 0;
    --bs-dropdown-bg: #fff;
    --bs-dropdown-border-color: #DCDFE4;
    --bs-dropdown-border-radius: 6px;
    --bs-dropdown-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    --bs-dropdown-padding-x: 0.5rem;
    --bs-dropdown-padding-y: 0.5rem;

    --bs-dropdown-item-border-radius: var(--border-radius-sm);
    --bs-dropdown-link-color: var(--btn-default-color);
    --bs-dropdown-link-hover-color: var(--btn-default-color);
    --bs-dropdown-link-hover-bg: var(--btn-secondary);
    --bs-dropdown-link-active-color: var(--btn-default-color);
    --bs-dropdown-link-active-bg: var(--btn-secondary-active);
    --bs-dropdown-item-padding-x: 8px;
    --bs-dropdown-item-padding-y: 6px;
    --bs-dropdown-font-size: 14px;
}*/
/* ---------- /dropdown ---------- */


/* ---------- card ---------- */
.card{
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    /*--bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: ;
    --bs-card-subtitle-color: ;*/
    --bs-card-border-width: 0;
    --bs-card-border-color: transparent;
    --bs-card-border-radius: var(--bs-border-radius-lg);
    --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - (var(--bs-border-width)));
    /*--bs-card-box-shadow: ;
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;*/
    --bs-card-bg: rgba(var(--bs-dark-rgb),.5);
    /*--bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;*/
}

.card-title{
    --bs-card-title-spacer-y: 0;

    font-size: 1.875rem;
    line-height: 1.25;
}


/* card themes */
.card.bg-glass{
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.card.bg-light,
.card.bg-light-subtle,
.card.bg-primary-subtle{
    --bs-card-color: var(--bs-dark);
}
.card.bg-light .card-title{
    color: var(--bs-dark);
}


.card.bg-white{
    /*--bs-card-bg: var(--bs-light-bg-subtle);*/

    /* form elements */
    --form-control-color: var(--bs-dark);
    --form-control-bg: var(--bs-light);
    --form-control-border-color: var(--bs-light);
    --form-control-active-color: var(--bs-dark);
    --form-control-active-bg: var(--form-control-bg);
}
.card.bg-white .form-select{
    background-image: url(/images/icons/chevron_gray_dark.svg);
}


@media (max-width: 575px) {
    .card.ratio{
        --bs-aspect-ratio: 0;
    }
    .card.ratio .card-body{
        position: relative;
    }
}
/* ---------- /card ---------- */


/* ----------- pricing card ----------- */
.pricing-card{
    --bs-card-spacer-y: 1.375rem;
    --bs-card-spacer-x: 0;
    --bs-card-cap-padding-y: 1.375rem;
    --bs-card-cap-padding-x: 0;
    --bs-card-cap-bg: transparent;

    padding: 0 15px;
}
.pricing-card .card-header,
.pricing-card .card-footer{
    --bs-card-border-width: 1px;
    --bs-card-border-color: rgba(255,255,255,0.3);
}

.pricing-card .card-title{
    color: var(--bs-gray-light);
    font-size: 1.5rem;
}

.pricing-card .card-body{
    color: var(--bs-gray);
    font-size: 15px;
}
.pricing-card .card-body .title{
    margin-bottom: 8px;

    font-size: 1.25rem;
}

.pricing-card .card-body .group{
    margin-bottom: 1.5rem;
}
.pricing-card .card-body .group:last-child{
    margin-bottom: 0;
}

.pricing-card .card-body ul{
    list-style: none;
}
.pricing-card .card-body ul li{
    min-height: 22px;
    background: url(/images/icons/check_green.svg) 0 4px no-repeat;
    background-size: 14px auto;
    padding-left: 24px;
}
.pricing-card .card-body ul li.is-excluded{
    background-image: url(/images/icons/xmark_red.svg);
}
.pricing-card .card-body li + li{
    margin-top: 6px;
}
.pricing-card .card-body img{
    width: 15px;
    margin-right: 10px;
}

.pricing-card .card-footer .btn{
    --bs-btn-padding-x: 2.75rem;
    --bs-btn-font-size: 15px;
    --btn-size: 2.5rem;
}

@media (min-width: 992px) {
    .pricing-card .card-title{
        font-size: 1.75rem;
    }
}
/* ----------- /pricing card ----------- */


/* ----------- card 2col with img ----------- */
.card-2col-with-img{
    --bs-card-spacer-y: 0;
    --bs-card-spacer-x: 2.5rem;
}
.card-2col-with-img .row > div{
    display: flex;
    flex-direction: column;
}
.card-2col-with-img .col-info{
    align-items: flex-start;
    justify-content: center;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;

    color: var(--bs-gray-light);
    font-size: 1.25rem;
}

.card-2col-with-img .col-info .text,
.card-2col-with-img .col-info .text-wrap{
    color: inherit;
    font-size: inherit;
}

.card-2col-with-img .col-info .card-title{
    color: inherit;
}
/*.card-2col-with-img .col-info .card-title:not(.title-lg){
    font-size: 1.875rem;
}*/

.card-2col-with-img .col-img{
    align-items: center;
    justify-content: flex-end;
}

@media (min-width: 992px) {
    .card-2col-with-img .col-img{
        height: 432px;
    }
}
/* ----------- card 2col with img ----------- */


/* ----------- cards grid ----------- */
.cards-grid{
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}

.cards-grid-item{
    --bs-card-color: var(--bs-gray-light);

    max-width: 375px;
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    margin: 0 auto;
}

.cards-grid-item .card-body{
    display: flex;
    flex-direction: column;
    padding: 0;
}

.cards-grid-item .info-wrap,
.cards-grid-item .img-wrap{
    width: 100%;
    padding: 24px 20px 20px;
}
.cards-grid-item .img-wrap{
    position: relative;
    z-index: 1;
}
.cards-grid-item .info-wrap{
    z-index: 2;
}
.cards-grid-item .info-wrap + .img-wrap{
    padding-top: 0;
}
.cards-grid-item .img-wrap + .info-wrap{
    padding-top: 4px;
    padding-bottom: 24px;
}

.cards-grid-item .box-shadow{
    box-shadow: 0 3px 15px 0 rgba(0,0,0,0.3) !important;
}

.cards-grid-item .card-title{
    color: inherit;
    font-size: 1.875rem;
}
.cards-grid-item .card-title.h1,
.cards-grid-item .card-title.h2{
    line-height: 1.1;
}
.cards-grid-item .text-wrap{
    color: inherit;
    font-size: 1rem;
}
.cards-grid-item .card-title + .text-wrap{
    margin-top: 16px;
}

@media (min-width: 768px) {
    .cards-grid-item{
        max-width: 100%;
    }
}
@media (min-width: 1200px) {
    .cards-grid-item .info-wrap{
        padding: 2.125rem;
    }
}
/* ----------- /cards grid ----------- */


/* ----------- cards list ----------- */
.cards-list-indexed{
    counter-reset: cards-counter;
}
.cards-list-indexed .card{
    margin-bottom: 3rem;
}
.cards-list-indexed .card .card-body{
    padding: 2.25rem 1.5rem;
}
.cards-list-indexed .index{
    display: block;
    font-size: 8.75rem;
    font-weight: 300;
    line-height: 0.75;
}
.cards-list-indexed .index::before{
    counter-increment: cards-counter;
    content: counter(cards-counter);
}

@media (min-width: 768px) {
    .cards-list-indexed .card .card-body{
        padding: 3rem 2.125rem;
    }
}
@media (min-width: 992px) {
    .cards-list-indexed .card{
        margin-bottom: 5rem;
    }
    .cards-list-indexed .card .card-body{
        padding: 5.75rem 4rem;
    }
    .cards-list-indexed .index{
        font-size: 12.5rem;
        text-align: center;
    }
}
/* ----------- /cards list ----------- */


/* ---------- 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 {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--bs-body-bg);
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: var(--bs-border-color);
    --bs-accordion-border-width: var(--bs-border-width);
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}*/
.card.accordion-item {
    --bs-accordion-color: var(--bs-card-color);
    --bs-accordion-bg: var(--bs-card-bg);
    --bs-accordion-border-color: var(--bs-card-border-color);
    --bs-accordion-border-width: var(--bs-card-border-width);
    --bs-accordion-border-radius: var(--bs-card-border-radius);
}

.accordion-item + .accordion-item{
    margin-top: 10px;
}

.accordion-item-head,
.accordion-item-body{
    padding: 1.25rem 1.5rem;

    color: var(--bs-gray);
}

.accordion-item-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
    cursor: pointer;
}
.accordion-item-head::after{
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-left: 1rem;
}
.accordion-item-head .title{
    color: inherit;
    font-size: 1rem;
    font-weight: normal;
}
.accordion-item-head::after{
    flex-shrink: 0;
    content: "";
    width: 1rem;
    height: 1rem;
    background: url(/images/icons/chevron_gray.svg) center no-repeat;
    background-size: 100% auto;
    margin: auto -0.25rem auto 1.25rem;
    transition: transform .15s ease-in-out;
}
.accordion-is-open .accordion-item-head::after{
    transform: rotate(-180deg);
}

.accordion-item-body{
    padding-top: 10px;
    padding-bottom: 30px;
}
.accordion-item-body .text-wrap{
    color: inherit;
    font-size: 13px;
}
/* ----------- /accordion ----------- */


/* ---------- modal ---------- */
/*.modal-backdrop{
    --bs-backdrop-bg: #44546f;
	--bs-backdrop-opacity: 0.8;
}
.modal{
	--bs-modal-bg: #fff;
}
.modal-dialog{
	--bs-modal-width: 500px;
	--modal-padding-x: 16px;
	--modal-padding-y: 20px;
}
.modal-sm{
	--bs-modal-width: 300px;
}
.modal-lg{
	--bs-modal-width: 800px;
	--modal-padding-x: 20px;
	--modal-padding-y: 24px;
}
.modal-xl{
	--bs-modal-width: 1140px;
	--modal-padding-x: 20px;
	--modal-padding-y: 24px;
}*/

.modal .btn-close{
    background-color: transparent;
    border: 0;
    padding: 8px;

    color: #777;
}
.modal-content > .btn-close{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
/* ---------- /modal ---------- */


/* ----------- slider ----------- */
.carousel{
    padding-bottom: calc(44px + 1.25rem);
    overflow: hidden;
}
.carousel.has-hover{
    padding-bottom: 44px;
}
.carousel .splide__track{
    padding-left: var(--app-content-px) !important;
}
.carousel .splide__slide{
    display: flex;
    flex-direction: column;
}
.carousel .splide__arrows{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    max-width: calc(var(--container-size-4) + var(--app-content-px) * 2);
    padding-left: var(--app-content-px);
    padding-right: var(--app-content-px);

    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.carousel .splide__arrows::before{
    content: "";
    width: 96px;
    height: 100%;
    background-color: rgba(255,255,255,.05);
    border-radius: 50px;
    position: absolute;
    top: 0;
    right: var(--app-content-px);
}
.carousel .splide__arrow{
    width: 34px;
    height: 34px;
    background-color: rgba(255,255,255,.1);
    opacity: 1;
    margin: 5px 7px;
    position: relative;
    top: 0;
    left: auto;
    right: auto;

    transform: none;
}
.carousel .splide__arrow:disabled {
    opacity: .3;
}
.carousel .splide__arrow svg{
    display: block;
    width: 17px;
    height: auto;
    fill: #fff;
}

@media (min-width: 1200px) {
    .carousel,
    .carousel.spacing-left-md{
        --spacing-left: var(--container-size-4);
    }

    .carousel.spacing-left-xxs{
        --spacing-left: var(--container-size-1);
    }
    .carousel.spacing-left-xs{
        --spacing-left: var(--container-size-2);
    }
    .carousel.spacing-left-sm{
        --spacing-left: var(--container-size-3);
    }
    .carousel.spacing-left-lg{
        --spacing-left: var(--container-size-5);
    }
    .carousel.spacing-left-xl{
        --spacing-left: var(--container-size-6);
    }

    .carousel .splide__track{
        padding-left: calc((100vw - var(--spacing-left) - var(--app-content-px)) / 2) !important;
    }
}


/* --- items --- */
.slider-item{
    --slide-width: 260px;
    --slide-gap: 1rem;
    --img-ratio: 156%;
    --slide-info-wrap-pt: 0.9375rem;
    --slide-info-wrap-pb: 0.75rem;
    --slide-info-wrap-px: 0;
    --slide-overlay-info-wrap-py: 1.25rem;
    --slide-overlay-info-wrap-px: 0.9375rem;

    flex-grow: 1;
    width: calc(var(--slide-width) + var(--slide-gap));
    padding-right: var(--slide-gap);
}

.slider-item .img-wrap{
    --bs-aspect-ratio: var(--img-ratio);

    flex-shrink: 0;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.slider-item .img-wrap img{
    display: block;
    width: 100%;
    object-fit: cover;
}
.slider-item .img-wrap.bg-color{
    background-color: #EEEDEF;
}

.slider-item > .slide-title,
.slider-item > .info-wrap{
    padding: var(--slide-info-wrap-pt) var(--slide-info-wrap-px) var(--slide-info-wrap-pb);
}
.slider-item.content-overlay .info-wrap{
    padding: var(--slide-overlay-info-wrap-py) var(--slide-overlay-info-wrap-px);
}

.slider-item .info-wrap{
    color: var(--bs-gray);
    font-size: 14px;
}

.slider-item .slide-title{
    color: inherit;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.25;
}
.slider-item .slide-title + *{
    margin-top: 0.325rem;
}

.slider-item .info-wrap .btn{
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-font-weight: 400;
}

/* sm */
.slider-item.slider-item-sm{
    --slide-width: 275px;
}

/* lg */
.slider-item-lg{
    --img-ratio: 100%;
}

/* wide */
.slider-item-wide{
    --slide-width: 75vw;
    --img-ratio: 68%;
}

/* has hover */
.carousel.has-hover{
    margin-top: -1.25rem;
    margin-bottom: -1.25rem;
}
.carousel.has-hover .slider-item{
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    transition: transform .15s ease-in-out;
}
.carousel.has-hover .slider-item .img-wrap{
    transition: box-shadow .15s ease-in-out;
}
.carousel.has-hover .slider-item:hover{
    transform: translateY(-10px);
}
.carousel.has-hover .slider-item:hover .img-wrap{
    box-shadow: 0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.3);
}

/* overlay */
.slider-item.content-overlay .info-wrap{
    position: absolute;
    bottom: 0;
    left: 0;
    right: var(--slide-gap);
    z-index: 3;

    color: #fff;
}
/*.slider-item.content-overlay .img-wrap::after{
    content: "";
    width: 100%;
    height: 60%;
    background: #000;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
}*/
.carousel.has-hover .slider-item.content-overlay .info-wrap{
    bottom: 1.25rem;
}

/* card */
.cards-carousel .slider-item{
    display: flex;
    flex-direction: column;
}
.carousel .slider-item .card{
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 5px;
    --bs-card-title-font-size: 1.25rem;
    --bs-card-title-line-height: 1.2;

    --index-font-size: var(--fs-h3);

    flex-grow: 1;
    font-size: 1rem;
}
.carousel .slider-item .card.ratio-1x1{
    min-height: var(--slide-width);
}
.carousel .slider-item .card-title{
    font-size: var(--bs-card-title-font-size);
}
.carousel .slider-item .card-title:last-child{
    --bs-card-title-spacer-y: 0 !important;
}
.cards-carousel .index{
    display: block;
    padding-bottom: 1.5rem;
    margin-bottom: auto;

    color: var(--bs-primary-text-emphasis);
    font-size: var(--index-font-size);
    font-weight: bold;
    line-height: 1.2;
}
.cards-carousel .card-body.flex-column .card-title{
    min-height: calc((var(--bs-card-title-font-size) * var(--bs-card-title-line-height)) * 2);
}


@media (min-width: 576px) {
    .slider-item{
        --slide-info-wrap-px: 0.9375rem;
    }
    .slider-item .info-wrap{
        font-size: 1rem;
    }
    .slider-item .info-wrap .slide-title{
        font-size: 1.5rem;
    }
    .slider-item .info-wrap .slide-title ~ .btn{
        margin-top: 0.75rem;
    }

    /* card */
    .carousel .slider-item .card{
        --bs-card-title-spacer-y: 0.625rem;
        /*--bs-card-title-font-size: 1.5rem;*/
    }

    /* lg */
    .slider-item.slider-item-lg{
        --slide-width: 400px;
        --slide-info-wrap-pt: 2.25rem;
    }
    .slider-item.slider-item-lg .slide-title{
        font-size: var(--fs-h3);
        font-weight: bold;
    }
}
@media (min-width: 768px) {
    .slider-item{
        --slide-gap: 1.25rem;
        --slide-info-wrap-pt: 1.5rem;
        --slide-info-wrap-px: 1.5rem;
        --slide-overlay-info-wrap-py: 1.5rem;
        --slide-overlay-info-wrap-px: 1.5rem;
    }
    .slider-item.content-overlay {
        --slide-info-wrap-py: 1.5rem;
    }
    .slider-item .info-wrap .slide-title + *{
        margin-top: 0.625rem;
    }
    .slider-item .info-wrap .slide-title ~ .btn{
        margin-top: 0.875rem;
    }

    /* wide */
    .slider-item.slider-item-wide{
        --slide-width: 538px;
        --slide-info-wrap-pt: 1.5rem;
        --slide-info-wrap-px: 2rem;
    }

    /* card */
    .carousel .slider-item .card{
        --bs-card-spacer-y: 2rem;
        --bs-card-spacer-x: 1.25rem;
    }
}
@media (min-width: 992px) {
    .slider-item:not(.slider-item-sm):not(.slider-item-lg):not(.slider-item-wide) {
        --slide-width: 340px;
    }

    /* lg */
    .slider-item .info-wrap .slide-title-lg {
        font-size: 1.875rem;
    }

    /* card */
    .carousel .slider-item .card{
        --bs-card-title-font-size: var(--fs-h3);
    }
}
@media (min-width: 1200px) {
    .slider-item:not(.slider-item-sm):not(.slider-item-lg):not(.slider-item-wide) {
        --slide-width: 375px;
    }

    /* lg */
    .slider-item.slider-item-lg{
        --slide-width: 453px;
        --slide-gap: 50px;
    }
}
/* ----------- /slider ----------- */


/* ---------- logos ---------- */
.logos-grid{
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 1.5rem;

    align-items: center;
    justify-content: center;
}
.logos-grid .logos-grid-item{
    display: flex;
    opacity: .6;
    transition: opacity .15s ease-in-out;
}
.logos-grid .logos-grid-item img{
    max-width: 130px;
    max-height: 40px;
    object-fit: contain;
}
.logos-grid .logos-grid-item:hover{
    opacity: 1;
}
/* ---------- /logos ---------- */


/* ---------- hero ---------- */
.hero-section{
    display: flex;
    flex-direction: column;
    min-height: 800px;
    padding: 6.5rem 0 5rem;
}

.hero-bg-1{
    background: #07051A url(/images/bg/hero_1.jpg) center bottom no-repeat;
}
.hero-bg-2{
    background: var(--bs-body-bg) url(/images/bg/hero_2.png) center top no-repeat;
}
.hero-bg-3{
    background: var(--bs-body-bg) url(/images/bg/bg_1.jpg) center bottom no-repeat;
}

.hero-section .btn{
    min-width: 204px;
}

/* with images */
.hero-section-with-images .section-title{
    margin-bottom: 0;
}
.hero-section-with-images .text{
    font-size: 1.375rem;
}

.hero-section-with-images .img-container{
    margin-top: 2.125rem;
    width: 100%;
}
.hero-section-with-images .img-container > div{
    margin: 0 -2rem;
}
.hero-section-with-images .img-container .row{
    --bs-gutter-x: 1.25rem;

    align-items: flex-end;
}

.hero-section-with-images .img-container img{
    display: block;
    width: 100%;
}

.hero-section-with-images .img-container .row > div:nth-child(2){
    width: 40.345%;
    transform: translateY(25px);
}

@media (max-width: 991px) {
    .hero-section-with-images .img-container > div{
        margin: 0 -40vw;
    }
}
/* ---------- /hero ---------- */


/* ---------- statistics ---------- */
.statistics-wrap{
    padding-top: 3rem;
    font-size: 13px;
}
.statistics-wrap .row{
    align-items: flex-end;
    justify-content: space-around;
}
.statistics-wrap .row > div{
    gap: 1.25rem;
}
.statistics-wrap .value{
    font-size: 3.75rem;
    font-weight: 500;
    line-height: 1;
}
.statistics-wrap p{
    margin-top: auto;
}
.statistics-wrap img{
    flex-shrink: 0;
    max-width: 100%;
    margin-bottom: 0.365rem;
}
/* ---------- /statistics ---------- */


/* ---------- services ---------- */
.services-grid{
    --bs-gutter-x: 0.75rem;
    --bs-gutter-y: 0.75rem;
}
.services-grid-item{
    display: block;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    position: relative;
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}
.services-grid-item .ratio{
    --bs-aspect-ratio: 100%;
}
.services-grid-item .title{
    font-size: 1rem;
    padding: 1.125rem;
    position: absolute;
    bottom: 0;
    left: 0;
}
.services-grid-item:hover{
    box-shadow: 0 0.125rem 1.25rem 0 rgba(var(--bs-dark-rgb),1);
    transform: translateY(-0.25rem);
}

@media (min-width: 768px) {
    .services-grid{
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    .services-grid-item .title {
        font-size: 1.25rem;
    }
}
@media (min-width: 992px) {
    .services-grid-item .title {
        font-size: 1.4rem;
    }
}
/* ---------- /services ---------- */


/* ---------- portfolio grid ---------- */
.portfolio-items-grid{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 2.75rem;
}
.portfolio-grid-item{
    display: flex;
    flex-direction: column;
}
.portfolio-grid-item .img-wrap,
.portfolio-grid-item .video-wrap{
    --bs-aspect-ratio: 60.64%;
    border-radius: var(--bs-border-radius-lg);
}
.portfolio-grid-item .info-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-top: 0.75rem;
}
.portfolio-grid-item .title{
    font-size: 1.25rem;
}

.portfolio-grid-item.is-featured{
    background-color: rgba(var(--bs-dark-rgb),.6);
    border-radius: var(--bs-border-radius-lg);
    padding: 1.125rem 1rem;
}


@media (min-width: 768px) {
    .portfolio-grid-item .title{
        font-size: 1.5rem;
    }

    .portfolio-grid-item.is-featured{
        flex-direction: row-reverse;
        padding: 1.5rem 1.25rem;
    }
    .portfolio-grid-item.is-featured .img-wrap,
    .portfolio-grid-item.is-featured .video-wrap{
        flex-grow: 1;
    }
    .portfolio-grid-item.is-featured .info-wrap{
        flex-shrink: 0;
        width: calc(50% + 1.5rem);
        padding-right: 1.5rem;
        margin: auto 0;
    }
    .portfolio-grid-item.is-featured .title{
        max-width: 400px;
        font-size: 1.625rem;
    }
}
@media (min-width: 992px) {
    .portfolio-items-grid{
        --bs-gutter-x: 2.5rem;
        --bs-gutter-y: 3.125rem;
    }
    .portfolio-grid-item.is-featured .info-wrap{
        width: calc(50% + 1.75rem);
        padding-right: 1.5rem;
    }
    .portfolio-grid-item.is-featured .title{
        font-size: 1.875rem;
    }
}
/* ---------- /portfolio grid ---------- */


/* ----------- media ----------- */
.media-items-grid{
    --bs-gutter-x: 2.125rem;
    --bs-gutter-y: 3rem;
}
.media-grid-item{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    color: var(--bs-secondary-color);
    font-size: 1rem;
}
.media-grid-item .img-wrap{
    --bs-aspect-ratio: 56.25%;

    border-radius: var(--bs-border-radius);
}

.media-grid-item .info-wrap{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.media-grid-item .title{
    color: var(--bs-body-color);
    font-size: var(--fs-h3);
}

@media (min-width: 576px) {
    .media-items-grid{
        --bs-gutter-y: 2.125rem;
    }

    .media-grid-item.is-featured{
        flex-direction: row;
    }
    .media-grid-item.is-featured .img-wrap{
        flex-shrink: 0;
        width: 60%;
        border-radius: var(--bs-border-radius-lg);
    }
    .media-grid-item.is-featured .info-wrap{
        align-self: center;
    }
}
/* ----------- /media ----------- */


/* ----------- section 2col with img ----------- */
.section-2col-with-img-wide{
    width: 100%;
    /*overflow: hidden;*/
}

.section-2col-with-img-wide .col-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.section-2col-with-img-wide .section-title{
    margin-bottom: 2rem;
    text-align: left;
}
.section-2col-with-img-wide .text-wrap{
    line-height: 1.4;
}
.section-2col-with-img-wide .text-wrap + .btn{
    margin-top: 2rem;
}

.section-2col-with-img-wide .col-img > figure{
    --img-width: 100%;

    width: var(--img-width);
}
.section-2col-with-img-wide .col-img img{
    display: block;
    width: 100%;
    border-radius: var(--bs-border-radius);
}

@media (min-width: 992px) {
    .section-2col-with-img-wide .col-info{
        padding-right: 0;
    }
    .section-2col-with-img-wide .col-img{
        padding-left: 2.5rem;
    }

    .section-2col-with-img-wide .col-img > figure{
        --img-width: 863px;
    }

    .img-size-1{
        --img-width: 698px !important;
    }
    .img-size-2{
        --img-width: 863px !important;
    }
}
@media (min-width: 1200px) {
    .section-2col-with-img-wide .col-img{
        padding-left: 5rem;
    }
}

@media (max-width: 991px) {
    .section-2col-with-img-wide .col-img{
        margin-bottom: 2rem;
    }
}
/* ----------- /section 2col with img ----------- */


/* ---------- contact ---------- */
.contact-section .card {
    /*--bs-card-bg: rgba(var(--bs-dark-rgb),.6);*/
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.contact-section a:not(.btn){
    color: inherit;
}

.contact-section .btn {
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-border-radius: 0.5rem;
    --bs-btn-font-weight: 400;
    --bs-btn-color: var(--bs-primary);
    --bs-btn-bg: var(--btn-primary-light);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--btn-primary-light-hover);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: var(--btn-primary-light-active);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--btn-disabled-color);
    --bs-btn-disabled-bg: var(--btn-disabled-bg);
    --bs-btn-disabled-border-color: var(--btn-disabled-bg);
}

.contact-section .tel{
    display: inline-block;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.contact-section .contact-info-wrap > div{
    margin-bottom: 1.25rem;
}
.contact-section .contact-info-wrap > div:last-child{
    margin-bottom: 0.625rem;
}
.contact-section .contact-info-wrap > div > *{
    display: block;
}
.contact-section .contact-info-wrap > div > span + *{
    font-weight: bold;
}
.contact-section svg {
    display:block;
    width: 24px;
    height: auto;
    fill: rgba(255,255,255,.8);
}
/*.contact-section svg.facebook {
    fill: #3274EB
}
.contact-section svg.linkedin {
    fill: #2371AD
}*/

/*@media (max-width: 374px) {
    .contact-section .tel{
        font-size: 26px;
    }
}
@media (max-width: 319px){
    .contact-section .tel{
        font-size: 22px;
    }
}*/

@media (min-width: 400px){
    .contact-section .card{
        --bs-card-spacer-y: 2.5rem;
        --bs-card-spacer-x: 2rem;
    }
}
@media (min-width: 576px){
    .contact-section .tel{
        font-size: 3.125rem;
    }
    .contact-section .contact-info-wrap > div{
        display: flex;
    }
    .contact-section .contact-info-wrap > div > span{
        width: 115px;
    }
}
@media (min-width: 767px){
    .contact-section .card-body{
        padding: 3.125rem 2.5rem 3.75rem 6.25rem;
    }
}
@media (min-width: 992px){
    .contact-section .card-body{
        padding-left: 9.375rem;
    }
}
/* ---------- /contact ---------- */


/* ---------- timeline ---------- */
.section-timeline{
    --item-width: 100%;
    text-align: left;
}

.section-timeline .section-head{
    --section-head-mb: 4rem;
}
.section-timeline .section-head > *{
    max-width: var(--item-width);
}
.section-timeline .section-title{
    margin-bottom: 1.5rem;
    text-align: left;
}

.timeline-item{
    padding-bottom: 3.5rem;
    position: relative;
}
.timeline-item:last-child{
    padding-bottom: 0;
}
.timeline-item .date{
    display: block;
    margin-bottom: 0.75rem;

    font-size: 1rem;
    font-weight: bold;
}
.timeline-item .title{
    font-size: var(--fs-h3);
    margin-bottom: 1.25rem;
}
.timeline-item .title,
.timeline-item .text-wrap{
    max-width: var(--item-width);
}

@media (min-width: 768px) {
    .section-timeline{
        --section-py: 7rem;
        --item-width: 470px;
    }

    .section-timeline .section-head{
        --section-head-mb: 5rem;
    }
    .section-timeline .section-title{
        margin-bottom: 3rem;
    }

    .section-timeline .section-head,
    .timeline-item{
        padding-left: 165px;
    }

    .timeline-item{
        padding-bottom: 7rem;
    }
    .timeline-item .title{
        margin-bottom: 2rem;
    }

    .timeline-item::before{
        content: "";
        width: 1px;
        background-color: var(--bs-border-color);
        position: absolute;
        top: 15px;
        bottom: -15px;
        left: 6px;
        z-index: 1;
    }
    .timeline-item:first-child::before{
    }
    .timeline-item:last-child::before{
        background: #2FF7C1;
        background: linear-gradient(180deg,rgba(47, 247, 193, 1) 0%, rgba(47, 247, 193, 1) 60%, rgba(1, 1, 1, 1) 100%);
        bottom: 0;
    }

    .timeline-item .date{
        display: flex;
        align-items: center;
        gap: 0.75rem;
        position: absolute;
        top: 7px;
        left: 0;
        z-index: 2;
    }
    .timeline-item .date::before{
        content: "";
        width: 13px;
        height: 13px;
        background-color: var(--bs-border-color);
        border: 1px solid var(--bs-body-bg);
        border-radius: 50%;
    }
    .timeline-item:last-child .date::before{
        background-color: var(--color-primary-dark);
        border-color: var(--color-success-dark);
        border-width: 2px;
    }
}
@media (min-width: 992px) {
    .section-timeline .section-head,
    .timeline-item{
        margin-left: 85px;
    }
}
/* ---------- /timeline ---------- */


/* ----------- item 2col vertical ----------- */
.item-2col-vertical{
    display: flex;
    justify-content: center;
}

.item-2col-vertical .img-wrap{
    flex-grow: 1;
    max-width: 376px;
}
.item-2col-vertical .img-wrap img{
    display: block;
    width: 100%;
}

.item-2col-vertical .info-wrap{
    flex-grow: 1;
    max-width: 294px;
}
.item-2col-vertical .info-wrap > div{
    margin: 3.5rem 0 0;
}
.item-2col-vertical .info-wrap .title{
    margin-bottom: 1.125rem;
}

@media (min-width: 768px) {
    .item-2col-vertical{
        display: flex;
        justify-content: center;
        gap: 2.5rem;
    }
    .item-2col-vertical .info-wrap{
        max-width: 294px;
    }
}
@media (min-width: 992px) {
    .item-2col-vertical{
        gap: 5.75rem;
    }
}

@media (max-width: 767px) {
    .item-2col-vertical{
        flex-direction: column;
        align-items: center;
    }
}
/* ----------- /item 2col vertical ----------- */


/* ----------- boxed items grid ----------- */
.boxed-items-grid{
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
}
.boxed-items-grid > div{
    display: flex;
    flex-direction: column;
}
.boxed-grid-item + .boxed-grid-item{
    margin-top: 1.25rem;
}

.boxed-grid-item{
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: var(--bs-border-radius);
    position: relative;
    overflow: hidden;
}
.boxed-grid-item::before{
    content: '';
    width: 100%;
    height: 100%;
    background: rgb(99,56,220);
    background: linear-gradient(180deg, rgba(99,56,220,0.4) 0%, rgba(99,56,220,1) 100%);
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.boxed-grid-item .wrap{
    padding: 1.375rem 1.125rem;
    position: relative;
    z-index: 2;
}

.boxed-grid-item,
.boxed-grid-item .title{
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.1;
}

.boxed-grid-item.item-primary,
.boxed-grid-item.item-secondary-1{
    flex-grow: 1;
}

.boxed-grid-item.item-primary,
.boxed-grid-item.item-primary .wrap{
    display: flex;
    flex-direction: column;
}
.boxed-grid-item.item-primary .wrap{
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;
    padding: 1.375rem 1rem 1.875rem;
    text-align: center;
}

.boxed-grid-item.item-secondary-1{
    height: 229px;
}
.boxed-grid-item.item-secondary-1::before{
    opacity: 0.8;
}
.boxed-grid-item.item-secondary-1 .wrap{
    position: absolute;
    bottom: 0;
    left: 0;
}
.boxed-grid-item.item-secondary-1 .title{
    color: var(--bs-gray-light);
    font-size: 1.625rem;
}

.boxed-grid-item.item-secondary-2 .wrap{
    display: flex;
    align-items: center;
}
.boxed-grid-item.item-secondary-2 .wrap img{
    flex-shrink: 0;
    width: 3.75rem;
    margin-right: 0.875rem;
}

@media (min-width: 576px) {
    .boxed-grid-item,
    .boxed-grid-item .title{
        font-size: 1.375rem;
    }

    .boxed-grid-item.item-primary .wrap{
        padding: 1.375rem 2.375rem 2.5rem;
    }
}
@media (min-width: 992px) and (max-width: 1140px) {
    .boxed-grid-item.item-secondary-2 .wrap img{
        width: 2.5rem;
        margin-right: 0.625rem;
    }
    .boxed-grid-item.item-secondary-2 .title{
        font-size: 1.25rem;
    }
}
/* ----------- /boxed items grid ----------- */


/* ----------- kiosk ----------- */
.kiosk-card .card-body{
    padding-top: 1.25rem;
    padding-bottom: 0;
}

.kiosk-card .img-wrap{
    display: flex;
    justify-content: center;
}
.kiosk-card .img-wrap > div{
    position: relative;
}
.kiosk-card .img-wrap img{
    display: block;
    max-width: 100%;
}
.kiosk-card .img-wrap img:not(:first-child){
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}
.kiosk-card .img-wrap img.show{
    opacity: 1;
}

.kiosk-card .info-wrap{
    padding: 11% 0;
}
.kiosk-card .form-check{
    font-weight: 400;
}
.kiosk-card .form-check .title{
    display: block;
    padding-bottom: 3px;

    /*color: var(--bs-gray-dark);*/
    font-size: 1rem;
    font-weight: bold;
}

@media (min-width: 768px) {
    .kiosk-card .img-wrap {
        max-width: 375px;
        margin: auto auto 0;
    }
}

@media (max-width: 767px) {
    .kiosk-card .col-info{
        padding-top: 27%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .kiosk-card .info-wrap{
        width: 80%;
        background-color: rgba(251, 251, 251, 0.95) !important;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        border-radius: var(--bs-border-radius);
        padding: 1.25rem;
        margin: 0 auto;
    }
}
@media (max-width: 575px) {
    .kiosk-card .card-body{
        padding: 0 !important;
    }
    .kiosk-card .col-info{
        padding-top: 25%;
    }
    .kiosk-card .info-wrap{
        width: 90%;
    }
}
@media (max-width: 359px) {
    .kiosk-card .col-info{
        padding-top: 18%;
    }
}
/* ----------- /kiosk ----------- */



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


/* ---------- portfolio ---------- */
.portfolio-item-details {
    padding-bottom: 0;
}

.portfolio-item-details .head-wrap{
    min-height: 240px;
    background: rgb(6,3,39);
    background: linear-gradient(180deg, rgba(6,3,39,1) 0%, rgba(53,11,113,1) 100%);
    padding: calc(var(--app-header-height) + 3.75rem) 0 3.75rem;
    position: relative;
    z-index: 10;
}

.portfolio-item-details .head-wrap .img {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
.portfolio-item-details .head-wrap .img::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.portfolio-item-details .head-wrap .video-container{
    width:104%;
    height:104%;
    max-height:828px;
    /*background: #01C689;*/
    overflow:hidden;

    position:absolute;
    top:-2%;
    left:-2%;
    z-index:5;
}
.portfolio-item-details .head-wrap .video-container.html5-video video{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.portfolio-item-details .head-wrap .video-container.yt-video > div {
    position:absolute;
    left: 50%;
    top: 50%;
    transform:translateX(-50%) translateY(-50%);
}

.portfolio-item-details .head-wrap article{
    position: relative;
    z-index: 5;
}

.portfolio-item-details article .row{
    --bs-gutter-x: 14px;
    --bs-gutter-y: 10px;
}

.portfolio-item-details article .date{
    color: rgba(255,255,255,0.8);
    font-size: 25px;
    font-weight: bold;
    line-height: 1;
}

.portfolio-item-details article .title{
    /*font-size: 2.5rem;*/
    font-weight: bold;
    margin-bottom: 25px;
}

.portfolio-item-details article .text{
    margin-bottom: 30px;

    color: #fff;
    font-size: 1rem;
    line-height: 1.5;
}

.portfolio-item-details article h2{
    font-size: 1.75rem;
}
.portfolio-item-details article h3{
    font-size: 1.375rem;
}

.portfolio-item-details .item-link-wrap{
    margin: 2.125rem 0 2.5rem;
}
/*.portfolio-item-details .item-link{
    display: inline-flex;
    align-items: center;
    background-color: rgba(85,71,214,1);
    border-radius: 110px;
    padding: 10px 26px;

    color: #fff;
    font-size: 22px;
    text-decoration: none;
    word-break: break-all;
}
.portfolio-item-details .item-link:hover{
    background-color: rgba(85,71,214,0.8);
}*/

.portfolio-item-details .app-btns{
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1.375rem;
}
.portfolio-item-details .app-btns a{
    display: inline-block;
}
.portfolio-item-details .app-btns a img{
    display: block;
    height: 2.5rem;
}

.portfolio-item-details article > *:last-child{
    margin-bottom: 0;
}

/*.portfolio-item-details .tags{
	width: 100%;
	max-width: 1034px;
	border-top: 1px solid rgba(255,255,255,0.5);
	padding: 23px 10px;
	margin: 0 auto;
}

.portfolio-item-details .tags > *{
	display: inline-block;
	background-color: #fff;
	border-radius: 6px;
	padding: 6px 14px;
	margin:5px;

	color: #1f999d;
	font-size: 14px;
	line-height: 20px;
}*/

/*@media (min-width: 992px){
    .portfolio-item-details article .title-xxl{
        font-size: 60px;
    }
}*/


.portfolio-item-details .screens{
    background: -moz-linear-gradient(top, #209e9a 0%, #2ad27b 100%);
    background: -webkit-linear-gradient(top, #209e9a 0%,#2ad27b 100%);
    background: linear-gradient(to bottom, #209e9a 0%,#2ad27b 100%);
    text-align: center;
}
.portfolio-item-details .screens figure{
    display: block;
    width: 100%;
    padding: 6.25rem var(--app-content-px);
}

.portfolio-item-details .screens img{
    display: block;
    max-width: 1100px;
    margin: 0 auto;
}

.portfolio-item-details .screens .desktop-screen{
    display: flex;
    justify-content: center;
}
.portfolio-item-details .screens .desktop-screen .browser-head{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    background: #babbbb url(/images/browser/browser_left_buttons.png) 14px center no-repeat;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 0 80px;
}
.portfolio-item-details .screens .desktop-screen .browser-head > span{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 510px;
    height: 26px;
    background-color: #dddddd;
    border-radius: 5px;
    padding: 5px 10px;
    overflow: hidden;

    color: #636363;
    font-size: 14px;
    line-height: 1;
    text-align: center;

    white-space: nowrap;
    text-overflow: ellipsis;
}
.portfolio-item-details .screens .desktop-screen .browser-head > span a {
    color: inherit;
    text-decoration: none;
}
.portfolio-item-details .screens .desktop-screen .browser-head img{
    display: none;
}

.portfolio-item-details .screens figcaption {
    color: #fff;
    font-size: 14px;
    line-height: 18px;
    padding-top: 20px;
}

.portfolio-item-details .screens .bg-white figcaption {
    color: #4b4a4a;
}


@media(max-width:1130px){
    .portfolio-item-details .screens img{
        max-width: 100%;
    }
}

@media(max-width:767px){
    .portfolio-item-details .screens .desktop-screen .browser-head{
        height: auto;
        background: none;
        padding: 0;
    }
    .portfolio-item-details .screens .desktop-screen .browser-head img{
        display: block;
        width: 100%;
    }
    .portfolio-item-details .screens .desktop-screen .browser-head > span{
        display: none;
    }
}
/* ---------- /portfolio ---------- */


/* ----------- pos ----------- */
.pos-hero-section{
    background-color: rgba(var(--bs-dark-rgb),.5);
    padding: 0;
}
.pos-hero-section .col-info{
    padding-top: 50px;
    padding-bottom: 50px;
}
.pos-hero-section .page-title{
    margin: 0;
    padding: 0;
}
.pos-hero-section .text-wrap{
    max-width: 550px;
}
.pos-hero-section .col-img img{
    display: block;
    max-width: 100%;
}

@media (min-width: 992px) {
    .pos-hero-section .col-info{
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .pos-hero-section .page-title{
        margin-right: -60px;
    }

    .pos-hero-section .col-img{
        align-self: flex-end;
        flex-shrink: 0;
        width: 38%;
        max-width: 410px;
        padding-top: 24px;
    }
    .pos-hero-section .col-img img{
        width: 100%;
    }
}

@media (max-width: 991px) {
    .pos-hero-section{
        text-align: center;
    }
    .pos-hero-section .row{
        justify-content: center;
    }
    .pos-hero-section .text-wrap,
    .pos-hero-section .col-img img{
        margin: 0 auto;
    }
}
/* ----------- /pos ----------- */


/* ---------- utility tools ---------- */

/* grid */
.tools-grid{
    --bs-gutter-x: 1.25rem;
    --bs-gutter-y: 1.25rem;
    --bs-aspect-ratio: 68%;
}
.tools-grid .card{
    --bs-card-spacer-y: 1.625rem;
    --bs-card-spacer-x: 1.625rem;
    --bs-card-border-radius: var(--bs-border-radius-sm);

    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.tools-grid .card-body{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 14px;
}
.tools-grid .card figure img{
    object-fit: cover;
    transition: transform 0.2s linear;
}
.tools-grid .card:hover figure img{
    transform: scale(1.05);
}
/*.tools-grid-item{
    flex-grow: 1;
    display: block;
    background-color: rgba(255,255,255,0.2);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 5px;
    overflow: hidden;

    color: #fff;
    font-size: 14px;
}
.tools-grid-item figure{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.tools-grid-item figure img{
    object-fit: cover;
    transition: transform 0.2s linear;
}
.tools-grid-item figure::before{
    padding-top: 68%;
}
.tools-grid-item .info-wrap{
    padding: 26px;
}
.tools-grid-item .title{
    font-size: 30px;
    margin-bottom: 15px;
}

.tools-grid-item:hover{
    color: #fff;
}
.tools-grid-item:hover figure img{
    transform: scale(1.05);
}*/

/* form */
.tools-copy-btn{
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    --bs-btn-border-radius: 50%;
    --btn-size: 22px;
    --icon-size: 12px;
    position: absolute;
    top: 6px;
    right: 7px;
}

/* --- ip --- */
.ip-wrap{
    max-width: 472px;
    margin: 0 auto;
}
.ip-wrap .title{
    color: #fff;
    font-size: 22px;

    margin-bottom: 15px;
}
.ip-wrap .card{
    background-color: rgba(255,255,255,0.08);
    border-radius: 50px;
}
.ip-wrap .card-body{
    color: #fff;
    font-size: 34px;
    font-weight: bold;
    text-align: center;
}

@media (min-width: 576px){
    .ip-wrap .title{
        font-size: 26px;
        margin-left: 35px;
    }
    .ip-wrap .card-body{
        font-size: 50px;
    }
}

@media (max-width: 575px){
    .ip-wrap .title{
        text-align: center;
    }
}
/* ---------- /utility tools ---------- */


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













/*
==============================================
animations
==============================================
*/
.animated {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    visibility: visible !important;
}


/* ---------- fadeIn ---------- */
.fadeIn {
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    visibility: visible;
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0.0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0.0;
    }

    100% {
        opacity: 1;
    }
}


/* ---------- fadeInUp ---------- */
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

/* ---------- fadeInDown ---------- */
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

/* ---------- fadeInLeft ---------- */
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

/* ---------- fadeInRight ---------- */
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

/* ---------- fadeInLeftLg ---------- */
@-webkit-keyframes fadeInLeftLg {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInLeftLg {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeftLg {
    -webkit-animation-name: fadeInLeftLg;
    animation-name: fadeInLeftLg;
}

/* ---------- fadeInRightLg ---------- */
@-webkit-keyframes fadeInRightLg {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInRightLg {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRightLg {
    -webkit-animation-name: fadeInRightLg;
    animation-name: fadeInRightLg;
}

/* ---------- wiggle ---------- */
.wiggle {
    animation: wiggle 5s linear infinite;
    animation-play-state: running;
    animation-delay: 2s;
}

@keyframes wiggle {
    2% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    4% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }

    6% {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    8% {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }

    10% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }

    12% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }

    14% {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }

    16% {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }

    18% {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }

    20% {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}