@charset "UTF-8";
@import url(plugins.css);

:root {
    --primary: #00ADB5;
    --primary2: #00ADB5;
    --primary3: #006E74;
    --second: #EA5F8B;
    --third: #006E74;
    --light: #F6F8FD;
    --light2: rgb(239, 239, 239);
    --white: #ffffff;
    --black: #000000;
    --danger: #C01C1C;
    --warning: #FFB92A;
    --yellow: #F1C061;
    --red: #C01C1C;
    --lime: #9CF740;

    --dark: rgba(22, 6, 71, 1);
    --dark-9: rgba(22, 6, 71, 0.9);
    --dark-8: rgba(22, 6, 71, 0.8);
    --dark-7: rgba(22, 6, 71, 0.7);
    --dark-6: rgba(22, 6, 71, 0.6);
    --dark-5: rgba(22, 6, 71, 0.5);
    --dark-4: rgba(22, 6, 71, 0.4);
    --dark-3: rgba(22, 6, 71, 0.3);
    --dark-2: rgba(22, 6, 71, 0.2);
    --dark-1: rgba(22, 6, 71, 0.1);

    --color: #160647;
    --color2: #4D4661;
    --color3: #5D5D7C;

    --color-white: rgba(255, 255, 255, 1);
    --color-white-9: rgba(255, 255, 255, 0.9);
    --color-white-8: rgba(255, 255, 255, 0.8);
    --color-white-7: rgba(255, 255, 255, 0.7);
    --color-white-6: rgba(255, 255, 255, 0.6);
    --color-white-5: rgba(255, 255, 255, 0.5);
    --color-white-4: rgba(133, 46, 46, 0.4);
    --color-white-3: rgba(255, 255, 255, 0.3);
    --color-white-2: rgba(255, 255, 255, 0.2);
    --color-white-1: rgba(255, 255, 255, 0.1);

    --border: #E2E8F0;
    --border2: #D9D9D9;
    --border3: #4D4661;
    --background: #ffffff;

    --shadow: 0 0.25rem 1rem 0.5rem rgba(31, 40, 41, 0.04);
    --shadow-xxs: 0 0.15rem 0.313rem 0.313rem rgba(31, 40, 41, 0.015);
    --shadow-xs: 0 0.15rem 0.625rem 0.5rem rgba(31, 40, 41, 0.035);
    --shadow-sm: 0 0.15rem 1rem 0.5rem rgba(31, 40, 41, 0.035);
    --shadow-md: 0 0.313rem 1.25rem rgba(31, 40, 41, 0.1);

    --gradient-1: linear-gradient(180deg, var(--primary) 0%, var(--primary2) 50.5%, var(--primary3) 99%);
    --gradient-2: linear-gradient(135deg, var(--primary) 0%, var(--primary2) 50.5%, var(--primary3) 100%);
    --gradient-3: linear-gradient(128deg, #160647 9.55%, #BCFCDA 95.96%);
    --gradient-4: linear-gradient(129deg, rgba(226, 232, 240, 0.40) 16.4%, rgba(177, 193, 224, 0.30) 87.63%);

    --transition: all .2s ease-in-out;
    --transition-2: all .2s ease-in-out;
    --transition-3: all .3s ease-in-out;
    --transition-4: all .4s ease-in-out;
    --transition-5: all .5s ease-in-out;
    --transition-6: all .6s ease-in-out;
    --transition-7: all .7s ease-in-out;
    --transition-8: all .8s ease-in-out;
    --transition-9: all .9s ease-in-out;

    --transform-fix: 'none';
    
    --font1: 'Urbanist', sans-serif;
}

[data-theme="dark"] {
    --background: #030312;
    --dark: #ffffff;
    --white: #000000;
    --text: #cccccc;
}


/* ------------------------------------ base ------------------------------------ */
    *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    html { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
    html, body { font-size: 100%; }
    body { background: var(--background); cursor: auto; font-family: var(--font1); font-style: normal; font-weight: 300; font-size: 1rem; line-height: 1.5; color: var(--color); margin: 0; padding: 0; }

    ::-moz-selection { background: var(--primary); color: var(--white); }
    ::selection { background: var(--primary); color: var(--white); }

    .link { position: relative; font-weight: 500; font-size: 1rem; line-height: 1.2; color: var(--primary) !important; z-index: 4; }
    .link .icon { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 0.625rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .link:hover .icon { margin-left: 0.938rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .link-arrow { position: relative; font-weight: 500; font-size: 1rem; line-height: 1.2; color: var(--primary) !important; padding-right: 2rem; z-index: 4; -webkit-transition: right 0.4s; -moz-transition: right 0.4s; -ms-transition: right 0.4s; -o-transition: right 0.4s; transition: right 0.4s; }
    .link-arrow:before { content: '\e829'; font-family: 'Feather'; position: absolute; top: 0; right: 0; font-size: 1.25rem; line-height: 1; color: var(--primary); vertical-align: middle; -webkit-transition: right 0.4s; -moz-transition: right 0.4s; -ms-transition: right 0.4s; -o-transition: right 0.4s; transition: right 0.4s; }
    .link-arrow:hover:before { right: -0.625rem; }

    .link-arrow.style-2:before { opacity: 0; visibility: hidden; }
    .link-arrow.style-2:hover:before { opacity: 1; visibility: visible; }

    @media (max-width: 768px) {
        .link { font-size: 0.875rem; }
        .link-arrow:before { top: -1px }
    }

    ol { padding: 0; margin: 0; }
    ol li { list-style: decimal inside !important; }
    ul { padding: 0; margin: 0; }
    ul li { list-style: none; }
    .list-unstyled { padding-left: 0; list-style: none; }
    .list-inline { padding-left: 0; list-style: none; }
    .list-inline-item { display: inline-block; }
    .list-inline-item:not(:last-child) { margin-right: 0.938rem; }

    meta.foundation-version { font-family: "/5.5.2/"; }
    meta.foundation-mq-small { font-family: "/only screen/"; width: 0; }
    meta.foundation-mq-small-only { font-family: "/only screen and (max-width: 40em)/"; width: 0; }
    meta.foundation-mq-medium { font-family: "/only screen and (min-width:40.0625em)/"; width: 40.0625em; }
    meta.foundation-mq-medium-only { font-family: "/only screen and (min-width:40.0625em) and (max-width:64em)/"; width: 40.0625em; }
    meta.foundation-mq-large { font-family: "/only screen and (min-width:64.0625em)/"; width: 64.0625em; }
    meta.foundation-mq-large-only { font-family: "/only screen and (min-width:64.0625em) and (max-width:90em)/"; width: 64.0625em; }
    meta.foundation-mq-xlarge { font-family: "/only screen and (min-width:90.0625em)/"; width: 90.0625em; }
    meta.foundation-mq-xlarge-only { font-family: "/only screen and (min-width:90.0625em) and (max-width:120em)/"; width: 90.0625em; }
    meta.foundation-mq-xxlarge { font-family: "/only screen and (min-width:120.0625em)/"; width: 120.0625em; }
    meta.foundation-data-attribute-namespace { font-family: false; }

    .opacity-1 { opacity: 0.1; }
    .opacity-2 { opacity: 0.2; }
    .opacity-3 { opacity: 0.3; }
    .opacity-4 { opacity: 0.4; }
    .opacity-5 { opacity: 0.5; }
    .opacity-6 { opacity: 0.6; }
    .opacity-7 { opacity: 0.7; }
    .opacity-8 { opacity: 0.8; }
    .opacity-9 { opacity: 0.9; }
    .opacity-none { opacity: 1; }

    #map_canvas img, #map_canvas embed, #map_canvas object, .map_canvas img, .map_canvas embed, .map_canvas object, .mqa-display img, .mqa-display embed, .mqa-display object { max-width: none !important; }

    .left { float: left !important; }
    .right { float: right !important; }

    .clearfix:before, .clearfix:after { content: " "; display: table; }
    .clearfix:after { clear: both; }

    .hide { display: none; }
    .show { display: block; }

    .invisible { visibility: hidden; }
    .visible { visibility: visible; }

    .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

    .single { overflow: auto; width: 100%; height: 100%; }

    .no-padding { padding: 0; }
    .no-overflow { overflow: hidden; }

    .centered-text { text-align: center; }

    img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; -ms-interpolation-mode: bicubic; }
    .img-contain { object-fit: contain; position: 50% 50%; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; -o-transition: transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; }
    .img-cover { object-fit: cover; position: 50% 50%; width: 100%; height: 100%; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; -o-transition: transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; }
    .img-cover.hover-scale { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; -o-transition: transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; }

    .hv-obj-zoom { overflow: hidden; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-obj-zoom:hover, .hv-obj-zoom:focus { -webkit-transform: scale(1.09); -ms-transform: scale(1.09); transform: scale(1.09); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .hv-zoom { position: relative; overflow: hidden; }
    .hv-zoom img:not(.fix) { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-zoom:hover img:not(.fix) { -webkit-transform: scale(1.09); -moz-transform: scale(1.09); -ms-transform: scale(1.09); -o-transform: scale(1.09); transform: scale(1.08); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .hv-shadow-sm { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow-sm:hover, .hv-shadow-sm:focus { box-shadow: 0 0.24rem 0.625rem rgba(0, 0, 0, 0.0786943); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow:hover, .hv-shadow:focus { box-shadow: 0 0.625rem 2.813rem rgba(0, 0, 0, 0.0986943); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .hv-trigger { position: relative; overflow: hidden; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-trigger:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 20%; height: 20%; opacity: 0; visibility: hidden; border-radius: 0.6rem; background: var(--light); z-index: 0; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-trigger:hover:before, .hv-trigger:focus:before { width: 100%; height: 100%; opacity: 1; visibility: visible; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .hv-underline { position: relative; padding: 0; }
    .hv-underline:hover { text-decoration: none; }
    .hv-underline:before { content: ''; display: block; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; transition: width 0s ease, background 0.25s ease; }
    .hv-underline:after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 1px;
        width: 0;
        background: var(--second);
        transition: width 0.25s ease;
    }
    .hv-underline:hover:before { width: 100%; background: var(--second); transition: width 0.25s ease; }
    .hv-underline:hover:after { width: 100%; background: transparent; transition: all 0s ease; }

    .spacing { height: 1.25rem; }
    .two.spacing { height: 2.5rem; }
    .three.spacing { height: 3.2rem; }
    .four.spacing { height: 5rem; }

    /* section */
    .section { position: relative; }
    .section-xl { padding-top: 5.8rem; padding-bottom: 5.8rem; }
    .section-lg { padding-top: 5rem; padding-bottom: 5rem; }
    .section-md { padding-top: 3.75rem; padding-bottom: 3.75rem; }
    .section-sm { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .section-xs { padding-top: 1.563rem; padding-bottom: 1.563rem; }
    .section-xxs { padding-top: 0.938rem; padding-bottom: 0.938rem; }

    @media (max-width: 1200px) {
        .section-xl { padding-top: 5.75rem; padding-bottom: 5.75rem; }
        .section-lg { padding-top: 4.75rem; padding-bottom: 4.75rem; }
        .section-md { padding-top: 3.5rem; padding-bottom: 3.5rem; }
        .section-sm { padding-top: 2.25rem; padding-bottom: 2.25rem; }
        .section-xs { padding-top: 1.35rem; padding-bottom: 1.35rem; }
        .section-xxs { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    }
    @media (max-width: 992px) {
        .section-xl { padding-top: 5rem; padding-bottom: 5rem; }
        .section-lg { padding-top: 4.2rem; padding-bottom: 4.2rem; }
        .section-md { padding-top: 3.10rem; padding-bottom: 3.10rem; }
        .section-sm { padding-top: 2.10rem; padding-bottom: 2.10rem; }
        .section-xs { padding-top: 1.25rem; padding-bottom: 1.25rem; }
        .section-xxs { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    }

    /*scrollable*/
    .scrollable {
        position: relative;
        display: -ms-flexbox;
        display: flex; 
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: inherit;
        flex-wrap: inherit;
        white-space: nowrap;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
        /* -webkit-overflow-scrolling: touch; */
        /* -ms-overflow-style: none; */
        /* scrollbar-width: none; */
    }
    .scrollable::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; cursor: pointer; }
    .scrollable::-webkit-scrollbar-track { background: rgba(241, 241, 241, 0); border-radius: 2.5rem; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .scrollable::-webkit-scrollbar-thumb { background: rgba(195, 195, 195, 0); border-radius: 2.5rem; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .scrollable:hover::-webkit-scrollbar-track { background: rgba(241, 241, 241, 0.8); -webkit-box-shadow: inset 0 0.313rem 0.5rem rgba(241, 241, 241, 1); box-shadow: inset 0 0.313rem 0.5rem rgba(241, 241, 241, 1); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .scrollable:hover::-webkit-scrollbar-thumb { background: rgba(195, 195, 195, 0.5); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    .scrollable::-webkit-scrollbar-thumb:horizontal:hover,
    .scrollable::-webkit-scrollbar-thumb:vertical:hover { background: rgba(195, 195, 195, 1); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
    
    .h-scrollable { -ms-flex-direction: row !important; flex-direction: row !important; overflow-y: hidden !important; overflow-x: auto !important; }
    .h-scrollable::-webkit-scrollbar { height: 0.313rem; }

    main.wrap-site { 
        --navbar-height: 75px; 
        position: relative; 
        padding-top: var(--navbar-height); 
        background: var(--light);
    }
    main.wrap-site .site-page { min-height: 47.5vh; }
    main.wrap-site.site-2 { padding-top: 0; }
/* ------------------------------------ end basic ------------------------------------ */


/* ------------------------------------ navbar ------------------------------------ */
    .site-2 .navbar { background: transparent; }
    
    .navbar { position: fixed; top: 0; left: 0; width: 100%; height: var(--navbar-height); padding: 0; z-index: 99; background: transparent; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .navbar .inner { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; }
    
    .navbar .navbar-area { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    
    .navbar .navbar-mobile-action { display: none; }

    .navbar .navbar-brand { position: relative; }
    .navbar .navbar-brand .brand-img { object-fit: contain; width: auto; max-width: 9rem; max-height: 1.75rem; display: inline-block; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .navbar .navbar-brand.mobile { display: none; z-index: 9999; }
    .navbar .navbar-brand.desktop { display: inline-block; }

    .navbar .navbar-nav { position: relative; }
    .navbar .navbar-nav .nav-item { position: relative; display: inline-flex; align-items: center; }
    .navbar .navbar-nav .nav-item .nav-link {
        position: relative;
        font-size: 1rem;
        letter-spacing: 0.02rem;
        color: var(--color3);
        background-color: transparent;
        padding: 0.625rem 1.5rem !important;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .navbar .navbar-nav .nav-item .nav-link:hover { color: var(--color) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .navbar .navbar-nav .nav-item .nav-link:active, .navbar .navbar-nav .nav-item .nav-link.active { font-weight: 500; color: var(--color) !important; }

    .navbar .navbar-action { display: flex; align-items: center; gap: 1rem; }
    .navbar .navbar-action .action-item .dropdown-user { display: flex; align-items: center; justify-content: center; }
    .navbar .navbar-action .action-item .dropdown-user .nav-link { padding: 0; width: 3rem; height: 3rem; margin: auto; display: flex; align-items: center; justify-content: center; }
    .navbar .navbar-action .action-item .dropdown-user .nav-link i { position: relative; font-size: 1.5rem; color: var(--color3); }
    .navbar .navbar-action .action-item .dropdown-user .nav-link .img-user { position: relative; object-fit: cover; object-position: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--light); font-weight: 600; letter-spacing: 0.02rem; color: var(--color2); }
    .navbar .navbar-action .action-item .dropdown-user .nav-link.hv-trigger:before { background: var(--dark-1); }
    .navbar .navbar-action .action-item .dropdown-user .nav-link::after { display: none; }
    .navbar .navbar-action .action-item .dropdown-user .dropdown-menu { min-width: 21.875rem !important; }

    /* toggler */
    .navbar-toggler { position: relative; width: 3.125rem; height: 3.125rem; padding: 0 0.7rem; background: var(--background); z-index: 9999; border: none; border-radius: 0.938rem; outline: 0 !important; box-shadow: none !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .navbar-toggler .icon-bar { width: 29px; height: 3px; background: var(--color); display: block; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    
    .navbar-toggler .top-bar { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 10% 10%; transform-origin: 10% 10%; left: 0; position: relative; }
    .navbar-toggler .middle-bar { opacity: 1; margin: 5px 0; }
    .navbar-toggler .bottom-bar { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 10% 90%; transform-origin: 10% 90%; left: 0px; position: relative; }

    .navbar-toggler[aria-expanded="true"] .top-bar { -webkit-transform: rotate(45deg); transform: rotate(45deg); left: 0; }
    .navbar-toggler[aria-expanded="true"] .middle-bar { opacity: 0; }
    .navbar-toggler[aria-expanded="true"] .bottom-bar { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); left: 0; }

    /* shrink */
    .navbar.shrink { background: var(--gradient-4); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }

    @media(max-width: 1400px) {
        .navbar .navbar-nav .nav-item .nav-link { padding: 1.563rem 1.25rem; }
    }
    @media(max-width: 1200px) {
        .navbar .navbar-area { flex-direction: column; align-items: flex-start; justify-content: space-between; max-width: 960px; margin: auto; padding: 0 0.938rem; }
        
        .navbar .navbar-nav { width: 100%; }
        .navbar .navbar-nav .nav-item .nav-link { width: 100%; padding: 1rem 0 !important; }

        .navbar .navbar-brand.mobile { display: inline; }
        .navbar .navbar-brand.desktop { display: none; }
        .navbar .navbar-brand .brand-img { max-width: 8.5rem; max-height: 1.5rem; }

        .navbar-collapse { display: block !important; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; transform: translateY(-50%); opacity: 0; visibility: hidden; padding-top: var(--navbar-height); padding-bottom: 0.938rem; background: var(--background); -webkit-transition: var(--transition-2); -moz-transition: var(--transition-2); -ms-transition: var(--transition-2); -o-transition: var(--transition-2); transition: var(--transition-2); }
        .navbar-collapse.show { transform: translateY(0); opacity: 1; visibility: visible; -webkit-transition: var(--transition-2); -moz-transition: var(--transition-2); -ms-transition: var(--transition-2); -o-transition: var(--transition-2); transition: var(--transition-2); }

        .navbar .navbar-action { justify-content: flex-end; gap: 2.5rem; margin-top: 1.25rem; }
        .navbar .navbar-action.is-login { display: none; }

        .navbar .navbar-mobile-action { flex-shrink: 0; display: flex; align-items: center; gap: 0.625rem; }
        .navbar .navbar-mobile-action .navbar-action.is-login { display: flex; gap: 0.625rem; margin-top: 0; }
    }
    @media(max-width: 992px) {
        .navbar .navbar-area { max-width: 720px; }
    }
    @media(max-width: 580px) {
        .navbar .navbar-nav .nav-item .nav-link { padding: 0.625rem 0 !important; }
        .navbar .navbar-area { max-width: 540px; }
        
        .navbar .navbar-action .action-item .dropdown-user .dropdown-menu { right: -100%; transform: translateX(10%); min-width: 90vw !important; max-width: 90vw !important; }
        .navbar .navbar-action.is-login.mobile .action-item:nth-child(2) .dropdown-user .dropdown-menu { transform: translateX(0); min-width: 60vw !important; }
    }
/* ------------------------------------ end navbar ------------------------------------ */


/* ------------------------------------ typografi ------------------------------------ */
    .text-gradiant { background: -webkit-linear-gradient(#0076a3, #3c91b3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
    .text-shadow { text-shadow: 1px 1px var(--white); }
    .para-width { max-width: 650px; }

    p { font-weight: 300; }

    .font-weight-200, .fw-200 { font-weight: 200 !important; }
    .font-weight-light, .fw-300 { font-weight: 300 !important; }
    .font-weight-lighter, .fw-lighter { font-weight: lighter !important; }
    .font-weight-normal, .fw-400 { font-weight: 400 !important; }
    .font-weight-500, .fw-500 { font-weight: 500 !important; }
    .font-weight-600, .fw-600 { font-weight: 600 !important; }
    .font-weight-bold, .fw-bold { font-weight: 600 !important; }
    .font-weight-800, .fw-800 { font-weight: 800 !important; }
    .font-weight-900, .fw-900 { font-weight: 900 !important; }
    .font-weight-ultra, .fw-ultra { font-weight: 900 !important; }
    .font-weight-bolder, .fw-bolder { font-weight: 700 !important; }
    .font-italic { font-style: italic !important; }

    .fs-10 { font-size: 0.625rem !important; }
    .fs-11 { font-size: 0.688rem !important; }
    .fs-12 { font-size: 0.75rem !important; }
    .fs-13 { font-size: 0.813rem !important; }
    .fs-14 { font-size: 0.875rem !important; }
    .fs-15 { font-size: 0.938rem !important; }
    .fs-16 { font-size: 1rem !important; }
    .fs-17 { font-size: 1.063rem !important; }
    .fs-18 { font-size: 1.125rem !important; }
    .fs-19 { font-size: 1.188rem !important; }
    .fs-20 { font-size: 1.25rem !important; }
    .fs-21 { font-size: 1.313rem !important; }
    .fs-22 { font-size: 1.375rem !important; }
    .fs-23 { font-size: 1.438rem !important; }
    .fs-24 { font-size: 1.5rem !important; }
    .fs-25 { font-size: 1.563rem !important; }
    .fs-30 { font-size: 1.875rem !important; }
    .fs-40 { font-size: 2.5rem !important; }
    .fs-50 { font-size: 3.125rem !important; }
    .fs-60 { font-size: 3.2rem !important; }

    .font-xs { font-size: 0.75rem !important; }
    .font-sm { font-size: 0.938rem !important; }
    .font-md { font-size: 1.125rem !important; }
    .font-lg { font-size: 1.25rem !important; }

    .lh-1 { line-height: 1 !important; }
    .lh-2 { line-height: 1.2 !important; }
    .lh-3 { line-height: 1.3 !important; }
    .lh-4 { line-height: 1.4 !important; }
    .lh-5 { line-height: 1.5 !important; }

    .text-decoration-none { text-decoration: none !important; }
    .text-break { word-break: break-word !important; overflow-wrap: break-word !important; }
    .word-break-all { word-break: break-all !important; }
    .text-reset { color: inherit !important; }

    .text-accent { color: var(--primary) !important; }
    .text-second { color: var(--second) !important; }
    .text-light { color: var(--light) !important; }
    .text-dark { color: var(--dark) !important; }
    .text-white { color: var(--white) !important; }
    .text-black { color: var(--black) !important; }
    .text-color { color: var(--color) !important; }
    .text-color2 { color: var(--color2) !important; }
    .text-color3 { color: var(--color3) !important; }
    .text-danger { color: #f73757!important; }
    .text-success { color: #18bb6b!important; }
    .text-info { color: #32bfff!important; }
    .text-warning { color: #ffab4d!important; }

    .section-subheading { font-weight: 500; font-size: 1rem; line-height: 1.2; letter-spacing: 0.02rem; color: var(--color); margin-bottom: 0.5rem; }
    .section-heading-xxl { font-weight: 500; font-size: 3.125rem; line-height: 1.3; color: var(--color); }
    .section-heading-xl { font-weight: 500; font-size: 2.8rem; line-height: 1.3; color: var(--color); }
    .section-heading-lg { font-weight: 500; font-size: 2.4rem; line-height: 1.3; color: var(--color); }
    .section-heading { font-weight: 500; font-size: 2rem; line-height: 1.3; color: var(--color); }
    .section-heading-sm { font-weight: 500; font-size: 1.75rem; line-height: 1.3; color: var(--color); }
    .section-heading-xs { font-weight: 500; font-size: 1.5rem; line-height: 1.3; color: var(--color); }
    .section-description-xl { font-size: 1.375rem; line-height: 160%; letter-spacing: 0.03rem; color: var(--color2); }
    .section-description-lg { font-size: 1.25rem; line-height: 160%; letter-spacing: 0.03rem; color: var(--color2); }
    .section-description { font-size: 1.125rem; line-height: 160%; letter-spacing: 0.03rem; color: var(--color2); }
    .section-description-md { font-size: 1rem; line-height: 160%; letter-spacing: 0.03rem; color: var(--color2); }
    .section-description-sm { font-size: 0.875rem; line-height: 160%; letter-spacing: 0.03rem; color: var(--color2); }
    .section-description-xs { font-size: 0.75rem; line-height: 150%; letter-spacing: 0.03rem; color: var(--color2); }
    .section-description-xxs { font-size: 0.625rem; line-height: 150%; letter-spacing: 0.03rem; color: var(--color2); }

    @media (max-width: 1200px) {
        .section-heading-xxl { font-size: 2.7rem; }
        .section-heading-xl { font-size: 2.5rem; }
        .section-heading-lg { font-size: 2.2rem; }
        .section-heading { font-size: 1.75rem; }
        .section-heading-sm { font-size: 1.5rem; }
        .section-heading-xs { font-size: 1.375rem; }
        .section-description-xl { font-size: 1.25rem; }
        .section-description-lg { font-size: 1.125rem; }
        .section-description { font-size: 1.063rem; }
        .section-description-md { font-size: 0.938rem; }
        .section-description-sm { font-size: 0.813rem; }
        .section-description-xs { font-size: 0.688rem; }
        .section-description-xxs { font-size: 0.5rem; }
    }
    @media (max-width: 768px) {
        .section-heading-xxl { font-size: 2.5rem; }
        .section-heading-xl { font-size: 2.3rem; }
        .section-heading-lg { font-size: 2rem; }
        .section-heading { font-size: 1.625rem; }
        .section-heading-sm { font-size: 1.375rem; }
        .section-heading-xs { font-size: 1.313rem; }
    }


    a { color: var(--color); text-decoration: none; cursor: pointer; -webkit-transition-property: color; -moz-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    *:focus { text-decoration: none; outline: none; }
    a:focus, a:hover, a:active, *:focus,
    a:focus h1, a:hover h1, a:active h1,
    a:focus h2, a:hover h2, a:active h2,
    a:focus h3, a:hover h3, a:active h3,
    a:focus h4, a:hover h4, a:active h4,
    a:focus h5, a:hover h5, a:active h5,
    a:focus h6, a:hover h6, a:active h6 { 
        color: var(--primary); cursor: pointer; outline: none; text-decoration: none; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); 
    }

    a.hover:hover { text-decoration: underline; transition-duration: 0.2s; }
    a.hover-1 { padding-bottom: 0.1rem; text-decoration: none; background-image: linear-gradient(var(--primary), var(--primary)); background-position: 1% 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size cubic-bezier(0,.5,0,1) 0.3s; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    a.hover-1:hover { text-decoration: none; background-size: 100% 1px; -webkit-transition: var(--transition-3); -moz-transition: var(--transition-3); -ms-transition: var(--transition-3); -o-transition: var(--transition-3); transition: var(--transition-3); }
    a.hover-1.white { background-image: linear-gradient(var(--white), var(--light)); }
    a.hover-1.dark { background-image: linear-gradient(var(--color2), var(--dark)); }
    a.hover-2 { text-decoration: none; background-image: linear-gradient(var(--light), var(--light)); background-position: 1% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size cubic-bezier(0,.5,0,1) 0.3s; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    a.hover-2:hover { text-decoration: none; background-size: 100% 50px; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    a.hover-3:hover { margin-left: 3px; transition-duration: 0.2s; }
    a.hover-4:hover { padding-bottom: 3px; transition-duration: 0.2s; }
/* ------------------------------------ end typografi ------------------------------------ */


/* ------------------------------------ form style ------------------------------------ */
    .form-style .form-group { width: 100%; position: relative; margin-bottom: 0.625rem; }

    .control-label { font-weight: 300; font-size: 0.938rem; line-height: 1.2; letter-spacing: 0.02rem; color: var(--color); margin-bottom: 0.25rem; }
    .control-label .required { color: var(--danger); }
    .control-label .note { font-weight: 400; font-size: 0.7rem; letter-spacing: 0.03rem; color: var(--color3); }
    .form-control { 
        position: relative;
        display: block;
        width: 100%;
        height: calc(2.5rem + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        border-radius: 0.938rem;
        background: var(--white); 
        border: 1px solid var(--border2);
        font-weight: 400;
        font-size: 0.938rem; 
        line-height: 1.2;
        color: var(--color); 
        -webkit-appearance: none; -moz-appearance: none; appearance: none;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .form-control::placeholder { font-weight: 300; font-size: 0.938rem; letter-spacing: 0.02rem; color: var(--color); opacity: 0.3; }
    .form-control::-webkit-input-placeholder { font-weight: 300; font-size: 0.938rem; letter-spacing: 0.02rem; color: var(--color); opacity: 0.3; }
    .form-control::-moz-placeholder { font-weight: 300; font-size: 0.938rem; letter-spacing: 0.02rem; color: var(--color); opacity: 0.3; }
    .form-control:-ms-input-placeholder { font-weight: 300; font-size: 0.938rem; letter-spacing: 0.02rem; color: var(--color); opacity: 0.3; }
    .form-control:-moz-placeholder { font-weight: 300; font-size: 0.938rem; letter-spacing: 0.02rem; color: var(--color); opacity: 0.3; }
    .form-control:disabled, .form-control[readonly] { background-color: var(--light); opacity: 1; }
    .form-control:focus,
    .select2-selection--single:focus { 
        box-shadow: none; background: var(--white) !important; border-color: var(--dark) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); 
    }
    .form-control:disabled:focus, .form-control[readonly]:focus { cursor: not-allowed; box-shadow: none; background: var(--light) !important; border-color: var(--border2) !important; }

    .form-actions { margin-top: 1.875rem; }
    .wrap-input { position: relative; }
    select { width: 100%; }
    textarea.form-control { height: auto; min-height: 3.2rem; padding: 0.45rem 0.75rem; }

    .form-style .form-group input[type=checkbox] { appearance: checkbox; -moz-appearance: checkbox; -webkit-appearance: checkbox; -o-appearance: checkbox; -ms-appearance: checkbox; }
    .form-style .form-group input[type=radio] { appearance: radio; -moz-appearance: radio; -webkit-appearance: radio; -o-appearance: radio; -ms-appearance: radio; }
    .form-style .form-group input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }

    .form-style .form-group .group-inner { position: relative; }
    .form-style .form-group .group-inner .group-inner-icon { position: absolute; top: 0.875rem; width: 1.25rem; z-index: 2; }
    .form-style .form-group .group-inner .group-inner-icon i { font-size: 1rem; color: var(--color2); }
    .form-style .form-group .group-inner .group-inner-icon svg { width: 1rem; height: 1rem; stroke: var(--color3); }
    
    .form-style .form-group .group-inner.s-icon .group-inner-icon { left: 0.75rem; }
    .form-style .form-group .group-inner.s-icon .form-control { padding-left: calc(0.95rem + 1.25rem); }

    .form-style .form-group .group-inner.e-icon .group-inner-icon { right: 0.75rem; }
    .form-style .form-group .group-inner.e-icon .form-control { padding-right: calc(0.95rem + 1.25rem); }
    
    .form-style .form-group .group-inner.se-icon .group-inner-icon { left: 0.75rem; right: 0.75rem; }
    .form-style .form-group .group-inner.se-icon .form-control { padding-left: calc(0.95rem + 1.25rem); padding-right: calc(0.95rem + 1.25rem); }

    .form-style .form-group .group-inner.style-1 .group-inner-icon { width: auto; right: 0.75rem; background: var(--background); color: var(--color) !important; }
    .form-style .form-group .group-inner.style-1 .group-inner-icon:before { content: ''; position: absolute; top: 0; left: -1rem; width: 1px; height: 100%; background: var(--border2); }
    .form-style .form-group .group-inner.style-1 .form-control { padding-right: calc(0.95rem + 4.5rem); }


    /*input group left icon*/
    .form-style .form-group .input-group.input-telp { overflow: visible; }
    .form-style .form-group .input-group.input-telp .input-group-addon { position: absolute; top: 0; bottom: 0; left: 0.75rem; margin: auto; z-index: 5; display: inline-flex; align-items: center; }
    .form-style .form-group .input-group.input-telp .input-group-addon img.flag-ind { width: auto; height: 1.25rem; margin-right: 0.35rem; }
    .form-style .form-group .input-group.input-telp .input-group-addon span { font-weight: normal; font-size: 0.938rem; line-height: 1.2; }
    .form-style .form-group .input-group.input-telp .form-control { padding-left: 70px; border-radius: 0.625rem !important; }
    .form-style .form-group .input-group.input-telp .form-control:focus { box-shadow: none; border-color: var(--primary); }
    

    /* form search */
    .form-style .form-group.form-search .group-inner .group-inner-icon { width: 1.55rem; left: 1.25rem; }
    .form-style .form-group.form-search .group-inner .group-inner-icon i { font-size: 1.55rem; }
    .form-style .form-group.form-search .group-inner .form-control { padding-left: 3.5rem; letter-spacing: 0.04rem; border-radius: 1.25rem; }

    
    /*show password*/
    .form-style .form-group .show-password { cursor: pointer; position: absolute; top: 1.2rem; right: 0.85rem; font-size: 0.938rem; color: var(--color); opacity: 0.4; z-index: 5; }


    /*input file*/
    .input-file-style { position: relative; overflow: hidden; }
    .input-file-style input { position: absolute; top: 0; left: 0; margin: 0; padding: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }



    /*radio button*/
    .custom-radio { align-items: center; }
    .custom-radio input { position: absolute; opacity: 0; visibility: hidden; }
    .custom-radio label { font-weight: 400; font-size: 0.938rem; line-height: 1.2; color: var(--color2); }
    .custom-radio input + label { position: relative; padding: 0; cursor: pointer; }
    .custom-radio input + label:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -1.45rem;
        margin: auto;
        height: 1.13rem;
        width: 1.13rem;
        background: var(--background);
        border: 1px solid var(--border2);
        border-radius: 50%;
    }
    .custom-radio input + label:after {
        content: '';
        position: absolute;
        top: 0.013rem;
        bottom: 0;
        left: -1.32rem;
        margin: auto;
        background: var(--primary);
        border-color: var(--primary);
        width: 0.875rem;
        height: 0.875rem;
        border-radius: 50%;
        opacity: 0;
        transform: scale(2);
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .custom-radio input:checked + label:after { opacity: 1; transform: scale(1); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }


    /*radio style*/
    .radio-style { position: relative; width: 100%; height: 100%; margin-bottom: 0.313rem; }
    .radio-style .radio-tile { position: relative; width: 100%; }
    .radio-style .radio-tile .radio-box { position: relative; width: 100%; height: 100%; border-radius: 0.938rem; border: 2px solid transparent; }
    .radio-style .radio-tile .radio-box:before { 
        content: '';
        position: absolute; 
        top: 0.625rem; 
        right: 0.625rem; 
        width: 1.25rem; 
        height: 1.25rem; 
        border-radius: 50%; 
        background: var(--color-white);
        font-weight: bold; 
        font-size: 1rem; 
        line-height: 1;
        color: var(--color-white); 
        display: flex; 
        align-items: center; 
        justify-content: center;
        z-index: 9;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .radio-style .radio-tile .radio-box img { object-fit: contain; margin: auto; width: auto; }
    .radio-style .radio-tile .radio-text { font-weight: 500; text-align: center; margin-bottom: 0; }
    
    .radio-style .radio-button { z-index: 2; opacity: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; cursor: pointer; }
    .radio-style .radio-button:checked + .radio-tile .radio-box { border: 2px solid var(--dark); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .radio-style .radio-button:checked + .radio-tile .radio-box:before { 
        font-family: 'feather';
        content: '\e83f';
        background: var(--lime);
        color: var(--dark);
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); 
    }


    /* custome checkbox */
    .form-check-input { width: 1.125rem; height: 1.125rem; box-shadow: none !important; border: 1px solid var(--border2); margin-top: 0.1rem; }
    .form-check-input:checked { background-color: var(--dark) !important; border-color: var(--dark) !important; }
    .form-check-input:hover, .form-check-label:hover { cursor: pointer; }


    /* datepicker */
    .datepicker > div table thead tr th { font-weight: 500; font-size: 0.938rem; }
    .datepicker > div table tbody tr td { padding: 0.125rem 0.313rem; border-radius: 0.313rem; }
    .datepicker > div.datepicker-days table tbody tr td { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .datepicker > div.datepicker-months table tbody tr td span { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .datepicker > div.datepicker-years table tbody tr td span { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .datepicker > div.datepicker-days table tbody tr td:hover { background: var(--light) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .datepicker > div.datepicker-months table tbody tr td span:hover { background: var(--light) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .datepicker > div.datepicker-years table tbody tr td span:hover { background: var(--light) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .datepicker > div table tbody tr td.active { background: var(--second) !important; }
    .datepicker > div table tbody tr td .active { background: var(--second) !important; }

    .datepicker.dropdown-menu {
        padding: 0.625rem;
        background-color: var(--white);
        border: none;
        -webkit-border-radius: 0.625rem;
        -moz-border-radius: 0.625rem;
        border-radius: 0.625rem;
        -webkit-box-shadow: 0 0.313rem 0.625rem rgba(0, 0, 0, 0.10);
        -moz-box-shadow: 0 0.313rem 0.625rem rgba(0, 0, 0, 0.10);
        box-shadow: 0 0.313rem 0.625rem rgba(0, 0, 0, 0.10);
        color: var(--dark);
    }
    .datepicker table tr td.day:hover, .datepicker table tr td.day.focused { background: var(--light); }


    .file-input-custom { position: absolute; left: 0; top: 0; height: 100%; width: 100%; opacity: 0; cursor: pointer; }
    .file-input-custom:focus { outline: none; }
    .input-custom-area * { box-sizing: border-box; }
    .input-custom-area {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 100%;
        height: calc(2.25rem + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        border-radius: 0.5rem;
        background: var(--white); 
        border: 1px solid var(--border2);
        font-weight: 400;
        font-size: 0.938rem; 
        line-height: 1.2;
        color: var(--color); 
    }
    .input-custom-area.is-active { background-color: rgba(0, 20, 20, 0.03); }
    .input-custom-btn { display: inline-block; background: var(--primary); border-radius: 0.313rem; padding: 0.5rem 1rem; margin-right: 0.625rem; font-size: 0.75rem; letter-spacing: 0.02rem; color: var(--color-white); }
    .input-custom-btn:before { content: '\ea01'; font-family: 'LineIcons'; margin-right: 0.313rem; }
    .input-custom-hint { flex: 1; font-size: 0.75rem; color: var(--color3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    

    /* summernote */
    .note-editor { border: 1px solid var(--border2) !important; overflow: hidden; border-radius: 0.938rem;}
    .note-editor .card-header { background: none; padding: 0.375rem 0.75rem; }
    .note-editor .note-toolbar { background: var(--light); }
    .note-btn-group .note-btn { border-color: transparent; font-weight: normal; font-size: 0.875rem; color: var(--dark); outline: 0; -webkit-box-shadow: none; box-shadow: none; }
    .note-btn-group .note-btn:hover, .note-btn-group .note-btn:focus { color: var(--accent); }


    /* fileupload */
    .fileupload .thumbnail { border-radius: 0.625rem; margin-bottom: 0.313rem; }
    .fileupload .thumbnail > img { width: 100%; max-width: 5.8rem !important; max-height: 5.8rem !important; object-fit: contain; object-position: 50% 50%; }
    .fileupload .btn { padding: 0.25rem 0.625rem !important; font-size: 0.75rem !important; border-radius: 0.313rem; }
    .fileupload .btn i { margin-right: 0.25rem !important; }
    

    /* pin code */
    .pin-code { padding: 0; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
    .pin-code input { text-align: center; width: 4.2rem; height: 4.2rem; font-size: 30px; line-height: 1; background: var(--light); margin-right: 0.625rem; }

    @media only screen and (max-width: 480px) {
        .pin-code input { width: 48px; height: 48px; }
    }


    /* validate */
    .has-error { color: var(--danger) !important; clear: both; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
    .has-error em, em.has-error { color: var(--danger) !important; font-weight: 500; font-size: 0.75rem !important; letter-spacing: 0.02rem; }
    .has-error > input { border-color: var(--danger) !important; color: var(--dark) !important; }
    .has-error > select { border: 1px solid var(--primary) !important; }
    .has-error > textarea { border: 1px solid var(--primary) !important; }
    input.has-error { border: 1px solid var(--danger) !important; color: var(--danger) !important; }
    textarea.has-error { border: 1px solid var(--danger) !important; color: var(--danger) !important; }
    select.has-error { border: 1px solid var(--danger) !important; color: var(--danger) !important; }
    .input-custom-area.has-error { border: 1px solid var(--danger) !important; }
    .custom-checkbox.has-error > .custom-control-label { color: var(--danger) !important; }
    .custom-checkbox.has-error > .custom-control-label::before { border-color: var(--danger) !important; }
    .has-error > .select2-container .select2-selection--single { border: 1px solid var(--danger) !important; -webkit-transition: 0.4s; transition: 0.4s; }
    .has-error .custom-control-label { border: 1px solid var(--danger); }
    .has-error .form-check-label {  color: var(--dark) !important;  }
/* ------------------------------------ end form style ------------------------------------ */


/* ------------------------------------ background ------------------------------------ */
    .bg-gradiant { background: linear-gradient(150deg, #7ba8ed 0%, var(--primary) 70%, var(--primary) 100%) !important; border: none !important; color: var(--white) !important }

    .bg-overlay {
        background-color: rgba(74,74,74,.7);
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%
    }

    .bg-overlay-gradiant {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(80deg, #7ba8ed 0%,var(--primary) 100%);
        opacity: .9
    }
    
    .bg-primary { background-color: #0076a3 !important }
    .bg-secondary { background-color: #979795 !important }
    .bg-success { background-color: #1d9b7b !important }
    .bg-info { background-color: #24bee6 !important }
    .bg-warning { background-color: #ffb60b !important }
    .bg-danger { background-color: #da3746 !important }
    .bg-muted { background-color: #838485 !important }
    .bg-purple { background-color: #766df4 !important }
    .bg-blue { background-color: #1f86ef !important }
    .bg-orange { background-color: #e46e2a !important }
    .bg-white-70 { background-color: rgba(255,255,255,.7) !important }

    .bg-accent { background: var(--primary) !important; }
    .bg-second { background: var(--second) !important; }
    .bg-dark { background: var(--dark) !important; }
    .bg-light { background: var(--light) !important; }
    .bg-light2 { background: var(--light2) !important; }
    .bg-black { background: var(--black) !important; }
    .bg-white { background: var(--white) !important; }
/* ------------------------------------ end background ------------------------------------ */


/* ------------------------------------ badge ------------------------------------ */
    .badge { position: relative; font-weight: 400; line-height: 1.2; letter-spacing: 0.04rem; border-radius: 1.875rem !important; padding: 0.5rem 1rem; border-radius: 0.625rem; background: var(--primary); vertical-align: middle; cursor: default; }
    .badge-sm { font-size: 0.75rem; padding: 0.313rem 1rem; }
    .badge-md { font-size: 0.875rem; padding: 0.75rem 1.35rem; }
    .badge-lg { font-size: 0.925rem; padding: 0.825rem 1.875rem; }

    .badge-accent { background: var(--primary); color: var(--color-white); }
    .badge-second { background: var(--second); color: var(--color-white); }
    .badge-white { background: var(--background); color: var(--color); }
    .badge-primary { background: #13208a; color: var(--color-white); }
    .badge-secondary { background: #364a63; color: var(--color-white); }
    .badge-success { background: #15d670; color: var(--color-white); }
    .badge-info { background: #0da8e0; color: var(--color-white); }
    .badge-pink { background: #FF586F; color: var(--color-white); }
    .badge-warning { background: #f4bd0e; color: var(--color-white); }
    .badge-danger { background: #e85347; color: var(--color-white); }
    .badge-dark { background: #1c2b46; color: var(--color-white); }
    .badge-gray { background: #8091a7; color: var(--color-white); }
    .badge-light { background: #b7c2d0; color: var(--color-white); }
    .badge-lighter { background: #e5e9f2; color: var(--color-white); }
    .badge-light { background: var(--light); color: var(--dark); }
    .badge-lime { background: var(--lime); color: var(--color); }
    .badge-salmon { background: #FF586F; font-weight: 300; color: var(--color-white); letter-spacing: 0.02rem; padding: 0.25rem 0.625rem; }


    .badge-style-1 { border: 0; }

    .badge-style-1.badge-accent { background: var(--primary); color: var(--color-white); }
    .badge-style-1.badge-primary { background: var(--primary); color: var(--color-white); }
    .badge-style-1.badge-secondary { background: rgba(54, 74, 99, 0.1); color: #364a63; }
    .badge-style-1.badge-success { background: rgba(21, 214, 112, 0.1); color: #15d670; }
    .badge-style-1.badge-info { background: rgba(13, 168, 224, 0.1); color: #0da8e0; }
    .badge-style-1.badge-warning { background: rgba(244, 189, 14, 1); color: var(--color-white); }
    .badge-style-1.badge-danger { background: #CE2C37; color: var(--color-white); }
    .badge-style-1.badge-dark { background: rgba(28, 43, 70, 0.1); color: #1c2b46; }
    .badge-style-1.badge-gray { background: rgba(128, 145, 167, 0.1); color: #8091a7; }
    .badge-style-1.badge-light { background: rgba(183, 194, 208, 0.1); color: #b7c2d0; }
    .badge-style-1.badge-lighter { background: rgba(229, 233, 242, 0.1); color: #e5e9f2; }


    .badge-style-2 { border: 1px solid currentColor; }

    .badge-style-2.badge-accent { background: rgba(19, 32, 138, 0.05); color: var(--primary); border-color: var(--primary); }
    .badge-style-2.badge-primary { background: rgba(19, 32, 138, 0.1); color: #13208a; border-color: #13208a; }
    .badge-style-2.badge-second { background: rgba(234, 95, 139, 0.1); color: var(--second); border-color: var(--second); }
    .badge-style-2.badge-secondary { background: rgba(54, 74, 99, 0.1); color: #364a63; border-color: #364a63; }
    .badge-style-2.badge-success { background: rgba(21, 214, 112, 0.1); color: #15d670; border-color: #15d670; }
    .badge-style-2.badge-info { background: rgba(13, 168, 224, 0.1); color: #0da8e0; border-color: #0da8e0; }
    .badge-style-2.badge-warning { background: rgba(244, 189, 14, 0.1); color: #f4bd0e; border-color: #f4bd0e; }
    .badge-style-2.badge-danger { background: rgba(232, 83, 71, 0.1); color: #e85347; border-color: #e85347; }
    .badge-style-2.badge-dark { background: rgba(28, 43, 70, 0.1); color: #1c2b46; border-color: #1c2b46; }
    .badge-style-2.badge-gray { background: rgba(128, 145, 167, 0.1); color: #8091a7; border-color: #8091a7; }
    .badge-style-2.badge-light { background: rgba(183, 194, 208, 0.1); color: #b7c2d0; border-color: #b7c2d0; }
    .badge-style-2.badge-lighter { background: rgba(229, 233, 242, 0.1); color: #e5e9f2; border-color: #e5e9f2; }

    .badge-dot { position: relative; display: inline-flex; align-items: center; background-color: transparent; border: none; padding: 0.313rem 0.7rem; padding-left: 12px; padding-right: 0; }
    .badge-dot:before { position: absolute; content: ''; left: 0; top: 50%; transform: translateY(-50%); display: inline-block; height: 6px; width: 6px; margin-top: -1px; border-radius: 50%; background: currentColor; }

    .badge-dot.badge-accent { color: var(--accent); }
    .badge-dot.badge-primary { color: #13208a; }
    .badge-dot.badge-secondary { color: #364a63; }
    .badge-dot.badge-success { color: #15d670; }
    .badge-dot.badge-info { color: #0da8e0; }
    .badge-dot.badge-warning { color: #f4bd0e; }
    .badge-dot.badge-danger { color: #e85347; }
    .badge-dot.badge-dark { color: #1c2b46; }
    .badge-dot.badge-gray { color: #8091a7; }
    .badge-dot.badge-light { color: #b7c2d0; }
    .badge-dot.badge-lighter { color: #e5e9f2; }
    .badge-dot.badge-accent { color: var(--accent); }
/* ------------------------------------ end badge ------------------------------------ */


/* ------------------------------------ rating ------------------------------------ */
    .ratings { position: relative; display: inline-block; width: auto; font-family: 'Font Awesome 6 Free'; font-weight: 900; letter-spacing: 0.06rem; white-space: nowrap; }
    .ratings::before { content: '\f005' '\f005' '\f005' '\f005' '\f005'; color: var(--light); }
    .ratings .stars { position: absolute; top: 0; left: 0; overflow: hidden; }
    .ratings .stars::before { content: '\f005' '\f005' '\f005' '\f005' '\f005'; color: var(--yellow); }
/* ------------------------------------ end rating ------------------------------------ */


/* ------------------------------------ card ------------------------------------ */
    .card-style { border: 1px solid var(--light); background: var(--background); border-radius: 1.25rem; }
    .card-style.card-border { border: 1px solid var(--border); }
    .card-style .card-body { padding: 2.5rem; }

    @media (max-width: 580px) {
        .card-style .card-body { padding: 2.5rem 0.938rem; }
    }
/* ------------------------------------ end card ------------------------------------ */


/* ------------------------------------ button ------------------------------------ */
    .btn {
        position: relative;
        overflow: hidden;
        outline: 0;
        -webkit-box-shadow: none !important; 
        box-shadow: none !important;
        padding: 1.125rem 2.5rem;
        border-radius: 3rem;
        background: var(--gradient-1);
        border: 0;
        font-weight: 500;
        font-size: 1rem; 
        line-height: 1.2; 
        letter-spacing: 0.04rem;
        color: var(--white) !important;
        cursor: pointer;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .btn:hover .btn:focus, .btn.focus { background: var(--primary); color: var(--white) !important; -webkit-box-shadow: none !important; box-shadow: none !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    
    .btn .loading-area { position: relative; }
    .btn .loading-area .text { font-weight: 500; margin-left: 0.625rem; }

    .btn-hover-arrow-right:hover { padding-left: 2rem !important; padding-right: 3rem !important; }
    .btn-hover-arrow-right:after { content: '\e829'; font-family: 'feather'; position: absolute; top: 50%; transform: translateY(-48%); bottom: 0; right: -1.25rem; display: inline-flex; align-items: center; opacity: 1; visibility: hidden; -webkit-transition: right .4s ease, opacity .4s ease, visibility .4s ease; -moz-transition: right .4s ease, opacity .4s ease, visibility .4s ease; -ms-transition: right .4s ease, opacity .4s ease, visibility .4s ease; -o-transition: right .4s ease, opacity .4s ease, visibility .4s ease; transition: right .4s ease, opacity .4s ease, visibility .4s ease; }
    .btn-hover-arrow-right:hover:after { right: 1.25rem; opacity: 1; visibility: visible; -webkit-transition: right .4s ease, opacity .4s ease, visibility .4s ease; -moz-transition: right .4s ease, opacity .4s ease, visibility .4s ease; -ms-transition: right .4s ease, opacity .4s ease, visibility .4s ease; -o-transition: right .4s ease, opacity .4s ease, visibility .4s ease; transition: right .4s ease, opacity .4s ease, visibility .4s ease; }
    
    .btn-hover-icon-left .icon { position: absolute; top: 0; bottom: 0; left: -1.25rem; display: inline-flex; align-items: center; opacity: 0; visibility: hidden; -webkit-transition: var(--transition-3); -moz-transition: var(--transition-3); -ms-transition: var(--transition-3); -o-transition: var(--transition-3); transition: var(--transition-3); }
    .btn-hover-icon-left:hover { padding-left: 3rem !important; padding-right: 2rem !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .btn-hover-icon-left:hover .icon { left: 1.25rem; opacity: 1; visibility: visible; -webkit-transition: var(--transition-3); -moz-transition: var(--transition-3); -ms-transition: var(--transition-3); -o-transition: var(--transition-3); transition: var(--transition-3); }

    .btn-whatsapp { font-size: 0.875rem; color: var(--white) !important; background: #00C064; box-shadow: 0 0.25rem 0.313rem rgba(0, 0, 0, 0.25); border: 0; padding-left: 1.875rem; padding-right: 1.875rem; }
    .btn-whatsapp i { margin-right: 0.313rem; }

    .btn-padd-sm { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    .btn-padd { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .btn-padd-md { padding-top: 0.875rem; padding-bottom: 0.875rem; }
    .btn-padd-lg { padding-top: 1rem; padding-bottom: 1rem; font-size: 1rem; }

    .btn-shadow { box-shadow: 0 1.563rem 2.063rem rgba(17, 20, 45, 0.12); }

    .btn-arrow { display: inline-flex; padding-right: 4.5rem; }
    .btn-arrow:after { content: '\e829'; font-family: 'feather'; font-weight: 600; font-size: 1.25rem; position: absolute; top: 50%; right: 2.5rem; margin-top: -11px; width: 1.25rem; -webkit-transition: right 0.4s; -moz-transition: right 0.4s; -ms-transition: right 0.4s; -o-transition: right 0.4s; transition: right 0.4s; }
    .btn-arrow:hover:after { right: 2rem; -webkit-transition: right 0.4s; -moz-transition: right 0.4s; -ms-transition: right 0.4s; -o-transition: right 0.4s; transition: right 0.4s; }

    .btn-accent { color: var(--white) !important; background: var(--primary); }
    .btn-accent:hover, .btn-accent:focus { color: var(--primary) !important; background: transparent; }
    .btn-accent.fix:hover, .btn-accent.fix:focus { color: var(--white) !important; background: var(--primary); }

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

    .btn-second { color: var(--white) !important; background: var(--second); }
    .btn-second:hover, .btn-second:focus { color: var(--second) !important; background: transparent; }
    .btn-second.fix:hover, .btn-second.fix:focus { color: var(--white) !important; background: var(--second); }

    .btn-outline-second { color: var(--second); background: transparent; border: 1px solid var(--second); }
    .btn-outline-second:hover, .btn-outline-second:focus { color: var(--white) !important; background-color: var(--second) !important; }

    .btn-light { color: var(--color) !important; background: var(--light); }
    .btn-light:hover, .btn-light:focus { color: var(--color) !important; background: transparent; }

    .btn-outline-light { color: var(--light) !important; background: transparent; border: 1px solid var(--light); }
    .btn-outline-light:hover, .btn-outline-light:focus { color: var(--dark) !important; background-color: var(--light); }

    .btn-white { color: var(--dark) !important; background: var(--white); }
    .btn-white:hover, .btn-white:focus { color: var(--dark) !important; background: var(--white); }

    .btn-outline-white { color: var(--white) !important; background: transparent; border: 1px solid var(--white); }
    .btn-outline-white:hover, .btn-outline-white:focus { color: var(--dark) !important; background-color: var(--white); }

    .btn-dark { color: var(--white) !important; background: var(--dark); border: 1px solid var(--dark); }
    .btn-dark:hover, .btn-dark:focus { color: var(--dark) !important; background: transparent; }

    .btn-outline-dark { color: var(--dark) !important; background: transparent; border: 1px solid var(--dark); }
    .btn-outline-dark:hover, .btn-outline-dark:focus { color: var(--white) !important; background-color: var(--dark); }

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

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

    .btn-trans { color: var(--color) !important; background: transparent; border-color: transparent; }

    .btn.hv-accent:hover, .btn.hv-accent:focus { color: var(--color-white) !important; background: var(--gradient-1) !important; border: 1px solid var(--primary2); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
/* ------------------------------------ end button ------------------------------------ */


/* ------------------------------------ accordion ------------------------------------ */
    .accordion-item { position: relative; border-radius: 1rem !important; border: 1px solid transparent; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .accordion-item:not(:last-child) { margin-bottom: 0.625rem; }
    .accordion-item .accordion-head { position: relative; width: 100%; background: transparent; padding: 1rem 1.25rem; border: 0; text-align: left; font-weight: 500; color: var(--color); }
    .accordion-item .accordion-head:before { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 1rem; color: var(--primary) !important; position: absolute; top: 1rem; right: 1rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .accordion-item .accordion-head.collapsed:before { content: '\f078'; transform: rotate(-90deg); color: var(--primary) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .accordion-item .accordion-body { padding: 0 1.25rem 1rem 1.25rem; }

    @media only screen and (max-width: 480px) {
        .accordion-item .accordion-head { padding: 0.625rem 2.3rem 0.625rem 1rem; }
        .accordion-item .accordion-head:before { top: 0.625rem; }
        .accordion-item .accordion-body { padding: 0 1rem 0.625rem 1rem; }
    }

    .accordion-2 .accordion-item { border-radius: 0 !important; background: none; margin-bottom: 1rem; }
    .accordion-2 .accordion-item:not(:last-child):before { content: ''; position: absolute; bottom: -0.45rem; left: 0; width: 100%; height: 1px; background: var(--border2); opacity: 0.45; }
    .accordion-2 .accordion-item .accordion-head { padding: 0.625rem 0; }
    .accordion-2 .accordion-item .accordion-head:before { top: 0.625rem; right: 0; color: var(--third) !important; }
    .accordion-2 .accordion-item .accordion-body { padding: 0; padding-bottom: 1rem; }

    .faq-accordion .accordion-item:hover { border: 1px solid var(--primary); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
/* ------------------------------------ end accordion ------------------------------------ */


/* ------------------------------------ modal ------------------------------------ */
    .modal-style:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--gradient-3); filter: blur(25px); -webkit-filter: blur(25px); opacity: 0.45; }
    .modal-style .modal-content { overflow: hidden; border: 1px solid var(--light); background: var(--background); border-radius: 1.25rem; box-shadow: var(--shadow); }
    .modal-style .cover-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
    .modal-style .inner-modal { position: relative; overflow: hidden; padding: 1.875rem; }
    .modal-style .inner-modal .close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 10; font-size: 1rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .modal-style .inner-modal .close:hover { transform: scale(1.2); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .modal-style .modal-title { font-size: 1.25rem; line-height: 1.3; color: var(--dark); }

    .modal-style .modal-body.padd-md { padding: 1.25rem; }
    .modal-style .modal-body.padd-md .close { top: 0.938rem; right: 0.938rem; }
    .modal-style .modal-body.padd-lg { padding: 1.875rem; }

    @media (max-width: 580px) {
        .modal-style .inner-modal { padding: 2rem 0.938rem; }
    }
/* ------------------------------------ end modal ------------------------------------ */


/* ------------------------------------ swiper slider ------------------------------------ */
    .swiper-container { position: relative; height: 100%; }
    .swiper-button-next, .swiper-button-prev {
        width: calc(var(--swiper-navigation-size)/ 44 * 27);
        height: var(--swiper-navigation-size);
        margin-top: calc(0.313rem - (var(--swiper-navigation-size)/ 2));
        z-index: 10;
        color: var(--dark);
    }
    .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none ;}

    .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: 1.875rem; line-height: 1; letter-spacing: 0; text-transform: none; font-variant: initial; }
    .swiper-button-prev { left: -0.625rem; right: auto; }
    .swiper-button-prev:after { content: 'prev'; }
    .swiper-button-next { right: -0.625rem; left: auto; }
    .swiper-button-next:after { content: 'next'; }

    .swiper-button-lg:after { font-size: 2.5rem; }

    /* navigation style */
    .swiper-button.swiper-button-1 { color: var(--color); opacity: 0.5; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .swiper-button.swiper-button-1:hover { opacity: 0.8; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .swiper-button.swiper-button-2 { background: var(--background); border: 1px solid var(--light2); width: 3.2rem; height: 3.2rem; border-radius: 50%; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .swiper-button.swiper-button-2:after { font-size: 1.35rem; color: var(--dark); }
    .swiper-button.swiper-button-2:hover { box-shadow: 0 1.45rem 2.5rem rgba(208, 231, 243, 0.7); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .swiper-button.swiper-button-3 { color: var(--color); opacity: 0.5; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .swiper-button.swiper-button-3:hover { opacity: 0.8; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .swiper-button.swiper-button-3.swiper-button-disabled { opacity: 0; cursor: auto; pointer-events: none ;}

    /* navigation position */
    .swiper-button.position-1.swiper-button-prev { left: 2%; }
    .swiper-button.position-1.swiper-button-next { right: 2%; }

    .swiper-button.position-2.swiper-button-prev { left: -3%; }
    .swiper-button.position-2.swiper-button-next { right: -3%; }
    
    .swiper-button-area { position: relative; display: inline-block; }
    .swiper-button-area .swiper-button { position: relative; display: inline-flex; }
    .swiper-button-area .swiper-button:not(:last-child) { margin-right: 0.625rem; }
    .swiper-button-area .swiper-button-prev { left: 0; }
    .swiper-button-area .swiper-button-next { right: 0; }

    .swiper-pagination-bullet { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .swiper-pagination-bullet.swiper-pagination-bullet-active { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .swiper-pagination.swiper-pagination-bottom { bottom: -1.825rem; }
    .swiper-pagination-bullet-active { background: var(--primary) !important; }

    .swiper-pagination.pagination-bullet-2 .swiper-pagination-bullet { width: 0.6rem; height: 0.6rem; background: var(--dark); border: 1px solid transparent; opacity: 0.3; }
    .swiper-pagination.pagination-bullet-2 .swiper-pagination-bullet:not(:last-child) { margin-right: 0.313rem; }
    .swiper-pagination.pagination-bullet-2 .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 1.825rem; height: 0.6rem; border-radius: 0.25rem; opacity: 1; background: var(--primary) !important; }

    .swiper-pagination-line .swiper-pagination-bullet { width: 1.825rem; border-radius: 3.125rem; background: var(--dark); opacity: 1; }
    .swiper-pagination-line .swiper-pagination-bullet:not(:last-child) { margin-right: 0.313rem; }
    .swiper-pagination-line .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 3.125rem; background: var(--white) !important; opacity: 1; }
/* ------------------------------------ end swiper slider ------------------------------------ */


/* ------------------------------------ components ------------------------------------ */
    /* section-heading */
    .heading-area { position: relative; z-index: 4; width: 100%; margin-bottom: 2.5rem; }
    .heading-area .subheading { font-weight: 700; color: var(--second); letter-spacing: 0.02rem; margin-bottom: 0.625rem; }
    .heading-area .heading { font-weight: 700; line-height: 1.3; color: var(--color); margin-bottom: 1.25rem; }
    .heading-area .description { font-weight: 300; letter-spacing: 0.02rem; color: var(--color); }

    @media (max-width: 1200px) {
        .heading-area { margin-bottom: 1.375rem; }
    }
    @media (max-width: 992px) {
        .heading-area { margin-bottom: 1.25rem; }
    }

    .heading-area.style-2 { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
    .heading-area.style-2.row-2 div { width: 50%; }
    .heading-area.style-2.row-3 div { width: 33.33%; }
    
    @media (max-width: 1200px) {
        .heading-area.style-2.row-3 { flex-wrap: wrap; }
        .heading-area.style-2.row-3 div { width: 45%; }
    }
    @media (max-width: 992px) {
        .heading-area.style-2.row-3 { gap: 0.625rem; }
        .heading-area.style-2.row-3 div { width: 100%; }
    }

    .heading-area.style-3 .heading { position: relative; padding-left: 1.25rem; }
    .heading-area.style-3 .heading:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 0.4rem; height: 70%; margin: auto; border-radius: 0.313rem; background: var(--dark); }


    .bg-circle-overlay { content: ''; position: absolute; width: 35rem; height: 35rem; border-radius: 50%; opacity: 0.5; background: #BCA9FF; filter: blur(150px); -webkit-filter: blur(150px); z-index: 1; }
    .bg-circle-overlay.pink { background: #EFD3FF; }

    .ptr-cover { 
        position: absolute; 
        top: -15%; 
        left: 0; 
        right: 0; 
        margin: auto; 
        width: 100%; 
        max-width: 1100px; 
        aspect-ratio: 1/1; 
        background-image: url('../img/bg/ptr-1.svg');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0.2; 
        z-index: 0; 
    }
    
    .container { position: relative; z-index: 2; }

    .divider { border-bottom: 1px solid var(--border); }
    
    .load-more-area { text-align: center; margin-top: 1.875rem; }

    .tiktok-embed > iframe { border-radius: 1.125rem !important; }

    /* more paragraph */
    .more-content span { display: none; }
    .more-link { display: inline-block; font-weight: 500; color: var(--second); }
    .more-link:hover, .more-link:focus { color: var(--second); }

    /* no result */
    .no-more-result { position: relative; padding: 2.5rem; border-radius: 0.938rem; border: 1px solid var(--border); text-align: center; max-width: 768px; margin: auto; display: flex; align-items: center; flex-direction: column; background: var(--background); }
    .no-more-result img, .no-more-result svg { object-fit: contain; max-width: 11rem; max-height: 11rem; margin-bottom: 1.25rem; }
    .no-more-result h2 { color: var(--color) !important; margin-bottom: 0.625rem !important; }
    .no-more-result p { letter-spacing: 0.04rem !important; color: var(--color2) !important; margin-bottom: 0 !important; }
    
    @media (max-width: 1400px) {
        .no-more-result img, .no-more-result svg { max-width: 9rem; max-height: 9rem; }
    }
    @media (max-width: 1200px) {
        .no-more-result img, .no-more-result svg { max-width: 8rem; max-height: 8rem; }
    }
    @media (max-width: 580px) {
        .no-more-result { padding: 2.5rem 0.938rem; }
    }

    /* back to top */
    .back-to-top {
        position: fixed;
        bottom: -10%;
        right: 1.125rem;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.85rem;
        border: 0;
        z-index: 5;
        text-align: center;
        cursor: pointer;
        background: #EFD3FF;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .back-to-top:before { content: '\e82d'; font-family: 'Feather'; font-size: 1rem; color: var(--color2); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .back-to-top.active { bottom: 3.5rem; visibility: visible; opacity: 0.85; }
    .back-to-top:hover, .back-to-top:focus { opacity: 1; box-shadow: 0 1rem 2.5rem rgba(31, 40, 41, 0.09); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .back-to-top:hover:before, .back-to-top:focus:before { color: var(--primary); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    @media only screen and (max-width: 480px) {
        .back-to-top { width: 2.5rem; height: 2.5rem; }
        .back-to-top:before { font-size: 1.2rem; }
        .back-to-top.active { bottom: 2rem; opacity: 0.4; }
    }

    /* dropdown */
    .dropdown-menu { background: var(--background); margin-top: 0; border: 1px solid var(--light); padding: 0.625rem 0.75rem; border-radius: 0.938rem; box-shadow: var(--shadow-sm); }
    .dropdown-item { position: relative; color: var(--color3); letter-spacing: 0.04rem; padding: 0.55rem 1rem; border-radius: 0.5rem; display: inline-flex; align-items: center; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dropdown-item:hover { color: var(--color); background: var(--light); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dropdown-item:not(:last-child) { margin-bottom: 0.313rem; }
    .dropdown-item .icon { width: 1.25rem; margin-right: 0.625rem; font-size: 1rem; }
    .dropdown-item .icon svg { max-width: 1.125rem; max-height: 1.125rem; }
    .dropdown-item .icon svg path { stroke: var(--color3); }
    .dropdown-item .icon.logout svg path { stroke: var(--second); }

    .dropdown-foot, .dropdown-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
    .dropdown-title { font-weight: 500; }
    .toggle-noarrow:after { display: none; }

    .post-list-job { overflow: visible !important; }
    .post-list-job .body-area { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .post-list-job .body-area .action { flex-shrink: 0; }
    .post-list-job .body-area .action .dropdown-toggle { width: 1.875rem; height: 1.875rem; display: flex; align-items: center; justify-content: center; }
    .post-list-job .body-area .action .dropdown-toggle:hover i, .post-list-job .body-area .action .dropdown-toggle:focus i { position: relative; color: var(--color) !important; }


    .back-area { text-align: left; margin-bottom: 1.875rem; }
    .back { position: relative; outline: 0; border: 0; background: none; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: none; font-weight: 500; letter-spacing: 0.04rem; border-radius: 0.625rem; padding-left: 1.35rem; }
    .back:before { content: '\e828'; font-family: 'Feather'; position: absolute; top: 48%; left: 0; transform: translateY(-50%); line-height: 1; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .back:hover:before { left: -0.313rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .navbar .message-area { max-height: 20rem; overflow-y: scroll; }
    .navbar .message-area .message-item { padding: 0.313rem 0.938rem; }

    .message-area .message-item { width: 100%; padding: 0.313rem 0; }
    .message-area .message-item .title { font-weight: 500; color: var(--color); margin-bottom: 0; }
    .message-area .message-item .date { font-weight: 400; line-height: 1; color: var(--color3); margin-bottom: 0; }

    /* alert */
    .alert { display: inline-block; position: relative; padding: 0.625rem 1rem; border-radius: 0.938rem; background: var(--background); }
    .alert .btn-close { position: absolute; top: 0.625rem; right: 0.625rem; padding: 0; font-size: 0.875rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .alert .btn-close:hover { transform: rotate(20deg); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .alert .btn-close:focus { outline: 0; box-shadow: none; }
    .alert .alert-inner { display: flex; align-items: center; }
    .alert .alert-inner .alert-icon { position: relative; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--light); font-size: 1.4rem; margin-right: 0.625rem; }
    .alert .alert-inner .alert-icon i { position: relative; z-index: 2; }
    .alert .alert-inner .alert-icon svg { width: 1.5rem; height: 1.5rem; }
    .alert .alert-inner .alert-text { line-height: 1.2; padding-right: 1.25rem; }

    /* nav tabs */
    .nav-tabs-style { position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 0.625rem; background: var(--light); margin-bottom: 1.875rem; }
    .nav-tabs-style .nav-item { background: none; border: 0; padding: 0; margin: 0; }
    .nav-tabs-style .nav-item .nav-link {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 100%;
        min-width: 12rem;
        border: 0;
        border-radius: 0.625rem;
        background: var(--light);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.875rem;
        font-weight: 500;
        color: var(--color2);
        text-align: center;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .nav-tabs-style .nav-item .nav-link:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); visibility: hidden; opacity: 0; z-index: -1; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .nav-tabs-style .nav-item .nav-link.active { background: var(--primary); color: var(--white); }

    @media screen and (max-width: 992px) {
        .nav-tabs-style .nav-item .nav-link { min-width: 10rem; }
    }
    @media screen and (max-width: 480px) {
        .nav-tabs-style .nav-item .nav-link { min-width: 6.5rem; } 
    }

    /* social media */
    .social-media { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
    .social-media .social-media-item {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.625rem;
        background: transparent;
        font-size: 1.125rem;
        color: var(--color);
        text-align: center;
        cursor: pointer;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .social-media .social-media-item i { position: relative; z-index: 2; }
    .social-media .social-media-item:hover { color: var(--color-white); }
    .social-media .social-media-item:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 40%; background: var(--primary); z-index: 0; transform: scale(0.8); opacity: 0; visibility: hidden; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .social-media .social-media-item:hover:before { border-radius: 0.625rem; opacity: 1; visibility: visible; transform: scale(1); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .social-media.social-media-2 .social-media-item { border-radius: 50%; border: 1px solid var(--color); }
    .social-media.social-media-2 .social-media-item:before { background: var(--third); }
    .social-media.social-media-2 .social-media-item:hover:before { border-radius: 50%; }

    .social-talent { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 0.313rem; margin-top: 0.35rem; }
    .social-talent .social-item { border-radius: 0.5rem; padding: 0.35rem; min-width: auto; background: var(--light); border: 1px solid var(--border); display: flex; align-items: center; gap: 0.25rem; }
    .social-talent .social-item svg { width: 1.25rem; height: 1.25rem; transform: translateY(-1px); }
    .social-talent .social-item img { object-fit: contain; max-width: 0.938rem; max-height: 0.938rem; aspect-ratio: 1/1; transform: translateY(-1.5px); }
    .social-talent .social-item span { line-height: 1; font-weight: 500; letter-spacing: 0.02rem; color: var(--color); margin-bottom: 0; }
    .social-talent .social-item.facebook { background: linear-gradient(180deg, #1877F2 0%, #1877F2 100%); }
    .social-talent .social-item.facebook span { color: var(--color-white); }
    .social-talent .social-item.instagram { background: linear-gradient(84deg, #FECD1E -7.39%, #FE277D 48.1%, #A105CE 122.54%); color: var(--color-white); }
    .social-talent .social-item.instagram span { color: var(--color-white); }

    /* list information */
    .list-check { list-style: none; }
    .list-check .list-item { position: relative; padding-left: 2.1rem; }
    .list-check .list-item:before { content: '\ea5b'; font-family: 'LineIcons'; position: absolute; top: 0; left: 0; width: 1.45rem; height: 1.45rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); font-size: 0.85rem; color: var(--color-white); }
    .list-check .list-item:not(:last-child) { margin-bottom: 1rem; }

    .list-info { display: flex; align-items: flex-start; flex-direction: column; gap: 0.625rem; }
    .list-info .list-item { position: relative; width: 100%; }
    .list-info .list-item .label { display: block; color: var(--color3); }
    .list-info .list-item .value { display: block; font-weight: 500; color: var(--color); }
    
    .list-info.list-info-2 .list-item:before { content: ''; position: absolute; bottom: calc(-0.625rem / 2); left: 0; width: 100%; height: 1px; background: var(--gradient-4); opacity: 0; visibility: hidden; }
    /* .list-info.list-info-2 .list-item:not(:last-child) { padding-bottom: 0.45rem; margin-bottom: 0.25rem; } */
    .list-info.list-info-2 .list-item:not(:last-child):before { opacity: 1; visibility: visible; }

    /* meta info */
    .meta-info { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 0.625rem; }
    .meta-info .meta-item { position: relative; display: flex; align-items: flex-start; gap: 0.45rem; }
    .meta-info .icon { flex-shrink: 0; line-height: 1.2; }
    .meta-info .icon svg { width: 1rem; max-height: 1rem; stroke: var(--second); }
    .meta-info .icon i { width: 1rem; text-align: center; }
    .meta-info .text { line-height: 1.2; color: var(--color2); }
    
    .meta-info.line-separator span:not(:first-child):before { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: var(--color3); opacity: 0.4; }
    .meta-info.line-separator span:not(:first-child) { padding-left: 0.85rem; }

    .meta-info.dot-separator span:before { content: ''; display: inline-block; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--color3); margin-right: 0.85rem; vertical-align: middle; margin-top: -2px; display: none; opacity: 0.4; }
    .meta-info.dot-separator span:not(:first-child):before { display: inline-block; }


    /* post */
    .post { position: relative; overflow: hidden; border: 1px solid var(--light2); border-radius: 0.938rem; }
    
    .post .head-area { position: relative; overflow: hidden; border-radius: 0.938rem; margin-bottom: 0.75rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .post .body-area { position: relative; }
    .post .foot-area { border-top: 1px solid var(--border); }

    .post .head-img { object-fit: cover; object-position: center; width: 100%; aspect-ratio: 16/11; border-radius: 0.938rem; }
    
    .post .title { font-weight: 500; line-height: 1.3; color: var(--color); margin-bottom: 0.15rem; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; }
    .post a:hover, .post a:focus { color: var(--second); }
    .post .description { margin-bottom: 0; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical; }
    .post .ratings { letter-spacing: 0.313rem; }
    .post .pricing span { font-weight: 600; }

    .post.post-2 { background: var(--light); }
    .post.post-2 .head-area { margin-bottom: 0; }
    .post.post-2 .head-img { border-radius: 0.938rem 0.938rem 0 0; }
    .post.post-2 .body-area { padding: 0.75rem; }
    .post.post-2 .foot-area { padding: 0.75rem; }

    @media (max-width: 480px) {
        .post.post-2 .btn { padding: 0.45rem; }
    }

    .post.post-hr-1 { display: flex; align-items: stretch; gap: 0.625rem; border: 0; border-radius: 0.5rem; }
    .post.post-hr-1 .head-area { flex-shrink: 0; width: 30%; margin-bottom: 0; }
    .post.post-hr-1 .head-area .head-img { border-radius: 0.5rem; }
    .post.post-hr-1 .title { -webkit-line-clamp: 3 !important; }

    .post.post-hr-2 { display: flex; align-items: flex-start; gap: 1rem; border: 0; border-radius: 0.5rem; }
    .post.post-hr-2 .head-area { flex-shrink: 0; width: 135px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); margin-bottom: 0; }
    .post.post-hr-2 .head-area .head-img { object-fit: contain; }
    .post.post-hr-2 .title { -webkit-line-clamp: 2 !important; }

    .post.post-hr-2.post-hr-2-sm .head-area { width: 70px; }
    .post.post-hr-2.post-hr-2-sm .title { line-height: 1.2; }

    .post.post-hr-2.post-hr-2-xs .head-area { width: 3.2rem; height: 3.2rem; }
    .post.post-hr-2.post-hr-2-xs .head-img { object-fit: cover; width: 100%; height: 100%; }
    .post.post-hr-2.post-hr-2-xs .title { line-height: 1.2; }

    @media (max-width: 580px) {
        .post.post-hr-2 .head-area { width: 85px; }
    }



    /* post hover */
    .post-hv-1:hover { background: #E2EAFD; box-shadow: var(--shadow-xxs); }

    .post-hv-2 .head-area:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--gradient-3); opacity: 0; visibility: hidden; z-index: 1; }
    .post-hv-2:hover .head-area:before { opacity: 0.25; visibility: visible; }

    .post.post-campaign { background: var(--background); }
    .post.post-campaign .head-img { aspect-ratio: 10/14; }


    /* sidebar menu */
    .sidebar-menu { position: relative; width: 100%; }
    .sidebar-menu .sidebar-item:not(:last-child) { margin-bottom: 2.5rem; }
    .sidebar-menu .sidebar-item .sidebar-head { position: relative; margin-bottom: 0.938rem; }
    .sidebar-menu .sidebar-item .sidebar-head h4 { font-weight: 600; margin-bottom: 0; }
    
    .ads-area { position: relative; }
    .ads-area .ads-img { position: relative; overflow: hidden; border-radius: 0.938rem; width: 100%; height: auto; object-fit: contain; }

    /* play button video */
    .play-button span { z-index: 5; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: linear-gradient(180deg, var(--primary) 0%, #A654AC 50.5%, var(--second) 99%); opacity: 0.85; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .play-button span:before { content: '\f04b'; font-family: 'Font Awesome 5 Free'; font-weight: bold; font-size: 1.75rem; color: var(--color-white); margin-right: -0.25rem; }
    .play-button span:hover { opacity: 1; transform: scale(0.95); box-shadow: var(--shadow); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    /* meta people */
    .meta-people-info { display: flex; align-items: center; justify-content: flex-start; gap: 1rem; }
    .meta-people-info .image { width: 4rem; height: 4rem; border-radius: 50%; overflow: hidden; }
    .meta-people-info .image img { object-fit: cover; object-position: center; width: 100%; height: 100%; }
    .meta-people-info .info { width: calc(100% - 5rem); }
    .meta-people-info .info .username { color: var(--color3); margin-bottom: 0; }
    .meta-people-info .info .name { color: var(--color); margin-bottom: 0; }

    /* repeater */
    .repeater { position: relative; }
    .repeater .repeater-item { padding: 1.25rem; border-radius: 0.938rem; border: 1px solid var(--border); margin-bottom: 1rem; box-shadow: var(--shadow-xxs); }
    .repeater .repeater-item:first-child .repeater-remove-area { visibility: hidden; opacity: 0; }
    .repeater .repeater-remove-area { float: right; }
    .repeater .repeater-remove { width: 3rem; height: 3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--light2); font-size: 1.125rem; color: var(--danger); }
    .repeater .repeater-remove:before { background: var(--danger) !important; border-radius: 50%; }
    .repeater .repeater-remove:hover { color: var(--color-white) !important; }

    @media (max-width: 768px) {
        .repeater .repeater-remove-area { float: none; display: flex; justify-content: flex-end; margin-bottom: 0.625rem; }
    }
    @media (max-width: 580px) {
        .repeater .repeater-item { padding: 0.625rem; }
    }

    /* reset content style */
    .reset-style, .reset-style * { 
        font-family: var(--font1) !important; 
        text-align: left !important;
        line-height: 1.8 !important;
        letter-spacing: 0.02rem !important;
        color: var(--color2) !important;
    }
    .reset-style h1, .reset-style h2, .reset-style h3, .reset-style h4, .reset-style h5, .reset-style h6 { font-weight: 500; color: var(--color) !important; }
    .reset-style p { font-weight: 300; font-size: 1rem !important; line-height: 1.8; letter-spacing: 0.02rem; color: var(--color2) !important; margin-bottom: 0.313rem; }
    .reset-style b { font-weight: 500; }
    .reset-style ul { list-style-position: outside; padding-left: 1rem; margin-bottom: 0.625rem; }
    .reset-style ul li { list-style: disc; }
    .reset-style ul li:not(:last-child) { margin-bottom: 0.45rem; }
    .reset-style ol { list-style-position: outside; padding-left: 1rem; margin-bottom: 0.625rem; }
    .reset-style ol li:not(:last-child) { margin-bottom: 0.45rem; }
/* ------------------------------------ end components ------------------------------------ */


/* ------------------------------------ sidebar ------------------------------------ */
    .side-menu { position: relative; overflow: hidden; width: 100%; border: 1px solid var(--light); border-radius: 0.938rem; box-shadow: var(--shadow-xxs); }
    .side-menu:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
    .side-menu .side-menu-head { position: relative; padding: 1rem 0.85rem; }
    .side-menu .side-menu-body { border-radius: 0.5rem; padding: 0 0.85rem 1rem 0.85rem; }

    .side-menu .nav { flex-direction: column; }
    .side-menu .nav .nav-item { display: block; }
    .side-menu .nav .nav-item .nav-link { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; font-weight: 500; letter-spacing: 0.02rem; color: var(--color3); padding: 0.75rem 0.25rem; border-radius: 0.625rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .side-menu .nav .nav-item .nav-link .icon { width: 1.125rem; height: 1.125rem; text-align: center; margin-right: 0.5rem; }
    .side-menu .nav .nav-item .nav-link .icon svg { max-width: 1.125rem; max-height: 1.125rem; vertical-align: top; }
    .side-menu .nav .nav-item .nav-link .icon svg path { stroke: var(--color3); }
    .side-menu .nav .nav-item .nav-link .icon.logout svg path { stroke: var(--second); }
    .side-menu .nav .nav-item .nav-link:hover { background: var(--light); }
    .side-menu .nav .nav-item .nav-link:hover { color: var(--dark); }
    .side-menu .nav .nav-item .nav-link:hover .icon svg path { stroke: var(--dark); }
    .side-menu .nav .nav-item .nav-link.active { background: var(--gradient-1); color: var(--color-white); }
    .side-menu .nav .nav-item .nav-link.active .icon svg path { stroke: var(--color-white); }

    .sidebar-filter .sidebar-item { position: relative; }
    .sidebar-filter .sidebar-item:not(:last-child) { margin-bottom: 1.5rem; }
    .sidebar-filter .sidebar-item:not(:last-child):before { content: ''; position: absolute; bottom: -1rem; left: 0; width: 100%; height: 1px; background: var(--border); }
    
    .sidebar-toggler { 
        display: none; 
        float: right;
        border-radius: 0.938rem;
        letter-spacing: 0.06rem;
        background: var(--border);
        color: var(--primary) !important;
    }

    .sidebar-filter .accordion-2 .accordion-item .accordion-head { padding: 0; margin-bottom: 0.313rem; }
    .sidebar-filter .accordion-2 .accordion-item .accordion-head:before { top: 0; color: var(--color3) !important; }
    .sidebar-filter .accordion-2 .accordion-item .accordion-body { scrollbar-width: thin !important; padding: 0; max-height: 12.188rem; }

    @media (max-width: 992px) {
        .sidebar-toggler { display: block; }

        .sidebar-filter { background: var(--background); position: fixed; top: 0; left: -100%; width: 0; height: 100%; max-width: 960px; padding: 5.5rem 0.938rem 0 0.938rem; z-index: 999; border-radius: 0 0.938rem 0.938rem 0; box-shadow: var(--shadow-sm); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
        .sidebar-filter-open .sidebar-filter { left: 0; width: 75%; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

        .side-menu.side-menu-md-horizontal { margin-bottom: 1.875rem; }
        .side-menu.side-menu-md-horizontal .side-menu-body { padding: 0; }
        .side-menu.side-menu-md-horizontal .nav {
            -ms-flex-direction: row;
            flex-direction: row;
            -ms-flex-wrap: inherit;
            flex-wrap: inherit;
            white-space: nowrap;
            overflow-y: hidden;
            overflow-x: auto;
            width: 100%;
        }
        .side-menu.side-menu-md-horizontal .nav .nav-item .nav-link { padding: 0.75rem 1rem; }
    }
/* ------------------------------------ end sidebar ------------------------------------ */


/* ------------------------------------ content ------------------------------------ */
    /* authentication */
    .auth-section .auth-area { max-width: 550px; margin: auto; }
    .auth-section .auth-divider { position: relative; margin: 1.875rem 0; text-align: center; }
    .auth-section .auth-divider:before { content: ''; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-45%); margin: auto; width: 80%; height: 1px; background: var(--border2); }
    .auth-section .auth-divider span { position: relative; background: var(--white); padding: 0 0.625rem; }


    .intro-section { min-height: 85vh; display: flex; align-items: center; justify-content: center; }
    .intro-section .bg-ov:after, .intro-section .bg-ov:before {
        content: '';
        position: absolute; 
        width: 38rem;
        height: 31rem;
        transform: rotate(10.358deg);
        border-radius: 38.6875rem;
        opacity: 0.5;
        filter: blur(232.5px);
        -webkit-filter: blur(232.5px);
        z-index: 2;
    }
    .intro-section .bg-ov:after { bottom: -10%; left: -10%; background: linear-gradient(180deg, var(--primary) 0%, #00D4DD 100%); }
    .intro-section .bg-ov:before { top: -10%; right: -10%; background: #F19162; }
    
    .intro-section .thumb-area { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 66%; margin: auto; display: flex; align-items: center; justify-content: space-between; }
    .intro-section .thumb { transform: translateY(-15%); max-height: 470px; }
    .intro-section .thumb.thumb-2 { margin-left: -15%; }
    .intro-section .thumb.thumb-3 { margin-right: -15%; }

    .intro-section .content-area { position: relative; z-index: 3; width: 66%; margin: auto; margin-top: 3.5rem; text-align: center; }
    .intro-section .heading-area { max-width: 750px; margin: auto; margin-bottom: 2rem; }
    .intro-section .heading { font-weight: 900; font-size: 3rem; line-height: 1.3; margin-bottom: 1.875rem; }
    .intro-section .intro-cta span { margin: 0 0.625rem; line-height: 1; }
    .intro-section .action-area { display: flex; align-items: center; flex-direction: column; max-width: 400px; margin: auto; margin-top: 3rem; }
    .intro-section .action-area .action-item { 
        width: 100%; 
        padding: 0.625rem;
        display: flex; 
        align-items: center; 
        justify-content: flex-start;
        gap: 1rem;
        border-radius: 6.25rem;
        border: 1px solid var(--border);
        background: linear-gradient(129deg, rgba(255, 255, 255, 0.30) 16.4%, rgba(206, 223, 255, 0.30) 54.24%, rgba(255, 255, 255, 0.30) 87.63%);
        backdrop-filter: blur(25px);    
        -webkit-backdrop-filter: blur(25px);
        box-shadow: var(--shadow);
    }
    .intro-section .action-area .action-item:not(:last-child) { margin-bottom: 0.5rem; }
    .intro-section .action-area .action-item:before { content: '\e829'; font-family: 'feather'; position: absolute; top: 50%; transform: translateY(-40%); bottom: 0; right: 1rem; font-size: 1.45rem; }
    .intro-section .action-area .action-item span { text-align: left; line-height: 1.3; padding-right: 2.5rem; }
    .intro-section .action-area .action-item .action-img { width: 4.2rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--background); }
    .intro-section .action-area .action-item .action-img img { object-fit: contain; max-width: 2rem; }
    
    @media (max-width: 1200px) {
        .intro-section .bg-ov:after, .intro-section .bg-ov:before { width: 30rem; height: 23rem; }

        .intro-section .thumb { max-height: 430px; }
        .intro-section .heading { font-size: 2.6rem; margin-bottom: 1.5rem; }
    }
    @media (max-width: 992px) {
        .intro-section .bg-ov:after, .intro-section .bg-ov:before { width: 25rem; height: 18rem; }

        .intro-section .thumb-area { width: 100%; }
        .intro-section .thumb { transform: translateY(0); max-height: 380px; opacity: 0.7; }
        .intro-section .thumb.thumb-2 { transform: translateY(-10%); margin-left: -3%; }
        .intro-section .thumb.thumb-3 { transform: translateY(10%); margin-right: -3%; }
        
        .intro-section .content-area { width: 100%; }

        .intro-section .action-area .action-item { padding: 0.5rem; gap: 0.625rem; }
        .intro-section .action-area .action-item .action-img { width: 3.8rem; }
        .intro-section .action-area .action-item .action-img img { max-width: 1.8rem; }
    }
    @media (max-width: 768px) {
        .intro-section { min-height: auto; }

        .intro-section .thumb { opacity: 0.5; }
        .intro-section .thumb.thumb-2 { transform: translateY(45%); margin-left: -15%; }
        .intro-section .thumb.thumb-3 { transform: translateY(60%); margin-right: -15%; }

        .intro-section .heading { font-size: 2.3rem; }
    }
    @media (max-width: 580px) {
        .intro-section .heading { font-size: 2.1rem; }

        .intro-section .action-area .action-item .action-img { width: 3.5rem; }
        .intro-section .action-area .action-item .action-img img { max-width: 1.5rem; }
    }
    @media (max-width: 420px) {
        .intro-section .intro-cta .btn { display: block; max-width: 80%; margin: auto; margin-bottom: 0.625rem; }
        .intro-section .intro-cta span { display: none; }
    }


    .el1-section { min-height: 85vh; background: var(--light2); display: flex; align-items: center; justify-content: center; }
    .el1-section .pattern { position: absolute; bottom: 0; right: -150px; }
    .el1-section .inner { display: flex; align-items: center; justify-content: space-between; gap: 1.875rem; }
    .el1-section .inner .content-area { width: 50%; }
    .el1-section .inner .content-area .section-heading .heading { font-size: 3.5rem; line-height: 1.2; }
    .el1-section .inner .content-area .section-heading .subheading { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.5rem 1.25rem; background: #F9EFFF; border-radius: 1rem; margin-bottom: 1.25rem; }
    .el1-section .inner .content-area .section-heading .subheading .icon-img { max-width: 1.28rem; }
    .el1-section .inner .content-area .act { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.5rem; }
    .el1-section .inner .thumb-area { width: 50%; text-align: center; }
    .el1-section .inner .thumb-area .thumb-img { object-fit: contain; margin: auto; }

    @media screen and (max-width: 1400px) {
        .el1-section .pattern { max-width: 850px; }
    }
    @media screen and (max-width: 1200px) {
        .el1-section .pattern { max-width: 750px; }
        .el1-section .inner .content-area .section-heading .heading { font-size: 3rem; }
    }
    @media screen and (max-width: 992px) {
        .el1-section .pattern { bottom: auto; top: -100px; right: -150px; }
        .el1-section .inner { flex-direction: column; }
        .el1-section .inner .content-area { order: 1; width: 100%; }
        .el1-section .inner .content-area .section-heading .heading { font-size: 2.7rem; }
        .el1-section .inner .thumb-area { order: 0; width: 100%; }
    }
    @media screen and (max-width: 580px) {
        .el1-section .pattern { max-width: 650px; }
        .el1-section .inner .content-area { text-align: center; }
        .el1-section .inner .content-area .section-heading .heading { font-size: 2.4rem; }
        .el1-section .inner .content-area .section-heading .subheading { text-align: left; }
        .el1-section .inner .content-area .act { justify-content: center; flex-direction: column; gap: 1rem; }
        .el1-section .inner .content-area .act a { width: 80%; }
        .el1-section .inner .thumb-area .thumb-img { max-width: 80%; }
    }


    .offer-section .heading-area { max-width: 95%; margin-bottom: 0; }

    @media screen and (max-width: 992px) {
        .offer-section .heading-area { max-width: 520px; }
    }


    .job-single .thumb-area { margin-bottom: 1.875rem; }
    .job-single .body-area .heading-area { margin-bottom: 1.875rem; }
    .job-single .company-area { display: flex; align-items: center; justify-content: flex-start; gap: 1.25rem; margin-bottom: 1.25rem; }
    .job-single .company-area .logo { flex-shrink: 0; overflow: hidden; width: 3.5rem; border-radius: 0.625rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
    .job-single .company-area .logo .logo-img { object-fit: contain; }
    .job-single .company-area .name { font-weight: 600; margin-bottom: 0; }
    .job-single .job-info { border-radius: 0.625rem;  }
    .job-single .job-info .list-item { width: 100%; padding: 0.625rem 0; display: flex; align-items: flex-start; justify-content: flex-start; gap: 0.45rem; }
    .job-single .job-info .list-item .icon { flex-shrink: 0; font-size: 1.125rem; color: var(--second); transform: translateY(2px); }
    .job-single .job-info .list-item .text { font-weight: 500; letter-spacing: 0.02rem; }

    @media (max-width: 580px) {
        .job-single .company-area { gap: 0.875rem; }
        .job-single .company-area .logo { width: 2.875rem; }
        .job-single .company-area .name { font-size: 1rem; }
    }
    

    /* category style */
    .category-item { height: auto; padding: 1rem 1.25rem; background: var(--gradient-4); border-radius: 0.938rem; display: flex; align-items: center; justify-content: flex-start; gap: 1rem; }
    .category-item .icon { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--lime); display: flex; align-items: center; justify-content: center; }
    .category-item .icon svg { width: 1.25rem; height: 1.25rem; }
    .category-item .icon img { max-width: 1.25rem; max-height: 1.25rem; object-fit: contain; }
    .category-item .text { font-weight: 600; line-height: 1.3; }

    @media (max-width: 1200px) {
        .category-item { padding: 1.125rem 0.938rem; gap: 0.625rem; }
        .category-item .icon { width: 3rem; height: 3rem; }
    }
    @media (max-width: 992px) {
        .category-item { flex-direction: column; }
        .category-item .text { text-align: center; }
    }
    @media (max-width: 768px) {
        .category-item { padding: 0.75rem 1.125rem; }
        .category-item .icon { width: 3rem; height: 3rem; }
        .category-item .icon svg { width: 1.5rem; height: 1.5rem; }
        .category-item .icon img { max-width: 1.5rem; max-height: 1.5rem; }
    }


    /* client */
    .client-area { position: relative; display: flex; justify-content: center; flex-wrap: wrap; }
    .client-area .client-item { position: relative; overflow: hidden; padding: 1rem; border-radius: 1.25rem; background: var(--background); border: 1px solid transparent; display: flex; align-items: center; justify-content: center; text-align: center; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .client-area .client-item .client-img { position: relative; object-fit: contain; max-width: 100%; max-height: 2.8rem; filter: invert(1) grayscale(1) contrast(100%) brightness(30%); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    
    .client-area .client-item:hover { background: var(--gradient-4); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-color: var(--light); box-shadow: var(--shadow); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .client-area .client-item:hover .client-img { filter: invert(0) grayscale(0) contrast(1) brightness(1); }

    @media (max-width: 992px) {
        .client-area:not(.marquee-area) .client-item { width: calc(100% / 4); }
    }
    @media (max-width: 580px) {
        .client-section { padding: 4.5rem 0 1.25rem 0; }
        .client-area:not(.marquee-area) .client-item { width: calc(100% / 3); }
    }

    .client-area.client-2 .client-item { background: none; }
    .client-area.client-2 .client-item .client-img { filter: invert(0) grayscale(0) contrast(1) brightness(1); }

    :root {
        --size: clamp(10rem, 1rem + 40vmin, 18rem);
        --gap: calc(var(--size) / 35);
    }
    @media (max-width: 1400px) {
        :root { --size: clamp(10rem, 1rem + 40vmin, 16rem); }
    }
    @media (max-width: 1200px) {
        :root { --size: clamp(10rem, 1rem + 40vmin, 14rem); }
    }
    @media (max-width: 992px) {
        :root { --size: clamp(10rem, 1rem + 40vmin, 12rem); }
    }
    @media only screen and (max-width: 768px) {
        :root { --size: clamp(10rem, 1rem + 40vmin, 9rem); }
    }
    @media only screen and (max-width: 580px) {
        :root { --size: clamp(10rem, 1rem + 40vmin, 6rem); }
    }

    .marquee-group { display: flex; align-items: center; user-select: none; gap: 0; }
    .marquee-group .marquee-area {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: var(--gap);
        min-width: 100%;
        animation: scroll-x linear infinite;
        animation-duration: 60s;
        animation-play-state: running;
    }
    .marquee-group .marquee-item { width: var(--size); }

    /* reverse */
    .marquee-group.marquee-reverse .marquee-area { animation-direction: reverse; animation-delay: -3s; }

    /* vertical */
    .marquee-group.marquee-vertical { --mask-direction: to bottom; }
    .marquee-group.marquee-vertical .marquee-area { flex-direction: column; }
    .marquee-group.marquee-vertical .marquee-area { animation-name: scroll-y; }
    .marquee-group.marquee-vertical .marquee-item { aspect-ratio: 1; width: calc(var(--size) / 1.5); padding: calc(var(--size) / 6); }

    @media (prefers-reduced-motion: reduce) {
        .marquee-group .marquee-area { animation-play-state: paused; }
    }
    @keyframes scroll-x {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-100% - var(--gap))); }
    }
    @keyframes scroll-y {
        from { transform: translateY(0); }
        to { transform: translateY(calc(-100% - var(--gap))); }
    }


    /* our power */
    .ourpower-section { background: var(--light2); }
    .ourpower-section .bg-circle-overlay.purple { top: 40%; left: -5%; }
    .ourpower-section .bg-circle-overlay.pink { top: 0; right: 0; }

    .ourpower-area { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 1.25rem; }
    .ourpower-area .ourpower-item { padding: 2.5rem 1.875rem; flex-shrink: 0; width: calc(33.33% - 1.25rem); background: var(--background); border-radius: 1rem; text-align: center; }
    .ourpower-area .ourpower-item .image-area { text-align: center; margin-bottom: 1.25rem; }
    .ourpower-area .ourpower-item .image-area img { object-fit: contain; max-width: 5.5rem; }
    .ourpower-area .ourpower-item h2 { font-weight: 600; color: var(--color); }
    .ourpower-area .ourpower-item p { color: var(--color); margin-bottom: 0; }
    
    @media (max-width: 1200px) {
        .ourpower-area { margin-top: 2.5rem; }
        .ourpower-area .ourpower-item { padding: 2.5rem 1.25rem; }
        .ourpower-area .ourpower-item .image-area img { max-width: 4.5rem; }
    }
    @media (max-width: 992px) {
        .ourpower-area .ourpower-item { width: calc(50% - 1.25rem); }
    }
    @media (max-width: 768px) {
        .ourpower-area .ourpower-item { width: calc(100%); }
    }


    .cattalent-section .marquee-group:nth-child(n+3) { margin-top: 1rem; }
    .cattalent-area { position: relative; gap: 0 !important; }
    .cattalent-area .cattalent-item { background: #EFF4FF; width: auto; padding: 0.625rem 1.25rem; border-radius: 1.25rem; }
    .cattalent-area .cattalent-item:nth-child(even) { background: #F9EFFF; }
    .cattalent-area .cattalent-item .icon { color: #562EE7; margin-right: 0.313rem; }
    .cattalent-area .cattalent-item .text { font-weight: 600; }


    .talent-area { display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; gap: 1rem; }
    .talent-area .talent-item { width: calc(100%/3 - 1rem); }
    .talent-area.talent-area-4 .talent-item { width: calc(25% - 1rem); }

    @media (max-width: 1200px) {
        .talent-area { gap: 0.625rem; margin-top: 2.5rem; }
        .talent-area .talent-item { width: calc(100%/2 - 1rem); }
    }
    @media (max-width: 992px) {
        .talent-area.talent-area-4 .talent-item { width: calc(50% - 0.625rem); }
    }
    @media (max-width: 768px) {
        .talent-area .talent-item { width: calc(50% - 0.625rem); }
    }
    @media (max-width: 430px) {
        .talent-area .talent-item { width: calc(100%); }
        .talent-area.talent-area-4 .talent-item { width: calc(100%); }
    }


    .platform-area { display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; gap: 1rem; }
    .platform-area .platform-item { width: calc(100%/2 - 1rem); }
    
    @media (max-width: 992px) {
        .platform-area .platform-item { width: calc(100%); }
    }
    @media (max-width: 580px) {
        .platform-area .platform-item { position: relative; }
        .platform-area .platform-item:not(:last-child) { margin-bottom: 1.25rem; }
        .platform-area .platform-item:not(:last-child):before { content: ''; position: absolute; bottom: -0.85rem; left: 0; width: 100%; height: 1px; background: var(--border); }
    }

    .talent-profile-head { border: 1px solid var(--border); }
    .talent-profile-head .inner { display: flex; align-items: flex-start; justify-content: flex-start; gap: 2.5rem; }
    .talent-profile-head .inner .thumb { flex-shrink: 0; width: 9rem; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; }
    .talent-profile-head .inner .thumb .thumb-img { object-fit: cover; object-position: center; width: 100%; height: 100%; }
    .talent-profile-head .inner .content { width: 100%; display: flex; align-items: flex-start; gap: 2.5rem; }
    .talent-profile-head .inner .content > div[class^="col-"] { position: relative; width: calc(100%/2); }
    .talent-profile-head .inner .content > div[class^="col-"]:not(:first-child):before { content: ''; position: absolute; top: 0; left: -6%; width: 1px; height: 100%; background: var(--border); }
    .talent-profile-head .inner .content .col-left .name { margin-bottom: 0.45rem; }
    .talent-profile-head .inner .content .col-left .description { margin-bottom: 0.45rem; }
    .talent-profile-head .inner .content .col-left .skill-list { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 0.313rem; }

    .talent-profile-platform { border: 1px solid var(--border); }

    .post.post-platform { padding: 1.25rem; background: var(--background); }
    .post.post-platform .head-area { display: flex; align-items: center; gap: 1.25rem; }
    .post.post-platform .head-area .platform-brand { flex-shrink: 0; width: 6rem; aspect-ratio: 1/1; border-radius: 50%; border: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .post.post-platform .brand-img { object-fit: cover; object-position: center; width: 100%; max-width: 3.5rem; height: 100%; max-height: 3.5rem; }
    .post.post-platform .platform-name { font-weight: 600; color: var(--color); }
    .post.post-platform .description { display: block; -webkit-line-clamp: 100 !important; }

    @media (max-width: 1200px) {
        .talent-profile-head .inner .thumb { width: 8rem; }
    }
    @media (max-width: 992px) {
        .talent-profile-head .inner .content { flex-direction: column; gap: 1.25rem; }
        .talent-profile-head .inner .content > div[class^="col-"] { width: calc(100%); }
        .talent-profile-head .inner .content > div[class^="col-"]:not(:first-child):before { display: none; }
    }
    @media (max-width: 580px) {
        .talent-profile-head .inner { flex-direction: column; gap: 1.25rem; }
        .talent-profile-head .inner .thumb { width: 6.5rem; }

        .post.post-platform .head-area .platform-brand { width: 5rem; }
        .post.post-platform .brand-img { max-width: 2.5rem; max-height: 2.5rem; }

        .post.post-platform { padding: 0; border: 0; }
    }


    .card-influencer { background: var(--background); padding: 1rem; border-radius: 1rem; border: 1px solid var(--light); }
    .card-influencer .meta-people-info { margin-bottom: 1rem; }
    .card-influencer .follower { display: flex; align-items: stretch; justify-content: space-between; gap: 0.625rem; }
    .card-influencer .follower h2 { font-weight: 800; margin-bottom: 0; }

    @media (max-width: 992px) {
        .card-influencer { margin-top: 1.25rem; }
    }


    .card-invite-brand { padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; border-radius: 0.938rem; border: 1px solid var(--warning); border-width: 1px 1px 1px 4px; }
    .card-invite-brand h2 { font-weight: 600; line-height: 1.5; margin-bottom: 0; }
    .card-invite-brand .action { flex-shrink: 0; }

    @media (max-width: 1200px) {
        .card-invite-brand { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
    }
    @media (max-width: 580px) {
        .card-invite-brand { padding: 1.25rem 1rem; }
    }


    .subscribe-area { display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; gap: 1rem; }
    .subscribe-area .subscribe-item { width: calc(33.33% - 1rem); }

    .card-subscribe { border: 1px solid var(--light); background: var(--background); border-radius: 1.25rem; padding: 2.5rem; }
    .card-subscribe .subscribe-title { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; }
    .card-subscribe .subscribe-title .title { font-weight: 600; margin-bottom: 0; }
    .card-subscribe .subscribe-price span { font-weight: 600; font-size: 1.875rem; color: var(--color); }
    .card-subscribe .subscribe-price sub { bottom: 0; font-size: 0.875rem; letter-spacing: 0.04rem; margin-left: 0.25rem; }
    .card-subscribe .card-body { padding: 0; margin-top: 1rem; }


    .achievement-area { display: flex; align-items: stretch; justify-content: center; gap: 2.5rem; }
    .achievement-area > div { text-align: center; width: calc(80%/3 - 2.5rem); }
    .achievement-area > div .number { 
        background: var(--gradient-3);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900; 
        font-size: 5rem; 
        margin-bottom: 0; 
    }
    .achievement-area > div .text { margin-bottom: 0; }

    @media (max-width: 1200px) {
        .achievement-area { gap: 1.25rem; }
        .achievement-area > div { text-align: center; width: calc(100%/3 - 1.25rem); }
        .achievement-area > div .number { font-size: 4.5rem; }
    }
    @media (max-width: 768px) {
        .achievement-area > div .number { font-size: 3.5rem; }
    }
    @media (max-width: 580px) {
        .achievement-area { flex-direction: column; gap: 2.5rem; }
        .achievement-area > div { width: calc(100%); }
        .achievement-area > div .number { font-size: 3rem; }
    }


    .campaign-area { display: flex; align-items: stretch; justify-content: flex-start; flex-direction: row; flex-wrap: wrap; gap: 1.25rem; }
    .campaign-area .campaign-item { width: calc(100%/3 - 1.25rem); }

    @media (max-width: 992px) {
        .campaign-area { gap: 1.25rem; }
        .campaign-area .campaign-item { width: calc(100%/2 - 1.25rem/2); }
    }
    @media (max-width: 768px) {
        .campaign-area .campaign-item .post .btn { display: none; }
    }
    @media (max-width: 580px) {
        .campaign-area { flex-direction: column; gap: 2.5rem; }
        .campaign-area .campaign-item { width: calc(100%); }
    }


    .job-area { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; gap: 3.2rem; }
    .job-area .job-item { position: relative; width: 100%; }
    .job-area .job-item:not(:last-child):before { content: ''; position: absolute; left: 0; bottom: calc(-3.2rem / 2); width: 100%; height: 1px; background: var(--border); }


    /* blog */
    .blog-area { display: flex; align-items: stretch; justify-content: flex-start; flex-direction: column; flex-wrap: wrap; gap: 3.2rem; }
    .blog-single .heading-medium .heading-area .heading { font-size: 2.75rem; }
    .blog-single .thumb-area .thumb-img { object-fit: contain; border-radius: 1rem; overflow: hidden; }

    .blog-single .body-area { position: relative; }
    .blog-single .tags-area { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; gap: 0.625rem; margin-top: 2.5rem; }
    .blog-single .tags-area .tags-item { display: inline-flex; padding: 0.4rem 0.85rem; background: var(--gradient-4); border-radius: 0.938rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .blog-single .tags-area .tags-item span { font-weight: 400; font-size: 0.875rem; line-height: 1.5; letter-spacing: 0.03rem; color: var(--color); }
    .blog-single .tags-area .tags-item:hover { background: var(--gradient-1); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .blog-single .tags-area .tags-item:hover span { color: var(--color-white); }
    .blog-single .share-area { display: inline-flex; align-items: center; margin-top: 2.5rem; }
    .blog-single .share-area .share-label { font-weight: 500; margin-right: 1.25rem; }

    @media (max-width: 1200px) {
        .blog-single .heading-medium .heading-area .heading { font-size: 2.375rem; }
    }
    @media (max-width: 768px) {
        .blog-single .heading-medium .heading-area .heading { font-size: 2rem; }
    }
    @media (max-width: 580px) {
        .blog-single .heading-medium .heading-area .heading { font-size: 1.875rem; }

        .blog-single .body-area .share-area { display: inline-block; }
        .blog-single .body-area .share-area .share-label { display: block; margin-bottom: 0.625rem; }
    }


    .story-area { display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; gap: 1rem; }
    .story-area .story-item { width: calc(25% - 1rem); overflow: hidden; }
    .story-area .story-item .head-area { position: relative; overflow: hidden; width: 100%; aspect-ratio: 6/9; border-radius: 1rem; }
    .story-area .story-item .head-area img { object-fit: cover; object-position: center; width: 100%; height: 100%; }
    .story-area .story-item .body-area { margin-top: 1rem; }
    .story-area .story-item .body-area .title { font-weight: 600; line-height: 1.4; color: var(--color); overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical; }
    .story-area .story-item .body-area .username { color: var(--color3); margin-bottom: 0.625rem; }
    .story-area .story-item .body-area .meta-info { margin-bottom: 0; }
    .story-area .story-item .body-area .meta-info span { font-weight: 600; }
    .story-area .story-item .body-area .meta-info .like i { color: #FE2C55; }

    @media (max-width: 1400px) {
        .story-area { gap: 1rem; }
        .story-area .story-item { width: calc(25% - 1rem); }
    }
    @media (max-width: 1200px) {
        .story-area { gap: 1rem; margin-top: 2.5rem; }
        .story-area .story-item { width: calc(25% - 1rem); }
    }
    @media (max-width: 992px) {
        .story-area { gap: 1.25rem; }
        .story-area .story-item { width: calc(50% - 1.25rem); }
        .story-area .story-item:nth-child(n+3) { margin-top: 1.25rem; }
    }
    @media (max-width: 580px) {
        .story-area { gap: 0.938rem; }
        .story-area .story-item { width: calc(50% - 0.938rem); }
    }


    .contact-info { background: var(--gradient-4); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-radius: 0.938rem; padding: 2.4rem; }
    .contact-maps { height: 480px; position: relative; z-index: 3; }
    .contact-maps iframe { border: 0; height: 100%; width: 100%; border-radius: 1rem; }

    @media (max-width: 580px) {
        .contact-info { padding: 2.4rem 0.938rem; }
    }


    .cover-area { position: relative; overflow: hidden; }
    .cover-area .ptr { position: absolute; }
    .cover-area .ptr.ptr-1 { left: 0.625rem; top: 0.625rem; }
    .cover-area .ptr.ptr-2 { right: 0.625rem; top: 0.625rem; }
    .cover-area .ptr.ptr-3 { left: 0; bottom: 0; }
    .cover-area .ptr.ptr-4 { right: 0.625rem; bottom: 0.625rem; }

    @media (max-width: 768px) {
        .cover-area .ptr.ptr-1 { left: -15%; top: 5%; opacity: 0.4; }
        .cover-area .ptr.ptr-2 { right: -15%; top: 40%; opacity: 0.4; }
        .cover-area .ptr.ptr-3 { left: -5%; bottom: -5%; }
    }

    /* cta */
    .cta-section { position: relative; }
    .cta-section:before { content: ''; position: absolute; top: -100%; left: 0; right: 0; width: 100%; height: 200%; opacity: 0.1; background: linear-gradient(180deg, rgba(51, 51, 153, 0) 0%, #F0C 98.36%); }
    .cta-section .ptr-cta { position: absolute; width: 38rem; height: 31rem; transform: rotate(10deg); border-radius: 50%; opacity: 0.5; background: var(--primary); filter: blur(232.5px); -webkit-filter: blur(232.5px); }
    .cta-section .ptr-cta.ptr-1 { bottom: -15%; left: -5%; background: #6A52BA; }
    .cta-section .ptr-cta.ptr-2 { top: -15%; right: -5%; }
    
    .cta-section .inner { position: relative; padding: 4.5rem 3.2rem; border-radius: 2.5rem; background: linear-gradient(129deg, rgba(255, 255, 255, 0.20) 16.4%, rgba(206, 223, 255, 0.15) 54.24%, rgba(255, 255, 255, 0.15) 87.63%); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 8px solid #eeeeee; }
    .cta-section .heading-area { max-width: 900px; margin: auto; text-align: center; }
    .cta-section .heading-area .heading { max-width: 500px; margin-left: auto; margin-right: auto; }

    @media (max-width: 768px) {
        .cta-section .inner { padding: 4.5rem 1.875rem; }
    }
    @media (max-width: 580px) {
        .cta-section .inner { padding: 4.5rem 0.938rem; }
    }

    /* footer */
    .footer { background: var(--primary, #006E74); padding-bottom: 0; margin: 0; }
    .footer * { color: var(--color-white-8); }
    .footer .footer-column { position: relative; z-index: 3; }
    .footer .footer-column .footer-title { font-weight: 500; color: var(--color-white); }

    .footer .footer-brand .brand-img { object-fit: contain; max-width: 8rem; max-height: 2.5rem; margin-bottom: 1.5rem; filter: invert(1) brightness(10); }

    .footer .social-media.social-media-2 .social-media-item { border-radius: 50%; border: 1px solid var(--light); }
    .footer .social-media.social-media-2 .social-media-item:hover { transform: scale(0.97); }

    .footer .footer-list { display: flex; align-items: flex-start; gap: 0.5rem; flex-direction: column; list-style-type: none; padding-left: 0; }
    .footer .footer-list a:hover, .footer .footer-list a:focus { color: var(--color-white); }

    .footer .list-info .list-item { display: flex; align-items: flex-start; gap: 0.625rem; }
    .footer .list-info .list-item .icon { transform: translateY(1px); }
    .footer .list-info .list-item a:hover, .list-info .list-item a:focus { color: var(--color-white); }

    .footer .copyright { padding: 1.25rem 0; margin-top: 4.5rem; text-align: center; border-top: 1px solid var(--color-white-5); }
    .footer .copyright span { letter-spacing: 0.04rem; }

    @media (max-width: 992px) {
        .footer .footer-column { margin-bottom: 2.5rem; }

        .footer .copyright { margin-top: 0.625rem; }
    }


    .text-limit-1-row { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 1 !important; -webkit-box-orient: vertical; }
    .text-limit-2-row { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; }
    .text-limit-3-row { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical; }
    .text-limit-4-row { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 4 !important; -webkit-box-orient: vertical; }
    .text-limit-5-row { overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 5 !important; -webkit-box-orient: vertical; }
/* ------------------------------------ end content ------------------------------------ */


/* ------------------------------------ dashboard ------------------------------------ */
    .dash-section { position: relative; overflow: hidden; min-height: calc(80vh); }
    .dash-sidebar-head { border-bottom: 1px solid var(--border); }
    .dash-sidebar-head .heading-area .heading { position: relative; padding-left: 1.25rem; }
    .dash-sidebar-head .heading-area .heading:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 0.4rem; height: 70%; margin: auto; border-radius: 0.313rem; background: var(--dark); }

    .dash-section .dash-sidebar { 
        position: relative; 
        display: -ms-flexbox; 
        display: flex; 
        align-items: stretch; 
        justify-content: flex-start; 
        -ms-flex-direction: column; 
        flex-direction: column; 
        background: var(--background);
        border-radius: 0.5rem;
        padding: 1.25rem 0;
    }
    .dash-section .dash-sidebar .nav-item .nav-link { position: relative; overflow: hidden; font-weight: 500; color: var(--color3); padding: 0.938rem 0; border-radius: 0.5rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dash-section .dash-sidebar .nav-item .nav-link:hover, .dash-section .dash-sidebar .nav-item .nav-link.active { color: var(--primary); }
    .dash-section .dash-sidebar .nav-item .nav-link .icon { font-size: 1.25rem; line-height: 1; width: 1.45rem; margin-right: 0.4rem; }

    .dash-section .dash-content { position: relative; }
    .dash-section .dash-content .section-title { margin-bottom: 1.25rem; }
    .dash-section .dash-content .section-title .title { margin-bottom: 0.313rem; }
    
    @media (max-width: 992px) {
        .dash-section { padding-top: 1.25rem; }
        .dash-section .container { padding-left: 0; padding-right: 0; }

        .dash-section .dash-sidebar { flex-direction: row; }
        .dash-sidebar-head { margin-bottom: 0.625rem; }
        .dash-section .dash-sidebar .nav-item .nav-link { padding: 0 1.875rem 0 0; }
    }
    @media (max-width: 768px) {
        .dash-section .dash-content .card-body { padding: 1.25rem 0; }
    }

    .banner-dashboard { position: relative; margin-bottom: 2.75rem; }
    .banner-dashboard img { object-fit: cover; width: 100%; height: auto; max-height: 450px; overflow: hidden; border-radius: 1rem; }
/* ------------------------------------ end dashboard ------------------------------------ */


/* ------------------------------------ loader ------------------------------------ */
    .sk-light { width: 100%; background-color: var(--light); border-radius: 0.5rem; }

    .cload { position: relative; overflow: hidden; cursor: wait; width: 100%; height: auto; border-radius: 0.5rem; background: rgba(22, 6, 71, .12) !important; }
    .cload:before { content: ''; }
    .cload:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, .4), transparent);
        -webkit-animation-name: cloader;
        animation-name: cloader;
        -webkit-animation-duration: 1.65s;
        animation-duration: 1.65s;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    @keyframes cloader {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }

    .cload-left { left: 0; margin-left: 0; }
    .cload-center { left: 0; right: 0; margin: auto; }
    .cload-right { right: 0; margin-right: 0; }

    .cload-20 { width: 20%; }
    .cload-30 { width: 30%; }
    .cload-40 { width: 40%; }
    .cload-50 { width: 50%; }
    .cload-60 { width: 60%; }
    .cload-70 { width: 70%; }
    .cload-80 { width: 80%; }
    .cload-90 { width: 90%; }
    .cload-100 { width: 100%; }

    .cload-xxs { height: 0.875rem; }
    .cload-xs { height: 1rem; }
    .cload-sm { height: 1.25rem; }
    .cload-md { height: 1.563rem; }
    .cload-lg { height: 2.5rem; }
    .cload-xl { height: 3.2rem; }
    .cload-xxl { height: 3.8rem; }
    
    .cload-img { width: 100%; height: 100%; }
    .cload-img-xxs { height: 60px; }
    .cload-img-xs { height: 80px; }
    .cload-img-sm { height: 100px; }
    .cload-img-md { height: 150px; }
    .cload-img-lg { height: 200px; }
    .cload-img-xl { height: 250px; }
    .cload-img-xxl { height: 330px; }

    @media screen and (max-width: 1600px) {
        .cload-lg-center { left: 0; right: 0; margin: auto; }
    }
    @media screen and (max-width: 992px) {
        .cload-lg-center { right: auto; margin-left: 0; }

        .cload-md-center { left: 0; right: 0; margin: auto; }
    }
    @media screen and (max-width: 768px) {
        .cload-lg { height: 2rem; }
        .cload-xl { height: 2.5rem; }
        .cload-xxl { height: 3rem; }

        .cload-md-center { left: 0; margin-left: 0; }
    }
/* ------------------------------------ end loader ------------------------------------ */


/* ------------------------------------ animation ------------------------------------ */
    .delay-1-0s { -webkit-animation-delay: 1s; animation-delay: 1s; }
    .delay-2-0s { -webkit-animation-delay: 2s; animation-delay: 2s; }
    .delay-0-1s { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
    .delay-0-2s { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
    .delay-0-3s { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
    .delay-0-4s { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
    .delay-0-5s { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; }
    .delay-0-6s { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
    .delay-0-7s { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; }
    .delay-0-8s { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; }
    .delay-0-9s { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
    .delay-1-1s { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }
    .delay-1-2s { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
    .delay-1-3s { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }
    .delay-1-4s { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
    .delay-1-5s { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }
    .delay-1-6s { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; }
    .delay-1-7s { -webkit-animation-delay: 1.7s; animation-delay: 1.7s; }
    .delay-1-8s { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }
    .delay-1-9s { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; }

    .customSlideInRight { -webkit-animation-name: customSlideInRight; animation-name: customSlideInRight; }
    @-webkit-keyframes customSlideInRight {
        from { -webkit-transform: translate3d(100px, -100px, 0); transform: translate3d(100px, -100px, 0); }
        to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 
    }
    @keyframes customSlideInRight {
        from { -webkit-transform: translate3d(100px, -100px, 0); transform: translate3d(100px, -100px, 0); }
        to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 
    }

    .customSlideInLeft { -webkit-animation-name: customSlideInLeft; animation-name: customSlideInLeft; }
    @-webkit-keyframes customSlideInLeft {
        from { -webkit-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0); }
        to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 
    }
    @keyframes customSlideInLeft {
        from { -webkit-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0); }
        to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 
    }

    @-webkit-keyframes slide-down {
        from { -webkit-transform: translateY(-250%); transform: translateY(-250%); }
        to { -webkit-transform: translateY(0%); transform: translateY(0%); }
    }
    @keyframes slide-down {
        from { -webkit-transform: translateY(-250%); transform: translateY(-250%); }
        to { -webkit-transform: translateY(0%); transform: translateY(0%); }
    }

    @-webkit-keyframes slide-up {
        from { -webkit-transform: translateY(0%); transform: translateY(0%); }
        to { -webkit-transform: translateY(-250%); transform: translateY(-250%); }
    }
    @keyframes slide-up {
        from { -webkit-transform: translateY(0%); transform: translateY(0%); }
        to { -webkit-transform: translateY(-250%); transform: translateY(-250%); }
    }
    
    @-webkit-keyframes marquee-left {
        0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
        100% { -webkit-transform: translateX(calc((-25% + 17vw) * 3)); -ms-transform: translateX(calc((-25% + 17vw) * 3)); transform: translateX(calc((-25% + 17vw) * 3)); }
    }
    @keyframes marquee-left {
        0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
        100% { -webkit-transform: translateX(calc((-25% + 17vw) * 3)); -ms-transform: translateX(calc((-25% + 17vw) * 3)); transform: translateX(calc((-25% + 17vw) * 3)); }
    }

    @-webkit-keyframes marquee-right {
        from { transform: translateX(-50%); }
        to { transform: translateX(0%); }
    }
    @keyframes marquee-right {
        from { transform: translateX(-50%); }
        to { transform: translateX(0%); }
    }

    @keyframes thumbScroll {
        10% { background-position-y: 0%; }
        50% { background-position-y: 50%; }
        100%{ background-position-y: 100%; }
    }
    @-webkit-keyframes thumbScroll {
        10% { background-position-y: 0%; }
        50% { background-position-y: 50%; }
        100% { background-position-y: 100%; }
    }
    @-moz-keyframes thumbScroll {
        10% { background-position-y: 0%; }
        50% { background-position-y: 50%; }
        100% { background-position-y: 100%; }
    }

    /* End Shape rotate */
    @-webkit-keyframes moveBounce {
        0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
        50% { -webkit-transform: translateY(20px); transform: translateY(20px); }
        100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    }
    @keyframes moveBounce {
        0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
        50% { -webkit-transform: translateY(20px); transform: translateY(20px); }
        100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    }

    @-webkit-keyframes moveLeftBounce {
        0% { -webkit-transform: translateX(0); transform: translateX(0); }
        50% { -webkit-transform: translateX(5px); transform: translateX(5px); }
        100% { -webkit-transform: translateX(0); transform: translateX(0); }
    }
    @keyframes moveLeftBounce {
        0% { -webkit-transform: translateX(0); transform: translateX(0); }
        50% { -webkit-transform: translateX(5px); transform: translateX(5px); }
        100% { -webkit-transform: translateX(0); transform: translateX(0); }
    }

    @keyframes ripple {
        0% { -webkit-transform: scale(1); transform: scale(1); }
        75% { -webkit-transform: scale(1.75); transform: scale(1.75); opacity: 1;  }
        100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; }
    }

    @-webkit-keyframes rotateMe {
        from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
    }

    @keyframes rotateMe {
        from { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
        to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
    }

    @-webkit-keyframes moveScale {
        0% { -webkit-transform: scale(1); transform: scale(1); }
        50% { -webkit-transform: scale(0.8); transform: scale(0.8); }
        100% { -webkit-transform: scale(1); transform: scale(1); }
    }

    @keyframes moveScale {
        0% { -webkit-transform: scale(1); transform: scale(1); }
        50% { -webkit-transform: scale(0.8); transform: scale(0.8); }
        100% { -webkit-transform: scale(1); transform: scale(1); }
    }

    @-webkit-keyframes sk-bouncedelay {
        0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
        40% { -webkit-transform: scale(1); transform: scale(1); }
    }

    @keyframes sk-bouncedelay {
        0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
        40% { -webkit-transform: scale(1); transform: scale(1); }
    }

    @keyframes animationFramesOne {
        0% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); }
        20% { -webkit-transform: translate(73px, -1px) rotate(36deg); transform: translate(73px, -1px) rotate(36deg); }
        40% { -webkit-transform: translate(141px, 72px) rotate(72deg); transform: translate(141px, 72px) rotate(72deg); }
        60% { -webkit-transform: translate(83px, 122px) rotate(108deg); transform: translate(83px, 122px) rotate(108deg); }
        80% { -webkit-transform: translate(-40px, 72px) rotate(144deg); transform: translate(-40px, 72px) rotate(144deg); }
        100% { -webkit-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); }
    }

    @-webkit-keyframes animateGradient {
        0% { background-position: left bottom }
        50% { background-position: right top }
        100% { background-position: left bottom }
    }
    @keyframes animateGradient {
        0% { background-position: left bottom }
        50% { background-position: right top }
        100% { background-position: left bottom }
    }
/* ------------------------------------ end animation ------------------------------------ */