@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500&display=swap');

@font-face {
    font-family: "password-mask";
    src: url(data:font/woff;charset:utf-8;base64,d09GRgABAAAAAAusAAsAAAAAMGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPgAAAFZjRmM5Y21hcAAAAYQAAAgCAAArYmjjYVVnbHlmAAAJiAAAAEEAAABQiOYj2mhlYWQAAAnMAAAALgAAADYOxVFUaGhlYQAACfwAAAAcAAAAJAqNAyNobXR4AAAKGAAAAAgAAAAIAyAAAGxvY2EAAAogAAAABgAAAAYAKAAAbWF4cAAACigAAAAeAAAAIAEOACJuYW1lAAAKSAAAAUIAAAKOcN63t3Bvc3QAAAuMAAAAHQAAAC5lhHRpeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGScwDiBgZWBgSGVtYKBgVECQjMfYEhiYmFgYGJgZWbACgLSXFMYHIAq/rNfAHK3gEmgASACAIekCT4AAHic7dhl0zDVmUXh5+XFHYK7E0IguFtwt4QQgmtwd3d3d7cED+4SXIO7u7vbsNfaUzU1fyGcu66u1adOf+6uHhgYGGpgYGDwL37/iyEHBoZZcWDQLzUw9NK/7A5if/DA8OwPOfQknBky+0P8/PPPOcd1UJ785frr/Dq/zq/z6/w3zsCgoX/xX74GRsxbcYpRB1iDB/7PGvT/DFGDenBwe8hKD1XpoSs9TKWHrfRwlR6+0iNUesRKj1TpkSs9SqVHrfRolR690r+p9BiVHrPSY1V67EqPU+lxKz1epcev9ASVnrDSE1V64kpPUulJKz1ZpSev9BSVnrLSU1V66kr/ttLTVPp3lZ62/KJSerpKT1/pP1R6hkrPWOmZKj1zpWep9KyVnq3Ss1d6jkrPWem5Kj13peep9LyVnq/S81d6gUr/sdILVnqhSi9c6UUqvWilF6v04pVeotJLVnqpSi9d6WUqvWyll6v08pVeodIrVvpPlf5zpVeq9F8qvXKl/1rpVSr9t0qvWunVKr16pdeo9JqVXqvSa1d6nUqvW+n1Kr1+pTeo9N8rvWGlN6r0xpXepNKbVnqzSm9e6S0qvWWlt6r01pXeptLbVnq7Sm9f6R0qvWOld6r0zpXepdK7Vnq3Su9e6T0qvWel96r03pXep9L7Vnq/Su9f6QMqfWClD6r0wZU+pNKHVvqwSh9e6SMqfWSlj6r00ZU+ptLHVvq4Sh9f6RMqfWKlT6r0yZU+pdKnVvq0Sp9e6TMqfWalz6r02ZU+p9LnVvq8Sp9f6QsqfWGl/1Hpf1b6okpfXOlLKn1ppS+r9OWVvqLS/6r0lZW+qtJXV/qaSl9b6esqfX2lb6j0jZW+qdI3V/qWSt9a6dsqfXul76j0vyt9Z6XvqvTdlb6n0vdW+r5K31/pByr9YKUfqvTDlX6k0v+p9KOVfqzSj1f6iUo/WemnKv10pZ+p9LOVfq7Sz1f6hUq/WOmXKv1ypV+p9KuVfq3Sr1f6jUq/Wem3Kv12pd+p9LuVfq/S71f6g0p/WOmPKv1xpT+p9KeV/qzSn1f6i0p/WemvKv11pb+p9LeV/q7S31f6h0r/WOmfKv1zDfI26KKHED1Y9JCihxI9tOhhRA8rejjRw4seQfSIokcSPbLoUUSPKno00aOL/o3oMUSPKXos0WOLHkf0uKLHEz2+6AlETyh6ItETi55E9KSiJxM9uegpRE8peirRU4v+rehpRP9O9LSify96OtHTi/6D6BlEzyh6JtEzi55F9KyiZxM9u+g5RM8pei7Rc4ueR/S8oucTPb/oBUT/UfSCohcSvbDoRUQvKnox0YuLXkL0kqKXEr206GVELyt6OdHLi15B9Iqi/yT6z6JXEv0X0SuL/qvoVUT/TfSqolcTvbroNUSvKXot0WuLXkf0uqLXE72+6A1E/130hqI3Er2x6E1Ebyp6M9Gbi95C9JaitxK9tehtRG8rejvR24veQfSOoncSvbPoXUTvKno30buL3kP0nqL3Er236H1E7yt6P9H7iz5A9IGiDxJ9sOhDRB8q+jDRh4s+QvSRoo8SfbToY0QfK/o40ceLPkH0iaJPEn2y6FNEnyr6NNGniz5D9JmizxJ9tuhzRJ8r+jzR54u+QPSFov8h+p+iLxJ9sehLRF8q+jLRl4u+QvS/RF8p+irRV4u+RvS1oq8Tfb3oG0TfKPom0TeLvkX0raJvE3276DtE/1v0naLvEn236HtE3yv6PtH3i35A9IOiHxL9sOhHRP9H9KOiHxP9uOgnRD8p+inRT4t+RvSzop8T/bzoF0S/KPol0S+LfkX0q6JfE/266DdEvyn6LdFvi35H9Lui3xP9vugPRH8o+iPRH4v+RPSnoj8T/bnoL0R/Kfor0V+L/kb0t6K/E/296B9E/yj6J9E/K/2/v/npoocQPVj0kKKHEj206GFEDyt6ONHDix5B9IiiRxI9suhRRI8qejTRo4v+jegxRI8peizRY4seR/S4oscTPb7oCURPKHoi0ROLnkT0pKInEz256ClETyl6KtFTi/6t6GlE/070tKJ/L3o60dOL/oPoGUTPKHom0TOLnkX0rKJnEz276DlEzyl6LtFzi55H9Lyi5xM9v+gFRP9R9IKiFxK9sOhFRC8qejHRi4teQvSSopcSvbToZUQvK3o50cuLXkH0iqL/JPrPolcS/RfRK4v+q+hVRP9N9KqiVxO9uug1RK8pei3Ra4teR/S6otcTvb7oDUT/XfSGojcSvbHoTURvKnoz0ZuL3kL0lqK3Er216G1Ebyt6O9Hbi95B9I6idxK9s+hdRO8qejfRu4veQ/SeovcSvbfofUTvK3o/0fuLPkD0gaIPEn2w6ENEHyr6MNGHiz5C9JGijxJ9tOhjRB8r+jjRx4s+QfSJok8SfbLoU0SfKvo00aeLPkP0maLPEn226HNEnyv6PNHni75A9IWi/yH6n6IvEn2x6EtEXyr6MtGXi75C9L9EXyn6KtFXi75G9LWirxN9vegbRN8o+ibRN4u+RfStom8TfbvoO0T/W/Sdou8Sfbfoe0TfK/o+0feLfkD0g6IfEv2w6EdE/0f0o6IfE/246CdEPyn6KdFPi35G9LOinxP9vOgXRL8o+iXRL4t+RfSrol8T/broN0S/Kfot0W+Lfkf0u6LfE/2+6A9Efyj6I9Efi/5E9KeiPxP9uegvRH8p+ivRX4v+RvS3or8T/b3oH0T/KPon0T9rYND/AOaSEScAAHicY2BiAAKmPSy+QEqUgYFRUURcTFzMyNzM3MxEXU1dTYmdjZ2NccK/K5oaLm6L3Fw0NOEMZoVAFD6IAQD4PA9iAAAAeJxjYGRgYADirq+zjOP5bb4ycLNfAIowXCttkUWmmfaw+AIpDgYmEA8ANPUJwQAAeJxjYGRgYL/AAATMCiCSaQ8DIwMqYAIAK/QBvQAAAAADIAAAAAAAAAAoAAB4nGNgZGBgYGIQA2IGMIuBgQsIGRj+g/kMAArUATEAAHicjY69TsMwFIWP+4doJYSKhMTmoUJIqOnPWIm1ZWDq0IEtTZw2VRpHjlu1D8A7MPMczAw8DM/AifFEl9qS9d1zzr3XAK7xBYHqCHTdW50aLlj9cZ1057lBfvTcRAdPnlvUnz23mXj13MEN3jhBNC6p9PDuuYYrfHquU//23CD/eG7iVnQ9t9ATD57bWIgXzx3ciw+rDrZfqmhnUnvsx2kZzdVql4Xm1DhVFsqUqc7lKBiemjOVKxNaFcvlUZb71djaRCZGb+VU51ZlmZaF0RsV2WBtbTEZDBKvB5HewkLhwLePkhRhB4OU9ZFKTCqpzems6GQI6Z7TcU5mQceQUmjkkBghwPCszhmd3HWHLh+ze8mEpLvnT8dULRLWCTMaW9LUbanSGa+mUjhv47ZY7l67rgITDHiTf/mAKU76BTuXfk8AAHicY2BigAARBuyAiZGJkZmBJSWzOJmBAQALQwHHAAAA) format("woff");
}

:root {
    --border-color: #eee;
    --green: #3BB77E;
    --green-dark: #26714e;
    --bg-gray: #f8f9fa;
    --bg-green: radial-gradient(#bfffcd, #43dd66);
    --bg-rising-star: radial-gradient(#fff7f1, #f58838);
    --bg-super-star: radial-gradient(#fffde1, #ffdc6e);
    --bg-silver: radial-gradient(#ffffff, #bababa);
    --bg-gold: radial-gradient(#fff0c1, #dba44d);
    --bg-diamand: radial-gradient(#e3f1fd, #6cafea);
    --bg-royal-blue-diamand: radial-gradient(#9bbadd, #2986de);
    --bg-royal-diamand: radial-gradient(#ffda90, #c16432);
    --bg-crown: radial-gradient(#ffe4a4, #ff5e00);
    --bg-crown-ambassador: radial-gradient(#cf7540, #b2201a);
    --transition: all 0.4s;
}

/* common 1 */
.bg-green {
    background-image: radial-gradient(#bfffcd, #43dd66);
}

.bg-rising-star {
    background-image: var(--bg-rising-star);
}

.bg-super-star {
    background-image: var(--bg-super-star);
}

.bg-silver {
    background-image: var(--bg-silver);
}

.bg-gold {
    background-image: var(--bg-gold);
}

.bg-diamand {
    background-image: var(--bg-diamand);
}

.bg-royal-blue-diamand {
    background-image: var(--bg-royal-blue-diamand);
}

.bg-royal-diamand {
    background-image: var(--bg-royal-diamand);
}

.bg-crown {
    background-image: var(--bg-crown);
}
.bg-crown-ambassador {
    background-image: var(--bg-crown-ambassador);
}

a {
    color: var(--dark);
    text-decoration: none;
    transition: all 0.4s;
}

a:hover {
    text-decoration: none;
}

p {
    line-height: 30px;
}

.container {
    max-width: 1320px !important;
    width: 100% !important;
}

button:focus,
a:focus {
    outline: none;
}

.bg--theme--green {
    background-color: var(--green);
}

.bg--theme--blue {
    background-color: var(--green);
}

.text--green {
    color: var(--green) !important;
}

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

.modal--minwidth {
    overflow: hidden !important;

}

.modal--minwidth .modal-dialog {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/* Firefox 3*/
input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

body .bg-primary {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

/* .btn-primary, .bg-primary {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}
.btn-primary:hover {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
} */
button.swal2-confirm {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

a.text--blue {
    color: var(--green);
}

a.text--blue:hover {
    color: var(--green);
}

.dataTables_wrapper>.row:nth-child(2) .col-sm-12 {
    overflow-x: auto;
}

/* width */
.dataTables_wrapper>.row:nth-child(2) .col-sm-12::-webkit-scrollbar {
    height: 8px;
}

.modal--minwidth .modal-dialog::-webkit-scrollbar {
    width: 8px;
}

/* Track */
.dataTables_wrapper>.row:nth-child(2) .col-sm-12::-webkit-scrollbar-track,
.modal--minwidth .modal-dialog::-webkit-scrollbar-track {
    background: #f5f5f5;
}

/* Handle */
.dataTables_wrapper>.row:nth-child(2) .col-sm-12::-webkit-scrollbar-thumb,
.modal--minwidth .modal-dialog::-webkit-scrollbar-thumb {
    background: var(--green);
    border-radius: 10px;
}

/* Handle on hover */
.dataTables_wrapper>.row:nth-child(2) .col-sm-12::-webkit-scrollbar-thumb:hover,
.modal--minwidth .modal-dialog::-webkit-scrollbar-thumb:hover {
    background: var(--green);
}

.sidebar-light-primary .nav-sidebar>.nav-item>.nav-link.active {
    background-color: var(--green);
}

.scroll--vertical::-webkit-scrollbar {
    width: 8px;
}

.scroll--vertical::-webkit-scrollbar-track {
    background: #f5f5f5;
}

.scroll--vertical::-webkit-scrollbar-thumb {
    background: var(--green);
    border-radius: 10px;
}

.scroll--vertical::-webkit-scrollbar-thumb:hover {
    background: var(--green);
}

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
}

.alert-info {
    color: #0c5460;
    background-color: #d1ecf1;
    border-color: #bee5eb;
}

.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-primary {
    color: #004085;
    background-color: #cce5ff;
    border-color: #b8daff;
}

.dataTables_wrapper .pagination {
    flex-wrap: wrap !important;
}

.btn--blue {
    background-color: var(--green);
    color: var(--white) !important;
    padding: 12px 25px;
    border-radius: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.4s;
    text-decoration: none;
    position: relative !important;
    z-index: 0;
    overflow: hidden;
    text-decoration: none !important;
}

.btn--blue::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--green-dark);
    transform: scaleX(0);
    transition: var(--transition);
    z-index: -1;
}

.btn--blue:hover::before {
    transform: scaleX(1);
}

.nav-pills .nav-link:not(.active):hover {
    color: var(--green);
}

.btn-primary.form-control {
    color: var(--white);
}

.card-header .card-title>i:first-child {
    color: var(--green);
}

.input-group-text {
    background-color: var(--green);
    border: 1px solid var(--green);
    color: var(--white);
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    background-color: var(--green-light) !important;
    border: 1px solid transparent !important;
    height: auto !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 7px !important;
}

/* Common end */


/* admin blade css */
.err_info {
    position: relative;
    display: none;
    margin-top: 5px;
    color: red;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
}

.user_ok {
    color: green;
    font-size: 16px;
}

.user_danger {
    color: red;
    font-size: 16px;
}

.err_log {
    font-family: "Noto", sans-serif;
    display: none;
}

.otp_resend_btn {
    color: #337ab7;
    text-decoration: underline;
    cursor: pointer;
}

.loading {
    margin: 0px;
    background-position: center center;
    border: 1px dotted #000;
    z-index: 16000000;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    padding: 0px;
    text-align: center;
    background-color: #FFF;
    font-size: 14px;
    font-weight: 600;
    color: #990000;
    vertical-align: middle;
    filter: alpha(opacity=10);
    opacity: 0.7;
    height: 100%;
    display: none;
}

.loading span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* width: 50px;
        height: 50px;
        border: 3px solid #000;
        border-radius: 50%;
        border-right-color: rgba(255, 255, 255, 0.7);
        animation: spinner-anim 0.8s linear infinite; */
    width: 45px;
    height: 45px;
    display: inline-block;
    padding: 0px;
    border-radius: 100%;
    border: 5px solid;
    border-top-color: var(--green);
    border-bottom-color: var(--green);
    border-left-color: var(--green);
    border-right-color: var(--green);
    -webkit-animation: loader4 1s ease-in-out infinite;
    animation: loader4 1s ease-in-out infinite;
}

@keyframes loader4 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes loader4 {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.card-input-element+.card {
    color: var(--primary);
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 2px solid transparent;
    border-radius: 4px;
}

.card-input-element+.card:hover {
    cursor: pointer;
}

.card-input-element:checked+.card {
    color: #2962ff;
    -webkit-transition: border .3s;
    -o-transition: border .3s;
    transition: border .3s;
}

.card-input-element:checked+.card::after {
    content: '\e5ca';
    color: #2962ff;
    font-family: 'Material Icons';
    font-size: 24px;
    -webkit-animation-name: fadeInCheckbox;
    animation-name: fadeInCheckbox;
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    right: 10px;
    top: 0px;
}

@-webkit-keyframes fadeInCheckbox {
    from {
        opacity: 0;
        -webkit-transform: rotateZ(-20deg);
    }

    to {
        opacity: 1;
        -webkit-transform: rotateZ(0deg);
    }
}

@keyframes fadeInCheckbox {
    from {
        opacity: 0;
        transform: rotateZ(-20deg);
    }

    to {
        opacity: 1;
        transform: rotateZ(0deg);
    }
}

.dash-widget-icon {
    position: relative;
    top: 0;
    transition: top ease 0.3s;
}

.dicon:hover .dash-widget-icon {
    top: -20px;
}

.dicon:hover {
    transition: transform .2s;
    transform: scale(1.05);
}

.dashboard_list li h3 {
    margin-top: -4px;
}

.dashboard_list li:hover {
    background: #e2f8ff;
}

/* news marquee here */
.news--wrapper {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 400px;
}

.news--box {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
}

.news--scroll {
    position: absolute;
    width: 100%;
    padding-inline: 5px;
    top: 400px;
    padding-bottom: 400px;
}

.news--scroll>ul {
    padding: 0px;
    list-style: none;
    border-left: 2px solid #f4f6f9;
}

.news--scroll>ul>li {
    padding: 15px;
}

.news--scroll>ul>li .news--item {
    position: relative;
}

.news--scroll>ul>li:nth-child(odd) .news--item {
    background-color: hsl(216, 29%, 97%);
    padding: 15px;
}

.news--scroll>ul>li .news--item::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--green);
    border-radius: 50%;
    border: 4px solid var(--white);
}

.news--scroll>ul>li:nth-child(even) .news--item {
    background-color: #c1ffcf;
    padding: 15px;
}

.news--item {
    border-bottom: 1px solid var(--green);
    padding: 15px;
}

.news--item ul {
    list-style: none;
    padding: 0px;
}

.news--item ul>li {
    display: flex;
    gap: 10px;
}

.news--item ul>li>div:nth-child(1) {
    width: 40px;
}

.news--item ul>li>div:nth-child(2) {
    flex-grow: 1;
}

.news--item ul>li>div:nth-child(2) .badge {
    font-size: 14px;
    padding: 6px 10px !important;
}

.news--item .news-date {
    font-size: 16px;
    position: relative;
}

/*  */
.news--item .achiver-box>img {
    width: 40px;
    margin-right: 5px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
}

.news--item ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* news marquee end */
.our--achivers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.our--achivers .achiver--item {
    border: 1px solid #00000020;
    border-radius: 5px;
    text-align: center;
    padding: 30px;
}

.our--achivers .achiver--item .thumbnuil--pic {
    text-align: center;

}

.our--achivers .achiver--item .thumbnuil--pic img {
    width: 90px;
    outline: 2px dashed #999;
    border-radius: 50%;
    outline-offset: 5px;
    animation: rotateImg 4s linear 0s infinite forwards;
}

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

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

.our--achivers .achiver--item h3 {
    font-size: clamp(22px, 2vw, 26px);
    margin-block: 20px;
}

.our--achivers .achiver--item h3 span {
    color: var(--green);
}

.achiver--item .btn {
    background-color: var(--green) !important;
}

.achiver--item .btn:hover {
    background-color: var(--green) !important;
}

#menu--hemburger {
    background-color: var(--white);
    color: var(--green);
    font-size: 18px;
    padding: 8px 10px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.ass--current-status .form-group {
    display: flex;
    gap: 10px;
}

.ass--current-status .form-group label {
    width: 35%;
    min-width: max-content;
}

.ass--current-status .form-group>div {
    flex-grow: 1;
}

.accordian .accordian--item {
    background-color: var(--bg-gray);
    border-radius: 5px;
    margin-bottom: 15px;
}

.accordian .accordian--item .accordian--title {
    padding: 12px 15px;
    background-color: var(--green);
    border-radius: 5px;
    font-size: 18px;
    color: var(--white);
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 0px;
    cursor: pointer;
    transition: var(--transition);
}

.accordian .accordian--item .accordian--title i {
    transition: var(--transition);
}

.accordian .accordian--item .accordian--title.active--item i {
    transform: rotate(180deg);
}

.accordian .accordian--item .accordian--title.active--item {
    background-color: var(--green-dark);
}

.accordian .accordian--item .accordian--content {
    padding: 15px;
}

/* admin blade end */
.card--3 {
    border-radius: 15px !important;
    box-shadow: 0 0 15px rgba(8, 21, 66, 0.08) !important;
    border-bottom: 5px solid var(--green) !important;
    transition: all 0.4s;
    height: 100%;
    margin-bottom: 0px !important;
}

.card--3:hover {
    transform: translateY(-10px);
}

.card--3.card--bg--blue {
    border-bottom: 5px solid var(--green) !important;
}

.card--3 .card-body {
    padding: clamp(15px, 2.2vw, 30px) clamp(20px, 2.2vw, 35px);
}

.card--3.card--bg--green .static-top-widget .align-self-center {
    background-color: rgb(139 189 63 / 15%);
}

.card--3.card--bg--green:hover .static-top-widget .align-self-center {
    background-color: var(--green);
}

.card--3.card--bg--blue .static-top-widget .align-self-center {
    background-color: rgb(45 185 231 / 15%);
}

.card--3.card--bg--blue:hover .static-top-widget .align-self-center {
    background-color: var(--green);
}

.card--3 .static-top-widget .align-self-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    margin-left: 16px;
    transition: all 0.5s;
}

.card--3.card--bg--green .static-top-widget i {
    color: var(--green);

}

.card--3.card--bg--blue .static-top-widget i {
    color: var(--green);
}

.card--3 .static-top-widget .align-self-center i {
    transition: all 0.4s;
}

.card--3:hover .static-top-widget .align-self-center i {
    color: var(--white);
}

.card--3 .badge {
    background-color: rgb(139 189 63 / 15%);
    font-size: clamp(14px, 1.2vw, 20px);
    vertical-align: bottom;
}

.card--3.card--bg--blue .badge {
    background-color: rgb(45 185 231 / 15%);
}

.card--3 .media .media-body>span {
    color: var(--dark);
    font-size: clamp(16px, 1.3vw, 18px);
}

.card--3 .media .media-body>h4 {
    font-size: clamp(18px, 2vw, 26px) !important;
}

.card--3 .badge svg {
    width: 16x;
    height: 16px;
    vertical-align: bottom;
    margin-right: 8px;
    padding-top: 0;
    color: var(--green);
}

.card--3.card--bg--blue .badge svg {
    color: var(--green);
}

.card--3 .cd--header {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    align-items: center;
    margin-bottom: 10px;
}

.card--3 .cd--header>.align-self-center {
    background-color: rgb(139 189 63 / 15%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: 100%;
    margin-left: 16px;
    transition: all 0.5s;
}

.card--3 .cd--header>span {
    color: var(--dark);
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.2;
}

.card--3 .cd--header>.align-self-center i {
    transition: all 0.4s;
    color: var(--green);
    font-size: 20px;
}

.card--3.card--bg--blue .cd--header>.align-self-center {
    background-color: rgb(45 185 231 / 15%);
}

.card--3.card--bg--blue .cd--header>.align-self-center i {
    color: var(--green);
}

.card--3:hover .cd--header>.align-self-center {
    background-color: var(--green);
}

.card--3:hover .cd--header>.align-self-center i {
    color: var(--white);
}

.card--3.card--bg--blue:hover .cd--header>.align-self-center {
    background-color: var(--green);
}

.card--3.card--bg--blue:hover .cd--header>.align-self-center i {
    color: var(--white);
}

.falsouts--box .flex-wrap h5 {
    font-size: clamp(18px, 1.3vw, 20px);
}

.falsouts--box .nav h4 {
    font-size: clamp(20px, 2vw, 24px);
}

.alert--bg--animation {
    animation: fadebg 0.8s linear infinite alternate;
    color: var(--white);
}

@keyframes fadebg {
    0% {
        background-color: #dc3545;
    }

    100% {
        background-color: #ffcc00;
    }

}

/* header */
.main-sidebar {
    border-right: 1px solid var(--border-color);
    overflow-x: hidden;
}

.main-sidebar .brand-link {
    padding-block: 7px;
}

.brand-link .brand-image {
    float: none !important;
    width: 90px;
    max-height: initial;
    transition: all 0.4s;
    margin: 0px;
}

.sidebar-mini.sidebar-collapse .brand-link .brand-image {
    width: 55px;
}

.user--dropdown>a {
    padding: 0px 5px;
    background-color: transparent !important;
    border: none;
    transform: translateY(4px);
}

.user--dropdown .user-img img {
    border: 2px solid var(--green);
}

.user--dropdown>a::after {
    display: none;
}

.user--dropdown .user-header {
    display: flex;
    padding: 5px 15px;
    gap: 10px;
    background-color: var(--green);
    color: var(--white);
}

.user--dropdown .user-header>.avatar {
    width: 35px;
}

.user--dropdown .user-header>.avatar img {
    width: 100%;
}

.user--dropdown .dropdown-menu {
    min-width: 15rem;
    padding-top: 0px;
    padding-bottom: 0px;
    overflow: hidden;
}

.user--dropdown .dropdown-menu>* {
    border-bottom: 1px solid var(--green);
    padding-block: 10px;
}

.user--dropdown .user-header .user-text h6 {
    margin-bottom: 0px;
}

.wallet--dropdown .dropdown-menu>div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    white-space: nowrap;
}

.wallet--dropdown .dropdown-menu>div .fa-wallet {
    color: var(--green);
}

.wallet--dropdown .dropdown-menu>div>span:first-child {
    color: #797979;
}

.wallet--dropdown .dropdown-menu>div>span:last-child {
    color: var(--green);
    font-weight: 600;
}

.wallet-img {
    width: 31px;
    height: 31px;
    background-color: var(--bg-gray);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wallet_img {
    animation: jump-shaking 1.83s infinite;
}

@keyframes jump-shaking {
    0% {
        transform: translateX(0) rotate(0)
    }

    35% {
        transform: translateY(0) rotate(0)
    }

    85% {
        transform: translateY(0) rotate(0)
    }

    89% {
        transform: translateY(-2px) rotate(-17deg)
    }

    93% {
        transform: translateY(-3px) rotate(17deg)
    }

    98% {
        transform: translateY(-4px) rotate(-17deg)
    }

    100% {
        transform: translateY(0) rotate(0)
    }
}

.marquee--wrapper {
    border-radius: 5px;
    background-color: var(--green);
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 auto;
}

.marquee {
    display: inline-block;
    padding-left: 100%;
    font-size: 2rem;
    animation: marquee 20s linear infinite;
}

.marquee a {
    display: inline-block;
    padding-right: 100%;
    color: var(--white);
    font-size: 18px;
    padding-block: 10px;
}

.marquee:hover {
    animation-play-state: paused;
}

.marquee--wrapper .kyc--marquee--btn {
    position: absolute;
    left: 0;
    top: auto;
    z-index: 1;
    background-color: var(--green-dark);
    color: var(--white);
    padding-inline: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

/* header end */

/* header new here */
.header_area {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    transition: background 0.4s, all 0.3s linear;
    position: sticky;
    top: 0;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
}

.header_area .main_menu {
    background: #ffffff
}

.header_area .navbar {
    padding: 0px;
    border: 0px;
    border-radius: 0px;
    border-top: 1px solid rgba(221, 221, 221, 0.38)
}

.header_area .navbar .right_nav .nav-item {
    margin: 0 !important
}

.header_area .navbar .icons {
    font-size: 16px;
    line-height: 80px;
    display: inline-block;
    color: #4a4a4a;
    margin-left: 20px;
    text-align: center;
    transition: all 300ms linear 0s
}

.header_area .navbar .icons:hover {
    color: #71cd14
}

.right--navbar {
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

.right--navbar>ul {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

.right--navbar>ul>li>a {
    transition: all 0.4s;
}

.right--navbar>ul>li>a:hover {
    color: var(--green) !important;
}

.right--navbar .user--dropdown .dropdown-menu {
    left: auto !important;
    right: 0px !important;
    top: 49px !important;
    transform: none !important;
}

.right--navbar .user--dropdown>a {
    transform: none;
}

.cart--sidebar {
    position: relative;
}

.cart--sidebar .cart--badge {
    position: absolute;
    right: -8px;
    top: -10px;
    color: var(--white);
    border-radius: 50%;
    font-size: 10px;
    min-width: 18px;
    aspect-ratio: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    line-height: 0;
}

.nav-sidebar .nav-treeview>.nav-item>.nav-link>.fa-circle.fas {
    color: var(--green);
}

.search--header {
    display: none;
}

.search--header .input-group {
    padding-bottom: 15px;
    margin-bottom: 0px !important;
}

.search--header .input-group>input {
    min-height: 45px;
    border-radius: 30px 0 0 30px;
    padding-inline: 20px;
}

.search--header .input-group>input:focus {
    box-shadow: none;
    border-color: var(--green);
}

/* cart popup */
.box-popup-cart {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    z-index: 12346;
    visibility: hidden;
}

.box-popup-cart .box-cart-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: none;
}

.box-popup-cart .box-cart-wrapper {
    position: absolute;
    top: 0px;
    right: -100%;
    max-width: 460px;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 25px;
    background-color: #fff;
    -webkit-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
    overflow-x: hidden;
    overflow-y: auto;
}

.box-popup-cart .box-cart-wrapper.active {
    right: 0px;
}

.box-popup-cart .btn-close-popup {
    position: absolute;
    top: 25px;
    right: 25px;
}

.box-popup-cart .box-info-size-color-product>.box-size {
    margin-bottom: 0px;
}

/* cart popup */
@media (max-width: 992px) {
    .header_area .navbar .nav {
        float: left
    }
}

.header_area .navbar .nav .nav-item {
    margin-right: 45px
}

.header_area .navbar .nav .nav-item .nav-link {
    font: 400 15px/80px "poppins", sans-serif;
    text-transform: uppercase;
    color: #2a2a2a;
    padding: 0px;
    display: inline-block
}

.header_area .navbar .nav .nav-item .nav-link:after {
    display: none
}

.header_area .navbar .nav .nav-item:hover .nav-link,
.header_area .navbar .nav .nav-item.active .nav-link {
    color: var(--green);
}

.header_area .navbar .nav .nav-item.submenu {
    position: relative
}

.header_area .navbar .nav .nav-item.submenu ul {
    border: none;
    padding: 0px;
    border-radius: 0px;
    box-shadow: none;
    margin: 0px;
    background: #fff
}

@media (min-width: 992px) {
    .header_area .navbar .nav .nav-item.submenu ul {
        position: absolute;
        top: 120%;
        left: 0px;
        min-width: 200px;
        text-align: left;
        opacity: 0;
        transition: all 300ms ease-in;
        visibility: hidden;
        display: block;
        border: none;
        padding: 0px;
        border-radius: 0px
    }
}

.header_area .navbar .nav .nav-item.submenu ul:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #eeeeee transparent transparent transparent;
    position: absolute;
    right: 24px;
    top: 45px;
    z-index: 3;
    opacity: 0;
    transition: all 400ms linear
}

.header_area .navbar .nav .nav-item.submenu ul .nav-item {
    display: block;
    float: none;
    margin-right: 0px;
    border-bottom: 1px solid #ededed;
    margin-left: 0px;
    transition: all 0.4s linear
}

.header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {
    line-height: 45px;
    color: #2a2a2a;
    padding: 0px 30px;
    transition: all 150ms linear;
    display: block;
    margin-right: 0px
}

.header_area .navbar .nav .nav-item.submenu ul .nav-item:last-child {
    border-bottom: none
}

.header_area .navbar .nav .nav-item.submenu ul .nav-item:hover .nav-link {
    background: var(--green);
    color: #fff
}

@media (min-width: 992px) {
    .header_area .navbar .nav .nav-item.submenu:hover ul {
        visibility: visible;
        opacity: 1;
        top: 100%
    }
}

.header_area .navbar .nav .nav-item.submenu:hover ul .nav-item {
    margin-top: 0px
}

.header_area .navbar .nav .nav-item:last-child {
    margin-right: 0px
}

.header_area .navbar .nav.navbar-nav.navbar-right li {
    margin-left: 25px;
    margin-right: 0px
}

.header_area .navbar .nav.navbar-nav.navbar-right li:first-child {
    margin-left: 35px
}

.header_area .navbar-light .navbar-brand {
    padding-block: 10px;
}

.header_area .navbar-light .navbar-brand img {
    width: 150px;
    transition: all 0.5s;
}

.header_area.active--header .navbar-light .navbar-brand img {
    width: 120px;
}

@media (max-width: 992px) {
    .header_area .navbar .nav.navbar-nav.navbar-right {
        -ms-flex-direction: row;
        flex-direction: row;
        margin-bottom: 20px
    }

    .header_area .navbar .nav.navbar-nav.navbar-right .icons {
        background: #e4e4e4;
        margin-right: 2px;
        line-height: 50px;
        min-width: 50px;
        min-height: 50px
    }
}

.header_area .navbar .search {
    font-size: 14px;
    line-height: 80px;
    display: inline-block;
    color: #2a2a2a
}

.header_area .navbar .search i {
    font-weight: 600
}

.header_area .navbar .cart {
    color: #2a2a2a;
    font-size: 14px;
    line-height: 80px
}

.header_area .navbar .cart i {
    font-weight: 600
}

.header_area.navbar_fixed .main_menu {
    position: fixed;
    width: 100%;
    top: -70px;
    left: 0;
    right: 0;
    transform: translateY(70px);
    transition: transform 500ms ease, background 500ms ease;
    -webkit-transition: transform 500ms ease, background 500ms ease;
    box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1)
}

.header_area.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link {
    line-height: 70px
}

.top_menu {
    background: #f6f6f6;
    height: 40px;
    line-height: 27px;
}

.top_menu .float-left {
    padding: 7px 0
}

.top_menu .float-left p {
    display: inline-block;
    line-height: 15px;
    color: #4a4a4a;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    margin: 0px;
    text-transform: uppercase;
    border-right: 1px solid #797979;
    padding: 0px 19px
}

.top_menu .float-left p a {
    color: #4a4a4a;
}

.top_menu .float-left p a:hover {
    color: var(--green);
}

.top_menu .float-left p:last-child {
    border-right: 0px
}

.top_menu .right_side {
    margin-bottom: 0px;
    padding: 7px 0
}

.top_menu .right_side li {
    display: inline-block
}

.top_menu .right_side li:last-child a {
    padding-right: 15px;
    border-right: 0px
}

.top_menu .right_side li a {
    font-size: 14px;
    color: #4a4a4a;
    display: inline-block;
    border-right: 1px solid #797979;
    transition: all 300ms linear 0s;
    text-transform: uppercase;
    padding: 0px 19px
}

.top_menu .right_side li:hover a {
    color: #71cd14
}

.pull-right {
    float: right;
}

/* header new */

/* recent income  */
.recent--income--card {
    border-radius: 5px;
    padding: 15px;
    border: 1px solid #9999;
}

.recent--income--card .total-income {
    border-bottom: 1px solid #9999;
    padding-bottom: 10px;
}

.recent--income--card .total-income h3 {
    font-size: 18px;
}

.recent--income--card .total-income .total--income--price .imcome--wrapper {
    font-size: clamp(18px, 2vw, 30px);
    font-weight: 600;
    color: var(--green);
}

:is(.recent--income--card) :is(.matching--income, .direct--income) h3 {
    font-size: 17px;
    background-color: var(--green);
    padding: 7px;
    color: var(--white);
    border-radius: 5px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

:is(.recent--income--card) :is(.matching--income, .direct--income) .macthing--income--wrapper {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    flex-wrap: wrap;
}

:is(.recent--income--card) :is(.matching--income, .direct--income) .incomes,
:is(.recent--income--card) :is(.matching--income, .direct--income) .falsouts {
    color: var(--green);
}

:is(.recent--income--card) :is(.matching--income, .direct--income) .incomes>span,
:is(.recent--income--card) :is(.matching--income, .direct--income) .falsouts>span {
    color: #000;
}

.card--visiter {
    display: none;
}

/* recent income end */
/* matching income */
.matching--inncome--wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(25px, 5vw, 80px);
}

.matching--inncome--wrapper .matching--income--item:nth-child(odd) {
    color: var(--green);
}

.matching--inncome--wrapper .matching--income--item:nth-child(even) {
    color: var(--green);
}

.matching--inncome--wrapper .matching--income--item {
    border: 3px solid currentColor;
    border-radius: 15px;
    padding: 27px;
    position: relative;
}

.matching--inncome--wrapper .matching--income--item * {
    transition: all 0.2s;
}

.matching--inncome--wrapper .matching--income--item .matching--income--inner {
    background-color: #f4f6f9;
    padding: 12px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
    color: currentColor;
}

.matching--inncome--wrapper .matching--income--item .matching--income--inner span.fas {
    font-size: 25px;
    width: 50px;
    height: 50px;
    border: 3px solid var(--white);
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    color: var(--white);
    transition: all 0.4s;
}

.matching--inncome--wrapper .matching--income--item:hover .matching--income--inner span.fas {
    transform: scale(1);
    background-color: var(--white);
    color: var(--green);
}

.matching--inncome--wrapper .matching--income--item:nth-child(odd):hover .matching--income--inner span.fas {
    color: var(--green);
}

.matching--inncome--wrapper .matching--income--item:nth-child(odd) .matching--income--inner span.fas {
    color: var(--white);
}

.matching--inncome--wrapper .matching--income--item .matching--income--inner h3.amount {
    font-weight: 600;
    color: #666;
    margin-block: 10px;
}

.matching--inncome--wrapper .matching--income--item .matching--income--inner h6 {
    text-transform: uppercase;
    font-weight: 600;
}

.matching--inncome--wrapper .matching--income--item::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 50%;
    background-color: currentColor;
    bottom: -5px;
    left: -6px;
    border-radius: 0 0 0 15px;
}

.matching--inncome--wrapper .matching--income--item::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 10px;
    background-color: currentColor;
    bottom: -5px;
    left: -6px;
    border-radius: 0 0 0 15px;
}

.matching--inncome--wrapper .matching--income--item:nth-child(odd) .matching--income--inner {
    color: var(--white);
    background-color: var(--green);

}

.matching--inncome--wrapper .matching--income--item:nth-child(odd) .matching--income--inner h3.amount {
    color: var(--white);
}

.matching--inncome--wrapper .matching--income--item:nth-child(even) .matching--income--inner {
    color: var(--white);
    background-color: var(--green);

}

.matching--inncome--wrapper .matching--income--item:nth-child(even) .matching--income--inner h3.amount {
    color: var(--white);
}

.matching--inncome--wrapper--2 .matching--income--item::after,
.matching--inncome--wrapper--2 .matching--income--item::before {
    display: none;
}

.matching--inncome--wrapper--2 .matching--income--item .matching--income--inner {
    transition: all 0.4s;
    box-shadow: none;
}

.matching--inncome--wrapper--2 .matching--income--item .matching--income--inner:hover {
    transform: scale(1.05);
}

.matching--inncome--wrapper--2 .matching--income--item .matching--income--inner {
    background-image: linear-gradient(45deg, var(--green), var(--green));
}

.matching--inncome--wrapper--2 .matching--income--item:nth-child(odd) .matching--income--inner {
    background-image: linear-gradient(45deg, var(--green), var(--green));
}

/* .total--inncome--wrapper {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: clamp(15px, 1.3vw, 20px);
} */
.total--inncome--wrapper .total--income--item {
    position: relative;
    border-radius: 15px;
    text-align: center;
    color: var(--green);
    overflow: hidden;
}

.total--inncome--wrapper .total--income--item:nth-child(odd) {
    color: var(--green);
}

.total--inncome--wrapper .total--income--item::after {
    content: "";
    position: absolute;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    border: 2px solid #cdcdcd;
    left: 10px;
    top: 10px;
    border-radius: 15px;
}

.total--inncome--wrapper .total--income--item span.fas {
    padding: 40px 15px;
    font-size: 30px;
    color: currentColor;
}

.total--inncome--wrapper .total--income--item .amount--wrapper {
    background-color: var(--green);
    color: var(--white);
    padding: 20px 15px;
    position: relative;
}

.total--inncome--wrapper .total--income--item:nth-child(odd) .amount--wrapper {
    background-color: var(--green);
}

.total--inncome--wrapper .total--income--item .amount--wrapper::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: var(--green);
    top: -16px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

.total--inncome--wrapper .total--income--item:nth-child(odd) .amount--wrapper::before {
    background-color: var(--green);
}

.total--inncome--wrapper .total--income--item .amount--wrapper h3.amount {
    font-weight: 600;
}

.total--inncome--wrapper .total--income--item .amount--wrapper h6 {
    text-transform: uppercase;
    font-weight: 600;
}

.leadership--income .img--wrapper {
    padding: 40px 20px;
}

.leadership--income .img--wrapper img {
    width: 90px !important;
    display: inline-block !important;
}

/* .reward--income--card {
    padding: 30px 5px;
} */
.reward--income--card .img--wrapper img {
    width: 90px !important;
    scale: 1.3;
    display: inline-block !important;
}

.leadership--income .gold--income .amount--wrapper {
    background-image: radial-gradient(#eac347, #c28d3a);
}

.leadership--income .gold--income .amount--wrapper::before {
    background-image: radial-gradient(#eac347, #c28d3a) !important;
}

.leadership--income .total--income--item::after {
    width: calc(100% - 0px);
    height: calc(100% - 0px);
    left: 0px;
    top: 0px;
}

.leadership--income .total--income--item .total--income--inner,
.leadership--income .total--income--item .total--income--inner .amount--wrapper {
    height: 100%;
}

.leadership--income .gold--income::after {
    border: 2px solid #cf9f3e;
}

.leadership--income .silver--income .amount--wrapper {
    background-image: radial-gradient(#c1c0c1, #969594);
}

.leadership--income .silver--income .amount--wrapper::before {
    background-image: radial-gradient(#c1c0c1, #969594) !important;
}

.leadership--income .silver--income::after {
    border: 2px solid #969594;
}

.leadership--income .diamand--income .amount--wrapper {
    background-image: radial-gradient(#accee9, #458bc9);
}

.leadership--income .diamand--income .amount--wrapper::before {
    background-image: radial-gradient(#accee9, #458bc9) !important;
}

.leadership--income .diamand--income::after {
    border: 2px solid #458bc9;
}

.leadership--income .blue--diamand--income .amount--wrapper {
    background-image: var(--bg-royal-blue-diamand);
}

.leadership--income .blue--diamand--income .amount--wrapper::before {
    background-image: var(--bg-royal-blue-diamand) !important;
}

.leadership--income .blue--diamand--income::after {
    border: 2px solid #2589df;
}

.leadership--income .royal--diamand--income .amount--wrapper {
    background-image: radial-gradient(#d2a140, #c16432);
}

.leadership--income .royal--diamand--income .amount--wrapper::before {
    background-image: radial-gradient(#d2a140, #c16432) !important;
}

.leadership--income .royal--diamand--income::after {
    border: 2px solid #c16432;
}

.fs--18 {
    font-size: 18px;
}

/* matching income end here */
.year--drop--down {
    display: inline-flex !important;
    margin-left: auto;
    float: right;
}

/* copy link */
.tooltip--refrel {
    position: relative;
    display: inline-block;
}

.tooltip--refrel .tooltiptext {
    visibility: hidden;
    width: 140px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
}

.tooltip--refrel .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip--refrel:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.refrel--links {
    display: flex;
    gap: 15px;
}

.refrel--links .tooltip--refrel .btn {
    white-space: nowrap;
}

/* copy link end */

/* activate user */
.wallet--ballence {
    padding-block: 15px !important;
    text-transform: uppercase;
}

.wallet--ballence h2 {
    font-size: 1.25rem;
    margin-bottom: 0px;
}

.product--details--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.product--details--grid .product--items img {
    width: 100%;
}

.product--details--grid .product--items {
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
    border-radius: 5px;
    position: relative;
    background-color: #d0f5be;
    padding: 5px;
}

.product--details--grid .product--items .product--data {
    padding: 15px;
}

.product--details--grid .product--items .product--data h3 {
    font-size: clamp(20px, 2.2vw, 32px);
    color: var(--dark);
    font-weight: 600;
    padding-block: 5px;
}

.product--details--grid .product--items .product--data p {
    color: var(--dark);
    font-weight: 500;
    margin-bottom: 5px;
    font-size: clamp(18px, 1.5vw, 22px);
}

.product--details--grid .product--items span.check--badge {
    width: 30px;
    height: 30px;
    display: inline-flex;
    background-color: var(--green);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    color: var(--white);
    font-size: 14px;
    position: absolute;
    right: 10px;
    top: 10px;
    display: none;
}

.product--details--grid .product--items.selected span.check--badge {
    display: inline-flex;
}

.product--details--grid .product--items.selected {
    background-color: var(--green);
}

.product--details--grid .product--items.selected .product--data h3 {
    color: var(--white);
}

.product--details--grid .product--items.selected .product--data p {
    color: var(--white);
}

.err_common,
.form--error {
    color: var(--red);
    display: none;
}

.verified--opt {
    max-width: 270px;
}

.buy--options input[type='radio'],
.purchase--from input[type='radio'] {
    accent-color: var(--green);
    width: 18px;
    height: 18px;
}

.buy--options {
    padding-left: 30px;
}

.buy--options input {
    margin-left: -30px;
}

.buy--options label,
.purchase--from label {
    font-weight: 600;
    font-size: 18px;
}

.buy--options span {
    color: #777;
}

.buy--options a {
    color: var(--dark);
    text-decoration: underline;
}

.other_fr_detail {
    display: none;
}

/* activate user end */

/* data table */
.page-item.active .page-link {
    background-color: var(--green);
    border-color: var(--green);
}

.page-link,
.page-link:hover {
    color: var(--dark);
}

.card--title--import {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.card--title--import::after {
    display: none;
}

/* my team 1*/
.my--team--wrapper {
    outline: 2px solid var(--green);
    outline-offset: 5px;
    border: 10px solid #f5f5f5;
}

.my--team--wrapper table {
    text-align: center;
}

.my--team--wrapper table tr>td:first-child {
    background-color: var(--green);
    color: var(--white);
    cursor: pointer;
}

.my--team--wrapper table tr>td:last-child {
    background-color: var(--green);
    color: var(--white);
    cursor: pointer;
}

.table--team--both .hidemember {
    position: relative;
    display: inline-block;
}

.table--team--both .hidemember::after {
    content: 'xxx-xx';
    background: #f2f2f2;
    position: absolute;
    left: 25px;
    font-size: 19px;
    margin-top: -3px;
}

.table--team--both tr:nth-child(even) .hidemember::after {
    background: var(--white);
}

.table--team--both a.hidemember {
    color: var(--green);
}

.table--team--both a.hidemember:hover {
    color: var(--green);
}

/* my team end */

/* package info */
.package--lists {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.package--lists .package--item>.card {
    overflow: hidden;
    transition: all 0.4s;
}

.package--lists .package--item>.card:hover {
    background-color: #efefef;
}

.package--lists .package--item>.card .card-body {
    padding: 0;
}

.package--lists .package--item>.card .card-body .pricing {
    padding: 20px;
    background-color: var(--green);
    text-align: center;
    color: var(--white);
}

.package--lists .package--item:nth-child(even)>.card .card-body .pricing {
    background-color: var(--green);
}

.package--lists .package--item>.card .card-body .pricing h3 {
    font-weight: 600;
    font-size: clamp(20px, 2.1vw, 42px);
}

.package--lists .package--item>.card .card-body .pricing h6 {
    font-weight: 600;
    font-size: clamp(22px, 2.3vw, 35px);
}

.package--lists .package--item>.card .card-body .daily--incone,
.package--lists .package--item>.card .card-body .daily--re--purchase {
    margin: 20px;
    padding: 10px;
    border: 1px solid var(--green);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.package--lists .package--item:nth-child(even)>.card .card-body .daily--incone,
.package--lists .package--item:nth-child(even)>.card .card-body .daily--re--purchase {
    border: 1px solid var(--green);
}

.package--lists .package--item:nth-child(odd)>.card .card-body .daily--incone span:last-child,
.package--lists .package--item:nth-child(odd)>.card .card-body .daily--re--purchase span:last-child {
    color: var(--green);
    white-space: nowrap;
}

.package--lists .package--item:nth-child(even)>.card .card-body .daily--incone span:last-child,
.package--lists .package--item:nth-child(even)>.card .card-body .daily--re--purchase span:last-child {
    color: var(--green);
    white-space: nowrap;
}

.package--lists .package--item>.card .card-body .upgrade--btn {
    margin: 20px;
    text-align: center;
}

.package--lists .package--item:nth-child(even)>.card .card-body .upgrade--btn .btn {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

.package--lists .package--item:nth-child(even)>.card .card-body .upgrade--btn .btn:hover {
    background-color: var(--green) !important;
    border-color: var(--green) !important;
}

.pd_img img {
    width: 100px;
    border: 1px solid #f5f5f5;
}

.table_height :has(.col-sm-12) :has(table) {
    height: 440px;
    overflow-y: auto;

}

.table_height>div>.row:first-child {
    margin-bottom: 15px !important;
    background-color: #d8f1e5;
    padding: 10px;
}

.table_height .col-sm-12::-webkit-scrollbar {
    width: 8px;
}

.lb--row {
    flex-wrap: nowrap;
}

.lb--row .col-sm-2 {
    min-width: 130px;
    max-width: none;
    width: 0px;
}

.lb--row .col-sm-10 {
    max-width: none;
    flex-basis: initial;
    width: 0px;
    flex-grow: 1;
}

.tb--pop tbody tr td:first-child {
    width: 50%;
}

/* tree 2 */
.genealogy-scroll::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}

.genealogy-scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #e4e4e4;
}

.genealogy-scroll::-webkit-scrollbar-thumb {
    background: var(--green);
    border-radius: 10px;
    transition: 0.5s;
}

.genealogy-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--green);
    transition: 0.5s;
}


/*----------------genealogy-tree 1----------*/
.genealogy-body {
    white-space: nowrap;
    overflow-y: hidden;
    padding: 50px;
    min-height: 500px;
    padding-top: 10px;
    text-align: center;
}

.genealogy-tree {
    display: inline-block;
}

.genealogy-tree ul {
    padding-top: 20px;
    position: relative;
    padding-left: 0px;
    display: flex;
    justify-content: center;
}

.genealogy-tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 20px 5px 0 5px;
}

.genealogy-tree li::before,
.genealogy-tree li::after {
    content: '';
    position: absolute;
    top: 0;
    right: 50%;
    border-top: 2px solid #ccc;
    width: 50%;
    height: 18px;
}

.genealogy-tree li::after {
    right: auto;
    left: 50%;
    border-left: 2px solid #ccc;
}

.genealogy-tree li:only-child::after,
.genealogy-tree li:only-child::before {
    display: none;
}

.genealogy-tree li:only-child {
    padding-top: 0;
}

.genealogy-tree li:first-child::before,
.genealogy-tree li:last-child::after {
    border: 0 none;
}

.genealogy-tree li:last-child::before {
    border-right: 2px solid #ccc;
    border-radius: 0 5px 0 0;
    -webkit-border-radius: 0 5px 0 0;
    -moz-border-radius: 0 5px 0 0;
}

.genealogy-tree li:first-child::after {
    border-radius: 5px 0 0 0;
    -webkit-border-radius: 5px 0 0 0;
    -moz-border-radius: 5px 0 0 0;
}

.genealogy-tree ul ul::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    border-left: 2px solid #ccc;
    width: 0;
    height: 20px;
}

.genealogy-tree li a {
    text-decoration: none;
    color: #666;
    font-family: arial, verdana, tahoma;
    font-size: 11px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.genealogy-tree li a:hover+ul li::after,
.genealogy-tree li a:hover+ul li::before,
.genealogy-tree li a:hover+ul::before,
.genealogy-tree li a:hover+ul ul::before {
    border-color: var(--green);
}

.genealogy-tree li a:hover i {
    outline-color: var(--green);
}

/*--------------memeber-card-design----------*/
.member-view-box {
    padding: 0px 20px;
    text-align: center;
    position: relative;
}

.member-image {
    position: relative;
}

.member-image img {
    width: 50px;
    z-index: 1;
}

.tooltip-inner {
    max-width: 350px !important;
    height: 100%;
    font-size: 12px;
    padding: 5px 10px;
    background-image: radial-gradient(#d7f7de, #fff1db);
    /* background-image: radial-gradient(#d1f5be, #f1f5f8); */
    color: #333;
    border: 1px solid #737373;
    opacity: 1;
    text-align: left;
}

.member-image i {
    font-size: 18px;
    padding: 8px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    background: #ededed;
    outline: 1px solid #c7c7c7;
    outline-offset: 2px;
    color: var(--white);
    line-height: 30px;
    transition: all 0.4s;
    background-size: 45px;
}


/* .tooltip-inner table th, td {
    border: 1px solid #c5c5c5;
    padding: 2px;
  } */
.tooltip-inner table th {
    width: 130px;
}

.tooltip-inner table td {
    width: 85px;
    font-size: 16px;
    font-weight: 500;
}

.member-details h3 {
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.member-details>div {
    margin-top: 1px;
}

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

.bade--gold {
    background-image: url("../img/gold.png") !important;
    color: transparent !important;
}

.bade--silver {
    background-image: url("../img/silver.png") !important;
    color: transparent !important;
}

.bade--diamand {
    background-image: url("../img/diamand.png") !important;
    color: transparent !important;
}

.bade--blue--diamand {
    background-image: url("../img/royal-blue-icon.png") !important;
    color: transparent !important;
}

.bade--royal--diamand {
    background-image: url("../img/royal-diamand.png") !important;
    color: transparent !important;
}

.bade--crown {
    background-image: url("../img/crown.png") !important;
    color: transparent !important;
}

.bade--crown-ambassador {
    background-image: url("../img/crown-ambassador.png") !important;
    color: transparent !important;
}

.bade--green {
    color: green !important;
}

.bade--red {
    color: rgb(219, 8, 8) !important;
}

.bade--rising--star {
    background-image: url("../img/rising-star-icon.png") !important;
    color: transparent !important;
}

.bade--rising--superstar {
    background-image: url("../img/super-star-icon.png") !important;
    color: transparent !important;
}

/* tree */

/* profile css */
.profile--data--wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
}

.profile--data--wrapper .profile--img {
    width: 120px;
    position: relative;
}

.profile--data--wrapper .profile--img img {
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
    outline: 4px solid var(--green);
    outline-offset: 0px;
    aspect-ratio: 1;
}

.profile--data--wrapper .profile--data h3 {
    font-size: 20px;
}

.profile--data--wrapper .profile--data h4 {
    font-size: 16px;
}

.profile--data--wrapper .profile--data a {
    margin-top: 5px;
}

.pf--img--icon {
    position: absolute;
    bottom: -10px;
    width: 40px;
    overflow: hidden;
    left: 70%;
    transform: translateX(-50%);
    background-color: var(--green);
    border-radius: 50%;
    aspect-ratio: 1;
}

.pf--img--icon>i {
    width: 100%;
    height: 100%;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
}

.pf--img--icon>input {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.kyc--img--wrapper,
.kycUpdate--img--wrapper {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.kyc--img--wrapper .kyc--images {
    max-width: 100px;
    border: 5px solid var(--green);
    cursor: pointer;
}

.kycUpdate--img--wrapper .kycUpdate--images {
    width: 150px;
    cursor: pointer;
    margin-top: 10px;
}

.kyc--img--popup--view img {
    width: 100%;
    border: 5px solid var(--green);
}

#kyc--img--view .modal-header .close {
    color: var(--white);
}

.update--kyc--form form {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.update--kyc--form form>.form-group.span--2 {
    width: 100% !important;
    min-width: 100% !important;
}

.update--kyc--form form>.form-group {
    min-width: calc(50% - 12.5px);
    max-width: calc(50% - 12.5px);
    margin-bottom: 0px;
}

.update--kyc--form form>.form-group .err_common {
    margin-top: 5px;

}

#kycUpdate--img--view .modal-header .close {
    color: var(--white) !important;
}

.close {
    opacity: 1;
}

.range--rotate {
    display: flex;
    gap: 15px;
}

.range--rotate .range--wrapper {
    width: 60%;
}

.range--rotate .range--wrapper input {
    width: 100%;
}

.range--rotate label {
    font-weight: 500 !important;
}

.btn--kyc--status {
    gap: 15px;
}

.btn--kyc--status .btn {
    border-radius: 5px !important;
}

.btn--kyc--status .btn.active {
    background-color: var(--green-dark) !important;
    border-color: var(--green-dark) !important;
}

.bd-example {
    padding-left: 0px !important;
}

.reward--card .card {
    overflow: hidden;
    border-radius: 30px 0px 30px 0px;
    transition: all 0.4s;
}

.reward--card .card .card-title {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
}

.reward--card .card .card-body {
    background-image: linear-gradient(45deg, #2db9e7, #8bbd3f);
    color: var(--white);

}

.reward--card .card>img {
    width: 100%;
    outline: 3px solid var(--green);
    outline-offset: -10px;
    border-radius: 30px 0px 0px 0px;
}

.reward--card .card:hover {
    transform: scale(1.05);
    box-shadow: 5px 0px 0px var(--green), -5px 0px 0px var(--green);
}

.reward--card .card:hover img {
    outline-color: var(--green);
}

.reward--card--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.reward--card {
    margin-top: clamp(30px, 3vw, 50px);
}

.card-bg-asso-dash {
    background: #c1ffcf;
    background-image: radial-gradient(#d7f7de, #fff1db);
}

/* registration succsess css  */
.registration--succsess-message {
    min-height: 100vh;
    background-color: #f5f5f5;
    position: relative;
    padding: clamp(30px, 5vw, 80px) 0;
}

.registration--succsess-message .register--succsess--container {
    max-width: 550px;
    margin: 0 auto;
    width: 100%;
    padding: 15px;
}

.registration--succsess-message .register--succsess--container .succsess--card {
    border-radius: 15px;
    background-color: var(--white);
    overflow: hidden;
    box-shadow: 0px 0px 6px rgba(000, 000, 000, 0.1);
}

.registration--succsess-message .register--succsess--container .succsess--card .succsess--card--header {
    background-color: var(--green);
    padding: 40px 15px;
    text-align: center;
    color: var(--white);
    text-transform: uppercase;
}

.registration--succsess-message .register--succsess--container .succsess--card .succsess--card--header h1 {
    font-size: clamp(24px, 2.5vw, 36px);
}

.registration--succsess-message .register--succsess--container .succsess--card .succsess--card--header i {
    width: 70px;
    height: 70px;
    border: 4px solid var(--white);
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    margin-bottom: 10px;
}

.registration--succsess-message .user--name--data {
    padding: 20px;
    text-align: center;
    background-color: aliceblue;
}

.registration--succsess-message .user--name--data h3 {
    font-size: clamp(20px, 2vw, 24px);
    color: var(--green);
}

.registration--succsess-message .user--name--data h3 span {
    color: var(--dark);
}

.registration--succsess-message .login--details--data {
    padding: 20px;
    text-align: center;
}

.registration--succsess-message .login--details--data .title {
    font-size: 20px;
    margin-bottom: 20px;
}

.registration--succsess-message .login--details--data a.btn {
    border-radius: 30px;
    min-height: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px 24px;
    font-size: 16px;
    background-color: var(--green) !important;
    border-color: var(--green) !important;
    position: relative;
    z-index: 0;
    overflow: hidden;

}

.registration--succsess-message .login--details--data a.btn::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--blue);
    transform: scaleX(0);
    transition: all 0.4s;
    z-index: -1;
}

.registration--succsess-message .login--details--data a.btn:hover::before {
    transform: scaleX(1);
}

.new_registration_form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 15px;
}

.new_registration_form .span--2 {
    grid-column: span 2;
}

/* registration--succsess end */

/* tooltip */
.tooltip-inner {
    max-width: 280px;
    text-align: left;
    line-height: 22px;
}

/* leader card */
.leader--card {
    border: 1px solid #00000020;
    border-radius: 5px;
    overflow: hidden;
}

.leader--card .leader--bg {
    background-image: radial-gradient(#eac347, #c28d3a);
    height: 180px;
    position: relative;
}

.leader--slider-2 .leader--card .leader--bg {
    height: 120px;
}

.leader--slider-2 .leader--card .leader--details q {
    font-weight: 400;
    font-size: 16px;
    font-family: 'Assistant', sans-serif;
}

:is(.leader--slider-2 .leader--card .leader--details) :is(q)::before,
:is(.leader--slider-2 .leader--card .leader--details) :is(q)::after {
    color: var(--green);
    font-size: 36px;
    line-height: 0;
    position: relative;
    left: 0;
    top: 10px;
    height: max-content;
    display: inline-block;
}

.leader--slider-2 .owl-stage-outer {
    display: grid;
}

:is(.leader--slider-2 .owl-stage-outer) :is(.owl-item, .item, .leader--card) {
    height: 100%;
}

.leader--card .leader--bg .leader--bade {
    width: 150px;
    aspect-ratio: 1;
    position: absolute;
    right: -50px;
    top: -60px;
    background-color: #fff;
    padding: 10px;
    border-radius: 50%;
}

.leader--card .leader--bg .leader--bade img {
    width: 60px;
    position: relative;
    top: 60px;
    left: 20px;
    border-radius: 50%;
    outline-offset: 4px;
    animation: scaleUser 2s linear alternate infinite;
}

@keyframes scaleUser {
    0% {
        transform: scale(0.7);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.7);
    }
}

.leader--card .leader--details {
    text-align: center;
    padding: 20px;
}

.leader--card .leader--details .leader--img img {
    width: 80px;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: -65px;
    position: relative;
    z-index: 1;
    outline: 2px dashed #b4762b;
    outline-offset: 5px;
}

.leader--card .leader--details h3 {
    margin-top: 20px;
    font-size: clamp(18px, 15vw, 22px);
    color: var(--dark);
}

.leader--card .leader--details h4 {
    font-size: 18px;
    color: #777777;
}

.leader--card.leader--card--silver .leader--bg {
    background-image: radial-gradient(#c1c0c1, #969594);
}

.leader--card.leader--card--silver .leader--details .leader--img img {
    outline: 2px dashed #989897;
}

.leader--card.leader--card--diamond .leader--bg {
    background-image: radial-gradient(#accee9, #458bc9);
}

.leader--card.leader--card--diamond .leader--details .leader--img img {
    outline: 2px dashed #4e91cc;
}

.leader--card.leader--card--blue-diamond .leader--bg {
    background-image: radial-gradient(#9bbadd, #2986de);
}

.leader--card.leader--card--blue-diamond .leader--details .leader--img img {
    outline: 2px dashed #4599e1;
}

.leader--card.leader--card--royal-diamond .leader--bg {
    background-image: radial-gradient(#d2a140, #c16432);
}

.leader--card.leader--card--royal-diamond .leader--details .leader--img img {
    outline: 2px dashed #d7b455;
}

/* leader card end */

.growth--bar .growth--bar--wrapper {
    display: flex;
    gap: 15px;
    height: 400px;
    align-items: flex-end;
    /* gap: clamp(7px, 1vw, 15px); */
    gap: clamp(2px, 1vw, 15px);
}

.growth--bar .growth--bar--wrapper .steps {
    /* width: calc(100%/ 8); */
    width: calc(100%/ 10);
    height: calc(var(--barHeight));
    display: flex;
    flex-direction: column;
}

.growth--bar .growth--bar--wrapper .steps .step--bar {
    background-color: #f4f6f9;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    border: 1px solid #e4e4e4;
    position: relative;
}

.growth--bar .growth--bar--wrapper .steps .step--bar .fa-lock {
    font-size: clamp(16px, 1.8vw, 22px);
    position: absolute;
    top: 10%;
    color: #444;
}

.growth--bar .growth--bar--wrapper .steps.steps--achive .step--bar .fa-lock {
    display: none;
}

.growth--bar .growth--bar--wrapper .steps .step--bar .green-icon {
    display: block;
    width: 40%;
    aspect-ratio: 1;
    background-color: var(--green);
    border-radius: 50%;
}

.opacity-0 {
    opacity: 0;
}

.growth--bar .growth--bar--wrapper .steps img {
    /* width: clamp(20px, 60%, 50px); */
    width: clamp(20px, 60%, 60px);
}

.growth--bar .growth--bar--wrapper .steps .current--position {
    text-align: center;
    padding: 10px 0px;
    font-size: 130%;
}

.growth--bar .growth--bar--wrapper .steps .current--position .fa-circle-check {
    color: var(--green);
}

.growth--bar .growth--bar--wrapper .steps .current--position .fa-arrow-up-right-dots {
    color: var(--white);
    padding: 5px;
    font-size: 60%;
    border-radius: 50%;
    background-color: var(--red);
    box-shadow: 0px 0px 2px 5px #f56876, 0px 0px 3px 10px #ffa2ab;
    animation: growCircle 2s linear infinite alternate;
}

@keyframes growCircle {
    0% {
        box-shadow: 0px 0px 2px 2px #f56876, 0px 0px 2px 2px #ffa2ab;
    }

    50% {
        box-shadow: 0px 0px 2px 5px #f56876, 0px 0px 3px 10px #ffa2ab;
    }

    100% {
        box-shadow: 0px 0px 2px 2px #f56876, 0px 0px 2px 2px #ffa2ab;
    }
}

/* dashboard product slider */
.product--slider--dashboard .owl-dots .owl-dot.active span {
    background-color: var(--green) !important;
}

.product--slider--dashboard .owl-dots {
    margin-top: 5px;
}

.product--slider--dashboard .owl-nav button {
    position: absolute;
    top: calc(50% - 30px);
    transform: translateY(-50%);

}

.product--slider--dashboard .owl-nav>button {
    width: 35px;
    height: 35px;
    background-color: var(--green) !important;
    border-radius: 50% !important;
    color: var(--white) !important;
    font-size: 35px !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    transition: all 0.4s;
}

.product--slider--dashboard .owl-nav>button:hover {
    background-color: var(--green) !important;
}

.product--slider--dashboard .owl-nav>button span {
    line-height: 0;
    transform: translateY(-2px);
}

.product--slider--dashboard .owl-nav>button.owl-prev {
    left: -23px;
}

.product--slider--dashboard .owl-nav>button.owl-next {
    right: -23px;
}

.product--slider--dashboard .product--item {
    box-shadow: 2px 2px 5px #00000033;
    border-radius: 5px;
    transition: all 0.4s;
    position: relative;
}

.product--slider--dashboard .product--item a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--green);
    border-radius: 5px;
    opacity: 0.3;
    transition: all 0.4s;
    transform: scale(0);
}

.product--slider--dashboard .product--item a:hover::before {
    transform: scale(1);
}

.product--slider--dashboard .product--item:hover {
    box-shadow: 2px 2px 10px #00000033;
}

.product--slider--dashboard .product--item img {
    border-radius: 5px;
}

.product--slider--dashboard .owl-stage-outer {
    padding-block: 10px;
}

/* dashboard product slider end a */
.incomes--box .macthing--income--wrapper {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    flex-wrap: wrap;
    gap: 5px;
}

.incomes--box .dates {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

:is(.incomes--box .macthing--income--wrapper) :is(.incomes, .falsouts) {
    color: var(--green);
}

:is(.incomes--box .macthing--income--wrapper) :is(.falsouts) {
    color: red;
}

:is(.incomes--box .macthing--income--wrapper) :is(.incomes, .falsouts)>span {
    color: var(--dark);
}

.incomes--box .magic--amt {
    color: var(--green);
}

.incomes--box {
    border-radius: 15px;
    border-block: 5px solid var(--green) !important;
}

.incomes--box--green {
    border-block: 5px solid var(--green);
}

.incomes--box .widget-user-header {
    background-color: transparent !important;
}

.incomes--box .widget-user-header .rupee--icon {
    background-color: rgb(45 185 231 / 15%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: var(--green);
    font-size: 25px;
}

.incomes--box--green .widget-user-header .rupee--icon {
    background-color: rgb(139 189 63 / 10%);
    color: var(--green);
}

.incomes--box .card-footer ul.nav {
    padding: 15px;
}

.incomes--box .card-footer {
    background-color: transparent;
}

.incomes--box .card-footer ul.nav>li {
    margin-bottom: 15px !important;
    border-radius: 10px;
}

.incomes--box .card-footer ul.nav>li:nth-child(odd) {
    background-color: rgb(45 185 231 / 15%);
    border-bottom: 3px solid var(--green);
}

.incomes--box .card-footer ul.nav>li:nth-child(even) {
    background-color: rgb(139 189 63 / 10%);
    border-bottom: 4px solid var(--green) !important;
}

:is(.incomes--box .macthing--income--wrapper) :is(.incomes) {
    color: var(--dark);
}

.incomes--box .magic--amt {
    color: var(--dark);
}

.falsouts--box {
    overflow: hidden;
    border-radius: 15px;
}

/* tooltip end */

/* profile end here */
/* package info end */

/* data table end */

/* home website */
.hero--banner .owl-carousel .slide--item>a {
    display: block;
}

.hero--banner .owl-carousel .slide--item img {
    width: 100%;
    object-fit: cover;
}

.hero--banner .owl-carousel .slide--item .hero--content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.hero--banner .owl-carousel .slide--item .hero--content h3 {
    font-size: clamp(18px, 3vw, 50px);
    margin-bottom: 30px;
}

.hero--banner .owl-nav>button {
    width: 50px;
    height: 50px;
    background-color: var(--green) !important;
    border-radius: 50% !important;
    color: var(--white) !important;
    font-size: 35px !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    transition: all 0.4s;
    position: absolute;
    top: calc(50%);
    transform: translateY(-50%);

}

.hero--banner .owl-nav>button:hover {
    background-color: var(--green) !important;
}

.hero--banner .owl-nav>button.owl-prev {
    left: 15px;
}

.hero--banner .owl-nav>button.owl-next {
    right: 15px;
}

.hero--banner .owl-dots {
    z-index: 2;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
}

.hero--banner .owl-dots .owl-dot.active span {
    background-color: var(--green) !important;
}

.hero--banner .slide--item {
    position: relative;
}

.hero--banner .slide--item::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(0deg, #00000070 5%, transparent);
}

.hero--banner .owl-theme .owl-dots .owl-dot span {
    /* width: 30px;
    height: 7px;
    border-radius: 5px; */
    width: 8px;
    height: 8px;
    border-radius: 4px;
}

.feture--banner--wrapper .thumbnuil img {
    width: 100%;
    transition: all 0.4s;
}

.feture--banner {
    padding-block: clamp(50px, 6vw, 100px);
}

.bg--gray {
    background-color: #efefef;
}

.feture--banner--wrapper {
    position: relative;
    overflow: hidden;
}

.feture--banner--wrapper .feture--banner--content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: fit-content;
    background-color: var(--white);
    padding: 15px;
    border-radius: 5px;
    max-width: 75%;
    z-index: 2;
}

.feture--banner--wrapper .feture--banner--content h3 {
    font-size: clamp(20px, 2.2vw, 24px);
    text-transform: capitalize;
}

.feture--banner--wrapper .feture--banner--content>a {
    background-color: var(--green);
    color: var(--white);
    padding: 12px 25px;
    border-radius: 30px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.4s;
    text-decoration: none;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.feture--banner--wrapper .feture--banner--content>a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--green-dark);
    transform: scaleX(0);
    transition: var(--transition);
    z-index: -1;
}

.feture--banner--wrapper .feture--banner--content>a:hover::before {
    transform: scaleX(1);
}

.feture--banner--wrapper .thumbnuil {
    position: relative;
}

.feture--banner--wrapper .thumbnuil::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    transition: all 0.4s;
    opacity: 0;
    z-index: 1;
}

.feture--banner--wrapper:hover img {
    transform: scale(1.1);
}

.feture--banner--wrapper:hover .thumbnuil::before {
    opacity: 1;
}

.feture--banner--wrapper .thumbnuil::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all 0.4s;
    z-index: 1;
    border: 2px solid var(--white);
    transform: scale(0);
}

.feture--banner--wrapper:hover .thumbnuil::after {
    transform: scale(0.92);
}

.main--title {
    padding-block: 15px;
}

:is(.main--title) :is(h2, h1) {
    position: relative;
    text-transform: uppercase;
    font-size: clamp(26px, 3vw, 45px);
    font-weight: 400;
    width: max-content;
    margin: 0 auto;
}

:is(.main--title) :is(h2 span, h1 span) {
    font-weight: 600;
    color: var(--green);
}

:is(.main--title) :is(h2, h1)::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    background-color: var(--green);
    border-radius: 5px;
}

:is(.product--slider, .shop--products) .product--item {
    display: flex;
    flex-direction: column;
    border: 1px solid #efefef;
    text-align: center;
    transition: all 0.4s;
}

:is(.product--slider, .shop--products) .product--item .thumbnuil {
    border-bottom: 1px solid #efefef;
}

:is(.product--slider, .shop--products) .product--item .thumbnuil img {
    width: 100%;
}

:is(.product--slider, .shop--products) .product--item .product--content {
    padding: 20px;
    position: relative;
    flex-grow: 1;
}

:is(.product--slider, .shop--products) .product--item .product--content h3 {
    font-size: 20px;
    text-transform: capitalize;
    transition: all 0.4s;
}

:is(.product--slider, .shop--products) .product--item .product--content h3:hover {
    color: var(--green)
}

:is(.product--slider, .shop--products) .product--item .product--content h3 a:hover {
    color: var(--dark);
}

:is(.product--slider, .shop--products) .product--item .product--content .product--price {
    display: flex;
    justify-content: center;
    gap: 15px;
    align-items: center;
}

:is(.product--slider, .shop--products) .product--item .product--content h5 {
    color: var(--green);
    font-weight: 400;
    /*display: none;*/
}

:is(.product--slider, .shop--products) .product--item .product--content .product--price .regular--price {
    color: #999;
    text-decoration: line-through;
    font-size: 18px;
    display: none;
}

.product--slider .owl-carousel {
    margin-top: 40px;
}

.product--slider .owl-nav>button,
.default--slider .owl-nav>button {
    width: 45px;
    height: 45px;
    background-color: var(--green) !important;
    border-radius: 50% !important;
    color: var(--white) !important;
    font-size: 35px !important;
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: calc(50% - 30px);
    transform: translateY(-50%);
    transition: all 0.4s;
}

.product--slider .owl-dots .owl-dot.active span,
.default--slider .owl-dots .owl-dot.active span {
    background-color: var(--green) !important;
}

.product--slider .owl-dots,
.default--slider .owl-dots {
    margin-top: 15px;
}

.product--slider .owl-nav>button:hover,
.default--slider .owl-nav>button:hover {
    background-color: var(--green) !important;
}

.product--slider .owl-nav>button.owl-prev,
.default--slider .owl-nav>button.owl-prev {
    left: -23px;
}

.product--slider .owl-nav>button.owl-next,
.default--slider .owl-nav>button.owl-next {
    right: -23px;
}

.product--slider .owl-theme .owl-dots .owl-dot span {
    width: 30px;
    height: 7px;
    border-radius: 5px;
}

.promotions--banner .owl-theme .owl-dots .owl-dot span {
    width: 30px;
    height: 7px;
    border-radius: 5px;
}

.promotions--banner {
    padding-block: clamp(40px, 6vw, 100px);
}

.promotions--banner .owl-nav>button {
    top: calc(50%) !important;
}

.default--slider {
    margin-top: 40px;
}

:is(.product--slider, .shop--products) .product--item .product--content::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background-color: aliceblue;
    z-index: -1;
    opacity: 1;
    transition: all 0.4s;
}

:is(.product--slider, .shop--products) .product--item:hover .product--content::before {
    height: 100%;
}

:is(.product--slider, .shop--products) .product--item:hover {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
}

.product--slider .owl-carousel .owl-stage-outer {
    padding-block: 10px;
}

.product--slider {
    padding-block: clamp(30px, 6vw, 100px);
}

.promotions--banner .owl-dots {
    z-index: 2;
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
}

/* Card Themes - Start */
.pricing-card .pricing-header {
    background-color: var(--green);
}

.pricing-card .price-circle {
    border: 8px solid var(--green);
    transition: all 0.4s;
}

.pricing-card:hover .price-circle {
    border-width: 5px;
}

.package--slider .owl-item:nth-child(even) .pricing-card .pricing-header {
    background-color: var(--green);
}

.package--slider .owl-item:nth-child(even) .pricing-card .price-circle {
    border: 8px solid var(--green);
    transition: all 0.4s;
}

.package--slider .owl-item:nth-child(even) .pricing-card:hover .price-circle {
    border-width: 5px;
}

.package--slider {
    padding-block: clamp(40px, 5vw, 80px);
}

/* Card Themes - End */
.my--package .pricing-card {
    box-shadow: none;
}

.my--package .pricing-card .pricing-header .price-circle .price-title {
    color: var(--green);
}

.my--package .pricing-card .pricing-header .price-circle {
    left: calc(50%);
    transform: translateX(-50%);
    position: relative;
    top: 60px;
}

.my--package .pricing-card ul {
    padding-bottom: 30px;
}

.my--package .pricing-card ul li {
    font-size: clamp(18px, 1.5vw, 20px);
}

.my--package .pricing-card ul li span {
    color: var(--green);
}

.my--package .pricing-card:hover {
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
    transform: scale(1);
}

.my--package .pricing-card .pricing-header .plan-title {
    display: inline-block;
    top: 30px;
}

.my--package .pricing-card .pricing-header {
    height: auto;
}

.box--dash--income * {
    color: var(--white) !important;
}

.box--dash--income .icon {
    opacity: 0.4;
}

.box--dash--income .icon>i {
    font-size: 50px !important;
}

.pricing-card {
    -webkit-transition: 0.4s background-color ease;
    -ms-transition: 0.4s background-color ease;
    transition: 0.4s background-color ease;
    background-color: white;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    transition: all 0.4s;
    text-align: center;
    border: 1px solid #efefef;
}

.pricing-card:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
    transform: scale(1.02);
}

.pricing-card .popular {
    position: absolute;
    top: 0;
    right: 5%;
    width: auto;
    padding: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #eb3b5a;
    color: white;
    font-size: 12px;
    z-index: 1;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.pricing-card .badge-box {
    padding: 0 40px;
    margin-top: 80px;
}

.pricing-card .badge-box span {
    display: inline-block;
    border: 1px solid #4b7bec;
    padding: 4px 12px;
    border-radius: 25px;
    overflow: hidden;
    color: #4b7bec;
}

.pricing-card .pricing-header {
    width: 100%;
    height: 150px;
    position: relative;
    border-radius: 20px 20px 0 0;
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
}

.pricing-card .pricing-header .plan-title {
    font-size: 24px;
    color: white;
    position: relative;
    top: 25%;
}

.pricing-card .pricing-header .price-circle {
    width: calc(33.3% - 30px);
    width: 140px;
    height: 140px;
    border-radius: 100%;
    left: calc(50% - 60px);
    top: 53%;
    background-color: var(--white);
    position: absolute;
}

.pricing-card .pricing-header .price-circle .info {
    display: block;
    font-size: 12px;
    font-weight: bold;
    color: gray;
}

.pricing-card .pricing-header .price-circle .price-title {
    display: block;
    font-size: 24px;
    padding: 45px 0 0;
    font-weight: 600;
}

.pricing-card .pricing-header .price-circle .price-title small {
    font-size: 18px;
}

.pricing-card .pricing-header .price-circle .price-title i {
    display: inline-block;
    margin-right: 5px;
}

.pricing-card .pricing-header h2 {
    position: relative;
    top: 40%;
    color: #fff;
}

.pricing-card ul {
    margin: 10px 0 0 0;
    padding: 0;
    padding-top: 60px;
}

.pricing-card ul li {
    list-style-type: none;
    display: block;
    padding: 15px 0 15px 0;
    margin: 0;
    border-bottom: 1px solid #f2f2f2;
}

.pricing-card .buy-button-box {
    width: 100%;
    margin-top: 25px;
    margin-bottom: 25px;
}

.pricing-card .buy-button-box .buy-now {
    text-decoration: none;
    color: white;
    padding: 10px 30px;
    border-radius: 20px;
    background-image: linear-gradient(to left, #a55eea, #45aaf2);
    margin-top: 20px;
}

.package--slider .owl-stage-outer {
    padding-block: 20px;
}

/* video player here */
:root {
    --video-aspect-ratio: 16 / 9;
    --player-font: poppins;
    --player-background-color: var(--green);
    --player-border-color: var(--green);
    --player-border-width: 5px;
    /* <-- 0 = no border */
    /* PLAYLIST STYLES */
    --playlist-background-color: #ededed;
    /* PLAYLIST BUTTON STYLES */
    --playlist-button-font-size: 18px;
    --playlist-button-mobile-font-size: 15px;
    --playlist-button-text-color: rgba(255, 255, 255, 1);
    --playlist-button-border-color: rgba(255, 255, 255, 0.5);
    --playlist-button-border-hover-color: rgba(223, 197, 111, 0.90);
    --playlist-button-border-active-color: rgba(255, 255, 255, 0.8);
    --playlist-button-text-color: rgba(255, 255, 255, 1);
    --playlist-button-text-transform: lowercase;
    /* <--  uppercase - lowercase- normal - etc.*/
    /* PLAYER BUTTON WIDTH
     Sets aspect ratio width and height in scrolling playlist grid */
    --playlist-button-width: 190px;
    --playlist-button-mobile-width: 163px;

    /* CAPTION STYLES */
    --caption-container-padding: 15px;
    /* <-- PADDING SETS CONTAINER HEIGHT*/
    --caption-container-mobile-padding: 15px;
    --caption-font-size: 20px;
    --caption-font-mobile-size: 18px;
    --caption-text-color: var(--white);
    --caption-text-transform: uppercase;
    /* <--  uppercase - lowercase- normal - etc.*/

    /* FOR DEMO */
    --parent-container-max-width: 1000px;
    /* <-- PLAY WITH ME */
}

/* FOR DEMO */
.parent-container {
    width: 100%;
    max-width: var(--parent-container-max-width);
    margin: 0 auto;
}

@media only screen and (max-width: 980px) {
    .parent-container {
        padding-top: 0;
    }
}

/* BEGIN YOUTUBE PLAYER CSS */
.video--player {
    padding-block: clamp(50px, 6vw, 100px);
}

#video-player {
    border: var(--player-border-width) solid var(--player-border-color);
    background-color: transparent;
}

#video-player iframe {
    aspect-ratio: var(--video-aspect-ratio);
    width: 100% !important;
    height: auto !important;
    background: black;
}

#video-caption {
    color: var(--dark);
    font-size: clamp(18px, 2.2vw, 28px);
    width: 100%;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: calc(var(--caption-container-padding) - 5px);
    padding-bottom: var(--caption-container-padding);
}

/* MEDIA QUERY for CAPTION */

@media only screen and (max-width: 980px) {
    #video-caption {
        letter-spacing: 0px;
        padding-top: calc(var(--caption-container-mobile-padding) - 5px);
        padding-bottom: var(--caption-container-mobile-padding);
    }

}

#playlist {
    background-color: var(--playlist-background-color);
    padding-top: 10px;
    padding-bottom: 10px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill,
            minmax(var(--playlist-button-width), 1fr));
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--playlist-button-width), 1fr);
    overflow-x: auto;

}

/* MEDIA QUERY for PLAYLIST GRID */

@media only screen and (max-width: 980px) {
    #playlist {
        grid-auto-columns: minmax(var(--playlist-button-mobile-width), 1fr);
        grid-template-columns: repeat(auto-fill,
                minmax(var(--playlist-button-mobile-width), 1fr));
    }
}

#playlist button {

    aspect-ratio: var(--video-aspect-ratio);
    width: var(--playlist-button-width);
    font-family: var(--player-font);
    font-size: var(--playlist-button-font-size);
    color: var(--playlist-button-text-color);
    text-transform: var(--playlist-button-text-transform);
    overflow: hidden;
    border: solid 2px var(--playlist-button-border-color);
    filter: brightness(0.7);
    height: 100%;
    background-size: cover;
    background-position: center;
    padding-left: 10px;
    padding-right: 10px;
    letter-spacing: 1px;
    transition: all 300ms ease;
    color: transparent;

    /* CUSTOM PLAYLIST BUTTON CURSOR  */

}


#playlist button:hover {
    filter: brightness(1);
    border: solid 2px var(--playlist-button-border-hover-color);
}


#playlist button:focus,
#playlist button.active {
    filter: brightness(1);
    border: solid 2px var(--playlist-button-border-active-color);
    cursor: none !important;
}

#playlist button:active {
    transform: scale(0.95);
}

/* MEDIA QUERY for PLAYLIST BUTTON*/

@media only screen and (max-width: 979px) {
    #playlist button {
        width: var(--playlist-button-mobile-width);
        font-size: var(--playlist-button-mobile-font-size);
        padding-top: calc(var(--caption-container-mobile-padding) - 5px);
        padding-bottom: var(--caption-container-mobile-padding);
        font-size: var(--caption-font-mobile-size);
        letter-spacing: 0px;
    }

}

/* width */
#playlist::-webkit-scrollbar {
    height: 8px;
}

/* Track */
#playlist::-webkit-scrollbar-track {
    background: #f5f5f5;
}

/* Handle */
#playlist::-webkit-scrollbar-thumb {
    background: var(--green);
    border-radius: 10px;
}

/* Handle on hover */
#playlist::-webkit-scrollbar-thumb:hover {
    background: var(--green);
}

.permotion--banner,
.permotion--banner img {
    height: 100%;
}

.permotion--banner img {
    width: 100%;
    object-fit: cover;
}

/* video player end */
/* home website end */

/* About us */
.default--banner .default--bannner--wrapper {
    position: relative;
}

.default--banner .default--bannner--wrapper .thumbnuil img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.default--bannner--wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}

.default--banner .default--bannner--wrapper .title--wrapper {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    z-index: 1;
    padding-block: 20px;
}

.default--banner .default--bannner--wrapper .title--wrapper h1 {
    color: var(--white);
    font-size: clamp(22px, 3vw, 45px);
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    margin-bottom: 5px;
}

.about--us {
    padding-block: clamp(40px, 6vw, 100px);
}

.dual--heading {
    padding-block: 15px;
}

.dual--heading h2 {
    position: relative;
    text-transform: uppercase;
    font-size: clamp(26px, 3vw, 45px);
    font-weight: 400;
    width: max-content;
}

.dual--heading h2 span {
    font-weight: 600;
    color: var(--green);
}

.dual--heading h2::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 120px;
    height: 5px;
    background-color: var(--green);
    border-radius: 5px;
}

.dual--heading--2 h2::before {
    display: none;
}

.br--img {
    position: relative;
    z-index: 1;
}

.hov-img {
    display: block;
    overflow: hidden;
}

.hov-img img {
    width: 100%;
    transition: all 0.4s;
}

.br--img::before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    border: 3px solid var(--green);
    bottom: -21px;
    left: -21px;
}

.hov-img:hover img {
    transform: scale(1.1);
}

.about--list li {
    padding-block: 6px;
}

.about--list li i {
    width: 35px;
    height: 35px;
    border: 1px solid var(--green);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    margin-right: 10px;
}

.about--counter {
    padding-block: clamp(40px, 5vw, 80px);
}

.about--counter .matching--inncome--wrapper .matching--income--item::before,
.about--counter .matching--inncome--wrapper .matching--income--item::after {
    display: none;
}

.about--counter .matching--inncome--wrapper .matching--income--item:nth-child(even) .matching--income--inner {
    color: var(--white);
    background-color: #fff;
}

.about--counter .matching--inncome--wrapper .matching--income--item:nth-child(even) .matching--income--inner h3.amount {
    color: var(--white);
}

.about--counter .matching--inncome--wrapper .matching--income--item:nth-child(odd) .matching--income--inner {
    color: var(--white);
    background-color: var(--green);
}

.about--counter .matching--inncome--wrapper .matching--income--item:nth-child(odd) .matching--income--inner h3.amount {
    color: var(--white);
}

/* about us end */

/* contact */
.contact--us {
    padding-block: clamp(30px, 5vw, 80px);
}

.contact--details--item {
    background-color: var(--white);
    padding: clamp(25px, 2.4vw, 40px) clamp(15px, 2vw, 30px);
    display: flex;
    align-items: center;
    gap: 20px;
    border-radius: 10px;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
    height: 100%;
}

.contact--details--item .icons {
    min-width: 50px;
    height: 50px;
    border: 2px solid var(--green);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--green);
    font-size: 30px;
}

.contact--details--item .ct--details h3 {
    font-size: 18px;
    margin-bottom: 5px;
}

.contact--details--item .ct--details p {
    margin-bottom: 0px;
}

.contact--details--item .ct--details p a:hover {
    color: var(--green);
}

.contact--form {
    padding-bottom: clamp(40px, 6vw, 100px);
}

.contact--map {
    height: 100%;
}

.contact--map * {
    height: 100%;
}

.contact--form--wrapper form .form-control {
    min-height: 50px;
}

.contact--form--wrapper form .form-control:focus {
    box-shadow: none;
    border-color: var(--green);
}

/* contact end */

/* shop */
.shop--main {
    padding-block: clamp(50px, 6vw, 100px);
}

.shop--product--header {
    display: flex;
    justify-content: space-between;
}

.shop--product--header .showing--product {
    color: #818487;
    font-size: 18px;
}

.shop--product--header .default--sorting {
    position: relative;
}

.shop--product--header .default--sorting .select--box {
    padding: 10px 15px;
    border: 1px solid #ededed;
    border-radius: 5px;
    min-width: 220px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shop--product--header .default--sorting .shorting--list {
    border: 1px solid #ededed;
    position: absolute;
    width: 100%;
    top: 75px;
    background-color: var(--white);
    z-index: 2;
    height: 0;
    opacity: 0;
    transition: top 0.4s;
    overflow: hidden;
}

.shop--product--header .default--sorting .shorting--list.active--short {
    height: auto;
    top: 60px;
    opacity: 1;
}

.shop--product--header .default--sorting .shorting--list>ul>li {
    padding: 10px 15px;
    border-bottom: 1px solid #efefef;
    cursor: pointer;
    transition: all 0.4s;
}

.shop--product--header .default--sorting .shorting--list>ul>li:hover {
    background-color: var(--green);
    color: var(--white);
}

.shop--products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.shop--filter .filter--title {
    font-size: 22px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ededed;
    margin-bottom: 23px;
}

.shop--filter .filter-item {
    position: relative;
    border-bottom: 1px solid #ededed;
    padding-bottom: 15px;
    padding-top: 10px;
}

.shop--filter .filter-item .filter--heading {
    cursor: pointer;
}

.shop--filter .filter-item .filter--heading h3 i {
    transition: all 0.3s;
}

.shop--filter .filter-item .filter--heading.active--filter h3 i {
    transform: rotate(180deg);
}

.shop--filter .filter-item .filter--heading h3 {
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    padding: 10px 0px;
    margin-bottom: 0px;
}

.shop--filter .filter-item .filter--collapse>ul>li {
    padding-block: 10px;
}

.shop--filter .filter-item .filter--collapse label {
    padding-left: 30px;
    font-weight: 500;
    font-size: 18px;
    color: #999;
}

.shop--filter .filter-item .filter--collapse label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    transform: translateX(-8px);
    accent-color: var(--green);
}

.wrapper-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 99;
    display: none;
}

.product--pagination {
    margin-top: 40px;
}

.product--pagination .pagination {
    justify-content: center;
}

.product--pagination .page-item:first-child .page-link {
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.product--pagination .page-item:last-child .page-link {
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.page-link:focus {
    box-shadow: none;
}

.banner--breadcrumb .breadcrumb {
    background-color: transparent;
    padding-inline: 0px !important;
    justify-content: center;
    margin-bottom: 0px;
}

.banner--breadcrumb .breadcrumb>li>a {
    color: var(--white);
}

.banner--breadcrumb .breadcrumb>li.breadcrumb-item.active {
    color: #ededed;
}

.banner--breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: var(--white);
}

/* shop end */

/* cart */
.cart--page--empty {
    padding-block: clamp(40px, 6vw, 100px);
    text-align: center;
}

.cart--page--empty .dual--heading h2 {
    margin: 0 auto;
}

.block-cart {
    padding-block: clamp(40px, 6vw, 100px);
}

.box-title-cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ededed;
}

.list-items-cart {
    position: relative;
}

.list-items-cart .box-form-cart .form-cart {
    min-width: 140px;
    max-width: 140px;
    height: 42px;
}

.list-items-cart .item-cart {
    display: flex;
    align-items: center;
    padding: 0px 0px 24px 0px;
    margin-top: 24px;
    border-bottom: 1px solid #ededed;
}

.list-items-cart .item-cart .item-cart-image {
    min-width: 120px;
    margin-right: 24px;
    max-width: 120px;
    border: 1px solid #ededed;
}

.list-items-cart .item-cart .item-cart-image img {
    display: block;
    width: 100%;
}

.list-items-cart .item-cart .item-cart-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.list-items-cart .item-cart .item-cart-info .box-info-size-color-product {
    margin: 8px 0px 8px 0px;
}

.list-items-cart .item-cart .item-cart-info .item-cart-info-1 {
    width: 70%;
}

.list-items-cart .item-cart .item-cart-info .item-cart-info-1 .product--tile {
    font-weight: 500;
    font-size: 18px;
}

.list-items-cart .item-cart .item-cart-info .item-cart-info-1 .box-color {
    margin: 0px 20px 0px 0px;
    display: inline-block;
}

.list-items-cart .item-cart .item-cart-info .item-cart-info-1 .box-size {
    display: inline-block;
}

.list-items-cart .item-cart .item-cart-info .item-cart-info-2 {
    width: 30%;
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 90px;
    max-height: 100%;
    justify-content: flex-end;
}

.btn-remove-cart {
    position: absolute;
    top: -20px;
    right: 0px;
    z-index: 12;
    height: 25px;
    width: 25px;
    background-color: var(--green);
    color: var(--white) !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    transition: all 0.4s;
}

.btn-remove-cart:hover {
    background-color: var(--green);
    color: var(--white);
}

.box-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32px;
}

.box-coupon .coupon-left {
    width: 55%;
    display: flex;
    align-items: center;
}

.box-coupon .coupon-right {
    width: 45%;
    text-align: right;
}

.input-coupon {
    border: 0px;
    border-bottom: 1px solid #ededed;
    border-radius: 0px;
    margin-right: 16px;
}

.input-coupon:focus {
    box-shadow: none;
}

.box-info-cart {
    border: 1px solid #ededed;
    border-radius: 4px;
    padding: 32px;
    background-color: #F9F9F9;
}

.box-may-also-like {
    margin-top: 57px;
}

.box-border-bottom {
    padding: 0px 0px 24px 0px;
    margin-bottom: 24px;
    border-bottom: 1px solid #ededed;
}

.calculate-shipping {
    background: url(../imgs/template/icons/location.svg) no-repeat right center;
    display: inline-block;
    padding: 0px 30px 0px 0px;
}

.box-info-cart-inner {
    padding: 0px 0px 20px 0px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ededed;
}

.box-button-cart {
    margin-bottom: 24px;
}

.box-button-cart .btn {
    width: 100%;
}

.box-other-link {
    text-align: center;
}

.box-other-link .link-green {
    display: block;
    margin-bottom: 8px;
    color: #000;
}

.list-radio .item-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-radio .item-radio label {
    width: 100%;
    display: block;
    margin-bottom: 12px;
    font-size: 17px;
    line-height: 24px;
    font-weight: 400;
    color: #000;
}

.list-radio .item-radio label input {
    float: left;
    margin: 5px 10px 0px 0px;
    accent-color: var(--green);
    width: 15px;
    height: 15px;
}

.list-radio .item-radio .price-ship {
    font-size: 17px;
    line-height: 24px;
    font-weight: 400;
    color: #000;
    min-width: 120px;
    width: 30%;
    text-align: right;
}

.box-total-bottom {
    margin-bottom: 20px;
}

.box-detail-cart {
    padding: 0px 0px 0px 30px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-8 {
    margin-bottom: 8px;
}

.box-size .dropdown {
    display: inline-block;
}

.box-size .dropdown .dropdown-toggle {
    padding: 0px 25px 0px 5px;
    font-size: 17px;
    line-height: 24px;
}

.box-size .dropdown .dropdown-toggle:after {
    background: url(../imgs/template/icons/arrow-down-size.svg) no-repeat right center;
    border: 0px;
    height: 7px;
    width: 17px;
    position: absolute;
    top: 8px;
    right: 4px;
}

.box-size .dropdown .dropdown-menu li a {
    font-size: 17px;
    line-height: 24px;
    font-weight: 400;
    color: #000;
}

.box-form-cart .form-cart .minus {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 50px;
    height: 100%;
    z-index: 2;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--green);
    color: var(--white);
}

.box-form-cart .form-cart .plus {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 100%;
    z-index: 2;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--green);
    color: var(--white);
}

.box-form-cart .form-cart input[type=text] {
    border: 0px;
    height: 100%;
    width: 100%;
    text-align: center;
}

.box-form-cart .form-cart {
    width: 100%;
    border: 1px solid #EEEEEE;
    border-radius: 4px;
    position: relative;
    margin-right: 8px;
}

/* cart */

/* prodcut details */
.product--details {
    padding-block: clamp(40px, 6vw, 100px);
}

.product--detail--img {
    display: flex;
    gap: 20px
}

.product--detail--ing--left {
    width: 20%;
}

.product--detail--ing--left ul li {
    border: 1px solid #ededed;
}

.product--detail--ing--left ul li.active--img {
    border: 1px solid var(--green);
}

.product--details--img--big {
    flex-grow: 1;
    border: 1px solid #ededed;
}

.product--details--img--big img {
    width: 100%;
}

.product--detail--ing--left ul {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product--detail--ing--left ul li a img {
    width: 100%;
}

.product--details--data .product--tile {
    font-size: clamp(22px, 2.8vw, 40px);
}

.product--details--data .product--dec {
    color: #797979;
}

.product--details--data .product--price {
    font-size: clamp(20px, 2.5vw, 32px);
    font-weight: 600;
    color: var(--green);
}

.product--details--data .product--details--widget ul li {
    display: flex;
    gap: 15px;
    padding-block: 10px;
}

.product--details--data .product--details--widget ul li span.lable {
    font-weight: 600;
    min-width: 140px;
    color: var(--dark);
}

.product--details--data .product--details--widget ul li span {
    color: #797979;
    ;
}

.product--addto--cart {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 25px;
}

.product--addto--cart .form-cart {
    height: 50px;
}

.product--details--tab {
    padding-block: clamp(40px, 5vw, 80px);
}

.product--details--tab .nav-tabs {
    background-color: #ededed;
    padding: 15px;
    gap: 15px;
}

.product--details--tab .nav-tabs>li>a.nav-link {
    background-color: var(--white);
}

.product--details--tab .nav-tabs>li>a.nav-link.active,
.product--details--tab .nav-tabs>li>a.nav-link:hover {
    background-color: var(--green);
    color: var(--white);
    border-color: var(--green);
}

.product--details--tab .tab-content {
    border: 1px solid #ededed;
}

/* prodcut--details end */

/* checkout */
.checkout--page {
    padding-block: clamp(40px, 6vw, 100px);
}


.mt-12 {
    margin-top: 12px;
}

.mt-32 {
    margin-top: 32px;
}

.cb-left {
    float: left;
    margin: 5px 10px 0px 0px;
}

.box-payment-method .list-radio .item-radio {
    flex-wrap: wrap;
}

.box-payment-method .list-radio .item-radio label {
    color: #000;
}

.box-payment-method .list-radio .item-radio p {
    padding-left: 24px;
    padding-bottom: 20px;
}

.box-desc-checkout {
    margin-bottom: 20px;
}

.extra-info {
    display: none;
}

.extra-info.active {
    display: block;
}

.box-info-checkout-inner {
    margin-bottom: 20px;
}

.box-info-checkout-inner .box-border-bottom {
    padding: 0px 0px 20px 0px;
    margin-bottom: 20px;
}

.box-info-checkout-inner .list-items-cart .item-cart .item-cart-info {
    align-items: flex-start;
}

.box-info-checkout-inner .list-items-cart .item-cart .item-cart-info .item-cart-info-1 a {
    display: block;
    margin-bottom: 8px;
}

.box-info-checkout-inner .list-items-cart .item-cart .item-cart-info .item-cart-info-1 .box-color {
    margin-bottom: 8px;
}

.box-info-checkout-inner .list-items-cart .item-cart .item-cart-info .item-cart-info-1 .box-size,
.box-info-checkout-inner .list-items-cart .item-cart .item-cart-info .item-cart-info-1 .box-color {
    display: block;
}

.box-info-checkout-inner .list-items-cart .item-cart .item-cart-info .item-cart-info-2 {
    min-height: auto;
    justify-content: flex-start;
}

.box-button-checkout {
    position: relative;
}

.box-button-checkout .btn {
    width: 100%;
}

.text-17-medium {
    font-size: 17px;
    line-height: 24px;
    font-weight: 500 !important;
}

.box-desc-checkout label {
    font-weight: 500;
}

.box-desc-checkout input[type="checkbox"] {
    accent-color: var(--green);
}

.checkout--form--inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.checkout--form--inner>.span--2 {
    grid-column: span 2;
}

.checkout--form--inner .form-control,
.box-gift-coupon .form-control {
    min-height: 50px;
    background-color: #F9F9F9;
}

.checkout--form--inner .form-control:focus,
.box-gift-coupon .form-control:focus {
    box-shadow: none;
    border-color: var(--green);
    background-color: var(--white);
}

.checkout--form--inner .form-check label {
    font-weight: 500;
}

.checkout--form--inner .form-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--green);
}

.box--checkout--top {
    font-size: 18px;
}

.box--checkout--top a {
    color: var(--green);
    font-weight: 500;
    margin-left: 10px;
}

.box--checkout--top i {
    color: var(--green);
}

/* checkout end */

/* 404 page */
.error--404 {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.error--wrapper h1 {
    font-size: clamp(35px, 6vw, 100px);
    color: var(--green);
}

.error--wrapper h4 {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 400;
    margin-bottom: 25px;
}

/* 404 */

/* maintanence */
.maintenance--page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: #ff4343;
}

.maintenance--page .maintenance--wrapper .icons {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    outline: 3px solid var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 39px;
    color: #ff4343;
    background-color: #ededed;
    outline-offset: 8px;
}

.maintenance--page .maintenance--wrapper h1 {
    margin-top: 30px;
    font-size: clamp(30px, 3vw, 50px);
    color: var(--white);
}

.maintenance--page .maintenance--wrapper p {
    font-size: 20px;
    color: var(--white);
}

.maintenance--page .about--list li i {
    border: 1px solid var(--white);
    color: var(--white);
}

.maintenance--page .about--list li a {
    color: var(--white);
}

.login--popup--wrapper .modal-header,
.offer--modal .modal-header,
.plain--modal .modal-header {
    position: absolute;
    right: -20px;
    top: -20px;
    width: 40px;
    height: 40px;
    background-color: var(--green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
    z-index: 2;
}

.login--popup--wrapper .modal-header button.close,
.offer--modal .modal-header button.close,
.plain--modal .modal-header button.close {
    padding: 0px;
    margin: 0;
    color: var(--white);
    width: 100%;
    height: 100%;
}

.offer--modal .modal-header {
    display: none;
}

.offer--modal .modal-body,
.plain--modal .modal-body {
    padding: 0px !important;
}

.offer--modal .modal-dialog,
.plain--modal .modal-dialog {
    padding-inline: 15px !important;
}

.offer--modal img {
    width: 100%;
}

.offer--modal .owl-dots {
    display: none;
}

.login--popup--wrapper .modal-body {
    padding: 0px;
}

.login--popup--wrapper .login--popup .nav-tabs .nav-item {
    flex-grow: 1;
}

.login--popup--wrapper .login--popup .nav-tabs .nav-link {
    border-radius: 0px;
    border: none;
    padding: 15px;
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    background-color: #ededed;
}

.login--popup--wrapper .login--popup .nav-tabs .nav-link.active {
    background-color: var(--green);
    color: var(--white);
}

.login--popup--wrapper .login--popup .tab-content {
    padding: 20px;
}

.login--popup--wrapper .login--popup .tab-content .tab-pane {
    padding: 20px;
    background-color: #f5f5f5;
    margin-top: 60px;
    position: relative;
}

.login--popup--wrapper .login--popup .tab-content .tab-pane .user--icon {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0;
    width: 80px;
    height: 80px;
    background-color: var(--green);
    border-radius: 50%;
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    outline: 2px solid var(--green);
    outline-offset: 5px;
}

.login--popup--wrapper .login--popup .tab-content .tab-pane form {
    margin-top: 55px;
}

.login--popup--wrapper .login--popup .tab-content .tab-pane form .form-control {
    min-height: 50px;
    background-color: var(--white);
}

.login--popup--wrapper .login--popup .tab-content .tab-pane form .btn--blue {
    border: none;
}

/* maintenance */

/* privicy policy  */

.privicy--policy {
    padding-block: clamp(50px, 6vw, 100px);
}

.privicy--policy .privicy-policy--content h2 {
    font-size: clamp(22px, 2.5vw, 36px);
    color: var(--dark);
}

.privicy--policy .privicy-policy--content p {
    font-size: 18px;
}

/* provicy policy end */
.card--ac--income .rupee--icon {
    width: 40px;
    height: 40px;
    border: 2px solid var(--white);
    border-radius: 5px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.order--pay--dt>div {
    gap: 15px;
    align-items: center;
}

.order--pay--dt>div>label {
    min-width: 100px;
}

.table--repurchase tbody tr td div.ms--pd {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.table--repurchase tbody tr td div.ms--pd img {
    width: 60px;
    border: 1px solid #ced4da;
    cursor: pointer;
    height: 50px;
    object-fit: cover;
}

.table--repurchase tbody tr td .price_dp {
    display: flex;
    text-align: center;
}

.table--repurchase tbody tr td .price_dp p label {
    display: block;
    margin-bottom: 0px;
    line-height: 14px;
}

.table--repurchase tbody tr td .price_dp p {
    margin-bottom: 0px !important;
    padding-inline: 10px;
}

.table--repurchase tbody tr td .price_dp~td {
    font-weight: 600;
}

.table--repurchase input[type='checkbox'].chk {
    width: 16px;
    height: 16px;
    accent-color: var(--green);
}

.qty--input {
    min-width: 50px;
    max-width: 50px;
}

.plain--modal .modal-body img {
    width: 100%;
}

.chk-sm {
    width: 20px;
    height: 20px;
    accent-color: var(--green);
}

.qty--counter {
    max-width: 140px;
    pointer-events: none;
    flex-wrap: nowrap;
    min-width: 120px;
}

.qty--counter.qty--enable {
    pointer-events: inherit;
}

.qty--counter .input-group-text {
    cursor: pointer;
    transition: 0.4s;
}

.qty--counter .input-group-text {
    background-color: var(--green);
    color: var(--white);
}

.qty--counter .input-group-text:hover {
    background-color: var(--green);
    color: var(--white);
}

.qty--counter .pd-qty {
    text-align: center;
    background-color: #e9ecef;
}

.qty--counter.qty--enable .pd-qty {
    background-color: var(--white);
}

/* franchise level */
.fr--sidebar .os-content-glue,
.fr--sidebar .os-content-arrange {
    height: 0px !important;
    overflow: hidden;
}

.fr--sidebar .os-viewport-native-scrollbars-overlaid {
    overflow-x: hidden !important;
}

.franchise--level {
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.franchise--level>li {
    padding: 10px;
    background-color: var(--white);
    border-left: 3px solid var(--green);
}

.grid--form--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 15px;
}

.grid--form--2 .span--2 {
    grid-column: span 2;
}

.franchise--user--data>ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.franchise--user--data>ul>li {
    background-color: #f4f6f9;
    border-radius: 5px;
    padding: 5px 10px;
}

.franchise--user--data>ul>li>label {
    display: block;
    margin-bottom: 0px;
}

.franchise--user--details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.franchise--user--details>.fr--items {
    background-color: #f4f6f9;
    border-radius: 5px;
    padding: 10px 15px;
}

.franchise--user--details>.fr--items.span--2 {
    grid-column: span 3;
}

.franchise--user--details>.fr--items label {
    margin-bottom: 0px;
}

.company--ac--detail .form-group {
    padding: 15px;
    background-color: rgba(59, 183, 126, 0.2);
    border-radius: 5px;
}

.fr--profile--data tbody {
    display: block;
}

.fr--profile--data tbody tr {
    display: flex;

}

.fr--profile--data tbody tr th {
    width: 40%;
}

.fr--profile--data tbody tr td {
    width: 60%;
}

.my--payment-items table {
    display: block;
}

.my--payment-items table tbody {
    display: block;
    background-color: rgba(59, 183, 126, 0.2);
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.my--payment-items table tbody tr {
    display: flex;
    gap: 10px;
}

.my--payment-items table tbody tr th {
    width: 40%;
}

.my--payment-items table tbody tr td {
    width: 60%;
}

.transaction_img {
    display: inline-block;
    border: 2px solid var(--green);
    width: 50px;
}

.transaction_img img {
    width: 100%;
    cursor: pointer;
}

/* end  */

/* stock receving */
:is(.product--list--tbl) :is(tbody td:last-child) {
    text-align: right;
}

.order--pd--qty {
    width: 100px;
}

/* end */
/* footer */
.page-footer {
    background-image: url("../img/fotter--banner.jpg");
    color: var(--white);
    background-size: cover;
    position: relative;
    background-position: center;
}

.page-footer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
}

.footer--logo {
    width: 150px;
    filter: grayscale(1) brightness(3);
}

.page-footer .footer--list>li>a {
    display: inline-block;
    padding-block: 8px;
    text-decoration: none;
    transition: all 0.4s;
    color: var(--white);
}

.footer--list {
    text-align: left;
}

.link_text {
    text-align: left;
}

.page-footer .footer--list>li>a:hover {
    color: #000;
}

.footer--social>li>a {
    background: transparent;
    width: 40px;
    height: 40px;
    border-radius: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: var(--white) !important;
    font-size: 19px;
    transition: all 0.4s;
    border: 2px solid var(--white);
}

.footer--social>li>a:hover {
    background: var(--green);
}

/* footer end here */

/* responaive */
@media (min-width:992px) {
    #shop--filter {
        display: none;
    }
}

@media (max-width:1400px) {
    :is(.recent--income--card) :is(.matching--income, .direct--income) h3 {
        font-size: 15px;
    }
}

@media (max-width:1280px) {
    .package--lists {
        grid-template-columns: repeat(2, 1fr);
    }

    .matching--inncome--wrapper {
        gap: clamp(25px, 3vw, 80px);
    }
}

@media (max-width:1024px) {
    .product--slider--dashboard .owl-dots {
        display: none;
    }

    .reward--card--grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product--details--grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .matching--inncome--wrapper .matching--income--item .matching--income--inner h3.amount {
        font-size: 22px;
    }

    :is(.product--slider, .shop--products) .product--item .product--content h3 {
        font-size: 18px;
    }

    :is(.product--slider, .shop--products) .product--item .product--content h5 {
        font-size: 16px;
    }

    .default--banner .default--bannner--wrapper .thumbnuil img {
        height: 170px;
    }

    .contact--details--item {
        gap: 12px;
    }

}

@media (max-width:991px) {
    .sidebar-overlay {
        background-color: rgba(0, 0, 0, .5);
        bottom: 0;
        display: none;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1037;
    }

    .sidebar-open .sidebar-overlay {
        display: block;
    }

    .product--details--data {
        margin-top: 40px;
    }

    .box-detail-cart {
        padding: 40px 0px 0px 0px;
    }

    .shop--product--header .showing--product>span {
        display: none;
    }

    .shop--product--header .showing--product {
        color: var(--dark);
    }

    .top_menu--left {
        display: none;
    }

    /* Main Menu Area css 1
	============================================================================================ */
    .navbar-toggler {
        border: none;
        border-radius: 0px;
        padding: 0px;
        cursor: pointer;
        margin-top: 27px;
        margin-bottom: 23px;
    }

    .header_area .navbar {
        background: #fff;
    }

    .header_area .navbar .right_nav hr {
        display: none;
    }

    .navbar-toggler[aria-expanded="false"] span:nth-child(2) {
        opacity: 1;
    }

    .navbar-toggler[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .navbar-toggler[aria-expanded="true"] span:first-child {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        position: relative;
        top: 7.5px;
    }

    .navbar-toggler[aria-expanded="true"] span:last-child {
        transform: rotate(45deg);
        bottom: 6px;
        position: relative;
    }

    .navbar-toggler span {
        display: block;
        width: 25px;
        height: 3px;
        background: var(--green);
        margin: auto;
        margin-bottom: 4px;
        transition: all 400ms linear;
        cursor: pointer;
    }

    .navbar .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .nav {
        padding: 0px 0px;
    }

    .header_area+section,
    .header_area+row,
    .header_area+div {
        margin-top: 117px;
    }

    .header_area .navbar .nav .nav-item .nav-link {
        line-height: 40px;
        margin-right: 0px;
        display: block;
        border-bottom: 1px solid #ededed33;
        border-radius: 0px;
    }

    .header_area .navbar .search {
        margin-left: 0px;
    }

    .header_area .navbar-collapse {
        max-height: 340px;
        overflow-y: auto;
        padding-right: 0px;
    }

    .header_area .navbar .nav {
        width: 100%;
    }

    .header_area .navbar .nav>li:not(:last-child) {
        border-bottom: 1px solid var(--green);
    }

    .header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {
        padding: 0px 15px;
    }

    .header_area .navbar .nav .nav-item {
        margin-right: 0px;
    }

    .header_area+section,
    .header_area+row,
    .header_area+div {
        margin-top: 0px;
    }

    .header_area.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link {
        line-height: 40px;
    }

    .header_area .navbar .nav.navbar-nav.navbar-right li:first-child {
        margin-left: 0px;
    }

    .header_area .navbar .cart {
        line-height: 40px;
    }

    .header_area .navbar .search {
        line-height: 40px;
    }

    .header_area .navbar .nav.navbar-nav.navbar-right li {
        margin-left: 0px;
    }

    .nav--row {
        position: relative;
    }

    .right--navbar {
        width: max-content;
        position: absolute;
        right: 40px;
        top: 24px;
        transition: all 0.5s;
    }

    .header_area.active--header .right--navbar {
        top: 18px;
    }

    .shop--filter {
        position: fixed;
        top: 0;
        left: 0;
        background-color: var(--white);
        z-index: 99;
        width: calc(100% - 80px);
        padding: 20px 15px;
        height: 100vh;
        overflow-y: auto;
        transition: all 0.4s;
        left: -100%;
    }

    .shop--filter.active-mb--filter {
        left: 0;
    }

    .header_area .navbar-light .navbar-brand img {
        width: 100px;
    }

    .header_area.active--header .navbar-light .navbar-brand img {
        width: 80px;
    }

    .navbar-toggler {
        margin-top: 15px;
        margin-bottom: 12px;
    }

}

@media (max-width:767px) {
    .form-group {
        margin-bottom: 0rem !important;
    }

    .incomes--box .card-footer ul.nav {
        padding: 10px;
    }

    .search--header .input-group>input {
        min-height: 35px;
    }

    .login--popup--wrapper .modal-dialog {
        margin: 15px;
    }

    .login--popup--wrapper .modal-header {
        right: -10px;
        top: -14px;
    }

    .login--popup--wrapper .login--popup .tab-content .tab-pane form .form-control {
        min-height: 45px;
    }

    /* .total--inncome--wrapper {
        grid-template-columns: repeat(2,1fr);
    } */
    .package--lists {
        grid-template-columns: repeat(1, 1fr);
    }

    .profile--data--wrapper {
        flex-direction: column;
    }

    .profile--data--wrapper .profile--img {
        width: 80px;
    }

    .profile--data--wrapper .profile--data {
        text-align: center;
    }

    .kyc--img--wrapper {
        flex-direction: column;
    }

    .update--kyc--form form {
        flex-direction: column;
    }

    .update--kyc--form form>.form-group {
        min-width: calc(100%);
        max-width: calc(100%);
    }

    .btn--kyc--status {
        flex-direction: column;
        width: 100%;
    }

    .btn--kyc--status a.btn {
        width: 100%;
    }

    .reward--card--grid {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .product--details--grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .matching--inncome--wrapper {
        grid-template-columns: repeat(2, 1fr);
    }

    .header_area .navbar-light .navbar-brand img {
        width: 100px;
    }

    .header_area.active--header .navbar-light .navbar-brand img {
        width: 80px;
    }

    .hero--banner .owl-nav>button {
        width: 30px;
        height: 30px;
    }

    .hero--banner .owl-theme .owl-dots .owl-dot span {
        width: 15px;
        height: 4px;
    }

    .hero--banner .owl-dots {
        bottom: 0px;
    }

    .hero--banner .owl-carousel .slide--item .hero--content h3 {
        margin-bottom: 10px;
    }

    .btn--blue {
        padding: 10px 20px;
        font-size: 14px;
    }

    .hero--banner .owl-nav>button.owl-prev {
        left: 5px;
    }

    .hero--banner .owl-nav>button.owl-next {
        right: 5px;
    }

    .owl-theme .owl-nav {
        margin-top: 0px;
    }

    .product--slider .owl-carousel {
        margin-top: 20px;
    }

    .product--slider .owl-nav>button,
    .default--slider .owl-nav>button {
        width: 30px;
        height: 30px;
    }

    .product--slider .owl-theme .owl-dots .owl-dot span,
    .promotions--banner .owl-theme .owl-dots .owl-dot span {
        width: 15px;
        height: 4px;
    }

    .product--slider .owl-theme .owl-dots .owl-dot span {
        display: none;
    }

    .feture--banner .col-md-6:nth-child(2) {
        margin-top: 25px;
    }

    .promotions--banner .owl-dots {
        bottom: 0;
    }

    .footer--logo {
        width: 100px;
    }

    .page-footer {
        padding-top: 10px !important;
    }

    .default--slider {
        margin-top: 20px;
    }

    .default--banner .default--bannner--wrapper .thumbnuil img {
        height: 160px;
    }

    .contact--details--item .icons {
        min-width: 30px;
        height: 30px;
        font-size: 17px;
    }

    .contact--details--item {
        height: auto;
        margin-bottom: 20px;
    }

    .contact--details--item .icons {
        min-width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .contact--form--wrapper {
        margin-top: 25px;
    }

    .contact--form--wrapper form .form-control {
        min-height: 45px;
    }

    .shop--products {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .shop--filter .filter-item .filter--heading h3 {
        font-size: 18px;
    }

    .shop--filter .filter-item .filter--collapse label {
        font-size: 16px;
    }

    .shop--filter .filter-item {
        padding-bottom: 8px;
        padding-top: 8px;
    }

    .shop--filter .filter--title {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .list-items-cart .item-cart .item-cart-image {
        min-width: 80px;
        max-width: 80px;
    }

    .box-coupon {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

    .box-coupon .coupon-right {
        text-align: left;
    }

    .box-coupon .coupon-left {
        width: 100%;
    }

    .box-title-cart {
        padding-bottom: 10px;
    }

    .default--banner .default--bannner--wrapper .title--wrapper h1 {
        margin-bottom: 0px;
    }

    .checkout--form--inner {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .checkout--form--inner>.span--2 {
        grid-column: span 1;
    }

    .box--checkout--top {
        font-size: 16px;
    }

    .checkout--form--inner .form-control,
    .box-gift-coupon .form-control {
        min-height: 45px;
    }

    .box-info-cart {
        padding: 20px 15px;
    }

    .box-detail-cart>h4 {
        font-size: 20px;
    }

    .table_height .col-md-6 .dataTables_length,
    .table_height .col-md-6 .dataTables_filter {
        text-align: left;
    }

    .new_registration_form {
        grid-template-columns: repeat(1, 1fr);
    }

    .new_registration_form .span--2 {
        grid-column: span 1;
    }

    #myVendorDataTable_wrapper>.row>div:last-child {
        padding-left: 0px !important;
    }

    .content-header h1 {
        font-size: 26px;
    }

    .marquee {
        font-size: 1rem;
    }

    .grid--form--2 {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid--form--2 .span--2 {
        grid-column: span 1;
    }

    .franchise--user--details {
        grid-template-columns: repeat(1, 1fr);
    }

    .franchise--user--details>.fr--items.span--2 {
        grid-column: span 1;
    }

    .ass--current-status .form-group {
        flex-direction: column;
    }

    .ass--current-status .form-group label {
        width: 100%;
    }

    .ass--current-status .form-group label .float-right {
        display: none;
    }
}

@media (max-width:480px) {
    .product--details--grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .matching--inncome--wrapper {
        grid-template-columns: repeat(1, 1fr);
    }

    .default--banner .default--bannner--wrapper .thumbnuil img {
        height: 150px;
    }

    .shop--products {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .shop--product--header .default--sorting .select--box {
        min-width: 200px;
    }

    .product--detail--ing--left ul {
        flex-direction: row;
        overflow-x: auto;
        gap: 15px;
    }

    .product--detail--ing--left ul li {
        min-width: 80px;
        max-width: 80px;
    }

    .product--detail--ing--left {
        width: 100%;
    }

    .product--detail--img {
        flex-direction: column-reverse;
    }

    .product--addto--cart {
        gap: 10px;
    }

    .fr--profile--data tbody tr {
        flex-direction: column;
    }

    .fr--profile--data tbody tr th {
        width: 100%;
    }

    .fr--profile--data tbody tr td {
        width: 100%;
    }

    .my--payment-items table tbody tr {
        flex-direction: column;
    }

    .my--payment-items table tbody tr th {
        width: 100%;
    }

    .my--payment-items table tbody tr th .float-right {
        display: none;
    }

    .my--payment-items table tbody tr td {
        width: 100%;
    }

    .my--payment-items table tbody tr {
        gap: 0px;
        margin-bottom: 5px;
    }

    /* .total--inncome--wrapper {
        grid-template-columns: repeat(1,1fr);
    } */
}

a:hover {
    cursor: pointer;
    text-decoration: none;
    color: blue;
}

.textotp {
    display: none;
}

.outer_border {
    border: qpx solid lightgrey;
    background-color: var(--green-light);

}

.outer_border p {
    padding: 0;
}

.token_details {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 37px;
}

.list_style {
    list-style: none;
}

.fw-bold {
    font-weight: 600;
}

.extend_token_ {
    margin-top: 34px;
    display: none;
}

.btn_style {
    margin-top: 34px;
}

/* .franchise_register_form{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 20px;
} */


@media screen and (max-width: 768px) {
    .extend_token_ {
        margin-top: 0px !important;
        display: none;
    }

    .btn_style {
        margin-top: 0px !important;
    }

}

/* Media query for mobile devices */
@media screen and (max-width: 480px) {
    .extend_token_ {
        margin-top: 0px !important;
        display: none;
    }

    .btn_style {
        margin-top: 0px !important;
    }


}

.form-group label {
    font-weight: 500;
}

.from_bg {
    background-image: radial-gradient(#bee9c7, transparent);
}

.sponsor_ok {
    color: #3BB77E;
}

a {
    text-decoration: none !important;
    color: #2a2a2a !important;
}

/* .img_view {
    width: 400px !important;
} */
.id_text {
    position: relative;
    bottom: 194px;
    right: 10px;
    font-size: 13px;
}

.id_text ul {
    list-style: none;
    height: 0px;
    gap: 3px;

}

.img_preview_outer {
    max-width: 215px !important;
    height: 362px;
    overflow: hidden !important;
}

.img_view {
    width: 215px !important;
    height: 400px !important;
}

.circular--landscape {
    display: inline-block;
    position: relative;
    width: 111px;
    height: 111px;
    overflow: hidden;
    border-radius: 50%;
    bottom: 375px;
    left: 53px;
}

.circular--landscape img {
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
    outline: 4px solid var(--green);
    outline-offset: 0px;
    aspect-ratio: 1;
}

.card_name {
    position: relative;
    bottom: 207px;
    /* left: 39px; */
    text-align: center;
    font-weight: 600;
    font-size: 13px;

}

.body_container {
    display: grid;
    justify-content: center;
}

.btn_sr {
    border-radius: 20px !important;
}

.logo_imgs {
    width: 200px;
}

.logo_imgs {
    width: 100%;
    margin: auto;
}

.logo_imgs:hover {
    animation: Shake 0.5s linear infinite;
}

/*Using keyframes for shaking an image*/
@keyframes Shake {
    0% {
        transform: rotate(5deg);
    }

    25% {
        transform: rotate(-6deg);
    }

    50% {
        transform: rotate(5deg);
    }

    75% {
        transform: rotate(-6deg);
    }

    100% {
        transform: rotate(5deg);
    }
}


.matching--income--rotate {
    transition: transform 0.3s ease;

}

.matching--income--rotate:hover {
    transform: rotate(30deg);

}

.inner_income {
    height: 100%;
}