@import"bootstrap.min.css";
@import"plugins/fontawesome.min.css";
@import"plugins/nice-select.css";
@import"plugins/magnific-popup.css";
@import"plugins/swiper.min.css";
@import"plugins/splitting.min.css";
@import"plugins/jquery-ui-min.css";
@import"plugins/odometer-min.css";
@import"plugins/animate.css";
@import"icons.min.css";
@import"https://fonts.googleapis.com/css2?family=Onest:wght@100;200;300;400;500;600;700;800;900&display=swap";
@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;500;600;700&family=Nunito:wght@400;600;700&display=swap');
:root {
    --body-font: "Kumbh Sans",sans-serif;
    --transition: all 0.5s ease-in-out;
    --p1: 1, 166, 107;
    --p2: #FFAF40;
    --p3: #EEF5DB;
    --p4: #FF4800;
    --p5: #444CE7;
    --p6: #FAFE02;
    --p7-gradient: linear-gradient(274deg, #ff9a33 4.65%, #ffc700 91.31%);
    --p8: #FF622B;
    --p9: #1F00FF;
    --p10: #03FFB7;
    --p11: #1649FF;
    --s2: #01A66B;
    --bg1: #005651;
    --bg2: #4B655C;
    --bg3: #ECFFFC;
    --bg4: #C3EDDF;
    --bg5: #EFEEE7;
    --bg6: #E5FDCE;
    --bg7: #F4F3F0;
    --bg8: #F5F8FF;
    --bg9: #C6E3D5;
    --bg10: #00F09A;
    --bg11: #F5F5F5;
    --bg12: #EFF9F6;
    --bg13: #171E33;
    --bg14: #141A2A;
    --bg15: #1D263F;
    --bg16: #E6F7F1;
    --bg17: #F9F9F9;
    --bg18: #E6E5E5;
    --bg19: #006963;
    --bg20: #F7F7FC;
    --s1: 0, 86, 81;
    --n0: #fff;
    --n1: 236, 255, 252;
    --n2: 255, 255, 255;
    --n3: 73, 76, 101;
    --n4: 255, 175, 64;
    --n5: 28, 30, 48;
    --n6: 195, 237, 223;
    --n7: 230, 247, 241;
    --n8: 205, 228, 220;
    --n9: #0D0D0D;
    --n10: #4A5551;
    --n11: rgb(22, 73, 255, 15%);
    --n12: #424F76;
    --black-clr: #1C1E30;
    --gradient-p1: linear-gradient(90deg, rgba(12, 169, 64, 0.08) 0.68%, rgba(236, 88, 88, 0.08) 100%);
    --box-shadow-p1: 0px 6px 30px 0px rgba(0, 0, 0, 0.08);
   
}

.display-one {
    font-size: 120px
}

.display-two {
    font-size: 88px
}

.display-three {
    font-size: 76px
}

.display-four {
    font-size: 60px
}

.display-five {
    font-size: 56px
}

.display-six {
    font-size: 44px
}

.display-ex-one {
    font-size: 200px
}

.fs-one, h1, h1 > a {
    font-size: 70px
}

.fs-two, h2, h2 > a {
    font-size: 57px
}

.fs-three, h3, h3 > a {
    font-size: 43px
}

.fs-four, h4, h4 > a {
    font-size: 32px
}

.fs-five, h5, h5 > a {
    font-size: 24px;
    line-height: 150%
}

.fs-six, h6, h6 > a {
    font-size: 18px;
    line-height: 150%
}

.fs-seven {
    font-size: 16px;
    line-height: 150%
}

.fs-eight {
    font-size: 14px;
    line-height: 150%
}

.fs-nine {
    font-size: 12px;
    line-height: 150%
}

table thead tr th {
    font-size: 18px;
    line-height: 150%
}

a, p, button, span, label, li {
    font-size: 16px;
    line-height: 150%
}

@media(max-width: 1199px) {
    h1, h1 > a {
        font-size: 57px;
        line-height: 74.1px
    }

    h2, h2 > a {
        font-size: 43px;
        line-height: 55.9px
    }

    .preloader {
        background-size: 30%
    }

    .display-ex-one {
        font-size: 140px
    }
}

.pt-120 {
    padding-top: 120px
}

.pb-120 {
    padding-bottom: 120px
}

@media(max-width: 991px) {
    .display-one {
        font-size: 72px;
        line-height: 86.4px
    }

    .display-two {
        font-size: 64px;
        line-height: 76.8px
    }

    .display-three {
        font-size: 56px;
        line-height: 67.2px
    }

    .display-four {
        font-size: 48px;
        line-height: 46.4px
    }

    .display-five {
        font-size: 42px;
        line-height: 54.6px
    }

    .display-six {
        font-size: 32px;
        line-height: 38.4px
    }

    .display-ex-one {
        font-size: 120px
    }

    .fs-one, h1, h1 > a {
        font-size: 40px;
        line-height: 48px
    }

    .fs-two, h2, h2 > a {
        font-size: 32px;
        line-height: 38.4px
    }

    .fs-three, h3, h3 > a {
        font-size: 24px;
        line-height: 31.2px
    }

    .fs-four, h4, h4 > a {
        font-size: 20px;
        line-height: 26px
    }

    .fs-five, h5, h5 > a {
        font-size: 18px;
        line-height: 20.8px
    }

    .fs-six, h6, h6 > a {
        font-size: 16px;
        line-height: 18.8px
    }

    .fs-seven {
        font-size: 14px;
        line-height: 18.8px
    }

    .fs-eight {
        font-size: 12px;
        line-height: 18px
    }

    table thead tr th {
        font-size: 15px;
        line-height: 20.8px
    }

    a, p, span, button, label, li {
        font-size: 14px;
        line-height: 22px
    }

    .pt-120 {
        padding-top: 60px
    }

    .pb-120 {
        padding-bottom: 60px
    }

    .banner-section .overlay .sec-img {
        display: none
    }

    .banner-section .banner-content {
        padding: 80px 0 90px
    }
}

@media(max-width: 575px) {
    .display-one {
        font-size: 56px;
        line-height: 67.2px
    }

    .display-two {
        font-size: 48px;
        line-height: 46.4px
    }

    .display-three {
        font-size: 42px;
        line-height: 54.6px
    }

    .display-four {
        font-size: 32px;
        line-height: 38.4px
    }

    .display-five {
        font-size: 24px;
        line-height: 31.2px
    }

    .display-six {
        font-size: 32px;
        line-height: 38.4px
    }

    .display-ex-one {
        font-size: 70px
    }

    .pt-120 {
        padding-top: 50px
    }

    .pb-120 {
        padding-bottom: 50px
    }
}

html {
    scroll-behavior: initial !important
}

body {
    font-family: var(--body-font);
    background-color: rgba(var(--n1, 1));
    color: rgba(var(--n5, 1));
    padding: 0;
    margin: 0;
    font-weight: 400;
    overflow-x: hidden;
    position: relative
}

section, footer {
    overflow: hidden
}

a, p, button, span, label, li {
    margin: 0;
    font-family: var(--body-font);
    color: #000000;
    transition: var(--transition);
    font-weight: 400
}

.transition {
    transition: var(--transition)
}

a {
    text-decoration: none;
    outline: none;
    color: rgba(var(--n3), 1)
}

    a:focus, a:hover {
        text-decoration: none;
        outline: none;
        color: rgba(var(--n3), 1)
    }

h1, h1 > a, h2, h2 > a, h3, h3 > a, h4, h4 > a, h5, h5 > a, h6, h6 > a, .display-one, .display-two, .display-three, .display-four, .display-five, .display-six, .display-ex-one, .heading {
    font-family: var(--body-font);
    color: rgba(var(--n5), 1);
    font-weight: 700;
    padding: 0;
    margin: 0;
    line-height: 120%;
    display: block;
    transition: var(--transition)
}

    h1 span, h1 > a span, h2 span, h2 > a span, h3 span, h3 > a span, h4 span, h4 > a span, h5 span, h5 > a span, h6 span, h6 > a span, .display-one span, .display-two span, .display-three span, .display-four span, .display-five span, .display-six span, .display-ex-one span, .heading span {
        font-size: inherit;
        font-family: inherit;
        color: inherit;
        line-height: inherit;
        font-weight: inherit
    }

.phosphor-icon {
    font-family: "Phosphor"
}

img {
    max-width: 100%;
    height: auto
}

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

    ul li, ol li {
        font-size: inherit;
        font-weight: inherit;
        color: inherit
    }

button {
    border: none;
    cursor: pointer;
    padding: 0;
    background-color: rgba(0,0,0,0)
}

input, textarea {
    padding: 12px 20px;
    color: rgba(var(--n3), 1);
    width: 100%;
    font-family: var(--body-font);
    outline-color: rgba(0,0,0,0);
    font-size: 16px;
    border-radius: 6px;
    background-color: rgba(var(--n2), 1);
    border: 1px solid rgba(var(--n4), 0.3)
}

    input::-moz-placeholder, textarea::-moz-placeholder {
        color: rgba(var(--n3), 0.4);
        font-size: 16px
    }

    input::placeholder, textarea::placeholder {
        color: rgba(var(--n3), 0.4);
        font-size: 16px
    }

    input:focus, textarea:focus {
        outline: 1px solid rgba(var(--p1), 1);
        box-shadow: none;
        border: 1px solid rgba(0,0,0,0)
    }

    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0
    }

    input[type=number] {
        -moz-appearance: textfield
    }

    input[type=checkbox] {
        width: initial;
        height: initial
    }

select {
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    outline: none
}

.max-auto {
    max-width: 100%
}

.max-un {
    max-width: unset
}

.d-rtl {
    direction: rtl
}

.section-bg2 {
    background: #c3eddf
}

.badge-cmn {
    border: 1px solid #005651 !important
}

.collapsing {
    transition: var(--transition)
}

.alt-color a, .alt-color p, .alt-color span, .alt-color h1, .alt-color h2, .alt-color h3, .alt-color h4, .alt-color h5, .alt-color h6, .alt-color i, .alt-color select, .alt-color button {
    color: rgba(var(--n2), 1)
}

.p1-color {
    color: rgba(var(--p1), 1)
}

.p2-color {
    color: var(--p2) !important
}

.text-black {
    color: #1c1e30 !important
}

.p2-bg {
    background: var(--p2) !important
}

.s1-color {
    color: rgba(var(--s1), 1)
}

.s2-color {
    color: var(--s2) !important
}

.s2-bg {
    background: var(--s2) !important
}

.n1-color {
    color: rgba(var(--n1), 1)
}

.n2-color {
    color: rgba(var(--n2), 1)
}

.n3-color {
    color: rgba(var(--n3), 1)
}

.n4-color {
    color: rgba(var(--n4), 1)
}

.n5-color {
    color: rgba(var(--n5), 1)
}

.n6-color {
    color: rgba(var(--n6), 1)
}

.n7-color {
    color: rgba(var(--n7), 1)
}

.n8-color {
    color: rgba(var(--n8), 1)
}

.n9-color {
    color: var(--n9)
}

.n10-color {
    color: var(--n10)
}

.n9-bg {
    background: var(--n9)
}

.n11-color {
    color: var(--n11)
}

.n11-bg {
    background: var(--n11)
}

.n12-color {
    color: var(--n12)
}

.n12-bg {
    background: var(--n12)
}

.p1-bg-color {
    background-color: rgba(var(--p1), 1)
}

.p3-clr {
    color: var(--p3) !important
}

.p3-bg {
    background-color: var(--p3) !important
}

.p4-clr {
    color: var(--p4) !important
}

.p4-bg {
    background-color: var(--p4) !important
}

.p5-clr {
    color: var(--p5) !important
}

.p5-bg {
    background-color: var(--p5) !important
}

.p6-clr {
    color: var(--p6) !important
}

.p6-bg {
    background-color: var(--p6) !important
}

.p8-clr {
    color: var(--p8) !important
}

.p8-bg {
    background-color: var(--p8) !important
}

.p9-clr {
    color: var(--p9) !important
}

.p9-bg {
    background-color: var(--p9) !important
}

.p10-clr {
    color: var(--p10) !important
}

.p10-bg {
    background-color: var(--p10) !important
}

.p11-clr {
    color: var(--p11) !important
}

.p11-bg {
    background-color: var(--p11) !important
}

.s1-bg-color {
    background-color: rgba(var(--s1), 1)
}

.n1-bg-color {
    background-color: rgba(var(--n1), 1)
}

.n2-bg-color {
    background-color: rgba(var(--n2), 1)
}

.n3-bg-color {
    background-color: rgba(var(--n3), 1)
}

.n4-bg-color {
    background-color: rgba(var(--n4), 1)
}

.n5-bg-color {
    background-color: rgba(var(--n5), 1)
}

.n6-bg-color {
    background-color: #ffca007a;
}

.n7-bg-color {
    background-color: rgba(var(--n7), 1)
}

.n8-bg-color {
    background-color: rgba(var(--n8), 1)
}

.n0-color {
    color: #000000 !important
}

.n0-bg {
    background: #fff !important
}

.bg1 {
    background: #ffca00 !important;
}

.bg2 {
    background: var(--bg2) !important
}

.bg2-clr {
    color: var(--bg2) !important
}

.bg3 {
    background: var(--bg3) !important
}

.bg4 {
    background: var(--bg4) !important
}

.bg5 {
    background: var(--bg5) !important
}

.bg6 {
    background: var(--bg6) !important
}

.bg7 {
    background: var(--bg7) !important
}

.bg6-clr {
    color: var(--bg6) !important
}

.bg8 {
    background: var(--bg8) !important
}

.bg8-clr {
    color: var(--bg8) !important
}

.bg9 {
    background: var(--bg9) !important
}

.bg9-clr {
    color: var(--bg9) !important
}

.bg10 {
    background: var(--bg10) !important
}

.bg10-clr {
    color: var(--bg10) !important
}

.bg11 {
    background: var(--bg11) !important
}

.bg11-clr {
    color: var(--bg11) !important
}

.bg12 {
    background: var(--bg12) !important
}

.bg13 {
    background: var(--bg13) !important
}

.bg14 {
    background: var(--bg14) !important
}

.bg15 {
    background: var(--bg15) !important
}

.bg16 {
    background: var(--bg16) !important
}

.bg17 {
    background: var(--bg17) !important
}

.bg18 {
    background: var(--bg18) !important
}

.bg19 {
    background: #ffca00 !important
}

.bg20 {
    background: var(--bg20) !important
}

.black-clr {
    color: #ffffff !important
}

.black-bg {
    background: var(--black-clr) !important
}

.black-border {
    border: 1px solid var(--black-clr)
}

.fw-mid {
    font-weight: 500
}

.bg-trsns {
    background-color: rgba(0,0,0,0) !important
}

.text-gradient {
    background: var(--gradient-p1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0,0,0,0)
}

.max-ch {
    max-width: 60ch
}

.file-upload {
    border-radius: 48px;
    border: 1px solid rgba(var(--p1), 1)
}

    .file-upload input {
        display: none
    }

    .file-upload .file {
        cursor: pointer;
        position: relative
    }

        .file-upload .file .file-custom {
            border-radius: 20px
        }

    .file-upload .add-file {
        color: rgba(var(--p1), 1)
    }

.btn-popup-animation {
    z-index: 1;
    transition: var(--transition)
}

    .btn-popup-animation i {
        z-index: 1;
        color: rgba(var(--p1), 1)
    }

    .btn-popup-animation:before, .btn-popup-animation::after {
        content: "";
        position: absolute;
        z-index: -1;
        background-color: rgba(var(--n1), 1);
        border-radius: 50%;
        width: 80px;
        min-width: 80px;
        height: 80px
    }

@media(max-width: 576px) {
    .btn-popup-animation:before, .btn-popup-animation::after {
        width: 60px;
        min-width: 60px;
        height: 60px
    }
}

.btn-popup-animation:before {
    z-index: 1
}

.btn-popup-animation:after {
    background-color: rgba(0,0,0,0);
    border: 2px solid rgba(var(--n1), 1);
    z-index: -1;
    animation: waves 2s 1s ease-out infinite
}

@media(max-width: 576px) {
    .btn-popup-animation {
        width: 60px;
        min-width: 60px;
        height: 60px
    }
}

.circle-text {
    width: 160px;
    min-width: 160px;
    height: 160px;
    border-radius: 50%;
    background-color: rgba(var(--s1), 1);
    border: 1px solid rgba(var(--p1), 1);
    position: relative
}

@media(max-width: 991px) {
    .circle-text {
        width: 125px;
        min-width: 125px;
        height: 125px
    }
}

.circle-text .text {
    animation: rotate 50s linear infinite;
    width: 100%;
    height: 100%;
    position: absolute
}

    .circle-text .text p {
        transform: translate(50%, 5px)
    }

    .circle-text .text span {
        position: absolute;
        font-size: inherit;
        font-weight: 600;
        transform-origin: 0 72px
    }

@media(max-width: 991px) {
    .circle-text .text p {
        transform: translate(50%, 0)
    }

    .circle-text .text span {
        transform-origin: 0 60px
    }
}

.circle-text:hover .text {
    animation-play-state: paused
}

.slide-vertical .char, .slide-horizontal .char {
    overflow: hidden;
    color: rgba(0,0,0,0)
}

    .slide-vertical .char::after, .slide-vertical .char::before, .slide-horizontal .char::after, .slide-horizontal .char::before {
        visibility: visible;
        color: #ffffff;
        transition: transform .5s cubic-bezier(0.9, 0, 0.2, 1);
        transition-delay: calc(.2s + .02s*(var(--char-index)))
    }

    .slide-vertical .char::before, .slide-horizontal .char::before {
        color: #ce6d0a;
        font-weight: 500;
        transition-delay: calc(.02s*(var(--char-index)))
    }

.slide-vertical:hover .char:before, .slide-horizontal:hover .char:before {
    transition-delay: calc(.2s + .02s*(var(--char-index)))
}

.slide-vertical:hover .char:after, .slide-horizontal:hover .char:after {
    transition-delay: calc(.02s*(var(--char-index)))
}

.slide-vertical .char:before {
    transform: translateY(-100%)
}

.slide-vertical:hover .char:before {
    transform: translateY(0%)
}

.slide-vertical:hover .char::after {
    transform: translateY(100%)
}

.slide-horizontal .char:before {
    transform: translateX(110%)
}

.slide-horizontal:hover .char:before {
    transform: translateX(0%)
}

.slide-horizontal:hover .char::after {
    transform: translateX(-110%)
}

.box-style {
    position: relative;
    overflow: hidden;
    z-index: 0;
    text-align: center
}

    .box-style:hover::before {
        width: 400%;
        height: 400%
    }

    .box-style::before {
        content: "";
        position: absolute;
        top: var(--y);
        left: var(--x);
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        border-radius: 100%;
        background-color: #ffc10678;
        transition: all .7s ease;
        z-index: -1
    }

    .box-style.first-box::before {
        background-color: rgba(var(--p1), 1)
    }

    .box-style.box-second {
        background-color: #000000;
        padding: 12px 24px;
        gap: 5px;
        border-radius: 100px
    }

        .box-style.box-second span, .box-style.box-second i {
            color: rgba(var(--n2), 1)
        }

        .box-style.box-second i {
            transition: var(--transition)
        }

        .box-style.box-second:hover {
            border-color: #000000;
        }

            .box-style.box-second:hover i {
                transform: rotateY(180deg)
            }

            .box-style.box-second:hover i, .box-style.box-second:hover span {
                color: rgba(var(--n5), 1)
            }

        .box-style.box-second::before {
            background-color: rgba(var(--n1), 1)
        }

        .box-style.box-second.first-alt {
            background-color: rgba(var(--n6), 1);
            border: 1px solid rgba(var(--n5), 1)
        }

            .box-style.box-second.first-alt span, .box-style.box-second.first-alt i {
                color: rgba(var(--n5), 1)
            }

            .box-style.box-second.first-alt:hover {
                border-color: rgba(var(--p1), 1)
            }

                .box-style.box-second.first-alt:hover span, .box-style.box-second.first-alt:hover i {
                    color: rgba(var(--n2), 1)
                }

            .box-style.box-second.first-alt::before {
                background-color: rgba(var(--p1), 1)
            }

        .box-style.box-second.second-alt {
            background-color: rgba(var(--n2), 1);
            border: 1px solid rgba(var(--n5), 1);
            border-radius: 12px
        }

            .box-style.box-second.second-alt span, .box-style.box-second.second-alt i {
                color: rgba(var(--p1), 1)
            }

            .box-style.box-second.second-alt:hover {
                border-color: rgba(var(--p1), 1)
            }

                .box-style.box-second.second-alt:hover span, .box-style.box-second.second-alt:hover i {
                    color: rgba(var(--n2), 1)
                }

            .box-style.box-second.second-alt::before {
                background: linear-gradient(274deg, #ffca00 4.65%, #ffca00 91.31%);
            }

        .box-style.box-second.third-alt {
            background-color: rgba(var(--n4), 1);
            border: 1px solid rgba(var(--n4), 1)
        }

            .box-style.box-second.third-alt span, .box-style.box-second.third-alt i {
                color: rgba(var(--n5), 1)
            }

            .box-style.box-second.third-alt:hover {
                border-color: rgba(var(--n2), 1)
            }

                .box-style.box-second.third-alt:hover span, .box-style.box-second.third-alt:hover i {
                    color: rgba(var(--n5), 1)
                }

            .box-style.box-second.third-alt::before {
                background-color: rgba(var(--n2), 1)
            }

    .box-style.box-third {
        background-color: rgba(0,0,0,0);
        width: 230px;
        min-width: 230px;
        height: 230px;
        border-radius: 50%;
        border: 1px solid rgba(var(--n8), 1)
    }

@media(max-width: 1199px) {
    .box-style.box-third {
        width: 180px;
        min-width: 180px;
        height: 180px
    }
}

@media(max-width: 767px) {
    .box-style.box-third {
        width: 150px;
        min-width: 150px;
        height: 150px
    }
}

.box-style.box-third::before {
    background-color: rgba(var(--p1), 1)
}

.box-style.box-third:hover {
    border-color: rgba(0,0,0,0)
}

    .box-style.box-third:hover i {
        transform: rotateY(180deg)
    }

    .box-style.box-third:hover i, .box-style.box-third:hover span {
        color: rgba(var(--n2), 1)
    }

.box-style.box-third span, .box-style.box-third i {
    color: rgba(var(--n5), 1);
    transition: var(--transition)
}

.box-style.box-third.second-alt {
    background-color: rgba(var(--n2), 1)
}

.box-style.box-forth::before {
    background-color: var(--bg1)
}

.box-style.box-five {
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.1);
    transition: all .4s
}

.box-style.box-six::before {
    background-color: var(--p10)
}

.box-style2 {
    border-radius: 100px;
    background: linear-gradient(274deg, #ffc700 4.65%, #ff9a33 91.31%);
    transition: all .4s
}

    .box-style2:hover {
        background: linear-gradient(274deg, #ff9a33 4.65%, #ffc700 91.31%)
    }

.box-style3 {
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(335deg, rgba(31, 0, 255, 0.86) -6.4%, rgba(196, 113, 237, 0.86) 68.1%, rgba(255, 123, 131, 0.86) 97.04%, rgba(160, 45, 201, 0.86) 105.26%),#1f00ff;
    transition: all .4s
}

    .box-style3:hover {
        background: linear-gradient(335deg, rgba(31, 0, 255, 0.86) -6.4%, rgba(196, 113, 237, 0.86) 68.1%, rgba(255, 123, 131, 0.86) 97.04%, rgba(160, 45, 201, 0.86) 105.26%),#1f00ff
    }

.v-border {
    background: rgba(var(--p1), 0.2);
    width: 1px;
    height: 25px
}

.gradient-text {
    background: -webkit-linear-gradient(274deg, #000000 4.65%, #000000 91.31%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0,0,0,0)
}


 
.v-line::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 96px;
    background-color: rgba(var(--n5), 1)
}

.v-line.f-width::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    z-index: -1;
    background-color: rgba(var(--n8), 1)
}

.v-line.f-width-second::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    left: 0;
    z-index: -1;
    background-color: rgba(var(--n4), 1)
}

@media(max-width: 991px) {
    .sec-img img {
        width: 100% !important
    }
}

.cus-border {
    border-color: #ffca00 !important
}

    .cus-border.b-second {
        border-color: rgba(var(--s1), 0.1) !important
    }

    .cus-border.b-third {
        border-color: rgba(var(--n5), 1) !important
    }

    .cus-border.b-fourth {
        border-color: rgba(var(--p1), 0.4) !important
    }

    .cus-border.b-fifth {
        border-color: rgba(var(--n8), 1) !important
    }

    .cus-border.b-sixth {
        border-color: rgba(var(--n2), 1) !important
    }

    .cus-border.b-seventh {
        border-color: rgba(var(--n4), 1) !important
    }

    .cus-border.b-black {
        border-color: #000 !important
    }

    .cus-border.b-gray {
        border-color: rgba(28,30,48,.1) !important
    }

.border-bottom-dash {
    border-bottom: 1px dashed rgba(0,0,0,0)
}

.ul-dots li {
    list-style: disc
}

.ul-decimal li {
    list-style: decimal
}

.counters .odometer span {
    color: inherit;
    font-size: inherit;
    font-weight: inherit
}

.social-area a {
    border: 1px solid rgba(var(--p1), 0.1);
    border-radius: 50%;
    background: rgba(0,0,0,0);
    transition: var(--transition);
    width: 48px;
    min-width: 48px;
    height: 48px
}

@media(max-width: 991px) {
    .social-area a {
        width: 38px;
        min-width: 38px;
        height: 38px
    }
}

.social-area a i {
    transition: var(--transition);
    color: rgba(var(--p1), 1)
}

.social-area a:hover {
    background: rgba(var(--p1), 1)
}

    .social-area a:hover i {
        color: rgba(var(--n2), 1)
    }

.image-box-effect:hover img:nth-child(1) {
    transform: translateX(0) scaleX(1);
    opacity: 1;
    filter: blur(0)
}

.image-box-effect:hover img:nth-child(2) {
    transform: translateX(-50%) scaleX(2);
    opacity: 0;
    filter: blur(12px)
}

.image-box-effect img:nth-child(1) {
    transform: translateX(50%) scaleX(2);
    opacity: 0;
    filter: blur(12px)
}

.image-box-effect .img {
    position: absolute;
    transition: .9s
}

.mouse-follower {
    z-index: 10
}

    .mouse-follower span {
        z-index: 10;
        opacity: 1;
        top: -10px;
        left: -10px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        position: fixed;
        transition: 100ms ease-in-out;
        pointer-events: none
    }

    .mouse-follower .cursor-outline {
        height: 30px;
        width: 30px;
        border: 1px solid rgba(var(--n1), 1)
    }

    .mouse-follower .cursor-dot {
        height: 6px;
        width: 6px;
        background: rgba(var(--n1), 1);
        transition: var(--transition)
    }

    .mouse-follower.hide-cursor span {
        border-color: rgba(0,0,0,0);
        background: rgba(0,0,0,0)
    }

    .mouse-follower.highlight-cursor-head {
        cursor: none
    }

        .mouse-follower.highlight-cursor-head .cursor-outline {
            height: 0;
            width: 0
        }

        .mouse-follower.highlight-cursor-head .cursor-dot {
            height: 150px;
            width: 150px;
            background: rgba(var(--n4), 1);
            mix-blend-mode: difference
        }

@media(max-width: 991px) {
    .mouse-follower.highlight-cursor-head .cursor-dot {
        height: 80px;
        width: 80px
    }
}

.mouse-follower.highlight-cursor-para {
    cursor: none
}

    .mouse-follower.highlight-cursor-para .cursor-outline {
        height: 0;
        width: 0
    }

    .mouse-follower.highlight-cursor-para .cursor-dot {
        height: 100px;
        width: 100px;
        background: rgba(var(--n6), 1);
        mix-blend-mode: difference
    }

@media(max-width: 991px) {
    .mouse-follower.highlight-cursor-para .cursor-dot {
        height: 60px;
        width: 60px
    }
}

.table thead th, .table td, .table th {
    border: none
}

.ovf-unset {
    overflow-x: unset !important
}

iframe {
    border: 0;
    width: 100%
}

::-webkit-scrollbar-track {
    background: rgba(var(--n5), 1)
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px
}

::-webkit-scrollbar-button, ::-webkit-scrollbar-thumb {
    background: #ffc700
}

.cus-scrollbar {
    overflow-y: auto;
    overflow-x: hidden;
    position: sticky;
    max-height: 90vh;
    top: 100px
}

    .cus-scrollbar::-webkit-scrollbar-track {
        background: rgba(0,0,0,0)
    }

    .cus-scrollbar::-webkit-scrollbar {
        width: 3px;
        height: 3px;
        background-color: rgba(0,0,0,0)
    }

    .cus-scrollbar::-webkit-scrollbar-button, .cus-scrollbar::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0)
    }

    .cus-scrollbar::-webkit-scrollbar-thumb {
        background-color: #000;
        height: 10px;
        overflow: visible
    }

    .cus-scrollbar:hover::-webkit-scrollbar {
        width: 3px
    }

    .cus-scrollbar:hover::-webkit-scrollbar-track {
        background: rgba(255,211,198,.5)
    }

    .cus-scrollbar:hover::-webkit-scrollbar-button, .cus-scrollbar:hover::-webkit-scrollbar-thumb {
        background: rgba(var(--p1), 1)
    }

.d-center {
    display: flex;
    justify-content: center;
    align-items: center
}

.cus-z-1 {
    z-index: -1
}

.cus-z0 {
    z-index: 0
}

.cus-z1 {
    z-index: 1
}

.cus-z2 {
    z-index: 2
}

.top-sticky {
    top: 100px
}

.scrollToTop {
    position: fixed;
    bottom: 0;
    width: 45px;
    height: 45px;
    right: 30px;
    top:83%;
    background-color: #000000;
    padding: 0 12px;
    color: rgba(var(--p1), 1);
    line-height: 120%;
    font-size: 12px;
    text-align: center;
    z-index: 9;
    cursor: pointer;
    transition: all 1s;
    transform: translateY(100%)
}

    .scrollToTop:hover i {
        margin: 0
    }

    .scrollToTop i {
        transition: var(--transition);
        margin-bottom: -25px
    }

    .scrollToTop.active {
        bottom: 30px;
        transform: translateY(0%)
    }

#preloader {
    background-color: #000000;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center
}

@keyframes preload {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.singleTab .nav-links {
    cursor: pointer
}

.singleTab .tabContents {
    position: relative
}

    .singleTab .tabContents .tabItem {
        transform: translateY(100px);
        position: absolute !important;
        z-index: -1;
        top: 0;
        width: 100%;
        opacity: 0;
        transition: .8s all
    }

        .singleTab .tabContents .tabItem.active {
            position: initial !important;
            z-index: 1;
            opacity: 1;
            transform: translateY(0)
        }

.pagination li a {
    color: rgba(var(--n2), 1)
}

.pagination .page-item .page-link {
    outline: none;
    bottom: 0;
    padding: 0;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 5px;
    z-index: 999
}

    .pagination .page-item .page-link:hover, .pagination .page-item .page-link.active, .pagination .page-item .page-link:focus {
        background-color: rgba(var(--p1), 1);
        border-color: rgba(0,0,0,0);
        box-shadow: none
    }

.breadcrumb-area .breadcrumb {
    row-gap: 8px
}

    .breadcrumb-area .breadcrumb a, .breadcrumb-area .breadcrumb span {
        color: rgba(var(--n3), 1);
        font-size: 16px;
        font-weight: 500
    }

@media(max-width: 991px) {
    .breadcrumb-area .breadcrumb a, .breadcrumb-area .breadcrumb span {
        font-size: 16px
    }
}

.breadcrumb-area .breadcrumb .breadcrumb-item + .breadcrumb-item {
    position: relative
}

    .breadcrumb-area .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        content: "";
        font-family: "Phosphor";
        z-index: 1;
        position: absolute;
        left: 0;
        font-size: 17px;
        color: rgba(var(--n5), 1)
    }

.breadcrumb-area.style2 .breadcrumb .breadcrumb-item::before {
    color: #fff
}

.checkbox-single {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

    .checkbox-single input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0
    }

    .checkbox-single .checkmark {
        position: absolute;
        left: 0;
        height: 16px;
        width: 16px;
        border-radius: 5px;
        border: 1px solid #ff9a33 ;
    }

        .checkbox-single .checkmark::after {
            content: ""
        }

    .checkbox-single input:checked ~ .checkmark::after {
        content: "";
        position: absolute;
        font-family: "Phosphor"
    }

    .checkbox-single input:checked ~ .checkmark:after {
        display: block
    }

.switch-wrapper .active {
    color: rgba(var(--p1), 1)
}

.switch-wrapper .switch {
    width: 50px;
    height: 26px
}

    .switch-wrapper .switch .slider {
        cursor: pointer;
        border-radius: 34px;
        transition: var(--transition);
        background: rgba(var(--p1), 1)
    }

        .switch-wrapper .switch .slider::before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            border-radius: 50%;
            transform: translateX(3px);
            background-color: rgba(var(--p1), 1);
            transition: var(--transition)
        }

    .switch-wrapper .switch input:checked + .slider::before {
        transform: translateX(25px)
    }

.single-radio {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position: relative
}

    .single-radio:hover input ~ .checkmark {
        background-color: rgba(0,0,0,0)
    }

    .single-radio .checkmark {
        position: absolute;
        left: 0;
        width: 28px;
        min-width: 28px;
        height: 28px;
        border: 1px solid rgba(var(--p1), 0.1)
    }

        .single-radio .checkmark::after {
            content: "";
            font-size: 20px;
            position: absolute
        }

    .single-radio input:checked ~ .checkmark {
        background-color: rgba(var(--n4), 1)
    }

        .single-radio input:checked ~ .checkmark::after {
            content: "";
            display: block;
            color: rgba(var(--p1), 1);
            font-family: "Phosphor"
        }

.slider-btn .slide-button {
    outline: none;
    width: 60px;
    min-width: 60px;
    height: 60px;
    border-radius: 100px;
    background: rgba(var(--n6), 1);
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.1),1px 13px 13px 0px rgba(0,0,0,.09),2px 29px 17px 0px rgba(0,0,0,.05),4px 52px 21px 0px rgba(0,0,0,.01),7px 81px 23px 0px rgba(0,0,0,0);
    z-index: 1;
    margin: -10px
}

@media(max-width: 991px) {
    .slider-btn .slide-button {
        width: 45px;
        min-width: 45px;
        height: 45px
    }
}

.slider-btn .slide-button:hover {
    color: rgba(var(--n2), 1);
    background-color: rgba(var(--n4), 1)
}

.slider-btn.second .slide-button {
    box-shadow: none;
    border: 1px solid #ff9a33;
    background-color: rgba(0,0,0,0);
    color: #ff9a33
}

    .slider-btn.second .slide-button.active, .slider-btn.second .slide-button:hover {
        color: rgba(var(--n2), 1);
        background-color: #ff9a33
    }

.slider-btn.third .slide-button {
    box-shadow: none;
    border: 1px solid rgba(var(--n2), 1);
    background-color: rgba(0,0,0,0);
    color: rgba(var(--n2), 1)
}

    .slider-btn.third .slide-button:hover {
        color: rgba(var(--p1), 1);
        background-color: rgba(var(--n2), 1)
    }

.slider-pagination span {
    width: 10px;
    min-width: 10px;
    height: 10px;
    border: 1px solid rgba(var(--n2), 1);
    background-color: rgba(0,0,0,0);
    opacity: 1
}

    .slider-pagination span.swiper-pagination-bullet-active {
        background-color: rgba(var(--n2), 1)
    }

.input-area {
    background-color: rgba(var(--n7), 1);
    border: 1px solid #0000008a;
}

    .input-area:focus-within {
        border: 1px solid rgba(var(--s1), 1)
    }

    .input-area input, .input-area textarea {
        border-radius: 0;
        padding: 0;
        border: none;
        outline: none;
        background: rgba(0,0,0,0)
    }

        .input-area input::-moz-placeholder, .input-area textarea::-moz-placeholder {
            color: rgba(var(--n3), 0.6)
        }

        .input-area input::placeholder, .input-area textarea::placeholder {
            color: rgba(var(--n3), 0.6)
        }

    .input-area.second {
        background-color: rgba(0,0,0,0);
        border: 1px solid rgba(var(--n2), 0.5)
    }

        .input-area.second:focus-within {
            border: 1px solid rgba(var(--n4), 1)
        }

        .input-area.second input, .input-area.second textarea {
            font-size: 16px;
            color: rgba(var(--n2), 1)
        }

            .input-area.second input::-moz-placeholder, .input-area.second textarea::-moz-placeholder {
                color: rgba(var(--n2), 0.6)
            }

            .input-area.second input::placeholder, .input-area.second textarea::placeholder {
                color: rgba(var(--n2), 0.6)
            }

    .input-area.second {
        background-color: rgba(0,0,0,0);
        border: 1px solid rgba(var(--n2), 0.5)
    }

        .input-area.second:focus-within {
            border: 1px solid rgba(var(--n4), 1)
        }

        .input-area.second input, .input-area.second textarea {
            font-size: 16px;
            color: rgba(var(--n2), 1)
        }

            .input-area.second input::-moz-placeholder, .input-area.second textarea::-moz-placeholder {
                color: rgba(var(--n2), 0.6)
            }

            .input-area.second input::placeholder, .input-area.second textarea::placeholder {
                color: rgba(var(--n2), 0.6)
            }

@keyframes marqueeRtL {
    0% {
        right: 0
    }

    100% {
        right: -100%
    }
}

@keyframes marquee {
    0% {
        left: 0
    }

    100% {
        left: -100%
    }
}

@keyframes run {
    0% {
        left: 0%
    }

    50% {
        left: 90%
    }

    100% {
        left: 5%
    }
}

@keyframes run2 {
    0% {
        top: 0%
    }

    50% {
        top: 90%
    }

    100% {
        top: 5%
    }
}

@keyframes waves {
    0% {
        transform: scale(1);
        opacity: 1
    }

    100% {
        transform: scale(1.6);
        opacity: 0
    }
}

@keyframes fadeIn2nd {
    0% {
        opacity: 0;
        transform: translate3d(-10%, 0, 0)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

@keyframes rotate {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes loading {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(180deg)
    }
}

.cmn-overlay {
    transition: all .8s;
    background: rgba(2,1,1,.78);
    z-index: 999;
    position: fixed;
    top: 0;
    height: 100%;
    width: 0%;
    left: 0
}

    .cmn-overlay.active {
        width: 100%
    }

.sidebar-wrapper {
    position: fixed;
    z-index: 99999;
    top: 0;
    right: -320px;
    transition: all .9s;
    overflow-y: scroll;
    height: 100vh;
    height: 100%;
    background: var(--n0);
    width: 320px;
    padding: 10px
}

    .sidebar-wrapper.active {
        right: 0px
    }

    .sidebar-wrapper .ramove-area {
        padding: 5px 10px 15px
    }

    .sidebar-wrapper .side-remove {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 0;
        background: var(--p1);
        display: flex;
        align-items: center;
        justify-content: center
    }

        .sidebar-wrapper .side-remove:hover {
            cursor: pointer
        }

    .sidebar-wrapper .box {
        padding: 18px 10px;
        max-width: 256px;
        margin: 0 auto
    }

        .sidebar-wrapper .box .sideba-gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px
        }

            .sidebar-wrapper .box .sideba-gallery .small-gl img {
                width: 100%
            }

        .sidebar-wrapper .box .side-infocontact li {
            display: flex;
            align-items: center;
            gap: 10px
        }

            .sidebar-wrapper .box .side-infocontact li .icon {
                width: 40px;
                min-width: 40px;
                height: 40px;
                border-radius: 50%;
                background: #e6f7f1
            }

                .sidebar-wrapper .box .side-infocontact li .icon i {
                    color: var(--n50);
                    font-size: 18px
                }

            .sidebar-wrapper .box .side-infocontact li a {
                color: var(--n50);
                font-weight: 500
            }

        .sidebar-wrapper .box .header-social {
            display: flex;
            align-items: center;
            gap: 10px
        }

            .sidebar-wrapper .box .header-social li a {
                width: 37px;
                min-width: 37px;
                height: 37px;
                transition: all .4s;
                background: #e6f7f1;
                display: flex;
                justify-content: center;
                align-items: center
            }

                .sidebar-wrapper .box .header-social li a i {
                    font-size: 18px;
                    color: var(--p1);
                    transition: all .4s
                }

                .sidebar-wrapper .box .header-social li a:hover {
                    background: var(--p2)
                }

                    .sidebar-wrapper .box .header-social li a:hover i {
                        color: var(--n0)
                    }

.progress_bar_item .item_bar {
    background: var(--p2);
    height: 8px
}

    .progress_bar_item .item_bar .progress {
        border-radius: 0;
        background: var(--bg1);
        height: 8px
    }

.tracking-spacing {
    letter-spacing: 3px
}

.range-container input, .range-track input {
    border: unset
}

.range-form form {
    max-width: 600px
}

.range-form .range-track {
    height: 5px;
    position: relative;
    background: #f8f8f8;
    border-radius: 2px
}

.range-form .slider-range {
    height: 100%;
    left: 0%;
    right: 0%;
    position: absolute;
    border-radius: 5px;
    background: var(--s2);
    transition: initial
}

.range-form .range-input {
    position: relative;
    border: unset
}

    .range-form .range-input input {
        position: absolute;
        width: 100%;
        height: 5px;
        top: -5px;
        padding: 0;
        z-index: 1;
        background: none;
        pointer-events: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        outline: none
    }

        .range-form .range-input input::-webkit-slider-thumb {
            height: 14px;
            width: 14px;
            border-radius: 50%;
            border: 2px solid #c3eddf;
            background-color: var(--s2);
            pointer-events: auto;
            -webkit-appearance: none;
            z-index: 1
        }

        .range-form .range-input input::-moz-range-thumb {
            height: 14px;
            width: 14px;
            border-radius: 50%;
            background-color: var(--s2);
            pointer-events: auto;
            -moz-appearance: none;
            z-index: 1;
            position: relative
        }

.header-section {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    transition: all .4s
}

    .header-section.header-fixed {
        background: #000000 !important
    }

    .header-section .container {
        max-width: 1680px;
        margin: 0 auto
    }

@media(max-width: 991px) {
    .header-section {
        background: #000000 !important
    }
}

.header-section .nav-brand {
    max-width: 265px;
    -o-object-fit: contain;
    object-fit: contain
}

    .header-section .nav-brand img {
        -o-object-fit: contain;
        object-fit: contain
    }

@media(max-width: 991px) {
    .header-section .nav-brand {
        max-width: 150px
    }
}

.header-section .header-btn {
    border: 1px solid rgb(255 255 255) !important;
}

    .header-section .header-btn:hover {
        border-color: var(--p2) !important
    }

.header-section .right-area {
    gap: 20px
}

    .header-section .right-area .search-btn {
        padding: 0;
        outline: none;
        border: unset
    }

        .header-section .right-area .search-btn i {
            font-size: 22px;
            transition: all .4s
        }

            .header-section .right-area .search-btn i:hover {
                color: var(--p2)
            }

    .header-section .right-area .cart-count .count-span {
        width: 16px;
        height: 16px;
        min-width: 16px;
        border-radius: 50%;
        font-size: 12px;
        position: absolute;
        top: -7px;
        right: -6px
    }

    .header-section .right-area .cart-count i {
        font-size: 22px
    }

@media(max-width: 1199px) {
    .header-section .right-area {
        gap: 16px
    }
}

@media(max-width: 991px) {
    .header-section .main-navbar .navbar-toggle-item {
        display: none
    }
}

@media(min-width: 992px) {
    .header-section .main-navbar .navbar-toggle-item {
        display: initial !important
    }
}

.header-section .main-navbar .custom-nav .menu-item .mega-custom {
    width: 730px;
    box-shadow: rgba(99,99,99,.2) 0px 2px 8px 0px
}

    .header-section .main-navbar .custom-nav .menu-item .mega-custom li ul {
        -moz-column-count: 3;
        column-count: 3
    }

@media(max-width: 991px) {
    .header-section .main-navbar .custom-nav .menu-item .mega-custom {
        width: 630px
    }

        .header-section .main-navbar .custom-nav .menu-item .mega-custom li ul {
            -moz-column-count: 3;
            column-count: 3
        }
}

@media(max-width: 767px) {
    .header-section .main-navbar .custom-nav .menu-item .mega-custom {
        width: 450px
    }

        .header-section .main-navbar .custom-nav .menu-item .mega-custom li ul {
            -moz-column-count: 2;
            column-count: 2
        }
}

@media(max-width: 500px) {
    .header-section .main-navbar .custom-nav .menu-item .mega-custom {
        width: 280px
    }

        .header-section .main-navbar .custom-nav .menu-item .mega-custom li ul {
            -moz-column-count: 1;
            column-count: 1
        }
}

.header-section .main-navbar .custom-nav .menu-item .mega-custom-pages {
    width: 200px;
    box-shadow: rgba(99,99,99,.2) 0px 2px 8px 0px
}

    .header-section .main-navbar .custom-nav .menu-item .mega-custom-pages li ul {
        -moz-column-count: 2;
        column-count: 2
    }

@media(max-width: 767px) {
    .header-section .main-navbar .custom-nav .menu-item .mega-custom-pages {
        width: 450px
    }

        .header-section .main-navbar .custom-nav .menu-item .mega-custom-pages li ul {
            -moz-column-count: 2;
            column-count: 2
        }
}

@media(max-width: 500px) {
    .header-section .main-navbar .custom-nav .menu-item .mega-custom-pages {
        width: 280px
    }

        .header-section .main-navbar .custom-nav .menu-item .mega-custom-pages li ul {
            -moz-column-count: 1;
            column-count: 1
        }
}

.header-section .main-navbar .custom-nav .menu-item button {
    transition: all .4s
}

    /*.header-section .main-navbar .custom-nav .menu-item button::after {
        position: absolute;
        content: "";
        font-family: "FontAwesome";
        font-weight: 500;
        font-size: 14px;
        right: 0;
        z-index: -1;
        transition: all .4s ease
    }*/


.header-section .main-navbar .custom-nav .in-media button::after {
    position: absolute;
    content: "";
    font-family: "FontAwesome";
    font-weight: 500;
    font-size: 14px;
    right: 0;
    z-index: -1;
    transition: all .4s ease
}

.header-section .main-navbar .custom-nav .menu-item button, .header-section .main-navbar .custom-nav .menu-item a, .header-section .main-navbar .custom-nav .menu-link button, .header-section .main-navbar .custom-nav .menu-link a {
    color: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0);
    font-size: 18px;
    font-weight: 500;
    transition: all .4s
}

    .header-section .main-navbar .custom-nav .menu-item button span, .header-section .main-navbar .custom-nav .menu-item a span, .header-section .main-navbar .custom-nav .menu-link button span, .header-section .main-navbar .custom-nav .menu-link a span {
        font-size: 18px;
        font-weight: 500;
        transition: all .4s
    }

    .header-section .main-navbar .custom-nav .menu-item button:hover span::after, .header-section .main-navbar .custom-nav .menu-item button:hover span::before, .header-section .main-navbar .custom-nav .menu-item button.active span::after, .header-section .main-navbar .custom-nav .menu-item button.active span::before, .header-section .main-navbar .custom-nav .menu-item a:hover span::after, .header-section .main-navbar .custom-nav .menu-item a:hover span::before, .header-section .main-navbar .custom-nav .menu-item a.active span::after, .header-section .main-navbar .custom-nav .menu-item a.active span::before, .header-section .main-navbar .custom-nav .menu-link button:hover span::after, .header-section .main-navbar .custom-nav .menu-link button:hover span::before, .header-section .main-navbar .custom-nav .menu-link button.active span::after, .header-section .main-navbar .custom-nav .menu-link button.active span::before, .header-section .main-navbar .custom-nav .menu-link a:hover span::after, .header-section .main-navbar .custom-nav .menu-link a:hover span::before, .header-section .main-navbar .custom-nav .menu-link a.active span::after, .header-section .main-navbar .custom-nav .menu-link a.active span::before {
        color: #ffca00;
    }

    .header-section .main-navbar .custom-nav .menu-item button:hover::after, .header-section .main-navbar .custom-nav .menu-item button.active::after, .header-section .main-navbar .custom-nav .menu-item a:hover::after, .header-section .main-navbar .custom-nav .menu-item a.active::after, .header-section .main-navbar .custom-nav .menu-link button:hover::after, .header-section .main-navbar .custom-nav .menu-link button.active::after, .header-section .main-navbar .custom-nav .menu-link a:hover::after, .header-section .main-navbar .custom-nav .menu-link a.active::after {
        color: var(--p2)
    }

@media(max-width: 1399px) {
    .header-section .main-navbar .custom-nav .menu-item button, .header-section .main-navbar .custom-nav .menu-item a, .header-section .main-navbar .custom-nav .menu-link button, .header-section .main-navbar .custom-nav .menu-link a {
        font-size: 16px
    }

        .header-section .main-navbar .custom-nav .menu-item button span, .header-section .main-navbar .custom-nav .menu-item a span, .header-section .main-navbar .custom-nav .menu-link button span, .header-section .main-navbar .custom-nav .menu-link a span {
            font-size: 16px
        }
}

@media(max-width: 991px) {
    .header-section .main-navbar .custom-nav {
        max-height: 50vh;
        overflow-y: scroll;
        overflow-x: hidden;
        width: 100%
    }

        .header-section .main-navbar .custom-nav .sub-menu {
            display: none;
            /*border-left: 1px solid rgba(var(--n6), 1);*/
            padding: 10px 20px
        }

            .header-section .main-navbar .custom-nav .sub-menu a, .header-section .main-navbar .custom-nav .sub-menu button {
                position: relative
            }

                .header-section .main-navbar .custom-nav .sub-menu a::before, .header-section .main-navbar .custom-nav .sub-menu button::before {
                    content: "";
                    position: absolute;
                    /*background-color: rgb(var(--n6));*/
                    width: 16px;
                    height: 1px;
                    left: -20px;
                    top: 11px;
                    z-index: -1
                }
}

@media(min-width: 992px) {
    .header-section .main-navbar .custom-nav .menu-item button:hover button::after {
        transform: rotate(-180deg)
    }

    .header-section .main-navbar .custom-nav .custom-scroll {
        overflow: scroll;
        height: 45vh
    }

    .header-section .main-navbar .custom-nav .sub-menu {
        position: absolute;
        top: 30px;
        left: 0;
        opacity: 0;
        width: -moz-max-content;
        width: max-content;
        visibility: hidden;
        transform: translateY(20px);
        text-wrap: nowrap;
        transition: var(--transition);
        display: initial !important;
        background: #000000;
        z-index: 10;
        pointer-events: none
    }

        .header-section .main-navbar .custom-nav .sub-menu li, .header-section .main-navbar .custom-nav .sub-menu a, .header-section .main-navbar .custom-nav .sub-menu span {
            font-size: 16px !important
        }

        .header-section .main-navbar .custom-nav .sub-menu::after {
            content: "";
            position: absolute;
            background-color: #000000;
            width: 16px;
            height: 16px;
            top: -8px;
            right: calc(100% - 24px);
            z-index: -1;
            transform: rotate(45deg)
        }

        .header-section .main-navbar .custom-nav .sub-menu .sub-menu {
            left: 100%;
            top: -20px
        }

    .header-section .main-navbar .custom-nav .menu-item {
        position: relative
    }

        .header-section .main-navbar .custom-nav .menu-item:hover > .sub-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto
        }
}

.header-section .main-navbar .navbar-toggle-btn {
    width: 33px;
    height: 28px;
    position: relative;
    right: 0;
    transition: var(--transition);
    top: 0
}

    .header-section .main-navbar .navbar-toggle-btn span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: #ffffff;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: var(--transition)
    }

        .header-section .main-navbar .navbar-toggle-btn span:nth-child(1) {
            top: 0
        }

        .header-section .main-navbar .navbar-toggle-btn span:nth-child(2), .header-section .main-navbar .navbar-toggle-btn span:nth-child(3) {
            top: 10px
        }

        .header-section .main-navbar .navbar-toggle-btn span:nth-child(4) {
            top: 20px
        }

    .header-section .main-navbar .navbar-toggle-btn.open span:nth-child(1) {
        top: 18px;
        width: 0%;
        left: 50%
    }

    .header-section .main-navbar .navbar-toggle-btn.open span:nth-child(2) {
        transform: rotate(45deg)
    }

    .header-section .main-navbar .navbar-toggle-btn.open span:nth-child(3) {
        transform: rotate(-45deg)
    }

    .header-section .main-navbar .navbar-toggle-btn.open span:nth-child(4) {
        top: 18px;
        width: 0%;
        left: 50%
    }

.header-section .top-header .review-area .total-review {
    -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 75%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% 100%, 50% 75%, 0 100%, 0 0);
    width: 64px;
    height: 100px;
    background: rgba(var(--p1), 1)
}

.header-section .top-header .icon-box {
    width: 48px;
    min-width: 48px;
    height: 48px;
    background-color: rgba(var(--p1), 0.1)
}

.header-section .bars-button {
    border: 1px solid rgba(0,0,0,.1);
    width: 50px;
    min-width: 50px;
    height: 50px;
    transition: all .4s ease
}

    .header-section .bars-button i {
        font-size: 24px
    }

    .header-section .bars-button:hover {
        transform: rotate(180deg);
        border-color: var(--p2)
    }

@media(max-width: 1199px) {
    .header-section .bars-button {
        width: 40px;
        min-width: 40px;
        height: 40px
    }
}

.header-light .navbar-custom .logo-texts {
    color: #fff !important
}

@media(max-width: 991px) {
    .header-light .navbar-custom .logo-texts {
        color: #000 !important
    }
}

@media(min-width: 991px) {
    .header-light .navbar-custom .right-area button, .header-light .navbar-custom .right-area a, .header-light .navbar-custom .right-area i {
        color: var(--n0)
    }

    .header-light .navbar-custom .right-area .bars-button {
        border-color: var(--n0)
    }

        .header-light .navbar-custom .right-area .bars-button img {
            filter: brightness(25)
        }

    .header-light .navbar-custom .right-area .header-btn {
        border-color: var(--n0) !important
    }

        .header-light .navbar-custom .right-area .header-btn span {
            color: var(--n0) !important
        }

        .header-light .navbar-custom .right-area .header-btn:hover {
            border-color: var(--p2) !important
        }

            .header-light .navbar-custom .right-area .header-btn:hover span {
                color: var(--n9) !important
            }

    .header-light .navbar-custom .custom-nav .menu-item button {
        color: #fff !important
    }

        .header-light .navbar-custom .custom-nav .menu-item button span::after, .header-light .navbar-custom .custom-nav .menu-item button span::before {
            color: #fff
        }

    .header-light .navbar-custom .custom-nav .menu-item .sub-menu button {
        color: #000 !important
    }

        .header-light .navbar-custom .custom-nav .menu-item .sub-menu button span::after, .header-light .navbar-custom .custom-nav .menu-item .sub-menu button span::before {
            color: #000
        }
}

.header-light.header-fixed .navbar-custom .logo-texts {
    color: #000 !important
}

.header-light.header-fixed .navbar-custom .custom-nav .menu-item button {
    color: #ffffff !important;
}

    .header-light.header-fixed .navbar-custom .custom-nav .menu-item button span::after, .header-light.header-fixed .navbar-custom .custom-nav .menu-item button span::before {
        color: #ffffff;
    }

    .header-light.header-fixed .navbar-custom .custom-nav .menu-item button.active span::after, .header-light.header-fixed .navbar-custom .custom-nav .menu-item button.active span::before {
        color: var(--p2)
    }

.header-light.header-fixed .navbar-custom .custom-nav .menu-item .sub-menu button {
    color: #000 !important
}

    .header-light.header-fixed .navbar-custom .custom-nav .menu-item .sub-menu button span::after, .header-light.header-fixed .navbar-custom .custom-nav .menu-item .sub-menu button span::before {
        color: #000
    }

.header-light.header-fixed .navbar-custom .right-area button, .header-light.header-fixed .navbar-custom .right-area a, .header-light.header-fixed .navbar-custom .right-area i {
    color: var(--n9)
}

.header-light.header-fixed .navbar-custom .right-area .bars-button {
    border-color: rgba(0,0,0,.1)
}

    .header-light.header-fixed .navbar-custom .right-area .bars-button img {
        filter: brightness(0)
    }

.header-light.header-fixed .navbar-custom .right-area .header-btn {
    border-color: #ffffff !important
}

    .header-light.header-fixed .navbar-custom .right-area .header-btn span {
        color: #ffffff !important
    }

    .header-light.header-fixed .navbar-custom .right-area .header-btn:hover {
        border-color: var(--p2) !important
    }

        .header-light.header-fixed .navbar-custom .right-area .header-btn:hover span {
            color: var(--n9) !important
        }

.cus-bg1 {
    background: rgba(255,255,255,.1)
}

.cus-bg2 {
    background: rgba(255,255,255,.5)
}

.footer-section .footer-links ul {
    overflow: hidden
}

.footer-section .footer-links a {
    position: relative;
    display: flex;
    align-items: center;
    transition: var(--transition)
}

    .footer-section .footer-links a:hover {
        padding-left: 8px;
        color: rgba(var(--p1), 1)
    }

        .footer-section .footer-links a:hover::before {
            color: rgba(var(--p1), 1);
            left: -5px
        }

/*.footer-section .copyright a {
    color: rgba(var(--s1), 1)
}*/

@media(max-width: 480px) {
    .footer-section .col-6 {
        width: 100% !important
    }
}

.banner-section.index-one::before {
    content: "";
    position: absolute;
    width: 100%;
    min-width: 100%;
    height: 100%;
    background: url("../images/index-banner-line.png") no-repeat;
    background-position: center;
    z-index: -1;
    opacity: .1
}

.banner-section.index-one .display-two {
    font-weight: 900
}

.banner-section.index-one .subtitle li::before {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    left: -4px;
    border-radius: 50%;
    background-color: rgba(var(--p1), 1)
}

.banner-section.index-one .financial i {
    width: 24px;
    min-width: 24px;
    height: 24px
}

@media(max-width: 991px) {
    .banner-section.index-one .financial i {
        width: 18px;
        min-width: 18px;
        height: 18px
    }
}

.banner-section.index-one .partner-area li {
    width: 64px;
    min-width: 64px;
    height: 64px
}

@media(max-width: 991px) {
    .banner-section.index-one .partner-area li {
        width: 52px;
        min-width: 52px;
        height: 52px
    }

        .banner-section.index-one .partner-area li img {
            width: 38px
        }
}

.banner-section.index-one .first-abs {
    left: -45% !important;
    top: -20px;
    animation: updown 2s linear infinite
}

.banner-section.index-one .second-abs {
    right: -50% !important;
    top: -20px;
    animation: updown 2s linear infinite
}

.how-works .icon-area {
    width: 120px;
    min-width: 120px;
    height: 120px
}

@media(max-width: 991px) {
    .how-works .icon-area {
        width: 80px;
        min-width: 80px;
        height: 80px
    }
}

.how-works .line-area {
    right: -30%
}

    .how-works .line-area.second {
        right: initial;
        left: -30%
    }

@media(max-width: 1399px) {
    .how-works .line-area img {
        width: 70%
    }
}

@media(max-width: 991px) {
    .why-choose {
        background-color: rgba(var(--n6), 1)
    }
}

.why-choose .icon-area {
    width: 80px;
    min-width: 80px;
    height: 80px
}

@media(max-width: 991px) {
    .why-choose .icon-area {
        width: 60px;
        min-width: 60px;
        height: 60px
    }
}

.why-choose .start-area::before {
    content: "";
    position: absolute;
    background-color: rgba(var(--n6), 1);
    z-index: -1;
    width: 150%;
    right: 0;
    height: 150%;
    top: 0
}

.fun-fact .item-one {
    width: 200px;
    min-width: 200px;
    height: 200px
}

@media(max-width: 991px) {
    .fun-fact .item-one {
        width: 100px;
        min-width: 100px;
        height: 100px
    }
}

.fun-fact .item-two {
    margin-left: -130px
}

    .fun-fact .item-two .counters {
        width: 330px;
        min-width: 330px;
        height: 330px
    }

@media(max-width: 991px) {
    .fun-fact .item-two .counters {
        width: 230px;
        min-width: 230px;
        height: 230px
    }
}

.fun-fact .item-three {
    width: 380px;
    min-width: 380px;
    height: 380px
}

@media(max-width: 991px) {
    .fun-fact .item-three {
        width: 260px;
        min-width: 260px;
        height: 260px
    }
}

.fun-fact .item-four {
    width: 260px;
    min-width: 260px;
    height: 260px
}

@media(max-width: 991px) {
    .fun-fact .item-four {
        width: 150px;
        min-width: 150px;
        height: 150px
    }
}

.fun-fact .item-five {
    margin-left: -210px
}

    .fun-fact .item-five .counters {
        width: 180px;
        min-width: 180px;
        height: 180px
    }

@media(max-width: 991px) {
    .fun-fact .item-five .counters {
        width: 95px;
        min-width: 95px;
        height: 95px
    }
}

@media(max-width: 575px) {
    .fun-fact .single-item, .fun-fact .counters {
        margin: 0 !important
    }
}

.dashboard-slide::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 75%;
    background-color: rgba(var(--n6), 1);
    z-index: -1
}

@media(max-width: 1199px) {
    .dashboard-slide::before {
        height: 65%
    }
}

@media(max-width: 767px) {
    .dashboard-slide::before {
        height: 55%
    }
}

@media(max-width: 1399px) {
    .global-coverage .sec-img img {
        max-width: 100% !important
    }
}

.faq-section .header-area {
    cursor: pointer
}

    .faq-section .header-area button {
        font-size: inherit;
        color: rgba(var(--n5), 1);
        padding-right: 15%
    }

        .faq-section .header-area button::after {
            position: absolute;
            z-index: 1;
            right: 0;
            border-radius: 50%;
            content: "";
            font-family: "Phosphor";
            font-size: 18px;
            transform: rotate(0deg);
            transition: var(--transition);
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(var(--n2), 1);
            background-color: rgba(var(--p1), 1);
            width: 38px;
            min-width: 38px;
            height: 38px
        }

@media(max-width: 767px) {
    .faq-section .header-area button::after {
        width: 32px;
        min-width: 32px;
        height: 32px;
        font-size: 16px
    }
}

.faq-section .accordion-single::after {
    content: "";
    position: absolute;
    width: 45%;
    height: 2px;
    z-index: 1;
    left: 5%;
    top: 0;
    transition: var(--transition)
}

.faq-section .accordion-single.active::after {
    background-color: rgba(var(--p1), 1)
}

.faq-section .accordion-single.active button {
    color: rgba(var(--s1), 1)
}

    .faq-section .accordion-single.active button::after {
        background-color: rgba(var(--n4), 1);
        color: rgba(var(--n5), 1)
    }

.faq-section .content-area {
    display: none
}

.faq-section .active button::after {
    transform: rotate(180deg)
}

.faq-section .active button::before {
    background-color: rgba(var(--p1), 1)
}

.faq-section .sec-img img {
    max-width: 100% !important
}

.testimonial .single-item {
    border: 1px solid rgba(var(--n8), 1);
    background: rgba(var(--n7), 1);
    transition: var(--transition)
}

    .testimonial .single-item h6, .testimonial .single-item p {
        transition: var(--transition)
    }

    .testimonial .single-item:hover {
        background: rgba(var(--s1), 1)
    }

        .testimonial .single-item:hover h6, .testimonial .single-item:hover p {
            color: rgba(var(--n2), 1)
        }

@media(max-width: 991px) {
    .testimonial .profile-img {
        width: 70px
    }
}

.our-apps .sec-img .mockup-bg {
    animation: rotate 12s linear infinite
}

@media(max-width: 1199px) {
    .our-apps .sec-img img {
        max-width: 100% !important
    }
}

.newsletter::before {
    content: "";
    position: absolute;
    background-color: rgba(var(--n7), 1);
    z-index: -1;
    width: 100%;
    right: 0;
    height: 35%;
    bottom: 0
}

.newsletter .circle {
    animation: rotate 4s linear infinite
}

.video-section::before {
    content: "";
    position: absolute;
    background-color: rgba(var(--n7), 1);
    z-index: -1;
    width: 100%;
    right: 0;
    height: 45%;
    bottom: 0
}

.our-value .icon-area {
    width: 90px;
    min-width: 90px;
    height: 90px
}

@media(max-width: 1199px) {
    .our-value .icon-area {
        width: 60px;
        min-width: 60px;
        height: 60px
    }
}

.our-value .single-item:hover {
    background-color: rgba(var(--s1), 1)
}

    .our-value .single-item:hover h5, .our-value .single-item:hover p {
        color: rgba(var(--n2), 1)
    }

.our-value.payment .icon-area {
    width: 70px;
    min-width: 70px;
    height: 70px
}

@media(max-width: 991px) {
    .our-value.payment .icon-area {
        width: 50px;
        min-width: 50px;
        height: 50px
    }
}

.our-value.payment .single-item:hover .icon-area {
    background-color: rgba(var(--n2), 1)
}

    .our-value.payment .single-item:hover .icon-area i {
        color: rgba(var(--n5), 1)
    }

.integrations .nav-links:hover span, .integrations .nav-links.active span {
    background-color: rgba(var(--p1), 1);
    color: rgba(var(--n2), 1)
}

@media(max-width: 1199px) {
    .customer-support .sec-img img {
        max-width: 100% !important
    }
}

@media(max-width: 575px) {
    .customer-support .main-content {
        position: initial !important
    }
}

.blog-details-2 .comment-form, .blog-details .comment-form {
    display: none
}

.blog-section .single-item img {
    transition: var(--transition)
}

.blog-section .single-item:hover h4 {
    text-decoration: underline
}

.blog-section .single-item:hover .abs-area {
    background-color: rgba(var(--n4), 1)
}

.blog-section .single-item:hover img {
    transform: scale(1.04)
}

.pricing-section .abs-area {
    transform: rotate(10deg) translate(-20px, -4px)
}

.pricing-section .single-item.highlight {
    background-color: rgba(var(--s1), 1)
}

    .pricing-section .single-item.highlight span, .pricing-section .single-item.highlight h3, .pricing-section .single-item.highlight h5, .pricing-section .single-item.highlight p, .pricing-section .single-item.highlight i {
        color: rgba(var(--n2), 1)
    }

    .pricing-section .single-item.highlight .btn-area span, .pricing-section .single-item.highlight .abs-area span {
        color: rgba(var(--n5), 1)
    }

.authentication .sec-img::before {
    content: "";
    position: absolute;
    background-color: rgba(var(--n6), 1);
    z-index: -1;
    width: 250%;
    right: 0;
    height: 100%;
    top: 0
}

@media(max-width: 991px) {
    .authentication .sec-img::before {
        width: 100%
    }
}

.our-awards .btn-box a {
    transition: all .7s ease-in-out;
    width: 60px;
    min-width: 60px;
    height: 60px
}

@media(max-width: 991px) {
    .our-awards .btn-box a {
        width: 50px;
        min-width: 50px;
        height: 50px
    }
}

.our-awards .marquee-section {
    transform: rotate(-45deg)
}

@media(max-width: 767px) {
    .our-awards .marquee-section {
        transform: rotate(20deg)
    }
}

.our-awards .marquee-section .marquee-second {
    margin-top: -60px
}

@media(max-width: 991px) {
    .our-awards .marquee-section .marquee-second {
        margin-top: -24px
    }
}

.our-awards .box-content {
    position: relative
}

    .our-awards .box-content:hover .hover-content {
        z-index: 5
    }

    .our-awards .box-content .hover-content {
        position: absolute;
        top: 0;
        transform: translate3d(0, 0, 0);
        transition: all .3s ease-in-out;
        z-index: -2;
        opacity: 0;
        visibility: hidden;
        pointer-events: none
    }

.marquee-section .marquee-content span {
    white-space: nowrap;
    position: relative;
    -webkit-text-stroke: 2px rgba(var(--p1), 0.6);
    color: rgba(0,0,0,0);
    text-transform: uppercase
}

    .marquee-section .marquee-content span::before {
        overflow: hidden;
        position: absolute;
        inset-inline-start: 0;
        width: 0;
        color: rgba(var(--p1), 1);
        white-space: nowrap;
        content: attr(data-hover);
        transition: all 1s cubic-bezier(0.17, 0.67, 0.32, 0.87)
    }

    .marquee-section .marquee-content span::after {
        content: "";
        -webkit-text-stroke: 2px rgba(var(--p1), 0.6);
        color: rgba(0,0,0,0)
    }

    .marquee-section .marquee-content span:hover::before {
        width: 100%
    }

.vision-mission .img-area img {
    max-width: 100% !important
}

.connected-payments .slider-btn {
    width: 68%
}

@media(max-width: 991px) {
    .connected-payments .slider-btn {
        width: 100%
    }
}

.payment-method .single-item {
    width: 245px;
    height: 80px;
    border-radius: 100px;
    border: 1px solid rgba(var(--n5), 0.2)
}

@media(max-width: 991px) {
    .payment-method .single-item {
        width: 200px;
        height: 60px
    }

        .payment-method .single-item .img-area {
            width: 60px;
            min-width: 60px;
            height: 60px
        }
}

.payment-method .items-wrapper {
    animation: marquee 25s linear infinite
}

    .payment-method .items-wrapper.second {
        animation: marqueeRtL 25s linear infinite
    }

.privacy-content .top-wrapper {
    margin-top: -7px;
    margin-bottom: -7px
}

    .privacy-content .top-wrapper h4 {
        text-transform: uppercase;
        margin-bottom: 30px
    }

    .privacy-content .top-wrapper p {
        margin-bottom: 30px
    }

    .privacy-content .top-wrapper ul {
        margin-bottom: 20px
    }

        .privacy-content .top-wrapper ul li {
            margin-bottom: 10px
        }

.privacy-content .safe-data {
    margin: 55px 0
}

    .privacy-content .safe-data ul {
        list-style-type: decimal;
        margin-left: 18px
    }

        .privacy-content .safe-data ul li {
            padding-left: 15px
        }

            .privacy-content .safe-data ul li::marker {
                font-weight: bold
            }

.privacy-content .cookies {
    margin-bottom: -36px
}

.privacy-content.terms .safe-data {
    margin-bottom: -23px
}

.pre-built-sites {
    z-index: 9999
}

    .pre-built-sites .sites-show-button {
        background-color: #292c36
    }

        .pre-built-sites .sites-show-button img {
            background: #48a133 !important
        }

    .pre-built-sites .buynow-button {
        background: #c72424 !important
    }

    .pre-built-sites .button-area {
        top: calc(50% - 100px)
    }

        .pre-built-sites .button-area button {
            writing-mode: vertical-rl
        }

    .pre-built-sites .close-button-area {
        z-index: 9999;
        opacity: 0;
        pointer-events: none
    }

        .pre-built-sites .close-button-area.active {
            pointer-events: visible;
            opacity: 1
        }

        .pre-built-sites .close-button-area button {
            width: 40px;
            min-width: 40px;
            height: 40px;
            background-color: #c72424
        }

    .pre-built-sites .all-sites-container {
        height: 100vh;
        background-color: #000;
        overflow-y: scroll;
        z-index: 999;
        width: 100px;
        height: 100px;
        top: 50%;
        transform: translate(85%, -50%) perspective(50px) rotateY(-25deg);
        transition: all ease-in-out 2s
    }

        .pre-built-sites .all-sites-container.active {
            transform: translate(0%, -50%);
            width: 100%;
            height: 100%
        }

.prebuilt-websites .abs-area {
    white-space: nowrap;
    position: relative;
    -webkit-text-stroke: 1px rgba(var(--p1), 0.1);
    color: rgba(217,217,217,.02)
}

.prebuilt-websites .not-graddient {
    -webkit-text-fill-color: var(--text-white) !important;
    min-width: 150%
}

.prebuilt-websites .abs-illus {
    left: 20%
}

.prebuilt-websites .head-gradient {
    background: linear-gradient(107deg, rgb(68, 54, 255) 14%, rgb(254, 69, 232) 47%, rgb(78, 236, 155) 100%)
}

.prebuilt-websites .single-box {
    border-radius: 32px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.1);
    position: relative
}

    .prebuilt-websites .single-box::after, .prebuilt-websites .single-box::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        border-radius: inherit;
        top: 0;
        left: 0;
        opacity: 0
    }

    .prebuilt-websites .single-box::after {
        background: linear-gradient(#11131E, #11131E) padding-box,linear-gradient(to top left, #f79b91, #c82f97, #6a4ded) border-box;
        border: 1px solid rgba(0,0,0,0);
        z-index: -1
    }

    .prebuilt-websites .single-box::before {
        background: linear-gradient(0deg, #000 -6.93%, rgba(0, 0, 0, 0) 94.81%);
        z-index: 1
    }

    .prebuilt-websites .single-box .view-demo {
        opacity: 0
    }

    .prebuilt-websites .single-box:hover::before, .prebuilt-websites .single-box:hover::after, .prebuilt-websites .single-box:hover .view-demo {
        opacity: 1
    }

    .prebuilt-websites .single-box:hover .home-thumb {
        background-position: bottom
    }

        .prebuilt-websites .single-box:hover .home-thumb.inner {
            background-position: top
        }

    .prebuilt-websites .single-box .hot-tag {
        background-color: #f45939
    }

.prebuilt-websites .home-thumb {
    width: 100%;
    height: 450px;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    transition: all 7s ease;
    position: relative
}

.prebuilt-websites .coming-soon {
    border: 1px solid rgba(255,255,255,.2);
    background: #141a20
}

    .prebuilt-websites .coming-soon span {
        background: linear-gradient(90deg, #756ED5 14.48%, #E276D5 57.73%, #4EEC9B 99.98%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: rgba(0,0,0,0)
    }

.prebuilt-websites.inner-website .abs-illus {
    left: initial !important;
    right: 22%
}

.prebuilt-websites .tabLinks .nav-links.active {
    background: linear-gradient(#11131E, #11131E) padding-box,linear-gradient(to top left, #6a4ded, #c82f97, #f79b91) border-box;
    border: 1px solid rgba(0,0,0,0);
    z-index: -1
}

.custom-container {
    max-width: 1730px;
    margin: 0 auto
}

.banner-section2 {
    padding: 120px 0
}

    .banner-section2::before {
        display: none
    }

@media(max-width: 1399px) {
    .banner-section2 {
        padding: 95px 0 100px
    }
}

@media(max-width: 991px) {
    .banner-section2 {
        padding: 50px 0 80px
    }
}

.money-calc-wrap {
    background: #fff;
    border-radius: 16px;
    padding: 32px
}

    .money-calc-wrap .fire-icon {
        width: 26px;
        height: 26px;
        -o-object-fit: contain;
        object-fit: contain
    }

    .money-calc-wrap .today-text {
        color: #01a66b
    }

    .money-calc-wrap .arrive {
        width: 17px
    }

    .money-calc-wrap .send-countey-code {
        background: #01a66b;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        padding: 15px 14px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

@media(max-width: 575px) {
    .money-calc-wrap {
        padding: 32px 18px
    }
}

.hero-content2 .secure-wrap li {
    background: rgba(236,255,252,.1);
    border: 1px solid #ecfffc
}

    .hero-content2 .secure-wrap li span {
        line-height: 16px
    }

.hero-tag2 {
    border: 1px solid rgba(0,86,81,.5)
}

.banner-section3 {
    background: url(../images/home2/hero/home3-bg.png) no-repeat center center;
    background-size: cover;
    position: relative;
    z-index: 1
}

    .banner-section3 .hero-content3 {
        padding: 266px 0;
        z-index: 1;
        max-width: 766px
    }

        .banner-section3 .hero-content3 p {
            max-width: 654px
        }

        .banner-section3 .hero-content3 .hero-tag3 {
            border-radius: 100px;
            border: 1px solid rgba(255,255,255,.1);
            background: rgba(255,255,255,.1)
        }

    .banner-section3::before {
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        opacity: .8;
        background: linear-gradient(90deg, #00170F 0%, rgba(0, 40, 25, 0) 100%);
        z-index: -1
    }

    .banner-section3 .follow-icon {
        position: absolute;
        top: 44%;
        left: 30px
    }

        .banner-section3 .follow-icon .hero-social li a:hover i {
            color: var(--p2)
        }

        .banner-section3 .follow-icon .dborder {
            width: 1px;
            height: 30px;
            background: #fff;
            margin-left: 10px
        }

        .banner-section3 .follow-icon .follow-text {
            transform: rotate(-90deg);
            position: relative;
            display: block;
            margin-left: -15px
        }

@media(max-width: 1700px) {
    .banner-section3 .hero-content3 {
        padding: 190px 0
    }
}

@media(max-width: 1600px) {
    .banner-section3 .hero-content3 {
        padding: 160px 0;
        text-align: center;
        margin: 0 auto
    }

    .banner-section3 p {
        margin: 0 auto;
        max-width: 654px
    }

    .banner-section3 .hero-btn-area {
        justify-content: center
    }

    .banner-section3 .follow-icon {
        position: initial;
        padding: 0 0 22px 24px
    }

        .banner-section3 .follow-icon .hero-social {
            flex-direction: row !important;
            justify-content: center
        }

        .banner-section3 .follow-icon .dborder {
            display: none
        }

        .banner-section3 .follow-icon .follow-text {
            display: none
        }
}

@media(max-width: 1399px) {
    .banner-section3 .hero-content3 {
        padding: 130px 0 140px
    }

        .banner-section3 .hero-content3 .display-two {
            font-size: 54px
        }

    .banner-section3 p {
        margin: 0 auto;
        max-width: 654px
    }
}

@media(max-width: 1199px) {
    .banner-section3 .hero-content3 {
        padding: 100px 0 120px
    }

        .banner-section3 .hero-content3 .display-two {
            font-size: 54px
        }
}

@media(max-width: 991px) {
    .banner-section3 .hero-content3 {
        padding: 70px 0 100px
    }

        .banner-section3 .hero-content3 .display-two {
            font-size: 54px
        }
}

@media(max-width: 767px) {
    .banner-section3::before {
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        opacity: .8;
        background: linear-gradient(90deg, #00170F 0%, rgba(0, 40, 25, 0.5) 100%);
        z-index: -1
    }

    .banner-section3 .hero-content3 {
        padding: 70px 0 90px
    }

        .banner-section3 .hero-content3 .display-two {
            font-size: 39px
        }
}

@media(max-width: 500px) {
    .banner-section3 .hero-content3 {
        padding: 70px 0 80px
    }

        .banner-section3 .hero-content3 .display-two {
            font-size: 32px
        }
}

.banner-wrapper4 {
    background: url(../images/home2/hero/hero4-bg.png) no-repeat center center;
    background-size: cover;
    border-radius: 32px;
    padding: 234px 80px;
    position: relative;
    overflow: hidden
}

    .banner-wrapper4 .follow-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 60px
    }

        .banner-wrapper4 .follow-icon .hero-social li a {
            width: 44px;
            min-width: 44px;
            height: 44px;
            border: 1px solid rgba(0,0,0,0);
            border-radius: 50%
        }

            .banner-wrapper4 .follow-icon .hero-social li a i {
                transition: all .4s
            }

            .banner-wrapper4 .follow-icon .hero-social li a.active, .banner-wrapper4 .follow-icon .hero-social li a:hover {
                border-color: var(--p2)
            }

                .banner-wrapper4 .follow-icon .hero-social li a.active i, .banner-wrapper4 .follow-icon .hero-social li a:hover i {
                    color: var(--p2)
                }

        .banner-wrapper4 .follow-icon .dborder {
            width: 1px;
            height: 30px;
            background: #fff;
            margin-left: 20px
        }

        .banner-wrapper4 .follow-icon .follow-text {
            transform: rotate(-90deg);
            position: relative;
            display: block;
            margin-left: -8px
        }

@media(max-width: 1399px) {
    .banner-wrapper4 {
        padding: 150px 80px
    }
}

@media(max-width: 1199px) {
    .banner-wrapper4 {
        padding: 120px 40px
    }

        .banner-wrapper4 .follow-icon {
            right: 20px
        }
}

@media(max-width: 767px) {
    .banner-wrapper4 {
        padding: 100px 30px
    }

        .banner-wrapper4 .follow-icon {
            right: 10px
        }

        .banner-wrapper4 .display-two {
            font-size: 40px
        }
}

@media(max-width: 575px) {
    .banner-wrapper4 {
        padding: 90px 20px
    }

        .banner-wrapper4 .follow-icon {
            right: initial;
            top: initial;
            margin-top: 50px;
            position: initial
        }

            .banner-wrapper4 .follow-icon .follow-text, .banner-wrapper4 .follow-icon .dborder {
                display: none
            }

            .banner-wrapper4 .follow-icon .hero-social {
                display: flex !important
            }

        .banner-wrapper4 .display-two {
            font-size: 40px
        }
}

@media(max-width: 575px) {
    .banner-wrapper4 {
        padding: 90px 20px 70px
    }

        .banner-wrapper4 .display-two {
            font-size: 34px
        }
}

.hero4-badge {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 55px
}

    .hero4-badge::before {
        position: absolute;
        left: 12px;
        height: 1px;
        width: 29px;
        content: "";
        background: var(--p2)
    }

    .hero4-badge::after {
        position: absolute;
        left: 0;
        width: 6px;
        height: 6px;
        content: "";
        border-radius: 50%;
        background: var(--p2)
    }

.banner-section5 .hero-content5 {
    padding: 110px 0 190px
}

    .banner-section5 .hero-content5 .footer-form {
        max-width: 388px;
        border: 1px solid rgba(28,30,48,.1)
    }

        .banner-section5 .hero-content5 .footer-form .input-area {
            outline: none
        }

        .banner-section5 .hero-content5 .footer-form input {
            color: rgba(28,30,48,.6);
            outline: none
        }

        .banner-section5 .hero-content5 .footer-form ::-moz-placeholder {
            color: rgba(28,30,48,.6)
        }

        .banner-section5 .hero-content5 .footer-form ::placeholder {
            color: rgba(28,30,48,.6)
        }

.banner-section5 .hero5-thumb {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-47%);
    animation: hero-up 2s linear infinite
}

.banner-section5 .hero5-element {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1
}

@media(max-width: 1700px) {
    .banner-section5 .hero-content5 {
        padding: 80px 0 140px
    }

    .banner-section5 .hero5-thumb {
        max-width: 700px
    }
}

@media(max-width: 1450px) {
    .banner-section5 .hero-content5 {
        padding: 80px 0 140px
    }

        .banner-section5 .hero-content5 .display-two {
            font-size: 58px
        }

        .banner-section5 .hero-content5 p {
            max-width: 500px
        }

    .banner-section5 .hero5-thumb {
        max-width: 700px
    }
}

@media(max-width: 1199px) {
    .banner-section5 .hero-content5 {
        padding: 70px 0 100px
    }

        .banner-section5 .hero-content5 .display-two {
            font-size: 42px
        }

        .banner-section5 .hero-content5 p {
            max-width: 450px
        }

    .banner-section5 .hero5-thumb {
        max-width: 500px
    }
}

@media(max-width: 991px) {
    .banner-section5 .hero-content5 {
        padding: 30px 0 90px
    }

        .banner-section5 .hero-content5 .display-two {
            font-size: 48px
        }

        .banner-section5 .hero-content5 p {
            max-width: 550px
        }

    .banner-section5 .hero5-thumb {
        display: none
    }
}

@media(max-width: 991px) {
    .banner-section5 .hero-content5 {
        padding: 50px 0 80px
    }

        .banner-section5 .hero-content5 .display-two {
            font-size: 48px
        }

        .banner-section5 .hero-content5 p {
            max-width: 550px
        }
}

@media(max-width: 500px) {
    .banner-section5 .hero-content5 {
        padding: 50px 0 70px
    }

        .banner-section5 .hero-content5 .display-two {
            font-size: 34px
        }

        .banner-section5 .hero-content5 p {
            max-width: 550px
        }
}

@keyframes hero-up {
    50% {
        transform: translateY(-45%)
    }
}

.hero5-shape-element {
    position: absolute;
    right: 680px;
    top: 150px
}

@media(max-width: 1650px) {
    .hero5-shape-element {
        display: none
    }
}

.banner-section6 {
    padding: 90px 0 100px
}

    .banner-section6 .hero-content6 {
        max-width: 554px
    }

        .banner-section6 .hero-content6 .section-element {
            position: absolute;
            bottom: 90%;
            right: 90%
        }

        .banner-section6 .hero-content6 h2 {
            color: #e5fdce
        }

        .banner-section6 .hero-content6 .hero6-btn {
            background: rgba(0,0,0,0);
            border: 1px solid #fff;
            color: #fff
        }

            .banner-section6 .hero-content6 .hero6-btn span, .banner-section6 .hero-content6 .hero6-btn i {
                color: #fff
            }

    .banner-section6 .hero6-thumb {
        border: 4px solid var(--n0);
        border-radius: 32px;
        animation: updown 2s linear infinite
    }

        .banner-section6 .hero6-thumb img {
            border-radius: 28px
        }

        .banner-section6 .hero6-thumb .consult-booked {
            position: absolute;
            top: 40px;
            right: -100px;
            z-index: 1;
            animation: leftright 2s linear infinite
        }

            .banner-section6 .hero6-thumb .consult-booked .dates {
                border-radius: 4px;
                padding: 8px 11px;
                background: var(--bg1);
                color: var(--n0);
                text-align: center;
                font-size: 13px;
                font-weight: 700
            }

            .banner-section6 .hero6-thumb .consult-booked .new-badge {
                background: var(--p2);
                font-size: 13px;
                font-weight: 700;
                color: var(--black-clr);
                padding: 4px 12px;
                border-radius: 8px
            }

        .banner-section6 .hero6-thumb .hero-success-ratio {
            position: absolute;
            left: -80px;
            bottom: 50px;
            animation: leftright 2s linear infinite
        }

    .banner-section6 .hero6-dotting {
        position: absolute;
        left: 33%;
        bottom: 145px;
        opacity: .4;
        animation: zooming 2s linear infinite
    }

    .banner-section6 .hero6-grow1 {
        position: absolute;
        left: 45%;
        top: 300px;
        animation: rots 2s linear infinite
    }

    .banner-section6 .hero6-grow2 {
        position: absolute;
        right: 160px;
        bottom: 130px;
        animation: rots 2s linear infinite
    }

@media(max-width: 1500px) {
    .banner-section6 .hero6-thumb .consult-booked {
        right: 16px;
        top: 16px
    }
}

@media(max-width: 1399px) {
    .banner-section6 .hero6-thumb .hero-success-ratio {
        left: 20px;
        bottom: 16px
    }

    .banner-section6 .hero-content6 h2 {
        font-size: 59px
    }
}

@media(max-width: 500px) {
    .banner-section6 .hero6-thumb .hero-success-ratio {
        left: 20px;
        bottom: -60px
    }

    .banner-section6 .hero6-thumb .consult-booked {
        display: none
    }

    .banner-section6 .hero-content6 h2 {
        font-size: 46px
    }
}

@keyframes leftright {
    50% {
        transform: translateX(-10px)
    }
}

@keyframes zooming {
    50% {
        transform: scale(1.1)
    }
}

.banner-section7 {
    background-color: #f4f3f0
}

    .banner-section7 .hero-content7 {
        padding: 90px 0 100px
    }

    .banner-section7 .hero-shape-element7 {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%
    }

    .banner-section7 .hero-incorpo {
        animation: updown 2s linear infinite
    }

    .banner-section7 .satisfied-inner span {
        width: 55px;
        height: 55px;
        border-radius: 50%
    }

        .banner-section7 .satisfied-inner span img {
            width: 100%;
            height: 100%
        }

@media(max-width: 1399px) {
    .banner-section7 .hero-content7 {
        padding: 70px 0 95px
    }

        .banner-section7 .hero-content7 .display-two {
            font-size: 48px
        }
}

@media(max-width: 991px) {
    .banner-section7 .hero-content7 {
        padding: 40px 0 95px
    }

        .banner-section7 .hero-content7 .display-two {
            font-size: 44px
        }
}

@media(max-width: 767px) {
    .banner-section7 .hero-content7 {
        padding: 60px 0 95px
    }

        .banner-section7 .hero-content7 .display-two {
            font-size: 38px
        }
}

.banner-section8 .banner-wrapper8 {
    background: url(../images/home2/hero/hero8-bg.jpg) no-repeat center center;
    background-size: cover;
    border-radius: 32px;
    padding: 168px 80px 271px;
    position: relative;
    z-index: 1
}

    .banner-section8 .banner-wrapper8::before {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        width: 100%;
        height: 100%;
        z-index: -1;
        border-radius: 32px;
        background: linear-gradient(270deg, rgba(0, 86, 81, 0) 11.57%, #005651 100%)
    }

    .banner-section8 .banner-wrapper8 .hero-content8 {
        max-width: 528px
    }

        .banner-section8 .banner-wrapper8 .hero-content8 .hero8-badge {
            border: 1px dashed var(--n0);
            border-radius: 100px;
            padding: 9px 20px 8px;
            background: rgba(255,255,255,.1)
        }

        .banner-section8 .banner-wrapper8 .hero-content8 .video-better {
            position: relative;
            width: 51px;
            height: 51px;
            border: 1px solid rgba(255,255,255,.3);
            background: rgba(255,255,255,.1);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px)
        }

            .banner-section8 .banner-wrapper8 .hero-content8 .video-better i {
                font-size: 16px;
                z-index: 1;
                color: var(--n0)
            }

@media(max-width: 1199px) {
    .banner-section8 .banner-wrapper8 {
        padding: 108px 80px 210px
    }
}

@media(max-width: 767px) {
    .banner-section8 .banner-wrapper8 {
        padding: 90px 40px 190px
    }
}

@media(max-width: 575px) {
    .banner-section8 .banner-wrapper8 {
        padding: 80px 16px 180px
    }
}

.banner-section9 {
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    overflow: hidden
}

    .banner-section9 .hero-content9 {
        padding: 220px 0 256px
    }

        .banner-section9 .hero-content9 .input-area {
            outline: none;
            max-width: 395px
        }

            .banner-section9 .hero-content9 .input-area input {
                border: unset;
                outline: none;
                color: rgba(28,30,48,.6)
            }

            .banner-section9 .hero-content9 .input-area ::-moz-placeholder {
                color: rgba(28,30,48,.6)
            }

            .banner-section9 .hero-content9 .input-area ::placeholder {
                color: rgba(28,30,48,.6)
            }

        .banner-section9 .hero-content9 .hero9-element {
            position: absolute;
            top: 190px;
            left: -60px;
            z-index: -1;
            animation: rots 2s linear infinite;
            opacity: .4
        }

    .banner-section9 .hero-thumb9 {
        position: absolute;
        bottom: 0;
        right: 140px
    }

        .banner-section9 .hero-thumb9 .thumb-bg {
            animation: zomin 3s linear infinite
        }

        .banner-section9 .hero-thumb9 .thumb {
            position: absolute;
            right: 50px;
            bottom: 0;
            max-width: 613px
        }

            .banner-section9 .hero-thumb9 .thumb img {
                width: 100%
            }

        .banner-section9 .hero-thumb9 .hero9-ele {
            position: absolute;
            right: 0;
            bottom: 190px;
            animation: rots 2s linear infinite
        }

@media(max-width: 1600px) {
    .banner-section9 .hero-content9 {
        padding: 100px 0 180px
    }

    .banner-section9 .hero-thumb9 {
        bottom: 0;
        right: 140px
    }

        .banner-section9 .hero-thumb9 .thumb-bg {
            max-width: 600px
        }

        .banner-section9 .hero-thumb9 .thumb {
            right: 50px;
            max-width: 513px
        }

        .banner-section9 .hero-thumb9 .hero9-ele {
            right: 0;
            bottom: 190px;
            width: 80px
        }
}

@media(max-width: 1399px) {
    .banner-section9 .hero-content9 {
        padding: 100px 0 180px
    }

    .banner-section9 .hero-thumb9 {
        bottom: 0;
        right: 50px
    }

        .banner-section9 .hero-thumb9 .thumb-bg {
            max-width: 500px
        }

        .banner-section9 .hero-thumb9 .thumb {
            right: 50px;
            max-width: 413px
        }

        .banner-section9 .hero-thumb9 .hero9-ele {
            right: 0;
            bottom: 190px;
            width: 80px
        }
}

@media(max-width: 1199px) {
    .banner-section9 .hero-content9 .display-four {
        font-size: 40px
    }
}

@media(max-width: 991px) {
    .banner-section9 .hero-content9 {
        padding: 50px 0 180px
    }

    .banner-section9 .hero-thumb9 {
        position: relative;
        margin: 0 auto
    }

        .banner-section9 .hero-thumb9 .thumb-bg {
            max-width: 300px;
            right: 50%;
            left: initial;
            transform: translateX(50%);
            animation: none
        }

            .banner-section9 .hero-thumb9 .thumb-bg img {
                width: 100%
            }

        .banner-section9 .hero-thumb9 .thumb {
            right: 50%;
            transform: translateX(50%);
            max-width: 513px
        }

        .banner-section9 .hero-thumb9 .hero9-ele {
            right: 0;
            bottom: 190px;
            width: 80px
        }
}

@media(max-width: 767px) {
    .banner-section9 .hero-content9 {
        padding: 30px 0 80px
    }

        .banner-section9 .hero-content9 .display-four {
            font-size: 34px
        }

    .banner-section9 .hero-thumb9 .thumb-bg {
        opacity: .2
    }

    .banner-section9 .hero-thumb9 .thumb {
        right: initial;
        transform: translateX(0%);
        max-width: 1113px;
        width: 260px;
        left: 50%;
        transform: translateX(-30%);
        height: 300px
    }

        .banner-section9 .hero-thumb9 .thumb img {
            height: 100%
        }

    .banner-section9 .hero-thumb9 .hero9-ele {
        display: none
    }
}

@keyframes zomin {
    50% {
        transform: scale(1.03)
    }
}

.banner-section10 {
    background: url(../images/hero10-bg.png) no-repeat center center;
    background-size: cover
}

    .banner-section10 .hero-content10 {
        padding: 200px 0 80px
    }

@media(max-width: 1199px) {
    .banner-section10 .hero-content10 .display-two {
        font-size: 52px
    }
}

@media(max-width: 991px) {
    .banner-section10 .hero-content10 {
        padding: 160px 0 80px
    }
}

@media(max-width: 767px) {
    .banner-section10 .hero-content10 {
        padding: 140px 0 60px
    }

        .banner-section10 .hero-content10 .display-two {
            font-size: 36px
        }
}

@media(max-width: 500px) {
    .banner-section10 .hero-content10 {
        padding: 130px 0 60px
    }

        .banner-section10 .hero-content10 .display-two {
            font-size: 30px
        }
}

.banner-section10 .feature-lement-top {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%
}

.banner-section10 .hero10-thumb {
    z-index: 1;
    position: relative
}

.hero10-badge {
    background: rgba(255,255,255,.1)
}

    .hero10-badge.hero10-badge1 {
        background: rgba(0,86,81,.1)
    }

.banner-section11 {
    z-index: 1
}

    .banner-section11 .hero11-wrapper {
        padding-top: 90px
    }

    .banner-section11 .hero-form {
        background: var(--n0);
        box-shadow: 0px 596px 167px 0px rgba(0,0,0,0),0px 382px 153px 0px rgba(0,0,0,.01),0px 215px 129px 0px rgba(0,0,0,.05),0px 95px 95px 0px rgba(0,0,0,.09),0px 24px 52px 0px rgba(0,0,0,.1);
        z-index: 1;
        position: relative
    }

        .banner-section11 .hero-form .form-grp input {
            width: 100%;
            border: unset;
            background: #f5f5f5;
            color: var(--black-clr);
            padding: 16px 18px;
            border-radius: 0
        }

            .banner-section11 .hero-form .form-grp input::-moz-placeholder {
                color: var(--black-clr)
            }

            .banner-section11 .hero-form .form-grp input::placeholder {
                color: var(--black-clr)
            }

        .banner-section11 .hero-form .form-check-input {
            padding: 3px 3px;
            border-color: var(--black-clr);
            width: 21px;
            height: 21px;
            border-radius: 50%
        }

        .banner-section11 .hero-form .social-area li a {
            background: #e6f7f1 !important;
            border: unset;
            width: 38px;
            min-width: 38px;
            height: 38px
        }

            .banner-section11 .hero-form .social-area li a i {
                font-size: 14px
            }

            .banner-section11 .hero-form .social-area li a:hover {
                background: var(--bg1) !important
            }

                .banner-section11 .hero-form .social-area li a:hover i {
                    color: var(--n0) !important
                }

    .banner-section11 .hero11-thumb {
        margin-top: -320px;
        z-index: -1
    }

        .banner-section11 .hero11-thumb img {
            max-width: unset
        }

    .banner-section11::before {
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 822px;
        background: var(--bg1);
        content: ""
    }

@media(max-width: 1399px) {
    .banner-section11 .hero-content11 h1 {
        font-size: 42px
    }
}

@media(max-width: 1199px) {
    .banner-section11 .hero11-wrapper {
        padding-top: 70px
    }

    .banner-section11 .hero11-thumb {
        width: 100%
    }

        .banner-section11 .hero11-thumb img {
            max-width: 100%
        }
}

@media(max-width: 991px) {
    .banner-section11 .hero11-thumb {
        width: 100%;
        margin-top: 0;
        padding-top: 32px
    }

        .banner-section11 .hero11-thumb img {
            max-width: 100%
        }
}

@media(max-width: 500px) {
    .banner-section11 .hero-content11 h1 {
        font-size: 29px
    }

    .banner-section11 .hero-content11 p {
        line-height: 24px
    }
}

@media(min-width: 991px) {
    .banner-section12 .container {
        max-width: 1450px;
        margin: 0 auto
    }
}

.banner-section12 .hero12-inner .hero-content {
    padding-bottom: 180px;
    padding-top: 150px;
    max-width: 600px
}

    .banner-section12 .hero12-inner .hero-content h1 {
        font-size: 88px
    }

    .banner-section12 .hero12-inner .hero-content .footer-form {
        max-width: 380px
    }

        .banner-section12 .hero12-inner .hero-content .footer-form .input-area input {
            color: rgba(28,30,48,.6)
        }

            .banner-section12 .hero12-inner .hero-content .footer-form .input-area input::-moz-placeholder {
                color: rgba(28,30,48,.6)
            }

            .banner-section12 .hero12-inner .hero-content .footer-form .input-area input::placeholder {
                color: rgba(28,30,48,.6)
            }

.banner-section12 .hero12-inner .hero-thumb12 {
    min-width: 620px;
    height: 723px;
    position: absolute;
    right: 0;
    bottom: 0
}

    .banner-section12 .hero12-inner .hero-thumb12 img {
        width: 100%;
        height: 100%
    }

.banner-section12 .hero12-inner .hero10-element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: zomin 2s linear infinite
}

@media(max-width: 1399px) {
    .banner-section12 .hero12-inner .hero-content {
        padding-bottom: 180px;
        padding-top: 150px;
        max-width: 600px
    }

        .banner-section12 .hero12-inner .hero-content h1 {
            font-size: 74px
        }

    .banner-section12 .hero12-inner .hero-thumb12 {
        min-width: 520px;
        height: 623px
    }

        .banner-section12 .hero12-inner .hero-thumb12 img {
            width: 100%;
            height: 100%
        }
}

@media(max-width: 991px) {
    .banner-section12 .hero12-inner .hero-content {
        padding-top: 70px;
        padding-bottom: 30px;
        max-width: 600px;
        text-align: center
    }

        .banner-section12 .hero12-inner .hero-content h1 {
            font-size: 64px
        }

        .banner-section12 .hero12-inner .hero-content .footer-form {
            margin: 0 auto
        }

    .banner-section12 .hero12-inner .hero-thumb12 {
        min-width: 400px;
        height: initial;
        width: 300px;
        margin: 0 auto;
        text-align: center;
        position: initial
    }

        .banner-section12 .hero12-inner .hero-thumb12 img {
            width: 100%;
            height: 100%
        }
}

@media(max-width: 500px) {
    .banner-section12 .hero12-inner .hero-content {
        padding-top: 70px;
        padding-bottom: 30px;
        max-width: 600px
    }

        .banner-section12 .hero12-inner .hero-content h1 {
            font-size: 42px
        }

        .banner-section12 .hero12-inner .hero-content .footer-form {
            max-width: 288px
        }

    .banner-section12 .hero12-inner .hero-thumb12 {
        min-width: 300px;
        height: initial;
        width: 300px;
        margin: 0 auto;
        text-align: center;
        position: initial
    }

        .banner-section12 .hero12-inner .hero-thumb12 img {
            width: 100%;
            height: 100%
        }
}

.banner-section12::before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 1638px;
    height: 100%;
    background: linear-gradient(180deg, #B5FFC2 0%, #FFF 100%)
}

.banner-section12 .swiper-slide .hero12-inner .hero-thumb12 {
    margin-bottom: -100%;
    transition: all 1.2s;
    transform: scale(0)
}

.banner-section12 .swiper-slide.swiper-slide-active .hero12-inner .hero-thumb12 {
    margin-bottom: 0%;
    transform: scale(1)
}

.banner-section13 {
    background: url(../images/hero13-bg2.png) no-repeat center center;
    background-size: cover
}

    .banner-section13 .banner-content {
        padding: 80px 0 40px
    }

        .banner-section13 .banner-content p {
            color: rgba(255,255,255,.6);
            max-width: 566px;
            margin: 0 auto
        }

@media(max-width: 1199px) {
    .banner-section13 .banner-content {
        padding: 70px 0 80px
    }
}

@media(max-width: 991px) {
    .banner-section13 .banner-content {
        padding: 60px 0 70px
    }
}

@media(max-width: 575px) {
    .banner-section13 .banner-content {
        padding: 40px 0 10px
    }
}

.banner-section14 .container {
    max-width: 1720px;
    margin: 0 auto
}

.banner-section14 .banner-wrapper14 {
    border-radius: 32px;
    background: linear-gradient(335deg, rgba(31, 0, 255, 0.86) -6.4%, rgba(196, 113, 237, 0.86) 68.1%, rgba(255, 123, 131, 0.86) 97.04%, rgba(160, 45, 201, 0.86) 105.26%),#1f00ff;
    padding: 90px 60px 40px;
    z-index: 1
}

    .banner-section14 .banner-wrapper14 p {
        max-width: 500px
    }

    .banner-section14 .banner-wrapper14 .hero14-ele {
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1
    }

.banner-section14 .hero14-thumb {
    animation: updwon 4s linear infinite;
    max-width: 683px
}

    .banner-section14 .hero14-thumb img {
        width: 100%
    }

@media(max-width: 1399px) {
    .banner-section14 .banner-wrapper14 {
        padding: 80px 60px 40px
    }

        .banner-section14 .banner-wrapper14 p {
            max-width: 500px
        }

        .banner-section14 .banner-wrapper14 h1 {
            font-size: 48px
        }
}

@media(max-width: 991px) {
    .banner-section14 .banner-wrapper14 {
        padding: 80px 60px 40px;
        text-align: center
    }

        .banner-section14 .banner-wrapper14 .pragraph {
            max-width: 500px;
            line-height: 26px;
            margin: 0 auto
        }

        .banner-section14 .banner-wrapper14 h1 {
            font-size: 48px
        }

    .banner-section14 .hero14-thumb {
        margin: 0 auto
    }
}

@media(max-width: 480px) {
    .banner-section14 .banner-wrapper14 {
        padding: 70px 14px 40px;
        text-align: center
    }

        .banner-section14 .banner-wrapper14 .pragraph {
            max-width: 500px;
            line-height: 26px;
            margin: 0 auto
        }

        .banner-section14 .banner-wrapper14 h1 {
            font-size: 34px
        }

    .banner-section14 .hero14-thumb {
        margin: 0 auto
    }
}

.banner-section15 {
    background: url(../images/hero15-bg.jpg) no-repeat center center;
    background-size: cover;
    z-index: 1
}

    .banner-section15::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: "";
        z-index: -1;
        background: rgba(0,0,0,.35)
    }

    .banner-section15 .banner-content {
        padding: 170px 0 200px
    }

        .banner-section15 .banner-content p {
            font-size: 20px;
            max-width: 669px;
            margin: 0 auto
        }

        .banner-section15 .banner-content .hero-listing .icon {
            border-radius: 100px;
            background: rgba(255,255,255,.15);
            width: 27px;
            height: 27px
        }

@media(max-width: 1399px) {
    .banner-section15 .banner-content {
        padding: 130px 0 160px
    }
}

@media(max-width: 1199px) {
    .banner-section15 .banner-content {
        padding: 120px 0 150px
    }
}

@media(max-width: 991px) {
    .banner-section15 .banner-content {
        padding: 100px 0 130px
    }
}

@media(max-width: 767px) {
    .banner-section15 .banner-content {
        padding: 80px 0 120px
    }

        .banner-section15 .banner-content p {
            font-size: 16px
        }
}

@media(max-width: 575px) {
    .banner-section15 .banner-content {
        padding: 60px 0 90px
    }
}

.banner-section16 .banner-wrapper16 {
    padding: 90px 0 90px
}

.banner-section16 .hero16-thumb {
    position: relative
}

    .banner-section16 .hero16-thumb .sponsor-ele {
        position: absolute;
        top: 39%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: customcir 16s linear infinite
    }

.banner-section16::before {
    position: absolute;
    bottom: 200px;
    right: 200px;
    content: "";
    border-radius: 562px;
    background: #1649ff;
    filter: blur(250px);
    width: 562px;
    height: 162px;
    z-index: -1
}

@media(max-width: 1399px) {
    .banner-section16 .banner-wrapper16 .banner-content h1 {
        font-size: 48px
    }

    .banner-section16 .hero16-thumb .sponsor-ele {
        top: 39%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 380px
    }
}

@media(max-width: 991px) {
    .banner-section16 .banner-wrapper16 {
        padding: 65px 0 80px
    }

        .banner-section16 .banner-wrapper16 .banner-content h1 {
            font-size: 48px
        }
}

@media(max-width: 767px) {
    .banner-section16 .banner-wrapper16 {
        padding: 60px 0 70px
    }

        .banner-section16 .banner-wrapper16 .banner-content h1 {
            font-size: 32px
        }

    .banner-section16 .hero16-thumb .sponsor-ele {
        width: 260px
    }
}

@media(max-width: 480px) {
    .banner-section16 .hero16-thumb .sponsor-ele {
        width: 180px
    }
}

@keyframes customcir {
    100% {
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

.service-breadcrumd.style-gradient {
    background: linear-gradient(180deg, #B5FFC2 0%, #FFF 100%)
}

.service-breadcrumd.style-images {
    background: url(../images/service-breadcrumnd.jpg) no-repeat center center;
    background-size: cover
}

    .service-breadcrumd.style-images::before {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        z-index: -1;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.403)
    }

.service-breadcrumd .clipth-ele1 {
    position: absolute;
    top: 158px;
    left: 0;
    animation: updown 2s linear infinite
}

.service-breadcrumd .clipth-ele2 {
    position: absolute;
    bottom: 0;
    right: 0;
    animation: updown 2s linear infinite
}

@media(max-width: 575px) {
    .service-breadcrumnd-content1 br {
        display: none
    }
}

.service-breadcrumnd-content1 .bread-servide-badge {
    background: rgba(255,255,255,.1)
}

.service-details-linked li a {
    transition: all .4s
}

    .service-details-linked li a:hover {
        background: var(--bg1) !important;
        color: var(--n0) !important
    }

        .service-details-linked li a:hover i {
            color: var(--n0) !important
        }

.breadcrumnd-content .circle {
    font-size: 5px !important;
    color: var(--n0)
}

.breadcrumnd-content .bread-fi {
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.1);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px)
}

.blog-details-bg {
    background: url(../images/blog-details-bg.jpg) no-repeat center center;
    background-size: cover
}

    .blog-details-bg::before {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        z-index: -1;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.403)
    }

.unique-sponsor-wrap {
    display: flex;
    align-items: center
}

    .unique-sponsor-wrap .unique-sponsor-item {
        width: 250px;
        min-width: 250px;
        height: 250px;
        transition: all .4s;
        border-radius: 50%;
        background-color: var(--n0);
        border: 1px solid rgba(28,30,48,.1);
        z-index: 0
    }

        .unique-sponsor-wrap .unique-sponsor-item:not(:first-child) {
            margin-left: -25px
        }

        .unique-sponsor-wrap .unique-sponsor-item img {
            width: 134px;
            height: 27px;
            filter: brightness(0);
            -o-object-fit: contain;
            object-fit: contain;
            transition: all .4s
        }

        .unique-sponsor-wrap .unique-sponsor-item:hover {
            border-color: var(--bg1);
            transform: scale(1.09);
            z-index: 1
        }

            .unique-sponsor-wrap .unique-sponsor-item:hover img {
                filter: brightness(25)
            }

@media(max-width: 1599px) {
    .unique-sponsor-wrap .unique-sponsor-item {
        width: 230px;
        min-width: 230px;
        height: 230px
    }
}

@media(max-width: 1399px) {
    .unique-sponsor-wrap .unique-sponsor-item {
        width: 200px;
        min-width: 200px;
        height: 200px
    }
}

@media(max-width: 1199px) {
    .unique-sponsor-wrap .unique-sponsor-item {
        width: 175px;
        min-width: 175px;
        height: 175px
    }

        .unique-sponsor-wrap .unique-sponsor-item img {
            width: 124px;
            height: 24px
        }
}

@media(max-width: 991px) {
    .unique-sponsor-wrap .unique-sponsor-item {
        width: 128px;
        min-width: 128px;
        height: 128px
    }

        .unique-sponsor-wrap .unique-sponsor-item:not(:first-child) {
            margin-left: -15px
        }

        .unique-sponsor-wrap .unique-sponsor-item img {
            width: 104px;
            height: 20px
        }
}

@media(max-width: 767px) {
    .unique-sponsor-wrap {
        flex-wrap: wrap;
        justify-content: center
    }

        .unique-sponsor-wrap .unique-sponsor-item:not(:first-child) {
            margin-left: 0px
        }

        .unique-sponsor-wrap .unique-sponsor-item img {
            width: 104px;
            height: 20px
        }
}

.partnered-style16 p {
    color: #445686
}

.partnered-style16 .partnered-item img {
    max-width: 110px
}

.partnered-style-custom .partnered-item img {
   /* opacity: .5 !important;
    filter: brightness(25)*/
}

.tax-wrapper {
    border-radius: 16px;
    background: var(--n0);
    box-shadow: 0px 20px 24px -6px rgba(16,24,40,.08);
    padding: 55px 60px;
    margin-top: -100px;
    z-index: 1;
    position: relative
}

@media(max-width: 1399px) {
    .tax-wrapper {
        padding: 35px 30px
    }
}

@media(max-width: 767px) {
    .tax-wrapper {
        padding: 35px 20px
    }
}

.tax-items .cion {
    width: 70px;
    height: 70px;
    min-width: 70px;
    border-radius: 50%;
    border-radius: 100px;
    border: 1px dashed #005651;
    background: rgba(255,255,255,.1)
}

    .tax-items .cion img {
        width: 34px
    }

.tax-items .cont {
    max-width: 259px
}

@media(max-width: 767px) {
    .tax-items .cion {
        width: 50px;
        height: 50px;
        min-width: 50px
    }

        .tax-items .cion img {
            width: 24px
        }
}

.about-section4 .about-counter-item {
    border-top: 1px solid rgba(28,30,48,.1)
}

.about-section12 {
    background: linear-gradient(180deg, #B5FFC2 0%, #FFF 123.45%)
}

.about-thumb12 .about-thumb-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 202px;
    height: 200px;
    background: rgba(1,166,107,.8);
    border-top-right-radius: 200px;
    border-bottom-left-radius: 14px
}

@media(max-width: 575px) {
    .about-thumb12 .about-thumb-content {
        width: 180px;
        height: 180px
    }
}

.about-thumb12 .about-thumb-element {
    position: absolute;
    top: -90px;
    left: -90px;
    z-index: -1;
    animation: customlr 2s linear infinite
}

.loan-amount-head .range-slider {
    position: relative;
    width: 100%;
    height: 30px
}

    .loan-amount-head .range-slider .slider-track-1, .loan-amount-head .range-slider .slider-track {
        width: 100%;
        height: 7px;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        border-radius: 5px
    }

    .loan-amount-head .range-slider input[type=range] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 0 0 !important;
        width: 100%;
        outline: none;
        position: absolute;
        margin: auto;
        top: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0);
        pointer-events: none;
        font-size: 13px;
        border: unset
    }

        .loan-amount-head .range-slider input[type=range]::-webkit-slider-runnable-track {
            -webkit-appearance: none;
            height: 5px
        }

    .loan-amount-head .range-slider #range-slider-1[type=range]::-webkit-slider-runnable-track {
        -webkit-appearance: none;
        height: 5px;
        display: none
    }

    .loan-amount-head .range-slider input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 28px;
        height: 28px;
        background-color: var(--n0);
        border-radius: 50%;
        border: 1.5px solid var(--p10);
        cursor: pointer;
        margin-top: -9px;
        pointer-events: auto
    }

.about-calculation .pay-border {
    border-bottom: 1px solid rgba(0,0,0,.1)
}

.about-sectionv2 p {
    max-width: 527px;
    margin: 0 auto
}

.about-sectionv2::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    content: "";
    z-index: -1;
    background: var(--bg1)
}

@media(max-width: 991px) {
    .empowering-count-item .counters span {
        line-height: 42px !important
    }
}

.about-sectionv3 {
    background: url(../images/about-bread3.jpg) no-repeat center center;
    background-size: cover
}

    .about-sectionv3::before {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        z-index: -1;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.403)
    }

    .about-sectionv3 .about-breadcrumnd-content3 {
        padding: 110px 0 140px
    }

        .about-sectionv3 .about-breadcrumnd-content3 p {
            max-width: 527px;
            margin: 0 auto
        }

@media(max-width: 1399px) {
    .about-sectionv3 .about-breadcrumnd-content3 {
        padding: 80px 0 100px
    }

        .about-sectionv3 .about-breadcrumnd-content3 p {
            max-width: 527px;
            margin: 0 auto
        }
}

@media(max-width: 991px) {
    .about-sectionv3 .about-breadcrumnd-content3 {
        padding: 70px 0 100px
    }
}

@media(max-width: 575px) {
    .about-sectionv3 .about-breadcrumnd-content3 {
        padding: 70px 0 90px
    }
}

.financial-about-content .crafting .icon {
    width: 32px;
    min-width: 32px;
    height: 32px
}

.financial-wrapper-about .line {
    height: 67px;
    width: 1px;
    background: rgba(0,0,0,.2)
}

@media(max-width: 991px) {
    .financial-wrapper-about .financial-count-item .counters span {
        line-height: 42px !important
    }
}

.financial-dirve-item .icon {
    width: 70px;
    min-width: 70px;
    height: 70px;
    margin: 0 auto
}

.about-sectionv4 {
    background: url(../images/about-4.jpg) no-repeat center center;
    background-size: cover
}

    .about-sectionv4::before {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        z-index: -1;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.403)
    }

    .about-sectionv4 .about-breadcrumnd-content4 {
        padding: 190px 0 215px
    }

        .about-sectionv4 .about-breadcrumnd-content4 .badge {
            border-radius: 100px;
            background: linear-gradient(90deg, #01A66B 0%, rgba(1, 166, 107, 0) 100%);
            padding: 12px 12px;
            display: inline-block
        }

        .about-sectionv4 .about-breadcrumnd-content4 p {
            max-width: 527px
        }

@media(max-width: 1399px) {
    .about-sectionv4 .about-breadcrumnd-content4 {
        padding: 120px 0 120px
    }
}

@media(max-width: 991px) {
    .about-sectionv4 .about-breadcrumnd-content4 {
        padding: 80px 0 90px
    }
}

.community-satisfied-item {
    transition: all .5s
}

    .community-satisfied-item .social-area li a i {
        color: var(--bg1)
    }

    .community-satisfied-item.style2 {
        position: relative;
        z-index: 1
    }

        .community-satisfied-item.style2::before {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            content: "";
            background: linear-gradient(180deg, rgba(1, 166, 107, 0) 41.05%, #01A66B 100%)
        }

        .community-satisfied-item.style2 .cont {
            position: absolute;
            bottom: -100%;
            left: 50%;
            transform: translateX(-50%);
            transition: all .5s
        }

    .community-satisfied-item.active, .community-satisfied-item:hover {
        background: var(--bg1)
    }

        .community-satisfied-item.active .cont, .community-satisfied-item:hover .cont {
            bottom: 4px
        }

            .community-satisfied-item.active .cont h5, .community-satisfied-item:hover .cont h5 {
                color: var(--n0)
            }

                .community-satisfied-item.active .cont h5 a, .community-satisfied-item:hover .cont h5 a {
                    color: var(--n0) !important
                }

            .community-satisfied-item.active .cont span, .community-satisfied-item:hover .cont span {
                color: var(--n0)
            }

.value-items-version16 {
    transition: all .5s
}

    .value-items-version16 .box {
        max-width: 240px;
        margin: 0 auto
    }

    .value-items-version16 .icon-area {
        margin: 0 auto
    }

@media(max-width: 1199px) {
    .value-items-version16 .icon-area img {
        width: 28px
    }
}

.value-items-version16:hover {
    background: var(--bg1) !important
}

    .value-items-version16:hover h5 {
        color: var(--n0) !important
    }

.value-dirve-item {
    background: var(--bg3);
    transition: all .5s
}

    .value-dirve-item .icon-inner {
        width: 70px;
        height: 75px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .5s
    }

        .value-dirve-item .icon-inner .icon {
            position: absolute;
            z-index: 1
        }

    .value-dirve-item:hover {
        background: var(--bg1)
    }

        .value-dirve-item:hover .icon-inner .icon {
            filter: brightness(0)
        }

        .value-dirve-item:hover .icon-inner .shape {
            filter: brightness(25)
        }

        .value-dirve-item:hover h5, .value-dirve-item:hover a, .value-dirve-item:hover p {
            color: var(--n0) !important
        }

.recognitions-item .badge-style {
    width: 24px;
    min-width: 24px;
    height: 24px;
    border: 1px solid rgba(28,30,48,.1)
}

    .recognitions-item .badge-style::before {
        position: absolute;
        width: 14px;
        height: 14px;
        content: "";
        background: var(--s2);
        border-radius: 50%
    }

.milestone-wrapper {
    z-index: 1
}

    .milestone-wrapper::before {
        position: absolute;
        top: 84px;
        left: 0;
        width: 100%;
        height: 1px;
        content: "";
        background: rgba(0,0,0,.1);
        z-index: -1
    }

@media(max-width: 1399px) {
    .milestone-wrapper::before {
        top: 74px;
        left: 0
    }
}

@media(max-width: 991px) {
    .milestone-wrapper::before {
        display: none
    }

    .milestone-wrapper .recognitions-item .badge-style {
        margin: 0 auto
    }
}

.get-common {
    border-radius: 32px;
    background: #000000;
    border: 1px solid rgba(255,255,255,.15);
    overflow: hidden
}

    .get-common p {
        color: rgba(255,255,255,.6)
    }

    .get-common .development-grp {
        margin-left: 45px
    }

    .get-common .collaborate {
        width: 80%;
        margin: 0 auto
    }

.get-problems-footer p {
    color: rgba(255,255,255,.6);
    font-size: 18px;
    max-width: 505px
}

@media(max-width: 991px) {
    .get-problems-footer p {
        font-size: 15px
    }
}

@media(max-width: 767px) {
    .get-problems-footer .graduate {
        margin: 0 auto 18px
    }
}

.section7-element-route {
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%)
}

.containerss {
    position: relative;
    width: 100%;
    border: 1px solid #1c1e30;
    border-radius: 8px;
    padding: 4px 0px;
    padding-right: 14px;
    background: #fff;
    margin-bottom: 18px
}

    .containerss .recevice-money {
        width: 100%
    }

        .containerss .recevice-money input {
            color: rgba(28,30,48,.7);
            font-weight: 500;
            font-size: 16px;
            width: 100%;
            height: 100%;
            border: unset;
            background: rgba(0,0,0,0);
            outline: none
        }

        .containerss .recevice-money ::-moz-placeholder {
            color: rgba(28,30,48,.7);
            font-weight: 500
        }

        .containerss .recevice-money ::placeholder {
            color: rgba(28,30,48,.7);
            font-weight: 500
        }

    .containerss .ulList {
        min-width: 90px;
        color: var(--n5);
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 500;
        text-transform: uppercase
    }

        .containerss .ulList i {
            font-size: 17px
        }

        .containerss .ulList span img {
            width: 24px;
            min-width: 24px
        }

        .containerss .ulList .ulImg {
            width: 24px;
            min-height: 24px;
            float: left;
            display: none
        }

        .containerss .ulList .fa-chevron-down {
            float: right;
            padding-right: 5px;
            line-height: 27px
        }

    .containerss .liList {
        box-shadow: rgba(99,99,99,.2) 0px 2px 8px 0px;
        width: 100%;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        cursor: pointer;
        display: none;
        position: absolute;
        padding: 12px 6px;
        z-index: 9
    }

        .containerss .liList .li {
            width: 100%;
            height: 30px;
            background: #fff;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 8px;
            transition: all .4s
        }

            .containerss .liList .li:hover {
                background: #3498db;
                color: #fff !important
            }

                .containerss .liList .li:hover span {
                    color: #fff !important
                }

            .containerss .liList .li .liImg {
                width: 24px;
                min-height: 24px;
                float: left
            }

.portfolio-section12 {
    background: linear-gradient(180deg, #B5FFC2 0%, #FFF 123.45%)
}

.modern-banking {
    z-index: 1
}

    .modern-banking .modern-head p {
        max-width: 526px
    }

    .modern-banking .modern-banking {
        position: absolute;
        left: 125px;
        top: 125px;
        animation: rots 2s linear infinite;
        z-index: -1
    }

.modern-items .thumb-modern1 {
    margin: 0 auto;
    max-width: 516px
}

    .modern-items .thumb-modern1 img {
        width: 100%
    }

.modern-items .thumb-modern2 {
    margin: 0 auto -80px;
    max-width: 440px
}

    .modern-items .thumb-modern2 img {
        width: 100%
    }

.modern-count-item {
    transition: all .4s
}

    .modern-count-item:hover {
        background: #ebebeb
    }

.abroad-items {
    height: 485px;
    overflow: hidden;
    position: relative
}

    .abroad-items.style1 {
        background: #005651
    }

        .abroad-items.style1 .abroad1 {
            animation: lfs 4s linear infinite;
            position: absolute;
            bottom: 30px;
            right: -60px;
            max-width: 400px;
            height: 200px
        }

            .abroad-items.style1 .abroad1 img {
                width: 100%;
                height: 100%
            }

    .abroad-items.style2 {
        background: #c3eddf
    }

        .abroad-items.style2 .abroad2 {
            position: absolute;
            right: -120px;
            bottom: -200px;
            animation: cirs 20s linear infinite
        }

    .abroad-items.style3 {
        background: #01a66b
    }

        .abroad-items.style3 .abroad3 {
            position: absolute;
            left: 0;
            bottom: 0
        }

@media(max-width: 1399px) {
    .abroad-items {
        height: 410px
    }

        .abroad-items.style1 .abroad1 {
            bottom: 30px;
            right: -60px;
            max-width: 300px;
            height: 150px
        }

            .abroad-items.style1 .abroad1 img {
                width: 100%;
                height: 100%
            }
}

@media(max-width: 767px) {
    .abroad-items {
        height: 390px
    }

        .abroad-items.style1 .abroad1 {
            bottom: 10px;
            right: -10px;
            max-width: 300px;
            height: 150px
        }

            .abroad-items.style1 .abroad1 img {
                width: 100%;
                height: 100%
            }
}

@keyframes lfs {
    50% {
        transform: translateX(30px)
    }
}

@keyframes cirs {
    100% {
        transform: rotate(360deg)
    }
}

.feature-items10 {
    padding: 32px;
    border-radius: 16px;
    border: 1px solid rgba(28,30,48,.1);
    background: rgba(0,86,81,.05);
    transition: all .4s
}

    .feature-items10 .cmn-header {
        background: rgba(0,86,81,.1);
        font-size: 14px
    }

    .feature-items10 .thumb-planning {
        border-radius: 16px;
        position: relative;
        width: 100%
    }

        .feature-items10 .thumb-planning .mimg {
            border-radius: 16px;
            width: 100%
        }

        .feature-items10 .thumb-planning .feature-planning-ele {
            position: absolute;
            bottom: 18px;
            left: 24px;
            animation: updown 2s linear infinite
        }

    .feature-items10 .feature-paragraph {
        max-width: 252px
    }

    .feature-items10.feature-style1 {
        transition: all .4s
    }

        .feature-items10.feature-style1 .thumb-planning {
            max-width: 234px;
            width: 234px
        }

            .feature-items10.feature-style1 .thumb-planning .feature-planning-ele {
                left: 10px;
                bottom: 8px;
                width: 80px;
                -o-object-fit: contain;
                object-fit: contain
            }

@media(max-width: 500px) {
    .feature-items10.feature-style1 {
        flex-wrap: wrap;
        display: grid;
        justify-content: center;
        text-align: center
    }

        .feature-items10.feature-style1 .thumb-planning {
            width: 100%;
            max-width: 100%
        }

            .feature-items10.feature-style1 .thumb-planning img {
                width: 100%
            }
}

.feature-items10.feature-style1:hover {
    background: var(--n0)
}

@media(max-width: 1199px) {
    .feature-items10 {
        gap: 14px;
        padding: 20px
    }

        .feature-items10 .thumb-planning .feature-planning-ele {
            width: 150px;
            -o-object-fit: contain;
            object-fit: contain;
            left: 10px;
            bottom: 8px
        }
}

.feature-items10:hover {
    background: var(--n0)
}

.unique-feature-section .feature-incr {
    background: linear-gradient(335deg, #A02DC9 -9.54%, #FF7B83 -1.31%, #C471ED 27.62%, #1F00FF 102.13%)
}

.unique-feature-section .feature-incr2 {
    background: #c5ff7a
}

.unique-feature-section .feature-banking-app .feature-app {
    position: absolute;
    bottom: 0;
    right: 0;
    animation: leftright 3s linear infinite
}

@media(max-width: 991px) {
    .unique-feature-section .feature-banking-app .feature-app {
        width: 200px
    }
}

@media(max-width: 767px) {
    .unique-feature-section .feature-banking-app .feature-app {
        width: 200px;
        position: initial;
        margin-top: 20px
    }
}

.unique-feature-section .feature-exclusice .play {
    max-width: 126px
}

.feaure-element14 {
    position: absolute;
    top: 0;
    left: 0;
    animation: updwon 2s linear infinite
}

.feature-item16 {
    border: unset
}

    .feature-item16 .feature-app {
        position: absolute;
        bottom: -20px;
        right: -20px;
        z-index: -1
    }

    .feature-item16 a {
        transition: all .4s
    }

    .feature-item16:hover a {
        color: var(--p2)
    }

    .feature-item16.style1 .box {
        max-width: 431px
    }

    .feature-item16.style1::before {
        position: absolute;
        left: -60px;
        bottom: -60px;
        content: "";
        border-radius: 276px;
        background: rgba(22,73,255,.6);
        filter: blur(150px);
        width: 176px;
        height: 176px;
        z-index: -1
    }

    .feature-item16 .icon {
        background: var(--bg20);
        width: 80px;
        height: 80px;
        border-radius: 16px;
        margin-bottom: 24px
    }

        .feature-item16 .icon img {
            filter: brightness(0);
            opacity: .7
        }

    .feature-item16.style2::before {
        position: absolute;
        right: -60px;
        bottom: -60px;
        content: "";
        border-radius: 276px;
        background: rgba(22,73,255,.6);
        filter: blur(150px);
        width: 176px;
        height: 176px;
        z-index: -1
    }

    .feature-item16.style2 .box {
        max-width: 336px
    }

@media(max-width: 1199px) {
    .feature-item16 .icon {
        width: 55px;
        height: 55px;
        margin-bottom: 16px
    }

        .feature-item16 .icon img {
            width: 20px
        }
}

.blog-section4 {
    margin-bottom: -30px
}

    .blog-section4.blog-style12 {
        background: linear-gradient(180deg, #B5FFC2 0%, #FFF 123.45%)
    }

.blog-items4 {
    border-radius: 16px;
    overflow: hidden;
    padding-bottom: 30px
}

    .blog-items4 .content {
        border-top: unset;
        border: 1px solid rgba(28,30,48,.1);
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px
    }

    .blog-items4 .thumb {
        display: block;
        overflow: hidden
    }

        .blog-items4 .thumb img {
            overflow: hidden;
            transition: all .4s
        }

    .blog-items4:hover .thumb img {
        transform: scale(1.05)
    }

    .blog-items4:hover h5 a {
        color: var(--s2) !important
    }

.blog8-items {
    border: 1px solid rgba(28,30,48,.1)
}

    .blog8-items .content .blog8-badge {
        border-radius: 100px;
        background: rgba(0,86,81,.1);
        padding: 8px 12px;
        font-size: 14px;
        font-weight: 500;
        color: #005651
    }

    .blog8-items .content .blog8-arrow {
        width: 48px;
        min-width: 48px;
        height: 48px;
        border: 1px solid rgba(28,30,48,.1)
    }

        .blog8-items .content .blog8-arrow i {
            transform: rotate(-45deg)
        }

    .blog8-items .content:hover .blog8-arrow {
        background: var(--s2)
    }

        .blog8-items .content:hover .blog8-arrow i {
            color: #fff
        }

    .blog8-items.resue-blog .thumb {
        width: 242px;
        min-width: 242px
    }

@media(max-width: 1199px) {
    .blog8-items.resue-blog .thumb {
        width: 100%;
        min-width: 100%
    }

        .blog8-items.resue-blog .thumb img {
            width: 100%;
            height: 100%
        }

    .blog8-items.resue-blog .content {
        padding: 20px
    }
}

.blog8-items .thumb {
    overflow: hidden
}

    .blog8-items .thumb img {
        overflow: hidden;
        transition: all .4s
    }

.blog8-items:hover .thumb {
    overflow: hidden
}

    .blog8-items:hover .thumb img {
        transform: scale(1.05)
    }

.blog-items10.blog-items12 .thumb {
    overflow: hidden
}

    .blog-items10.blog-items12 .thumb img {
        overflow: hidden;
        transition: all .5s
    }

.blog-items10.blog-items12 .box-style {
    background: rgba(0,0,0,0)
}

.blog-items10.blog-items12:hover .content .box-style {
    border-color: var(--s2) !important;
    background: var(--s2) !important
}

.blog-items10.blog-items12:hover .thumb img {
    transform: scale(1.05)
}

.blog-items15 {
    transition: all .4s
}

    .blog-items15 .arrow-blog {
        transition: all .4s
    }

    .blog-items15::before {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 0%;
        content: "";
        background: url(../images/blog15-v1.jpg) no-repeat top center;
        background-size: cover;
        z-index: -1;
        transition: all .5s
    }

    .blog-items15::after {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0%;
        content: "";
        background: linear-gradient(180deg, rgba(28, 30, 48, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
        z-index: -1;
        transition: all .5s
    }

    .blog-items15.active::before, .blog-items15:hover::before {
        height: 100%
    }

    .blog-items15.active::after, .blog-items15:hover::after {
        height: 100%
    }

    .blog-items15.active .arrow-blog, .blog-items15:hover .arrow-blog {
        color: var(--p10) !important
    }

        .blog-items15.active .arrow-blog span, .blog-items15:hover .arrow-blog span {
            color: var(--p10) !important
        }

    .blog-items15.active .black-border, .blog-items15:hover .black-border {
        border: 1px solid var(--n0) !important;
        color: var(--n0)
    }

    .blog-items15.active span, .blog-items15.active h4, .blog-items15:hover span, .blog-items15:hover h4 {
        color: var(--n0) !important
    }

        .blog-items15.active span a, .blog-items15.active h4 a, .blog-items15:hover span a, .blog-items15:hover h4 a {
            color: var(--n0) !important
        }

@media(max-width: 1199px) {
    .blog-items15 h4 a {
        font-size: 24px;
        font-weight: 600
    }
}

@media(max-width: 991px) {
    .blog-items15 h4 a {
        font-size: 18px;
        font-weight: 600
    }
}

.blog-details-2::before {
    position: absolute;
    top: 0;
    width: 100%;
    height: 882px;
    content: "";
    background: var(--bg4);
    z-index: -1
}

.blog-details-2 .blog-details-wrapper2 .social-area li a {
    border: unset;
    background: #f2f2f2
}

    .blog-details-2 .blog-details-wrapper2 .social-area li a i {
        color: var(--black-clr)
    }

    .blog-details-2 .blog-details-wrapper2 .social-area li a:hover {
        background: var(--bg1)
    }

        .blog-details-2 .blog-details-wrapper2 .social-area li a:hover i {
            color: var(--n0)
        }

.blog-details-2 .blog-details-content .circle {
    font-size: 5px;
    color: var(--black-clr)
}

.blog-details-2 .social-area-sticky {
    position: sticky;
    top: 120px
}

.blog-details-2 .single-quote {
    background: #f8f8f8
}

    .blog-details-2 .single-quote img {
        width: 40px;
        height: 40px;
        -o-object-fit: contain;
        object-fit: contain
    }

    .blog-details-2 .single-quote p {
        max-width: 728px
    }

.related-tags-wrap .related-tags a {
    transition: all .4s
}

    .related-tags-wrap .related-tags a:hover {
        background: var(--bg1) !important;
        color: var(--n0) !important
    }

.related-tags-wrap .share {
    width: 45px;
    height: 45px
}

    .related-tags-wrap .share i {
        color: var(--n0);
        font-size: 22px
    }

.leave-comment-blog .input-area {
    background: var(--n0)
}

    .leave-comment-blog .input-area textarea, .leave-comment-blog .input-area input {
        background: var(--n0);
        color: var(--black-clr)
    }

        .leave-comment-blog .input-area textarea::-moz-placeholder, .leave-comment-blog .input-area input::-moz-placeholder {
            color: var(--black-clr)
        }

        .leave-comment-blog .input-area textarea::placeholder, .leave-comment-blog .input-area input::placeholder {
            color: var(--black-clr)
        }

.leave-comment-blog .box-style {
    color: var(--n0)
}

    .leave-comment-blog .box-style i {
        color: var(--n0) !important
    }

.leave-comment-blog .blog-same-check .form-check-input {
    padding: 4px;
    width: 24px;
    height: 24px
}

.blog-common-wrapper .item-line {
    width: 100%;
    height: 1px;
    background: rgba(28,30,48,.1)
}

.blog-common-items .published-box {
    border: 1px solid var(--black-clr);
    min-width: 140px
}

.blog-common-items .line {
    width: 96px;
    height: 2px;
    display: block;
    background: var(--black-clr)
}

.blog-common-items .blog-big-thumb {
    overflow: hidden
}

    .blog-common-items .blog-big-thumb img {
        overflow: hidden;
        transition: all .4s
    }

    .blog-common-items .blog-big-thumb:hover img {
        transform: scale(1.1)
    }

.pagination-common li a {
    width: 36px;
    min-width: 36px;
    height: 36px;
    transition: all .4s
}

    .pagination-common li a:hover {
        background: var(--bg1);
        color: var(--n0)
    }

.blog-items-list .thumb {
    max-width: 399px
}

@media(max-width: 575px) {
    .blog-items-list .thumb {
        max-width: 100%
    }
}

.common-right-bararea {
    position: sticky;
    top: 100px
}

    .common-right-bararea .tags li a {
        transition: all .4s;
        font-size: 16px;
        background: #f8f8f8;
        display: inline-block
    }

        .common-right-bararea .tags li a:hover {
            background: var(--bg1);
            color: var(--n0)
        }

    .common-right-bararea .categorys li i {
        font-size: 5px
    }

    .common-right-bararea .searchs i {
        color: var(--n10)
    }

    .common-right-bararea .searchs input {
        padding: 10px 0;
        color: var(--n10);
        border: unset;
        outline: none
    }

        .common-right-bararea .searchs input::-moz-placeholder {
            color: var(--n10)
        }

        .common-right-bararea .searchs input::placeholder {
            color: var(--n10)
        }

    .common-right-bararea .recent-post .thumb-recent {
        min-width: 80px
    }

.paystep-items .icon-area {
    border: 1.6px dashed #01a66b;
    padding: 8px
}

.paystep-items .step-badge {
    border-radius: 100px;
    background: #005651;
    padding: 5px 16px;
    font-size: 16px;
    color: #fff;
    text-align: center
}

.paystep-items:hover .step-badge {
    background: #ffaf40;
    color: #1c1e30
}

.money-tags-inner li a {
    background: #fff;
    border-radius: 100px;
    padding: 14px 16px;
    transition: all .4s;
    display: flex !important
}

    .money-tags-inner li a svg path {
        transition: all .4s
    }

    .money-tags-inner li a:hover {
        background: #01a66b;
        color: #fff
    }

        .money-tags-inner li a:hover svg path {
            fill: #fff;
            stroke: #fff
        }

.money-securitys {
    background: #ecfffc
}

.money-security-content .security-message {
    border-radius: 8px;
    transition: all .5s
}

    .money-security-content .security-message p {
        color: #4b655c
    }

    .money-security-content .security-message.active, .money-security-content .security-message:hover {
        background: #c3eddf
    }

.security-message10.active, .security-message10:hover {
    background: rgba(0,86,81,.102) !important
}

.money-security-thumb {
    position: relative
}

    .money-security-thumb .asset-box {
        max-width: 400px;
        box-shadow: 0px 6px 30px 0px rgba(0,0,0,.08);
        background: #fff;
        position: absolute;
        animation: updown 2s linear infinite;
        top: 140px;
        left: -100px
    }

        .money-security-thumb .asset-box .icon {
            min-width: 75px;
            height: 75px;
            border-radius: 8px;
            background: #1c1e30
        }

        .money-security-thumb .asset-box .just-badge {
            position: absolute;
            right: 16px;
            top: 16px
        }

@media(max-width: 1399px) {
    .money-security-thumb .asset-box {
        left: 0
    }
}

@media(max-width: 420px) {
    .money-security-thumb .asset-box .icon {
        min-width: 55px;
        height: 55px;
        border-radius: 8px
    }

    .money-security-thumb .asset-box .just-badge {
        right: 8px;
        top: 8px
    }
}

@keyframes updown {
    50% {
        transform: translateY(-11px)
    }
}

.team-item6 {
    overflow: hidden
}

    .team-item6 .social-area {
        border-radius: 100px;
        background: rgba(255,255,255,.1);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px);
        padding: 14px 10px;
        bottom: -32px;
        width: 80%;
        left: 32px;
        transition: all .4s;
        opacity: 0
    }

        .team-item6 .social-area li a {
            width: 40px;
            height: 40px;
            min-width: 40px;
            border-radius: 50%;
            background: var(--bg6);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: all .4s;
            border: unset
        }

            .team-item6 .social-area li a i {
                color: var(--black-clr)
            }

            .team-item6 .social-area li a:hover {
                background: var(--p2);
                color: var(--black-clr)
            }

    .team-item6 .thumb img {
        transition: all .4s;
        overflow: hidden
    }

    .team-item6:hover .social-area {
        bottom: 32px;
        opacity: 1
    }

    .team-item6:hover .thumb img {
        transform: scale(1.05)
    }

.testimonial3 .single-item {
    background: var(--n0)
}

.swiper-wrapper {
    transition-timing-function: linear !important
}

.w-fit {
    width: -moz-fit-content !important;
    width: fit-content !important
}

.testimonial-items4 {
    margin-top: 70px
}

    .testimonial-items4 .quote-icon {
        width: 118px;
        height: 80px;
        background: var(--n0);
        margin: -80px auto 0;
        border-radius: 10px;
        z-index: 1
    }

    .testimonial-items4 .img-area {
        width: 76px;
        height: 76px;
        margin: 0 auto
    }

        .testimonial-items4 .img-area img {
            width: 100%;
            height: 100%;
            border-radius: 50%
        }

    .testimonial-items4:hover .profile-info p {
        color: var(--n0) !important
    }

@media(max-width: 991px) {
    .testimonial-items4 .quote-icon {
        margin: -60px auto 0
    }

        .testimonial-items4 .quote-icon img {
            width: 50px
        }
}

.testimonial5 .swiper-slide .testimonial-items5 {
    transition: all .4s;
    border-radius: 32px;
    border: 1px solid rgba(28,30,48,.6);
    background: var(--n0)
}

    .testimonial5 .swiper-slide .testimonial-items5 .img-area {
        width: 60px;
        height: 60px
    }

    .testimonial5 .swiper-slide .testimonial-items5 .content {
        padding: 40px
    }

    .testimonial5 .swiper-slide .testimonial-items5 .profile-info {
        background: rgba(195,237,223,.2)
    }

@media(max-width: 500px) {
    .testimonial5 .swiper-slide .testimonial-items5 .content {
        padding: 20px
    }
}

.testimonial5 .swiper-slide.swiper-slide-active {
    box-shadow: none !important
}

    .testimonial5 .swiper-slide.swiper-slide-active .single-item {
        overflow: hidden !important;
        border-bottom-left-radius: 32px;
        border-bottom-right-radius: 32px
    }

.testimonial5 .swiper-3d .swiper-slide-shadow {
    background-image: linear-gradient(to right, #EFEEE7, #fff);
    border-radius: 10px
}

.testimonial5 .test5-pagination .swiper-pagination-bullet {
    opacity: 1;
    background: rgba(28,30,48,.1);
    width: 40px;
    height: 4px;
    border-radius: 0
}

    .testimonial5 .test5-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
        background: var(--black-clr)
    }

.testimonial-section6 .testimonial-wrapper6 .testimonial-item6 p {
    border-bottom: 1px solid rgba(28,30,48,.1)
}

@media(max-width: 991px) {
    .testimonial-section6 .testimonial-wrapper6 .testimonial-item6 p {
        font-size: 16px;
        line-height: 24px
    }
}

.testimonial-clutch .clutch-box {
    border: 1px solid rgba(28,30,48,.1);
    width: 416px;
    height: 416px;
    border-radius: 50%;
    transition: all .4s
}

    .testimonial-clutch .clutch-box:hover {
        background: var(--bg6);
        z-index: 1;
        position: relative
    }

    .testimonial-clutch .clutch-box:not(:last-child) {
        margin-bottom: -80px
    }

@media(max-width: 1199px) {
    .testimonial-clutch .clutch-box {
        width: 316px;
        height: 316px
    }

        .testimonial-clutch .clutch-box:not(:last-child) {
            margin-bottom: -50px
        }
}

@media(max-width: 991px) {
    .testimonial-clutch .clutch-box {
        width: 260px;
        height: 260px
    }

        .testimonial-clutch .clutch-box:not(:last-child) {
            margin-bottom: -30px
        }
}

@media(max-width: 767px) {
    .testimonial-clutch {
        display: flex
    }
}

@media(max-width: 575px) {
    .testimonial-clutch {
        display: grid;
        justify-content: center;
        margin: 0 auto 30px
    }

        .testimonial-clutch .clutch-box {
            margin: 0 auto
        }
}

.testimonial-element-end {
    margin-left: auto
}

@media(max-width: 991px) {
    .testimonial-element-end {
        display: none
    }
}

.testimonial7 .more-case {
    border: 1px solid var(--n0)
}

    .testimonial7 .more-case:hover span {
        color: var(--black-clr) !important
    }

.testimonial-items8 {
    transition: all .4s
}

    .testimonial-items8 .line {
        width: 100%;
        height: 1px;
        background: rgba(0,86,81,.1)
    }

    .testimonial-items8:hover {
        background: var(--bg1) !important
    }

        .testimonial-items8:hover .line {
            background: rgba(255,255,255,.1)
        }

        .testimonial-items8:hover div, .testimonial-items8:hover i, .testimonial-items8:hover h6, .testimonial-items8:hover p {
            color: var(--n0) !important
        }

        .testimonial-items8:hover ul li i {
            color: var(--p2) !important
        }

.testimonial-wrappers9 {
    margin-left: 17%
}

    .testimonial-wrappers9 .testimonial-items8:hover {
        background: var(--p5) !important
    }

@media(max-width: 1890px) {
    .testimonial-wrappers9 {
        margin-left: 0
    }
}

.testimonial-section10 .testimonial10-element {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

.testimonial-section10 .testimonial10-element1 {
    position: absolute;
    left: 12px;
    top: 12px;
    animation: rotate 10s linear infinite;
    width: 100px
}

@media(max-width: 575px) {
    .testimonial-section10 .testimonial10-element1 {
        position: absolute;
        left: 10px;
        top: 10px;
        animation: rotate 10s linear infinite;
        width: 50px
    }
}

.testimonial-item10 {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(153, 153, 153, 0) 100%);
    transition: all .4s
}

    .testimonial-item10 p {
        border-bottom: 1px solid rgba(255,255,255,.1)
    }

    .testimonial-item10:hover {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 1000%, rgba(153, 153, 153, 0) 0%)
    }

.testimonial-wrapper11 .testimonial-inner11 {
    width: 50%
}

    .testimonial-wrapper11 .testimonial-inner11 .single-item {
        transition: all .5s
    }

        .testimonial-wrapper11 .testimonial-inner11 .single-item .img-area {
            width: 60px;
            height: 60px
        }

        .testimonial-wrapper11 .testimonial-inner11 .single-item .quote-icon {
            position: absolute;
            right: 24px;
            top: 24px;
            font-size: 36px;
            color: rgba(1,166,107,.1)
        }

        .testimonial-wrapper11 .testimonial-inner11 .single-item p {
            color: rgba(28,30,48,.8)
        }

        .testimonial-wrapper11 .testimonial-inner11 .single-item:hover {
            background: var(--bg1)
        }

            .testimonial-wrapper11 .testimonial-inner11 .single-item:hover h6, .testimonial-wrapper11 .testimonial-inner11 .single-item:hover p, .testimonial-wrapper11 .testimonial-inner11 .single-item:hover span {
                color: var(--n0) !important
            }

@media(max-width: 767px) {
    .testimonial-wrapper11 .testimonial-inner11 {
        width: 100%
    }

        .testimonial-wrapper11 .testimonial-inner11 p {
            font-size: 14px
        }
}

.testimonial-items13 {
    border-radius: 32px;
    border: 1px solid rgba(255,255,255,.15);
    background: #000000;
    padding: 40px 40px;
    position: relative;
    overflow: hidden;
    z-index: 1
}

    .testimonial-items13 .line {
        width: 100%;
        border: 1px dashed rgba(255,255,255,.1);
        height: initial;
        background: rgba(0,0,0,0)
    }

    .testimonial-items13 .emial-info {
        color: rgba(255,255,255,.6)
    }

    .testimonial-items13 p {
        color: rgba(255,255,255,.6)
    }

    .testimonial-items13 .dev-social, .testimonial-items13 .dev-tag {
        border-radius: 100px;
        background: rgba(255,255,255,.05);
        font-size: 16px;
        color: var(--n0);
        text-align: center;
        padding: 8px 12px;
        transition: all .4s
    }

        .testimonial-items13 .dev-social:hover, .testimonial-items13 .dev-tag:hover {
            background: linear-gradient(274deg, #3FFF08 4.65%, #03FFB7 91.31%);
            color: #000
        }

            .testimonial-items13 .dev-social:hover svg path, .testimonial-items13 .dev-tag:hover svg path {
                stroke: #000
            }

    .testimonial-items13::before {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        width: 0px;
        height: 100%;
        border-radius: 32px;
        background: linear-gradient(274deg, #ff9a33 4.65%, #ffc700 91.31%) !important;
        transition: all .4s
    }

    .testimonial-items13.testimonial-item16 {
        background: #1d263f
    }

        .testimonial-items13.testimonial-item16 .line {
            border-color: 1px dashed rgba(255,255,255,.1) !important
        }

        .testimonial-items13.testimonial-item16::before {
            border-radius: 276px !important;
            background: rgba(22,73,255,.6) !important;
            filter: blur(150px) !important;
            width: 120px;
            height: 120px;
            top: initial;
            bottom: 0;
            left: initial;
            right: 0
        }

        .testimonial-items13.testimonial-item16 .dev-tag, .testimonial-items13.testimonial-item16 .dev-social {
            background: var(--n0)
        }

        .testimonial-items13.testimonial-item16:hover .line {
            border-color: 1px dashed rgba(255,255,255,.1) !important
        }

        .testimonial-items13.testimonial-item16:hover h6, .testimonial-items13.testimonial-item16:hover p, .testimonial-items13.testimonial-item16:hover span {
            color: var(--n0) !important
        }

        .testimonial-items13.testimonial-item16:hover .dev-tag, .testimonial-items13.testimonial-item16:hover .dev-social {
            background: var(--p2) !important
        }

            .testimonial-items13.testimonial-item16:hover .dev-tag svg path, .testimonial-items13.testimonial-item16:hover .dev-social svg path {
                stroke: #fff
            }

        .testimonial-items13.testimonial-item16:hover::before {
            bottom: -50px;
            right: -50px
        }

    .testimonial-items13:hover {
        background: rgba(0,0,0,0) !important
    }

        .testimonial-items13:hover::before {
            width: 100%;
            z-index: -1
        }

        .testimonial-items13:hover h6, .testimonial-items13:hover p {
            color: #000 !important
        }

        .testimonial-items13:hover .line {
            border-color: rgba(6,6,6,.112) !important
        }

        .testimonial-items13:hover .dev-social, .testimonial-items13:hover .dev-tag {
            border-radius: 100px;
            background: rgba(6,6,6,.112);
            font-size: 16px;
            color: var(--n0);
            text-align: center;
            padding: 8px 12px;
            transition: all .4s
        }

@media(max-width: 1399px) {
    .testimonial-items13 {
        padding: 24px 20px
    }
}

.testimonial-item14 .author-thumb {
    width: 120px;
    min-width: 120px;
    height: 120px
}

    .testimonial-item14 .author-thumb img {
        width: 100%;
        height: 100%
    }

@media(max-width: 991px) {
    .testimonial-item14 .author-thumb {
        width: 70px;
        min-width: 70px;
        height: 70px
    }

    .testimonial-item14 p {
        line-height: 26px;
        font-size: 17px
    }

    .testimonial-item14 .quote {
        width: 30px
    }
}

.testimonial-section15 .slider-btn button {
    border-color: var(--black-clr) !important
}

    .testimonial-section15 .slider-btn button i {
        color: var(--black-clr)
    }

    .testimonial-section15 .slider-btn button.active, .testimonial-section15 .slider-btn button:hover {
        background: var(--p10) !important;
        color: var(--black-clr) !important
    }

.testimonial-section15.same-tyle-btn .slider-btn button {
    border-color: rgba(0,86,81,.2) !important
}

    .testimonial-section15.same-tyle-btn .slider-btn button i {
        color: var(--black-clr)
    }

    .testimonial-section15.same-tyle-btn .slider-btn button:hover, .testimonial-section15.same-tyle-btn .slider-btn button.active {
        border-color: var(--p10) !important;
        background: var(--p10) !important;
        color: var(--black-clr) !important
    }

.testimonial-section15.same-tyle-btn .testimonial-item6 p {
    border-bottom: 1px solid rgba(0,86,81,.2) !important
}

.testimonial-section15 .swiper-slide.swiper-slide-active .testimonial-items15 {
    border: 1px solid var(--p10);
    background: var(--p10)
}

    .testimonial-section15 .swiper-slide.swiper-slide-active .testimonial-items15 .arrows {
        border: 1px solid var(--p10);
        transform: scale(1.07);
        background: var(--n0)
    }

.testimonial-items15 {
    background: #eff9f6;
    transition: all .5s;
    border: 1px solid #eff9f6
}

    .testimonial-items15 img {
        width: 65px;
        height: 65px
    }

    .testimonial-items15 p {
        color: #4a5551
    }

    .testimonial-items15 .line {
        width: 115px;
        height: 4px;
        background: #ff414c
    }

    .testimonial-items15 .arrows {
        border: 1px solid var(--black-clr);
        width: 55px;
        height: 55px;
        background: var(--p10);
        color: var(--black-clr)
    }

    .testimonial-items15:hover {
        border: 1px solid var(--p10);
        background: var(--p10)
    }

        .testimonial-items15:hover .arrows {
            border: 1px solid var(--p10);
            transform: scale(1.07);
            background: var(--n0)
        }

.testimonial-style16 .line {
    border: 1px dashed rgba(28,30,48,.1)
}

.testimonial-style16 .testimonial-item16 p {
    color: #4a5551 !important
}

.testimonial-style16 .testimonial-item16 .dev-social, .testimonial-style16 .testimonial-item16 .dev-tag {
    color: #4a5551 !important
}

    .testimonial-style16 .testimonial-item16 .dev-social svg path, .testimonial-style16 .testimonial-item16 .dev-tag svg path {
        stroke: #00170f
    }

.testimonial-style16 .testimonial-item16:hover .line {
    border: 1px dashed rgba(28,30,48,.1)
}

.testimonial-style16 .testimonial-item16:hover h6, .testimonial-style16 .testimonial-item16:hover p, .testimonial-style16 .testimonial-item16:hover span {
    color: var(--n9) !important
}

.testimonial-style16 .testimonial-item16:hover .dev-social, .testimonial-style16 .testimonial-item16:hover .dev-tag {
    color: #fff !important
}

    .testimonial-style16 .testimonial-item16:hover .dev-social svg path, .testimonial-style16 .testimonial-item16:hover .dev-tag svg path {
        stroke: #fff
    }

.testimonial-style16 .slider-btn {
    position: absolute;
    top: 65%;
    left: -6%;
    display: flex;
    justify-content: space-between;
    width: 112%
}

    .testimonial-style16 .slider-btn button:hover {
        background: var(--p2) !important
    }

        .testimonial-style16 .slider-btn button:hover i {
            color: var(--n0)
        }

@media(max-width: 1490px) {
    .testimonial-style16 .slider-btn {
        position: initial;
        top: initial;
        left: initial;
        display: flex;
        justify-content: center;
        width: initial;
        margin-top: 40px
    }
}

@media(max-width: 1199px) {
    .testimonial-style16 .slider-btn {
        margin-top: 20px
    }
}

.tokenomics-item .icon-area {
    background: var(--bg20);
    width: 70px;
    height: 70px
}

    .tokenomics-item .icon-area img {
        filter: brightness(0);
        opacity: .5
    }

.tokenomics-item .line {
    background: var(--bg20);
    width: 100%;
    height: 1px;
    display: block
}

.tokenomics-item::before {
    position: absolute;
    right: -100%;
    bottom: -100%;
    content: "";
    border-radius: 258px;
    background: rgba(22,73,255,.6);
    filter: blur(150px);
    width: 158px;
    height: 158px;
    transition: all .5s
}

.tokenomics-item:hover::before {
    right: -60px;
    bottom: -60px
}

@media(max-width: 1199px) {
    .tokenomics-item .icon-area {
        width: 50px;
        height: 50px
    }

        .tokenomics-item .icon-area img {
            width: 20px
        }
}

.section-badge8 {
    border: 1px dashed var(--black-clr)
}

    .section-badge8:hover {
        background: var(--bg1);
        color: var(--n0) !important
    }

.section-badge9:hover {
    background: var(--p5);
    border-color: var(--p5)
}

.porject-testi-item .content {
    padding: 50px 110px;
    background: var(--bg6);
    border-radius: 500px
}

.porject-testi-item .thumb {
    width: 416px;
    height: 416px;
    min-width: 416px
}

    .porject-testi-item .thumb img {
        width: 100%;
        height: 100%
    }

@media(max-width: 1399px) {
    .porject-testi-item .thumb {
        width: 300px;
        height: 300px;
        min-width: 300px
    }

    .porject-testi-item .content {
        padding: 30px 30px;
        background: var(--bg6);
        border-radius: 70px
    }
}

@media(max-width: 767px) {
    .porject-testi-item {
        flex-wrap: wrap;
        justify-content: center
    }

        .porject-testi-item .thumb {
            width: 280px;
            height: 280px;
            min-width: 280px
        }

        .porject-testi-item .content {
            padding: 30px 30px;
            background: var(--bg6);
            border-radius: 70px
        }
}

.case-testi-item {
    border: 1px solid rgba(255,255,255,.2)
}

    .case-testi-item .thumb {
        width: 500px
    }

        .case-testi-item .thumb img {
            width: 100%
        }

    .case-testi-item .content .empowerment-badge {
        display: flex;
        align-items: center;
        padding-left: 24px;
        position: relative
    }

        .case-testi-item .content .empowerment-badge::before {
            position: absolute;
            left: 0;
            width: 8px;
            height: 8px;
            content: "";
            background: var(--p4)
        }

    .case-testi-item .content .learn-mores svg {
        transition: all .4s
    }

    .case-testi-item .content .learn-mores:hover {
        color: var(--p4) !important
    }

        .case-testi-item .content .learn-mores:hover svg {
            transform: translateX(10px)
        }

@media(max-width: 500px) {
    .case-testi-item {
        flex-wrap: wrap
    }
}

.project-counting-section {
    z-index: 1
}

    .project-counting-section .project-ele1 {
        position: absolute;
        top: 30px;
        left: 100px;
        animation: cir360 20s linear infinite;
        z-index: -1
    }

    .project-counting-section .project-ele2 {
        position: absolute;
        left: 50%;
        bottom: 0;
        animation: cir360 20s linear infinite;
        width: 40px;
        z-index: -1
    }

    .project-counting-section .project-ele3 {
        position: absolute;
        top: 40px;
        right: 140px;
        animation: cir360 20s linear infinite;
        width: 55px;
        z-index: -1
    }

.project-counting-wrap .project-count-item .counters .odometer {
    color: var(--p2)
}

    .project-counting-wrap .project-count-item .counters .odometer span {
        letter-spacing: .1px
    }

.project-counting-wrap .project-count-item .counters .style-plus {
    color: var(--bg1);
    -webkit-text-stroke: 2px #ffaf40;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 58px;
    font-weight: 700;
    line-height: 120%
}

@media(max-width: 991px) {
    .project-counting-wrap .project-count-item .counters .style-plus {
        font-size: 30px
    }

    .project-counting-wrap .project-count-item .counters .fs-two span {
        bottom: 0;
        line-height: 55px
    }
}

.project-counting-wrap .line {
    height: 105px;
    width: 1px;
    background: rgba(255,255,255,.1)
}

@media(max-width: 767px) {
    .project-counting-wrap .line {
        display: none
    }
}

.faq-counting-section {
    background: var(--n9)
}

    .faq-counting-section .faq-counting-wrap {
        max-width: 970px;
        margin: 0 auto
    }

        .faq-counting-section .faq-counting-wrap .faq-count-item .counters span {
            font-size: 64px;
            color: var(--n0)
        }

        .faq-counting-section .faq-counting-wrap .faq-count-item .fag-pra {
            color: rgba(255,255,255,.6);
            margin-top: -8px
        }

@media(max-width: 991px) {
    .faq-counting-section .faq-counting-wrap .faq-count-item .counters span {
        font-size: 36px;
        line-height: 42px
    }

    .faq-counting-section .faq-counting-wrap .faq-count-item .fag-pra {
        margin-top: 0px
    }
}

@media(max-width: 991px) {
    .faq-counting-section .faq-counting-wrap svg {
        display: none
    }
}

.faq-newsletter .box {
    max-width: 580px;
    margin: 0 auto
}

.faq-newsletter .footer-form12 input {
    background: rgba(255,255,255,.5);
    color: var(--black-clr) !important
}

    .faq-newsletter .footer-form12 input::-moz-placeholder {
        color: var(--black-clr)
    }

    .faq-newsletter .footer-form12 input::placeholder {
        color: var(--black-clr)
    }

.callto-become {
    background: url(../images/callto-become.jpg) no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    padding: 230px 0
}

    .callto-become.callto-become12 {
        background: url(../images/callto-become2.jpg) no-repeat center center;
        background-size: cover;
        background-attachment: fixed
    }

        .callto-become.callto-become12::before {
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%)
        }

    .callto-become::before {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 100%);
        z-index: -1
    }

    .callto-become.callto-become3 {
        background: url(../images/become15.jpg) no-repeat center center;
        background-size: cover
    }

@media(max-width: 1399px) {
    .callto-become {
        padding: 180px 0
    }
}

@media(max-width: 1199px) {
    .callto-become {
        padding: 160px 0
    }
}

@media(max-width: 991px) {
    .callto-become {
        padding: 100px 0
    }
}

.pricing-section4 .pricing-eleemet {
    position: absolute;
    top: 0;
    left: 90px;
    animation: leftr 2s linear infinite
}

@media(max-width: 991px) {
    .pricing-section4 .pricing-eleemet {
        display: none
    }
}

@keyframes leftr {
    50% {
        transform: translateX(-20px)
    }
}

.pricing-items4 {
    transition: all .4s
}

    .pricing-items4 .most-badge {
        border-radius: 100px;
        position: absolute;
        right: 28px;
        top: 28px;
        transform: rotate(-9deg)
    }

    .pricing-items4 .box-style:hover span {
        color: #000 !important
    }

    .pricing-items4 .line-borders {
        width: 100%;
        height: 1px;
        background: rgba(28,30,48,.1)
    }

    .pricing-items4 svg path {
        transition: all .4s
    }

    .pricing-items4.active, .pricing-items4:hover {
        background: #005651 !important
    }

        .pricing-items4.active .box-style, .pricing-items4:hover .box-style {
            background: var(--p2) !important
        }

            .pricing-items4.active .box-style span, .pricing-items4:hover .box-style span {
                color: #000 !important
            }

        .pricing-items4.active h2, .pricing-items4.active h5, .pricing-items4.active p, .pricing-items4.active span, .pricing-items4.active li, .pricing-items4.active i, .pricing-items4:hover h2, .pricing-items4:hover h5, .pricing-items4:hover p, .pricing-items4:hover span, .pricing-items4:hover li, .pricing-items4:hover i {
            color: var(--n0) !important
        }

        .pricing-items4.active .line-borders, .pricing-items4:hover .line-borders {
            background: rgba(255,255,255,.1)
        }

        .pricing-items4.active svg path, .pricing-items4:hover svg path {
            fill: var(--n0)
        }

@media(max-width: 1399px) {
    .pricing-items4 .most-badge {
        right: 14px;
        top: 14px;
        font-size: 14px
    }
}

.pricing-tabs {
    background: var(--bg4);
    border-radius: 100px;
    padding: 4px;
    display: inline-flex;
    justify-content: center;
    z-index: 1
}

    .pricing-tabs .nav-links .tablink {
        background: var(--bg4);
        border-radius: 100px;
        padding: 12px 16px;
        font-size: 16px;
        font-weight: 500;
        color: var(--n50)
    }

    .pricing-tabs .nav-links.active .tablink {
        background: var(--bg1);
        color: var(--n0)
    }

.pricing-section10 .single-item {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%)
}

    .pricing-section10 .single-item .second-alt {
        border-radius: 100px;
        border: 1px solid rgba(255,255,255,.1);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%)
    }

.pricing-section10 .sweet-pricing {
    position: absolute;
    right: 200px;
    top: 230px;
    animation: zomin 2s linear infinite;
    z-index: -1
}

@media(max-width: 1199px) {
    .pricing-section10 .sweet-pricing {
        right: 40px;
        top: 40px
    }
}

@media(max-width: 575px) {
    .pricing-section10 .sweet-pricing {
        right: 20px;
        top: 20px;
        width: 70px
    }
}

@keyframes zomin {
    50% {
        transform: scale(0.9)
    }
}

.partnered-section .swiper-slide .partnered-item img {
    opacity: .7
}

.partnered-section .swiper-slide.swiper-slide-active .partnered-item img {
    opacity: 1
}

.partnered-section.partnered-style6 {
    border-top-left-radius: 100px;
    border-top-right-radius: 100px
}

    .partnered-section.partnered-style6 .partnered-item {
        max-width: 130px;
        height: 40px
    }

        .partnered-section.partnered-style6 .partnered-item img {
            width: 100%;
            height: 100%;
            -o-object-fit: contain;
            object-fit: contain
        }

.partnered-section.partnered-style12 .partnered-item {
    max-width: 130px;
    height: 40px
}

    .partnered-section.partnered-style12 .partnered-item img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain
    }

.partnered-section.partnered-style12 .swiper-slide .partnered-item {
    max-width: 130px;
    height: 40px
}

    .partnered-section.partnered-style12 .swiper-slide .partnered-item img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain;
        opacity: 1;
        filter: brightness(25)
    }

.partnered-section.partnered-style12 .swiper-slide.swiper-slide-active .partnered-item img {
    opacity: 1
}

.partnered-section.partnered-style13 p {
    color: rgba(255,255,255,.5)
}

.partnered-section.partnered-style13 .partnered-item {
    max-width: 120px;
    height: 40px
}

    .partnered-section.partnered-style13 .partnered-item img {
        /*width: 100%;
        height: 100%;*/
        -o-object-fit: contain;
        object-fit: contain;
        opacity: 1
    }

.partnered-section .partnered-wrapper-style14 .partnered-item img {
    filter: brightness(0);
    opacity: .8
}

.what-thumb {
    animation: updown 2s linear infinite
}

.how-make-items {
    transition: all .4s
}

    .how-make-items h4, .how-make-items h5, .how-make-items p, .how-make-items a {
        transition: all .4s
    }

    .how-make-items .cion {
        width: 80px;
        height: 80px;
        transition: all .4s
    }

@media(max-width: 575px) {
    .how-make-items {
        background: var(--n0)
    }

        .how-make-items .cion {
            margin: 0 auto
        }
}

.how-make-items:hover {
    background: var(--bg1) !important
}

    .how-make-items:hover .cion {
        background: var(--n0) !important
    }

    .how-make-items:hover h4, .how-make-items:hover h5, .how-make-items:hover p, .how-make-items:hover a {
        color: var(--n0) !important
    }

.planing-services {
    border: 1px solid var(--bg4)
}

.how-wroks3 .paystep-items .icon-area {
    border-color: var(--p2);
    position: relative
}

.how-wroks3 .paystep-items .badge {
    width: 44px;
    height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 20px
}

.how-wroks3 .how-element {
    position: absolute;
    top: 152px;
    left: 270px;
    animation: zoin 2s linear infinite
}

@media(max-width: 1199px) {
    .how-wroks3 .how-element {
        top: 20px;
        left: 30px
    }
}

@media(max-width: 991px) {
    .how-wroks3 .paystep-items .badge {
        width: 24px;
        height: 24px;
        font-size: 12px
    }
}

@media(max-width: 767px) {
    .how-wroks3 .how-element {
        top: 20px;
        left: 30px;
        width: 50px
    }
}

@keyframes zoin {
    50% {
        transform: scale(1.06)
    }
}

.how-thumb6 img {
    border-radius: 32px
}

.how-thumb6 .satisfied-wrap {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.15);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    animation: updown 2s linear infinite;
    position: absolute;
    bottom: 40px;
    left: 40px
}

    .how-thumb6 .satisfied-wrap .satisfied-inner {
        display: flex;
        align-items: center
    }

        .how-thumb6 .satisfied-wrap .satisfied-inner span {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            display: block;
            border: 1px solid var(--n0)
        }

            .how-thumb6 .satisfied-wrap .satisfied-inner span img {
                border-radius: 50%
            }

            .how-thumb6 .satisfied-wrap .satisfied-inner span:not(:first-child) {
                margin-left: -10px
            }

.satisfied-inner {
    display: flex;
    align-items: center
}

    .satisfied-inner span {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: block;
        border: 1px solid var(--n0)
    }

        .satisfied-inner span img {
            border-radius: 50%
        }

        .satisfied-inner span:not(:first-child) {
            margin-left: -10px
        }

.how-wrok-mane-info .cion {
    width: 70px;
    height: 70px
}

.service-section5 {
    z-index: 1
}

    .service-section5 .ser-ellips {
        position: absolute;
        right: 125px;
        top: 125px;
        animation: rots 2s linear infinite;
        z-index: -1
    }

.banking-service-item {
    transition: all .4s
}

    .banking-service-item .icon {
        width: 90px;
        height: 90px;
        position: relative;
        transition: all .4s
    }

        .banking-service-item .icon::before {
            position: absolute;
            bottom: 0;
            left: 0;
            content: "";
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 8px solid var(--s2);
            border-top: unset;
            border-left: unset;
            border-right: unset;
            transition: all .4s
        }

    .banking-service-item:hover {
        box-shadow: rgba(149,157,165,.2) 0px 8px 24px;
        background: var(--bg5) !important
    }

        .banking-service-item:hover .learn {
            color: var(--s2) !important
        }

        .banking-service-item:hover .icon {
            background: var(--n0) !important
        }

            .banking-service-item:hover .icon::before {
                transform: rotate(180deg)
            }

.top-service-item {
    border-radius: 32px;
    border: 1px solid rgba(28,30,48,.1);
    transition: all .4s;
    height: 100%
}

    .top-service-item .icon-area {
        transition: all .4s
    }

    .top-service-item:hover {
        background: #e5fdce
    }

        .top-service-item:hover .icon-area {
            transform: scale(1.05)
        }

        .top-service-item:hover .articles-btn .art {
            transform: rotate(85deg);
            background: var(--s2)
        }

            .top-service-item:hover .articles-btn .art svg path {
                stroke: var(--s2)
            }

.service-items12 {
    border: 1px dashed var(--s2);
    border-radius: 16px;
    padding: 69px 40px 40px;
    transition: all .5s
}

    .service-items12 .icon-inner {
        position: relative;
        width: 99px;
        height: 99px;
        margin: 0 auto 38px
    }

        .service-items12 .icon-inner .icon {
            width: 100px;
            height: 100px;
            transition: all .4s;
            position: relative;
            z-index: 2;
            background: var(--s2);
            z-index: 1
        }

            .service-items12 .icon-inner .icon img {
                transition: all .4s
            }

        .service-items12 .icon-inner .shape {
            display: block;
            width: 145px;
            height: 90px;
            background: var(--bg1);
            position: absolute;
            top: -22px;
            left: -20px;
            -webkit-clip-path: polygon(49% 100%, 0 0, 100% 0);
            clip-path: polygon(49% 100%, 0 0, 100% 0);
            border-radius: 49%;
            animation: customlr 2s linear infinite
        }

@keyframes customlr {
    50% {
        transform: rotate(9deg)
    }
}

.service-items12:hover {
    background: var(--s2)
}

    .service-items12:hover .content h5, .service-items12:hover .content p, .service-items12:hover .content a, .service-items12:hover .content i {
        color: var(--n0) !important
    }

    .service-items12:hover .icon {
        background: var(--n0) !important
    }

        .service-items12:hover .icon img {
            filter: brightness(0)
        }

@media(max-width: 1399px) {
    .service-items12 {
        padding: 60px 20px 24px
    }
}

.choose-list-item {
    border: 1px solid rgba(28,30,48,.1);
    border-radius: 100px
}

    .choose-list-item .cion {
        min-width: 90px;
        height: 90px
    }

@media(max-width: 400px) {
    .choose-list-item {
        flex-wrap: wrap;
        text-align: center;
        border-radius: 10px
    }
}

.choose-element {
    position: absolute;
    bottom: -50px;
    left: -70px;
    animation: cir360 20s linear infinite
}

@media(max-width: 1199px) {
    .choose-element {
        width: 80px;
        height: 80px;
        bottom: 0;
        left: 0
    }
}

@keyframes cir360 {
    0% {
        transform: rotate(360deg)
    }
}

.choose-watach-wrap {
    border: 1px solid rgba(0,0,0,.1)
}

    .choose-watach-wrap .choose-watach-thumb .video-better {
        width: 36px;
        height: 36px;
        font-size: 14px;
        position: absolute
    }

        .choose-watach-wrap .choose-watach-thumb .video-better i {
            font-size: 14px !important
        }

    .choose-watach-wrap .cont .watch-title {
        font-size: 20px;
        font-weight: 500;
        color: var(--black-clr);
        display: block
    }

.choose9-content .choose9-items .cion {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    position: relative
}

    .choose9-content .choose9-items .cion::before {
        position: absolute;
        content: "";
        top: 110%;
        width: 1px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(28,30,48,.2)
    }

.hash-element {
    position: absolute;
    top: 170px;
    left: 170px;
    animation: updown 2s linear infinite
}

@media(max-width: 1700px) {
    .hash-element {
        top: 40px;
        left: 40px
    }
}

.flatform-thumb4 {
    max-width: 436px;
    margin: 0 auto;
    text-align: center
}

@media(max-width: 991px) {
    .flatform-thumb4 {
        max-width: 300px
    }
}

@media(max-width: 400px) {
    .flatform-thumb4 {
        max-width: 200px
    }
}

.platform4-element {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1
}

.choose-thumb11 .choose-counting {
    position: absolute;
    bottom: 32px;
    left: 32px
}

@media(max-width: 1199px) {
    .choose-thumb11 .choose-counting {
        bottom: 16px;
        left: 16px
    }
}

.choose-item12 {
    border: 1px dashed #005651;
    border-radius: 16px;
    transition: all .5s
}

    .choose-item12:hover {
        background: var(--s2)
    }

        .choose-item12:hover img {
            filter: brightness(0)
        }

        .choose-item12:hover h5, .choose-item12:hover p {
            color: var(--n0) !important
        }

.choose-section13 {
    background: url(../images/choose13-bg.png) no-repeat center center;
    background-size: cover
}

    .choose-section13 .choose-thumb13 {
        animation: updown 2s linear infinite
    }

    .choose-section13 .choose13-item p {
        color: rgba(255,255,255,.6)
    }

.choose-items16.style1::before {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    width: 276px;
    height: 276px;
    border-radius: 276px;
    background: rgba(22,73,255,.6);
    filter: blur(150px)
}

.choose-items16.style2 {
    height: 295px
}

    .choose-items16.style2 .text-box {
        max-width: 318px
    }

    .choose-items16.style2::before {
        position: absolute;
        right: 0;
        bottom: 0;
        content: "";
        width: 176px;
        height: 176px;
        border-radius: 276px;
        background: rgba(22,73,255,.6);
        filter: blur(150px)
    }

    .choose-items16.style2 .reliable-ele2 {
        position: absolute;
        right: 0;
        bottom: 20px
    }

@media(max-width: 1399px) {
    .choose-items16.style2 .reliable-ele2 {
        width: 300px
    }
}

@media(max-width: 1199px) {
    .choose-items16.style2 .reliable-ele2 {
        width: 250px
    }
}

.choose-items16.style3 {
    height: 295px
}

    .choose-items16.style3 .text-box {
        max-width: 318px
    }

    .choose-items16.style3::before {
        position: absolute;
        right: 0;
        bottom: 0;
        content: "";
        width: 176px;
        height: 176px;
        border-radius: 276px;
        background: rgba(22,73,255,.6);
        filter: blur(150px)
    }

    .choose-items16.style3 .reliable-ele3 {
        position: absolute;
        bottom: 0;
        right: 0
    }

@media(max-width: 1399px) {
    .choose-items16.style3 .reliable-ele3 {
        width: 300px
    }
}

@media(max-width: 1199px) {
    .choose-items16.style3 .reliable-ele3 {
        width: 250px
    }
}

.financial-wrapper .financial-item {
    transition: all .4s
}

    .financial-wrapper .financial-item .icon {
        width: 96px;
        min-width: 96px;
        height: 96px;
        transition: all .4s
    }

    .financial-wrapper .financial-item:hover .icon {
        background: var(--p2) !important
    }

    .financial-wrapper .financial-item:hover .cont h5, .financial-wrapper .financial-item:hover .cont p {
        color: var(--n0) !important
    }

@media(max-width: 991px) {
    .financial-wrapper .financial-item .icon {
        width: 70px;
        min-width: 70px;
        height: 70px
    }

        .financial-wrapper .financial-item .icon img {
            width: 40px
        }
}

.financial-wrapper .line {
    height: 1px;
    width: 100%;
    background: rgba(0,0,0,.1)
}

.use-app-item {
    border-radius: 16px;
    border: 1px solid rgba(28,30,48,.2);
    z-index: 1
}

    .use-app-item .use-app-icon {
        width: 100px;
        height: 100px;
        margin: 0 auto
    }

    .use-app-item::before {
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        width: 100%;
        height: 0%;
        background: linear-gradient(180deg, #C8D7FE 0%, rgba(200, 216, 254, 0) 104.79%);
        border-radius: 16px;
        z-index: -1;
        transition: all .4s
    }

    .use-app-item:hover::before {
        height: 100%
    }

@media(max-width: 575px) {
    .app-counting-item img {
        width: 50px
    }
}

.planing-services {
    border-radius: 16px;
    background: #ecfffc
}

    .planing-services .cion img {
        width: 50px
    }

.service-item7 {
    border: 1px solid rgba(28,30,48,.1)
}

    .service-item7 .text-pre {
        font-size: 20px
    }

    .service-item7 .service-thumb {
        overflow: hidden
    }

        .service-item7 .service-thumb img {
            overflow: hidden;
            transition: all .4s
        }

    .service-item7 .icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: rgba(255,72,0,.1);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all .4s
    }

    .service-item7:hover .service-thumb img {
        transform: scale(1.1)
    }

    .service-item7:hover .icon {
        background: #ff4800
    }

        .service-item7:hover .icon img {
            filter: brightness(0)
        }

.service-item11 {
    z-index: 1;
    height: 100%
}

    .service-item11 .ser-badge {
        background: linear-gradient(180deg, rgba(0, 86, 81, 0.4) -16200%, rgba(0, 86, 81, 0) 3250%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(0,0,0,0);
        font-size: 100px;
        font-weight: 800;
        font-family: var(--body-font);
        display: block;
        position: absolute;
        right: 24px;
        top: -10px
    }

    .service-item11 .servie-btn {
        transform: rotate(-18deg);
        transition: all .4s
    }

    .service-item11 svg {
        transition: all .4s
    }

        .service-item11 svg path {
            transition: all .4s
        }

    .service-item11::before {
        position: absolute;
        left: 0;
        content: "";
        z-index: -1;
        height: 0px;
        width: 100%;
        transition: all .4s
    }

    .service-item11::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: rgba(0,0,0,.51);
        z-index: -1;
        transition: all .5s;
        opacity: 0
    }

    .service-item11.serbg__1::before {
        background: url(../images/home2/global/service-fin1.jpg) no-repeat center center;
        background-size: cover;
        top: 0
    }

    .service-item11.serbg__2::before {
        background: url(../images/home2/global/service-fin2.jpg) no-repeat center center;
        background-size: cover;
        bottom: 0
    }

    .service-item11.serbg__3::before {
        background: url(../images/home2/global/service-fin3.jpg) no-repeat center center;
        background-size: cover;
        top: 0
    }

    .service-item11.serbg__4::before {
        background: url(../images/home2/global/service-fin4.jpg) no-repeat center center;
        background-size: cover;
        bottom: 0
    }

    .service-item11.serbg__5::before {
        background: url(../images/home2/global/service-fin5.jpg) no-repeat center center;
        background-size: cover;
        top: 0
    }

    .service-item11.serbg__6::before {
        background: url(../images/home2/global/service-fin6.jpg) no-repeat center center;
        background-size: cover;
        bottom: 0
    }

    .service-item11:hover::before {
        height: 100%
    }

    .service-item11:hover::after {
        opacity: 1
    }

    .service-item11:hover .ser-badge {
        display: none
    }

    .service-item11:hover svg path {
        stroke: var(--n0);
        fill: var(--n0)
    }

    .service-item11:hover .icons {
        filter: brightness(0) !important
    }

    .service-item11:hover h5, .service-item11:hover p, .service-item11:hover a {
        color: var(--n0)
    }

    .service-item11:hover .servie-btn {
        transform: rotate(15deg);
        background: var(--n0)
    }

        .service-item11:hover .servie-btn i {
            color: var(--black-clr)
        }

        .service-item11:hover .servie-btn:hover {
            border-color: var(--bg1) !important
        }

            .service-item11:hover .servie-btn:hover i {
                color: var(--n0) !important
            }

@media(max-width: 991px) {
    .service-item11 .ser-badge {
        font-size: 36px;
        line-height: 42px
    }
}

.service-br-rgiht {
    border-right: 1px solid rgba(28,30,48,.1)
}

.servie-btn {
    width: 40px;
    min-width: 40px;
    height: 40px
}

    .servie-btn i {
        font-size: 14px
    }

    .servie-btn:hover i {
        color: var(--n0)
    }

.service-tax-item {
    transition: all .4s
}

    .service-tax-item .servie-tax-badge {
        color: rgba(0,0,0,0);
        -webkit-text-stroke: 2px var(--bg1);
        -webkit-text-stroke-style: dashed;
        font-size: 56px;
        font-weight: 700;
        transition: all .4s
    }

    .service-tax-item .service-tax-icon img {
        width: 57px;
        height: 45px;
        -o-object-fit: contain;
        object-fit: contain
    }

    .service-tax-item .line {
        height: 1px;
        width: 100%;
        background: rgba(0,86,81,.1)
    }

    .service-tax-item:hover {
        transform: scale(1.05);
        background: var(--bg1) !important
    }

        .service-tax-item:hover .servie-tax-badge {
            -webkit-text-stroke: 2px var(--n0)
        }

        .service-tax-item:hover .service-tax-icon img {
            filter: brightness(25);
            opacity: .5
        }

        .service-tax-item:hover .line {
            background: rgba(255,255,255,.1)
        }

        .service-tax-item:hover h5, .service-tax-item:hover p, .service-tax-item:hover a {
            color: var(--n0) !important
        }

@media(max-width: 1199px) {
    .service-tax-item .servie-tax-badge {
        font-size: 32px !important
    }
}

.choose8-content .choose8-items .cion {
    width: 80px;
    height: 80px;
    min-width: 80px;
    border-radius: 50%;
    border-radius: 100px;
    border: 1px dashed #005651;
    background: rgba(255,255,255,.1)
}

    .choose8-content .choose8-items .cion img {
        width: 38px
    }

@media(max-width: 991px) {
    .choose8-content .choose8-items .cion {
        width: 65px;
        height: 65px;
        min-width: 65px
    }

        .choose8-content .choose8-items .cion img {
            width: 30px
        }
}

.investment-element {
    position: absolute;
    left: 60px;
    top: 130px;
    animation: updown 2s linear infinite
}

.investor-items {
    transition: all .4s
}

    .investor-items img {
        transition: all .4s
    }

    .investor-items::before {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, #000 100%);
        content: "";
        height: 100%;
        transition: all .5s;
        z-index: 1
    }

    .investor-items .investor-content {
        z-index: 1
    }

        .investor-items .investor-content .counters {
            border-bottom: 1px solid rgba(255,255,255,.3);
            margin-bottom: 15px
        }

        .investor-items .investor-content h5 {
            margin-bottom: 8px
        }

            .investor-items .investor-content h5 a {
                color: var(--n0)
            }

        .investor-items .investor-content p {
            color: var(--n0);
            font-size: 16px;
            transform: rotateX(-90deg);
            transition: all .4s;
            position: absolute;
            bottom: -200px
        }

        .investor-items .investor-content span {
            color: var(--n0)
        }

    .investor-items:hover::before {
        background: linear-gradient(180deg, rgba(255, 175, 64, 0) 40%, #FFAF40 100%)
    }

    .investor-items:hover .investor-content p {
        transform: rotateX(0deg);
        position: relative;
        bottom: initial
    }

    .investor-items:hover img {
        transform: scale(1.05)
    }

@media(max-width: 1399px) {
    .investor-items .investor-content .counters {
        margin-bottom: 10px
    }

    .investor-items .investor-content h5 {
        margin-bottom: 8px;
        font-size: 18px !important
    }

        .investor-items .investor-content h5 a {
            color: var(--n0)
        }

    .investor-items .investor-content p {
        font-size: 14px
    }

    .investor-items .investor-content span {
        font-size: 36px;
        line-height: 46px
    }
}

.leading-thumb {
    border-radius: 500px 500px 500px 0px;
    width: 430px;
    height: 400px
}

    .leading-thumb img {
        height: 100%;
        width: 100%;
        border-radius: 500px 500px 500px 0px
    }

@media(max-width: 1399px) {
    .leading-thumb {
        width: 100%;
        height: 100%
    }
}

.leading-box {
    width: 306px;
    height: 295px
}

    .leading-box .cmn-radius-box {
        width: 234px;
        min-height: 234px
    }

@media(max-width: 1399px) {
    .leading-box {
        width: 100%;
        height: 100%
    }

        .leading-box .cmn-radius-box {
            width: 200px;
            min-height: 200px
        }
}

@media(max-width: 575px) {
    .leading-box .cmn-radius-box {
        margin: 0 auto
    }
}

.leading-box1 {
    border-radius: 500px 500px 0px 500px
}

.leading-box2 {
    border-radius: 500px 0px 500px 500px
}

.leading-box3 {
    border-radius: 0px 500px 500px 500px
}

.video-better {
    width: 98px;
    height: 98px;
    background: var(--n0);
    z-index: 1
}

    .video-better i {
        color: #005651;
        font-size: 28px;
        z-index: 1
    }

    .video-better::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: var(--n0);
        border-radius: 50%;
        transition: all .4s;
        animation: sclebig 2s linear infinite
    }

@media(max-width: 767px) {
    .video-better {
        width: 70px;
        height: 70px
    }

        .video-better i {
            font-size: 20px
        }
}

@keyframes sclebig {
    0% {
        transform: scale(1.05);
        opacity: .1
    }

    20% {
        transform: scale(1.07);
        opacity: .1
    }

    70% {
        transform: scale(1.09);
        opacity: .5
    }

    100% {
        transform: scale(1.1);
        opacity: 0
    }
}

.better-content {
    max-width: 860px;
    margin: -180px auto 0;
    position: relative;
    z-index: 1
}

    .better-content .box {
        max-width: 726px;
        margin: 0 auto
    }

        .better-content .box h3 {
            color: var(--n0)
        }

        .better-content .box p {
            color: var(--n0);
            max-width: 590px;
            margin: 0 auto
        }

@media(max-width: 991px) {
    .better-content {
        margin: 16px auto 0
    }
}

.global-choose-items p {
    color: #4b655c
}

.global-choose-items img {
    transition: all .4s
}

.global-choose-items:hover img {
    transform: rotate(10deg)
}

.choose-items14 {
    transition: all .4s
}

    .choose-items14 .icon {
        width: 70px;
        height: 70px;
        margin: 0 auto 20px;
        border: unset
    }

    .choose-items14:hover .icon {
        background: linear-gradient(335deg, #1F00FF -6.4%, #C471ED 68.1%, #A02DC9 97.04%, #FF7B83 105.26%)
    }

.choose-ele14 {
    position: absolute;
    right: 0px;
    top: 55px;
    animation: updwon 2s linear infinite
}

@media(max-width: 1399px) {
    .choose-ele14 {
        top: 30px
    }
}

@media(max-width: 991px) {
    .choose-ele14 {
        top: 20px;
        width: 120px
    }
}

@keyframes updwon {
    50% {
        transform: translateY(-10px)
    }
}

.choose-items15 {
    border: 1px solid var(--bg11);
    transition: all .5s
}

    .choose-items15:hover {
        background: var(--p10);
        border-color: var(--black-clr)
    }

.know-us-section::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38%;
    content: "";
    background: var(--black-clr)
}

.know-us-wrapper {
    background: url(../images/home2/know-us-bg.png) no-repeat center center;
    background-size: cover;
    padding: 82px 0
}

    .know-us-wrapper .content-box {
        max-width: 880px
    }

    .know-us-wrapper .know-vector {
        position: absolute;
        bottom: 60px;
        right: 60px;
        animation: cirs 2s linear infinite
    }

.our-apps5 {
    z-index: 1
}

    .our-apps5 .global-element-app {
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        height: 100%
    }

.smartphone-apps {
    width: 100%;
    max-width: 800px;
    animation: updown 2s linear infinite
}

    .smartphone-apps .img {
        width: 100%
    }

    .smartphone-apps .app-star {
        position: absolute;
        top: -40px;
        right: 290px;
        z-index: 1;
        width: 120px;
        height: 120px;
        animation: cirs 3s linear infinite
    }

@keyframes cirs {
    50% {
        transform: rotate(180deg)
    }
}

.app-ele14 {
    position: absolute;
    top: 110px;
    left: 40px;
    animation: leftright 2s linear infinite
}

@media(max-width: 1199px) {
    .app-ele14 {
        width: 80px;
        top: 20px;
        left: 20px
    }
}

.faq-section.faq-style5 {
    background: #efeee7
}

    .faq-section.faq-style5 .faq-ellips {
        position: absolute;
        top: 170px;
        left: 120px;
        display: block;
        animation: rots 2s linear infinite
    }

@media(max-width: 991px) {
    .faq-section.faq-style5 .faq-ellips {
        top: 30px;
        left: 30px
    }
}

.faq-section.faq-style15 .accordion-single {
    background: rgba(0,0,0,0);
    border-bottom: 1px solid rgba(28,30,48,.1)
}

    .faq-section.faq-style15 .accordion-single .header-area button {
        color: var(--black-clr) !important
    }

    .faq-section.faq-style15 .accordion-single .content-area .content-body p {
        color: #4a5551
    }

    .faq-section.faq-style15 .accordion-single.active {
        background: #eff9f6
    }

.faq-section.faq-choose .faq-btn-blackstyle7 .accordion-single {
    border: 1px solid rgba(28,30,48,.1);
    background: #e6f7f1
}

    .faq-section.faq-choose .faq-btn-blackstyle7 .accordion-single::after {
        display: none
    }

    .faq-section.faq-choose .faq-btn-blackstyle7 .accordion-single.active {
        background: var(--bg1) !important
    }

        .faq-section.faq-choose .faq-btn-blackstyle7 .accordion-single.active .accordion-btn {
            color: var(--n0) !important
        }

            .faq-section.faq-choose .faq-btn-blackstyle7 .accordion-single.active .accordion-btn::after {
                background: var(--n0) !important;
                color: var(--black-clr) !important
            }

        .faq-section.faq-choose .faq-btn-blackstyle7 .accordion-single.active p {
            color: var(--n0) !important
        }

@keyframes rots {
    50% {
        transform: rotate(30deg)
    }
}

.faq-section2 .sec-img {
    background: #005651;
    border-radius: 12px
}

.faq-section2 .accordion-single {
    border-radius: 12px;
    border: 1px solid #ecfffc !important;
    background: rgba(236,255,252,.2)
}

.rounded-circle {
    border-radius: 50%
}

.faq-section4 .faq-element {
    position: absolute;
    top: 120px;
    left: 160px;
    animation: cir360 20s linear infinite
}

.faq-section4 .faq-wrap4 {
    border-radius: 32px;
    background: var(--bg1);
    padding: 60px
}

    .faq-section4 .faq-wrap4 .accordion-single::after {
        display: none
    }

    .faq-section4 .faq-wrap4 .accordion-single .header-area .accordion-btn {
        color: var(--n0)
    }

        .faq-section4 .faq-wrap4 .accordion-single .header-area .accordion-btn::after {
            border: 1px solid rgba(28,30,48,.1);
            background: var(--n0);
            color: #000;
            min-width: 40px;
            min-height: 40px
        }

    .faq-section4 .faq-wrap4 .accordion-single.active button::after {
        background: #ffaf40 !important
    }

    .faq-section4 .faq-wrap4 .accordion-line {
        width: 100%;
        height: 1px;
        background: rgba(255,255,255,.1)
    }

@media(max-width: 1399px) {
    .faq-section4 .faq-wrap4 {
        padding: 20px
    }
}

@media(max-width: 1199px) {
    .faq-section4 .faq-wrap4 .accordion-single .header-area .accordion-btn {
        font-size: 18px
    }

        .faq-section4 .faq-wrap4 .accordion-single .header-area .accordion-btn::after {
            min-width: 34px !important;
            min-height: 34px !important;
            width: 34px !important;
            height: 34px !important;
            font-size: 16px
        }
}

@media(max-width: 575px) {
    .faq-section4 .faq-wrap4 .accordion-single .header-area .accordion-btn {
        font-size: 16px;
        font-weight: 500;
        padding-right: 40px !important
    }
}

.faq-btn-blackstyle .accordion-single {
    transition: all .4s
}

    .faq-btn-blackstyle .accordion-single .header-area .accordion-btn::after {
        background: var(--black-clr);
        color: var(--n0)
    }

    .faq-btn-blackstyle .accordion-single.active {
        background: var(--bg6) !important
    }

        .faq-btn-blackstyle .accordion-single.active .header-area .accordion-btn::after {
            background: var(--p2);
            color: var(--black-clr)
        }

.faq-element6 {
    position: absolute;
    left: 50%;
    bottom: -100px;
    transform: translateX(-50%);
    animation: zom 2s linear infinite
}

@keyframes zom {
    50% {
        transform: translateX(-50%) scale(1.1)
    }
}

.faq-btn-blackstyle7 .accordion-single {
    transition: all .4s
}

    .faq-btn-blackstyle7 .accordion-single .header-area .accordion-btn::after {
        background: var(--black-clr);
        color: var(--n0)
    }

    .faq-btn-blackstyle7 .accordion-single.active {
        background: var(--n0) !important
    }

        .faq-btn-blackstyle7 .accordion-single.active .header-area .accordion-btn {
            color: var(--p4)
        }

            .faq-btn-blackstyle7 .accordion-single.active .header-area .accordion-btn::after {
                background: var(--p4);
                color: var(--n0)
            }

        .faq-btn-blackstyle7 .accordion-single.active::after {
            background: var(--p4)
        }

.faq-btn-blackstyle9 .accordion-single {
    transition: all .4s
}

    .faq-btn-blackstyle9 .accordion-single .header-area .accordion-btn::after {
        background: var(--black-clr);
        color: var(--n0)
    }

    .faq-btn-blackstyle9 .accordion-single.active {
        background: var(--n0) !important
    }

        .faq-btn-blackstyle9 .accordion-single.active .header-area .accordion-btn {
            color: var(--p5)
        }

            .faq-btn-blackstyle9 .accordion-single.active .header-area .accordion-btn::after {
                background: var(--p5);
                color: var(--n0)
            }

        .faq-btn-blackstyle9 .accordion-single.active::after {
            background: var(--p5)
        }

.faq-btn-10 .accordion-single .header-area .accordion-btn {
    color: var(--black-clr)
}

    .faq-btn-10 .accordion-single .header-area .accordion-btn::after {
        background: #000 !important;
        color: var(--n0)
    }

.faq-btn-10 .accordion-single.active .header-area .accordion-btn {
    color: var(--bg1)
}

    .faq-btn-10 .accordion-single.active .header-area .accordion-btn::after {
        background: var(--bg1) !important;
        color: var(--n0)
    }

.faq-btn-10 .accordion-single.active::after {
    display: none
}

.faq-btn-10 .line {
    width: 100%;
    height: 1px;
    background: rgba(28,30,48,.1)
}

.accordion-style13 .accordion-single {
    padding: 24px 24px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.15);
    background: #000000;
}

    .accordion-style13 .accordion-single .header-area {
        color: var(--n0) !important
    }

        .accordion-style13 .accordion-single .header-area .accordion-btn::after {
            position: absolute;
            z-index: 1;
            right: 0;
            content: "";
            font-family: "Font Awesome 5 Free";
            font-size: 18px;
            transform: rotate(0deg);
            transition: var(--transition);
            font-weight: 700;
            color: var(--n0);
            display: flex;
            align-items: center;
            justify-content: center;
            width: initial;
            height: initial;
            background: rgba(0,0,0,0)
        }

    .accordion-style13 .accordion-single::after {
        display: none
    }

    .accordion-style13 .accordion-single.active {
        border-radius: 32px;
        background: linear-gradient(274deg, #ff9a33 4.65%, #ffc700 91.31%)
    }

        .accordion-style13 .accordion-single.active .header-area .accordion-btn {
            color: #000 !important
        }

            .accordion-style13 .accordion-single.active .header-area .accordion-btn::after {
                transform: rotate(60deg);
                color: #000
            }

        .accordion-style13 .accordion-single.active p {
            color: #000 !important
        }

    .accordion-style13 .accordion-single .content-area .content-body p {
        color: rgba(255,255,255,.6)
    }

@media(max-width: 991px) {
    .accordion-style13 .accordion-single {
        padding: 20px 18px
    }
}

.accordion-style13.accordionstyle-14 .accordion-single {
    border-radius: 16px;
    background: var(--n0)
}

    .accordion-style13.accordionstyle-14 .accordion-single .header-area {
        color: var(--black-clr) !important
    }

        .accordion-style13.accordionstyle-14 .accordion-single .header-area .accordion-btn {
            color: var(--black-clr) !important
        }

            .accordion-style13.accordionstyle-14 .accordion-single .header-area .accordion-btn::after {
                color: var(--black-clr)
            }

    .accordion-style13.accordionstyle-14 .accordion-single.active {
        border-radius: 32px;
        background: linear-gradient(335deg, #1F00FF -6.4%, #C471ED 68.1%, #FF7B83 97.04%, #A02DC9 105.26%)
    }

        .accordion-style13.accordionstyle-14 .accordion-single.active .header-area {
            color: var(--n0) !important
        }

            .accordion-style13.accordionstyle-14 .accordion-single.active .header-area .accordion-btn {
                color: var(--n0) !important
            }

                .accordion-style13.accordionstyle-14 .accordion-single.active .header-area .accordion-btn::after {
                    color: var(--n0);
                    transform: rotate(60deg)
                }

        .accordion-style13.accordionstyle-14 .accordion-single.active p {
            color: var(--n0) !important
        }

    .accordion-style13.accordionstyle-14 .accordion-single .content-area .content-body p {
        color: var(--n0)
    }

.global-roadmap {
    position: absolute;
    left: -50px;
    top: 0;
    z-index: -1
}

.accordion-working .accordion-single .header-area .accordion-btn .icon {
    border-radius: 100px;
    background: var(--bg20);
    width: 70px;
    height: 70px;
    min-width: 70px
}

    .accordion-working .accordion-single .header-area .accordion-btn .icon img {
        width: 26px;
        height: 26px;
        -o-object-fit: contain;
        object-fit: contain;
        filter: brightness(0);
        opacity: .8
    }

@media(max-width: 991px) {
    .accordion-working .accordion-single .header-area .accordion-btn .icon {
        width: 50px;
        height: 50px;
        min-width: 50px
    }

        .accordion-working .accordion-single .header-area .accordion-btn .icon img {
            width: 20px
        }
}

.accordion-working .accordion-single .header-area .accordion-btn::after {
    width: initial;
    min-width: initial;
    height: initial;
    background: rgba(0,0,0,0)
}

.accordion-working .accordion-single::after {
    display: none
}

.accordion-working .accordion-single.active .header-area .accordion-btn::after {
    color: var(--n0)
}

.accordion-working .line {
    height: 1px;
    width: 100%;
    opacity: .1;
    background: #1c1e30
}

.workign-thumb16 {
    animation: updown 2s linear infinite
}

.reliability-faq .accordion-single .header-area .accordion-btn::after {
    background: var(--black-clr)
}

.reliability-faq .accordion-single.active {
    background: var(--s2) !important
}

    .reliability-faq .accordion-single.active .header-area .accordion-btn {
        color: var(--n0) !important
    }

        .reliability-faq .accordion-single.active .header-area .accordion-btn::after {
            background: var(--n0)
        }

    .reliability-faq .accordion-single.active p {
        color: var(--n0) !important
    }

.roadmap-section {
    z-index: 1
}

    .roadmap-section .roadmap-ele {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        max-width: 704px;
        height: 705px
    }

.roadmap-inner1 {
    max-width: 1200px;
    margin: 0 auto
}

.roadmap-inner2 {
    max-width: 1000px;
    margin: 0 auto
}

.roadmap-bar {
    animation: leftright 2s linear infinite
}

.country-access-wrap {
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px 20px;
    justify-content: center
}

@media(max-width: 1199px) {
    .country-access-wrap {
        gap: 18px 14px;
        grid-template-columns: repeat(4, 1fr)
    }
}

@media(max-width: 767px) {
    .country-access-wrap {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width: 575px) {
    .country-access-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px 8px
    }
}

.pride-satisfied-item {
    transition: all .5s
}

    .pride-satisfied-item .plus-icon {
        width: 40px;
        min-width: 40px;
        height: 40px;
        position: absolute;
        top: 30px;
        right: 30px;
        transition: all .5s
    }

    .pride-satisfied-item .social-area li a {
        background-color: #e6f7f1;
        border: unset
    }

        .pride-satisfied-item .social-area li a i {
            color: var(--n3)
        }

        .pride-satisfied-item .social-area li a:hover {
            background-color: #fff;
            border: unset
        }

            .pride-satisfied-item .social-area li a:hover i {
                color: var(--black-clr)
            }

    .pride-satisfied-item:hover {
        background: var(--bg1) !important
    }

        .pride-satisfied-item:hover .plus-icon {
            background: var(--n0) !important
        }

            .pride-satisfied-item:hover .plus-icon i {
                color: var(--black-clr)
            }

        .pride-satisfied-item:hover .cont h5, .pride-satisfied-item:hover .cont a, .pride-satisfied-item:hover .cont p, .pride-satisfied-item:hover .cont span {
            color: var(--n0) !important
        }

.secound-bg2 {
    background: #005651
}

#chartdiv {
    width: 700px;
    height: 700px;
    max-width: 100%;
    border-radius: 50%;
    background-color: #005651;
    position: absolute;
    right: 120px;
    bottom: 110px;
    z-index: -1
}

@media(max-width: 1599px) {
    #chartdiv {
        width: 600px;
        height: 600px;
        right: 100px;
        bottom: 130px
    }
}

@media(max-width: 1399px) {
    #chartdiv {
        width: 600px;
        height: 600px;
        right: 40px;
        bottom: 170px
    }
}

@media(max-width: 1199px) {
    #chartdiv {
        width: 450px;
        height: 450px;
        right: 20px;
        bottom: 210px
    }
}

@media(max-width: 991px) {
    #chartdiv {
        width: 350px;
        height: 350px;
        right: 0px;
        bottom: initial;
        top: 80px
    }
}

@media(max-width: 767px) {
    #chartdiv {
        width: 350px;
        height: 350px;
        margin: 24px auto 0;
        right: 0px;
        bottom: initial;
        position: initial;
        top: 80px
    }
}

@media(max-width: 400px) {
    #chartdiv {
        width: 290px;
        height: 290px;
        margin: 24px auto 0;
        right: 0px;
        bottom: initial;
        position: initial;
        top: 80px
    }
}

.tracking-section {
    z-index: 1
}

    .tracking-section .color-element1 {
        position: absolute;
        right: -550px;
        bottom: -550px;
        z-index: -1
    }

    .tracking-section.tracking-section6 .blog-wrapper5, .tracking-section.tracking-section6 .lines-simple {
        border-bottom: 1px solid rgba(255,255,255,.1)
    }

    .tracking-section.tracking-section6 .lines {
        background: rgba(255,255,255,.1)
    }

.tracking-wrap {
    background: #005651;
    border-radius: 32px;
    padding: 90px 8px
}

    .tracking-wrap p {
        max-width: 437px;
        margin: 0 auto
    }

    .tracking-wrap .tracking-element1 {
        position: absolute;
        left: 0;
        top: 0;
        animation: ups 9s linear infinite
    }

    .tracking-wrap .tracking-element2 {
        position: absolute;
        right: 0;
        bottom: 0;
        animation: ups2 9s linear infinite
    }

@media(max-width: 991px) {
    .tracking-wrap {
        padding: 70px 8px
    }

        .tracking-wrap .tracking-element1 {
            width: 80px
        }

        .tracking-wrap .tracking-element2 {
            width: 80px
        }
}

@keyframes ups {
    50% {
        transform: translateY(100%)
    }
}

@keyframes ups2 {
    50% {
        transform: translateY(-100%)
    }
}

.tracking-wrap .tracking-element2, .tracking-wrap .tracking-element1 {
    opacity: .4
}

.opening-account-wrapper {
    z-index: 1
}

    .opening-account-wrapper::before {
        position: absolute;
        content: "";
        border: 1px dashed var(--n0);
        width: 70%;
        left: 50%;
        transform: translateX(-50%);
        top: 48px;
        z-index: -1
    }

@media(max-width: 575px) {
    .opening-account-wrapper::before {
        display: none
    }
}

.opening-account-wrapper .opening-account-item {
    max-width: 350px;
    margin: 0 auto
}

    .opening-account-wrapper .opening-account-item .serial-badge {
        border: 1px dashed var(--n0);
        width: 48px;
        height: 48px;
        background: var(--black-clr);
        z-index: -1
    }

    .opening-account-wrapper .opening-account-item .icon {
        width: 90px;
        height: 90px;
        z-index: 1;
        position: relative
    }

        .opening-account-wrapper .opening-account-item .icon img {
            z-index: 1
        }

        .opening-account-wrapper .opening-account-item .icon::after {
            position: absolute;
            content: "";
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: var(--n0);
            border-radius: 12px
        }

        .opening-account-wrapper .opening-account-item .icon::before {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 99%;
            height: 99%;
            content: "";
            border: 1px dashed #ff9a33;
            animation: cirs 2s linear infinite;
            z-index: -1;
            border-radius: 12px
        }

@media(max-width: 1199px) {
    .opening-account-wrapper .opening-account-item .icon {
        width: 70px;
        height: 70px
    }
}

.opening-account-wrapper.opening-account-wrapper10 .opening-account-item .serial-badge {
    border-radius: 16px;
    border: 1px dashed #fff;
    background: linear-gradient(0deg, #4d361e 0%, #613910 100%),#fff !important
}

    .opening-account-wrapper.opening-account-wrapper10 .opening-account-item .serial-badge.active {
        background: linear-gradient(274deg, #ff9a33 4.65%, #ffc700 91.31%) !important;
        color: #000 !important
    }

.opening-account-wrapper.opening-account-wrapper10 .opening-account-item .icon.style2::before {
    animation: rots1 2s linear infinite
}

.opening-account-wrapper.opening-account-wrapper10 .opening-items13 .serial-badge {
    background: var(--n9)
}

.opening-account-wrapper.opening-account-wrapper10 .opening-items13 .icon::after {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.15);
    background: linear-gradient(0deg, #ffc700 0%, #5c4800 100%), #fff;
}

.opening-account-wrapper.opening-account-wrapper10 .opening-items13 p {
    color: rgba(255,255,255,.6)
}

@keyframes rots1 {
    100% {
        transform: scale(1.2)
    }
}

@keyframes cirs {
    50% {
        transform: translateY(-10px) translateX(-10px)
    }

    80% {
        transform: translateY(10px) translateX(10px)
    }
}

.workd10-element {
    position: absolute;
    top: 120px;
    right: 200px;
    animation: cirs 10s linear infinite
}

@media(max-width: 1199px) {
    .workd10-element {
        top: 30px;
        right: 30px
    }
}

@media(max-width: 500px) {
    .workd10-element {
        right: 14px;
        top: 14px;
        z-index: -1;
        width: 50px
    }
}

.features-lementtb {
    position: absolute;
    top: -180px;
    left: 0;
    width: 100%;
    z-index: -1
}

.section5-badge {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px dashed #000
}

    .section5-badge.white-badge {
        border-color: #fff
    }

.section7-badge {
    border: 1px solid var(--p4)
}

.articles-btn {
    display: flex;
    align-items: center;
    gap: 20px
}

    .articles-btn .art {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--black-clr);
        position: relative;
        transition: all .4s
    }

        .articles-btn .art i {
            color: var(--n0)
        }

        .articles-btn .art svg {
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            transition: all .4s
        }

    .articles-btn:hover {
        color: var(--s2)
    }

        .articles-btn:hover .art {
            transform: rotate(190deg);
            background: var(--s2)
        }

        .articles-btn:hover svg {
            transform: translateY(-50%) rotate(360deg)
        }

.blog-wrapper5 {
    border-bottom: 1px solid rgba(28,30,48,.1)
}

    .blog-wrapper5 .blog-left-box5 {
        max-width: 636px;
        padding-right: 54px
    }

        .blog-wrapper5 .blog-left-box5 .blog-items4 .content {
            border: unset
        }

    .blog-wrapper5 .lines {
        width: 1px;
        height: 634px;
        background: rgba(28,30,48,.1)
    }

    .blog-wrapper5 .blog-right-box5 {
        max-width: 670px
    }

        .blog-wrapper5 .blog-right-box5 .blog-items4 {
            padding-left: 50px
        }

        .blog-wrapper5 .blog-right-box5 .lines-simple {
            width: 100%;
            height: 1px;
            background: rgba(28,30,48,.1)
        }

@media(max-width: 1199px) {
    .blog-wrapper5 .blog-left-box5 {
        padding-right: 30px
    }

    .blog-wrapper5 .lines {
        width: 1px;
        height: initial
    }

    .blog-wrapper5 .blog-right-box5 .blog-items4 {
        padding: 16px 30px
    }
}

@media(max-width: 991px) {
    .blog-wrapper5 .blog-left-box5 {
        padding-right: 20px
    }

    .blog-wrapper5 .lines {
        width: 1px;
        height: initial
    }

    .blog-wrapper5 .blog-right-box5 .blog-items4 {
        padding: 16px 20px
    }
}

@media(max-width: 767px) {
    .blog-wrapper5 .blog-left-box5 {
        padding-right: 0px
    }

        .blog-wrapper5 .blog-left-box5 .blog-items4 .content {
            border: 1px solid rgba(28,30,48,.1) !important
        }

    .blog-wrapper5 .blog-right-box5 .blog-items4 {
        padding: 16px 0px
    }
}

.blog7-itesm {
    border: 1px dashed rgba(28,30,48,.1)
}

    .blog7-itesm .thumb img {
        transition: all .4s
    }

    .blog7-itesm .thumb .blog7-tag {
        position: absolute;
        right: 28px;
        top: 28px
    }

    .blog7-itesm .content h6 a {
        font-size: 20px !important;
        line-height: 29px
    }

    .blog7-itesm .content .line {
        width: 100%;
        height: 1px;
        background: rgba(28,30,48,.1)
    }

    .blog7-itesm .content .blog7-btn .icon {
        transform: rotate(-45deg);
        transition: all .4s
    }

    .blog7-itesm:hover .thumb img {
        transform: scale(1.1)
    }

    .blog7-itesm:hover h6 a {
        color: var(--p4) !important
    }

    .blog7-itesm:hover .blog7-btn .icon {
        transform: rotate(0deg)
    }

.blog-items10 {
    border: 1px solid rgba(0,0,0,.1)
}

    .blog-items10 .thumb {
        width: 100%;
        overflow: hidden
    }

        .blog-items10 .thumb img {
            width: 100%;
            overflow: hidden;
            transition: all .4s
        }

    .blog-items10 .content .admins {
        background: rgba(0,86,81,.1)
    }

    .blog-items10 .content .box-style:hover span {
        color: var(--black-clr) !important
    }

    .blog-items10 .content .box-style:hover::before {
        display: none
    }

    .blog-items10:hover .thumb img {
        transform: scale(1.1)
    }

    .blog-items10:hover .content .box-style {
        background: var(--bg1) !important;
        border-color: var(--bg1) !important
    }

        .blog-items10:hover .content .box-style span {
            color: var(--n0) !important
        }

.blog-items11 {
    transition: all .4s
}

    .blog-items11 .thumb {
        width: 100%
    }

        .blog-items11 .thumb img {
            width: 100%
        }

        .blog-items11 .thumb .date-box {
            background: var(--bg1);
            padding: 8px 10px 10px;
            text-align: center;
            width: 74px;
            position: absolute;
            right: 24px;
            bottom: -40px
        }

            .blog-items11 .thumb .date-box span {
                margin-top: -6px
            }

@media(max-width: 767px) {
    .blog-items11 .thumb .date-box {
        bottom: 10px;
        right: 10px
    }
}

.blog-items11 .blog-dot {
    font-size: 5px;
    color: var(--bg1)
}

.blog-items11:hover {
    transform: translateY(-10px)
}

    .blog-items11:hover h5 a {
        color: var(--bg1) !important
    }

.blog-grid-item4 .content {
    display: flex;
    justify-content: center;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    bottom: 10px;
    padding: 24px 20px;
    transition: all .5s
}

    .blog-grid-item4 .content .box {
        max-width: 330px;
        margin: 0 auto
    }

        .blog-grid-item4 .content .box h5 a {
            color: var(--n0) !important
        }

.blog-grid-item4::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 100%;
    content: "";
    background: linear-gradient(180deg, rgba(9, 9, 8, 0) 55%, #090908 100%)
}

.blog-grid-item4:hover .content {
    background: var(--n0);
    bottom: 30px
}

    .blog-grid-item4:hover .content h5 a {
        color: var(--black-clr) !important
    }

.newsletter-place .newsletter11-ele1 {
    position: absolute;
    top: 50px;
    left: 70px;
    z-index: -1;
    animation: cir360 10s linear infinite
}

.newsletter-place .newsletter11-ele2 {
    position: absolute;
    bottom: 60px;
    right: 60px;
    z-index: -1;
    animation: cir360 10s linear infinite;
    width: 40px
}

.newsletter-place::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 100%;
    height: 50%;
    background: var(--bg1)
}

.newsletter-container15 {
    border-bottom: 1px solid rgba(255,255,255,.1)
}

.contact-question {
    z-index: 1
}

    .contact-question .container {
        max-width: 1445px;
        margin: 0 auto
    }

    .contact-question::before {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 100%;
        height: 400px;
        z-index: -1;
        background: #005651
    }

    .contact-question.contact-question6::before {
        display: none
    }

    .contact-question.contact-question6 .footer-qustion-wrap .question-content {
        max-width: 100%;
        padding: 0
    }

        .contact-question.contact-question6 .footer-qustion-wrap .question-content form input, .contact-question.contact-question6 .footer-qustion-wrap .question-content form textarea {
            background: rgba(0,0,0,0)
        }

.footer-qustion-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .footer-qustion-wrap .question-thumb {
        max-width: 690px
    }

        .footer-qustion-wrap .question-thumb img {
            width: 100%
        }

    .footer-qustion-wrap .question-content {
        max-width: 551px;
        margin: 0 auto;
        padding: 30px
    }

    .footer-qustion-wrap form textarea, .footer-qustion-wrap form input {
        border: unset;
        border: 1px solid rgba(28,30,48,.1) !important;
        color: #4b655c;
        padding: 12px 16px;
        margin-bottom: 16px;
        border-radius: 8px;
        background: #c3eddf
    }

    .footer-qustion-wrap form ::-moz-placeholder {
        color: #4b655c
    }

    .footer-qustion-wrap form ::placeholder {
        color: #4b655c
    }

@media(max-width: 767px) {
    .footer-qustion-wrap {
        flex-wrap: wrap
    }

        .footer-qustion-wrap .question-content {
            padding: 20px
        }

        .footer-qustion-wrap .question-thumb {
            margin: 0 auto;
            padding-bottom: 20px;
            border-radius: 16px
        }

            .footer-qustion-wrap .question-thumb img {
                border-radius: 16px
            }
}

.contact-question12 .question-content form textarea, .contact-question12 .question-content form input {
    border: 1px solid rgba(28,30,48,.1);
    color: rgba(28,30,48,.6)
}

.newsletter3 {
    background: #eef5db;
    z-index: 1
}

    .newsletter3::before {
        background: #1c1e30
    }

.defi-newsletter {
    border-radius: 32px;
    border: 1px solid #424f76;
    background: #1d263f;
    position: relative;
    z-index: 1;
    overflow: hidden
}

    .defi-newsletter form {
        max-width: 490px;
        margin: 0 auto
    }

        .defi-newsletter form input {
            color: var(--black-clr)
        }

            .defi-newsletter form input::-moz-placeholder {
                color: var(--black-clr)
            }

            .defi-newsletter form input::placeholder {
                color: var(--black-clr)
            }

    .defi-newsletter::before {
        position: absolute;
        left: -60px;
        bottom: -60px;
        width: 276px;
        height: 276px;
        content: "";
        border-radius: 276px;
        background: rgba(22,73,255,.6);
        filter: blur(150px)
    }

.footer-section3 {
    background: #1c1e30
}

    .footer-section3 .footer-bottom {
        background: rgba(255,255,255,.1)
    }

        .footer-section3 .footer-bottom.style5 {
            border-top: 1px solid rgba(255,255,255,.1)
        }

            .footer-section3 .footer-bottom.style5 .social-area li a {
                width: 40px;
                min-width: 40px;
                height: 40px
            }

                .footer-section3 .footer-bottom.style5 .social-area li a i {
                    color: var(--n50)
                }

                .footer-section3 .footer-bottom.style5 .social-area li a:hover i {
                    color: var(--n0)
                }

    .footer-section3 .social-area li a {
        background: #fff
    }

        .footer-section3 .social-area li a:hover {
            background: var(--s2)
        }

    .footer-section3 .single-box h5 {
        color: #fff !important;
        margin-bottom: 20px !important
    }

    .footer-section3 .single-box ul a, .footer-section3 .single-box ul li {
        color: #fff
    }

    .footer-section3 .footer-form button {
        min-width: 145px
    }

    .footer-section3 .max-three {
        max-width: 336px
    }

    .footer-section3.style4 .footer-widget-top .footer-widgets {
        padding: 100px 0
    }

        .footer-section3.style4 .footer-widget-top .footer-widgets .social-area li a {
            background: rgba(255,255,255,.1)
        }

            .footer-section3.style4 .footer-widget-top .footer-widgets .social-area li a i {
                color: var(--n0)
            }

            .footer-section3.style4 .footer-widget-top .footer-widgets .social-area li a:hover {
                background: #c3eddf
            }

                .footer-section3.style4 .footer-widget-top .footer-widgets .social-area li a:hover i {
                    color: var(--p1)
                }

    .footer-section3.style4 .footer-widget-top .widget-line {
        width: 1px;
        border-left: 1px solid rgba(255,255,255,.1)
    }

    .footer-section3.style4 .footer-bottom {
        border-top: 1px solid rgba(255,255,255,.1)
    }

    .footer-section3.style4 .pragraph {
        max-width: 346px
    }

@media(max-width: 1199px) {
    .footer-section3.style4 .footer-widget-top .footer-widgets {
        padding: 60px 16px
    }

        .footer-section3.style4 .footer-widget-top .footer-widgets h5 {
            text-wrap: nowrap
        }
}

@media(max-width: 767px) {
    .footer-section3.style4 .footer-widget-top {
        flex-wrap: wrap;
        padding: 40px 0
    }

        .footer-section3.style4 .footer-widget-top .footer-widgets {
            width: 50%;
            padding: 15px 16px
        }

            .footer-section3.style4 .footer-widget-top .footer-widgets h5 {
                text-wrap: nowrap
            }

        .footer-section3.style4 .footer-widget-top .widget-line {
            display: none
        }
}

@media(max-width: 480px) {
    .footer-section3.style4 .footer-widget-top {
        flex-wrap: wrap
    }

        .footer-section3.style4 .footer-widget-top .footer-widgets {
            width: 100%;
            padding: 15px 16px
        }

            .footer-section3.style4 .footer-widget-top .footer-widgets h5 {
                text-wrap: nowrap
            }

        .footer-section3.style4 .footer-widget-top .widget-line {
            display: none
        }
}

.footer-section3.footer-style6 {
    padding-top: 100px
}

    .footer-section3.footer-style6 .top-area {
        margin-bottom: 100px
    }

@media(max-width: 1199px) {
    .footer-section3.footer-style6 {
        padding-top: 80px
    }

        .footer-section3.footer-style6 .top-area {
            margin-bottom: 80px
        }
}

.footer-section3.style8 .footer-newsletter8 {
    border-bottom: 1px solid rgba(255,255,255,.1)
}

    .footer-section3.style8 .footer-newsletter8 .footer-form input {
        color: var(--black-clr)
    }

    .footer-section3.style8 .footer-newsletter8 .footer-form ::-moz-placeholder {
        color: var(--black-clr)
    }

    .footer-section3.style8 .footer-newsletter8 .footer-form ::placeholder {
        color: var(--black-clr)
    }

.footer-section3.style8 .ft-border {
    border-top: 1px solid rgba(255,255,255,.1)
}

.footer-section3.style8 .social-area li a {
    background: rgba(255,255,255,.1)
}

    .footer-section3.style8 .social-area li a i {
        color: var(--n0)
    }

    .footer-section3.style8 .social-area li a:hover {
        background: var(--n0)
    }

        .footer-section3.style8 .social-area li a:hover i {
            color: var(--black-clr)
        }

.footer-form.form-style6 .input-area {
    background: var(--bg6)
}

    .footer-form.form-style6 .input-area input {
        color: var(--bg2-clr);
        font-weight: 500
    }

    .footer-form.form-style6 .input-area ::-moz-placeholder {
        color: var(--bg2-clr);
        font-weight: 500
    }

    .footer-form.form-style6 .input-area ::placeholder {
        color: var(--bg2-clr);
        font-weight: 500
    }

.footer-form.form-style10 .input-area {
    background: var(--n0)
}

    .footer-form.form-style10 .input-area input {
        color: var(--bg1)
    }

        .footer-form.form-style10 .input-area input::-moz-placeholder {
            color: var(--bg1)
        }

        .footer-form.form-style10 .input-area input::placeholder {
            color: var(--bg1)
        }

.social-area-style6 li a {
    background: var(--bg6) !important
}

    .social-area-style6 li a i {
        color: var(--black-clr) !important
    }

    .social-area-style6 li a:hover {
        background: var(--p2) !important
    }

        .social-area-style6 li a:hover i {
            color: var(--black-clr) !important
        }

.social-area-style11 li a {
    background: #00000085 !important
}

    .social-area-style11 li a i {
        color: var(--n0) !important
    }

    .social-area-style11 li a:hover {
        background: var(--n0) !important
    }

        .social-area-style11 li a:hover i {
            color: var(--black-clr) !important
        }

.together-wrapper {
    position: relative
}

    .together-wrapper .content-box {
        padding: 80px 12px
    }

@media(max-width: 1199px) {
    .together-wrapper .content-box {
        padding: 60px 12px
    }
}

@media(max-width: 991px) {
    .together-wrapper .content-box {
        padding: 40px 12px
    }
}

.together-wrapper::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 100px 100px 0px 0px;
    border-top: 1px solid rgba(255,255,255,.2);
    opacity: .2;
    background: linear-gradient(180deg, #E5FDCE 0%, rgba(229, 253, 206, 0) 100%)
}

.footer-style10 {
    position: relative;
    z-index: 1
}

    .footer-style10 .footer-element-dots {
        animation: zomin 2s linear infinite
    }

    .footer-style10 .footer-log-social {
        padding: 8px 12px;
        border-radius: 100px;
        border: 1px solid rgba(255,255,255,.1);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
        border-radius: 100px
    }

        .footer-style10 .footer-log-social .social-area li a {
            border-radius: 100px;
            background: rgba(255,255,255,.1) !important
        }

            .footer-style10 .footer-log-social .social-area li a i {
                color: var(--n0) !important
            }

            .footer-style10 .footer-log-social .social-area li a:hover {
                background: var(--p6) !important
            }

                .footer-style10 .footer-log-social .social-area li a:hover i {
                    color: var(--bg1) !important
                }

@media(max-width: 575px) {
    .footer-style10 .footer-log-social .social-area li a {
        width: 30px;
        height: 30px;
        min-width: 30px
    }
}

@media(max-width: 575px) {
    .footer-style10 .footer-log-social .flogo {
        max-width: 90px
    }

        .footer-style10 .footer-log-social .flogo img {
            width: 100%
        }
}

.footer-style10 .foter-circle-ele {
    position: absolute;
    top: 190px;
    right: 200px;
    animation: cirs 5s linear infinite
}

.footer-style10 .footer10-element1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

.footer-style10 .footer10-element2 {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1
}

@media(max-width: 1399px) {
    .footer-style10 .foter-circle-ele {
        top: 40px;
        right: 40px
    }
}

@media(max-width: 767px) {
    .footer-style10 .foter-circle-ele {
        top: 16px;
        right: 16px;
        width: 60px
    }
}

.footer-style11 {
    position: relative
}

    .footer-style11 .copyright {
        border-top: 1px solid rgba(255,255,255,.1)
    }

    .footer-style11 .footer-ele11v1 {
        position: absolute;
        top: 30px;
        left: 100px;
        animation: cir360 10s linear infinite;
        width: 60px;
        z-index: -1
    }

    .footer-style11 .footer-ele11v2 {
        position: absolute;
        top: 0px;
        right: 20px;
        animation: cir360 10s linear infinite;
        width: 60px;
        z-index: -1
    }

    .footer-style11 .footer-ele11v3 {
        position: absolute;
        bottom: 0px;
        right: 60px;
        animation: cir360 10s linear infinite;
        width: 40px;
        z-index: -1
    }

    .footer-style11 .footer-ele11v4 {
        position: absolute;
        bottom: 0px;
        left: 640px;
        animation: cir360 10s linear infinite;
        width: 30px;
        z-index: -1
    }

    .footer-style11 .footer-ele11v5 {
        position: absolute;
        bottom: 180px;
        left: 640px;
        animation: cir360 10s linear infinite;
        width: 30px;
        z-index: -1
    }

.footer-style12 .input-area input {
    color: rgba(28,30,48,.6);
    outline: none !important;
    border: unset !important
}

    .footer-style12 .input-area input::-moz-placeholder {
        color: rgba(28,30,48,.6)
    }

    .footer-style12 .input-area input::placeholder {
        color: rgba(28,30,48,.6)
    }

.footer-style12 .copyright {
    border-top: 1px solid rgba(255,255,255,.2)
}

.footer-style12 .single-box ul li a::before {
    color: #fff !important
}

.footer-style13 .investing-newsletter {
    border-radius: 32px;
    /*background: linear-gradient(180deg, #121212 0%, #1E1E1E 100%);*/
    padding: 100px 22px 100px;
    /*position: relative;*/
    background-image: url('../images/new-card-bg.png');
    background-size: cover;
}

    .footer-style13 .investing-newsletter .footer-form12 {
        max-width: 390px;
        margin: 0 auto
    }

        .footer-style13 .investing-newsletter .footer-form12 input {
            color: var(--n9)
        }

            .footer-style13 .investing-newsletter .footer-form12 input::-moz-placeholder {
                color: var(--n9)
            }

            .footer-style13 .investing-newsletter .footer-form12 input::placeholder {
                color: var(--n9)
            }

    .footer-style13 .investing-newsletter .investing-ele {
        position: absolute;
        top: 64px;
        left: 234px;
        animation: zomin 2s linear infinite
    }

.footer-style13 .copyright {
    border-top: 1px solid rgba(255,255,255,.1)
}

.footer-style13 .social-area-style11 li a {
    border: unset
}

    .footer-style13 .social-area-style11 li a:hover {
        background: var(--p7-gradient) !important
    }

@media(max-width: 1399px) {
    .footer-style13 .investing-newsletter {
        padding: 70px 18px 70px
    }
}

@media(max-width: 991px) {
    .footer-style13 .investing-newsletter {
        padding: 60px 18px 60px
    }

        .footer-style13 .investing-newsletter .investing-ele {
            top: 24px;
            left: 34px
        }
}

.footer-style14 .social-area li a {
    transition: all .4s;
    border: unset
}

    .footer-style14 .social-area li a:hover {
        background: linear-gradient(335deg, #A02DC9 -9.54%, #FF7B83 -1.31%, #C471ED 27.62%, #1F00FF 102.13%) !important
    }

        .footer-style14 .social-area li a:hover i {
            color: var(--n0) !important
        }

.footer-style14 .copyright {
    border-top: 1px solid rgba(255,255,255,.1)
}

.footer-newsletter14::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    content: "";
    background: var(--black-clr);
    z-index: -1;
    height: 44%
}

.footer-newsletter14 .footer-newsletter-wrapper {
    border-radius: 32px;
    background: linear-gradient(335deg, #A02DC9 -9.54%, #FF7B83 -1.31%, #C471ED 27.62%, #1F00FF 102.13%),#1f00ff;
    padding: 100px 18px
}

    .footer-newsletter14 .footer-newsletter-wrapper .content {
        max-width: 658px;
        margin: 0 auto
    }

        .footer-newsletter14 .footer-newsletter-wrapper .content p {
            max-width: 443px;
            margin: 0 auto
        }

    .footer-newsletter14 .footer-newsletter-wrapper .star-badge14 {
        position: absolute;
        top: 60px;
        left: 100px;
        animation: cir360 10s linear infinite
    }

@media(max-width: 1399px) {
    .footer-newsletter14 .footer-newsletter-wrapper {
        padding: 80px 18px
    }

        .footer-newsletter14 .footer-newsletter-wrapper .star-badge14 {
            top: 30px;
            left: 30px
        }
}

@media(max-width: 1199px) {
    .footer-newsletter14 .footer-newsletter-wrapper {
        padding: 80px 18px
    }

        .footer-newsletter14 .footer-newsletter-wrapper .star-badge14 {
            top: 10px;
            left: 10px;
            width: 60px
        }
}

.social-style16 li a {
    border-radius: 100px;
    background: rgba(255,255,255,.1);
    transition: all .4s
}

    .social-style16 li a i {
        color: var(--n0)
    }

    .social-style16 li a:hover {
        background: var(--p11)
    }

.border-10 {
    border: 1px solid rgba(255,255,255,.1)
}

.border-11 {
    border: 1px solid var(--n12)
}

.badge-14 {
    background: var(--p8)
}

.slider-btn-stylewhite button {
    border-color: var(--n0) !important;
    color: var(--n0) !important;
    box-shadow: none !important
}

    .slider-btn-stylewhite button.active, .slider-btn-stylewhite button:hover {
        border-color: var(--p2) !important;
        background: var(--p2) !important;
        color: var(--black-clr) !important
    }

.slider-btn-stylewhite.style14 button {
    background: var(--n0) !important
}

    .slider-btn-stylewhite.style14 button i {
        color: var(--black-clr) !important
    }

    .slider-btn-stylewhite.style14 button:hover, .slider-btn-stylewhite.style14 button.active {
        background: linear-gradient(335deg, #1F00FF -6.4%, #C471ED 68.1%, #FF7B83 97.04%, #A02DC9 105.26%) !important
    }

        .slider-btn-stylewhite.style14 button:hover i, .slider-btn-stylewhite.style14 button.active i {
            color: var(--n0) !important
        }

.slider-btn-stylegray button {
    border-color: rgba(28,30,48,.1) !important;
    color: var(--black-clr) !important
}

    .slider-btn-stylegray button.active, .slider-btn-stylegray button:hover {
        border-color: var(--p2) !important;
        background: var(--p2) !important;
        color: var(--black-clr) !important
    }

.slider-btn.style16 button {
    border: unset;
    background: var(--n0);
    box-shadow: none
}

    .slider-btn.style16 button i {
        color: var(--n90)
    }

    .slider-btn.style16 button:hover {
        background: var(--p11)
    }

.portfolio-box-items {
    position: relative
}

    .portfolio-box-items .project-hover {
        width: 200px;
        height: 240px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(10deg);
        inset-inline-start: 0;
        background-size: cover;
        background-repeat: no-repeat;
        background-position-x: 75%;
        opacity: 0;
        transition: opacity .3s,transform .7s cubic-bezier(0.23, 1, 0.32, 1);
        margin: -200px 0 0 -50px;
        overflow: hidden;
        pointer-events: none;
        z-index: 2;
        visibility: hidden
    }

    .portfolio-box-items .portfoli-thumb-area .icon-area {
        width: 150px;
        height: 150px;
        min-width: 150px;
        border: 1px dashed rgba(0,86,81,.1);
        transition: all .5s
    }

    .portfolio-box-items .big-pragraph {
        max-width: 636px
    }

    .portfolio-box-items:hover .portfoli-thumb-area .icon-area {
        background: var(--s2)
    }

    .portfolio-box-items:hover .project-hover {
        opacity: 1;
        visibility: visible
    }

@media(max-width: 1199px) {
    .portfolio-box-items .portfoli-thumb-area .icon-area {
        width: 100px;
        height: 100px;
        min-width: 100px
    }

        .portfolio-box-items .portfoli-thumb-area .icon-area img {
            width: 80px
        }

    .portfolio-box-items .big-pragraph {
        max-width: 500px
    }
}

@media(max-width: 991px) {
    .portfolio-box-items .portfoli-thumb-area .icon-area {
        width: 80px;
        height: 80px;
        min-width: 80px
    }

        .portfolio-box-items .portfoli-thumb-area .icon-area img {
            width: 60px
        }

    .portfolio-box-items .big-pragraph {
        max-width: 400px
    }
}

.port-line {
    border-bottom: 1px dashed #01a66b;
    width: 100%;
    display: block
}

.bg-cover {
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background-position: center
}

.global-portfolio.style5-colums-section .container {
    max-width: 1720px;
    margin: 0 auto
}

.global-portfolio .mixitup-button-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px
}

    .global-portfolio .mixitup-button-area .control {
        position: relative;
        display: block;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        color: #000
    }

        .global-portfolio .mixitup-button-area .control.mixitup-control-active {
            color: var(--p2)
        }

@media(max-width: 767px) {
    .global-portfolio .mixitup-button-area {
        gap: 9px 20px;
        flex-wrap: wrap
    }
}

.global-portfolio .masonry-minimal-wrap {
    -moz-column-count: 3;
    column-count: 3;
    align-items: flex-start;
    overflow: hidden
}

    .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item {
        position: relative;
        margin: 0 4px 24px;
        z-index: 1
    }

        .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item .arrows {
            font-size: 36px;
            color: var(--n0);
            position: absolute;
            top: 30px;
            right: 30px;
            transform: rotate(-30deg);
            opacity: 0;
            visibility: hidden;
            transition: all .4s
        }

        .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item .fitness-metallic {
            position: absolute;
            bottom: 30px;
            text-align: center;
            opacity: 0;
            visibility: hidden;
            transition: all .4s
        }

        .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item .popup-icon {
            width: 60px;
            height: 60px;
            background: var(--n0);
            border-radius: 50%;
            position: absolute;
            transform: rotateX(90deg);
            transition: all .5s
        }

            .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item .popup-icon i {
                font-size: 18px
            }

            .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item .popup-icon:hover {
                background: var(--p2)
            }

        .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item::before {
            position: absolute;
            left: 0;
            height: 0%;
            width: 100%;
            content: "";
            background: rgba(0,0,0,.241);
            transition: all .5s
        }

        .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item img {
            width: 100%;
            height: 100%
        }

        .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item:hover .arrows {
            opacity: 1;
            visibility: visible
        }

        .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item:hover .fitness-metallic {
            opacity: 1;
            visibility: visible
        }

        .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item:hover .popup-icon {
            transform: rotateX(0deg)
        }

        .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item:hover::before {
            height: 100%
        }

@media(max-width: 991px) {
    .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item .arrows {
        font-size: 24px;
        top: 20px;
        right: 20px
    }

    .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item .fitness-metallic {
        bottom: 20px
    }
}

.global-portfolio .masonry-minimal-wrap.style-grid2 {
    -moz-column-count: 2;
    column-count: 2
}

@media(max-width: 450px) {
    .global-portfolio .masonry-minimal-wrap.style-grid2 {
        -moz-column-count: 1;
        column-count: 1
    }
}

.global-portfolio .masonry-minimal-wrap.style-random {
    -moz-column-count: 2;
    column-count: 2
}

    .global-portfolio .masonry-minimal-wrap.style-random .popup-icon {
        transform: rotate(-18deg);
        opacity: 0
    }

    .global-portfolio .masonry-minimal-wrap.style-random .random-items-custom {
        margin: 0 4px 24px
    }

        .global-portfolio .masonry-minimal-wrap.style-random .random-items-custom:hover .popup-icon {
            opacity: 1
        }

    .global-portfolio .masonry-minimal-wrap.style-random .portfolio3-grid-item {
        margin: 0 0
    }

@media(max-width: 575px) {
    .global-portfolio .masonry-minimal-wrap.style-random {
        -moz-column-count: 1;
        column-count: 1
    }
}

.global-portfolio .masonry-minimal-wrap.gird-colums4 {
    -moz-column-count: 4;
    column-count: 4
}

@media(max-width: 991px) {
    .global-portfolio .masonry-minimal-wrap.gird-colums4 {
        -moz-column-count: 3;
        column-count: 3
    }
}

@media(max-width: 767px) {
    .global-portfolio .masonry-minimal-wrap.gird-colums4 {
        -moz-column-count: 2;
        column-count: 2
    }
}

@media(max-width: 450px) {
    .global-portfolio .masonry-minimal-wrap.gird-colums4 {
        -moz-column-count: 1;
        column-count: 1
    }
}

.global-portfolio .masonry-minimal-wrap.style-grid1 {
    -moz-column-count: 1;
    column-count: 1
}

.global-portfolio .masonry-minimal-wrap.grid-colums5 {
    -moz-column-count: 5;
    column-count: 5
}

@media(max-width: 1199px) {
    .global-portfolio .masonry-minimal-wrap.grid-colums5 {
        -moz-column-count: 4;
        column-count: 4
    }
}

@media(max-width: 767px) {
    .global-portfolio .masonry-minimal-wrap.grid-colums5 {
        -moz-column-count: 3;
        column-count: 3
    }
}

@media(max-width: 575px) {
    .global-portfolio .masonry-minimal-wrap.grid-colums5 {
        -moz-column-count: 2;
        column-count: 2
    }
}

@media(max-width: 420px) {
    .global-portfolio .masonry-minimal-wrap.grid-colums5 {
        -moz-column-count: 1;
        column-count: 1
    }
}

.global-portfolio .masonry-minimal-wrap.custom-space0 .portfolio3-grid-item {
    margin: 0 -8px
}

@media(max-width: 1199px) {
    .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item {
        margin: 0 0px 16px
    }

        .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item .popup-icon {
            width: 40px;
            height: 40px
        }

            .global-portfolio .masonry-minimal-wrap .portfolio3-grid-item .popup-icon i {
                font-size: 18px
            }
}

@media(max-width: 767px) {
    .global-portfolio .masonry-minimal-wrap {
        -moz-column-count: 2;
        column-count: 2
    }
}

@media(max-width: 450px) {
    .global-portfolio .masonry-minimal-wrap {
        -moz-column-count: 1;
        column-count: 1
    }
}

.shop-section .shop-headbar .nice-select::after {
    width: 8px;
    height: 8px;
    border-bottom: 1px solid var(--black-clr);
    border-right: 1px solid var(--black-clr)
}

.shop-section .shop-headbar .filter-buttons button {
    width: 40px;
    min-width: 40px;
    height: 40px
}

    .shop-section .shop-headbar .filter-buttons button i {
        font-size: 20px
    }

    .shop-section .shop-headbar .filter-buttons button.active {
        background: var(--bg1)
    }

        .shop-section .shop-headbar .filter-buttons button.active i {
            color: var(--n0)
        }

.product-items .thumb {
    position: relative
}

    .product-items .thumb::before {
        position: absolute;
        left: -100%;
        bottom: 0;
        width: 100%;
        height: 100%;
        content: "";
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
        transition: all .4s
    }

    .product-items .thumb .sale-badge {
        position: absolute;
        top: 30px;
        left: 30px;
        z-index: 1
    }

    .product-items .thumb .cart-social {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotateX(90deg);
        transition: all .5s
    }

        .product-items .thumb .cart-social a, .product-items .thumb .cart-social button {
            width: 44px;
            height: 44px;
            transition: all .4s
        }

            .product-items .thumb .cart-social a:hover, .product-items .thumb .cart-social button:hover {
                background: var(--s2) !important
            }

                .product-items .thumb .cart-social a:hover i, .product-items .thumb .cart-social button:hover i {
                    color: var(--n0) !important
                }

.product-items:hover .thumb {
    position: relative
}

    .product-items:hover .thumb .cart-social {
        transform: translate(-50%, -50%) rotateX(0deg)
    }

    .product-items:hover .thumb::before {
        left: 0%
    }

.shop-grid-body .two-columns {
    display: flex;
    flex-wrap: wrap;
    margin: -10px
}

    .shop-grid-body .two-columns .product-item-ins {
        width: 50%;
        padding: 12px
    }

        .shop-grid-body .two-columns .product-item-ins .product-items .contnet {
            padding: 38px 38px
        }

        .shop-grid-body .two-columns .product-item-ins .blend-pra {
            display: none
        }

        .shop-grid-body .two-columns .product-item-ins.grid-view-filter {
            width: 100%
        }

            .shop-grid-body .two-columns .product-item-ins.grid-view-filter .blend-pra {
                display: block
            }

            .shop-grid-body .two-columns .product-item-ins.grid-view-filter .product-items {
                display: flex;
                align-items: center
            }

                .shop-grid-body .two-columns .product-item-ins.grid-view-filter .product-items .thumb {
                    max-width: 400px
                }

                    .shop-grid-body .two-columns .product-item-ins.grid-view-filter .product-items .thumb img {
                        width: 100%
                    }

@media(max-width: 1199px) {
    .shop-grid-body .two-columns .product-item-ins {
        padding: 9px
    }

        .shop-grid-body .two-columns .product-item-ins .product-items .contnet {
            padding: 30px 24px
        }

        .shop-grid-body .two-columns .product-item-ins.grid-view-filter .product-items {
            display: flex;
            align-items: center
        }

            .shop-grid-body .two-columns .product-item-ins.grid-view-filter .product-items .thumb {
                max-width: 250px
            }

            .shop-grid-body .two-columns .product-item-ins.grid-view-filter .product-items .contnet {
                padding: 16px 16px
            }

            .shop-grid-body .two-columns .product-item-ins.grid-view-filter .product-items p {
                font-size: 14px;
                line-height: 19px
            }
}

@media(max-width: 500px) {
    .shop-grid-body .two-columns .product-item-ins {
        padding: 9px;
        width: 100%
    }

        .shop-grid-body .two-columns .product-item-ins.grid-view-filter .product-items {
            flex-wrap: wrap;
            display: grid;
            align-items: center
        }

            .shop-grid-body .two-columns .product-item-ins.grid-view-filter .product-items .thumb {
                max-width: 100%
            }

            .shop-grid-body .two-columns .product-item-ins.grid-view-filter .product-items .contnet {
                padding: 20px 16px
            }

            .shop-grid-body .two-columns .product-item-ins.grid-view-filter .product-items p {
                font-size: 14px;
                line-height: 19px
            }
}

.shop-grid-body .three-columns {
    display: flex;
    flex-wrap: wrap;
    margin: -10px
}

    .shop-grid-body .three-columns .product-item-ins {
        width: 33.33%;
        padding: 12px
    }

        .shop-grid-body .three-columns .product-item-ins .product-items .contnet {
            padding: 32px 32px
        }

        .shop-grid-body .three-columns .product-item-ins .blend-pra {
            display: none
        }

        .shop-grid-body .three-columns .product-item-ins.grid-view-filter {
            width: 100%
        }

            .shop-grid-body .three-columns .product-item-ins.grid-view-filter .blend-pra {
                display: block
            }

            .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items {
                display: flex;
                align-items: center
            }

                .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items .thumb {
                    max-width: 400px
                }

                    .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items .thumb img {
                        width: 100%
                    }

    .shop-grid-body .three-columns.columns-space3 .product-item-ins .product-items .contnet {
        padding: 24px 24px
    }

        .shop-grid-body .three-columns.columns-space3 .product-item-ins .product-items .contnet h5 a {
            font-size: 20px
        }

        .shop-grid-body .three-columns.columns-space3 .product-item-ins .product-items .contnet h6 {
            font-size: 16px;
            font-weight: 500
        }

    .shop-grid-body .three-columns.adjust-columns4 .product-item-ins {
        width: 25%
    }

        .shop-grid-body .three-columns.adjust-columns4 .product-item-ins .product-items .contnet {
            padding: 24px 24px
        }

            .shop-grid-body .three-columns.adjust-columns4 .product-item-ins .product-items .contnet h5 a {
                font-size: 20px
            }

            .shop-grid-body .three-columns.adjust-columns4 .product-item-ins .product-items .contnet h6 {
                font-size: 16px;
                font-weight: 500
            }

        .shop-grid-body .three-columns.adjust-columns4 .product-item-ins.grid-view-filter {
            width: 50%
        }

@media(min-width: 1199px) {
    .shop-grid-body .three-columns.adjust-columns4 .product-item-ins.grid-view-filter .product-items .thumb {
        max-width: 260px
    }
}

@media(max-width: 1199px) {
    .shop-grid-body .three-columns.adjust-columns4 .product-item-ins.grid-view-filter .product-items .thumb {
        max-width: 200px
    }
}

@media(max-width: 500px) {
    .shop-grid-body .three-columns.adjust-columns4 .product-item-ins.grid-view-filter .product-items .thumb {
        max-width: 100%
    }
}

@media(max-width: 991px) {
    .shop-grid-body .three-columns.adjust-columns4 .product-item-ins.grid-view-filter {
        width: 100%
    }
}

@media(max-width: 1199px) {
    .shop-grid-body .three-columns.adjust-columns4 .product-item-ins .product-items .contnet {
        padding: 20px 16px
    }

        .shop-grid-body .three-columns.adjust-columns4 .product-item-ins .product-items .contnet h5 a {
            font-size: 18px
        }
}

@media(max-width: 991px) {
    .shop-grid-body .three-columns.adjust-columns4 .product-item-ins {
        width: 33.33%
    }

        .shop-grid-body .three-columns.adjust-columns4 .product-item-ins .product-items .contnet {
            padding: 20px 16px
        }

            .shop-grid-body .three-columns.adjust-columns4 .product-item-ins .product-items .contnet h5 a {
                font-size: 18px
            }
}

@media(max-width: 767px) {
    .shop-grid-body .three-columns.adjust-columns4 .product-item-ins {
        width: 50%
    }

        .shop-grid-body .three-columns.adjust-columns4 .product-item-ins .product-items .contnet {
            padding: 20px 16px
        }
}

@media(max-width: 500px) {
    .shop-grid-body .three-columns.adjust-columns4 .product-item-ins {
        width: 100%
    }

        .shop-grid-body .three-columns.adjust-columns4 .product-item-ins .product-items .contnet {
            padding: 20px 16px
        }
}

.shop-grid-body .three-columns.adjust-columns5 .product-item-ins {
    width: 20%
}

    .shop-grid-body .three-columns.adjust-columns5 .product-item-ins .product-items .contnet {
        padding: 24px 22px
    }

        .shop-grid-body .three-columns.adjust-columns5 .product-item-ins .product-items .contnet h5 a {
            font-size: 20px
        }

        .shop-grid-body .three-columns.adjust-columns5 .product-item-ins .product-items .contnet h6 {
            font-size: 15px;
            font-weight: 500
        }

    .shop-grid-body .three-columns.adjust-columns5 .product-item-ins.grid-view-filter {
        width: 50%
    }

@media(min-width: 1199px) {
    .shop-grid-body .three-columns.adjust-columns5 .product-item-ins.grid-view-filter .product-items .thumb {
        max-width: 260px
    }
}

@media(max-width: 1199px) {
    .shop-grid-body .three-columns.adjust-columns5 .product-item-ins.grid-view-filter .product-items .thumb {
        max-width: 200px
    }
}

@media(max-width: 500px) {
    .shop-grid-body .three-columns.adjust-columns5 .product-item-ins.grid-view-filter .product-items .thumb {
        max-width: 100%
    }
}

@media(max-width: 991px) {
    .shop-grid-body .three-columns.adjust-columns5 .product-item-ins.grid-view-filter {
        width: 100%
    }
}

@media(max-width: 1199px) {
    .shop-grid-body .three-columns.adjust-columns5 .product-item-ins .product-items .contnet {
        padding: 20px 16px
    }

        .shop-grid-body .three-columns.adjust-columns5 .product-item-ins .product-items .contnet h5 a {
            font-size: 18px
        }
}

@media(max-width: 991px) {
    .shop-grid-body .three-columns.adjust-columns5 .product-item-ins {
        width: 33.33%
    }

        .shop-grid-body .three-columns.adjust-columns5 .product-item-ins .product-items .contnet {
            padding: 20px 16px
        }

            .shop-grid-body .three-columns.adjust-columns5 .product-item-ins .product-items .contnet h5 a {
                font-size: 18px
            }
}

@media(max-width: 767px) {
    .shop-grid-body .three-columns.adjust-columns5 .product-item-ins {
        width: 50%
    }

        .shop-grid-body .three-columns.adjust-columns5 .product-item-ins .product-items .contnet {
            padding: 20px 16px
        }
}

@media(max-width: 500px) {
    .shop-grid-body .three-columns.adjust-columns5 .product-item-ins {
        width: 100%
    }

        .shop-grid-body .three-columns.adjust-columns5 .product-item-ins .product-items .contnet {
            padding: 20px 16px
        }
}

@media(max-width: 1199px) {
    .shop-grid-body .three-columns .product-item-ins {
        padding: 9px
    }

        .shop-grid-body .three-columns .product-item-ins .product-items .contnet {
            padding: 30px 20px
        }

        .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items {
            display: flex;
            align-items: center
        }

            .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items .thumb {
                max-width: 250px
            }

            .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items .contnet {
                padding: 16px 16px
            }

            .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items p {
                font-size: 14px;
                line-height: 19px
            }
}

@media(max-width: 991px) {
    .shop-grid-body .three-columns .product-item-ins .product-items .contnet {
        padding: 24px 16px
    }
}

@media(max-width: 767px) {
    .shop-grid-body .three-columns .product-item-ins {
        width: 50%
    }

        .shop-grid-body .three-columns .product-item-ins .product-items .contnet {
            padding: 24px 16px
        }

        .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items {
            display: flex;
            align-items: center
        }

            .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items .thumb {
                max-width: 250px
            }

            .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items .contnet {
                padding: 16px 16px
            }

            .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items p {
                font-size: 14px;
                line-height: 19px
            }
}

@media(max-width: 500px) {
    .shop-grid-body .three-columns .product-item-ins {
        padding: 9px;
        width: 100%
    }

        .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items {
            flex-wrap: wrap;
            display: grid;
            align-items: center
        }

            .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items .thumb {
                max-width: 100%
            }

            .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items .contnet {
                padding: 20px 16px
            }

            .shop-grid-body .three-columns .product-item-ins.grid-view-filter .product-items p {
                font-size: 14px;
                line-height: 19px
            }
}

.description-review .nav-tabs {
    border-bottom: 2px solid rgba(0,0,0,.2);
    display: flex;
    gap: 88px
}

    .description-review .nav-tabs .nav-item .nav-link {
        background: rgba(0,0,0,0);
        padding: 0;
        border: unset;
        padding-bottom: 11px;
        position: relative;
        transition: all .4s
    }

        .description-review .nav-tabs .nav-item .nav-link::before {
            position: absolute;
            bottom: 0;
            left: 0;
            transition: all .4s;
            width: 100%;
            height: 2px;
            content: ""
        }

        .description-review .nav-tabs .nav-item .nav-link.active::before {
            background: var(--bg1)
        }

@media(max-width: 500px) {
    .description-review .nav-tabs {
        gap: 18px
    }
}

.review-content-wrap .admin {
    width: 60px;
    height: 60px
}

.review-content-wrap form .review-form textarea, .review-content-wrap form .review-form input {
    width: 100%;
    border: unset;
    padding: 12px 14px;
    border-radius: 0;
    color: var(--n10);
    background: var(--n0)
}

    .review-content-wrap form .review-form textarea::-moz-placeholder, .review-content-wrap form .review-form input::-moz-placeholder {
        color: var(--n10)
    }

    .review-content-wrap form .review-form textarea::placeholder, .review-content-wrap form .review-form input::placeholder {
        color: var(--n10)
    }

.review-content-wrap form .form-check {
    display: flex;
    align-items: center;
    gap: 8px
}

    .review-content-wrap form .form-check .form-check-input {
        padding: 4px;
        border: 1px solid var(--black-clr);
        border-radius: 4px;
        width: 18px;
        height: 18px
    }

.shop-details-content .social-area li a {
    background: #ecfffc;
    width: 40px;
    height: 40px;
    min-width: 40px
}

    .shop-details-content .social-area li a:hover {
        background: var(--bg1);
        border: 1px solid var(--bg1)
    }

        .shop-details-content .social-area li a:hover i {
            color: var(--n0)
        }

.shop-details-content .react {
    width: 50px;
    height: 50px;
    min-width: 50px;
    background: var(--bg16);
    transition: all .4s
}

    .shop-details-content .react:hover {
        background: var(--bg1)
    }

        .shop-details-content .react:hover i {
            color: var(--n0)
        }

.shop-details-content .quantity {
    display: flex;
    border: 1px solid rgba(0,31,29,.2);
    overflow: hidden;
    padding: 4px 24px;
    border-radius: 100px
}

    .shop-details-content .quantity button {
        border: none;
        cursor: pointer;
        font-size: 28px;
        width: 30px;
        height: auto;
        text-align: center
    }

    .shop-details-content .quantity .input-box {
        width: 40px;
        text-align: center;
        border: none;
        padding: 8px 10px;
        font-size: 16px;
        outline: none;
        font-weight: 600;
        color: var(--n900)
    }

        .shop-details-content .quantity .input-box::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0
        }

        .shop-details-content .quantity .input-box::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0
        }

        .shop-details-content .quantity .input-box[type=number] {
            -moz-appearance: textfield
        }

@media(max-width: 1399px) {
    .shop-details-content .quantity {
        padding: 0px 16px
    }
}

.shop-details-wrap .swiper-button-next, .shop-details-wrap .swiper-button-prev {
    color: #01a66b
}

.shop-cart-wrap {
    border: 1px solid rgba(0,0,0,.2)
}

@media(max-width: 800px) {
    .shop-cart-wrap {
        overflow-x: scroll;
        padding-bottom: 20px;
        margin-bottom: 10px
    }

        .shop-cart-wrap::-webkit-scrollbar {
            width: 1px;
            height: 2px
        }

        .shop-cart-wrap .box {
            width: 900px
        }
}

.shop-cart-wrap .table {
    width: 100%;
    margin-bottom: 0
}

    .shop-cart-wrap .table thead tr {
        overflow: hidden
    }

        .shop-cart-wrap .table thead tr th {
            background: var(--bg1);
            padding: 14px 14px
        }

            .shop-cart-wrap .table thead tr th span {
                font-size: 16px;
                font-weight: 600;
                color: var(--n0)
            }

    .shop-cart-wrap .table tbody tr td {
        padding: 20px 0;
        vertical-align: middle
    }

        .shop-cart-wrap .table tbody tr td .cart-thumb {
            width: 75px;
            height: 75px;
            display: block
        }

            .shop-cart-wrap .table tbody tr td .cart-thumb img {
                width: 100%;
                height: 100%
            }

        .shop-cart-wrap .table tbody tr td .quantity {
            width: 143px;
            padding: 1px 0px;
            border: 1px solid rgba(0,0,0,.2);
            border-radius: 100px;
            padding: 8px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between
        }

            .shop-cart-wrap .table tbody tr td .quantity button {
                width: 20px;
                font-size: 24px
            }

            .shop-cart-wrap .table tbody tr td .quantity input {
                width: 50px;
                color: var(--black-clr);
                text-align: center;
                padding: 0;
                border: unset
            }

        .shop-cart-wrap .table tbody tr td .gradi-title {
            font-family: --sub-font
        }

@media(max-width: 1399px) {
    .shop-cart-wrap .table thead tr {
        overflow: hidden
    }

        .shop-cart-wrap .table thead tr th {
            overflow: hidden;
            padding: 20px 0px
        }

            .shop-cart-wrap .table thead tr th:first-child {
                padding-left: 10px
            }
}

.table-dual-box .promo-coupon input {
    width: 153px;
    text-align: center;
    padding: 12px 24px;
    border: unset;
    color: var(--black-clr)
}

    .table-dual-box .promo-coupon input::-moz-placeholder {
        color: var(--black-clr)
    }

    .table-dual-box .promo-coupon input::placeholder {
        color: var(--black-clr)
    }

.table-dual-box .update-cart {
    background: rgba(0,113,93,.5) !important
}

.shop-cart-total .process-check {
    background: #ffaf40 !important
}

    .shop-cart-total .process-check:hover {
        background: #005651 !important
    }

.shop-cart-total .cart-list {
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 8px
}

    .shop-cart-total .cart-list li {
        padding: 16px 24px
    }

        .shop-cart-total .cart-list li .some-title {
            width: 170px
        }

        .shop-cart-total .cart-list li:not(:last-child) {
            border-bottom: 1px solid rgba(0,0,0,.2)
        }

.order-list .line {
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,.1)
}

.billing-form textarea, .billing-form input {
    width: 100%;
    border: 1px solid rgba(0,0,0,.1)
}

.billing-form .nice-select {
    width: 100%;
    padding: 6px 16px;
    height: initial
}

    .billing-form .nice-select .current {
        font-size: 14px
    }

    .billing-form .nice-select::after {
        width: 12px;
        height: 12px
    }

    .billing-form .nice-select .list {
        width: 100%
    }

.create-account-info form .account-form input {
    background: var(--n0);
    border: unset
}

.create-account-info form .social-area li a {
    background: var(--bg1)
}

    .create-account-info form .social-area li a i {
        color: var(--n0)
    }

    .create-account-info form .social-area li a:hover {
        background: var(--p2)
    }

        .create-account-info form .social-area li a:hover i {
            color: var(--black-clr)
        }

.single-project-info .single-project-item .social-area li a {
    background: #f2f2f2;
    border: unset
}

    .single-project-info .single-project-item .social-area li a i {
        color: var(--black-clr)
    }

    .single-project-info .single-project-item .social-area li a:hover {
        background: var(--bg1)
    }

        .single-project-info .single-project-item .social-area li a:hover i {
            color: var(--n0)
        }

.single-project-info .line {
    height: 88px;
    width: 1px;
    background: rgba(0,0,0,.1)
}

@media(max-width: 767px) {
    .single-project-info .line {
        display: none
    }
}

.portfolio-diversifed .portfolio-video {
    position: absolute;
    width: 96px;
    height: 96px;
    background: var(--n0);
    z-index: 1
}

    .portfolio-diversifed .portfolio-video i {
        font-size: 24px;
        color: var(--bg1)
    }

    .portfolio-diversifed .portfolio-video::before, .portfolio-diversifed .portfolio-video::after {
        position: absolute;
        width: 100%;
        height: 100%;
        content: "";
        border: 1px solid var(--n0);
        border-radius: 50%
    }

    .portfolio-diversifed .portfolio-video::before {
        transition: all .3s;
        animation: scsl 2s linear infinite
    }

    .portfolio-diversifed .portfolio-video::after {
        transition: all .4s;
        animation: scsl2 3s linear infinite
    }

@media(max-width: 767px) {
    .portfolio-diversifed .portfolio-video {
        width: 50px;
        height: 50px
    }

        .portfolio-diversifed .portfolio-video i {
            font-size: 18px
        }
}

@keyframes scsl {
    50% {
        transform: scale(1.05);
        opacity: 1
    }

    60% {
        transform: scale(1.09);
        opacity: .6
    }

    80% {
        transform: scale(1.1);
        opacity: .3
    }

    90% {
        transform: scale(1.2);
        opacity: .2
    }

    100% {
        transform: scale(1.3);
        opacity: 0
    }
}

@keyframes scsl2 {
    50% {
        transform: scale(1.05);
        opacity: 1
    }

    60% {
        transform: scale(1.09);
        opacity: .6
    }

    80% {
        transform: scale(1.1);
        opacity: .3
    }

    90% {
        transform: scale(1.2);
        opacity: .2
    }

    100% {
        transform: scale(1.3);
        opacity: 0
    }
}

.portfolio-breadcrumd-single {
    background: url(../images/portfolio-single-hero3.jpg) no-repeat center center;
    background-size: cover;
    z-index: 1
}

    .portfolio-breadcrumd-single::before {
        position: absolute;
        left: 0;
        top: 0;
        content: "";
        z-index: -1;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.403)
    }

.portfolio-slide-item {
    z-index: 2;
    overflow: hidden
}

    .portfolio-slide-item .fitness-metallic {
        position: absolute;
        bottom: 36px;
        left: -100%;
        transition: all .4s
    }

    .portfolio-slide-item::before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0%;
        height: 100%;
        content: "";
        transition: all .4s;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)
    }

    .portfolio-slide-item:hover .fitness-metallic {
        left: 36px
    }

    .portfolio-slide-item:hover::before {
        width: 100%
    }

.swiper-pagination-custom {
    position: initial;
    width: initial !important;
    display: flex;
    align-items: center;
    gap: 0px
}

    .swiper-pagination-custom .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: var(--black-clr);
        opacity: 1;
        position: relative
    }

        .swiper-pagination-custom .swiper-pagination-bullet::before {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            content: "";
            width: 14px;
            height: 14px;
            border: 1px solid var(--n0);
            border-radius: 50%;
            transition: all .4s
        }

        .swiper-pagination-custom .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
            border-color: var(--black-clr)
        }
/*# sourceMappingURL=style.min.css.map */


/*# cuctom css start */
.select-country-lang{
    display:flex !important;
}
.text-dark {
    color:#000000;
}
.text-light {
    color:#ffffff;
}


.crypto-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background-color: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.3s;
}

    .crypto-button:hover {
        background-color: #e0e0e0;
    }

    .crypto-button img {
        width: 20px;
        height: 20px;
    }
 
    .pt-50{
        padding-top:50px;
    }

.home-page-link {
    color: #bf6000;
}

.theam-color1 {
    color: #ffca00 !important;
}
 
/*# cuctom css ends */