:root {
    --body-bg: rgb(252 252 252);
    --heading-color : rgb(0 0 0);
    --title-color : rgb(20 32 20);;
    --body-color : rgb(54, 54, 59);
    /* COLOR PRIMARY*/
    --primary : #0c0c0c;
    --accent-primary : #3d3d3d;
    --soft-primary : #f6f6f6;
    --primary-hover : #454545;
    --dark-primary : #000000;
    
    --reverse-headding: #fff;
    --reverse-title: rgb(250 250 250);
    --reverse-body: rgb(250 250 250);
    --border-color : #d8dadd;
    
    /* COLOR SECONDARY*/
    --secondary : #c8984c;
    --accent-secondary : #d4b170;
    --soft-secondary : #f9f6ed;
    --secondary-hover : #d4b170;
    --dark-secondary: #9e6630;
    /* COLOR RED*/
    --red : #de2424;
    --accent-red : #f97070;
    --soft-red : #fee2e2;
    --red-hover : #f03d3d;
    --dark-red: #9a1a1a;
    /* COLOR GREEN*/
    --green : #24d47a;
    --accent-green : #86efb9;
    --soft-green : #f0fdf6;
    --green-hover : #4ade92;
    --dark-green: #15804a;
    /* COLOR BLUE*/
    --blue : #342bea;
    --accent-blue : #687cff;
    --soft-blue : #eaf1ff;
    --blue-hover : #2c25ff;
    --dark-blue: #1e1d92;
    /* COLOR PINK*/
    --pink : #ff3190;
    --accent-pink : #ff9fd2;
    --soft-pink : #fef1f8;
    --pink-hover : #ff63b2;
    --dark-pink: #d10553;
    /* COLOR VIOLET*/
    --violet : #812bea;
    --accent-violet : #b08cf9;
    --soft-violet : #f6f3ff;
    --violet-hover : #975df5;
    --dark-violet : #6722b5;
    /* COLOR orange*/
    --orange : #e64400;
    --accent-orange : #ff8732;
    --soft-orange : #fff6ec;
    --orange-hover : #ff660a;
    --dark-orange: #a1290b;
    /* COLOR yellow*/
    --yellow : #e69c00;
    --accent-yellow : #ffe21e ;
    --soft-yellow : #fffeea;
    --yellow-hover : #fcc304;
    --dark-yellow: #96530a;
    /* COLOR tea*/
    --tea : #04c3b6;
    --accent-tea :#50f8e4;
    --soft-tea : #effefc;
    --tea-hover : #1de4d3;
    --dark-tea: #05807b;
    /* COLOR black*/
    --black : #1e2329;
    --accent-black :#3c454e;
    --soft-black : #f4f6f7;
    --black-hover : #353c44;
    --dark-black : #000000;
}

.darkmode{
    --body-bg: rgb(15, 15, 15);
    --heading-color : #e2e8f0;
    --title-color : rgb(226 232 240);;
    --body-color : #94a3b8;
    --border-color : #363c42;
}
.darkmode svg path {
    fill: var(--title-color) !important;
}
.darkmode #theme-switch .dark-icon {
    display: none;
}
.darkmode #theme-switch .light-icon {
    display: block;
}
#theme-switch .light-icon {
    display: none;
}
html{
    background: var(--body-bg);
}
body{
    background-color: var(--body-bg);
    font-size: 16px;
    color: var(--body-color) !important;
}

.h-0 {
    height: 0px !important;
}
.line-height-0 {
    line-height: 0 !important;
}
/* MARGIN AND PADDING */
.p-0 { padding: 0 !important;}
.p-1{padding: 4px !important}
.p-2{padding: 8px !important}
.p-3{padding: 12px !important}
.p-4{padding: 16px !important}

.pt-0{padding-top: 0 !important;}
.pt-1{padding-top: 4px !important;}
.pt-2{padding-top: 8px !important;}
.pt-3{padding-top: 12px !important;}
.pt-4{padding-top: 16px !important;}

.pb-0{padding-bottom: 0 !important;}
.pb-1{padding-bottom: 4px !important;}
.pb-2{padding-bottom: 8px !important;}
.pb-3{padding-bottom: 12px !important;}
.pb-4{padding-bottom: 16px !important;}

.ps-0{padding-left: 0 !important;}
.ps-1{padding-left: 4px !important;}
.ps-2{padding-left: 8px !important;}
.ps-3{padding-left: 12px !important;}
.ps-4{padding-left: 16px !important;}

.pe-0{padding-right: 0 !important;}
.pe-1{padding-right: 4px !important;}
.pe-2{padding-right: 8px !important;}
.pe-3{padding-right: 12px !important;}
.pe-4{padding-right: 16px !important;}

.py-0{padding-top: 0 !important; padding-bottom: 0px !important;}
.py-1{padding-top: 4px !important; padding-bottom: 4px !important;}
.py-2{padding-top: 8px !important; padding-bottom: 8px !important;}
.py-3{padding-top: 12px !important; padding-bottom: 12px !important;}
.py-4{padding-top: 16px !important; padding-bottom: 16px !important;}

.px-0{padding-left: 0 !important; padding-right: 0px !important;}
.px-1{padding-left: 4px !important; padding-right: 4px !important;}
.px-2{padding-left: 8px !important; padding-right: 8px !important;}
.px-3{padding-left: 12px !important; padding-right: 12px !important;}
.px-4{padding-left: 16px !important; padding-right: 16px !important;}

.m-0{margin: 0 !important;}
.m-1{margin: 4px !important;}
.m-2{margin: 8px !important;}
.m-3{margin: 12px !important;}
.m-4{margin: 16px !important;}

.mt-0{margin-top: 0 !important;}
.mt-1{margin-top: 4px !important;}
.mt-2{margin-top: 8px !important;}
.mt-3{margin-top: 12px !important;}
.mt-4{margin-top: 16px !important;}

.mb-0{margin-bottom: 0 !important;}
.mb-1{margin-bottom: 4px !important;}
.mb-2{margin-bottom: 8px !important;}
.mb-3{margin-bottom: 12px !important;}
.mb-4{margin-bottom: 16px !important;}

.ms-0{margin-left: 0 !important;}
.ms-1{margin-left: 4px !important;}
.ms-2{margin-left: 8px !important;}
.ms-3{margin-left: 12px !important;}
.ms-4{margin-left: 16px !important;}

.me-0{margin-right: 0 !important;}
.me-1{margin-right: 4px !important;}
.me-2{margin-right: 8px !important;}
.me-3{margin-right: 12px !important;}
.me-4{margin-right: 16px !important;}

.mx-0{margin-left: 0 !important; margin-right: 0px !important;}
.mx-1{margin-left: 4px !important; margin-right: 4px !important;}
.mx-2{margin-left: 8px !important; margin-right: 8px !important;}
.mx-3{margin-left: 12px !important; margin-right: 12px !important;}
.mx-4{margin-left: 16px !important; margin-right: 16px !important;}

.my-0{margin-top: 0 !important; margin-bottom: 0px !important;}
.my-1{margin-top: 4px !important; margin-bottom: 4px !important;}
.my-2{margin-top: 8px !important; margin-bottom: 8px !important;}
.my-3{margin-top: 12px !important; margin-bottom: 12px !important;}
.my-4{margin-top: 16px !important; margin-bottom: 16px !important;}

/* TEXT AND FONT SIZE */
h1 , .s-h1 {
    font-size: 3rem;
    margin: 0;
    margin-bottom: 16px;
    
}
h2 , .s-h2 {
    font-size: 2rem;
    margin: 0 0 14px;
    
}
h3 , .s-h3 {
    font-size: 1.5rem;
    margin: 0 0 8px;
    
}
h4 , .s-h4 {
    font-size: 1.25rem;
    margin: 0 0 4px;
    
}
h5 , .s-h5 {
    font-size: 1rem;
    margin: 0;
    
}
h6 , .s-h6 {
    font-size: 0.85rem;
    margin: 0;
    
}
p {
    font-size: 1rem;
    
    
}
h1,h2, .s-headding {
    color: var(--heading-color);
}
h3,h4,h5, .s-card-title {
    color: var(--title-color);
}
h6,p,span,small {
    color: var(--body-color);
}
.s-display-1 {
    font-size: 6rem;
    line-height: 6.1rem;
}
.s-display-2 {
    font-size: 5rem;
    line-height: 5.1rem;
}
.s-display-3 {
    font-size: 4rem;
    line-height: 4.1rem;
}
.s-display-4 {
    font-size: 3rem;
    line-height: 3rem;
}
.s-display-5 {
    font-size: 1.75rem;
    line-height: 1.75rem;
}
@media only screen and (max-width: 480px){
    h1 , .s-h1 {
        font-size: 2rem !important;
    }
    h2, .s-h2 {
        font-size: 1.5rem;
    }
    p {
        font-size: 0.95rem;
    }
    .s-display-1 {
        font-size: 3rem;
        line-height: 3rem;
    }
    .s-display-2 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
    .s-display-3 {
        font-size: 2.25rem;
        line-height: 2.25rem;
    }
    .s-display-4 {
        font-size: 2rem;
        line-height: 2rem;
    }
    .s-display-5 {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }
}
@media only screen and (max-width: 769px){
    h1 , .s-h1 {
        font-size: 2.2rem;
    }
    h2, .s-h2 {
        font-size: 1.75rem !important;
    }
    .s-display-1 {
        font-size: 3.5rem;
        line-height: 3.5rem;
    }
    .s-display-2 {
        font-size: 2.75rem;
        line-height: 2.75rem;
    }
    .s-display-3 {
        font-size: 2.5rem;
        line-height: 2.5rem;
    }
    .s-display-4 {
        font-size: 2.25rem;
        line-height: 2.25rem;
    }
    
    .s-display-5 {
        font-size: 1.75rem;
        line-height: 1.75rem;
    }
}
@media only screen and (max-width: 1025px){
    h1 , .s-h1 {
        font-size: 2.4rem;
    }
    h2, .s-h2 {
        font-size: 1.95rem;
    }
    .s-display-1 {
        font-size: 4rem;
    }
    .s-display-2 {
        font-size: 3.5rem;
    }
    .s-display-3 {
        font-size: 3.25rem;
    }
    .s-display-4 {
        font-size: 2.5rem;
    }
    .s-display-5 {
        font-size: 1.55rem;
        line-height: 1.55rem;
    }
}
@media only screen and (min-width: 1280px){
    p {
        font-size: 1.075rem;
    }
}

/* FONT SIZE */
.s-fs-1 {
    font-size: 48px;
}
.s-fs-2 {
    font-size: 40px;
}
.s-fs-3 {
    font-size: 32px;
}
.s-fs-4 {
    font-size: 24px;
}
.s-fs-5 {
    font-size: 16px;
}
.s-fs-6 {
    font-size: 12px;
}

/* FONT WEIGHT */
.s-fw-semibold {
    font-weight: 500 !important;
}
.s-fw-black {
    font-weight: 900 !important;
}
.s-fw-thin {
    font-weight: 100 !important;
}
/* BACKGROUND */
.s-bg-body{
    background-color: var(--body-bg);
}
.s-bg-transparent {
    background-color: transparent;
}
.s-bg-white-100 {
    background-color: white;
}
.s-bg-white-75 {
    background-color: rgb(255 255 255 / 75%);
}
.s-bg-white-50 {
    background-color: rgb(255 255 255 / 50%);
}
.s-bg-white-25 {
    background-color: rgb(255 255 255 / 25%);
}
.s-bg-black-100 {
    background-color: black;
}
.s-bg-primary {
    background-color: var(--primary) !important;
}
.s-bg-soft-primary {
    background-color: var(--soft-primary) !important;
}

.s-bg-dark-primary {
    background-color: var(--dark-primary) !important;
}
.s-bg-secondary {
    background-color: var(--secondary) !important;
}
.s-bg-soft-secondary {
    background-color: var(--soft-secondary) !important;
}
.s-bg-dark-secondary {
    background-color: var(--dark-secondary) !important;
}
.s-bg-red {
    background-color: var(--red) !important;
}
.s-bg-soft-red {
    background-color: var(--soft-red) !important;
}
.s-bg-dark-red {
    background-color: var(--dark-red) !important;
}
.s-bg-green {
    background-color: var(--green) !important;
}
.s-bg-soft-green {
    background-color: var(--soft-green) !important;
}
.s-bg-dark-green {
    background-color: var(--dark-green) !important;
}
.s-bg-pink {
    background-color: var(--pink) !important;
}
.s-bg-soft-pink {
    background-color: var(--soft-pink) !important;
}
.s-bg-dark-pink {
    background-color: var(--dark-pink) !important;
}
.s-bg-violet {
    background-color: var(--violet) !important;
}
.s-bg-soft-violet {
    background-color: var(--soft-violet) !important;
}
.s-bg-dark-violet {
    background-color: var(--dark-violet) !important;
}
.s-bg-orange {
    background-color: var(--orange) !important;
}
.s-bg-soft-orange {
    background-color: var(--soft-orange) !important;
}
.s-bg-dark-orange {
    background-color: var(--dark-orange) !important;
}
.s-bg-yellow {
    background-color: var(--yellow) !important;
}
.s-bg-soft-yellow {
    background-color: var(--soft-yellow) !important;
}
.s-bg-dark-yellow {
    background-color: var(--dark-yellow) !important;
}
.s-bg-blue {
    background-color: var(--blue) !important;
}
.s-bg-soft-blue {
    background-color: var(--soft-blue) !important;
}
.s-bg-dark-blue {
    background-color: var(--dark-blue) !important;
}
.s-bg-tea {
    background-color: var(--tea) !important;
}
.s-bg-soft-tea {
    background-color: var(--soft-tea) !important;
}
.s-bg-dark-tea {
    background-color: var(--dark-tea) !important;
}
.s-bg-black {
    background-color: var(--black) !important;
}
.s-bg-soft-black {
    background-color: var(--soft-black) !important;
}
.s-bg-dark-black {
    background-color: var(--dark-black) !important;
}
.s-bg-blur {
    backdrop-filter: blur(4px);
}
.s-bg-blur-medium {
    backdrop-filter: blur(8px);
}
.s-bg-blur-large {
    backdrop-filter: blur(16px);
}
.s-bg-blur-xlarge {
    backdrop-filter: blur(24px);
}
/* OVERLAY */
.s-overlay-white{
    background: linear-gradient(to top, #fff  , transparent 75%);
}
.s-overlay-black{
    background: linear-gradient(to top, #000  , transparent 75%);
}
.s-overlay-primary{
    background: linear-gradient(to top, var(--primary)  , transparent 75%);
}
.s-overlay-soft-primary{
    background: linear-gradient(to top, var(--soft-primary)  , transparent 75%);
}
.s-overlay-dark-primary{
    background: linear-gradient(to top, var(--dark-primary)  , transparent 75%);
}
.s-overlay-secondary{
    background: linear-gradient(to top, var(--secondary)  , transparent 75%);
}
.s-overlay-soft-secondary{
    background: linear-gradient(to top, var(--soft-secondary)  , transparent 75%);
}
.s-overlay-dark-secondary{
    background: linear-gradient(to top, var(--dark-secondary)  , transparent 75%);
}
.s-overlay-red{
    background: linear-gradient(to top, var(--red)  , transparent 75%);
}
.s-overlay-green{
    background: linear-gradient(to top, var(--green)  , transparent 75%);
}
.s-overlay-blue{
    background: linear-gradient(to top, var(--blue)  , transparent 75%);
}
.s-overlay-yellow{
    background: linear-gradient(to top, var(--yellow)  , transparent 75%);
}
.s-overlay-orange{
    background: linear-gradient(to top, var(--orange)  , transparent 75%);
}
.s-overlay-pink{
    background: linear-gradient(to top, var(--pink)  , transparent 75%);
}
.s-overlay-violet{
    background: linear-gradient(to top, var(--violet)  , transparent 75%);
}
.s-overlay-tea{
    background: linear-gradient(to top, var(--tea)  , transparent 75%);
}
/* GRADIENT */
.s-gradient-theme  {
    background-image: linear-gradient(120deg, var(--primary) 0%, var(--secondary) 100%) !important;
}
.s-gradient-primary{
    background-image: linear-gradient(120deg, var(--primary) 0%, var(--dark-primary) 100%) !important;
}
.s-gradient-secondary{
    background-image: linear-gradient(120deg, var(--secondary) 0%, var(--dark-secondary) 100%) !important;
}
.s-gradient-red{
    background-image: linear-gradient(120deg, var(--red) 0%, var(--dark-red) 100%) !important;
}
.s-gradient-green{
    background-image: linear-gradient(120deg, var(--green) 0%, var(--dark-green) 100%) !important;
}
.s-gradient-blue{
    background-image: linear-gradient(120deg, var(--blue) 0%, var(--dark-blue) 100%) !important;
}
.s-gradient-yellow{
    background-image: linear-gradient(120deg, var(--yellow) 0%, var(--dark-yellow) 100%) !important;
}
.s-gradient-orange{
    background-image: linear-gradient(120deg, var(--orange) 0%, var(--dark-orange) 100%) !important;
}
.s-gradient-black{
    background-image: linear-gradient(120deg, var(--black) 0%, var(--dark-black) 100%) !important;
}
.s-gradient-pink{
    background-image: linear-gradient(120deg, var(--pink) 0%, var(--dark-pink) 100%) !important;
}
.s-gradient-violet{
    background-image: linear-gradient(120deg, var(--violet) 0%, var(--dark-violet) 100%) !important;
}
.s-gradient-tea{
    background-image: linear-gradient(120deg, var(--tea) 0%, var(--dark-tea) 100%) !important;
}
.s-gradient-primary-light {
    background-image: linear-gradient(120deg, var(--soft-primary) 0%, var(--primary) 100%) !important;
}
/* LINK */
a{
transition: all .3s;
color: var(--body-color);
}
a:hover {
    color: var(--secondary);
}
a *{
transition: all .3s;
}
/* TEXT COLOR */
.s-dark * {
    color: var(--dark-text-body);
}
.s-dark h1,.s-dark h2,.s-dark h3,.s-dark h4,  .s-dark h5, .s-dark h6 {
    color: var(--dark-text-title);
}
.s-dark a {
    color: var(--dark-text-body);
}
.s-dark a:hover,.s-dark a:hover *:not(img) {
    color: var(--dark-text-hover);
}
.s-light * {
    color: var(--light-text-body);
}
.s-light h1,.s-light h2,.s-light h3,.s-light h4,  .s-light h5, .s-light h6 {
    color: var(--light-text-title);
}
.s-light a {
    color: var(--light-text-body);
}
.s-light a:hover,.s-light a:hover *:not(img) {
    color: var(--light-text-hover);
}
.s-reverse-color {
    color: var(--reverse-body);
}
.s-reverse-color .uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before{
    color: var(--reverse-body);
}
.s-reverse-color *{
    color: var(--reverse-body);
}
.s-reverse-color h1,.s-reverse-color h2{
    color: var(--reverse-headding);
}
.s-reverse-color h3,.s-reverse-color h4{
    color: var(--reverse-title);
}
.s-text-white-100 {
    color: white !important;
}
.s-text-white-100 *{
    color: white ;
}
.s-text-black-100 {
    color: black !important;
}
.s-text-black-100 *{
    color: black ;
}
.s-heading-color{
    color: var(--heading-color);
}
.s-title-color {
    color: var(--title-color);
}
.s-body-color {
    color: var(--body-color);
}
.s-reverse-heading-color {
    color: var(--reverse-headding);
}
.s-reverse-heading-color *{
    color: var(--reverse-headding) !important;
}
.s-reverse-title-color {
    color: var(--reverse-title);
}
.s-reverse-title-color * {
    color: var(--reverse-title) !important;
}
.s-reverse-body-color {
    color: var(--reverse-body);
}

.s-reverse-body-color *{
    color: var(--reverse-body) !important;
}
.s-reverse-body-color .uk-breadcrumb>:nth-child(n+2):not(.uk-first-column)::before{
    color: var(--reverse-body) !important;
}
.s-text-primary{
    color: var(--primary) !important;
}
.s-text-primary *{
    color: var(--primary) ;
}
.s-text-soft-primary{
    color: var(--soft-primary) !important;
}
.s-text-soft-primary *{
    color: var(--soft-primary) ;
}
.s-text-dark-primary{
    color: var(--dark-primary) !important;
}
.s-text-dark-primary *{
    color: var(--dark-primary) ;
}
.s-text-secondary {
    color: var(--secondary) !important;
}
.s-text-secondary *{
    color: var(--secondary) ;
}
.s-text-dark-secondary {
    color: var(--dark-secondary) !important;
}
.s-text-dark-secondary *{
    color: var(--dark-secondary) ;
}
.s-text-soft-secondary {
    color: var(--soft-secondary) !important;
}
.s-text-soft-secondary *{
    color: var(--soft-secondary) ;
}
.s-text-red{
    color: var(--red) !important;
}
.s-text-soft-red{
    color: var(--soft-red) !important;
}
.s-text-dark-red{
    color: var(--dark-red) !important;
}
.s-text-green{
    color: var(--green) !important;
}
.s-text-soft-green{
    color: var(--soft-green) !important;
}
.s-text-dark-green{
    color: var(--dark-green) !important;
}
.s-text-blue{
    color: var(--blue) !important;
}
.s-text-soft-blue{
    color: var(--soft-blue) !important;
}
.s-text-dark-blue{
    color: var(--dark-blue) !important;
}
.s-text-pink{
    color: var(--pink) !important;
}
.s-text-soft-pink{
    color: var(--soft-pink) !important;
}
.s-text-dark-pink{
    color: var(--dark-pink) !important;
}
.s-text-violet{
    color: var(--violet) !important;
}
.s-text-soft-violet{
    color: var(--soft-violet) !important;
}
.s-text-dark-violet{
    color: var(--dark-violet) !important;
}
.s-text-yellow{
    color: var(--yellow) !important;
}
.s-text-soft-yellow{
    color: var(--soft-yellow) !important;
}
.s-text-dark-yellow{
    color: var(--dark-yellow) !important;
}
.s-text-orange{
    color: var(--orange) !important;
}
.s-text-soft-orange{
    color: var(--soft-orange) !important;
}
.s-text-dark-orange{
    color: var(--dark-orange) !important;
}
.s-text-tea{
    color: var(--tea) !important;
}
.s-text-soft-tea{
    color: var(--soft-tea) !important;
}
.s-text-dark-tea{
    color: var(--dark-tea) !important;
}
.s-text-black{
    color: var(--black) !important;
}
.s-text-soft-black{
    color: var(--soft-black) !important;
}
.s-text-dark-black{
    color: var(--dark-black) !important;
}

/* TEXT GRADIENT */
.s-text-gradient-primary  {
    background: linear-gradient(to right, var(--primary), var(--dark-primary) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.s-text-gradient-secondary  {
    background: linear-gradient(to right, var(--secondary), var(--dark-secondary) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.s-text-gradient-red  {
    background: linear-gradient(to right, var(--red), var(--dark-red) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.s-text-gradient-green  {
    background: linear-gradient(to right, var(--green), var(--dark-green) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.s-text-gradient-blue  {
    background: linear-gradient(to right, var(--blue), var(--dark-blue) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.s-text-gradient-yellow  {
    background: linear-gradient(to right, var(--yellow), var(--dark-yellow) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.s-text-gradient-orange  {
    background: linear-gradient(to right, var(--orange), var(--dark-orange) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.s-text-gradient-black  {
    background: linear-gradient(to right, var(--black), var(--dark-black) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.s-text-gradient-pink  {
    background: linear-gradient(to right, var(--pink), var(--dark-pink) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.s-text-gradient-violet  {
    background: linear-gradient(to right, var(--violet), var(--dark-violet) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.s-text-gradient-tea  {
    background: linear-gradient(to right, var(--tea), var(--dark-tea) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* TEXT SPACING */
.s-space{
    letter-spacing: 1px;
}
.s-space-medium{
    letter-spacing: 4px;
}
.s-space-large{
    letter-spacing: 8px;
}
.s-space-xlarge{
    letter-spacing: 16px;
}

/* FONT SIZE */
.s-fs-xsmall {
    font-size: 12px;
}
.s-fs-small {
    font-size: 14px;
}
.s-fs-medium {
    font-size: 16px;
}
.s-fs-large {
    font-size: 20px;
}
.s-fs-xlarge {
    font-size: 24px;
}
@media only screen and (max-width: 480px) {
    .s-fs-xsmall {
        font-size: 11px;
    }
    .s-fs-small {
        font-size: 13px;
    }
    .s-fs-medium {
        font-size: 15px;
    }
    .s-fs-large {
        font-size: 18px;
    }
    .s-fs-xlarge {
        font-size: 22px;
    }
  }

/* ROUNDED */
.s-rounded {
    border-radius: 4px !important;
}
.s-rounded-t {
   border-radius: 4px 4px 0 0;
}
.s-rounded-b {
   border-radius: 0px 0px 4px 4px;
}
.s-rounded-l {
   border-radius: 4px 0px 0px 4px;
}
.s-rounded-r {
   border-radius: 0px 4px 4px 0px;
}

.s-rounded-t-large {
   border-radius: 12px 12px 0 0;
}
.s-rounded-b-large {
   border-radius: 0px 0px 12px 12px;
}
.s-rounded-l-large {
   border-radius: 12px 0px 0px 12px;
}
.s-rounded-r-large {
   border-radius: 0px 12px 12px 0px;
}
.s-rounded-t-xlarge {
   border-radius: 24px 24px 0 0;
}
.s-rounded-b-xlarge {
   border-radius: 0px 0px 24px 24px;
}
.s-rounded-l-xlarge {
   border-radius: 24px 0px 0px 24px;
}
.s-rounded-r-xlarge {
   border-radius: 0px 16px 16px 0px;
}

.s-rounded-large {
    border-radius: 12px !important;
    
}
.s-rounded-xlarge {
    border-radius: 24px !important;
   
}
.s-rounded-pill {
    border-radius: 999px !important;
}
.s-rounded-circle {
    border-radius: 50% !important;
}



/* BORDER */
.s-border {
    border:  solid var(--border-color);
    border-width: 1px;
}
.s-border-t {
    border: none;
    border-top: solid var(--border-color) !important;
    border-width: 1px !important;
}
.s-border-b {
    border:none;
    border-bottom: solid var(--border-color) !important;
    border-width: 1px !important;
}
.s-border-l {
    border: none;
    border-left: solid var(--border-color) !important;
    border-width: 1px !important;
}
.s-border-r {
    border: none;
    border-right: solid var(--border-color) !important;
    border-width: 1px !important;
}


.s-border-2 {
    border-width: 2px !important;
}
.s-border-3 {
    border-width: 3px !important;
}
.s-border-4 {
    border-width: 4px !important;
}
.s-border-white-100  {
    border-color: rgb(255 255 255 / 100%) !important;
}
.s-border-white-75  {
    border-color: rgb(255 255 255 / 75%) !important;
}
.s-border-white-50  {
    border-color: rgb(255 255 255 / 50%) !important;
}
.s-border-white-25  {
    border-color: rgb(255 255 255 / 25%) !important;
}
.s-border-primary {
    border-color: var(--primary) !important;
}
.s-border-red {
    border-color: var(--red) !important;
}
.s-border-green {
    border-color: var(--green) !important;
}
.s-border-blue {
    border-color: var(--blue) !important;
}
.s-border-pink {
    border-color: var(--pink) !important;
}
.s-border-violet {
    border-color: var(--violet) !important;
}
.s-border-yellow {
    border-color: var(--yellow) !important;
}
.s-border-orange {
    border-color: var(--orange) !important;
}
.s-border-tea {
    border-color: var(--tea) !important;
}
.s-border-secondary {
    border-color: var(--secondary) !important;
}
.s-border-black {
    border-color: var(--black) !important;
}

/* SOCIAL */
.s-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.s-social-small {
    gap: 6px;
}
.s-social-largge {
    gap: 10px;
}
.s-social a {
    display: inline-flex;
    position: relative;
    align-self: center;
    align-items: center;
    justify-content: center;
    background-color: rgb(30 41 59 / 15%);
    width: 24px;
    height: 24px;
    font-size: 16px;
    padding: 8px;
   
}
.s-social-small a {
    width: 18px;
    height: 18px;
    font-size: 14px;
    padding: 8px;
}
.s-social-small a *{
    font-size: 14px;
}
.s-social-large a {
    width: 32px;
    height: 32px;
    font-size: 20px;
    padding: 8px;
}
.s-social-large a *{
    font-size: 24px;
}
.s-social.s-social-dark a {
    background-color: rgb(255 255 255 / 15%);
    color: rgb(255 255 255);
}
.s-social.s-social-primary a {
    background-color: var(--primary);
    color: var(--soft-primary);
}
.s-social.s-social-primary a *{
    color: var(--soft-primary);
}

.s-social.s-social-secondary a {
    background-color: var(--secondary);
    color: var(--soft-secondary);
}
.s-social.s-social-secondary a *{
    color: var(--soft-secondary);
}
.s-social.s-social-dark a * {
    color: rgb(255 255 255  / 75%);
}
.s-social a:hover {
    background-color: rgb(30 41 59 / 5%);
}
.s-social a:hover i {
    transform: translateY(-1px);
}
.s-social.s-social-dark a:hover{
    background-color: rgb(255 255 255 / 25%);
    color: rgb(255 255 255  / 100%);
}
.s-social.s-social-dark a:hover *{
    color: rgb(255 255 255  / 100%);
}
.s-social.s-social-primary a:hover{
    background-color: var(--soft-primary);
    color: var(--dark-primary);
}
.s-social.s-social-primary a:hover *{
    color: var(--dark-primary);
}
.s-social.s-social-secondary a:hover{
    background-color: var(--soft-secondary);
    color: var(--dark-secondary);
}
.s-social.s-social-secondary a:hover *{
    color: var(--dark-secondary);
}


/* BUTTON */
.s-btn {
    display: inline-flex;
    position: relative;
    align-self: center;
    border: none;
    color: #fff !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    justify-content: center;
    letter-spacing: 1px;
    line-height: 20px;
    margin-bottom: 16px;
    padding: 14px 24px;
    text-decoration: none !important;
    transition: all .3s cubic-bezier(.4,0,.2,1);
}
.s-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: #fff !important;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    justify-content: center;
    width: 38px;
    height: 38px;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: all .3s cubic-bezier(.4,0,.2,1);
}
.s-btn-icon i , .s-btn-icon svg, .s-btn-icon * {
    font-size: 24px;   
}

.s-btn-icon-small {
   font-size: 12px;
   width: 24px;
   height: 24px;
}
.s-btn-icon-small, .s-btn-icon-small i, .s-btn-icon-small svg, .s-btn-icon-small * {
    font-size: 16px;
}
.s-btn-icon-large {
    width: 48px;
    height: 48px;
}
.s-btn-icon-large, .s-btn-icon-large i, .s-btn-icon-large svg, .s-btn-icon-large * {
    font-size: 32px;
}

.s-btn:hover, .s-btn-icon:hover {
    transform: translateY(-1px);
}
.s-btn-small {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 16px;
    padding: 10px 20px;
    text-transform: uppercase;
    
}
.s-btn-large {
    font-size: 16px;
    line-height: 28px;
    margin-bottom: 16px;
    padding: 16px 32px;
    text-transform: uppercase;
   
}
.s-btn-white {
    background-color: #fff;
    color: var(--dark-primary) !important;
}
.s-btn-white i{
    color: var(--dark-primary) !important;
}
/* primary */
.s-btn-primary {
    background-color: var(--primary);
}
.s-btn-accent-primary {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--primary));
    background-color: var(--accent-primary);
}
.s-btn-accent-dark-primary {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--primary));
    background-color: var(--dark-primary);
}
.s-btn-primary:hover {
    background-color: var(--primary-hover) !important;
    box-shadow: 0 8px 8px -6px var(--primary);
}
.s-btn-accent-primary:hover {
    box-shadow: 0 8px 8px -6px var(--primary);
}
.s-btn-accent-dark-primary:hover {
    box-shadow: 0 8px 8px -6px var(--dark-primary);
}

/* secondary */
.s-btn-secondary {
    background-color: var(--secondary) !important;
}
.s-btn-accent-secondary {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--secondary));
    background-color: var(--accent-secondary);
}
.s-btn-accent-dark-secondary {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--secondary));
    background-color: var(--dark-secondary);
}
.s-btn-secondary:hover {
    box-shadow: 0 8px 8px -6px var(--dark-secondary);
}
.s-btn-accent-secondary:hover {
    box-shadow: 0 8px 8px -6px var(--secondary);
}
.s-btn-accent-dark-secondary:hover {
    box-shadow: 0 8px 8px -6px var(--dark-secondary);
}

/* red */
.s-btn-red {
    background-color: var(--red) !important;
}
.s-btn-accent-red {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--red));
    background-color: var(--accent-red);
}
.s-btn-accent-dark-red {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--red));
    background-color: var(--dark-red);
}
.s-btn-red:hover {
    background-color: var(--red-hover) !important;
    box-shadow: 0 8px 8px -6px var(--red);
}
.s-btn-accent-red:hover {
    box-shadow: 0 8px 8px -6px var(--red);
}
.s-btn-accent-dark-red:hover {
    box-shadow: 0 8px 8px -6px var(--dark-red);
}

/* green */
.s-btn-green {
    background-color: var(--green) !important;
}
.s-btn-accent-green {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--green));
    background-color: var(--accent-green);
}
.s-btn-accent-dark-green {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--green));
    background-color: var(--dark-green);
}
.s-btn-green:hover {
    background-color: var(--green-hover) !important;
    box-shadow: 0 8px 8px -6px var(--green);
}
.s-btn-accent-green:hover {
    box-shadow: 0 8px 8px -6px var(--green);
}
.s-btn-accent-dark-green:hover {
    box-shadow: 0 8px 8px -6px var(--dark-green);
}

/* blue */
.s-btn-blue {
    background-color: var(--blue) !important;
}
.s-btn-accent-blue {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--blue));
    background-color: var(--accent-blue);
}
.s-btn-accent-dark-blue {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--blue));
    background-color: var(--dark-blue);
}
.s-btn-blue:hover {
    background-color: var(--blue-hover) !important;
    box-shadow: 0 8px 8px -6px var(--blue);
}
.s-btn-accent-blue:hover {
    box-shadow: 0 8px 8px -6px var(--blue);
}
.s-btn-accent-dark-blue:hover {
    box-shadow: 0 8px 8px -6px var(--dark-blue);
}

/* pink */
.s-btn-pink {
    background-color: var(--pink) !important;
}
.s-btn-accent-pink {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--pink));
    background-color: var(--accent-pink);
}
.s-btn-accent-dark-pink {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--pink));
    background-color: var(--dark-pink);
}
.s-btn-pink:hover {
    background-color: var(--pink-hover) !important;
    box-shadow: 0 8px 8px -6px var(--pink);
}
.s-btn-accent-pink:hover {
    box-shadow: 0 8px 8px -6px var(--pink);
}
.s-btn-accent-dark-pink:hover {
    box-shadow: 0 8px 8px -6px var(--dark-pink);
}
/* violet */
.s-btn-violet {
    background-color: var(--violet) !important;
}
.s-btn-accent-violet {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--violet));
    background-color: var(--accent-violet);
}
.s-btn-accent-dark-violet {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--violet));
    background-color: var(--dark-violet);
}
.s-btn-violet:hover {
    background-color: var(--violet-hover) !important;
    box-shadow: 0 8px 8px -6px var(--violet);
}
.s-btn-accent-violet:hover {
    box-shadow: 0 8px 8px -6px var(--violet);
}
.s-btn-accent-dark-violet:hover {
    box-shadow: 0 8px 8px -6px var(--dark-violet);
}
/* orange */
.s-btn-orange {
    background-color: var(--orange) !important;
}
.s-btn-accent-orange {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--orange));
    background-color: var(--accent-orange);
}
.s-btn-accent-dark-orange {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--orange));
    background-color: var(--dark-orange);
}
.s-btn-orange:hover {
    background-color: var(--orange-hover) !important;
    box-shadow: 0 8px 8px -6px var(--orange);
}
.s-btn-accent-orange:hover {
    box-shadow: 0 8px 8px -6px var(--orange);
}
.s-btn-accent-dark-orange:hover {
    box-shadow: 0 8px 8px -6px var(--dark-orange);
}
/* yellow */
.s-btn-yellow {
    background-color: var(--yellow) !important;
}
.s-btn-accent-yellow {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--yellow));
    background-color: var(--accent-yellow);
}
.s-btn-accent-dark-yellow {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--yellow));
    background-color: var(--dark-yellow);
}
.s-btn-yellow:hover {
    background-color: var(--yellow-hover) !important;
    box-shadow: 0 8px 8px -6px var(--yellow);
}
.s-btn-accent-yellow:hover {
    box-shadow: 0 8px 8px -6px var(--yellow);
}
.s-btn-accent-yellow:hover {
    box-shadow: 0 8px 8px -6px var(--dark-yellow);
}
/* tea */
.s-btn-tea {
    background-color: var(--tea) !important;
}
.s-btn-accent-tea {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--tea));
    background-color: var(--accent-tea);
}
.s-btn-accent-dark-tea {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--tea));
    background-color: var(--dark-tea);
}
.s-btn-tea:hover {
    background-color: var(--tea-hover) !important;
    box-shadow: 0 8px 8px -6px var(--tea);
}
.s-btn-accent-tea:hover {
    box-shadow: 0 8px 8px -6px var(--tea);
}
.s-btn-accent-dark-tea:hover {
    box-shadow: 0 8px 8px -6px var(--dark-tea);
}
/* black */
.s-btn-black {
    background-color: var(--black) !important;
}
.s-btn-accent-black {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--black));
    background-color: var(--accent-black);
}
.s-btn-accent-dark-black {
    background: linear-gradient(120deg, rgba(0, 181, 230, 0), var(--black));
    background-color: var(--dark-black);
}
.s-btn-black:hover {
    background-color: var(--black-hover) !important;
    box-shadow: 0 8px 8px -6px var(--black);
}
.s-btn-accent-black:hover {
    box-shadow: 0 8px 8px -6px var(--black);
}
.s-btn-accent-dark-black:hover {
    box-shadow: 0 8px 8px -6px var(--dark-black);
}

/* BUUTON OULINE */
.s-btn-outline {
    border: 1px solid;
}
.s-btn-outline-primary {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.s-btn-outline-red {
    border-color: var(--red) !important;
    color: var(--red) !important;
}
.s-btn-outline-secondary {
    border-color: var(--secondary) !important;
    color: var(--secondary) !important;
}
.s-btn-outline-green {
    border-color: var(--green) !important;
    color: var(--green) !important;
}
.s-btn-outline-pink {
    border-color: var(--pink) !important;
    color: var(--pink) !important;
}
.s-btn-outline-violet {
    border-color: var(--violet) !important;
    color: var(--violet) !important;
}
.s-btn-outline-yellow {
    border-color: var(--yellow) !important;
    color: var(--yellow) !important;
}
.s-btn-outline-tea {
    border-color: var(--tea) !important;
    color: var(--tea) !important;
}
.s-btn-outline-black {
    border-color: var(--black) !important;
    color: var(--black) !important;
}
.s-btn-outline-blue {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}
/* BUUTON GHOST */
.s-btn-ghost {
    border: none;
}
.s-btn-ghost-primary {
    color: var(--dark-primary) !important;
}
.s-btn-ghost-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--primary);
    border-color: var(--primary);
    z-index: 0;
    opacity: .2;
    border: inherit;
    border-radius: inherit;
}
.s-btn-ghost-secondary {
    color: var(--dark-secondary) !important;
}
.s-btn-ghost-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--secondary);
    border-color: var(--secondary);
    z-index: 0;
    opacity: .2;
    border: inherit;
    border-radius: inherit;
}
.s-btn-ghost-red {
    color: var(--dark-red) !important;
}
.s-btn-ghost-red::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--red);
    border-color: var(--red);
    z-index: 0;
    opacity: .2;
    border: inherit;
    border-radius: inherit;
}
.s-btn-ghost-green {
    color: var(--dark-green) !important;
}
.s-btn-ghost-green::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--green);
    border-color: var(--green);
    z-index: 0;
    opacity: .2;
    border: inherit;
    border-radius: inherit;
}
.s-btn-ghost-pink {
    color: var(--dark-pink) !important;
}
.s-btn-ghost-pink::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--pink);
    border-color: var(--pink);
    z-index: 0;
    opacity: .2;
    border: inherit;
    border-radius: inherit;
}
.s-btn-ghost-violet {
    color: var(--dark-violet) !important;
}
.s-btn-ghost-violet::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--violet);
    border-color: var(--violet);
    z-index: 0;
    opacity: .2;
    border: inherit;
    border-radius: inherit;
}
.s-btn-ghost-blue {
    color: var(--dark-blue) !important;
}
.s-btn-ghost-blue::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blue);
    border-color: var(--blue);
    z-index: 0;
    opacity: .2;
    border: inherit;
    border-radius: inherit;
}
.s-btn-ghost-orange {
    color: var(--dark-orange) !important;
}
.s-btn-ghost-orange::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--orange);
    border-color: var(--orange);
    z-index: 0;
    opacity: .2;
    border: inherit;
    border-radius: inherit;
}
.s-btn-ghost-yellow {
    color: var(--dark-yellow) !important;
}
.s-btn-ghost-yellow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--yellow);
    border-color: var(--yellow);
    z-index: 0;
    opacity: .2;
    border: inherit;
    border-radius: inherit;
}
.s-btn-ghost-tea {
    color: var(--dark-tea) !important;
}
.s-btn-ghost-tea::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--tea);
    border-color: var(--tea);
    z-index: 0;
    opacity: .2;
    border: inherit;
    border-radius: inherit;
}
.s-btn-ghost-black {
    color: var(--dark-black) !important;
}
.s-btn-ghost-black::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black);
    border-color: var(--black);
    z-index: 0;
    opacity: .2;
    border: inherit;
    border-radius: inherit;
}
.s-pointer {
    cursor: pointer;
}
/* COMPONENTS */
.s-switch-mode {

}
/* avatar group */
.s-avatar {
    width: 48px;
    aspect-ratio: 1/1;
    overflow: hidden;
    cursor: pointer;
    transition: all .4s;
}
.s-avatar-small {
    width: 38px;
}
.s-avatar-large {
    width: 58px;
    aspect-ratio: 1/1;
    overflow: hidden;
    cursor: pointer;
    transition: all .3s;
}
.s-avatar-xlarge {
    width: 64px;
    aspect-ratio: 1/1;
    overflow: hidden;
    cursor: pointer;
    transition: all .3s;
}
.s-avatar:hover{
    transform: scale(102%);
}
.s-avatar img {
    object-fit: cover;
    object-position: center center;
}
.s-avatar-group  {
    display: flex;
}
.s-avatar-group .s-avatar {
    margin-right: -12px;
}
/* LINK ICON */
.s-icon-link {
    display: inline-flex;
    text-decoration: none !important;
    transition: all .3s;
    font-size: 24px;
}
.s-icon-link:hover {
   transform: translateY(-2px);
}
.s-icon-link-primary{
    color: var(--primary);
}
.s-icon-link-primary:hover{
    color: var(--primary-hover);
}
.s-icon-link-secondary{
    color: var(--secondary);
}
.s-icon-link-secondary:hover{
    color: var(--secondary-hover);
}
.s-icon-link-red{
    color: var(--red);
}
.s-icon-link-red:hover{
    color: var(--red-hover);
}
.s-icon-link-green{
    color: var(--green);
}
.s-icon-link-green:hover{
    color: var(--green-hover);
}
.s-icon-link-pink{
    color: var(--pink);
}
.s-icon-link-pink:hover{
    color: var(--pink-hover);
}
.s-icon-link-violet{
    color: var(--violet);
}
.s-icon-link-violet:hover{
    color: var(--violet-hover);
}
.s-icon-link-blue{
    color: var(--blue);
}
.s-icon-link-blue:hover{
    color: var(--blue-hover);
}
.s-icon-link-yellow{
    color: var(--yellow);
}
.s-icon-link-yellow:hover{
    color: var(--yellow-hover);
}
.s-icon-link-orange{
    color: var(--orange);
}
.s-icon-link-orange:hover{
    color: var(--orange-hover);
}
.s-icon-link-tea{
    color: var(--tea);
}
.s-icon-link-tea:hover{
    color: var(--tea-hover);
}
.s-icon-link-black{
    color: var(--black);
}
.s-icon-link-black:hover{
    color: var(--black-hover);
}

/* S1990 CARD */
.s-card{
    position: relative;
}
.s-card-body {
    padding: 20px;
}
.s-card-title {
    font-size: 18px;
    font-weight: 500;
}
.s-card-title-small {
    font-size: 16px;
    font-weight: 500;
}
.s-card-title-large {
    font-size: 20px;
    font-weight: 500;
}
@media only screen and (max-width: 480px) {
    .s-card-body{
        padding: 8px;
    }
    .s-card-title {
        font-size: 15px;
        font-weight: 500;
    }
    .s-card-title-small {
        font-size: 13px;
        font-weight: 500;
    }
    .s-card-title-large {
        font-size: 17px;
        font-weight: 500;
    }
}
@media only screen and (max-width: 769px) {
    .s-card-body{
        padding: 12px;
    }
    .s-card-title {
        font-size: 16px;
        font-weight: 500;
    }
    .s-card-title-small {
        font-size: 14px;
        font-weight: 500;
    }
    .s-card-title-large {
        font-size: 18px;
        font-weight: 500;
    }
}
@media only screen and (max-width: 1025px) {
    .s-card-body{
        padding: 16px;
    }
}

/* TAG CLOUD */
.s-tagcloud{
    clear: both;
    display: table;
}
.s-tagcloud a {
    position: relative;
    padding: 10px 15px;
    display: inline-block;
    font-size: 14px;
    color: var(--title-color);
    line-height: 1.4;
    border-radius: inherit;
    margin: 0 8px 10px 0;
    overflow: hidden;
}
.s-tagcloud a::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: .2;
    transition: .3s;
    background-color: var(--secondary);
}
.s-tagcloud a:hover::before{
    opacity: .3;
}
.s-tagcloud-primary a {
    color: var(--primary);
}
.s-tagcloud-primary a:hover{
    color: var(--primary-hover) !important;
}
.s-tagcloud-primary a::before{
    background-color: var(--primary);
}
.s-tagcloud-red a {
    color: var(--red);
}
.s-tagcloud-red a:hover{
    color: var(--red-hover) !important;
}
.s-tagcloud-red a::before{
    background-color: var(--red);
}
.s-tagcloud-green a {
    color: var(--green);
}
.s-tagcloud-green a:hover{
    color: var(--green-hover) !important;
}
.s-tagcloud-green a::before{
    background-color: var(--green);
}
.s-tagcloud-blue a {
    color: var(--blue);
}
.s-tagcloud-blue a:hover{
    color: var(--blue-hover) !important;
}
.s-tagcloud-blue a::before{
    background-color: var(--blue);
}
.s-tagcloud-yellow a {
    color: var(--yellow);
}
.s-tagcloud-yellow a:hover{
    color: var(--yellow-hover) !important;
}
.s-tagcloud-yellow a::before{
    background-color: var(--yellow);
}
.s-tagcloud-violet a {
    color: var(--violet);
}
.s-tagcloud-violet a:hover{
    color: var(--violet-hover) !important;
}
.s-tagcloud-violet a::before{
    background-color: var(--violet);
}
.s-tagcloud-pink a {
    color: var(--pink);
}
.s-tagcloud-pink a:hover{
    color: var(--pink-hover) !important;
}
.s-tagcloud-pink a::before{
    background-color: var(--pink);
}
.s-tagcloud-orange a {
    color: var(--orange);
}
.s-tagcloud-orange a:hover{
    color: var(--orange-hover) !important;
}
.s-tagcloud-orange a::before{
    background-color: var(--orange);
}
.s-tagcloud-tea a {
    color: var(--tea);
}
.s-tagcloud-tea a:hover{
    color: var(--tea-hover) !important;
}
.s-tagcloud-tea a::before{
    background-color: var(--tea);
}
.s-tagcloud-black a {
    color: var(--black);
}
.s-tagcloud-black a:hover{
    color: var(--black-hover) !important;
}
.s-tagcloud-black a::before{
    background-color: var(--black);
}

/* BADGE */
.s-badge {
    position: relative;
    box-sizing: border-box;
    min-width: 18px;
    padding: 4px 8px;
    height: 20px;
    vertical-align: middle;
    color: var(--secondary);
    font-size: 12px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 0;
    color: var(--secondary);
    border: 1px solid var(--secondary);
    overflow: hidden;
}
.s-badge-small {
    padding: 2px 6px;
    font-size: 10px;
}
.s-badge-large {
    padding: 6px 10px;
    font-size: 16px;
}
.s-badge::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--secondary);
    opacity: .2;
}
.s-badge-primary {
    border-color: var(--primary);
    color: var(--primary);
}
.s-badge-primary::before {
    background-color: var(--primary);
}
.s-badge-red {
    border-color: var(--red);
    color: var(--red);
}
.s-badge-red::before {
    background-color: var(--red);
}
.s-badge-green {
    border-color: var(--green);
    color: var(--green);
}
.s-badge-green::before {
    background-color: var(--green);
}
.s-badge-blue {
    border-color: var(--blue);
    color: var(--blue);
}
.s-badge-blue::before {
    background-color: var(--blue);
}
.s-badge-yellow {
    border-color: var(--yellow);
    color: var(--yellow);
}
.s-badge-yellow::before {
    background-color: var(--yellow);
}
.s-badge-pink {
    border-color: var(--pink);
    color: var(--pink);
}
.s-badge-pink::before {
    background-color: var(--pink);
}
.s-badge-violet {
    border-color: var(--violet);
    color: var(--violet);
}
.s-badge-violet::before {
    background-color: var(--violet);
}
.s-badge-orange {
    border-color: var(--orange);
    color: var(--orange);
}
.s-badge-orange::before {
    background-color: var(--orange);
}
.s-badge-tea {
    border-color: var(--tea);
    color: var(--tea);
}
.s-badge-tea::before {
    background-color: var(--tea);
}
.s-badge-black {
    border-color: var(--black);
    color: var(--black);
}
.s-badge-black::before {
    background-color: var(--black);
}

/* BOX SHADOW */
.s-shadow {
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.s-shadow-medium {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
}
.s-shadow-large {
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.s-shadow-xlarge {
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

/* HOVER SHADOW */
.s-hover-shadow:hover {
    box-shadow: 0 7px 30px -10px rgba(150,170,180,0.5);
}
.s-hover-shadow-bottom:hover {
    
}
.s-shadow-medium.s-hover-shadow:hover{
    box-shadow: 0px 12px 28px 0px rgba(140, 149, 159, 0.3);
}
.s-shadow-large.s-hover-shadow:hover{
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.s-shadow-xlarge.s-hover-shadow:hover{
    box-shadow: 0 26px 58px 0 rgba(0, 0, 0, .22), 0 5px 14px 0 rgba(0, 0, 0, .18);
}
.s-hover-shadow-3d:hover{
    box-shadow: 0 60px 80px rgba(0,0,0,0.60), 0 45px 26px rgba(0,0,0,0.14);
}
/* BOX INNER */
.s-inner {
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.2);
}
.s-hover-inner:hover {
    box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.2);
}

/* HR */
hr, .s-hr {
    overflow: visible;
    text-align: inherit;
    margin: 0 0 20px 0;
    border: 0;
    border-top: 1px solid var(--border-color);
}
hr.hr-primary, .s-hr.hr-primary {
    border-top: 1px solid var(--primary)
}
hr.hr-secondary, .s-hr.hr-secondary {
    border-top: 1px solid var(--secondary)
}
hr.hr-red, .s-hr.hr-red {
    border-top: 1px solid var(--red)
}
hr.hr-green, .s-hr.hr-green {
    border-top: 1px solid var(--green)
}
hr.hr-blue, .s-hr.hr-blue {
    border-top: 1px solid var(--blue)
}
hr.hr-pink, .s-hr.hr-pink {
    border-top: 1px solid var(--pink)
}
hr.hr-violet, .s-hr.hr-violet {
    border-top: 1px solid var(--violet)
}
hr.hr-yellow, .s-hr.hr-yellow {
    border-top: 1px solid var(--yellow)
}
hr.hr-orange, .s-hr.hr-orange {
    border-top: 1px solid var(--orange)
}
hr.hr-tea, .s-hr.hr-tea {
    border-top: 1px solid var(--tea)
}
hr.hr-black, .s-hr.hr-black {
    border-top: 1px solid var(--black)
}

hr.hr-2  {
    border-width: 2px;
}
hr.hr-3  {
    border-width: 3px;
}
hr.hr-4  {
    border-width: 4px;
}

/* FORM */
.s-form-inline {

}
.s-input {
    color: var(--body-color) ;
    background-color: rgba(233, 233, 233, 15%) !important;
    border-color: var(--border-color);
}
.s-input::placeholder{
    color: var(--body-color);
}
.s-input.s-input-reverse-color {
    color: var(--reverse-headding) !important;
}
.s-input.s-input-reverse-color::placeholder{
    color: var(--reverse-body) !important;
}
.s-input:focus, .s-input:hover{
    color: var(--title-color) ;
    background-color: rgba(233, 233, 233, 30%) !important;
    border-color: var(--border-color);
}
.s-input-primary:focus , .s-input-primary:hover   {
    border-color: var(--primary) !important;
    color: var(--dark-primary);
    background-color: var(--soft-primary);
}
.s-input-secondary:focus , .s-input-secondary:hover   {
    border-color: var(--secondary) !important;
    
    color: var(--dark-secondary);
    background-color: var(--soft-secondary);
}
.s-input-red:focus , .s-input-red:hover   {
    border-color: var(--red) !important;
    
    color: var(--dark-red);
    background-color: var(--soft-red);
}
.s-input-green:focus , .s-input-green:hover   {
    border-color: var(--green) !important;
    
    color: var(--dark-green);
    background-color: var(--soft-green);
}
.s-input-blue:focus , .s-input-blue:hover   {
    border-color: var(--blue) !important;
    
    color: var(--dark-blue);
    background-color: var(--soft-blue);
}
.s-input-yellow:focus , .s-input-yellow:hover   {
    border-color: var(--yellow) !important;
    
    color: var(--dark-yellow);
    background-color: var(--soft-yellow);
}
.s-input-orange:focus , .s-input-orange:hover   {
    border-color: var(--orange) !important;
    
    color: var(--dark-orange);
    background-color: var(--soft-orange);
}
.s-input-black:focus , .s-input-black:hover   {
    border-color: var(--black) !important;
    
    color: var(--dark-black);
    background-color: var(--soft-black);
}
.s-input-pink:focus , .s-input-pink:hover   {
    border-color: var(--pink) !important;
    
    color: var(--dark-pink);
    background-color: var(--soft-pink);
}
.s-input-violet:focus , .s-input-violet:hover   {
    border-color: var(--violet) !important;
    
    color: var(--dark-violet);
    background-color: var(--soft-violet);
}
.s-input-tea:focus , .s-input-tea:hover   {
    border-color: var(--tea) !important;
    
    color: var(--dark-tea);
    background-color: var(--soft-tea);
}
/* CARD ICON */
.s-card-icon {
    width: 40px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.s-card-icon-small {
    width: 32px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.s-card-icon-large {
    width: 56px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* RADIO */
.s-radio , .s-checkbox{
    border-radius: 2px !important;
    background-color: #a2a2a213 ;
    border-color: #5d5d5d2f;
}
.s-radio:checked, .s-checkbox:checked {
    background-color: var(--primary);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: .55em .55em;
}
.s-radio-red:checked, .s-checkbox-red:checked {
    background-color: var(--red) !important;
}
.s-radio-secondary:checked, .s-checkbox-secondary:checked {
    background-color: var(--secondary) !important;
}
.s-radio-red:checked, .s-checkbox-red:checked {
    background-color: var(--red) !important;
}
.s-radio-green:checked, .s-checkbox-green:checked {
    background-color: var(--green) !important;
}
.s-radio-blue:checked, .s-checkbox-blue:checked {
    background-color: var(--blue) !important;
}
.s-radio-yellow:checked, .s-checkbox-yellow:checked {
    background-color: var(--yellow) !important;
}
.s-radio-orange:checked, .s-checkbox-orange:checked {
    background-color: var(--orange) !important;
}
.s-radio-black:checked, .s-checkbox-black:checked {
    background-color: var(--black) !important;
}
.s-radio-pink:checked, .s-checkbox-pink:checked {
    background-color: var(--pink) !important;
}
.s-radio-violet:checked, .s-checkbox-violet:checked {
    background-color: var(--violet) !important;
}
.s-radio-tea:checked, .s-checkbox-tea:checked {
    background-color: var(--tea) !important;
}

/* CUSTOM UIKIT */

.s-divider-light>:nth-child(n+2){
    border-color: var(--boder-light) !important ;
}
.s-divider-dark>:nth-child(n+2){
    border-color: var(--boder-dark) !important ;
}
.uk-navbar-nav>li>a {
    color: inherit;
}
.uk-navbar-dropdown-nav>li>a{
    color: inherit;
}
.uk-list-divider>:nth-child(n+2) {
    border-color: var(--border-color) !important;
}
.uk-nav-default>li.uk-active>a {
    color: var(--secondary);
}
.uk-nav-default {
    font-size: 16px;
}
.uk-nav-default>li>a{
    color: inherit;
}
.uk-comment-primary {
    position: relative;
    border: 1px solid var(--secondary);
    background-color: transparent !important;
}
.uk-breadcrumb>*>* {
    color: var(--body-color);
}
.uk-breadcrumb>:last-child>a:not([href]), .uk-breadcrumb>:last-child>span {
    color: var(--title-color);
}

/* NAV HOVER STYLE */
.uk-navbar-dropdown ul li:hover a{
    font-weight: 500 !important;
    color: inherit;
}
.s-nav-hover-1 ul li:not(.uk-navbar-dropdown){
   position: relative;
}
.s-nav-hover-1 ul li *:not(.uk-navbar-dropdown){
    position: relative;
}
.s-nav-hover-1 ul li .uk-navbar-dropdown ul li {
    position: relative;
}
.s-nav-hover-1 ul li:not(.uk-navbar-dropdown ul  li)::before{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 130%;
height: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(255 255 255 / 20%);
border-radius: inherit !important;
transition: all .3s;
opacity: 0;
}
.s-nav-light ul li:not(.uk-navbar-dropdown ul  li)::before{
    background-color: var(--primary) !important;
}
.s-nav-hover-1 ul li:hover::before, .s-nav-hover-1 ul li.active::before {
    opacity: 1 !important;
}

.s-nav-hover-1.s-nav-light ul li:hover a:not(.uk-navbar-dropdown ul li a), .s-nav-hover-1.s-nav-light ul li.active a:not(.uk-navbar-dropdown ul li a){
    color: var(--soft-primary) !important;
}
.s-nav-hover-1 ul li:hover a:not(.uk-navbar-dropdown ul li a), .s-nav-hover-1 ul li.active a:not(.uk-navbar-dropdown ul li a){
    color: inherit;
}


/* nav hover 2 */
.s-nav-hover-2 ul li:not(.uk-navbar-dropdown){
    position: relative;
 }
 .s-nav-hover-2 ul li *:not(.uk-navbar-dropdown){
     position: relative;
 }
 .s-nav-hover-2 ul li:hover *:not(.uk-navbar-dropdown ul li *), .s-nav-hover-2 ul li.active *:not(.uk-navbar-dropdown ul li *) {
     
 }
 .s-nav-hover-2 ul li:not(.uk-navbar-dropdown ul  li)::before{
 content: "";
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 4px;
 background-color: rgb(255 255 255 / 100%) !important;
 transition: all .3s;
 opacity: 0;
 }
 .s-nav-hover-2 ul li:hover::before, .s-nav-hover-2 ul li.active::before {
     opacity: 1 !important;
 }
 .s-nav-hover-2.s-nav-light ul li:not(.uk-navbar-dropdown ul  li)::before{
    background-color: var(--primary) !important;
 }
 .s-nav-hover-2.s-nav-light ul li *:not(.uk-navbar-dropdown ul  li):hover, .s-nav-hover-2.s-nav-light ul li.active *:not(.uk-navbar-dropdown ul  li){
    color: var(--dark-primary) !important;
 }
 .s-nav-hover-2 ul li:hover a:not(.uk-navbar-dropdown ul li a), .s-nav-hover-2 ul li.active a:not(.uk-navbar-dropdown ul li a){
    color: inherit;
}

 /* nav hover 3 */
.s-nav-hover-3 ul li:not(.uk-navbar-dropdown){
    position: relative;
 }
 .s-nav-hover-3 ul li *:not(.uk-navbar-dropdown){
     position: relative;
 }
 .s-nav-hover-3 ul li:hover *:not(.uk-navbar-dropdown ul li *), .s-nav-hover-3 ul li.active *:not(.uk-navbar-dropdown ul li *) {
     
 }
 .s-nav-hover-3 ul li:not(.uk-navbar-dropdown ul  li)::before{
 content: "";
 position: absolute;
 bottom: 20%;
 transform: translateY(-50%);
 width: 0%;
 height: 2px;
 background-color: var(--secondary) !important;
 transition: all .5s;
 opacity: 0;
 }
 .s-nav-hover-3 ul li:hover::before, .s-nav-hover-3 ul li.active::before {
     width: 85% !important;
     opacity: 1 !important;
 }
 .s-nav-hover-3.s-nav-light ul li:not(.uk-navbar-dropdown ul  li)::before{
    background-color: var(--primary) !important;
 }
 .s-nav-hover-3.s-nav-light ul li *:not(.uk-navbar-dropdown ul  li):hover, .s-nav-hover-3.s-nav-light ul li.active *:not(.uk-navbar-dropdown ul  li){
    color: var(--dark-primary) !important;
 }
 .s-nav-hover-3 ul li:hover a:not(.uk-navbar-dropdown ul li a), .s-nav-hover-3 ul li.active a:not(.uk-navbar-dropdown ul li a){
    color: inherit;
}

/* PROCESS */
.s-process div:nth-child(4) .arrow {
    display: none;
}

.uk-grid-divider>:not(.uk-first-column)::before {
    border-color: var(--border-color)  !important;
}
.uk-navbar-container:not(.uk-navbar-transparent) {
    background-color: none;
}
.uk-navbar-container:not(.uk-navbar-transparent) {
    background: none;
}