@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --accent: #F61372;
    --accent2: #FCF2F6;
    --accent3: #FCF2F6;
    --second: #B2F042;
    --third: #4734C0;
    --white: #ffffff;
    --black: #000000;
    --light: #F0F0F0;
    --light2: #f8f8f8;
    --dark: #212529;
    --danger: #F61372;

    --color: #323232;
    --color2: #575c5e;
    --color3: rgb(133, 140, 146);
    --color-white: #ffffff;

    --border: #e1e3e5;

    --background: #ffffff;

    --shadow: 0 0.25rem 1rem 0.5rem rgba(33, 37, 41, 0.05);
    --shadow-xs: 0 0.25rem 25rem 0.4rem rgba(33, 37, 41, 0.08);
    --shadow-sm: 0 0.313rem 313rem 0.5rem rgba(33, 37, 41, 0.15);
    --shadow-md: 0 0.313rem 1.25rem rgba(33, 37, 41, 0.1);
    --shadow-accent: 0 1.875rem 1.25rem rgba(246, 19, 114, 0.2);
    --shadow-accent-sm: 0 0.625rem 1.25rem rgba(246, 19, 114, 0.15);
    --shadow-second: 0 1.875rem 1.25rem rgba(179, 240, 66, 0.2);
    --shadow-second-sm: 0 0.625rem 1.25rem rgba(179, 240, 66, 0.15);

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

    --transform-fix: 'none';
    
    --font1: 'Hknova', sans-serif;
    /* --font2: 'Poppins', sans-serif; */
    --font2: 'Plus Jakarta Sans', sans-serif;  
}

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


/* ------------------------------------ common ------------------------------------ */
    *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
    html { font-family: sans-serif; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
    body { background: var(--background); font-family: var(--font1); font-style: normal; font-weight: 400; font-size: 1.25rem; line-height: 1.6; color: var(--color); overflow-x: hidden; margin: 0; -webkit-font-smoothing: antialiased; }

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

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

    a.hover:hover { text-decoration: underline; transition-duration: 0.2s; }
    a.hover-1 { text-decoration: none; background-image: linear-gradient(var(--accent), var(--accent)); background-position: 1% 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size cubic-bezier(0,.5,0,1) 0.3s; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    a.hover-1:hover { text-decoration: none; background-size: 100% 1px; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    a.hover-2 { text-decoration: none; background-image: linear-gradient(var(--light), var(--light)); background-position: 1% 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size cubic-bezier(0,.5,0,1) 0.3s; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    a.hover-2:hover { text-decoration: none; background-size: 100% 50px; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    a.hover-3:hover { transform: translateX(0.313rem); transition-duration: 0.3s; }

    .link { font-weight: 600; font-size: 1rem; line-height: 1.2; color: var(--accent) !important; z-index: 4; }
    .link .icon { position: absolute; top: 2px; margin-left: 0.625rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .link:hover .icon { margin-left: 0.938rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .link-arrow { font-weight: 600; font-size: 1rem; line-height: 1.2; color: var(--accent) !important; z-index: 4; position: relative; padding-right: 1.5rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .link-arrow:before {
        content: '\e829';
        font-family: 'feather';
        position: absolute;
        top: 18%;
        bottom: 0;
        right: 0;
        width: auto;
        font-size: 0.938rem;
        line-height: 1;
        color: var(--accent);
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .link-arrow:hover:before { right: -0.5rem; }

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

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

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

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

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

    .list-info { position: relative; }
    .list-info .list-info-item { position: relative; }
    .list-info .list-info-item:not(:last-child) { margin-bottom: 0.313rem; }
    .list-info .list-info-item .icon { display: inline-block; width: 1.25rem; }
    .list-info .list-info-item .info-label { display: inline-block; width: 150px; flex-shrink: 0; font-weight: 500; font-size: 0.875rem; color: var(--color2); }
    .list-info .list-info-item .info-value { display: inline-block; width: calc(98% - 150px); text-align: right; font-weight: 600; font-size: 0.875rem; color: var(--color); }

    @media (max-width: 300px) {
        .list-info .list-info-item .info-label { width: 100%; }
        .list-info .list-info-item .info-value { width: 100%; text-align: left; margin-top: 0.225rem; }
    }

    .list-info.wider .list-info-item { padding: 0.313rem 0; }
    .list-info.line .list-info-item:before { content: ''; position: absolute; left: 0; bottom: -0.225rem; width: 100%; height: 1px; background: var(--light); }

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

    img { width: 100%; height: 100%; }
    .img-contain { object-fit: contain; position: 50% 50%; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; -o-transition: transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; }
    .img-cover { object-fit: cover; position: 50% 50%; width: 100%; height: 100%; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; -o-transition: transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; }
    .img-cover.hover-scale { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; -o-transition: transform .5s; transition: transform .5s; transition: transform .5s, -webkit-transform .5s; }

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

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

    .hv-shadow { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow:hover, .hv-shadow:focus { box-shadow: var(--shadow) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow-sm { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow-sm:hover, .hv-shadow-sm:focus { box-shadow: var(--shadow-sm) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow-accent { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow-accent:hover, .hv-shadow:focus { box-shadow: var(--shadow-accent) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow-second { -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .hv-shadow-second:hover, .hv-shadow:focus { box-shadow: var(--shadow-second) !important; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

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

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

    .shadow-md { box-shadow: 0 0.25rem 0.5rem rgba(192, 189, 189, 0.25); }
    .shadow-none { -webkit-box-shadow: none !important; box-shadow: none !important; }

    .separator { border-top: 1px solid 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; }

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

    @media (max-width: 1200px) {
        .section-xl { padding-top: 5.75rem; padding-bottom: 5.75rem; }
        .section-lg { padding-top: 4.75rem; padding-bottom: 4.75rem; }
        .section-md { padding-top: 3.5rem; padding-bottom: 3.5rem; }
        .section-sm { padding-top: 2.25rem; padding-bottom: 2.25rem; }
        .section-xs { padding-top: 1.35rem; padding-bottom: 1.35rem; }
        .section-xxs { padding-top: 0.75rem; padding-bottom: 0.75rem; }
    }
    @media (max-width: 992px) {
        .section-xl { padding-top: 5rem; padding-bottom: 5rem; }
        .section-lg { padding-top: 4rem; padding-bottom: 4rem; }
        .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; }
    }

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

    .w-25 { width: 25% !important; }
    .w-30 { width: 30% !important; }
    .w-35 { width: 35% !important; }
    .w-40 { width: 40% !important; }
    .w-45 { width: 45% !important; }
    .w-50 { width: 50% !important; }
    .w-55 { width: 55% !important; }
    .w-60 { width: 60% !important; }
    .w-65 { width: 65% !important; }
    .w-70 { width: 70% !important; }
    .w-75 { width: 75% !important; }
    .w-80 { width: 80% !important; }
    .w-85 { width: 85% !important; }
    .w-90 { width: 90% !important; }
    .w-95 { width: 95% !important; }
    .w-100 { width: 100% !important; }

    /*scrollable*/
    .scrollable {
        position: relative;
        display: -ms-flexbox;
        display: flex; 
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: inherit;
        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: row !important; flex-direction: row !important; overflow-y: hidden !important; overflow-x: auto !important; }
    .h-scrollable::-webkit-scrollbar { height: 0.313rem; }
    
    /* .container { padding: 0 } */
    
    /* @media (max-width: 480px) {
        .container { padding-left: 10px !important; padding-right: 10px !important; }
    } */
    @media (min-width: 1400px) {
        .container { max-width: 1200px; }
    }
    @media (max-width: 580px) {
        .container, .container-fluid { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
    }

    main.wrap-site { position: relative; width: 100%; padding-top: 80px; overflow-x: hidden; }

    @media (max-width: 992px) {
        main.wrap-site { padding-top: 70px; }
    }

    .clear-canvas main.wrap-site { padding-top: 0; }
    .clear-canvas .navbar { display: none !important; }
    .clear-canvas .footer { display: none !important; }
    

    .preloader {
        position: fixed;
        top: 0;
        width: 100vw;
        height: 100vh;
        z-index: 200;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        -webkit-transition-delay: 1s;
        transition-delay: 1s;
        background: var(--second);
        background: linear-gradient(45deg, var(--white) 0%, var(--accent) 50%, var(--light) 100%);
        background-size: 200% 200%;
        background-position: left bottom;
        -webkit-animation-name: animateGradient;
        animation-name: animateGradient;
        -webkit-animation-duration: 5s;
        animation-duration: 5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite
    }
    .preloader img { object-fit: contain; max-width: 15.625rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) }
    body.loaded .preloader { -webkit-transform: translateY(-100%); transform: translateY(-100%) }

    .fad.fa-lightbulb-on::before,.fad.fa-search::before,.fad.fa-angle-double-down::before { opacity: var(--fa-primary-opacity, 0.5) }
    .fad.fa-lightbulb-on::after,.fad.fa-search::after,.fad.fa-angle-double-down::after { opacity: var(--fa-secondary-opacity, 1) }
/* ------------------------------------ end common ------------------------------------ */


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

    h1, h2, h3, h4, h5, h6 { font-family: var(--font1); font-weight: 500; letter-spacing: 0.04rem; color: var(--color); margin-bottom: 1.25rem; }
    h1.white, h2.white, h3.white, h4.white, h5.white, h6.white { color: var(--white); }

    p { letter-spacing: 0.02rem; color: var(--color3); }

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

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

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

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

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

    .text-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-second { color: var(--second) !important; }
    .text-light { color: var(--light) !important; }
    .text-dark { color: var(--dark) !important; }
    .text-white { color: var(--white) !important; }
    .text-black { color: var(--black) !important; }
    .text-color { color: var(--color) !important; }
    .text-color2 { color: var(--color2) !important; }
    .text-color3 { color: var(--color3) !important; }

    .text-gradient-main {
        background-image: linear-gradient(350deg, #4734c0, #5843e1 20%, #df1167 55%, #F61372);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

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

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


/* ------------------------------------ background ------------------------------------ */
    .bg-gradiant { background: linear-gradient(150deg, #7ba8ed 0%, var(--accent) 70%, var(--accent) 100%) !important; border: none !important; color: var(--white) !important }
    
    .bg-primary { background-color: #0076a3 !important }
    .bg-secondary { background-color: #979795 !important }
    .bg-success { background-color: #1d9b7b !important }
    .bg-info { background-color: #24bee6 !important }
    .bg-warning { background-color: #ffb60b !important }
    .bg-danger { background-color: #da3746 !important }
    .bg-light { background-color: #f8f9fc !important }
    .bg-dark { background-color: #183b56 !important }
    .bg-muted { background-color: #838485 !important }
    .bg-purple { background-color: #766df4 !important }
    .bg-blue { background-color: #1f86ef !important }
    .bg-orange { background-color: #e46e2a !important }
    .bg-white-70 { background-color: rgba(255,255,255,.7) !important }

    .bg-accent { background: var(--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; }
    
    .bg-gradient-to-bl { background-image: linear-gradient(to bottom left, var(--accent3), rgba(246, 19, 114, 0)) }
    .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--accent3), rgba(246, 19, 114, 0)) }
    .bg-gradient-to-r { background-image: linear-gradient(to right, var(--accent3), rgba(246, 19, 114, 0)) }
    .bg-gradient-to-t { background-image: linear-gradient(to top, var(--accent3), rgba(246, 19, 114, 0)) }
    .bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--accent3), rgba(246, 19, 114, 0)) }
/* ------------------------------------ end background ------------------------------------ */


/* ------------------------------------ badge ------------------------------------ */
    .badge { position: relative; font-weight: 600; line-height: 1.2; letter-spacing: 0.02rem; padding: 0.5rem 1rem; border-radius: 0.625rem; background: var(--accent); vertical-align: middle; cursor: default; }
    .badge-md { font-size: 0.875rem; padding: 0.625rem 1rem; border-radius: 0.625rem; }
    .badge-lg { font-size: 0.925rem; padding: 0.825rem 1.25rem; border-radius: 0.925rem; }

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

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

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


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

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


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

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


/* ------------------------------------ rounded ------------------------------------ */
    .rounded { border-radius: 0.25rem !important; }
    .rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }
    .rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
    .rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }
    .rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }
    .rounded-sm { border-radius: 0.2rem !important; }
    .rounded-lg { border-radius: 0.3rem !important; }
    .rounded-circle { border-radius: 50% !important; }
    .rounded-pill { border-radius: 50rem !important; }

    .rounded-0 { border-radius: 0 !important; }
    .rounded-5 { border-radius: 0.313rem !important; }
    .rounded-8 { border-radius: 0.5rem !important; }
    .rounded-10 { border-radius: 0.625rem !important; }
    .rounded-15 { border-radius: 0.938rem !important; }
    .rounded-20 { border-radius: 1.25rem !important; }
    .rounded-30 { border-radius: 1.875rem !important; }
    .rounded-40 { border-radius: 2.5rem !important; }
    .rounded-50 { border-radius: 50% !important; }
    .rounded-80 { border-radius: 5rem !important; }
    .rounded-100 { border-radius: 6.25rem !important; }
/* ------------------------------------ end rounded ------------------------------------ */


/* ------------------------------------ button ------------------------------------ */
    .btn {
        position: relative;
        overflow: hidden;
        outline: 0 !important;
        -webkit-box-shadow: none !important; 
        box-shadow: none !important;
        border-radius: 2.5rem;
        padding: 1.25rem 2.5rem;
        background: var(--accent);
        border: 2px solid var(--accent);
        font-weight: 600;
        font-size: 1rem; 
        line-height: 1.4; 
        letter-spacing: 0.04rem;
        color: var(--color-white) !important;
        vertical-align: middle;
        cursor: pointer;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .btn:hover .btn:focus, .btn.focus { outline: 0 !important; background: transparent; color: var(--accent) !important; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .btn.fix:hover { color: var(--color-white) !important; background: var(--accent); }
    .btn .icon { font-size: 1rem; }
    .btn .icon.left { margin-right: 0.5rem; }

    .btn-style-2 { font-weight: 400;text-transform: uppercase; letter-spacing: 0.385rem; }
    .btn.hv-1:hover { transform: translateY(-0.15rem); }

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

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

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

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

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

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

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

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

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

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

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

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

    .btn-download { display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-height: 67px; }
    .btn-download:before { content: '\eb58'; font-family: 'LineIcons'; font-size: 1.45rem; color: var(--white); margin-right: 0.625rem; }
    .btn-download .text { text-align: left; line-height: 1; }
    .btn-download .text span { display: block; font-size: 0.65rem; letter-spacing: 0.1rem; color: var(--accent3); margin-bottom: 0.313rem; }
    .btn-download:hover { box-shadow: 0 0 0.313rem var(--accent), 0 0 1rem var(--accent), 0 0 1rem var(--accent), 0 0 2.5rem var(--accent) !important; /*-webkit-box-reflect: below 0.25rem linear-gradient(transparent, #0005);*/ }

    .btn-download.btn-second:before { color: var(--color); }
    .btn-download.btn-second .text span { color: var(--color); }
    .btn-download.btn-second:hover { box-shadow: 0 0 5px var(--second), 0 0 25px var(--second), 0 0 50px var(--second), 0 0 200px var(--second) !important; /*-webkit-box-reflect: below 1px linear-gradient(transparent, #0005);*/ }
    /* .btn-download.btn-second:hover { box-shadow: 0 1rem 1.875rem 0.25rem rgba(179, 240, 66, 0.8) !important; } */
/* ------------------------------------ end button ------------------------------------ */


/* ------------------------------------ swiper slider ------------------------------------ */
    .swiper-container { position: relative; height: 100%; }
    .swiper-button-next, .swiper-button-prev {
        width: calc(var(--swiper-navigation-size)/ 44 * 27);
        height: var(--swiper-navigation-size);
        margin-top: calc(0.313rem - (var(--swiper-navigation-size)/ 2));
        
    }

    .swiper-button { font-family: swiper-icons; font-size: 2.5rem; line-height: 1; letter-spacing: 0; color: var(--color-white); z-index: 10; text-transform: none; font-variant: initial; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .swiper-button:hover, .swiper-button:focus { color: var(--color-white) !important; }
    
    .swiper-button.swiper-button-disabled { opacity: 0.25; cursor: auto; pointer-events: none; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    .swiper-button-prev { left: 3%; right: auto; }
    .swiper-button-prev:after { content: 'prev'; }
    .swiper-button-next { right: 3%; left: auto; }
    .swiper-button-next:after { content: 'next'; }

    .swiper-button.style-2 { background: var(--accent); width: 3.2rem; height: 3.2rem; border-radius: 50%; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .swiper-button.style-2:after { font-size: 1.45rem; color: var(--color-white); }
    .swiper-button.style-2:hover { box-shadow: var(--shadow-accent-sm); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    
    .swiper-button.style-3.swiper-button-disabled { opacity: 0; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    @media (max-width: 768px) {
        .swiper-button.style-3 { opacity: 0.75; }
    }


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

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

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

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

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


/* ------------------------------------ dropdown ------------------------------------ */
    .dropdown-style { position: relative; width: auto; z-index: 100; }

    .dropdown-style .dropdown-link { cursor: pointer; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
    .dropdown-style .dropdown-link h6 { font-size: 1.8rem; font-weight: 600; color: #404243; width: 100%; height: 100%; line-height: 5.8rem }
    .dropdown-style .dropdown-link i { font-size: 2rem; color: #969c9e; position: relative; right: 3rem }

    .dropdown-style .dropdown-box {
        position: absolute;
        top: 10rem;
        width: 100%;
        min-width: 150px;
        background: var(--background);
        box-shadow: var(--shadow);
        padding: 0.625rem;
        border-radius: 1rem;
        z-index: 1000;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .dropdown-style .dropdown-box.shown { top: 4rem; visibility: visible; opacity: 1; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .dropdown-style .dropdown-box ul { background: var(--background); }
    .dropdown-style .dropdown-box ul li { position: relative; }
    .dropdown-style .dropdown-box ul li:not(:last-child) { margin-bottom: 0.25rem; }
    .dropdown-style .dropdown-box ul li a { display: block; width: 100%; padding: 0.313rem 0.625rem !important; border-radius: 0.625rem; cursor: pointer; font-weight: 400; font-size: 0.938rem; letter-spacing: 0.02rem; color: var(--color3); }
    .dropdown-style .dropdown-box ul li a.selected, .dropdown-style .dropdown-box ul li a:hover { color: var(--accent); background: var(--light); }
/* ------------------------------------ end dropdown ------------------------------------ */


/* ------------------------------------ header ------------------------------------ */
    .header { position: fixed; top: 0; left: 0; right: 0; padding: 0; z-index: 100; padding: 1rem 0; background: transparent; width: 100%; -webkit-transition: background .1s ease; -moz-transition: background .1s ease; -ms-transition: background .1s ease; -o-transition: background .1s ease; transition: background .1s ease; }
    .header.shrink { 
        -webkit-backdrop-filter: blur(1rem);
        backdrop-filter: blur(1rem);
        background-color: rgba(255, 255, 255, .6);
        -webkit-transition: background .4s ease; -moz-transition: background .4s ease; -ms-transition: background .4s ease; -o-transition: background .4s ease; transition: background .4s ease; 
    }
    .header.slide-down { -webkit-animation: slide-down 0.5s; animation: slide-down 0.5s; }
    .header.slide-up { -webkit-animation: slide-up 0.5s; animation: slide-up 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }

    .header .header-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; }
    .header .header-wrapper .header-logo { display: inline-block; }
    .header .header-wrapper .header-logo .logo-img { object-fit: contain; max-width: 10rem; }

    .header-nav { position: relative; }
    .header-nav .main-navigation { display: flex; align-items: stretch; flex-direction: row; padding: 0; margin-bottom: 0; }
    .header-nav .main-navigation .nav-item { list-style: none; display: inline-block; }
    .header-nav .main-navigation .nav-item:not(:last-child) { margin-right: 2.3rem; }
    .header-nav .main-navigation .nav-item a.nav-link { position: relative; padding: 0.625rem 0; font-weight: 400; font-size: 1rem; letter-spacing: 0.015rem; color: var(--color); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .header-nav .main-navigation .nav-item a.nav-link:before { content: ''; position: absolute; top: 80%; left: 50%; width: 0.313rem; height: 0.313rem; border-radius: 50%; background: var(--accent); transform: translate(-50%, 0); opacity: 0; visibility: hidden; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .header-nav .main-navigation .nav-item a.nav-link.active { font-weight: 700; color: var(--accent); }
    .header-nav .main-navigation .nav-item a.nav-link.active:before { opacity: 1; visibility: visible; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .header-nav .main-navigation .nav-item a.nav-link:hover { color: var(--accent); }

    .header-nav .main-navigation .nav-item.nav-dropdown .dropdown-box { right: 0 }
    .header-nav .main-navigation .nav-item.nav-dropdown:hover .dropdown-box { top: 0 !important; visibility: visible !important; opacity: 1 !important; -webkit-transform: translateY(2.8rem); transform: translateY(2.8rem); }

    .header-bars { background: var(--background); border: 1px solid var(--background); box-shadow: var(--shadow-sm); outline: 0; width: 3rem; height: 3rem; border-radius: 0.625rem; cursor: pointer; padding: 0.625rem; display: none; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .header-bars::after { display: table; clear: both }
    .header-bars .bar { display: block; height: 0.17rem; border-radius: 0.6rem; background: var(--color3); margin: 0.15rem 0; float: right; }
    .header-bars .bar.bar-1 { width: 100%; }
    .header-bars .bar.bar-2 { width: 85%; }
    .header-bars .bar.bar-3 { width: 65%; }
    .header-bars:hover, .header-bars:focus { background: var(--light2); box-shadow: none; }

    .header-bars.close-navigation { display: none; position: absolute; top: calc(2.8rem + 1rem); right: 4rem; height: 3rem; }
    .header-bars.close-navigation .bar { margin: -0.17rem 0; float: none; }
    .header-bars.close-navigation .bar.bar-1 { width: 100%; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
    .header-bars.close-navigation .bar.bar-2 { opacity: 0; }
    .header-bars.close-navigation .bar.bar-3 { width: 100%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

    @media (max-width: 1200px) {
        .header-nav .main-navigation .nav-item:not(:last-child) { margin-right: 1.8rem; }
    }
    @media (max-width: 992px) {
        .header-nav {
            position: fixed;
            top: 0;
            right: 100%;
            width: 100vw;
            height: 100vh;
            background: var(--light);
            padding-top: 2.5rem;
            border-radius: 50%;
            display: flex; 
            flex-direction: column;
            flex-wrap: inherit;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: none;
            -webkit-transition: var(--transition-6); -moz-transition: var(--transition-6); -ms-transition: var(--transition-6); -o-transition: var(--transition-6); transition: var(--transition-6);
        }
        .header-nav.shown { right: 0; border-radius: 0; }

        .header-bars { display: block; }
        .header-bars.close-navigation { display: block }

        .header-nav .main-navigation { display: block; width: 100%; padding: 4rem 4rem; }
        .header-nav .main-navigation .nav-item { display: block; width: 100%; }
        .header-nav .main-navigation .nav-item:not(:last-child) { margin-right: 0; }
        .header-nav .main-navigation .nav-item a.nav-link { font-size: 1.25rem; padding: 1.25rem 0; }
        .header-nav .main-navigation .nav-item a.nav-link:before { opacity: 0 !important; visibility: hidden !important; }
        
        .header-nav .nav-dropdown-box { position: relative; overflow: hidden; width: 100%; top: -4rem; margin-top: -1rem; background: none; box-shadow: none; max-height: 0; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
        .header-nav .nav-dropdown-box ul { background: none; }
        .header-nav .nav-dropdown-box::before { display: none }
        .header-nav .nav-dropdown-box li a { font-size: 1.875rem; padding: 1.25rem 0 1.25rem 1.25rem !important; }
        .header-nav .nav-dropdown-box.shown { top: 0; margin-top: 0; max-height: 100%; visibility: visible; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    }
    @media (max-width: 580px) {
        .header { padding: 1rem 0.625rem; }
        .header .header-wrapper .header-logo .logo-img { max-width: 8rem; }

        .header-nav .main-navigation { padding: 4rem 1.25rem; }
        .header-nav .main-navigation li a { font-size: 1.125rem; padding: 1rem 0; }

        .header-bars.close-navigation { right: 1.25rem; }
    }
/* ------------------------------------ end header ------------------------------------ */


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

    .control-label { font-weight: 400; font-size: 0.875rem; line-height: 1.2; letter-spacing: 0.02rem; color: var(--color2); margin-bottom: 0.414rem; }
    .form-control { 
        position: relative;
        display: block;
        width: 100%;
        height: calc(2.5rem + 0.75rem + 2px);
        padding: 0.475rem 1rem;
        border-radius: 0.625rem;
        background: var(--background); 
        border: 1px solid var(--border);
        font-weight: 400;
        font-size: 1rem; 
        line-height: 1.2;
        letter-spacing: 0.02rem;
        color: var(--color) !important; 
        -webkit-appearance: none; -moz-appearance: none; appearance: none;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .form-control::placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--color2); opacity: 0.5; }
    .form-control::-webkit-input-placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--color2); opacity: 0.5; }
    .form-control::-moz-placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--color2); opacity: 0.5; }
    .form-control:-ms-input-placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--color2); opacity: 0.5; }
    .form-control:-moz-placeholder { font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02rem; color: var(--color2); opacity: 0.5; }
    .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: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); 
    }

    .form-actions { margin-top: 1.875rem; }
    .wrap-input { position: relative; }
    textarea.form-control { height: inherit; padding: 0.65rem 1rem; }

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

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

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

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


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

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

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


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


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

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

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


    /*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(2.25rem + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        border-radius: 0.625rem;
        background: var(--white); 
        border: 1px solid var(--border2);
        font-size: 0.875rem;
        line-height: 1.2;
        color: var(--color); 
    }
    .select2-container .select2-selection__rendered { font-size: 0.938rem !important; line-height: 2.1rem !important; color: var(--color) !important; }
    .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 0; }
    .select2-container .select2-selection--single .select2-selection__placeholder { font-weight: normal; font-size: 0.875rem; color: var(--dark); opacity: 0.4; }
    .select2-container .select2-selection--single .select2-selection__arrow { height: 100%; right: 0.75rem; }
    .select2-container .select2-selection--single .select2-selection__arrow b {
        border-color: var(--border2) transparent transparent transparent;
        border-style: solid;
        border-width: 5px 4px 0 4px;
        margin-left: -4px;
        margin-top: -2px;
        height: 0;
        width: 0;
    }

    .select2-dropdown { background: var(--white); border: 1px solid var(--dark); border-radius: 0.625rem; overflow: hidden; -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; animation-name: fadeIn; }
    .select2-search--dropdown { padding: 0.375rem 0.75rem; }
    .select2-container .select2-search--dropdown .select2-search__field { font-size: 0.825rem; color: var(--color); border: 1px solid var(--border2); border-radius: 0.45rem; padding-left: 0.625rem; padding-right: 0.625rem; }

    .select2-container .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 .select2-results__option--selected { background-color: var(--light); }
    .select2-container .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; }

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

    /*fileupload*/
    .fileupload .thumbnail { text-align: left !important; justify-content: flex-start; }
    .fileupload .thumbnail img { width: 100%; max-height: 5rem; object-fit: contain; object-position: 50% 50%; }
    .fileupload .btn { padding: 0.25rem 0.625rem !important; font-size: 0.75rem !important; border-radius: 0.313rem; }
    .fileupload .btn i { margin-right: 0.5rem !important; }
    

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

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


    @media (max-width: 580px) {
        .form-style .form-group { margin-bottom: 0.625rem; }
    }


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


/* ------------------------------------ components ------------------------------------ */
    /* scroll top */
    .scroll-top {
        position: fixed;
        right: 2.5rem;
        bottom: 2.5rem;
        width: 2.4rem;
        height: 2.4rem;
        cursor: pointer;
        display: block;
        border-radius: 100%;
        box-shadow: inset 0 0 0 0.1rem rgba(128, 130, 134, 0.25);
        z-index: 100;
        opacity: 0;
        visibility: hidden;
        transform: translateY(1.875rem);
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .scroll-top.active { opacity: 1; visibility: visible; transform: translateY(0); }
    .scroll-top:after {
        position: absolute;
        top: 0;
        left: 0;
        font-family: 'LineIcons';
        content: '\ea64';
        text-align: center;
        line-height: 2.4rem;
        font-size: 1rem;
        color: var(--accent);
        height: 2.4rem;
        width: 2.4rem;
        cursor: pointer;
        z-index: 1;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .scroll-top svg path { fill: none; }
    .scroll-top svg.scroll-progress path { stroke: var(--accent); stroke-width: 4; box-sizing: border-box; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

    @media (prefers-reduced-motion: reduce) {
        .scroll-top { transition: none; }
        .scroll-top:after { transition: none; }
        .scroll-top svg.scroll-progress path { transition: none; }
    }
    @media (max-width: 580px) {
        .scroll-top { right: 1rem; bottom: 1rem; }
    }


    /* heading section */
    .heading-section { margin-bottom: 1.975rem; }
    .heading-section .subheading { font-weight: 500; color: var(--accent); margin-bottom: 1rem; }
    .heading-section .heading { font-weight: 600; color: var(--color); }
    .heading-section .heading span { color: var(--accent); }
    .heading-section .description { color: var(--color2); }


    .divider-text-center { text-align: center; position: relative; }
    .divider-text-center::before { content: ''; position: absolute; left: 0; top: 50%; right: 0; border-top: 1px solid var(--light); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); }
    .divider-text-center span { background-color: var(--white); padding: 0 0.938rem; position: relative; font-weight: normal; font-size: 0.875rem; letter-spacing: 0.02em; }


    .cover-lr-white {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        background-image: -webkit-gradient(linear, right top, left top, color-stop(70%, hsla(0, 0%, 100%, 0)), to(var(--background))), -webkit-gradient(linear, right top, left top, from(var(--background)), color-stop(30%, hsla(0, 0%, 100%, 0)));
        background-image: linear-gradient(270deg, hsla(0, 0%, 100%, 0) 70%, var(--background)), linear-gradient(270deg, var(--background), hsla(0, 0%, 100%, 0) 30%);
    }

    @media (max-width: 768px) {
        .cover-lr-white.sm-reverse {
            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(70%, hsla(0, 0%, 100%, 0)), to(var(--background))), -webkit-gradient(linear, left top, left bottom, from(var(--background)), color-stop(30%, hsla(0, 0%, 100%, 0)));
            background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 70%, var(--background)), linear-gradient(180deg, var(--background), hsla(0, 0%, 100%, 0) 30%);
        }
    }


    /* alert */
    .alert { position: relative; padding: 0.5rem 1rem; border-radius: 0.5rem; background: var(--background); box-shadow: var(--shadow-sm); }
    .alert .btn-close { position: absolute; top: 0.625rem; right: 0.625rem; padding: 0; font-size: 0.875rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .alert .btn-close:hover { transform: rotate(20deg); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .alert .btn-close:focus { outline: 0; box-shadow: none; }
    .alert .alert-inner { display: flex; align-items: center; }
    .alert .alert-inner .alert-icon { position: relative; font-size: 1.75rem; margin-right: 1rem; }
    /* .alert .alert-inner .alert-icon:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 2rem; height: 2rem; border-radius: 50%; background: var(--light); z-index: 0; } */
    .alert .alert-inner .alert-icon i { position: relative; z-index: 2; }
    .alert .alert-inner .alert-text { font-size: 0.925rem; padding-right: 1rem; }


    /* social media */
    .social-media { display: flex; align-items: center; flex-wrap: wrap; }
    .social-media li { margin-bottom: 1rem !important; }
    .social-media li:not(:last-child) { margin-right: 0.625rem; }
    .social-media .icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 50%;
        cursor: pointer;
        text-align: center;
        background: linear-gradient(45deg, var(--background) 0%, rgba(241, 68, 122, 0) 100%);
        color: var(--color);
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .social-media .icon i { font-size: 1.25rem; line-height: 2.2rem; }
    .social-media .icon:hover { color: var(--accent); box-shadow: var(--shadow-accent-sm); }


    .reset-style h1, .reset-style h2, .reset-style h3, .reset-style h4, .reset-style h5, .reset-style h6 { font-weight: 500; color: var(--color) !important; }
    .reset-style *, .reset-style ol li { font-weight: 300; font-size: 1.125rem !important; line-height: 1.8; color: var(--color2) !important; }
    .reset-style b { font-weight: 500; }
    .reset-style ul { margin-bottom: 1rem; padding-left: 1.25rem; }
    .reset-style ul li { list-style: disc; font-family: var(--font1); font-weight: 300; font-size: 1rem; line-height: 1.6; color: var(--color); }
    .reset-style ul li:not(:last-child) { margin-bottom: 0.625rem; }
    .reset-style ol { list-style-position: inside; font-family: var(--font1); font-weight: 300; font-size: 1.125rem; line-height: 1.6; color: var(--color); margin-bottom: 1rem; }
    .reset-style ol li:not(:last-child) { margin-bottom: 1rem; }
    .reset-style a { font-weight: 500; color: var(--accent); text-decoration: underline; }
    .reset-style .space-1 { height: 2.5rem; }
    .reset-style .space-2 { height: 2rem; }
    .reset-style .space-3 { height: 1.5rem; }
    .reset-style .space-4 { height: 1rem; }
    .reset-style .space-5 { height: 0.625rem; }
    .reset-style .space-6 { height: 0.313rem; }

    .single-section h5 { font-size: 1.35rem; color: var(--color); margin-bottom: 0.625rem; }
    .single-section h5:nth-child(n+2) { margin-top: 2.5rem; }

    .hero-section { width: 100%; }
    .hero-section > .inner { overflow: hidden; background: var(--accent3); padding: 7rem 1.25rem 7rem 1.25rem; }
/* ------------------------------------ end components ------------------------------------ */


/* ------------------------------------ content ------------------------------------ */
    .el1-section > .inner { position: relative; width: calc(100% - 3rem); margin: 0 auto; border-radius: 2.5rem; padding: 8rem 1.25rem 8rem 1.25rem; }

    @media (max-width: 1200px) {
        .el1-section > .inner { width: calc(100% - 1.875rem); }
    }
    @media (max-width: 992px) {
        .el1-section > .inner { width: calc(100% - 1.25rem); }
    }
    @media (max-width: 768px) {
        .el1-section > .inner { width: calc(100% - 1rem); }
    }
    @media (max-width: 580px) {
        .el1-section > .inner { width: calc(100%); border-radius: 1.25rem; }
    }


    .intro-section { position: relative; padding: 1rem 0 2.5rem 0; min-height: 745px; max-height: 100vh; }
    .intro-section > .inner { overflow: hidden; padding: 0; }
    
    .intro-section .swiper-slide { overflow: hidden; border-radius: 2.5rem; width: 100%; height: 80vh; display: flex; align-items: center; padding: 7rem 1.25rem 7rem 1.25rem; }
    .intro-section .swiper-slide .intro-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 55%; z-index: 0; }
    
    .intro-section .content { position: relative; width: 100%; max-width: 550px; z-index: 2; }
    .intro-section .content .heading { color: var(--color-white); }
    .intro-section .content .description { color: var(--color-white); }
    .intro-section .content .cta { position: relative; margin-top: 2.5rem; }
    .intro-section .content .cta .btn:not(:last-child) { margin-right: 1.25rem }
    
    @media (max-width: 1200px) {
        .intro-section .content { max-width: 500px; }
    }
    @media (max-width: 992px) {
        .intro-section .swiper-slide { padding: 12rem 0 10rem 0; }
        .intro-section .swiper-slide:before { background: linear-gradient(90deg, var(--accent) 30%, rgba(246, 19, 114, 0) 100%); }
        .intro-section .swiper-slide .intro-cover { object-position: 40% 0%; }
    }
    @media (max-width: 768px) {
        .intro-section .content .cta .button { display: -webkit-box; display: -ms-flexbox; display: flex; }
        .intro-section .content .cta .btn:not(:last-child) { margin-right: 0.625rem; }
    }
    @media (max-width: 580px) {
        .intro-section .swiper-slide { padding: 8rem 0 7rem 0; }
        .intro-section .swiper-slide:before { background: linear-gradient(90deg, var(--accent) 40%, rgba(246, 19, 114, 0.3) 100%); }
        .intro-section .swiper-slide .intro-cover { object-position: 48% 0%; }

        .intro-section .content { max-width: 85%; margin: auto; text-align: center; }
        .intro-section .content .cta .btn { width: 80%; }
        .intro-section .content .cta .btn:not(:last-child) { margin-right: 0; margin-bottom: 1rem; }
    }


    .notification-section .inner { text-align: center; }
    .notification-section .thumb { margin-bottom: 1rem; }
    .notification-section .thumb img { object-fit: contain; max-width: 300px; margin: auto; }


    .connected-section { padding-bottom: 0; }
    .connected-section .container { position: relative; overflow: hidden; }
    .connected-section .heading-section { text-align: center; max-width: 700px; margin: auto; }
    .connected-section .heading-section .heading { margin-bottom: 1.25rem; }
    .connected-section .heading-section .heading span { font-weight: 700; color: var(--color); }
    
    .connected-section .thumb { position: relative; margin-top: 3.2rem; }
    .connected-section .thumb::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -15rem;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        z-index: 5;
        width: 49rem;
        height: 49rem;
        border-radius: 50%;
        background: var(--accent);
        background: linear-gradient(45deg, #ff75b1 0%, var(--accent2) 50%, var(--accent) 100%);
        background-size: 200% 200%;
        background-position: left bottom;
        -webkit-animation-name: animateGradient;
        animation-name: animateGradient;
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite
    }

    .connected-section .thumb-ver { margin: auto; text-align: center; max-width: 320px; margin-bottom: 30px; }
    .connected-section .thumb .pattern { position: absolute; z-index: 0; max-width: 550px; opacity: 0.3; }
    .connected-section .thumb .pattern.pattern-1 { bottom: -10rem; left: -16rem; }
    .connected-section .thumb .pattern.pattern-2 { bottom: -14rem; right: -16rem; }
    .connected-section .thumb .thumb-img { position: relative; z-index: 10; margin-bottom: -7.5rem; }

    @media (max-width: 1200px) {
        .connected-section .heading-section { max-width: 650px; }

        .connected-section .thumb::before { width: 43rem; height: 43rem; }
        .connected-section .thumb .pattern { max-width: 450px; }
        .connected-section .thumb .pattern.pattern-1 { bottom: -8rem; left: -8rem; }
        .connected-section .thumb .pattern.pattern-2 { bottom: -10rem; right: -8rem; }
    }
    @media (max-width: 992px) {
        .connected-section .heading-section { max-width: 550px; }

        .connected-section .thumb::before { width: 35rem; height: 35rem; }
        .connected-section .thumb .pattern { max-width: 300px; }
        .connected-section .thumb .pattern.pattern-1 { bottom: -5rem; left: -3rem; }
        .connected-section .thumb .pattern.pattern-2 { bottom: -7rem; right: -3rem; }
    }
    @media (max-width: 768px) {
        .connected-section .thumb::before { width: 30rem; height: 30rem; }
        .connected-section .thumb .pattern.pattern-1 { bottom: -4rem; left: -5rem; }
        .connected-section .thumb .pattern.pattern-2 { bottom: -6rem; right: -5rem; }
    }
    @media (max-width: 580px) {
        .connected-section .thumb::before { top: 40%; width: 75vw; height: 75vw; }
        .connected-section .thumb .pattern { max-width: 50vw; }
        .connected-section .thumb .pattern.pattern-1 { bottom: -4rem; left: -2rem; }
        .connected-section .thumb .pattern.pattern-2 { bottom: -6rem; right: -2rem; }
    }


    .whyus-section { width: 100%; padding-bottom: 0; }
    .whyus-section > .inner { overflow: hidden; padding: 7rem 1.25rem 2.5rem 1.25rem; }
    .whyus-section > .inner:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(180deg, var(--accent), var(--accent2), rgba(246, 19, 114, 0.05)); opacity: 0.05; z-index: 0; }

    .whyus-section .heading-section { position: relative; z-index: 1; text-align: center; margin-bottom: 3.2rem; }
    
    @media (max-width: 1200px) {
        .whyus-section > .inner { padding: 7rem 1.25rem 5rem 1.25rem; }
    }
    @media (max-width: 768px) {
        .whyus-section > .inner { padding: 7rem 1rem 5rem 1rem; }
    }
    @media (max-width: 580px) {
        .whyus-section > .inner { padding: 4rem 0 0.625rem 0; }
    }


    .whyus-area { position: relative; z-index: 1; display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; gap: 1.25rem; }
    .whyus-area .whyus-item { position: relative; overflow: hidden; width: calc(33.33% - 1.25rem); padding: 1.875rem 1.875rem; border-radius: 1rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .whyus-area .whyus-item:after { content: ''; position: absolute; bottom: -10%; left: -10%; width: 80%; height: 80%; border-radius: 50%; background: var(--background); opacity: 0; visibility: visible; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .whyus-area .whyus-item:hover { box-shadow: 0 1.25rem 1.25rem 0.313rem rgba(0, 0, 0, .05); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .whyus-area .whyus-item:hover:after { width: 100%; height: 100%; transform: scale(1.2); border-radius: 0; opacity: 1; visibility: visible; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .whyus-area .whyus-item .thumb { position: relative; width: 100%; margin-bottom: 1.875rem; z-index: 2; }
    .whyus-area .whyus-item .thumb img { object-fit: contain; width: auto; max-width: 100%; height: 5rem; }
    .whyus-area .whyus-item .content { position: relative; overflow: hidden; z-index: 2; }
    .whyus-area .whyus-item .content h2 { font-weight: 600; color: var(--color); margin-bottom: 0.625rem; }
    .whyus-area .whyus-item .content p { margin-bottom: 0; }

    @media (max-width: 1200px) {
        .whyus-area { gap: 1rem; }
        .whyus-area .whyus-item { width: calc(33.33% - 1rem); padding: 1.875rem 1.25rem; }
        .whyus-area .whyus-item .thumb img { height: 4.5rem; }
    }
    @media (max-width: 992px) {
        .whyus-area .whyus-item { width: calc(50% - 1rem); }
    }
    @media (max-width: 768px) {
        .whyus-area .whyus-item { width: calc(100%); }
    }
    @media (max-width: 580px) {
        .whyus-area .whyus-item .thumb { text-align: center; }
        .whyus-area .whyus-item .content { text-align: center; }
    }


    .feature-section { width: 100%; margin-bottom: 5rem; }
    .feature-section .heading-section { margin-bottom: 3.2rem; }

    .feature-area { display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; }
    .feature-item { position: relative; width: calc(100%/4); padding: 0.45rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .feature-item:nth-child(even) { transform: translateY(6.25rem); }
    .feature-item:nth-child(even):hover { transform: translateY(0); }
    .feature-item:nth-child(odd):hover { transform: translateY(6.25rem); }

    .feature-item .head { 
        width: 12rem; 
        height: 12rem; 
        margin: 0 auto; 
        border-radius: 50%; 
        display: flex; 
        justify-content: center; 
        align-items: center; 
        background: var(--accent3);
        background: -webkit-gradient(linear, left bottom, left top, from(var(--accent)), to(var(--accent2)));
        background: linear-gradient(0deg, var(--accent) 0%, var(--accent2) 100%);
        border-radius: 50%;
        box-shadow: var(--shadow-accent);
    }
    .feature-item .head i { font-size: 5.5rem; color: var(--color-white); }
    .feature-item .body { width: 100%; padding: 3.5rem 0.313rem 0.313rem 0.313rem; background: var(--accent3); border-radius: 2.2rem; margin-top: 2.5rem; }
    .feature-item .body .content { background: var(--background); position: relative; padding: 2.5rem 0.625rem 2.5rem 0.625rem; border-radius: 2rem; text-align: center; }
    .feature-item .body .content::before {
        content: '';
        width: 4.8rem;
        height: 2.2rem;
        background: url(../img/pattern/arrow.webp) no-repeat;
        background-size: cover;
        display: block;
        position: absolute;
        top: -2rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%)
    }
    .feature-item .body .content h2 { font-weight: 600; color: var(--color); max-width: 80%; margin: auto; margin-bottom: 1.25rem; }
    .feature-item .body .content p { margin-bottom: 0; }

    @media (max-width: 1400px) {
        .feature-item .head { width: 11rem; height: 11rem; }
    }
    @media (max-width: 1200px) {
        .feature-item { padding: 0.313rem; }
        .feature-item .head { width: 10rem; height: 10rem; }
    }
    @media (max-width: 992px) {
        .feature-section { margin-bottom: 0rem; }

        .feature-item { width: calc(100%/2); }
        .feature-item:nth-child(even) { transform: translateY(0); }
        .feature-item:nth-child(odd):hover { transform: translateY(0); }
        .feature-item:nth-child(n+3) { margin-top: 2.5rem; }

        .feature-item .head { width: 8rem; height: 8rem; }
        .feature-item .head i { font-size: 3.7rem; }
        .feature-item .body { margin-top: 2rem; }
    }
    @media (max-width: 768px) {
        .feature-section .heading-section { max-width: 400px; margin: auto; margin-bottom: 3.2rem; }
    }
    @media (max-width: 580px) {
        .feature-item { width: calc(100%); }
        .feature-item:nth-child(n+2) { margin-top: 2.5rem; }

        .feature-item .head { width: 6.5rem; height: 6.5rem; }
        .feature-item .head i { font-size: 3.2rem; }
        .feature-item .body { padding: 2.5rem 0.313rem 0.313rem 0.313rem; margin-top: 1.25rem; }
    }


    .step-section { width: 100%; }
    .step-section > .inner { background: #f6f6f6; padding: 7rem 1.25rem 7rem 1.25rem; }
    .step-section .heading-section { margin-bottom: 3.2rem; }

    .step-item { text-align: center }
    .step-item .thumb { width: 100%; box-shadow: var(--shadow-accent); margin-bottom: 1.875rem; }
    .step-item .thumb img { width: 100%; object-fit: contain; margin: auto; }
    .step-item .content { width: 85%; margin: auto; }
    .step-item .content h2 { font-weight: 600; line-height: 1.2; color: var(--color); letter-spacing: initial; margin-bottom: 0.625rem; }
    .step-item .content h2 span { display: block; font-weight: 500; font-size: 1rem; color: var(--accent); margin-bottom: 0.625rem; line-height: 1; letter-spacing: .1rem }
    .step-item .content p { margin-bottom: 0; }

    @media (max-width: 1200px) {
        .step-item .content p { width: 100%; }
    }
    @media (max-width: 992px) {
        .step-section .row div[class*="col-"]:not(:last-child) { margin-bottom: 3.2rem; }

        .step-item .thumb img { width: auto; max-width: 100%; }
    }
    @media (max-width: 580px) {
        .step-section .heading-section { margin-bottom: 2.5rem; }

        .step-item .thumb img { max-height: 550px; }
        .step-item .content { max-width: 100%; }
    }


    .questions-section { width: 100vw; }
    .questions-section > .inner { overflow: hidden; background: var(--accent3); padding: 7rem 1.25rem 7rem 1.25rem; }
    
    .questions-section .heading-section { position: relative; max-width: 450px; margin-bottom: 2.5rem; z-index: 2; }

    .questions-section .question-item { position: relative; background: none; border: 0; z-index: 2; }
    .questions-section .question-item:not(:last-child) { margin-bottom: 1.25rem; }
    .questions-section .question-item .question-head { position: relative; margin-bottom: 0; }
    .questions-section .question-item .question-head .question-button { position: relative; display: block; width: 100%; padding: 0.313rem 0 0.313rem 1.825rem; font-weight: 500; line-height: 1.5; color: var(--color) !important; text-align: left; background: none; border: 0; box-shadow: none; outline: 0; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .questions-section .question-item .question-head .question-button:not(.collapsed):before { content: '\eb30'; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .questions-section .question-item .question-head .question-button:before { 
        content: '\eb5c'; 
        font-family: 'LineIcons';
        position: absolute; 
        top: 0.5rem; 
        left: 0; 
        width: 1.3rem; 
        height: 1.3rem; 
        border-radius: 50%;
        border: 2px solid var(--color); 
        font-weight: 600; 
        font-size: 0.65rem; 
        line-height: 1.15rem; 
        color: var(--color); 
        text-align: center; 
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .questions-section .question-item .question-body { background: var(--white); padding: 1.25rem; border-radius: 1.25rem; margin-top: 0.625rem; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .questions-section .question-item .question-body p { color: var(--color2); margin-bottom: 0; }

    .questions-section .thumb .thumb-area { position: relative; text-align: center; }
    /* .questions-section .thumb .thumb-area:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        margin: auto;
        width: 35rem;
        height: 35rem;
        border-radius: 50%;
        transform: translateY(-50%);
        background: #f2026b;
        background: linear-gradient(45deg, var(--accent2) 0%, var(--accent) 50%, var(--accent2) 100%);
        background-size: 200% 200%;
        background-position: left bottom;
        -webkit-animation-name: animateGradient;
        animation-name: animateGradient;
        -webkit-animation-duration: 4.5s;
        animation-duration: 4.5s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        perspective: 1000;
    } */
    .questions-section .thumb .thumb-area .thumb-img { position: relative; object-fit: contain; width: auto; margin: auto; max-height: 750px; filter: drop-shadow(var(--shadow)); }
    
    @media (max-width: 1400px) {
        .questions-section .thumb .thumb-area:before { width: 33rem; height: 33rem; }
    }
    @media (max-width: 1200px) {
        .questions-section > .inner { padding: 5rem 1.25rem 5rem 1.25rem; }
        .questions-section .heading-section .heading { font-size: 2.2rem; }

        .questions-section .thumb .thumb-area:before { width: 28rem; height: 28rem; }
        .questions-section .thumb .thumb-area .thumb-img { max-height: 650px; }
    }
    @media (max-width: 992px) {
        .questions-section .heading-section { margin-bottom: 1.875rem; }

        .questions-section .thumb { margin-bottom: 3.2rem; }
    }
    @media (max-width: 768px) {
        .questions-section .heading-section .heading { font-size: 2rem; }
    }
    @media (max-width: 580px) {
        .questions-section .inner { padding: 4rem 0 4rem 0; }

        /* .questions-section .question-item .question-head .question-button { font-size: 1rem; } */

        .questions-section .thumb .thumb-area:before { width: 22rem; height: 22rem; }
        .questions-section .thumb .thumb-area .thumb-img { max-height: 500px; }
    }


    .download-section { position: relative; }
    .download-section .download-area { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
    .download-section .content { width: 40%; }
    .download-section .thumb { position: relative; width: 50%; }
    .download-section .thumb .swiper .swiper-slide { width: auto !important; }
    .download-section .thumb .swiper-button-area { position: absolute; bottom: 1rem; left: -11rem; }
    .download-section .thumb .thumb-item { position: relative; height: 600px; }
    .download-section .thumb .thumb-item img { object-fit: contain; width: 100%; height: 100%; }
    
    @media (max-width: 1200px) {
        .download-section .thumb .swiper-button-area { left: -10rem; }
        .download-section .thumb .thumb-item { height: 570px; }
    }
    @media (max-width: 992px) {
        .download-section .content { width: 43%; }
        .download-section .thumb .swiper-button-area { left: -9rem; }
    }
    @media (max-width: 768px) {
        .download-section .download-area { align-items: flex-start; flex-direction: column; }
        .download-section .content { width: 70%; margin-bottom: 3.2rem; }
        .download-section .thumb { width: 100%; }
        .download-section .thumb .swiper-button-area { position: relative; bottom: 0; left: 0; margin-top: 1.875rem; float: right; }
        .download-section .thumb .thumb-item { width: auto; }
    }
    @media (max-width: 580px) {
        .download-section .content { width: 100%; }
    }


    .cta-section { position: relative; margin-top: 2rem; }
    .cta-section > .inner { overflow: hidden; background: var(--second); padding: 0; }
    .cta-section .cta-area { width: 100%; height: 100%; display: flex; align-items: stretch; flex-wrap: nowrap; justify-content: space-between; gap: 1rem; }
    .cta-section .cta-area .content { position: relative; width: 45%; padding: 4rem 0 4rem 0; z-index: 1; }
    .cta-section .cta-area .content .heading-section { margin-bottom: 2.5rem; }
    .cta-section .cta-area .content .heading-section .description { color: var(--color); }
    .cta-section .cta-area .content .act .btn:not(:last-child) { margin-right: 1.25rem; }
    .cta-section .cta-area .thumb { position: absolute; top: 0; right: 0; width: 50%; height: 100%; }
    .cta-section .cta-area .thumb .thumb-img { object-fit: cover; object-position: 100% 50%; width: 100%; height: 100%; z-index: 0; }

    @media (max-width: 1200px) {
        .cta-section .cta-area .content { width: 60%; }
        .cta-section .cta-area .thumb { width: 50%; }
    }
    @media (max-width: 992px) {
        .cta-section > .inner { padding: 5rem 1.25rem 5rem 1.25rem; }

        .cta-section .cta-area { display: block; }
        .cta-section .cta-area .content { width: 100%; padding: 0; margin-bottom: 3.2rem; }
        .cta-section .cta-area .thumb { position: relative; width: 100%; }
        .cta-section .cta-area .thumb .thumb-img { border-radius: 1.25rem; }
    }
    @media (max-width: 768px) {
        .cta-section > .inner { padding: 4rem 0 2rem 0; }
    }
    @media (max-width: 580px) {
        .cta-section > .inner { padding: 4rem 0 0.625rem 0; }
        .cta-section .inner .content .act .btn { margin-bottom: 1.25rem; }
    }


    .blog-section { position: relative; padding-top: 2.5rem; }
    .blog-section .heading-section { text-align: center; max-width: 450px; margin: auto; margin-bottom: 3.2rem; }
    .blog-section .heading-section .heading { margin-bottom: 0; }

    .blog-item {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 40rem;
        border-radius: 2rem;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
        -webkit-transform: var(--transform-fix);
        transform: var(--transform-fix);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
        filter: drop-shadow(0 1.25rem 0.625rem rgba(75,80,84,0.2));
        -webkit-filter: drop-shadow(0 1.25rem 0.625rem rgba(75,80,84,0.2));
        -moz-filter: drop-shadow(0 1.25rem 0.625rem rgba(75,80,84,0.2));
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .blog-item .thumb { position: relative; width: 100%; height: 100%; }
    .blog-item .thumb .thumb-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; object-position: center; -o-object-position: center; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .blog-item:hover .thumb .thumb-img { -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .blog-item .content { position: absolute; bottom: 0.625rem; width: 22rem; padding: 1.25rem; border-radius: 2rem; background: var(--white); }
    .blog-item .content h2 { font-weight: 600; color: var(--color); margin-bottom: 0.625rem; }
    .blog-item .content h4 { font-weight: 400; font-size: 0.875rem; color: #666b6d; }
    .blog-item .content h4 span { margin: 0 0.625rem; color: var(--color3) }
    .blog-item .content .description { color: var(--color3); margin-bottom: 0; overflow: hidden !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical; }

    .blog-item.blog-item-1 .content { width: 94%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%) }
    .blog-item.blog-item-2 .content { right: 0.625rem; }

    @media (max-width: 1200px) {
        .blog-section .heading-section { margin-bottom: 1.25rem; }
        .blog-section .row div[class*="col-"]:nth-child(n+1) { margin-top: 2.5rem; }

        .blog-item { height: 37rem; }
        .blog-item.blog-item-2 .content { width: 94%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%) }
    }
    @media (max-width: 992px) {
        .blog-item { height: 32rem; }
    }
    @media (max-width: 768px) {
        .blog-section { padding: 2.5rem 0; }
        .blog-section .heading-section { max-width: 400px; }
    }


    .qr-area img { width: 100%; height: 100%; max-width: 150px; border-radius: 1rem; }


    .contact-section .thumb .thumb-img { border-radius: 1.875rem; }
    .contact-section .form { margin-top: 5rem; }

    /* contact info */
    .contact-info { display: flex; align-items: flex-start; flex-wrap: nowrap; }
    .contact-info:not(:last-child) { margin-bottom: 1.875rem; }
    .contact-info .icon { width: 3rem; }
    .contact-info .icon i { font-size: 1.75rem; color: var(--accent); margin-top: 0.25rem; }
    .contact-info .info { width: calc(100% - 3rem); }
    .contact-info .info .label { font-weight: 500; color: var(--color); margin-bottom: 0.313rem; }
    .contact-info .info .value { margin-bottom: 0; }
    .contact-info .info .value a { color: var(--color2); }

    @media (max-width: 992px) {
        .contact-section .thumb { margin-bottom: 2.5rem; }
    }
    @media (max-width: 768px) {
        .contact-section { padding: 2.5rem 0; }
    }
    @media (max-width: 580px) {
        .contact-info .icon { width: 2.5rem; }
        .contact-info .icon i { font-size: 1.45rem; }
        .contact-info .info { width: calc(100% - 2.5rem); }
        .contact-info .info .label { font-size: 1.125rem; }
        .contact-info .info .value { font-size: 1rem !important; }
    }


    .list-info { position: relative; }
    .list-info > li:not(:last-child) { margin-bottom: 0.625rem; }

    .list-item { display: flex; align-items: flex-start; }
    .list-item .icon { width: 1.25rem; font-size: 1rem; line-height: 1; margin-top: 0.25rem; margin-right: 0.313rem; }
    .list-item:has(.icon) .text { width: calc(100% - 1.25rem - 0.313rem); }
    .list-item .text { width: 100%; font-weight: 400; font-size: 1rem; color: var(--color2); }
    .list-item .text:hover ~ .icon { background: red !important; }


    .footer { position: relative; margin-top: 2rem; margin-bottom: 2rem; z-index: 999; }
    .footer > .inner { position: relative; overflow: hidden; padding: 5rem 1.25rem 5rem 1.25rem; }
    .footer > .inner:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to top right, var(--light), var(--dark)); opacity: 0.05; z-index: 0; }
    
    .footer .footer-content-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
    .footer .footer-column { position: relative; }
    .footer .footer-column .column-title { font-weight: 600; font-size: 1.45rem; color: var(--color); margin-bottom: 1.425rem; }

    .footer .footer-column .logo-img { object-fit: contain; max-width: 220px; margin-bottom: 1.875rem; }
    .footer .footer-column .description { max-width: 285px; }
    .footer .footer-column .operational span { display: block; font-weight: 600; }
    .footer .footer-column .social-media { margin-top: 1.875rem; }
    .footer .footer-column .qr-area { margin-top: 1.25rem; }
    
    .footer .footer-menu li { display: block; }
    .footer .footer-menu li:not(:last-child) { margin-bottom: 0.313rem; }
    .footer .footer-menu li a { font-weight: 400; font-size: 1rem; color: var(--color2); }

    .footer-copyright { margin-top: 2.5rem }
    .footer-copyright p { letter-spacing: 0.05rem; color: var(--color2); margin-bottom: 0; }
    .footer-copyright p a { color: var(--color2); }

    @media (max-width: 1200px) {
        .footer .row > div[class*="col-"] { margin-bottom: 2.5rem; }
    }
    @media (max-width: 992px) {
        /* .footer .row > div[class*="col-"]:not(:last-child) { margin-bottom: 2.5rem; } */
    }
    @media (max-width: 768px) {
        .footer { margin-bottom: 1.25rem; }
    }
    @media (max-width: 580px) {
        .footer { margin-bottom: 0.625rem; }
        .footer .inner { padding: 4rem 0 4rem 0; }

        .footer-content-wrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
        .footer .footer-column { width: 100%; }
        .footer .footer-column .logo-img { max-width: 160px; }
    }
/* ------------------------------------ end content ------------------------------------ */


/* ------------------------------------ guide ------------------------------------ */
    .guide-section .inner { display: flex; align-items: stretch; justify-content: space-between; gap: 1.875rem; }
    .guide-section .sidebar-area { width: 330px; }
    .guide-section .content-area { width: calc(100% - 330px); }

    .guide-section .sidebar-area .head-area { display: none; align-items: center; justify-content: space-between; }
    .guide-section .sidebar-area .menu-area { height: calc(100vh - 85px); }
    .guide-section .sidebar-area .menu-area .menu-label { margin-top: 0.313rem; }
    .guide-section .sidebar-area .menu-area .menu-label span { font-weight: 500; font-size: 0.85rem; color: var(--color); }
    .guide-section .sidebar-area .menu-area .menu-item { position: relative; }
    .guide-section .sidebar-area .menu-area .menu-item .menu-link.active { background: var(--accent2); color: var(--accent); }
    .guide-section .sidebar-area .menu-area .menu-item a { display: block; width: 100%; padding: 0.45rem 0.95rem; border-radius: 0.625rem; font-weight: 400; font-size: 1rem; color: var(--color2); }
    .guide-section .sidebar-area .menu-area .menu-item a:hover { color: var(--accent); }

    .guide-section .sidebar-area .menu-area .menu-item a[aria-expanded]:not(.collapsed):before { transform: rotate(-90deg); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .guide-section .sidebar-area .menu-area .menu-item a[aria-expanded]:before { 
        content: '\ea5e'; 
        font-family: 'LineIcons';
        position: absolute; 
        top: 0.85rem; 
        left: 0; 
        font-size: 0.65rem; 
        line-height: 1; 
        color: var(--color); 
        text-align: center; 
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .guide-section .sidebar-area .menu-area .menu-item.parent:has(.active) > a { color: var(--accent); }
    .guide-section .sidebar-area .menu-area .menu-item.parent:has(.active) > a:before { color: var(--accent); }

    .guide-section .sidebar-area .menu-area .menu-item .menu-sub-body { padding-left: 0.85rem; }

    .guide-section .content-area .heading-section { position: relative; margin-bottom: 1.25rem; }
    .guide-section .content-area .heading-section .heading { font-weight: 500; margin-bottom: 0.625rem; }
    .guide-section .content-area .heading-section .description { font-weight: 400; margin-bottom: 0; }
    .guide-section .content-area .separator { border-bottom: 1px solid var(--border); }
    .guide-section .content-area .wrap-item { margin-top: 3.2rem; }
    .guide-section .content-area .wrap-item .item { margin-left: 0; }
    .guide-section .content-area .wrap-item .item .item-heading { display: flex; align-items: flex-start; justify-content: space-between; color: var(--color); margin-bottom: 0.5rem; }
    .guide-section .content-area .wrap-item .item .item-heading .number { position: relative; width: 2.2rem; font-weight: 600; }
    .guide-section .content-area .wrap-item .item .item-heading .text { width: calc(100% - 2.2rem); margin-bottom: 0; font-weight: 600; letter-spacing: 0; }
    .guide-section .content-area .wrap-item .item .item-description { color: var(--color2); }
    .guide-section .content-area .wrap-item .item .item-description b { font-weight: 500; }
    .guide-section .content-area .wrap-item .item-thumb { text-align: center; margin-top: 1rem; }
    .guide-section .content-area .wrap-item .item-thumb .thumb-img { position: relative; overflow: hidden; border-radius: 1rem; object-fit: contain; width: auto; max-height: 700px; border: 1px solid var(--light); box-shadow: var(--shadow-sm); }

    .guide-toggle-menu { display: none; background: var(--accent); width: calc(100% - 5rem); padding: 0.5rem 1.25rem; border-radius: 0.625rem; font-weight: 500; font-size: 1rem; color: var(--color-white); }
    .guide-toggle-menu:focus, .guide-toggle-menu:hover { background: var(--accent); color: var(--color-white); }
    .guide-toggle-menu-close { float: right; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--light); color: var(--accent); }

    @media (max-width: 1200px) {
        .guide-section .sidebar-area { width: 280px; }
        .guide-section .content-area { width: calc(100% - 280px); }
    }
    @media (max-width: 992px) {
        .guide-section .inner { display: block; flex-direction: column; }
        .guide-section .sidebar-area { 
            position: fixed; 
            top: 0 !important; 
            right: 0; 
            width: calc(100%) !important; 
            z-index: 110 !important; 
            height: 100%; 
            padding: 1.25rem 0.625rem 0.625rem 0.625rem; 
            opacity: 0; 
            visibility: hidden; 
            background: var(--background); 
            -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); 
        }
        .guide-section .sidebar-area.show-menu { opacity: 1; visibility: visible; -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

        .guide-section .sidebar-area .head-area { display: flex; }
        .guide-section .sidebar-area .menu-area { height: calc(100vh - 85px); margin-top: 1rem; padding-bottom: 40px; }

        .guide-toggle-menu { display: block; z-index: 5; }

        .guide-section .content-area { width: 100%; position: relative; }
    }

    
/* ------------------------------------ end guide ------------------------------------ */


/* ------------------------------------ blog ------------------------------------ */
    .comment_form { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex }
    .comment_form>div { width: 50% }
    .comment_form>div:last-child { margin-left: 1rem }
    .comment_form .input-field { width: 100% }
    .comment_form .input-field:nth-child(n+2) { margin-top: 1rem }
    .comment_form textarea.input-field { padding-top: 2.2rem; height: 14rem; border-radius: 3rem; resize: none }
    .comment_form .button { margin-top: .6rem; width: 100% }

    @media (max-width: 767.98px) {
        .comment_form { display:block }
        .comment_form>div { display: block; width: 100% }
        .comment_form>div:last-child { margin-left: 0 }
        .comment_form textarea.input-field { margin-top: 1rem }
    }


    .blog_single { width: 100vw }
    .blog_single__wrapper { width: 100% }

    .blog_single__thumbnail {
        padding-top: 10rem;
        filter: drop-shadow(0px 20px 10px rgba(75,80,84,0.2));
        -webkit-filter: drop-shadow(0px 20px 10px rgba(75,80,84,0.2));
        -moz-filter: drop-shadow(0px 20px 10px rgba(75,80,84,0.2));
        -webkit-transform: var(--transform-fix);
        transform: var(--transform-fix)
    }
    .blog_single__thumbnail img { width: 100% }

    .blog_single__content { overflow: visible; padding-bottom: 13rem; position: relative }
    .blog_single__content::after { content: ""; clear: both; display: table }
    .blog_single__content>*:not(.grid) { width: calc(100% - 40rem); margin: 0 auto }
    .blog_single__content h1 { font-size: 6rem; font-weight: 600; color: #000; letter-spacing: -.4rem; margin-top: 4rem !important }
    .blog_single__content h3 { font-size: 3rem; font-weight: 600; color: #000; letter-spacing: -.2rem; margin-top: 4rem !important }
    .blog_single__content h4 { font-size: 1.6rem; color: #666b6d; margin: 3rem auto 3rem auto !important; font-weight: 400 }
    .blog_single__content h4 span { margin: 0 1.2rem; color: #cad1d4 }
    .blog_single__content .social { position: absolute; top: 24rem; left: 10% }
    .blog_single__content .social ul li { display: block }
    .blog_single__content .social ul li:not(:first-child) { margin: 2rem 0 0 0 }
    .blog_single__content p { font-size: 1.8rem; line-height: 3.4rem; color: #666b6d }
    .blog_single__content p:not(:first-child) { margin-top: 4rem }
    .blog_single__content .grid+.paragraph { margin-top: 2rem }
    .blog_single__content--images { width: calc(100% + 40rem); float: left; margin-left: -20rem; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; background-clip: content-box; position: relative }
    .blog_single__content .grid { margin-top: 5rem }
    .blog_single__content .grid .paragraph { margin-top: 0 }
    .blog_single__content .grid-item { width: 31%; margin-bottom: 3rem }
    .blog_single__content img.grid-item {
        border-radius: 3rem;
        filter: drop-shadow(0px 20px 10px rgba(75,80,84,0.2));
        -webkit-filter: drop-shadow(0px 20px 10px rgba(75,80,84,0.2));
        -moz-filter: 0px 20px 10px rgba(75,80,84,0.2);
        -webkit-transform: var(--transform-fix);
        transform: var(--transform-fix)
    }
    .blog_single__content .grid-item--width2 { width: 66% }
    .blog_single__content .grid-item--width3 { width: 50% }
    .blog_single__comment { width: calc(100% - 40rem); margin: 0 auto; display: block; padding: 10rem 0 }
    .blog_single__comment h3 { font-size: 3rem; font-weight: 600; color: #000; letter-spacing: -.2rem; margin-bottom: 5rem }

    .blog_single__comment--single {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        position: relative
    }
    .blog_single__comment--single:nth-child(n+2) { margin-top: 1rem }
    .blog_single__comment--single .image { width: 10rem; height: 9.8rem }
    .blog_single__comment--single .image img { width: 100%; height: 100% }

    .blog_single__comment--single .comment {
        width: calc(100% - 11rem);
        border: 4px solid #f0f7fc;
        padding: 3.6rem 4rem;
        border-radius: 2rem;
        position: relative
    }

    .blog_single__comment--single .comment::before {
        content: "";
        display: block;
        position: absolute;
        background-image: url(../images/comment-corner.png);
        background-repeat: no-repeat;
        width: 2.2rem;
        height: 1.9rem;
        background-size: cover;
        top: -0.4rem;
        left: -1.3rem
    }
    .blog_single__comment--single .comment .name { font-size: 2rem; font-weight: 600; color: #000; line-height: 3rem; letter-spacing: -.1rem }
    .blog_single__comment--single .comment .date { font-size: 1.4rem; color: #666b6d; line-height: 3rem }

    .blog_single__comment--single .comment .reply-button {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 8.9rem;
        height: 4.1rem;
        border-radius: 3rem;
        border: 4px solid #f0f7fc;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        background: #1369ec;
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(19,105,236,0)), color-stop(50%, rgba(255,177,107,0)), color-stop(51%, #f2026b), to(#ff8aaf));
        background: linear-gradient(0deg, rgba(19,105,236,0) 0%, rgba(255,177,107,0) 50%, #f2026b 51%, #ff8aaf 100%);
        background-size: 200% 200%;
        background-position: center bottom;
        -webkit-transform: var(--transform-fix);
        transform: var(--transform-fix)
    }
    .blog_single__comment--single .comment .reply-button:hover {
        background-color: transparent;
        filter: drop-shadow(0px 10px 20px rgba(245,69,144,0.4));
        -webkit-filter: drop-shadow(0px 10px 20px rgba(245,69,144,0.4));
        -moz-filter: drop-shadow(0px 10px 20px rgba(245,69,144,0.4));
        background-position: center top;
        border: none
    }
    .blog_single__comment--single .comment .reply-button:hover a { color: white }
    .blog_single__comment--single .comment .reply-button a {
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 1.4rem;
        font-weight: 600;
        color: #666b6d;
        letter-spacing: .1rem;
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

    .blog_single__comment--single.reply { width: calc(100% - 11rem); margin-left: auto }
    .blog_single__comment--single.reply .comment { background-color: #f0f7fc }
    .blog_single__comment--single.reply .comment::before { background-image: url(../images/reply-corner.png) }
    .blog_single__comment--single.reply .comment .reply-button { background-color: white; border-color: white }
    .blog_single__comment--single.reply .comment .reply-button:hover a { color: white }
    .blog_single .blog_related { width: 100vw }
    .blog_single .blog_related__wrapper { background-color: #f0f7fc; padding: 10rem 0 }
    .blog_single .blog_related__header {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 4rem
    }

    .blog_single .blog_related__header .screenshot-nav-next { margin-left: 1rem }
    .blog_single .blog_related__header h3 { font-size: 3rem; font-weight: 600; color: #000; letter-spacing: -.4px }
    .blog_single .blog_related__header i { font-size: 3rem }
    .blog_single .blog_related-slider { width: 100% !important }
    .blog_single .blog_related-slider a { display: block; height: 33.1rem }
    .blog_single .blog_related-slide { height: 100% }
    .blog_single .blog_related-single { height: 100% }
    .blog_single .blog_related-single .blog__single-info {
        width: 30rem;
        height: calc(100% - 2rem);
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 1rem;
        padding: 4.5rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
    .blog_single .comment_form { padding-bottom: 10rem }
    .blog_single .comment_form__wrapper { width: calc(100% - 40rem); margin: 0 auto }
    .blog_single .comment_form__wrapper h3 {
        font-size: 3rem;
        font-weight: 600;
        letter-spacing: -.4px;
        color: #000;
        margin-bottom: 5rem
    }

    .blog_single .comment_form__wrapper .input-field { border-color: #f0f7fc }
    .blog_single .comment_form__wrapper .input-field:focus { border-color: #c9deed }
    .blog_single .comment_form__wrapper .button {
        border-color: #ffdbe8;
        cursor: pointer;
        background: #1369ec;
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(19,105,236,0)), color-stop(50%, rgba(255,177,107,0)), color-stop(51%, #f2026b), to(#ff8aaf));
        background: linear-gradient(0deg, rgba(19,105,236,0) 0%, rgba(255,177,107,0) 50%, #f2026b 51%, #ff8aaf 100%);
        background-size: 200% 200%;
        background-position: center bottom;
        -webkit-transform: var(--transform-fix);
        transform: var(--transform-fix);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000
    }
    .blog_single .comment_form__wrapper .button i { color: #f2046c }

    .blog_single .comment_form__wrapper .button:hover {
        background-position: center top;
        border: none;
        filter: drop-shadow(0px 10px 20px rgba(245,69,144,0.4));
        -webkit-filter: drop-shadow(0px 10px 20px rgba(245,69,144,0.4));
        -moz-filter: drop-shadow(0px 10px 20px rgba(245,69,144,0.4))
    }

    .blog_single .comment_form__wrapper .button:hover i { color: white }

    @media (min-width: 991.98px) and (max-width: 1200px) {
        .blog_single__content>*:not(.grid) { width:calc(100% - 20rem); margin: 0 auto }
        .blog_single__content .social { left: 0 }
        .blog_single__comment { width: calc(100% - 20rem) }
        .blog_single .comment_form__wrapper { width: calc(100% - 20rem) }
    }

    @media (max-width: 991.98px) {
        .blog_single__content { padding-bottom:5rem }
        .blog_single__content>*:not(.grid) { width: 100%; margin: 0 }
        .blog_single__content h1 { font-size: 4.5rem; letter-spacing: -.2rem }
        .blog_single__content .social { position: static; top: initial; left: initial; margin-top: 5rem }
        .blog_single__content .social ul li { display: inline-block }
        .blog_single__content .social ul li:not(:first-child) { margin-left: 1rem; margin-top: 0 }
        .blog_single__content img.grid-item { -o-object-fit: cover; object-fit: cover; width: 30%; height: 30rem }
        .blog_single__content img.grid-item--width2 { width: 30% }
        .blog_single__content .paragraph.grid-item { width: 100% }
        .blog_single__comment { width: 100% }
        .blog_single .comment_form__wrapper { width: 100% }
    }

    @media (max-width: 767.98px) {
        .blog_single img.grid-item { width:100%; -o-object-position: center 20%; object-position: center 20% }
    }

    @media (max-width: 575.98px) {
        .blog_single__content { padding:0 2rem 13rem 2rem }
        .blog_single__content .paragraph { font-size: 1.6rem; line-height: 3rem }
        .blog_single .blog_related__wrapper { padding: 5rem 3rem }
        .blog_single .blog_related__header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column }
        .blog_single .blog_related__header .related-post-nav { margin-top: 2rem }
        .blog_single__comment { padding: 5rem 3rem }
        .blog_single__comment--single.reply { width: 100% }
        .blog_single .comment_form__wrapper { padding: 0 3rem }
    }


    /* .blog_hero__wrapper { padding: 17rem 0 0 0 !important } */
    .blog_hero .row { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
    .blog_hero .row>div:last-child { margin-bottom: -1rem }
    .blog_hero h1 { font-size: 4rem; font-weight: 600; color: #000 }
    .blog_hero ul { display: inline; margin: 0 4.5rem 1.5rem 0; position: relative; bottom: -1rem }
    .blog_hero ul li { display: inline-block }
    .blog_hero ul li a { font-size: 1.4rem; font-weight: 500; color: #666b6d; -webkit-transition: all .25s ease; transition: all .25s ease }
    .blog_hero ul li a:hover { color: #f2026b }
    .blog_hero ul li a i { margin-right: 1rem }
    .blog_hero ul li:nth-child(n+2) { margin-left: 1rem }
    .blog_hero .icon {
        width: 14.5rem;
        height: 14.5rem;
        border-radius: 50%;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: #f2026b;
        background: linear-gradient(45deg, #f2026b 0%, #ff8aaf 100%);
        -webkit-transform: var(--transform-fix);
        transform: var(--transform-fix);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
        filter: drop-shadow(0px 20px 20px rgba(245,69,144,0.4));
        -webkit-filter: drop-shadow(0px 20px 20px rgba(245,69,144,0.4));
        -moz-filter: drop-shadow(0px 20px 20px rgba(245,69,144,0.4));
        position: relative;
        bottom: -1.5rem
    }

    .blog_hero .icon i { font-size: 4.8rem; color: var(--white) }

    @media (min-width: 991.98px) and (max-width: 1200px) {
        .blog_hero__wrapper { padding: 18.4rem 2rem 0 2rem }
    }

    @media (max-width: 991.98px) {
        .blog_hero .row { -webkit-box-orient:vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center }
        .blog_hero ul { display: block; bottom: initial; margin: 2rem auto; text-align: center }
        .blog_hero h1 { text-align: center }
    }

    
    .blog__header { width: 100%; margin-bottom: 5rem }
    .blog__header .search { position: relative; width: 33rem }
    .blog__header .search .input-field { border-color: #f0f7fc; padding-left: 3rem }
    .blog__header .search i { font-size: 2rem; color: #969c9e; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: 3.4rem; cursor: pointer }
    .blog__header .row>div:last-child { margin-left: auto }
    .blog .button { margin: 10rem auto 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex }
    .blog .button {
        border: 4px solid #ffdbe8;
        background: #1369ec;
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(19,105,236,0)), color-stop(50%, rgba(255,177,107,0)), color-stop(51%, #f2026b), to(#ff8aaf));
        background: linear-gradient(0deg, rgba(19,105,236,0) 0%, rgba(255,177,107,0) 50%, #f2026b 51%, #ff8aaf 100%);
        background-size: 200% 200%;
        background-position: center bottom;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
        -webkit-transform: var(--transform-fix);
        transform: var(--transform-fix);
        backface-visibility: hidden;
        perspective: 1000
    }

    .blog .button i { color: #f2046c; -webkit-transition: all .25s ease; transition: all .25s ease }
    .blog .button:focus,.blog .button:hover { background-color: #ffdbe8 }
    .blog .button:focus i,.blog .button:hover i { color: white }
    .blog .button:hover {
        background-position: center top;
        border: none;
        filter: drop-shadow(0px 10px 20px rgba(245,69,144,0.4));
        -webkit-filter: drop-shadow(0px 10px 20px rgba(245,69,144,0.4));
        -moz-filter: drop-shadow(0px 10px 20px rgba(245,69,144,0.4))
    }


    

    .blog-item.blog-item-2.left .blog__single-info { right: initial; left: 1rem }
    .blog__content .row>div:nth-child(n+3) { margin-top: 3rem }

    .blog__single-info { background-color: white; padding: 4rem 4.4rem 2.8rem 4.4rem; border-radius: 2rem; position: absolute; width: 34rem }
    
    .blog__single-image { width: 100%; height: 100% }
    .blog__single-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 3rem; -webkit-transition: all .25s ease; transition: all .25s ease }
    .blog__single:hover .blog__single-image img { -webkit-transform: scale(1.1); transform: scale(1.1) }
    .blog .col-lg-4 .blog__single-info { bottom: 1rem; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%) }
    .blog .col-lg-8 .blog__single-info { bottom: 1rem; right: 1rem }
    .blog .col-lg-8.left .blog__single-info { right: initial; left: 1rem }
    .blog__content .row>div:nth-child(n+3) { margin-top: 3rem }

    @media (min-width: 991.98px) and (max-width: 1200px) {
        .blog__header .row>.col-lg-3:nth-child(2) { margin-left:3rem }
    }
    @media (max-width: 991.98px) {
        .blog { padding:5rem 0 }
        .blog__header .dropdown-wrapper { width: 100% }
        .blog__header .date__dropdown { margin-top: 2rem }

        .blog__header .search { margin-top: 2rem; width: 100% }
        .blog__header .search input { width: 100% }

        .blog__content .row>div:nth-child(n+3) { margin-top: initial }
        .blog__content .row>div { margin-top: 3rem !important }
        .blog .col-lg-8 .blog__single-info { bottom: 1rem; right: initial; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%) }

        .blog .col-lg-8.left .blog__single-info { right: initial; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%) }

        .blog__single-info { width: calc(100% - 2rem) }
    }
    @media (max-width: 576px) {
        .blog { padding:10rem 3rem }
    }
/* ------------------------------------ end blog ------------------------------------ */


/* ------------------------------------ other ------------------------------------ */
    .pricing { width: 100vw }
    .pricing__wrapper { width: 100%; padding: 15rem 0 }
    .pricing .section-heading { text-align: center; margin: 0 auto 5rem auto; width: 33% }
    .pricing__single {
        padding: 4.5rem 0 2.3rem 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 3rem
    }

    .pricing__single .icon {
        width: 13.8rem;
        height: 13.8rem;
        background-color: white;
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .pricing__single .icon i {
        font-size: 6rem
    }

    .pricing__single .row>div>a {
        display: block;
        width: 100%
    }

    .pricing__single h4 {
        font-size: 1.8rem;
        font-weight: 600;
        color: white;
        margin-top: 2.4rem
    }

    .pricing__single h3 {
        font-size: 7rem;
        font-weight: 500;
        color: white;
        margin-top: -.4rem
    }

    .pricing__single h6 {
        font-size: 1.8rem;
        font-weight: 500;
        margin-top: 1rem
    }

    .pricing__single .list {
        background-color: white;
        position: relative;
        padding: 3.7rem 2rem 2.1rem 2rem;
        border-radius: 2rem;
        width: 97%;
        margin-top: 4.3rem
    }

    .pricing__single .list::before {
        content: "";
        width: 4.8rem;
        height: 2.2rem;
        background: url(../images/arrow.webp) no-repeat;
        background-size: cover;
        display: block;
        position: absolute;
        top: -2rem;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%)
    }

    .pricing__single .list ul {
        font-size: 1.6rem;
        line-height: 4rem;
        color: #666b6d;
        width: 100%;
        padding-left: 5.3rem
    }

    .pricing__single .list ul li {
        position: relative
    }

    .pricing__single .list ul li::before {
        content: "\f00c";
        font-family: "Font Awesome 5 Pro";
        font-weight: 900;
        font-size: 1.4rem;
        position: absolute;
        top: 50%;
        left: -2.2rem;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        display: inline-block
    }

    .pricing__single .list ul li.not-included::before {
        content: "\f00d"
    }

    .pricing__single .button {
        border: 4px solid transparent;
        width: 100%;
        height: -webkit-max-content;
        height: -moz-max-content;
        height: max-content;
        margin-top: 1.8rem;
        color: white
    }

    .pricing__single .button:hover,.pricing__single .button:focus {
        background-color: transparent;
        color: white;
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    .pricing__single-1 {
        background: #9341d4;
        background: linear-gradient(45deg, #9341d4 0%, #d98efb 100%);
        filter: drop-shadow(0px 20px 10px rgba(147,65,212,0.4));
        -webkit-filter: drop-shadow(0px 20px 10px rgba(147,65,212,0.4));
        -moz-filter: drop-shadow(0px 20px 10px rgba(147,65,212,0.4));
        -webkit-transform: var(--transform-fix);
        transform: var(--transform-fix);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000
    }

    .pricing__single-1 .icon i {
        color: #c67af1
    }

    .pricing__single-1 h6 {
        color: #f0d6fd
    }

    .pricing__single-1 .list ul li::before {
        color: #c67af1
    }

    .pricing__single-2 {
        background: #1369ec;
        background: linear-gradient(45deg, #1369ec 0%, #65bef4 100%);
        filter: drop-shadow(0px 20px 10px rgba(33,120,237,0.4));
        -webkit-filter: drop-shadow(0px 20px 10px rgba(33,120,237,0.4));
        -moz-filter: drop-shadow(0px 20px 10px rgba(33,120,237,0.4));
        -webkit-transform: var(--transform-fix);
        transform: var(--transform-fix);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000
    }

    .pricing__single-2 .icon i {
        color: #3890f0
    }

    .pricing__single-2 h6 {
        color: #bcddf5
    }

    .pricing__single-2 .list ul li::before {
        color: #3890f0
    }

    .pricing__single-3 {
        background: #19a5a1;
        background: linear-gradient(45deg, #19a5a1 0%, #63e8e4 100%);
        filter: drop-shadow(0px 20px 10px rgba(79,188,186,0.4));
        -webkit-filter: drop-shadow(0px 20px 10px rgba(79,188,186,0.4));
        -moz-filter: drop-shadow(0px 20px 10px rgba(79,188,186,0.4));
        -webkit-transform: var(--transform-fix);
        transform: var(--transform-fix);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000
    }

    .pricing__single-3 .icon i {
        color: #2db7b3
    }

    .pricing__single-3 h6 {
        color: #c9f7f6
    }

    .pricing__single-3 .list ul li::before {
        color: #2db7b3
    }

    @media (max-width: 991.98px) {
        .pricing .section-heading {
            width:75%;
            margin-bottom: 5rem
        }

        .pricing__wrapper {
            padding: 5rem 2rem
        }

        .pricing .row>div:nth-child(n+2) {
            margin-top: 5rem
        }
    }

    .screenshot {
        width: 100vw
    }

    .screenshot__wrapper {
        background-color: #f0f7fc;
        margin: 0 auto;
        overflow: visible;
        padding: 15rem 0;
        width: calc(100% - 10rem);
        margin: 0 auto;
        border-radius: 3rem
    }

    .screenshot-slider {
        width: 100vw;
        margin-top: 9.8rem;
        margin-left: -2.5%;
        overflow: visible !important
    }

    .screenshot-slide {
        text-align: center;
        opacity: .4;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        filter: drop-shadow(0px 20px 10px rgba(75,80,84,0.4));
        -webkit-filter: drop-shadow(0px 20px 10px rgba(75,80,84,0.4));
        -moz-filter: drop-shadow(0px 20px 10px rgba(75,80,84,0.4));
        -webkit-transform: var(--transform-fix);
        transform: var(--transform-fix);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000
    }

    .screenshot .swiper-slide-active {
        opacity: 1
    }

    .screenshot__info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end
    }

    .screenshot-nav-prev,.screenshot-nav-next {
        display: inline-block;
        cursor: pointer
    }

    .screenshot-nav-prev i,.screenshot-nav-next i {
        font-size: 5rem;
        color: #8e9a9d;
        -webkit-transition: all .25s ease;
        transition: all .25s ease
    }

    .screenshot-nav-prev:hover i,.screenshot-nav-next:hover i {
        color: #ff0087
    }

    .screenshot-nav-prev:focus,.screenshot-nav-next:focus {
        outline: 0
    }

    .screenshot-nav-next {
        margin-left: 4rem
    }

    @media (max-width: 991.98px) {
        .screenshot__wrapper {
            width:calc(100% - 5rem)
        }

        .screenshot__info {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

        .screenshot-slide {
            text-align: center
        }

        .screenshot-slide a {
            margin: 0 auto
        }

        .screenshot-slider {
            margin-left: 0;
            width: 100%;
            margin-top: 5rem
        }
    }


    .newsletter {
        width: 100vw
    }

    .newsletter__wrapper {
        width: calc(100% - 10rem);
        margin: 0 auto;
        position: relative;
        padding: 1.5rem 0 0 0
    }

    .newsletter__wrapper::before {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 82%;
        background-color: #fef2f6;
        border-radius: 3rem
    }

    .newsletter__info {
        position: relative;
        bottom: -4.6rem
    }

    .newsletter__info .section-heading {
        width: 88%
    }

    .newsletter__info--field {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 3rem
    }

    .newsletter__info button {
        width: 23.1rem;
        margin-left: 1rem;
        background: #f2026b;
        -webkit-transition: all .25s ease;
        transition: all .25s ease;
        color: white;
        background: -webkit-gradient(linear, left bottom, left top, from(#f2026b), color-stop(50%, #ff8aaf), to(#f2026b));
        background: linear-gradient(0deg, #f2026b 0%, #ff8aaf 50%, #f2026b 100%);
        border: none;
        background-size: 200% 200%;
        background-position: bottom;
        -webkit-transform: var(--transform-fix);
        transform: var(--transform-fix);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
        filter: drop-shadow(0px 10px 10px rgba(245,69,144,0.4));
        -webkit-filter: drop-shadow(0px 10px 10px rgba(245,69,144,0.4));
        -moz-filter: drop-shadow(0px 10px 10px rgba(245,69,144,0.4));
        cursor: pointer
    }

    .newsletter__info button:hover {
        background-position: top
    }

    .newsletter__img {
        text-align: right;
        position: relative
    }

    .newsletter__img img {
        z-index: 10;
        position: relative
    }

    .newsletter__img::before {
        content: "";
        width: 63.6rem;
        height: 36.7rem;
        background: url(../images/newsletter-texture.png) no-repeat;
        background-size: cover;
        display: block;
        position: absolute;
        bottom: 0;
        right: -15rem;
        z-index: 1
    }

    @media (max-width: 991.98px) {
        .newsletter { margin-top:5rem }
        .newsletter__wrapper { width: calc(100% - 5rem); background-color: #fef2f6; border-radius: 3rem; padding-top: 10rem; overflow: hidden }
        .newsletter__wrapper::before { display: none }
        .newsletter__img { text-align: center; margin-top: 2rem }
        .newsletter__img::before { right: initial; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) }
        .newsletter__info { position: static; bottom: initial }
        .newsletter__info--field { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center }
        .newsletter__info button { margin: 2rem auto 0 auto; width: 33rem }
    }


    .input-field {
        width: 33rem;
        height: 6.5rem;
        border: 4px solid #ffdbe8;
        border-radius: 10rem;
        padding: 0 2rem 0 3rem;
        font-size: 1.6rem;
        color: #666b6d
    }

    .input-field::-webkit-input-placeholder { color: #666b6d }
    .input-field::-moz-placeholder { color: #666b6d }
    .input-field:-ms-input-placeholder { color: #666b6d }
    .input-field:-moz-placeholder { color: #666b6d }
    .input-field:focus { outline: 0; border: 4px solid #fe7fa9 }
    .newsletter-2 .newsletter__wrapper { overflow: visible }
    .newsletter-2 .newsletter__wrapper::before { height: 90% !important }
    .newsletter-2 .container { overflow: visible }
    .newsletter-2 .row>div { overflow: visible }
    .newsletter-2 .section-heading { width: 57%; margin-bottom: 3rem }
    .newsletter-2 .comment_form { z-index: 50; position: relative }
    .newsletter-2 .newsletter__img { position: relative; right: -5rem }
    .newsletter-2 .newsletter__img img { width: auto; height: auto }
    .newsletter-2 .newsletter__img::before { width: 66rem; height: 40rem }

    @media (max-width: 991.98px) {
        .newsletter-2 .section-heading { width:80% }
        .newsletter-2 .newsletter__wrapper { padding: 5rem 2rem 0 2rem; overflow: hidden }
        .newsletter-2 .newsletter__wrapper::before { height: 100% }
        .newsletter-2 .newsletter__img { position: static; right: initial; text-align: center }
    }
/* ------------------------------------ end other ------------------------------------ */


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

    @-webkit-keyframes slide-up {
        from { -webkit-transform: translateY(0%); transform: translateY(0%); }
        to { -webkit-transform: translateY(-250%); transform: translateY(-250%); }
    }
    @keyframes slide-up {
        from { -webkit-transform: translateY(0%); transform: translateY(0%); }
        to { -webkit-transform: translateY(-250%); transform: translateY(-250%); }
    }
    
    /* Shape rotate */
    .rotateme {
    -webkit-animation-name: rotateme;
            animation-name: rotateme;
    -webkit-animation-duration: 40s;
            animation-duration: 40s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    }

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

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

    @-webkit-keyframes rotate3d {
        0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
        100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
    }

    @keyframes rotate3d {
        0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
        100% { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); }
    }

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

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

    @-webkit-keyframes ripple-white {
        0% {
            -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
        }
        100% {
            -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px rgba(255, 255, 255, 0);
        }
    }

    @keyframes ripple-white {
        0% {
            -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2);
        }
        100% {
            -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px rgba(255, 255, 255, 0);
            box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), 0 0 0 40px rgba(255, 255, 255, 0.2), 0 0 0 60px rgba(255, 255, 255, 0);
        }
    }

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

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

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

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

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

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

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

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

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

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

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

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

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


/* ------------------------------------ nota ------------------------------------ */
    .nota-section { background: rgba(78, 78, 78, 1); position: relative; overflow: hidden; padding: 2.5rem 0; min-height: 100vh; }
    .nota-section * { color: var(--black); }
    .nota-section p { margin-bottom: 0.313rem; }
    .nota-section .nota-title { font-weight: 700; font-size: 1rem; color: var(--accent); margin-bottom: 0.75rem; }
    .nota-section .brand-img { overflow: hidden; width: 10rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--light); margin-bottom: 0.625rem; }
    .nota-section .brand-img img { object-fit: contain; object-position: center; max-width: 9rem; max-height: 9rem; }
    .nota-section .brand-name { font-weight: 600; }
    .nota-section .trans-code { font-weight: 600; letter-spacing: 0.02rem; color: var(--color); text-transform: uppercase; margin-bottom: 0; }
    .nota-section .line-separator { border-top: 1px solid var(--border); }
    .nota-section .qr-img { overflow: hidden; width: 11rem; aspect-ratio: 1/1; padding: 0.313rem; display: flex; align-items: center; justify-content: center; border-radius: 0.4rem; border: 2px solid var(--light); }
    .nota-section .qr-img img { max-width: 11rem; object-fit: contain; object-position: center; }

    .nota-section .inner { max-width: 768px; margin: auto; border-radius: 1rem; padding: 2.5rem; background: var(--background); border: 1px solid var(--light); box-shadow: 0 0.313rem 1.125rem 0 rgba(0, 0, 0, 0.08); margin-bottom: 0.938rem; }
    .nota-section .inner.qrcode { text-align: center; display: none; flex-direction: column; align-items: center; gap: 0.625rem; }

    .nota-section .head { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1.875rem; margin-bottom: 1.875rem; }
    .nota-section .head .left-area { position: relative; z-index: 2; }
    .nota-section .head .right-area { position: relative; z-index: 2; flex-shrink: 0; width: 35%; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.625rem; }

    .nota-section .info-area { display: flex; align-items: flex-start; flex-direction: column; gap: 0.5rem; }
    .nota-section .info-item { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
    .nota-section .info-item .label { flex-shrink: 0; }
    .nota-section .info-item .value { text-align: right; font-weight: 500; }

    .nota-section .grand-total { position: relative; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 1.875rem; }
    .nota-section .grand-total span { width: 23.5%; font-weight: 600; font-size: 1.25rem; color: var(--text); }
    .nota-section .grand-total span:nth-child(2) { text-align: left; }
    
    /* download */
    .nota-section .download { margin-bottom: 1.25rem; display: flex; align-items: center; justify-content: flex-end; }
    .nota-section .download a { font-weight: 600; }
    .nota-section .download a:not(:last-child) { margin-right: 0.313rem; }
    .nota-section .download .trigg-download { border: 1px solid var(--color); color: var(--color) !important; }
    .nota-section .download .trigg-print { background: #F61372; color: var(--white);}
    .nota-section .download .trigg-print span { color: var(--white); margin-right: 0.313rem; }

    /* footer */
    .nota-section .foot { position: relative; overflow: hidden; margin-top: 1.875rem; text-align: center; color: var(--light); }
    .nota-section .foot * { color: var(--light); }
    .nota-section .foot a:hover, .nota-section .foot a:focus { color: var(--accent); }

    @media (max-width: 768px) {
        .nota-section .head .right-area { width: 45%; }
    }
    @media (max-width: 580px) {
        .nota-section { padding: 0.938rem 0; }
        .nota-section .inner { padding: 0.938rem; }
        .nota-section .inner.qrcode { display: flex; }
        .nota-section * { font-size: 14px; line-height: 1.3; }

        .nota-section .head { flex-direction: column; justify-content: center; gap: 1rem; }
        .nota-section .head .left-area { text-align: center; }
        .nota-section .head .right-area { display: none; }

        .nota-section .brand-img { width: 6rem; margin: auto; margin-bottom: 1rem; }
        .nota-section .brand-img img { max-width: 5.5rem; max-height: 5.5rem; }

        .nota-section .foot span { display: block; }
    }


    .timeline-area { --dot-width: 1.3rem; position: relative; width: 100%; display: flex; align-items: stretch; justify-content: flex-start; flex-direction: column; flex-wrap: nowrap; gap: 1.25rem; }
    .timeline-area::after { content: ''; position: absolute; top: 0; left: calc(var(--dot-width)/2); width: 1px; height: 98%; background: var(--border); }
    .timeline-area .timeline-item { position: relative; width: calc(100%); }
    .timeline-area .timeline-item::after {
        content: '';
        position: absolute;
        width: var(--dot-width);
        height: var(--dot-width);
        /* aspect-ratio: 1/1;/ */
        top: 0.1rem;
        bottom: 0;
        left: 0;
        padding: 0;
        background: var(--border);
        background-clip: content-box;
        border: 4px solid var(--background);
        border-radius: 50%;
        z-index: 1;
        -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition);
    }
    .timeline-area .timeline-item .timeline-content { padding-left: calc(var(--dot-width) + 0.625rem); }
    
    .timeline-area .timeline-item.active:after { background: var(--accent); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }
    .timeline-area .timeline-item.active .timeline-content p { color: var(--accent) !important; }
/* ------------------------------------ end nota ------------------------------------ */