/* ==================== 
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-bg: #F4F4F4;
    --bs-body-bg-rgb: 244, 244, 244;

    --bs-body-color-rgb: 0,0,0;
    --bs-body-color: #000;
    --bs-secondary-color: var(--bs-secondary);


    --bs-primary-rgb: 120,118,183;
    --bs-primary: #7876B7;
    --bs-primary-text-emphasis: #5F5CAD;

    --bs-secondary-rgb: 144,144,144;
    --bs-secondary: #909090;

    --bs-dark-rgb: 26,26,26;
    --bs-dark: #1a1a1a;

    --bs-link-color: var(--bs-primary);
    --bs-link-hover-color: var(--bs-primary-text-emphasis);


    --app-header-height: 60px;
    --app-scrolled-header-height: 60px;
    --app-content-px: 1.25rem;
    --app-content-py: 2rem;

    --container-size-1: 400px;
    --container-size-2: 640px;
    --container-size-3: 860px;
    --container-size-4: 1200px;
    --container-size-5: 1300px;


    --fs-h1: 2.25rem;
    --fs-h2: 1.5rem;
    --fs-h3: 1.375rem;
    --fs-h4: 1.25rem;
    --fs-h5: 1.125rem;
    --fs-h6: 1rem;

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

    --bs-border-radius: 0;
}

@media (min-width: 768px) {
    :root{
        --app-header-height: 80px;
        --app-content-px: clamp(1.5rem, 0.285rem + 2.532vw, 2.5rem);
        --app-content-py: clamp(2rem, 0.481rem + 3.165vw, 3.25rem);
    }
}
@media (min-width: 992px) {
    :root{
        --fs-h1: 2.5rem;
        --fs-h2: 1.75rem;
        --fs-h3: 1.5rem;

        --fs-text: var(--fs-text3);
    }
}



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


/* ----------- preloader ----------- */
/*.preloader-overlay{
    width: 100vw;
    height: 100vh;
    background-color: #f00;
    position: fixed;
    top: 0;
    left: 0;
    z-index: ;
}*/
#jpreLoader{
    --top: var(--app-header-height);
    width: 100%;
    height: 5px;
    background-color: var(--bs-dark);
    top: var(--top) !important;
    z-index: 999;
}
#jpreLoader > *{
    z-index: 5;
}
.is-scrolled #jpreLoader{
    --top: var(--app-scrolled-header-height);
}
#jpreLoader .bg-color{
    background-color: var(--bs-primary) !important;
}

.content-is-loading{
    height: calc(100vh - var(--app-header-height));
    overflow: hidden !important;
}
.content-is-loading::after{
    content: "";
    width: 100vw;
    height: 100vh;
    background-color: var(--bs-dark);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
}
.content-is-loading ~ .app-footer{
    display: none;
}
/* ----------- /preloader ----------- */


/* ----------- container ----------- */
.container,
.container-xxs,
.container-xs,
.container-sm,
.container-md,
.container-lg,
.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-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-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-fluid,
.t63-section[data-content-size="fluid"] .container{
    max-width: 100%;
}
/* ----------- /container ----------- */


/* ----------- row ----------- */
@media (min-width: 992px) {
    .row-bordered > div{
        border-right: 1px solid var(--bs-secondary);
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}
@media (max-width: 991px) {
    .row-bordered > div{
        border-bottom: 1px solid var(--bs-secondary);
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .row-bordered > div:last-child{
        border-bottom: none;
    }
}

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


/* ----------- icons ----------- */
/*i.icon{
	display: inline-block;
	width: 16px;
	position: relative;
}
i.icon::before{
	content: "";
	display: block;
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	padding-top: 100%;
}

.i-lg{
	width: 20px;
}*/
/* ----------- /icons ----------- */


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


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

.theme1{
    --theme-color: #08a7cf;
    --theme-bg-color: var(--theme-color);
}
.theme2{
    --theme-color: #0fb0aa;
    --theme-bg-color: var(--theme-color);
}
.theme3{
    --theme-color: #41b04a;
    --theme-bg-color: var(--theme-color);
}
.theme4{
    --theme-color: #8c4b9f;
    --theme-bg-color: var(--theme-color);
}
.theme5{
    --theme-color: #ca177b;
    --theme-bg-color: var(--theme-color);
}
.theme6{
    --theme-color: #e85623;
    --theme-bg-color: var(--theme-color);
}
.theme7{
    --theme-color: #fdd209;
    --theme-bg-color: var(--theme-color);
}
.theme8{
    --theme-color: #79787d;
    --theme-bg-color: var(--theme-color);
}

.bg-color{
    background-color: var(--theme-bg-color) !important;
}
.text-color{
    color: var(--theme-color) !important;
}
/* ----------- /colors ----------- */


/* ---------- scroll ---------- */
/*.os-scrollbar.os-scrollbar-vertical{
	width: 14px !important;
	padding: 8px 4px !important;
}
.os-scrollbar-handle{
	background-color: #D3D3D3 !important;
	border-radius: 4px !important;
}

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

.horizontal-scrollable-container{
	width: 100%;
	overflow: auto;
}*/

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

.app-page ::-webkit-scrollbar,
.modal ::-webkit-scrollbar{
    width: 6px;
    height: 6px;
}
.app-page ::-webkit-scrollbar-track,
.modal ::-webkit-scrollbar-track{
    background-color: #f4f4f4;
    border-radius: 99px;
    opacity: .1;
}
.app-page ::-webkit-scrollbar-thumb,
.modal ::-webkit-scrollbar-thumb{
    background: #a4a3a3;
    border-radius: 10px;
}*/
/* ---------- /scroll ---------- */



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


.app{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100%;
    padding-top: var(--app-header-height);
}


/* ---------- header ---------- */
.app-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: var(--app-header-height);
    background-color: #fff;
    padding: 10px var(--app-content-px);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
}
.app-header .logo{
    flex-shrink: 0;
}


.app-header a{
    --bs-link-decoration: none;

    color: var(--bs-secondary);
}
.app-header a:hover,
.app-header a.active{
    color: var(--bs-primary);
}

.app-header nav a{
    display: inline-block;
    padding: 0.25rem 0;

    color: var(--bs-secondary);
    font-size: 1.5rem;
    font-weight: 800;
}

.app-header .social-items-wrap{
    display: flex;
    gap: 0.5rem;
}
.app-header .social-items-wrap img,
.app-header .social-items-wrap svg{
    display: block;
    width: 1.5rem;
    height: auto;
}

@media (min-width: 768px) {
    .app-header {
        transition: height 0.25s linear,background-color 0.25s linear;
    }
    .is-scrolled .app-header{
        background-color: rgba(255,255,255,.9);
        height: var(--app-scrolled-header-height);
    }

    .app-header .hamburger{
        display: none !important;
    }

    .app-header .nav-wrap,
    .app-header nav ul{
        display: flex !important;
        align-items: center;
        gap: 2.25rem;
    }
    .app-header nav a{
        padding: 0;
        font-size: 1.25rem;
    }
}

@media (max-width: 767px) {
    .app-header .nav-wrap{
        display: none;
        width: 100%;
        height: 100vh;
        background-color: var(--bs-body-bg);
        padding: var(--app-content-px);
        position: fixed;
        top: var(--app-header-height);
        left: 0;
        text-align: right;
    }
    .app-header .social-items-wrap{
        gap: 0.875rem;
        justify-content: end;
        margin-top: 0.75rem;
    }
}
/* ---------- /header ---------- */


/* ---------- page ---------- */
.app-page{
    flex-grow: 1;
    width: 100%;
    padding: var(--app-content-py) 0;
    position: relative;
}

.page-title{
    margin-bottom: clamp(1.5rem, -0.019rem + 3.165vw, 2.75rem);

    color: var(--bs-primary);
    font-size: var(--fs-h1);
    line-height: 1.1;
    text-transform: uppercase;
}

.page-nav{
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    min-height: var(--app-header-height);
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.page-nav a{
    --bs-link-color: var(--bs-body-color);
    --bs-link-hover-color: var(--bs-primary);

    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
}
.page-nav a.active{
    color: var(--bs-link-hover-color);
}

.bg-dark .page-nav a,
.page-nav.bg-dark a{
    --bs-link-color: #fff;
}

@media (min-width: 768px) {
    .page-nav{
        gap: 2rem;
    }
    .page-nav a{
        font-size: 1.125rem;
    }
}
/* ---------- /page ---------- */


/* ---------- footer ---------- */
.app-footer{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    background-color: #fff;
    padding: 1.125rem var(--app-content-px);

    font-size: 14px;
}
.no-footer ~ .app-footer{
    display: none !important;
}

.app-footer .createdby{
    display: flex;
    align-items: center;
    gap: 0.625rem;
}
.app-footer .createdby img{
    display: block;
    height: 16px;
}

@media (max-width: 767px) {
    .app-footer{
        flex-direction: column;
        gap: 0.625rem;
        text-align: center;
    }
}
/* ---------- /footer ---------- */



/* ==================== 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: #000;
    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 ----------- */


/* ----------- buttons,links ----------- */
a{
    --bs-link-decoration: underline;
    --bs-link-hover-decoration: none;

    color: var(--bs-link-color);
    text-decoration: var(--bs-link-decoration);
}
a:hover{
    color: var(--bs-link-hover-color);
    text-decoration: var(--bs-link-hover-decoration);
}

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

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

.link-dark{
    --bs-link-color: var(--bs-body-color);
    --bs-link-hover-color: var(--bs-body-color);
}
/* ----------- /buttons,links ----------- */


/* ---------- title,text ---------- */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.title {
    display: block;
    color: var(--bs-body-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;
}

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(--fs-text);
    font-weight: 400;
}

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

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

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

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

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

.text-wrap 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 ---------- */


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


/* ---------- slider ---------- */
.swiper:not(.swiper-initialized){
    opacity: 0;
}
.swiper.swiper-horizontal>.swiper-pagination-bullets{
    --swiper-pagination-bullet-width: 0.5rem;
    --swiper-pagination-bullet-height: 0.5rem;
    --swiper-pagination-bullet-horizontal-gap: 0.375rem;
    --swiper-pagination-color: var(--bs-primary);
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: .3;
    --swiper-pagination-bullet-border-radius: 50%;
    --swiper-pagination-bottom: 1rem;

    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12px;
}
/* ---------- /slider ---------- */


/* ---------- main slider ---------- */
.swiper.main-slider{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.main-slider .img-wrap{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.main-slider .img-wrap img{
    object-fit: cover;
}

.main-slider .info-wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: var(--app-content-px);
    position: relative;
    z-index: 2;
}
.main-slider .info-wrap > *{
    --bg-color: #fff;

    display: flex;
    align-items: center;
    background-color: var(--bg-color);
    padding: 0.375rem 0.875rem;
    line-height: 1.25;
}
.main-slider .info-wrap .title{
    --bg-color: var(--theme-bg-color);
    font-size: 1.375rem;
}
.main-slider .info-wrap .text{
    font-size: 1rem;
}
.main-slider .link-overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}
/* ---------- /main slider ---------- */


/* ---------- media ---------- */
.media-list{
    --item-width: 100%;
    --title-font-size: 1rem;
    --text-font-size: 0.875rem;

    list-style: none;
}
.media-list li{
    aspect-ratio: 600/338;
    width: var(--item-width);
    position: relative;
    overflow: hidden;
}
.media-list a{
    display: block;
}
.media-list img{
    width: 100%;
    height: auto;
    aspect-ratio: 600/338;
    object-fit: cover;
}
.media-list span{
    width: 100%;
    background-color: var(--theme-bg-color);
    padding: 0.75rem 0.625rem;
    position: absolute;
    left: 0;
    bottom: 0;

    transform: translateY(100%);
    transition: transform 0.5s ease;

    color: #000;
    font-size: var(--text-font-size);
    font-weight: 300;
    line-height: 1.25;
    text-align: center;
}
.media-list span strong{
    display: block;
    font-size: var(--title-font-size);
    font-weight: 500;
}

.media-list a:hover span{
    transform: translateY(0);
}

.media-list [data-state="disabled"]{
    pointer-events: none;
}
.media-list [data-state="disabled"] img {
    opacity: .1;
    -webkit-filter: grayscale(75%);
    filter: grayscale(75%);
}

@media (min-width: 768px) {
    .media-list{
        --item-width: 50%;
    }
}
@media (min-width: 992px) {
    .media-list{
        --item-width: 25%;
    }
}
@media (min-width: 1400px) {
    .media-list{
        --title-font-size: 1.125rem;
        --text-font-size: 1rem;
    }
}
/* ---------- /media ---------- */



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


/* ---------- portfolio ---------- */
.portfolio-item-details{
    padding-top: 1.75rem;
    color: #fff;
}
.portfolio-item-details > *,
.portfolio-item-details .media-wrap > *{
    margin-bottom: 2.5rem;
}
.portfolio-item-details .main-title{
    margin-bottom: 1.5rem;

    color: inherit;
    font-size: 1.25rem;
    font-weight: 300;
}
.portfolio-item-details .btn-back{
    --bs-link-color: #fff;
    --bs-link-hover-color: #fff;
    --bs-link-decoration: none;

    display: inline-block;
    margin-bottom: 1.25rem;
}

.portfolio-item-details .video-wrap{
    aspect-ratio: 1300/731.25;
    position: relative;
}
.portfolio-item-details .video-wrap iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.portfolio-item-details .img-wrap{
    position: relative;
    cursor: pointer;
}
.portfolio-item-details .img-wrap .i-fs{
    display: flex;
    width: 2rem;
    height: 2rem;
    background-color: #000;
    opacity: 0;

    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;

    transition: opacity 0.3s ease-in-out;
}
.portfolio-item-details .img-wrap .i-fs svg{
    width: 100%;
    height: auto;
    fill: none;
}
.portfolio-item-details .img-wrap .i-fs svg *{
    stroke: var(--theme-bg-color);
}
.portfolio-item-details .img-wrap:hover .i-fs{
    opacity: 1;
}

.portfolio-item-details .card{
    --bs-card-spacer-x: 1.5rem;
    --bs-card-spacer-y: 1.75rem;
}

.portfolio-item-details .card .title{
    margin-bottom: 1rem;

    font-size: var(--fs-h2);
}
.portfolio-item-details .card .text{
    font-weight: 300;
}

@media (min-width: 768px) {
    .portfolio-item-details .card .border-right{
        border-right: 1px dotted #000;
        padding-right: var(--bs-gutter-x);
    }
    .portfolio-item-details .card .title{
        margin-bottom: 1.25rem;
    }
}
@media (min-width: 992px) {
    .portfolio-item-details .card{
        --bs-card-spacer-x: 2rem;
        --bs-card-spacer-y: 2rem;
    }
}
@media (min-width: 1200px) {
    .portfolio-item-details .card{
        --bs-card-spacer-x: 3.5rem;
        --bs-card-spacer-y: 3.5rem;
    }
}

@media (max-width: 767px) {
    .portfolio-item-details .card .border-right{
        border-bottom: 1px dotted #000;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }
}
/* ---------- /portfolio ---------- */


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