@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Quicksand:wght@300;400;500;600;700&display=swap&subset=latin-ext');

@import url(../vendor/animate/animate.min.css);
@import url(../vendor/bootstrap/css/bootstrap.min.css);
@import url(../vendor/magnific-popup/magnific-popup.css);
/*@import url(../vendor/fontawesome/css/fontawesome-all.css);*/
@import url(../vendor/fontawesome-5/css/all.css);
@import url(../vendor/feather/css/iconfont.css);
@import url(../vendor/toastr/toastr.min.css);
@import url(../vendor/select2/css/select2.min.css);
@import url(../vendor/cropperjs/cropper.css);
@import url(../vendor/jquery-ui/jquery-ui.css);

:root {
    --accent: #17C9C3;
    --second: #17E286;
    --third: #375773;

    --light: #F8F8F8;
    --dark: #2D3748;
    --white: #ffffff;
    --black: #000000;
    --red: #ff3333;

    --text1: #3B566E;
    --text2: #6F8BA4;
    --border: #E3E6E8;
}


/* ------------------------------------ basic ------------------------------------ */
    *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; }
    html { -webkit-tap-highlight-color: transparent; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    body { background: #F7FAFD; font-family: "Quicksand", sans-serif; font-style: normal; font-weight: 400; font-size: 1rem; line-height: 1.5; color: var(--text1); overflow-x: hidden; -webkit-font-smoothing: antialiased; }

    .clearfix { display: inline-block; }
    .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
    html[xmlns] .clearfix { display: block; }
    * html .clearfix { height: 1%; }

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

    ::placeholder { color: var(--light); }
    input:focus::-moz-placeholder { opacity: 0; -webkit-transition: .4s; -o-transition: .4s; transition: .4s; }

    *:focus { text-decoration: none; outline: none; }
    a { color: var(--dark); cursor: pointer; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
    a:focus, a:hover { color: var(--accent); outline: none; text-decoration: none; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div pre,
    a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
    s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
    figure, header, nav, section, article, aside, footer, figcaption {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
    }

    ul, li { padding: 0; margin: 0; list-style: none; }

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

    html, body {
      font-family: "Quicksand", sans-serif;
      font-weight: 400;
      background-color: #fff;
      font-size: 16px;
      -ms-text-size-adjust: 100%;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a { text-decoration: none !important; }

    h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0px; }

    ul { margin-bottom: 0px; }

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

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

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

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

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

    .text-accent { color: var(--accent) !important; }
    .text-text1 { color: var(--text1) !important; }
    .text-text2 { color: var(--text2) !important; }
    .text-second { color: var(--second) !important; }
    .text-white { color: var(--white) !important; }
    .text-black { color: var(--black) !important; }
    .text-light { color: var(--light) !important; }
    .text-dark { color: var(--dark) !important; }
    .text-red { color: #FF0000 !important; }
    .text-note { font-weight: normal; font-size: 0.75rem; letter-spacing: 0.02rem; color: #ABAFB3; }

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

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

    .p-absolute { position: absolute !important; }
    .p-relative { position: relative !important; }
    .p-sticky { position: sticky !important; }

    .absolute-top-left { position: absolute; top: 0; left: 0; }
    .absolute-top-right { position: absolute; top: 0; right: 0; }
    .absolute-bottom-left { position: absolute; bottom: 0; left: 0; }
    .absolute-bottom-right { position: absolute; bottom: 0; right: 0; }

    .overflow-auto { overflow: auto; }
    .overflow-hidden { overflow: hidden; }

    .bg-trans { background: transparent !important; }
    .bg-accent { background: var(--accent) !important; }
    .bg-second { background: var(--second) !important; }
    .bg-dark { background: var(--dark) !important; }
    .bg-light { background: var(--light) !important; }
    .bg-black { background: var(--black) !important; }
    .bg-white { background: var(--white) !important; }

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

    .img-contain { object-fit: contain; -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; object-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-profile-xs { width: 2.5rem; height: 2.5rem; border-radius: 50%; -o-object-fit: cover; object-fit: cover; object-position: 50% 50%; }
    .img-profile-sm { width: 3.75rem; height: 3.75rem; border-radius: 50%; -o-object-fit: cover; object-fit: cover; object-position: 50% 50%; }
    .img-profile-md { width: 5rem; height: 5rem; border-radius: 50%; -o-object-fit: cover; object-fit: cover; object-position: 50% 50%; }
    .img-profile-lg { width: 7.5rem; height: 7.5rem; border-radius: 50%; -o-object-fit: cover; object-fit: cover; object-position: 50% 50%; }

    .separator { border-top: 1px solid var(--light); }
    .v-separator { width: 1px; height: 1.8rem; background: var(--light); }
    .separator-dark { border-top: 1px solid var(--dark); }
    hr { border-bottom: 1px solid var(--light); border-top: 0 none; padding: 0; }

    .trans-4, .trans-4:hover { -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; }

    
    .border-none { border: none !important; }
    .border-bottom { border-bottom: 1px solid #F5F5F5 !important; }

    .align-self-center { -ms-flex-item-align: center !important; align-self: center !important; }
    .align-self-bottom { -ms-flex-item-align: flex-end !important; align-self: flex-end !important; }

    .btn-primary-line {
        width: 160px;
        margin: auto;
        display: inline-block;
        height: 36px;
        line-height: 34px;
        text-align: center;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
        border: 1px solid #17C9C3;
        margin-bottom: 40px;
        font-weight: 700;
        font-size: 12px;
        background: #fff;
        color: #17C9C3;
        letter-spacing: 0.75px;
        text-transform: uppercase;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        outline: none !important;
        cursor: pointer;
    }
    .btn-primary-line:hover { background: #17C9C3; color: #fff; }

    .padding-top-30 { padding-top: 30px; }
    .padding-bottom-30 { padding-bottom: 30px; }
    .padding-bottom-0 { padding-bottom: 0px; }
    .padding-bottom-top-60 { padding-top: 60px !important; padding-bottom: 60px !important; }

    .margin-bottom-0 { margin-bottom: 0px !important; }
    .margin-bottom-30 { margin-bottom: 30px !important; }
    .margin-bottom-20 { margin-bottom: 20px !important; }
    .margin-bottom-60 { margin-bottom: 60px !important; }

    .bg-center-right { background: var(--white) url(../img/section-bg-right.svg) center right no-repeat !important; }
    .bg-center-left { background: var(--white) url(../img/section-bg-left.svg) center left no-repeat !important; }

    blockquote { margin-bottom: 28px; padding: 30px; padding-top: 40px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #F4F8FB; overflow: hidden; }
    blockquote .text { position: relative; text-align: center; }
    blockquote .text p { position: relative; width: 100%; z-index: 2; margin-bottom: 10px !important; }
    blockquote .text:before {
        font-family: FontAwesome;
        content: "\f10d";
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1;
        font-size: 40px;
        color: #e1ecf4;
    }
    blockquote .text:after {
        font-family: FontAwesome;
        content: "\f10e";
        position: absolute;
        right: 0px;
        bottom: 0px;
        z-index: 1;
        font-size: 40px;
        color: #e1ecf4;
    }
    blockquote .author { color: var(--text1); text-align: center; }

    .page-gallery { height: 185px; display: block; overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-bottom: 30px; }

    @media (max-width: 991px) {
        html, body { overflow-x: hidden; }

        .mobile-bottom-fix { margin-bottom: 30px; }
    }

    .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.15s ease-out; -moz-transition: all 0.15s ease-out; transition: all 0.15s ease-out; }

    .shadow-style { box-shadow: 0 0.125rem 2.813rem 0 rgba(0, 0, 0, 0.06); }
    .shadow-style-sm { box-shadow: 0 0.125rem 1.375rem rgba(192, 189, 189, 0.25); }
    .shadow-style-md { box-shadow: 0 0.25rem 2.188rem rgba(192, 189, 189, 0.25); }

    .not-found-item { position: relative; overflow: hidden; padding: 1.563rem; text-align: center; }
/* ------------------------------------ end basic ------------------------------------ */


/* ------------------------------------ general class ------------------------------------ */
    .section-xl { padding-top: 6.25rem; padding-bottom: 6.25rem; margin-bottom: 5px; }
    .section-lg { padding-top: 5rem; padding-bottom: 5rem; margin-bottom: 5px; }
    .section-md { padding-top: 3.75rem; padding-bottom: 3.75rem; margin-bottom: 5px; }
    .section-sm { padding-top: 2.5rem; padding-bottom: 2.5rem; margin-bottom: 5px; }
    .section-xs { padding-top: 1.563rem; padding-bottom: 1.563rem; margin-bottom: 5px; }
    .section-xxs { padding-top: 0.938rem; padding-bottom: 0.938rem; margin-bottom: 5px; }

    @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: 991px) {
        .section-xl { padding-top: 5rem; padding-bottom: 5rem; }
        .section-lg { padding-top: 4.25rem; padding-bottom: 4.25rem; }
        .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; }
    }

    .section-heading-lg { font-weight: bold; font-size: 2.375rem; line-height: 1.2; color: var(--dark); }
    .section-heading { font-weight: bold; font-size: 2rem; line-height: 1.2; color: var(--dark); }
    .section-heading-sm { font-weight: bold; font-size: 1.75rem; line-height: 1.3; color: var(--dark); }
    .section-heading-xs { font-weight: bold; font-size: 1.5rem; line-height: 1.3; color: var(--dark); }
    .section-description-xl { font-weight: normal; font-size: 1.375rem; line-height: 1.4; color: var(--dark); }
    .section-description-lg { font-weight: normal; font-size: 1.25rem; line-height: 1.4; color: var(--dark); }
    .section-description { font-weight: normal; font-size: 1.125rem; line-height: 1.4; color: var(--dark); }
    .section-description-md { font-weight: normal; font-size: 1rem; line-height: 1.4; color: var(--dark); }
    .section-description-sm { font-weight: normal; font-size: 0.875rem; line-height: 1.4; color: var(--dark); }
    .section-description-xs { font-weight: normal; font-size: 0.75rem; line-height: 1.5; color: var(--dark); }
    .section-description-xxs { font-weight: normal; font-size: 0.625rem; line-height: 1.5; color: var(--dark); }

    @media (max-width: 991px) {
        .section-heading-lg { font-size: 2.188rem; }
        .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-lg { font-size: 2rem; }
        .section-heading { font-size: 1.625rem; }
        .section-heading-sm { font-size: 1.375rem; }
        .section-heading-xs { font-size: 1.313rem; }
    }


    .mh-100 { min-height: 100vh; }
    .vh-100 { height: calc(100vh); }


    /*scrollable*/
    .scrollable {
        position: relative;
        display: -ms-flexbox;
        display: flex; 
        -ms-flex-direction: row;
        flex-direction: row;
        flex-wrap: inherit;
        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: column !important; flex-direction: column !important; overflow-y: hidden; overflow-x: auto; }


    .section { padding-top: 100px; padding-bottom: 70px; }
    .section.white { background: #fff; }

    .wrap-section-title { position: relative; margin-bottom: 1.25rem; }
    .section-title { font-weight: 500; font-size: 26px; color: var(--dark); line-height: 40px; letter-spacing: 1.3px; margin-bottom: 0; }

    .left-heading.light .section-title { color: #ffffff; }
    .left-heading .section-title { font-weight: 400; font-size: 30px; color: var(--dark); letter-spacing: 1.3px; line-height: 40px; margin-bottom: 20px; }

    .center-heading { text-align: center; }
    .center-heading .section-title { font-weight: 400; font-size: 28px; color: var(--dark); letter-spacing: 1.75px; line-height: 38px; margin-bottom: 20px; }
    .center-heading.colored .section-title { color: #ffffff; }

    .center-text {
        text-align: center;
        font-weight: 400;
        font-size: 16px;
        color: #6F8BA4;
        line-height: 28px;
        letter-spacing: 1px;
        margin-bottom: 50px;
    }
    .center-text.colored { color: #E8FFED; }
    .center-text p { margin-bottom: 30px; }

    .left-text { font-weight: 400; font-size: 16px; color: #6F8BA4; line-height: 28px; letter-spacing: 1px; }
    .left-text.light { color: #E8FFED; }
    .left-text p { margin-bottom: 30px; }
    .left-text p.dark { color: var(--text1); }
    .left-text ul { color: #6F8BA4; font-weight: 400; font-size: 14px; letter-spacing: 0.88px; }
    .left-text ul li { min-height: 32px; line-height: 32px; position: relative; padding-left: 30px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
    .left-text ul li:before { content: "\f00c"; font-family: 'Font Awesome 5 Free'; position: absolute; left: 0px; height: 32px; line-height: 32px; }
    .left-text ul li:hover { padding-left: 40px; }
/* ------------------------------------ end general class ------------------------------------ */


/* ------------------------------------ social share ------------------------------------ */
    ul.social-media { position: relative; display: flex; align-items: center; justify-content: flex-start; }
    ul.social-media li:not(:last-child) { margin-right: 0.313rem; }
    ul.social-media .social-icon { 
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--accent);
        font-size: 1rem;
        line-height: 1;
        color: var(--white);
    }
    ul.social-media .social-icon:hover { background: var(--white); color: var(--accent); box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1); }
    ul.social-media.social-media-lg .social-icon { width: 2.375rem; height: 2.375rem; font-size: 0.938rem; }

    ul.social-media.style-2 {  } 
    ul.social-media.style-2 li:not(:last-child) { margin-right: 0.5rem; }
    ul.social-media.style-2 .social-icon { font-size: 1.25rem; line-height: 1; color: var(--text1); background: none; }
    ul.social-media.style-2 .social-icon:hover { color: var(--accent); box-shadow: none; }

    .social-icon.accent { background: var(--accent); }
    .social-icon.accent:hover { color: var(--accent) !important; }

    .social-icon.facebook { background: #4267B2; }
    .social-icon.facebook:hover { color: #4267B2 !important; }

    .social-icon.twitter { background: #1DA1F2; }
    .social-icon.twitter:hover { color: #1DA1F2 !important; }

    .social-icon.instagram { background: #E1306C ; }
    .social-icon.instagram:hover { color: #E1306C !important; }

    .social-icon.pinterest { background: #E60023; }
    .social-icon.pinterest:hover { color: #E60023 !important; }

    .social-icon.whatsapp { background: #25D366; }
    .social-icon.whatsapp:hover { color: #25D366 !important; }

    .social-icon.email { background: #ff5D5D; }
    .social-icon.email:hover { color: #ff5D5D !important; }

    .social-icon.telegram { background: #0088CC; }
    .social-icon.telegram:hover { color: #0088CC !important; }

    .social-icon.linkedin { background: #2867B2; }
    .social-icon.linkedin:hover { color: #2867B2 !important; }

    .social-icon.youtube { background: #FF0000; }
    .social-icon.youtube:hover { color: #FF0000 !important; }
/* ------------------------------------ end social share ------------------------------------ */


/* ------------------------------------ form style ------------------------------------ */
    .auth-section { 
        position: relative; 
        overflow: hidden; 
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

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

    .form-style.with-bg-light .form-control, 
    .form-style.with-bg-light .select2-selection--single { background: var(--light); }

    .control-label { font-weight: 600; font-size: 0.875rem; line-height: 1.2; color: var(--dark); margin-bottom: 0.414rem; }
    .form-control { 
        position: relative;
        display: block;
        width: 100%;
        height: calc(1.875rem + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        background: var(--white); 
        border: 1px solid var(--border) !important;
        font-size: 0.938rem; 
        line-height: 1.2;
        color: var(--text1); 
        border-radius: 0.313rem !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;
    }
    
    .form-control::placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--dark); opacity: 0.4; }
    .form-control::-webkit-input-placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--dark); opacity: 0.4; }
    .form-control::-moz-placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--dark); opacity: 0.4; }
    .form-control:-ms-input-placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--dark); opacity: 0.4; }
    .form-control:-moz-placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--dark); opacity: 0.4; }
    .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(--accent) !important; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

    .form-actions { color: var(--text1); }

    textarea.form-control { height: inherit !important; }

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

    /*input group left icon*/
    .form-style .form-group .input-group { position: relative; width: 100%; }
    .form-style .form-group .input-group .input-group-addon { position: absolute; top: 22%; left: 0.75rem; z-index: 5; }
    .form-style .form-group .input-group .input-group-addon img.flag-ind { width: auto; height: 1.25rem; margin-top: -0.125rem; border-radius: 2px; }
    .form-style .form-group .input-group .input-group-addon span { font-weight: normal; font-size: 0.938rem; line-height: 1; }
    .form-style .form-group .input-group .form-control,
    .form-style .form-group .input-group .select2-selection--single { padding-left: 2.5rem; border-radius: 0.313rem; }
    .form-style .form-group .input-group.input-telp .form-control { padding-left: 70px; border-radius: 0.313rem; }

    .form-style .form-group .input-group.input-username {  }
    .form-style .form-group .input-group.input-username .input-group-text {
        padding: 0.188rem 0;
        font-weight: 600;
        font-size: 0.938rem;
        line-height: 1.3;
        color: var(--dark);
        background-color: transparent;
        border: 0;
        border-radius: 0;
    }
    .form-style .form-group .input-group.input-username .form-control { padding-left: 115px; border-radius: 0.313rem; }

    /*show password*/
    .form-style .form-group .show-password { cursor: pointer; position: absolute; top: 0.875rem; right: 0.75rem; color: var(--dark); opacity: 0.6; }
    .form-style .form-group .show-konf-password { cursor: pointer; position: absolute; top: 0.875rem; right: 0.75rem; color: var(--dark); opacity: 0.6; }

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

    .wrap-radio-category { position: relative; display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; }

    .radio-category { position: relative; margin-right: 0.625rem; display: flex; align-items: center; margin-bottom: 0.313rem; }
    .radio-category .custom-control-input { opacity: 0; position: absolute; top: 0; display: inline-block; cursor: pointer; }
    .radio-category .custom-control-label { 
        position: relative; 
        padding-left: 1.75rem; 
        cursor: pointer; 
        font-weight: normal; 
        font-size: 0.875rem; 
        line-height: 1; 
        background: var(--light);
        border: 1px solid var(--border); 
        height: calc(0.938em + 0.75rem + 2px);
        border-radius: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .radio-category .custom-control-label:before {
        content: '';
        border: 0;
        background: var(--text1);
        display: inline-block;
        position: absolute;
        border-radius: 0.35rem !important;
        width: 1.25rem;
        height: 1.25rem;
        margin-top: -0.25rem;
        margin-left: -1.75rem;
        margin-right: 0.25rem;
        text-align: center;
        font-size: 1rem; 
        line-height: 1.4;
    }
    .radio-category .custom-control-input:checked + .custom-control-label:before { content: "\e83f"; font-family: 'feather' !important; background: var(--accent) !important; color: var(--white) !important; }
    .radio-category .custom-control-input:checked ~ .custom-control-label::after { background: none;  box-shadow: none; outline: none; border: 0; border-color: transparent; }

    .radio-category.radio-category-2 .custom-control-label { padding-left: 0.313rem; padding-right: 0.313rem; }
    .radio-category.radio-category-2 .custom-control-label:before { content: ''; display: none; }
    .radio-category .custom-control-input:checked + .custom-control-label { border: 1px solid var(--accent); background: var(--accent); color: var(--white); }

    .checkbox-category { position: relative; width: 8.125rem; height: 1.875rem; margin: 0.25rem 0; margin-right: 0.313rem; }
    .checkbox-category input { opacity: 0; position: absolute; cursor: pointer; width: 100%; height: 100%; z-index: 2; appearance: none; -moz-appearance: none; -webkit-appearance: none; -o-appearance: none; -ms-appearance: none; }
    .checkbox-category .box-category {
        position: absolute; 
        top: 0; 
        width: 100%; 
        height: 100%; 
        z-index: 1; 
        background: var(--light); 
        border: 1px solid var(--text1); 
        color: var(--text1); 
        border-radius: 0.25rem; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        overflow: hidden; 
        -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; 
    }
    .checkbox-category .box-category span { font-weight: normal; font-size: 0.875rem; line-height: 1.2; }
    .checkbox-category input:checked ~ .box-category { background: var(--light); border: 1px solid var(--accent); color: var(--accent); }

    /*datepicker*/
    .datepicker.dropdown-menu {
        font-family: 'Inter Regular';
        background-color: var(--white);
        border: none;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
        -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.10);
        color: var(--dark);
    }
    .datepicker table tr td.day:hover, .datepicker table tr td.day.focused { background: var(--light); }

    /*select2 custome*/
    .select2-container { width: 100% !important; }
    .select2-container .select2-selection--single {
        user-select: none;
        -webkit-user-select: none;
        position: relative;
        width: 100%;
        height: calc(1.875rem + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        background: var(--white); 
        border: 1px solid var(--border);
        font-size: 0.875rem;
        line-height: 1.2;
        color: var(--text1); 
        border-radius: 0.313rem;
    }
    .select2-container .select2-selection__rendered { font-size: 0.938rem !important; line-height: 2rem !important; color: var(--text1) !important; }
    .select2-dropdown { background: var(--white); border: 1px solid var(--light); border-radius: 5px; -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; }
    .select2-container--default .select2-selection--single .select2-selection__placeholder { font-weight: normal; font-size: 0.875rem; color: var(--dark); opacity: 0.4; }
    
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; right: 0.75rem; }
    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-color: var(--text1) transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        margin-left: -4px;
        margin-top: -2px;
        height: 0;
        width: 0;
    }

    .select2-search--dropdown { padding: 0.375rem 0.75rem; }
    .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--light); border-radius: 5px; }

    .select2-container--default .select2-results__option { font-size: 0.875rem; padding: 0.375rem 0.75rem; -webkit-transition: color .3s, background-color .3s; -moz-transition: color .3s, background-color .3s; -ms-transition: color .3s, background-color .3s; -o-transition: color .3s, background-color .3s; transition: color .3s, background-color .3s; }
    .select2-container--default .select2-results__option--selected { background-color: var(--light); }
    .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: var(--accent); color: var(--white); -webkit-transition: color .3s, background-color .3s; -moz-transition: color .3s, background-color .3s; -ms-transition: color .3s, background-color .3s; -o-transition: color .3s, background-color .3s; transition: color .3s, background-color .3s; }

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

    /*validate*/
    .has-error { color: var(--red) !important; clear: both; -webkit-transition: all 0.4s ease-out; transition: all 0.4s ease-out; }
    .has-error em, em.has-error { color: var(--red) !important; font-size: 0.875rem !important; }
    .has-error > input { border-color: var(--red) !important; }
    .has-error > select { border: 1px solid var(--accent) !important; }
    .has-error > textarea { border: 1px solid var(--accent) !important; }
    input.has-error { border: 1px solid var(--red) !important; color: var(--red) !important; }
    textarea.has-error { border: 1px solid var(--red) !important; color: var(--red) !important; }
    select.has-error { border: 1px solid var(--red) !important; color: var(--red) !important; }
    .custom-checkbox.has-error > .custom-control-label { color: var(--red) !important; }
    .custom-checkbox.has-error > .custom-control-label::before { border-color: var(--red) !important; }
    .has-error > .select2-container .select2-selection--single { border: 1px solid var(--red) !important; -webkit-transition: 0.4s; transition: 0.4s; }
    .has-error .custom-control-label { border: 1px solid var(--red); }
/* ------------------------------------ end form style ------------------------------------ */


/* ------------------------------------ table style ------------------------------------ */
    .table-style { width: 100%; font-size: 0.938rem; line-height: 1.2; color: var(--text); }
    .table-style>:not(:last-child)>:last-child>* {
        border-bottom-color: var(--border);
    }
    .table-style tr th { font-weight: 600; font-size: 0.875rem; border: 0; padding: 0.75rem 0.313rem; border-bottom: 1px solid var(--light); }
    .table-style tr:first-child td { border-top: 0; }
    .table-style tr td { font-weight: normal; font-size: 0.875rem; color: var(--text1); padding: 0.75rem 0.313rem; border-bottom: 1px solid var(--light); }

    .table-style.table-padd-sm thead tr th { padding: 0.5rem 0.313rem; }
    .table-style.table-padd-sm tbody tr td { padding: 0.313rem 0.313rem; }

    .table-style.table-padd-lg thead tr th { padding: 0.75rem 0.313rem; }
    .table-style.table-padd-lg tbody tr td { padding: 0.75rem 0.313rem; }

    .table-style.border-none tr th, .table-style.border-none tr td { border-bottom: 0 solid transparent !important; }

    div.dataTables_wrapper div.dataTables_info { font-size: 0.813rem; color: var(--text2); }
    div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin: 2px 0; white-space: nowrap; justify-content: flex-end; }

    @media (max-width: 768px) {
        div.dataTables_wrapper div.dataTables_paginate ul.pagination { justify-content: center; margin-top: 1.25rem; }
    }
/* ------------------------------------ end table style ------------------------------------ */


/* ------------------------------------ cropper image ------------------------------------ */
    .cropper-container { max-width: 100%; }
    .cropper-canvas { max-width: 100%; }

    .photo-user-cropper { max-height: 200px; overflow: hidden; border-radius: 5px; max-width: 100%; }
    .preview-result-photo { overflow: hidden; width: 130px; height: 130px; border-radius: 50%; border: 1px solid var(--light); }

    .thumbnails-cropper { position: relative; overflow: hidden; width: 130px; height: 130px; border-radius: 0.5rem; border: 1px solid var(--light); }
    .banner-cropper { position: relative; overflow: hidden; width: 290px; height: 130px; border-radius: 0.5rem; border: 1px solid var(--light); }

    @media (max-width: 992px) {
        .photo-user-cropper { max-height: 150px; text-align: center; }
        .preview-result-photo { width: 80px; height: 80px; margin: auto; margin-bottom: 10px; }
    }

    @media only screen and (max-width: 480px) {
        .preview-result-photo { display: none; }
        .preview-result-cover { display: none; }
        
        .modal-cropper-photo .modal-footer { justify-content: center !important; }
    }
/* ------------------------------------ end cropper image ------------------------------------ */


/* ------------------------------------ button ------------------------------------ */
    .btn {
        outline: 0;
        -webkit-box-shadow: none; 
        box-shadow: none;
        font-weight: 700;
        font-size: 0.875rem; 
        line-height: 1.2; 
        letter-spacing: 0.08em;
        border-radius: 0.41rem;
        -moz-user-select: none;
        cursor: pointer;
        position: relative;
        -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out;
    }
    .btn:hover .btn:focus, .btn.focus { outline: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }

    .btn-padd-sm { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .btn-padd { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    .btn-padd-md { padding-top: 0.815rem; padding-bottom: 0.815rem; }
    .btn-padd-lg { padding-top: 0.935rem; padding-bottom: 0.935rem; }

    .btn-padd-width-sm { width: 5rem; }
    .btn-padd-width { width: 6.25rem; }

    .btn-shadow { box-shadow: 0 0.625rem 2.813rem rgba(0, 0, 0, 0.0986943); }

    .btn-trigger { position: relative; z-index: 1; text-align: center; }
    .btn-trigger:focus { box-shadow: none; }
    .btn-trigger:before { position: absolute; z-index: -1; height: 20px; width: 20px; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; content: ''; background-color: #F5F5F5; border-radius: 50%; opacity: 0; transition: all .3s; }
    .btn-trigger:hover:before, .btn-trigger:focus:before, .btn-trigger.active:not(.revarse):before { opacity: 1; height: 30px; width: 30px; }
    .btn-trigger .icon { color: var(--dark); font-size: 17px; width: 2.125rem; }

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

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

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

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

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

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

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

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

    .btn-outline-dark { color: var(--dark); background: transparent; border-color: var(--dark); }
    .btn-outline-dark:hover, .btn-outline-dark:focus { color: #ffffff; background-color: var(--dark); }

    .btn-outline-crimson { color: var(--crimson); background: transparent; border-color: var(--crimson); }
    .btn-outline-crimson:hover, .btn-outline-crimson:focus { color: #ffffff; background-color: var(--crimson); }

    .btn-outline-link-ujian { color: var(--accent); background: transparent; border-color: var(--accent); }
    .btn-outline-link-ujian:hover, .btn-outline-link-ujian:focus { color: #ffffff; background-color: var(--accent); }

    .btn-submit-form { color: var(--white) !important; background: #131045; }
    .btn-submit-form:hover, .btn-submit-form:focus { color: #131045 !important; background: transparent; border-color: #131045; }

    .btn-disabled { padding: 0.625rem 1.25rem; cursor: default; }
    .btn-disabled:hover, .btn-disabled:focus { color: var(--crimson) !important; background: transparent !important; border-color: var(--crimson) !important; }
/* ------------------------------------ end button ------------------------------------ */


/* ------------------------------------ card ------------------------------------ */
    .card-style { position: relative; background: var(--white); border: none; border-radius: 0.5rem; }
    .card-style .card-header { background: transparent; border: 0; padding: 0.938rem; padding-bottom: 0; }
    .card-style .card-header .title { font-weight: bold; font-size: 1.25rem; line-height: 1.2; margin-bottom: 0; }
    .card-style .card-body {  }
    .card-style .card-body.padd-xs { padding: 0.625rem; }
    .card-style .card-body.padd-sm { padding: 1.25rem; }
    .card-style .card-body.padd-md { padding: 1.875rem; }
    .card-style .card-body.padd-lg { padding: 2.5rem; }

    .card-shadow { box-shadow: 0 0 6.25rem rgba(0, 0, 0, 0.0986943); }
    .card-bordered { border: 1px solid var(--light); }
    .card-bordered.dashed { border-style: dashed; }
/* ------------------------------------ end card ------------------------------------ */


/* ------------------------------------ modal ------------------------------------ */
    /*.modal-style { border-radius: 0.625rem; }*/
    /*.modal-style .modal-content { border: 0; background: none; }*/
    /*.modal-style .modal-body { position: relative; overflow: hidden; border: none; background: var(--white); box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.2); border-radius: 8px; }*/
    .modal-style .modal-body .close-ind { position: absolute; top: 10px; right: 10px; z-index: 10; }
/* ------------------------------------ end modal ------------------------------------ */


/* ------------------------------------ header ------------------------------------ */
    .header-area { position: fixed; top: 0; left: 0; right: 0; z-index: 100; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
    .header-area .main-nav { padding-top: 1.25rem; padding-bottom: 0.625rem; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
    .header-area .main-nav .logo { float: left; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
    .header-area .main-nav .logo img { object-fit: contain; max-height: 4.25rem; -webkit-backface-visibility: hidden; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
    .header-area .main-nav .nav { margin-top: 0.625rem; float: right; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
    .header-area .main-nav .nav li { padding-left: 0.925rem; padding-right: 0.925rem; }
    .header-area .main-nav .nav li:last-child { padding-right: 0; }
    .header-area .main-nav .nav li a {
        display: block;
        font-weight: 500;
        font-size: 0.938rem;
        color: var(--dark);
        height: 2.5rem;
        line-height: 2.5rem;
        border: transparent;
        letter-spacing: 1px;
        -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
    }
    .header-area .main-nav .nav li a:hover { color: var(--accent); }
    .header-area .main-nav .nav li a.btn-nav-line {
        position: relative;
        overflow: hidden;
        padding-left: 1.563rem;
        padding-right: 1.563rem;
        border: 1px solid var(--dark);
        -webkit-border-radius: 6.25rem;
        -moz-border-radius: 6.25rem;
        border-radius: 6.25rem;
        height: 1.875rem;
        margin-top: 0.313rem;
        background: none;
        line-height: 29px;
        letter-spacing: 0.0.313rem;
        color: var(--dark);
    }
    .header-area .main-nav .nav li a.btn-nav-line:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: var(--white);
        left: 0;
        top: 0;
        z-index: 1;
        opacity: 0.19;
    }
    .header-area .main-nav .nav li a.btn-nav-line span { position: relative; z-index: 2; }
    .header-area .main-nav .nav li a.btn-nav-line:hover { background: var(--accent); border: 1px solid var(--accent); color: var(--white); }

    .header-area .main-nav .nav li.submenu { position: relative; padding-right: 35px; }
    .header-area .main-nav .nav li.submenu:after {
        font-family: 'feather';
        content: '\e842';
        font-size: 0.75rem;
        color: var(--dark);
        position: absolute;
        right: 1.125rem;
        top: 0.75rem;
    }
    .header-area .main-nav .nav li.submenu ul {
        position: absolute;
        width: 12.5rem;
        box-shadow: 0 0.128rem 1.75rem 0 rgba(0, 0, 0, 0.06);
        -webkit-border-radius: 0.313rem;
        -moz-border-radius: 0.313rem;
        border-radius: 0.313rem;
        overflow: hidden;
        top: 2.813rem;
        opacity: 0;
        transform: translateY(-2em);
        visibility: hidden;
        z-index: -1;
        transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
    }
    .header-area .main-nav .nav li.submenu.user-menu ul { width: 150px; right: 0; }
    .header-area .main-nav .nav li.submenu.user-menu .img-user { border-radius: 50%; width: 2.5rem; height: 2.5rem; overflow: hidden; }

    .header-area .main-nav .nav li.submenu ul li { margin-left: 0; padding-left: 0; padding-right: 0; }
    .header-area .main-nav .nav li.submenu ul li a {
        position: relative;
        display: block;
        background: var(--white);
        color: var(--text1);
        padding-left: 1.25rem;
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 0.875rem;
        -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
    }
    .header-area .main-nav .nav li.submenu ul li a:before {
        content: '';
        position: absolute;
        width: 0;
        height: 2.5rem;
        left: 0;
        top: 0;
        bottom: 0;
        background: #17C9C3;
        -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s;
    }
    .header-area .main-nav .nav li.submenu ul li a:hover { background: #f5f5f5; padding-left: 25px; }
    .header-area .main-nav .nav li.submenu ul li a:hover:before { width: 3px; }
    .header-area .main-nav .nav li.submenu:hover ul { visibility: visible; opacity: 1; z-index: 1; transform: translateY(0%); transition-delay: 0s, 0s, 0.3s; }

    .header-area .main-nav .menu-trigger {
        cursor: pointer;
        display: none;
        position: absolute;
        top: 1.875rem;
        right: 2.5rem;
        width: 2rem;
        height: 2.5rem;
        text-indent: -9999em;
        z-index: 99;
    }
    .header-area .main-nav .menu-trigger span,
    .header-area .main-nav .menu-trigger span:before,
    .header-area .main-nav .menu-trigger span:after {
        background-color: var(--text1);
        display: block;
        position: absolute;
        width: 1.875rem;
        height: 2px;
        left: 0;
        -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s;
    }
    .header-area .main-nav .menu-trigger span:before,
    .header-area .main-nav .menu-trigger span:after {
        background-color: var(--text1);
        display: block;
        position: absolute;
        width: 1.875rem;
        height: 2px;
        left: 0;
        width: 75%;
        -moz-transition: all 0.4s; -o-transition: all 0.4s; -webkit-transition: all 0.4s; transition: all 0.4s;
    }
    .header-area .main-nav .menu-trigger span:before,
    .header-area .main-nav .menu-trigger span:after {
        content: "";
    }
    .header-area .main-nav .menu-trigger span { top: 16px; }
    .header-area .main-nav .menu-trigger span:before { top: -10px; z-index: 10; -moz-transform-origin: 33% 100%; -ms-transform-origin: 33% 100%; -webkit-transform-origin: 33% 100%; transform-origin: 33% 100%; }
    .header-area .main-nav .menu-trigger span:after { top: 10px; -moz-transform-origin: 33% 0; -ms-transform-origin: 33% 0; -webkit-transform-origin: 33% 0; transform-origin: 33% 0; }
    .header-area .main-nav .menu-trigger.active span, 
    .header-area .main-nav .menu-trigger.active span:before, 
    .header-area .main-nav .menu-trigger.active span:after {
        background-color: transparent;
        width: 100%;
    }
    .header-area .main-nav .menu-trigger.active span:before {
        -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
        -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
        -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
        transform: translateY(6px) translateX(1px) rotate(45deg);
        background-color: var(--text1);
    }
    .header-area .main-nav .menu-trigger.active span:after {
        -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
        -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
        -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
        transform: translateY(-6px) translateX(1px) rotate(-45deg);
        background-color: var(--text1);
    }

    /*.header-area.header-white {  }*/
    .header-area.header-white .nav li a { color: var(--white); }
    .header-area.header-white .nav li a:hover { color: var(--white); }
    .header-area.header-white .nav li a.btn-nav-line { border: 1px solid var(--white); color: var(--white); }
    .header-area.header-white .nav li a.btn-nav-line:hover { background: var(--accent); border: 1px solid var(--accent); color: var(--white); }
    .header-area.header-white .nav li.submenu:after { color: var(--white); }

    .header-area.header-sticky { background: var(--white); box-shadow: 0 0.25rem 1.875rem 0 rgba(0, 0, 0, 0.06); }
    .header-area.header-sticky .main-nav { padding-top: 0.625rem; padding-bottom: 0.625rem; }
    .header-area.header-sticky .main-nav .logo img { max-height: 3.25rem; }
    .header-area.header-sticky .nav { margin-top: 0.313rem; }
    .header-area.header-sticky .nav li a { color: var(--text1); }
    .header-area.header-sticky .nav li a:hover { color: var(--accent); }
    .header-area.header-sticky .nav li a.btn-nav-line { border: 1px solid #3B566E; color: var(--text1); }
    .header-area.header-sticky .nav li a.btn-nav-line:hover { background: var(--accent); border: 1px solid var(--accent); color: var(--white); }
    .header-area.header-sticky .nav li.submenu { position: relative; }
    .header-area.header-sticky .nav li.submenu:after { color: var(--text1); }

    @media (max-width: 1200px) {
        .header-area .main-nav .nav li { padding-left: 0.75rem; padding-right: 0.75rem; }

        .header-area .main-nav .nav li.submenu { padding-right: 1.25rem; }
        .header-area .main-nav .nav li.submenu:after { right: 0.313rem; }
    }
    @media (max-width: 991px) {
        .header-area { background: var(--white); }
        .header-area .light-logo { display: none !important; }
        .header-area .dark-logo { display: block !important; }

        .header-area .menu-trigger { display: block !important; }

        .header-area .main-nav { overflow: hidden; }
        .header-area .main-nav .nav { float: none; width: 100%; margin-top: 75px !important; padding-top: 0.938rem; padding-bottom: 0.938rem; background: var(--white); display: none; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s; -o-transition: all 0s ease 0s; transition: all 0s ease 0s; }
        .header-area .main-nav .nav li { position: relative; width: 100%; background: var(--white); padding-left: 0; padding-right: 0; }
        .header-area .main-nav .nav li a { font-size: 1rem !important; line-height: 3.125rem !important; height: 3.125rem !important; padding-left: 0.625rem!important; padding-right: 0.625rem; border: 0 !important; background: var(--white); color: var(--text1) !important; }
        .header-area .main-nav .nav li:not(:last-child) a { border-bottom: 1px solid var(--light) !important; }
        .header-area .main-nav .nav li a:hover { background: rgba(23, 201, 195, 0.15) !important; }
        .header-area .main-nav .nav li a.btn-nav-line { font-weight: 600; color: var(--accent) !important; margin-top: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }

        .header-area .main-nav .nav li.submenu { padding-right: 1.875rem; }
        .header-area .main-nav .nav li.submenu:after { color: var(--text1) !important; right: 1.875rem; font-size: 0.938rem; top: 0.938rem; }
        .header-area .main-nav .nav li.submenu ul {
            position: relative;
            visibility: inherit;
            opacity: 1;
            z-index: 1;
            transform: translateY(0%);
            transition-delay: 0s, 0s, 0.3s;
            top: 0;
            width: 100%;
            box-shadow: none;
            height: 0;
        }
        .header-area .main-nav .nav li.submenu.user-menu ul { width: 100%; right: 0; }
        .header-area .main-nav .nav li.submenu ul li a:hover:before { width: 0; }
        .header-area .main-nav .nav li.submenu ul.active { height: auto !important; }
        .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul { height: 0; }
    }
    @media (max-width: 768px) {
        .header-area .main-nav {  }
        .header-area .main-nav .logo img { max-height: 3.125rem; }
    }
    @media (max-width: 480px) {
        .header-area .main-nav .menu-trigger { top: 1.563rem; right: 1.875rem; }
        /*.header-area .main-nav .nav { min-height: 100vh; } */
    }
    @media (min-width: 992px) {
        .header-area .main-nav .nav { display: flex !important; }
    }
/* ------------------------------------ end header ------------------------------------ */


/* ------------------------------------ welcome ------------------------------------ */
    .welcome-area { overflow: hidden; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
    .welcome-area:after { content: ""; position: absolute; width: 100%; height: 100%; background: none; z-index: 3; }
    .welcome-area .right-bg { float: right; width: 55.5%; overflow: hidden; position: relative; z-index: 1; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
    .welcome-area .right-bg:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        background-image: linear-gradient(135deg, #17BCE0 0%, #17E286 100%);
    }
    .welcome-area .header-hexagon-bg { position: absolute; top: 0px; min-height: 500px; z-index: 2; }
    .welcome-area .header-text { position: absolute; width: 100%; top: 50%; transform: perspective(1px) translateY(-50%); z-index: 4; }
    .welcome-area .header-text h1 { font-weight: 400; font-size: 42px; color: #1E3056; line-height: 54px; letter-spacing: 1.4px; margin-bottom: 40px; }
    .welcome-area .header-text p { font-weight: 400; font-size: 16px; color: #697BA2; line-height: 28px; letter-spacing: 1px; margin-bottom: 40px; }
    .welcome-area .play-button-wrapper {
        position: absolute;
        width: 100%;
        top: 45%;
        transform: perspective(1px) translateY(-45%);
        z-index: 4;
        width: 55.5%;
        right: 0px;
    }
    .welcome-area .play-button-wrapper .btn-play {
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 22px;
        color: #fff;
        margin: auto;
        left: 10%;
        right: 0px;
        display: block;
        border: 1px solid #fff;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
        position: absolute;
        overflow: hidden;
        top: 50%;
        transform: perspective(1px) translateY(-50%);
        z-index: 3;
    }
    .welcome-area .play-button-wrapper .btn-play:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        background: #fff;
        opacity: 0.19;
        z-index: 1;
    }
    .welcome-area .play-button-wrapper .btn-play i { padding-left: 5px; position: relative; z-index: 2; }

    @media (max-width: 1200px) {
        .header-text { top: 60% !important; transform: perspective(1px) translateY(-60%) !important; }
        .header-text h1 { font-size: 32px !important; line-height: 42px !important; }
    }
    @media (max-width: 991px) {
        .welcome-area { margin-top: 75px; }
        .welcome-area .right-bg { width: 100%; }
        .welcome-area .header-hexagon-bg { display: none; }
        .welcome-area .header-text { top: 60% !important; transform: perspective(1px) translateY(-60%) !important; text-align: center; }
        .welcome-area .header-text h1 { font-weight: 600; font-size: 24px !important; line-height: 32px !important; margin-bottom: 10px !important; color: var(--white); text-align: center; }
        .welcome-area .header-text p { color: var(--white); text-align: center; }
        .welcome-area .play-button-wrapper { display: none; }
    }
/* ------------------------------------ end welcome ------------------------------------ */


/* ------------------------------------ features ------------------------------------ */
    .wrap-features-item { position: relative; }
    .features-small-item {
        position: relative;
        overflow: hidden;
        display: block;
        top: 0;
        background: #F9FAFF;
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
        border-radius: 0.313rem;
        padding: 2.5rem 1.75rem;
        height: 100%;
        text-align: center;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        margin-bottom: 1.875rem;
    }
    .features-small-item:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: linear-gradient(135deg, #17BCE0 0%, #17E286 100%);
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        opacity: 0;
    }
    .features-small-item.active:before, .features-small-item:hover:before { opacity: 1; }
    .features-small-item.active .features-title, .features-small-item:hover .features-title { color: var(--white); }
    .features-small-item.active p, .features-small-item:hover p { color: #E8FFED; }
    .features-small-item:hover { top: -15px; }
    .features-small-item .icon { width: 60px; height: 67px; margin: auto; position: relative; margin-bottom: 1.25rem; }
    .features-small-item .icon .hexagon-bg { width: 60px; height: 37px; margin-top: 15px; background: #E1F5F4; position: relative; z-index: 1; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); }
    .features-small-item .icon .hexagon-bg:before {
        content: "";
        position: absolute;
        top: -15px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 1.875rem solid transparent;
        border-right: 1.875rem solid transparent;
        border-bottom: 15px solid #E1F5F4;
    }
    .features-small-item .icon .hexagon-bg:after {
        content: "";
        position: absolute;
        bottom: -15px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-top: 15px solid #E1F5F4;
    }
    .features-small-item .icon .icon-thumbnails {
        display: block;
        height: 45px;
        line-height: 45px;
        position: absolute;
        width: 100%;
        top: -0.313rem;
        z-index: 2;
        font-size: 18px;
        color: #17C9C3;
    }
    .features-small-item .features-title {
        font-weight: 400;
        font-size: 16px;
        color: var(--text1);
        letter-spacing: 0.7px;
        margin-bottom: 15px;
        position: relative;
        z-index: 2;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .features-small-item p {
        font-weight: 400;
        font-size: 14px;
        color: #6F8BA4;
        letter-spacing: 0.88px;
        line-height: 26px;
        position: relative;
        z-index: 2;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        margin-bottom: 0px !important;
    }
/* ------------------------------------ end features ------------------------------------ */


/* ------------------------------------ features ------------------------------------ */
    .wrap-excellent-section {  }
    .excellent-section { position: relative; background: var(--white) url(../img/section-bg-right.svg) center right no-repeat !important; }
    .excellent-section .row .col-item:first-child { -ms-flex-order: 0; order: 0; }
    .excellent-section .row .col-item:last-child { -ms-flex-order: 1; order: 1; }

    .excellent-section:nth-child(even) { background: var(--white) url(../img/section-bg-left.svg) center left no-repeat !important; }
    .excellent-section:nth-child(even) .row .col-item:first-child { -ms-flex-order: 1; order: 1; }
    .excellent-section:nth-child(even) .row .col-item:last-child { -ms-flex-order: 0; order: 0; }

    @media (max-width: 768px) {
        .excellent-section:nth-child(even) .row .col-item:first-child { -ms-flex-order: 0; order: 0; }
        .excellent-section:nth-child(even) .row .col-item:last-child { -ms-flex-order: 1; order: 1; }
    }
/* ------------------------------------ end features ------------------------------------ */


/* ------------------------------------ parallax ------------------------------------ */
    .parallax { min-height: 315px; overflow: hidden; position: relative; }
    .parallax:before {
        content: "";
        position: absolute;
        width: 140%;
        height: 140%;
        opacity: 0.78;
        background-image: linear-gradient(127deg, #17BCE0 0%, #17E286 91%);
        z-index: 2;
        top: -20%;
        left: -20%;
    }
    .parallax .parallax-content { position: absolute; z-index: 3; top: 50%; transform: perspective(1px) translateY(-50%); width: 100%; }
    .parallax .parallax-content .info { text-align: center; }
    .parallax .parallax-content .info p { font-weight: 500; font-size: 22px; color: #fff; letter-spacing: 1.38px; line-height: 34px; }
    .parallax .parallax-content .api-btn-content { text-align: center; margin-top: 60px; }
    .parallax .parallax-content .api-btn-content .btn-api {
        display: inline-block;
        height: 40px;
        border: 1px solid #fff;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
        width: 160px;
        overflow: hidden;
        text-align: center;
        position: relative;
    }
    .parallax .parallax-content .api-btn-content .btn-api:hover:before { opacity: 1; }
    .parallax .parallax-content .api-btn-content .btn-api:hover i, .parallax .parallax-content .api-btn-content .btn-api:hover span { color: #17C9C3; }
    .parallax .parallax-content .api-btn-content .btn-api:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        z-index: 1;
        background: #fff;
        opacity: 0.3;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .parallax .parallax-content .api-btn-content .btn-api i {
        display: inline-block;
        height: 30px;
        line-height: 38px;
        margin-right: 5px;
        color: #fff;
        position: relative;
        z-index: 2;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .parallax .parallax-content .api-btn-content .btn-api span {
        display: inline-block;
        font-weight: 700;
        font-size: 14px;
        color: #fff;
        letter-spacing: 0.88px;
        position: relative;
        z-index: 2;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }

    .parallax-counter { min-height: 315px; overflow: hidden; position: relative; }
    .parallax-counter:before {
        content: "";
        position: absolute;
        width: 140%;
        height: 140%;
        opacity: 0.78;
        background-image: linear-gradient(127deg, #17BCE0 0%, #17E286 91%);
        z-index: 2;
        top: -20%;
        left: -20%;
    }
    .parallax-counter .parallax-content { position: absolute; z-index: 3; top: 50%; transform: perspective(1px) translateY(-50%); width: 100%; }
    .parallax-counter .parallax-content .count-item { height: 280px; position: relative; overflow: hidden; }
    .parallax-counter .parallax-content .count-item:hover strong { margin-top: 60px; }
    .parallax-counter .parallax-content .count-item strong {
        display: block;
        text-align: center;
        font-weight: 400;
        font-size: 40px;
        letter-spacing: 1.72px;
        margin-bottom: 10px;
        color: #fff;
        margin-top: 70px;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .parallax-counter .parallax-content .count-item span {
        display: block;
        text-align: center;
        color: #fff;
        font-weight: 400;
        font-size: 20px;
        letter-spacing: 0.86px;
    }

    @media (max-width: 991px) {
        .parallax { padding-top: 60px; padding-bottom: 60px; }
        .parallax .parallax-content { position: relative !important; top: 0% !important; transform: perspective(1px) translateY(0%) !important; }
        .parallax .parallax-content .api-btn-content { margin-top: 20px; }

        .parallax-counter { padding-top: 60px; padding-bottom: 60px; }
        .parallax-counter .parallax-content { position: relative !important; top: 0% !important; transform: perspective(1px) translateY(0%) !important; }
        .parallax-counter .parallax-content .count-item { height: auto; padding-top: 20px; padding-bottom: 20px; }
        .parallax-counter .parallax-content .count-item:hover strong { margin-top: 0px; }
        .parallax-counter .parallax-content .count-item:before { display: none; }
        .parallax-counter .parallax-content .count-item:after { width: 40px; height: 1px; }
        .parallax-counter .parallax-content .count-item strong { margin-top: 0px; }
    }
/* ------------------------------------ end parallax ------------------------------------ */


/* ------------------------------------ testimonials ------------------------------------ */
    .testimonials-item { display: block; position: relative; margin-bottom: 30px; }
    .testimonials-item:hover .hexagon-user { top: -30px; }
    .testimonials-item:hover .testimonials-content:before { opacity: 1; }
    .testimonials-item:hover .testimonials-content .user-name { color: #fff; }
    .testimonials-item:hover .testimonials-content span, .testimonials-item:hover .testimonials-content p { color: #E8FFED; }
    .testimonials-item .hexagon-user {
        width: 93px;
        height: 106px;
        position: relative;
        background: url(../img/hexagon-user.png) left top no-repeat;
        position: absolute;
        top: -10px;
        left: 25px;
        z-index: 3;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .testimonials-item .hexagon-user .hexagon-user-img {
        overflow: hidden;
        visibility: hidden;
        -webkit-transform: rotate(120deg);
        -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        -o-transform: rotate(120deg);
        transform: rotate(120deg);
        width: 77px;
        height: 88px;
        margin: 8px;
    }
    .testimonials-item .hexagon-user .hexagon-user-img .hexagon-in1 {
        overflow: hidden;
        width: 100%;
        height: 100%;
        -webkit-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        -o-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }
    .testimonials-item .hexagon-user .hexagon-user-img .hexagon-in1 .hexagon-in2 {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: 50%;
        visibility: visible;
        -webkit-transform: rotate(-60deg);
        -moz-transform: rotate(-60deg);
        -ms-transform: rotate(-60deg);
        -o-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }
    .testimonials-item .testimonials-content {
        background: #F9FAFF;
        overflow: hidden;
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        position: relative;
    }
    .testimonials-item .testimonials-content:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1;
        background-image: linear-gradient(135deg, #17BCE0 0%, #17E286 100%);
        opacity: 0;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .testimonials-item .testimonials-content .user-name {
        display: block;
        font-weight: 400;
        font-size: 16px;
        color: var(--text1);
        margin-top: 20px;
        padding-left: 140px;
        letter-spacing: 0.69px;
        margin-bottom: 5px;
        position: relative;
        z-index: 3;
    }
    .testimonials-item .testimonials-content span {
        display: block;
        font-weight: 400;
        font-size: 14px;
        color: #6F8BA4;
        letter-spacing: 0.6px;
        padding-left: 140px;
        padding-right: 25px;
        position: relative;
        z-index: 3;
    }
    .testimonials-item .testimonials-content p {
        padding-left: 25px;
        padding-right: 25px;
        margin-bottom: 25px;
        margin-top: 40px;
        font-weight: 400;
        font-size: 14px;
        color: #6F8BA4;
        letter-spacing: 0.6px;
        line-height: 26px;
        position: relative;
        z-index: 3;
    }
/* ------------------------------------ end testimonials ------------------------------------ */


/* ------------------------------------ pricing ------------------------------------ */
    .pricing-item { background: #FFFFFF; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); border-radius: 5px; overflow: hidden; margin-bottom: 30px; }
    .pricing-item.active .pricing-header { background-image: linear-gradient(127deg, #17BCE0 0%, #17E286 91%); }
    .pricing-item.active .pricing-header .pricing-title { color: #fff; }
    .pricing-item.active .pricing-header .number-hexagon { background: #fff; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.13); }
    .pricing-item.active .pricing-header .number-hexagon:before { border-bottom: 14px solid #fff; }
    .pricing-item.active .pricing-header .number-hexagon:after { border-top: 14px solid #fff; }
    .pricing-item.active .pricing-footer a { background: #17C9C3; color: #fff; }
    .pricing-item.active .pricing-footer a:hover { background: #fff; color: #17C9C3; }
    .pricing-item .pricing-header {
        border-bottom: 1px solid #E2EBFF;
        text-align: center;
        height: 130px;
        display: block;
        position: relative;
    }
    .pricing-item .pricing-header .pricing-title {
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 1px;
        color: var(--text1);
        position: absolute;
        width: 100%;
        top: 50%;
        transform: perspective(1px) translateY(-50%);
    }
    .pricing-item .pricing-header .number-hexagon {
        width: 48px;
        height: 28px;
        background: #E1F5F4;
        position: relative;
        bottom: -115px;
        margin: auto;
    }
    .pricing-item .pricing-header .number-hexagon:before {
        content: "";
        position: absolute;
        top: -14px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 24px solid transparent;
        border-right: 24px solid transparent;
        border-bottom: 14px solid #E1F5F4;
    }
    .pricing-item .pricing-header .number-hexagon:after {
        content: "";
        position: absolute;
        bottom: -14px;
        left: 0;
        width: 0;
        height: 0;
        border-left: 24px solid transparent;
        border-right: 24px solid transparent;
        border-top: 14px solid #E1F5F4;
    }
    .pricing-item .pricing-header .number-hexagon span { font-weight: 400; font-size: 16px; color: #17C9C3; display: block; }
    .pricing-item .pricing-body { margin-bottom: 40px; }
    .pricing-item .pricing-body .price-wrapper { text-align: center; margin-top: 60px; margin-bottom: 30px; }
    .pricing-item .pricing-body .price-wrapper .currency { height: 47px; font-weight: 500; font-size: 20px; color: #17C9C3; position: relative; top: -15px; }
    .pricing-item .pricing-body .price-wrapper .price { font-weight: 700; font-size: 34px; color: #17C9C3; letter-spacing: 2.12px; }
    .pricing-item .pricing-body .price-wrapper .period { font-weight: 700; font-size: 14px; color: #17C9C3; letter-spacing: 0.88px; }
    .pricing-item .pricing-body .list li { text-align: center; margin-bottom: 12px; font-weight: 400; font-size: 14px; color: #BCD2E6; letter-spacing: 0.88px; }
    .pricing-item .pricing-body .list li.active { color: var(--text1); }
    .pricing-item .pricing-footer { text-align: center; }
    .pricing-item .pricing-footer a {
        width: 160px;
        margin: auto;
        display: inline-block;
        height: 36px;
        line-height: 34px;
        text-align: center;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
        border: 1px solid #17C9C3;
        margin-bottom: 40px;
        font-weight: 700;
        font-size: 12px;
        background: #fff;
        color: #17C9C3;
        letter-spacing: 0.75px;
        text-transform: uppercase;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .pricing-item .pricing-footer a:hover { background: #17C9C3; color: #fff; }
/* ------------------------------------ end pricing ------------------------------------ */


/* ------------------------------------ blog ------------------------------------ */
    .blog-post-thumb { text-align: center; margin-bottom: 30px; }
    .blog-post-thumb.big .img { height: 400px; }
    .blog-post-thumb .img { overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 25px; position: relative; height: 200px; }
    .blog-post-thumb .img .date {
        position: absolute;
        right: 0px;
        bottom: 0px;
        width: 60px;
        background-image: linear-gradient(127deg, #17BCE0 0%, #17E286 91%);
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
    }
    .blog-post-thumb .img .date strong { display: block; color: #fff; height: 20px; line-height: 20px; }
    .blog-post-thumb .img .date span { display: block; color: #fff; height: 20px; line-height: 20px; }
    .blog-post-thumb h3 { margin-bottom: 10px !important; }
    .blog-post-thumb h3 a {
        font-weight: 400;
        font-size: 16px;
        color: var(--text1);
        letter-spacing: 1px;
        line-height: 26px;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .blog-post-thumb h3 a:hover { color: #17C9C3; }
    .blog-post-thumb .post-meta { overflow: hidden; }
    .blog-post-thumb .post-meta li { float: left; margin-right: 30px; height: 30px; line-height: 30px; color: #17C9C3; font-size: 14px; }
    .blog-post-thumb .post-meta li a { color: #17C9C3; }
    .blog-post-thumb .post-meta li span { display: inline-block; margin-right: 5px; }
    .blog-post-thumb .text {
        font-weight: 400;
        font-size: 14px;
        color: #6F8BA4;
        letter-spacing: 0.88px;
        line-height: 26px;
        margin-bottom: 15px;
    }
    .blog-post-thumb .text.post-detail { font-weight: 400; font-size: 16px; line-height: 28px; text-align: left; }
    .blog-post-thumb .post-footer { overflow: hidden; border-bottom: 1px solid #ECF7FF; border-top: 1px solid #ECF7FF; padding-top: 10px; padding-bottom: 10px; }
    .blog-post-thumb .post-footer span { float: left; height: 30px; line-height: 30px; font-weight: 300; font-size: 14px; color: #6F8BA4; padding-left: 30px; }
    .blog-post-thumb .post-footer ul.share { float: right; padding-right: 30px; }
    .blog-post-thumb .post-footer ul.share li { float: left; margin-left: 15px; }
    .blog-post-thumb .post-footer ul.share li a { display: block; height: 30px; line-height: 30px; color: #17C9C3; }
    .blog-post-thumb .btn-primary-line { margin: auto; }

    .blog-list .blog-post-thumb {
        margin-bottom: 60px;
        text-align: left;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    .blog-list .blog-post-thumb .img {
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        -webkit-border-top-left-radius: 5px !important;
        -webkit-border-top-right-radius: 5px !important;
        -moz-border-radius-topleft: 5px !important;
        -moz-border-radius-topright: 5px !important;
        border-top-left-radius: 5px !important;
        border-top-right-radius: 5px !important;
    }
    .blog-list .blog-post-thumb h3 { padding-left: 30px; padding-right: 30px; }
    .blog-list .blog-post-thumb .post-meta { padding-left: 30px; padding-right: 30px; }
    .blog-list .blog-post-thumb .text { padding-left: 30px; padding-right: 30px; }
    .blog-list .blog-post-thumb .btn-primary-line { float: left; margin-left: 30px; margin-right: 30px; margin-bottom: 30px; }

    .section-comments {
        margin-bottom: 60px;
        background: #fff;
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 30px;
        padding-bottom: 0px;
    }
    .section-comments ul { overflow: hidden; margin: 0px; padding: 0px; }
    .section-comments ul li { overflow: hidden; }
    .section-comments ul li .avatar {
        width: 70px;
        height: 70px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
        overflow: hidden;
        float: left;
        margin-right: 20px;
    }
    .section-comments ul li .comment-content {
        font-weight: 400;
        font-size: 14px;
        color: #6F8BA4;
        float: left;
        width: calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }
    .section-comments ul li .comment-content .comment-by { margin-bottom: 10px; position: relative; }
    .section-comments ul li .comment-content .comment-by strong { display: block; color: var(--text1); }
    .section-comments ul li .comment-content .comment-by span { font-size: 12px; }
    .section-comments ul li .comment-content .comment-by .btn-reply {
        position: absolute;
        right: 0px;
        top: 15px;
        background: #F4F8FB;
        color: #6F8BA4;
        height: 25px;
        line-height: 25px;
        padding-left: 10px;
        padding-right: 10px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .section-comments ul li .comment-content .comment-by .btn-reply i { font-size: 12px; }
    .section-comments ul li .comment-content .comment-by .btn-reply:hover { background: #17C9C3; color: #fff; }
    .section-comments ul li ul { padding-left: 90px; }

    .post-comment {
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 30px;
        padding-bottom: 0px;
        margin-bottom: 30px;
    }
    .post-comment .comment-form .form-item { margin-bottom: 20px; }
    .post-comment .comment-form .form-item label { display: block; text-transform: uppercase; font-weight: 500; font-size: 14px; margin-bottom: 0px; }
    .post-comment .comment-form .form-item input, .post-comment .comment-form .form-item textarea {
        border: 1px solid #eee;
        width: 100%;
        height: 50px;
        outline: none;
        padding-left: 20px;
        padding-right: 20px;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    .post-comment .comment-form .form-item input:focus, .post-comment .comment-form .form-item textarea:focus { border: 1px solid #ddd; }
    .post-comment .comment-form .form-item textarea { height: 150px; resize: none; padding: 20px; }

    .pagination { margin-bottom: 30px; }
    .pagination .page-item a { font-size: 14px; color: #17C9C3; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
    .pagination .page-item a:hover { background: #F4F8FB; }

    @media (max-width: 991px) {
        .blog-post-thumb.big .img { height: 350px; }
    }
    @media (max-width: 420px) {
        .blog-post-thumb.big .img { height: 200px; }
    }
/* ------------------------------------ end blog ------------------------------------ */


/* ------------------------------------ footer ------------------------------------ */
    .footer-section { position: relative; overflow: hidden; background: var(--light); padding-top: 5rem; padding-bottom: 3.75rem; }
    .footer-section .wrap-content { text-align: center; }
    .footer-section .logo { display: block; margin-bottom: 0.625rem; }
    .footer-section .logo img { object-fit: contain; max-width: 250px; }
    .footer-section .description { font-weight: normal; color: var(--text1); line-height: 160%; }
    .footer-section .social-media { justify-content: center; margin-top: 1.25rem; }
    .footer-section .social-media .social-icon { font-size: 1.625rem; }
    .footer-section .copyright { margin-top: 1.875rem; }

    @media (max-width: 480px) {
        .footer-section .logo img { max-width: 190px; }
        .footer-section .social-media .social-icon { font-size: 1.25rem; }
    }
/* ------------------------------------ end footer ------------------------------------ */


/* ------------------------------------ page ------------------------------------ */
    .page { background: #fff; }
    .page .cover { margin-top: 80px; min-height: 270px; position: relative; overflow: hidden; }
    .page .cover:before {
        content: "";
        position: absolute;
        width: 140%;
        height: 140%;
        left: -20%;
        top: -20%;
        right: -20%;
        bottom: -20%;
        background-image: linear-gradient(127deg, #17BCE0 0%, #17E286 91%);
        z-index: 2;
        opacity: 0.7;
    }
    .page .cover .page-top { position: absolute; width: 100%; bottom: 50px; z-index: 3; }
    .page .cover .page-top h1 { font-weight: 400; font-size: 36px; line-height: 46px; letter-spacing: 1.4px; color: #fff; text-align: center; }
    .page .cover .page-top .breadcrumb {
        float: none;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        background: none;
        padding: 0px;
        margin-top: 8px;
        margin-bottom: 0px;
        display: block;
        text-align: center;
    }
    .page .cover .page-top .breadcrumb li {
        font-weight: 400;
        font-size: 14px;
        color: #E8FFED;
        line-height: 30px;
        margin-left: 10px;
        display: inline-block;
    }
    .page .cover .page-top .breadcrumb li:after {
        font-family: FontAwesome;
        content: "\f105";
        margin-left: 10px;
        color: #E8FFED;
    }
    .page .cover .page-top .breadcrumb li:first-child { margin-left: 0px; }
    .page .cover .page-top .breadcrumb li:last-child:after { content: ""; margin-left: 0px; }
    .page .cover .page-top .breadcrumb li a { font-weight: 400; font-size: 14px; color: #fff; }
    .page .page-bottom {
        padding-top: 100px;
        padding-bottom: 70px;
        font-weight: 400;
        font-size: 16px;
        letter-spacing: 0.88px;
        line-height: 28px;
        color: #6F8BA4;
    }
    .page .page-bottom p { margin-bottom: 28px; }
    .page .page-bottom .about { position: relative; float: left; width: 100%; margin-bottom: 100px; }
    .page .page-bottom .about.left .about-image { float: right; }
    .page .page-bottom .about.left .about-text { left: 0px; }
    .page .page-bottom .about .about-image {
        position: relative;
        width: 70%;
        float: left;
        height: 500px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
        z-index: 1;
    }
    .page .page-bottom .about .about-text {
        position: absolute;
        z-index: 2;
        width: 40%;
        float: right;
        right: 0px;
        top: 50%;
        transform: perspective(1px) translateY(-50%);
        background: #fff;
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 30px;
        padding-bottom: 10px;
    }
    .page .page-bottom .about .about-text h2 {
        font-weight: 400;
        font-size: 24px;
        line-height: 38px;
        letter-spacing: 1.75px;
        color: var(--text1);
        margin-bottom: 20px;
    }
    .page .page-bottom .about .about-text p { font-weight: 400; font-size: 14px; line-height: 26px; margin-bottom: 20px; }
    .page .page-bottom .features-small-item { background: #fff; }
    .page .page-bottom .page-detail .image { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin-bottom: 30px; overflow: hidden; }

    @media (max-width: 991px) {
        .page .cover { margin-top: 80px; }
        .page .cover h1 { font-size: 26px !important; line-height: 36px !important; }
        .page .cover .page-top { text-align: center; }
        .page .cover .page-top .breadcrumb { float: none; text-align: center; display: block; }
        .page .cover .page-top .breadcrumb li { display: inline; }
        .page .page-bottom .about { overflow: initial !important; margin-bottom: 30px !important; }
        .page .page-bottom .about .about-image { width: 100% !important; height: 300px; }
        .page .page-bottom .about .about-text {
            position: relative !important;
            width: 100% !important;
            top: 0% !important;
            transform: perspective(1px) translateY(0%) !important;
            box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
        }
    }
/* ------------------------------------ end page ------------------------------------ */


/* ------------------------------------ faq ------------------------------------ */
    .accordion { background: #FFFFFF; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); border-radius: 4px; }
    .accordion .accordion-item { border: none; background: none; border-bottom: 1px dashed #CEE1F8; }
    .accordion .accordion-item .accordion-header {
        padding: 0px;
        border: none;
        background: none;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    .accordion .accordion-item .accordion-header:hover { background: #E1F5F4; padding-left: 10px; }
    .accordion .accordion-item .accordion-header .accordion-button {
        width: 100%;
        text-align: left;
        padding: 0px;
        padding-left: 30px;
        padding-right: 30px;
        font-weight: 500;
        font-size: 15px;
        letter-spacing: 1px;
        color: var(--text1);
        text-decoration: none !important;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        cursor: pointer;
        padding-top: 20px;
        padding-bottom: 20px;
        box-shadow: none !important;
    }
    .accordion .accordion-item .accordion-header .accordion-button:after { background: none !important; }
    .accordion .accordion-item .accordion-header .accordion-button .badge {
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 14px;
        float: left;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
        text-align: center;
        background: #17C9C3;
        color: #fff;
        font-size: 12px;
        margin-right: 20px;
    }
    .accordion .accordion-item .accordion-body {
        padding: 30px;
        padding-left: 35px;
        padding-bottom: 16px;
        font-weight: 400;
        font-size: 16px;
        color: #6F8BA4;
        line-height: 28px;
        letter-spacing: 1px;
        border-top: 1px solid #F3F8FF;
    }
    .accordion .accordion-item .accordion-body p { margin-bottom: 14px; }

    @media (max-width: 991px) {
        .accordion { margin-bottom: 30px; }
        .accordion .accordion-item .accordion-header .accordion-button { line-height: 26px; margin-top: 10px; }
    }
/* ------------------------------------ end faq ------------------------------------ */


/* ------------------------------------ aside ------------------------------------ */
    aside.default-aside {
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    aside.default-aside .sidebar ul {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
        overflow: hidden;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        margin-bottom: 30px;
    }
    aside.default-aside .sidebar ul li.active a { background: #17C9C3; color: #fff; }
    aside.default-aside .sidebar ul li.active a:after { color: #fff; }
    aside.default-aside .sidebar ul li.active a:hover { padding-left: 60px; }
    aside.default-aside .sidebar ul li:last-child a { border: none; }
    aside.default-aside .sidebar ul li a {
        display: block;
        border-bottom: 1px dashed #ECF7FF;
        height: 59px;
        line-height: 59px;
        padding-left: 59px;
        position: relative;
        font-weight: 400;
        font-size: 14px;
        color: var(--text1);
        letter-spacing: 0.88px;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        position: relative;
    }
    aside.default-aside .sidebar ul li a:hover { padding-left: 70px; }
    aside.default-aside .sidebar ul li a:after { font-family: FontAwesome; content: "\f105"; position: absolute; left: 30px; color: var(--text1); }
    aside.default-aside .sidebar ul li a span {
        float: right;
        margin-right: 30px;
        display: inline-block;
        background: #E1F5F4;
        height: 20px;
        line-height: 20px;
        padding-left: 10px;
        padding-right: 10px;
        font-size: 10px;
        color: #6F8BA4;
        margin-top: 18px;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        border-radius: 100px;
    }
    aside.default-aside .sidebar .search-widget { display: block; margin-bottom: 30px; height: 50px; position: relative; }
    aside.default-aside .sidebar .search-widget input {
        border: 1px solid #fff;
        position: absolute;
        width: 100%;
        height: 100%;
        outline: none;
        padding-left: 20px;
        padding-right: 50px;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background: #fff;
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
    }
    aside.default-aside .sidebar .search-widget input:focus { border: 1px solid #17C9C3; padding-left: 30px; }
    aside.default-aside .sidebar .search-widget button {
        position: absolute;
        z-index: 2;
        right: 10px;
        top: 10px;
        height: 30px;
        width: 30px;
        border: none;
        background-image: linear-gradient(127deg, #17BCE0 0%, #17E286 91%);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        outline: none;
        cursor: pointer;
        text-align: center;
        padding: 0px;
    }
    aside.default-aside .sidebar .search-widget button i { color: #fff; }
    aside.default-aside .sidebar .widget-tags {
        padding: 30px;
        padding-bottom: 20px;
        overflow: hidden;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
    }
    aside.default-aside .sidebar .widget-tags a {
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
        background: #E1F5F4;
        padding-left: 10px;
        padding-right: 10px;
        font-weight: 400;
        font-size: 14px;
        color: #6F8BA4;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    aside.default-aside .sidebar .widget-tags a:hover { background: #17C9C3; color: #fff; }
/* ------------------------------------ end aside ------------------------------------ */


/* ------------------------------------ contact ------------------------------------ */
    .contact { float: left; width: 100%; position: relative; }
    .contact .map-wrapper {
        position: relative;
        width: 80%;
        float: left;
        height: 500px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
        z-index: 1;
    }
    .contact .map-wrapper .map-canvas { width: 100%; height: 100%; }
    .contact .contact-info {
        position: absolute;
        z-index: 2;
        width: 30%;
        float: right;
        right: 0px;
        top: 50%;
        transform: perspective(1px) translateY(-50%);
        background-image: linear-gradient(135deg, #17BCE0 0%, #17E286 100%);
        box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 30px;
        padding-bottom: 10px;
    }
    .contact .contact-info .item { overflow: hidden; margin-bottom: 30px; color: #fff; }
    .contact .contact-info .item i { float: left; font-size: 16px; width: 20px; margin-right: 10px; margin-top: 5px; }
    .contact .contact-info .item span { float: left; width: calc(100% - 30px); width: -webkit-calc(100% - 30px); font-size: 14px; }
    .contact .contact-info .item span a { color: #fff; }
    .contact .contact-info .social { overflow: hidden; margin-top: 5px; text-align: center; margin-bottom: 20px; }
    .contact .contact-info .social li { display: inline; font-size: 22px; margin-right: 7px; margin-left: 7px; }
    .contact .contact-info .social li a { color: #fff; }

    .contact-bottom { border-top: 1px solid #f5f5f5; margin-top: 60px; padding-top: 60px; }
    .contact-bottom .contact-text { font-weight: 400; font-size: 14px; color: #6F8BA4; letter-spacing: 0.6px; line-height: 26px; }
    .contact-bottom .contact-text p { margin-bottom: 28px; }
    .contact-bottom .contact-form input, .contact-bottom .contact-form textarea {
        border: 1px solid #eee;
        width: 100%;
        height: 50px;
        outline: none;
        padding-left: 20px;
        padding-right: 20px;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin-bottom: 30px;
    }
    .contact-bottom .contact-form input:focus, .contact-bottom .contact-form textarea:focus { border: 1px solid #17C9C3; padding-left: 30px; }
    .contact-bottom .contact-form textarea { height: 150px; resize: none; padding: 20px; }
    .contact-bottom .contact-form .btn-primary-line { margin-bottom: 0px !important; }

    @media (max-width: 991px) {
        .contact { overflow: initial !important; margin-bottom: 30px !important; }
        .contact .map-wrapper { width: 100% !important; height: 300px; margin-bottom: 30px; }
        .contact .contact-info { position: relative !important; width: 100% !important; top: 0% !important; transform: perspective(1px) translateY(0%) !important; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); }

        .contact-bottom { margin-top: 30px; padding-top: 30px; }
    }
/* ------------------------------------ end contact ------------------------------------ */


/* ------------------------------------ dashboard ------------------------------------ */
    .dash-section { position: relative; overflow: hidden; min-height: calc(80vh); }
    .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; }
    .dash-section .dash-sidebar .nav-item:not(:last-child) { margin-right: 0; border-bottom: 1px solid var(--light); }
    .dash-section .dash-sidebar .nav-item .nav-link { position: relative; overflow: hidden; text-align: left; text-transform: capitalize; font-weight: 600; color: var(--dark); padding: 0.938rem; border-radius: 0.5rem; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
    .dash-section .dash-sidebar .nav-item .nav-link.active { 
        color: var(--white) !important; 
        background-color: #17BCE0;
        background-image: -moz-linear-gradient(130deg, #17BCE0 0%, #17E286 100%);
        background-image: -ms-linear-gradient(130deg, #17BCE0 0%, #17E286 100%);
        background-image: -webkit-linear-gradient(130deg, #17BCE0 0%, #17E286 100%);
        background-image: -o-linear-gradient(130deg, #17BCE0 0%, #17E286 100%);
        background-image: linear-gradient(130deg, #17BCE0 0%, #17E286 100%); 
        -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease;
    }
    .dash-section .dash-sidebar .nav-item .nav-link:hover,
    .dash-section .dash-sidebar .nav-item .nav-link:focus { 
        color: var(--dark); 
        background-color: var(--light);
        -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -ms-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease;
    }
    .dash-section .dash-sidebar .nav-item .nav-link .nav-icon { margin-right: 0.625rem; }
    .dash-section .dash-sidebar .nav-item .nav-link .nav-text { font-weight: 500; }

    .dash-section .dash-content {  }

    @media (max-width: 991px) {
        .dash-section .card-sidebar { margin-bottom: 1.875rem; overflow: hidden; }
        .dash-section .card-sidebar .card-body { padding: 0; }
        .dash-section .dash-sidebar { 
            width: 100%;
            height: 45px;
            white-space: nowrap;
            -ms-flex-direction: row;
            flex-direction: row;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            overflow-y: hidden;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: none;
            scrollbar-width: none;
            border-bottom: 1px solid var(--light);
        }
        .dash-section .dash-sidebar::-webkit-scrollbar { display: none; }
        .dash-section .dash-sidebar .nav-item:not(:last-child) { border-bottom: 0; border-right: 1px solid var(--light); }
        .dash-section .dash-sidebar .nav-item .nav-link { width: 10rem; border-radius: 0; padding: 0.625rem 1.375rem }
    }
    @media (max-width: 768px) {
        .dash-section .dash-sidebar .nav-item .nav-link { width: 65px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
        .dash-section .dash-sidebar .nav-item .nav-link.active { width: 100%; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
        .dash-section .dash-sidebar .nav-item .nav-link .nav-text { opacity: 0; font-size: 1rem; }
        .dash-section .dash-sidebar .nav-item .nav-link.active .nav-text { opacity: 1; }
        .dash-section .dash-sidebar .nav-item .nav-link .nav-icon { font-size: 1.125rem; }
    }

    .card-widget { position: relative; overflow: hidden; }
    .card-widget .text { font-size: 0.875rem; line-height: 1.5; color: var(--text1); }
    .card-widget .number { font-weight: bold; font-size: 1.75rem; line-height: 1.7; color: var(--dark); }

    .card-widget.card-widget-post-scroll .card-body {
        position: relative;
        height: 23.75rem;
        display: -ms-flexbox; 
        display: flex;
        -ms-flex-direction: row;
        flex-direction: row;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .card-widget.card-widget-post-scroll .card-body::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; cursor: pointer; }
    .card-widget.card-widget-post-scroll .card-body::-webkit-scrollbar-track { background: transparent; }
    .card-widget.card-widget-post-scroll .card-body::-webkit-scrollbar-thumb { background: rgba(28, 104, 163, 0); opacity: 0; border-radius: 1.25rem; -webkit-box-shadow: inset 0 0.313rem 0.5rem rgba(0, 0, 0, 0.12); -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; }
    .card-widget.card-widget-post-scroll .card-body:hover::-webkit-scrollbar-thumb { background: rgba(28, 104, 163, 1); opacity: 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; }
    .card-widget.card-widget-post-scroll .card-body::-webkit-scrollbar-thumb:horizontal:hover,
    .card-widget.card-widget-post-scroll .card-body::-webkit-scrollbar-thumb:vertical:hover { background: rgba(28, 104, 163, 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; }
/* ------------------------------------ end dashboard ------------------------------------ */


/* ------------------------------------ link ------------------------------------ */
    .card-link { overflow: hidden; border: 1px solid var(--border); border-radius: 0.5rem; cursor: pointer; }
    .card-link .card-body { padding: 0.625rem; display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; }
    .card-link .card-body .dragable-area { flex: 0 0 0.938rem; margin-right: 0.625rem; height: 100%; /*border: 1px solid yellow;*/ }
    .card-link .card-body .dragable-area img { max-width: 100%; max-height: 1.563rem; margin: auto; }

    .card-link .card-body .thumbnails-area { flex: 0 0 2.5rem; margin-right: 0.625rem; }
    .card-link .card-body .thumbnails-area img { width: 2.5rem; height: 2.5rem; object-fit: contain; border-radius: 0.25rem; }

    .card-link .card-body .content-area { width: 100%; margin-right: 0.313rem; /*border: 1px solid pink;*/ }

    .card-link .card-body .delete-area { position: relative; margin-right: 0.75rem; }
    .card-link .card-body .delete-area .icon { font-size: 1.25rem; color: var(--text2); }

    .card-link .card-body .switch-area { flex: 0 0 3rem; overflow: hidden; /*border: 1px solid aqua;*/ }


    .wrap-input-link { position: relative; overflow: hidden; width: 100%; }
    .wrap-input-link .icon { position: absolute; top: 3px; right: 5px; background: var(--white); border-radius: 0.25rem; padding: 2px; opacity: 0; transition: opacity 0.4s; }
    .wrap-input-link:hover .icon { opacity: 1; }

    .wrap-input-link .form-input-link { cursor: pointer; border: 0 !important; text-decoration: none !important; height: calc(0.625rem + 0.75rem + 2px); padding: 0.313rem 0; }
    .wrap-input-link.title .form-input-link { font-weight: bold !important; }
    .wrap-input-link.url .form-input-link { padding-left: 20px; font-weight: normal !important; }
    .wrap-input-link.url .icon-url { position: absolute; top: 4px; left: 0; z-index: 10; }


    /*switch style*/
    .switch-style { position: relative; display: inline-block; }
    .switch-input { display: none; }
    .switch-label {
        display: block;
        width: 45px;
        height: 22px;
        text-indent: -150%;
        clip: rect(0 0 0 0);
        color: transparent;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .switch-label:before, .switch-label:after { content: ''; display: block; position: absolute; cursor: pointer; }
    .switch-label:before { width: 100%; height: 100%; background-color: var(--border); border-radius: 9999em; transition: background-color 0.25s ease; }
    .switch-label:after { top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background-color: var(--white); box-shadow: 0 0 2px rgba(0, 0, 0, 0.45); transition: left 0.25s ease; }
    .switch-input:checked + .switch-label {  }
    .switch-input:checked + .switch-label:before { background-color: var(--accent); }
    .switch-input:checked + .switch-label:after { left: 25px; }


    /*apperance item*/
    .apperance-item { position: relative; margin-bottom: 0.938rem; }
    .apperance-item .apperance-item-header { position: relative; display: block; border-color: transparent; padding: 0.625rem 0; font-weight: bold; color: var(--dark) !important; -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; }
    .apperance-item .apperance-item-header.collapsed { border-bottom: 1px solid var(--light); }
    .apperance-item .apperance-item-header::before { font-family: 'feather'; content: "\e842"; position: absolute; right: 0; font-weight: 900; color: var(--dark); }
    .apperance-item .apperance-item-header.collapsed::before { content: "\e844"; }
    .apperance-item .apperance-item-body { overflow: hidden; border: 1px solid var(--light); border-radius: 0.5rem; padding: 0.625rem; }


    /*card banner*/
    .card-banner { position: relative; overflow: hidden; width: 100%; height: 240px; background: var(--light); border: 1px solid var(--light); border-radius: 0.5rem; }
    .card-banner img { object-fit: cover; object-position: center; width: 100%; height: 100%; }
    .card-banner .wrap-action-switch { position: absolute; bottom: 1.25rem; right: 1.25rem; }
    .card-banner .icon-edit-banner { position: absolute; top: 1.25rem; right: 1.25rem; background: var(--white); border-radius: 0.25rem; width: 1.875rem; height: 1.875rem; text-align: center; }
    .card-banner .icon-edit-banner i { font-size: 18px; line-height: 1.7; }


    /*apperance radio*/
    .apperance-radio { position: relative; width: 100%; height: 100%; }
    .apperance-radio .radio-tile {
        position: relative;
        text-align: center;
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
        border: 1px solid var(--light);
        padding: 3px;
    }
    .apperance-radio .radio-tile:before { 
        font-family: 'feather'; 
        content: "\e83f"; 
        position: absolute; 
        top: -10px; 
        right: -10px; 
        width: 30px; 
        height: 30px; 
        border-radius: 50%; 
        background: var(--second); 
        font-size: 1.25rem; 
        color: var(--white); 
        z-index: 9;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
    }
    .apperance-radio .radio-tile .radio-image { object-fit: contain; margin: auto; width: 100%; border-radius: 0.5rem; margin-bottom: 0.625rem; }
    .apperance-radio .radio-tile .radio-label { font-weight: 600; font-size: 0.875rem; line-height: 1.3; margin-bottom: 0.625rem; }
    .apperance-radio .radio-button { z-index: 2; opacity: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; cursor: pointer; }
    .apperance-radio .radio-button:checked + .radio-tile { border: 1px solid var(--accent); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
    .apperance-radio .radio-button:checked + .radio-tile:before { opacity: 1; visibility: visible; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

    .apperance-radio .apperance-radio-background { position: relative; overflow: hidden; border-radius: 0.5rem; height: 140px; }
    .apperance-radio .apperance-radio-background img { object-fit: cover; object-position: center; width: 100%; height: 140px; }

    .apperance-radio .apperance-radio-font { font-size: 1.75rem; }


    .link-preview-profile { 
        /*border: 1px solid var(--light); */
        padding: 0.5rem 0.625rem; 
        border-radius: 0.5rem; 
        margin-bottom: 0.5rem; 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        background-color: #17BCE0;
        background-image: -moz-linear-gradient(130deg, #17BCE0 0%, #17E286 100%);
        background-image: -ms-linear-gradient(130deg, #17BCE0 0%, #17E286 100%);
        background-image: -webkit-linear-gradient(130deg, #17BCE0 0%, #17E286 100%);
        background-image: -o-linear-gradient(130deg, #17BCE0 0%, #17E286 100%);
        background-image: linear-gradient(130deg, #17BCE0 0%, #17E286 100%); 
    }
    .link-preview-profile .link-text { font-weight: normal; font-size: 0.875rem; margin-right: 0.5rem; max-width: 90%; overflow: hidden; }
    .link-preview-profile .link-text span { font-weight: bold; display: inline-block; color: var(--white); }
    .link-preview-profile a { color: var(--white); }
    .link-preview-profile a:hover, .link-preview-profile a:focus { text-decoration: underline !important; color: var(--white); }

    .link-preview-profile .dropdown .toggle { display: inline-flex; align-items: center; justify-content: center; border-radius: 0.313rem; background: none; width: 1.875rem; height: 1.875rem; font-size: 1.25rem; line-height: 1; color: var(--white); }
    .link-preview-profile:hover .dropdown .toggle { background: var(--light); color: var(--text2); }

    .dropdown-style .dropdown-menu { 
        margin-top: 0; 
        border: none; 
        border-radius: 0.5rem; 
        padding: 0.938rem;
        background: var(--white); 
        -webkit-box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.072);
        -moz-box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.072);
        -ms-box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.072);
        box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.072);
    }
    .dropdown-style .dropdown-item { padding: 0.25rem; border-radius: 0.313rem; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
    .dropdown-style .dropdown-item:hover, .dropdown-style .dropdown-item:focus { text-decoration: none !important; background: var(--light); }
    .dropdown-style .dropdown-item .item-text {
        font-weight: normal;
        font-size: 1rem;
        line-height: 1.3;
        color: var(--dark);
        -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;
    }
    .dropdown-style .dropdown-item:hover .item-text { color: var(--black); }
/* ------------------------------------ end link ------------------------------------ */
    

/* ------------------------------------ preview profile ------------------------------------ */
    .device-preview-section { position: relative; overflow: hidden; background: var(--light); }

    .wrap-device-preview { position: relative; overflow: hidden; width: 100%; min-height: 100vh; }
    .wrap-device-preview .prv-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: var(--light); }
        
    .live-preview { position: relative; overflow: hidden; margin: auto; max-width: 80%; min-height: auto; max-height: 616px; }
    .live-preview .prv-frame-mobile { position: relative; z-index: 10; }
    .live-preview .prv-content-profile { position: absolute; top: 0; left: 0; width: 100%; height: 616px; padding: 12px 10px; border-radius: 68px; overflow: hidden; }
    .live-preview .scroll-mobile-offside {
        z-index: 30;
        position: relative;
        height: 100%;
        display: -ms-flexbox; 
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .live-preview .scroll-mobile-offside::-webkit-scrollbar { display: none; }
    .live-preview .prv-background { position: absolute; }

    @media (max-width: 1400px) {
        .live-preview { max-width: 90%; max-height: 585px; }
        .live-preview .prv-content-profile { height: 585px; }
    }

    @media (max-width: 1200px) {
        .live-preview { max-width: 95%; max-height: 512px; background: red; }
        .live-preview .prv-content-profile { height: 512px; }
    }

    @media (max-width: 992px) {
        .live-preview { display: none; }
    }

    .prv-content { position: relative; z-index: 5; max-width: 42.5rem; margin: auto; padding: 2.5rem 0.625rem; text-align: center; }
    .prv-content .prv-banner { object-fit: contain; width: 100%; border-radius: 0.313rem; overflow: hidden; margin: 0.938rem 0; z-index: 15; }
    .prv-content .prv-photo { position: relative; margin: auto; width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; object-position: center; margin-bottom: 0.938rem; z-index: 15; }
    .prv-content .prv-profile { position: relative; font-weight: bold; font-size: 1rem; margin-bottom: 0.313rem; z-index: 15; }
    .prv-content .prv-bio { position: relative; font-weight: normal; font-size: 0.875rem; z-index: 15; margin-bottom: 0.925rem; }
    .prv-content .prv-link { margin-top: 1.25rem; }

    .prv-wrap-social-media { margin-top: 0.938rem; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
    .prv-social-media { padding: 0 0.625rem; width: 3.125rem; color: var(--dark); margin-bottom: 0.625rem; }
    .prv-social-media:hover, .prv-social-media:focus { color: var(--dark); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; -o-transition: transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; }
    .prv-social-media .prv-icon { font-size: 1.375rem; }

    .prv-btn { 
        position: relative;
        overflow: hidden;
        display: inline-block;
        width: 100%;
        padding-top: 1.125rem; 
        padding-bottom: 1.125rem;
        border: 1px solid var(--border);
        background: var(--white); 
        -webkit-border-radius: 0.625rem;
        -moz-border-radius: 0.625rem;
        -ms-border-radius: 0.625rem;
        border-radius: 0.625rem;
        -webkit-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        -moz-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        -ms-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        font-size: 0.875rem; 
        line-height: 1.2; 
        color: var(--dark); 
        margin-bottom: 0.938rem;
        z-index: 15;
    }
    /*.prv-btn .prv-btn-sm { padding-top: 0.313rem; padding-bottom: 0.313rem; }*/
    .sample-text { font-size: 12px; width: 100px; }
    .prv-btn:hover, .prv-btn:focus { color: inherit; outline: 0; box-shadow: none; }
    .prv-btn .prv-btn-thumbnails { position: absolute; top: 6px; left: 6px; width: 40px; height: 40px; border-radius: 0.625rem; overflow: hidden; object-fit: contain; margin-right: 0.5rem; }


    .button-style-1 { 
        background: transparent; 
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
        border: 1px solid var(--border); 
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
    }
    .button-style-1 .prv-btn-thumbnails { border-radius: 0; }

    .button-style-2 { 
        background: transparent; 
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
        border: 1px solid var(--border); 
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        -ms-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }
    .button-style-2 .prv-btn-thumbnails { border-radius: 0.5rem; }

    .button-style-3 { 
        background: transparent; 
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
        border: 1px solid var(--border); 
        -webkit-border-radius: 1.563rem;
        -moz-border-radius: 1.563rem;
        -ms-border-radius: 1.563rem;
        border-radius: 1.563rem;
    }
    .button-style-3 .prv-btn-thumbnails { border-radius: 50%; }

    .button-style-4 { 
        background: transparent; 
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
        border: 1px solid var(--border); 
        -webkit-border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;
        -moz-border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;
        -ms-border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;
        border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;
    }
    .button-style-4 .prv-btn-thumbnails { left: 18px; border-radius: 50px 50px 50px 50px/25px 25px 25px 25px; }

    .button-style-5 { 
        background: transparent; 
        -webkit-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        -moz-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        -ms-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        border: 1px solid transparent; 
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
    }
    .button-style-6 { 
        background: transparent; 
        -webkit-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        -moz-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        -ms-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        border: 1px solid transparent; 
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        -ms-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }
    .button-style-7 { 
        background: transparent; 
        -webkit-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        -moz-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        -ms-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        border: 1px solid transparent; 
        -webkit-border-radius: 1.25rem;
        -moz-border-radius: 1.25rem;
        -ms-border-radius: 1.25rem;
        border-radius: 1.25rem;
    }
    .button-style-8 { 
        background: transparent; 
        -webkit-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        -moz-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        -ms-box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        box-shadow: 0 0.212rem 0.5rem rgba(0, 0, 0, 0.055);
        border: 1px solid transparent; 
        -webkit-border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;
        -moz-border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;
        -ms-border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;
        border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;
    }

    .button-style-9 { 
        background: var(--light); 
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent; 
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        border-radius: 0;
    }
    .button-style-10 { 
        background: var(--light); 
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent; 
        -webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        -ms-border-radius: 0.5rem;
        border-radius: 0.5rem;
    }
    .button-style-11 { 
        background: var(--light); 
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent; 
        -webkit-border-radius: 1.25rem;
        -moz-border-radius: 1.25rem;
        -ms-border-radius: 1.25rem;
        border-radius: 1.25rem;
    }
    .button-style-12 { 
        background: var(--light); 
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        -ms-box-shadow: none;
        box-shadow: none;
        border: 1px solid transparent; 
        -webkit-border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;
        -moz-border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;
        -ms-border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;
        border-radius: 50px 50px 50px 50px/25px 25px 25px 25px;
    }
/* ------------------------------------ end preview profile ------------------------------------ */


/* ------------------------------------ jconfirm ------------------------------------ */
    .jc-box {
        position: absolute;
        display: inline;
        text-align: center;
        width: 180px;
        height: auto;
        color: var(--text1);
        font-size: 0.875rem;
        background: var(--white);
        padding: 10px;
        opacity: 0;
        z-index: 999;
        border-radius: 0.5rem;
        box-shadow: 0 0 6.25rem rgba(0, 0, 0, 0.0986943);
    }

    .jc-question { }

    .jc-btn-wrap { margin-top: 1.1em; display: flex; align-items: center; justify-content: space-between; }

    .jc-yes, .jc-no {
        cursor: pointer;
        display: inline-block;
        border-radius: 0.313rem;
        font-size: 0.813rem;
        width: 70px;
        padding: 0.313em 0.4em;
        box-shadow: 0px 2px 4px -3px rgba(0, 0, 0, 0.4), 0px 1.4em 2em -0.7em rgba(255, 255, 255, 0.2) inset;
    }
    /*.jc-yes { background: #5cb85c; margin-left: -0.5em; }
    .jc-no { background: #c9302c; margin: 0 -0.5em 0 1em; }*/
    /*.jc-yes:hover, .jc-no:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }*/
/* ------------------------------------ end jconfirm ------------------------------------ */


/* ------------------------------------ loader ------------------------------------ */
    .scroll-top {
        position: fixed;
        right: 15px;
        bottom: 0;
        width: 40px;
        height: 40px;
        padding: 11px 0;
        font-size: 1.4rem;
        color: #fff;
        text-align: center;
        line-height: 1.3;
        border-radius: 0.3rem 0.3rem 0 0;
        visibility: hidden;
        opacity: 0;
        transition: transform 0.3s, visibility 0.3s, opacity 0.3s;
        transform: translateY(40px);
        z-index: 9999;
        background-color: #43494e;
    }
    .scroll-top:hover { color: #fff; }

    @media (min-width: 768px) {
        .scroll-top.show { visibility: visible; opacity: 0.7; transform: translateY(0); }
    }

    .loading:not(.load-more-overlay),
    .load-more-overlay.loading::after {
        animation: spin 750ms infinite linear;
        border: 2px solid transparent;
        border-radius: 32px;
        border-top: 2px solid var(--accent) !important;
        border-right: 2px solid rgba(15, 128, 64, 0.4) !important;
        border-bottom: 2px solid var(--accent) !important;
        border-left: 2px solid rgba(15, 128, 64, 0.4) !important;
        content: '';
        display: block;
        height: 22px;
        width: 22px;
        margin-top: -10px;
        margin-left: -10px;
        position: absolute;
        top: 50%;
        left: 50%;
        right: auto;
        z-index: 5;
    }
    .load-more-overlay.loading::after { content: ''; }
    .load-more-overlay { position: relative; }
    .load-more-overlay::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: var(--white);
        opacity: 0.65;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(359deg); }
    }


    .preloader-wrapper { position: fixed; width: 100%; height: 100%; z-index: 9999; background: #F7FAFD; }

    .slice {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 30px;
        border: 30px solid transparent;
        border-left-width: 17px;
        border-right-width: 17px;
        border-top-color: #17C9C3;
        transform: translate(-50%, -50%);
    }
    .slice:nth-child(1) { border-top-color: #17c9c3; transform: translate(-50%, -50%) rotate(0deg) scale(0); animation: sparkleLoad-1 2s 0.07s infinite; }
    .slice:nth-child(2) { border-top-color: #17b1c9; transform: translate(-50%, -50%) rotate(60deg) scale(0); animation: sparkleLoad-2 2s 0.14s infinite; }
    .slice:nth-child(3) { border-top-color: #1794c9; transform: translate(-50%, -50%) rotate(120deg) scale(0); animation: sparkleLoad-3 2s 0.21s infinite; }
    .slice:nth-child(4) { border-top-color: #1776c9; transform: translate(-50%, -50%) rotate(180deg) scale(0); animation: sparkleLoad-4 2s 0.28s infinite; }
    .slice:nth-child(5) { border-top-color: #1758c9; transform: translate(-50%, -50%) rotate(240deg) scale(0); animation: sparkleLoad-5 2s 0.35s infinite; }
    .slice:nth-child(6) { border-top-color: #173bc9; transform: translate(-50%, -50%) rotate(300deg) scale(0); animation: sparkleLoad-6 2s 0.42s infinite; }

    @keyframes sparkleLoad-1 {
        0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0); }
        25%, 75% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
        100% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0); }
    }
    @keyframes sparkleLoad-2 {
        0% { opacity: 0; transform: translate(-50%, -50%) rotate(60deg) scale(0); }
        25%, 75% { opacity: 1; transform: translate(-50%, -50%) rotate(60deg) scale(1); }
        100% { opacity: 0; transform: translate(-50%, -50%) rotate(60deg) scale(0); }
    }
    @keyframes sparkleLoad-3 {
        0% { opacity: 0; transform: translate(-50%, -50%) rotate(120deg) scale(0); }
        25%, 75% { opacity: 1; transform: translate(-50%, -50%) rotate(120deg) scale(1); }
        100% { opacity: 0; transform: translate(-50%, -50%) rotate(120deg) scale(0); }
    }
    @keyframes sparkleLoad-4 {
        0% { opacity: 0; transform: translate(-50%, -50%) rotate(180deg) scale(0); }
        25%, 75% { opacity: 1; transform: translate(-50%, -50%) rotate(180deg) scale(1); }
        100% { opacity: 0; transform: translate(-50%, -50%) rotate(180deg) scale(0); }
    }
    @keyframes sparkleLoad-5 {
        0% { opacity: 0; transform: translate(-50%, -50%) rotate(240deg) scale(0); }
        25%, 75% { opacity: 1; transform: translate(-50%, -50%) rotate(240deg) scale(1); }
        100% { opacity: 0; transform: translate(-50%, -50%) rotate(240deg) scale(0); }
    }
    @keyframes sparkleLoad-6 {
        0% { opacity: 0; transform: translate(-50%, -50%) rotate(300deg) scale(0); }
        25%, 75% { opacity: 1; transform: translate(-50%, -50%) rotate(300deg) scale(1); }
        100% { opacity: 0; transform: translate(-50%, -50%) rotate(300deg) scale(0); }
    }
/* ------------------------------------ end loader ------------------------------------ */