:root {
    --bg: #ecf1f7;
    --font: "Gilroy", sans-serif;
    --main-color: #3765e6;
    --secondary-color: #222637;
    --soft-color: var(--light);
    --secondary-hover-color: #282d40;
    --secondary-dark-color: #1e2130;
    --main-text-color: #4c5473;
    --soft-text-color: #767f97;
    --container: 1440px;
    --danger: #e33565;
    --warning: #ff9800;
    --success: #27bd7f;
    --primary: #3563e6;
    --light: #5f728a;
}

/* -------------------------- General -------------------------- */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}
body.noclick {
    pointer-events: none;
    user-select: none;
}
body {
    font-family: var(--font);
    background-color: var(--bg);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) var(--bg);
}
body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-track {
    background: var(--bg);
}
body::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
}

body.piscroll {
    overflow: hidden;
}

body.piscroll :is(header, main) {
    filter: blur(2px);
    transition: 0.2s;
    transition-delay: 0.2s;
}

a {
    color: var(--main-text-color);
    text-decoration: none;
}

a:hover,
a:active,
a:focus {
    outline: none;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}

:active,
:focus {
    outline: 0;
}

button {
    background: transparent;
    border: none;
}

/* -------------------------- General Styling -------------------------- */
.cl-white {
    color: #fff;
}

.cl-black {
    color: #000;
}

.cl-main {
    color: var(--main-color);
}

.cl-secondary {
    color: var(--secondary-color);
}

.bg-white {
    color: #fff;
}

.bg-black {
    color: #000;
}

.bg-main {
    color: var(--main-color);
}

.bg-secondary {
    color: var(--secondary-color);
}

.container {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 15px;
}
.c-pointer {
    cursor: pointer;
}
.d-block {
    display: block !important;
}
.d-flex {
    display: flex !important;
}
.d-grid {
    display: grid !important;
}
.d-none {
    display: none !important;
}

.grid-2 {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
}

.grid-3 {
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-4 {
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.grid-30-auto {
    grid-template-columns: 30% auto;
}

.grid-auto-30 {
    grid-template-columns: auto 30%;
}

.grid-auto-40 {
    grid-template-columns: auto 40%;
}

.grid-40-auto {
    grid-template-columns: 40% auto;
}

.grid-auto {
    -ms-grid-columns: auto !important;
    grid-template-columns: auto !important;
}

.grid-g-0 {
    grid-gap: 0 !important;
}

.grid-g-1 {
    grid-gap: 0.25rem !important;
}

.grid-g-2 {
    grid-gap: 0.5rem !important;
}

.grid-g-3 {
    grid-gap: 1rem !important;
}

.grid-g-4 {
    grid-gap: 1.5rem !important;
}

.grid-g-5 {
    grid-gap: 3rem !important;
}

.grid-cg-0 {
    -webkit-column-gap: 0 !important;
    column-gap: 0 !important;
}

.grid-cg-1 {
    -webkit-column-gap: 0.25rem !important;
    column-gap: 0.25rem !important;
}

.grid-cg-2 {
    -webkit-column-gap: 0.5rem !important;
    column-gap: 0.5rem !important;
}

.grid-cg-3 {
    -webkit-column-gap: 1rem !important;
    column-gap: 1rem !important;
}

.grid-rg-0 {
    row-gap: 0 !important;
}

.grid-rg-1 {
    row-gap: 0.25rem !important;
}

.grid-rg-2 {
    row-gap: 0.5rem !important;
}

.grid-rg-3 {
    row-gap: 1rem !important;
}

.grid-w100 {
    grid-column: 1 / -1;
}

.well {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.well [class^="ww"] {
    padding: 0 10px;
}

.well.wide {
    margin: 0 -12px;
}

.well.wide [class^="ww"] {
    padding: 0 12px;
}

.well.form {
    margin: 0 -7px;
}

.well.form [class^="ww"] {
    padding: 0 7px;
}

.well .ww-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 16.66666667%;
}

.well .ww-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 25%;
}

.well .ww-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 33.33333333%;
}

.well .ww-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 41.66666667%;
}

.well .ww-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
}

.well .ww-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 58.33333333%;
}

.well .ww-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 66.66666667%;
}

.well .ww-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 75%;
}

.well .ww-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 83.33333333%;
}

.well .ww-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
}

.align-items-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.justify-content-start {
    -webkit-box-pack: flex-start !important;
    -ms-flex-pack: flex-start !important;
    justify-content: flex-start !important;
}

.justify-content-end {
    -webkit-box-pack: flex-end !important;
    -ms-flex-pack: flex-end !important;
    justify-content: flex-end !important;
}

.justify-content-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.p-absolute {
    position: absolute;
}

.p-relative {
    position: relative;
}

.w-100 {
    width: 100% !important;
}

.miw-100 {
    min-width: 100% !important;
}

.maw-100 {
    max-width: 100% !important;
}

.w-fit {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.h-100 {
    height: 100%;
}

.h-fit {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-uppercase {
    text-transform: uppercase;
}

.m-auto {
    margin: auto !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.25rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mt-auto {
    margin-top: auto !important;
}

.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.me-5 {
    margin-right: 3rem !important;
}

.me-auto {
    margin-right: auto !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.mb-auto {
    margin-bottom: auto !important;
}

.ms-0 {
    margin-left: 0 !important;
}

.ms-1 {
    margin-left: 0.25rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
}

.ms-4 {
    margin-left: 1.5rem !important;
}

.ms-5 {
    margin-left: 3rem !important;
}

.ms-auto {
    margin-left: auto !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}

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

.px-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

.px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.px-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

.px-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.py-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pe-0 {
    padding-right: 0 !important;
}

.pe-1 {
    padding-right: 0.25rem !important;
}

.pe-2 {
    padding-right: 0.5rem !important;
}

.pe-3 {
    padding-right: 1rem !important;
}

.pe-4 {
    padding-right: 1.5rem !important;
}

.pe-5 {
    padding-right: 3rem !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}

.pb-2 {
    padding-bottom: 0.5rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.ps-0 {
    padding-left: 0 !important;
}

.ps-1 {
    padding-left: 0.25rem !important;
}

.ps-2 {
    padding-left: 0.5rem !important;
}

.ps-3 {
    padding-left: 1rem !important;
}

.ps-4 {
    padding-left: 1.5rem !important;
}

.ps-5 {
    padding-left: 3rem !important;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.br0 {
    border-radius: 0 !important;
}

.br5 {
    border-radius: 5px !important;
}

.br8 {
    border-radius: 8px !important;
}

.br10 {
    border-radius: 10px !important;
}

.br12 {
    border-radius: 12px !important;
}

.br15 {
    border-radius: 15px !important;
}

.br20 {
    border-radius: 25px !important;
}

.br25 {
    border-radius: 25px !important;
}

.fs14 {
    font-size: 14px !important;
}

.fs15 {
    font-size: 15px !important;
}

.fs16 {
    font-size: 16px !important;
}

.fs18 {
    font-size: 18px !important;
}

.fs20 {
    font-size: 20px !important;
}
.opacity-03 {
    opacity: 0.3 !important;
}
.lazy {
    opacity: 0;
    transition: opacity 0.5s;
}
.lazy.Load {
    opacity: 1;
}
.butto {
    color: #fff;
    border: none;
    font-weight: 500;
    font-family: var(--font);
    cursor: pointer;
    padding: 8px 15px;
    text-decoration: none !important;
    font-size: 16px;
    border-radius: 5px;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    display: inline-block;
}

.butto:hover {
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
}

.badge {
    color: #fff;
    border: none;
    font-weight: 500;
    display: inline-block;
    padding: 8px 15px;
    font-size: 15px;
    line-height: normal;
    border-radius: 5px;
}

.badge:hover {
    -webkit-filter: brightness(0.9);
    filter: brightness(0.9);
}

.butto-xs,
.badge-xs {
    padding: 3px 12px;
    font-size: 14px;
}

.butto-sm,
.badge-sm {
    padding: 5px 15px;
    font-size: 14px;
}

.butto-lg,
.badge-lg {
    padding: 12px 20px !important;
    font-size: 16px;
}

.butto-xlg,
.badge-xlg {
    padding: 15px 25px !important;
    font-size: 17px;
}

.butto-main,
.badge-main {
    background: var(--main-color);
}

.butto-primary,
.badge-primary {
    background: var(--primary);
}

.badge-outline-primary,
.butto-outline-primary {
    color: var(--primary);
    border: 1px solid var(--primary);
    font-weight: 500;
    filter: brightness(1) !important;
    transition: 0.2s;
    background: transparent;
}
.badge-outline-primary:hover,
.butto-outline-primary:hover {
    color: #fff;
    background: var(--primary);
}

.butto-success,
.badge-success {
    background: var(--success);
}

.badge-outline-success,
.butto-outline-success {
    color: var(--success);
    border: 1px solid var(--success);
    font-weight: 500;
    filter: brightness(1) !important;
    transition: 0.2s;
    background: transparent;
}
.badge-outline-success:hover,
.butto-outline-success:hover {
    color: #fff;
    background: var(--success);
}

.butto-warning,
.badge-warning {
    background: var(--warning);
}

.badge-outline-warning,
.butto-outline-warning {
    color: var(--warning);
    border: 1px solid var(--warning);
    font-weight: 500;
    filter: brightness(1) !important;
    transition: 0.2s;
    background: transparent;
}
.badge-outline-warning:hover,
.butto-outline-warning:hover {
    color: #fff;
    background: var(--warning);
}

.butto-danger,
.badge-danger {
    background: var(--danger);
}

.badge-outline-danger,
.butto-outline-danger {
    color: var(--danger);
    border: 1px solid var(--danger);
    font-weight: 500;
    filter: brightness(1) !important;
    transition: 0.2s;
    background: transparent;
}
.badge-outline-danger:hover,
.butto-outline-danger:hover {
    color: #fff;
    background: var(--danger);
}

.butto-secondary,
.badge-secondary {
    background: var(--light);
}

.badge-outline-secondary,
.butto-outline-secondary {
    color: var(--light);
    border: 1px solid var(--light);
    font-weight: 500;
    filter: brightness(1) !important;
    transition: 0.2s;
    background: transparent;
}
.badge-outline-secondary:hover,
.butto-outline-secondary:hover {
    color: #fff;
    background: var(--light);
}

.butto-dark,
.badge-dark {
    background: var(--secondary-color);
}

.badge-outline-dark,
.butto-outline-dark {
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    font-weight: 500;
    filter: brightness(1) !important;
    transition: 0.2s;
    background: transparent;
}
.badge-outline-dark:hover,
.butto-outline-dark:hover {
    color: #fff;
    background: var(--secondary-color);
}

.butto-light,
.badge-light {
    color: #5f728a !important;
    background: #dce6f3;
}

.badge-outline-light,
.butto-outline-light {
    color: #5f728a;
    border: 1px solid #5f728a;
    font-weight: 500;
    filter: brightness(1) !important;
    transition: 0.2s;
    background: transparent;
}
.badge-outline-light:hover,
.butto-outline-light:hover {
    color: #fff;
    background: #5f728a;
}

.butto-passive {
    opacity: 0.5;
    pointer-events: none;
}

.user-select-none {
    user-select: none;
}

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 5px;
}

.alert-primary {
    background: #bfcaff;
    color: #1b3a76;
}

.alert-danger {
    background: #febdbe;
    color: #8f2630;
}

.alert-warning {
    background: #ffddb0;
    color: #72602e;
}

.alert-success {
    background: #acedc3;
    color: #155724;
}

.alert-light {
    background: #e7e9f3;
    color: #565b74;
}

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

.text-primary {
    color: #6a7bf5 !important;
}

.text-success {
    color: #009658 !important;
}

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

.text-danger {
    color: #e91e63 !important;
}

.btnAnimated {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.btnAnimated::before {
    content: "";
    position: absolute;
    left: -30%;
    top: 0;
    bottom: 0;
    width: 100%;
    -webkit-transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
    background: #ffffff10;
    -webkit-clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
    z-index: -1;
}

.btnAnimated:hover:before {
    left: -20%;
}

.card,
.accordion .item {
    background: #fff;
    border-radius: 20px;
}

.card .card-header,
.accordion .item .head {
    color: var(--main-text-color);
    font-size: 18px;
    font-weight: 600;
    padding: 18px 22px;
    border-bottom: 1px solid var(--bg);
}
.accordion .item .head {
    cursor: pointer;
}
.card .card-header.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.card .card-footer {
    color: var(--main-text-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding: 20px;
    border-top: 1px solid var(--bg);
}
.accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.accordion .item .body {
    padding: 20px;
}
.accordion .item .body {
    display: none;
}
.checkbox,
.radio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

[type="checkbox"],
[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px;
    min-width: 24px;
    height: 24px;
    background: #f8f9fc;
    border: 1px solid #e6e8ed;
    border-radius: 9px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-right: 7px;
    cursor: pointer;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

[type="checkbox"]:checked,
[type="radio"]:checked {
    position: relative;
    background: var(--main-color);
    border: transparent;
}

[type="checkbox"]:checked::before,
[type="radio"]:checked::before {
    content: "\ead7";
    position: absolute;
    font-family: "nivu";
    color: #fff;
    border-radius: 100%;
    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;
    font-size: 12px;
}

.checkbox label,
.radio label {
    font-size: 16px;
    color: var(--main-color);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.switch {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.switch > span {
    width: 34px;
    height: 20px;
    display: block;
    background: #fff;
    border-radius: 12px;
    position: relative;
}

.switch > span::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    background: var(--main-color);
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.switch > label {
    margin-left: 5px;
}

.switch.active > span {
    background: var(--main-color);
}

.switch.active > span::before {
    left: calc(100% - 17px);
    background: #fff;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    padding: 30px 12px;
    background: #262b37ed;
    z-index: 1060;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}

.modal .modal-content {
    position: relative;
    left: 50%;
    top: 50vh;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    max-width: 750px;
    width: 100%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    opacity: 0;
    padding: 15px;
    padding-bottom: 75px;
}

.modal .modal-content.modal-lg {
    max-width: 1100px;
}

.modal .modal-content .modalArea {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--secondary-dark-color);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 30px;
}

.modal .modal-content .modalArea .modal-close {
    position: absolute;
    right: -5px;
    top: -5px;
    font-size: 22px;
    width: 35px;
    height: 35px;
    color: #777b91;
    background: #2d3144;
    border: 2px solid var(--secondary-dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    cursor: pointer;
    transition: 0.2s;
}

.modal .modal-content .modalArea .modal-close:hover {
    background: #393e54;
}

.modal.show {
    opacity: 1;
    visibility: visible;
    display: block;
}

.modal.show .modal-content {
    top: 6vh;
    opacity: 1;
}

.modalHead h6 {
    font-size: 18px;
}

.modalHead {
    padding: 20px;
    border-bottom: 1px solid var(--secondary-color);
    color: var(--bg);
    font-size: 16px;
    font-weight: 500;
}

.modalFoot {
    padding: 15px;
    border-top: 1px solid var(--secondary-color);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.modalFoot .butto {
    border-radius: 15px;
}
.modal[data-modal="chatIMG"] .chatIMGShow {
    width: 100%;
    max-width: 1200px;
    max-height: calc(100vh - 20px);
    border-radius: 28px;
}

.modal[data-modal="chatIMG"] .modal-content .modalArea {
    width: fit-content;
    padding: 0;
}

.modal[data-modal="chatIMG"] .modal-content {
    width: fit-content;
}
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover {
    position: relative;
    z-index: 1;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    font-size: 15px !important;
    font-weight: 400 !important;
    text-align: center;
    position: absolute;
    width: max-content;
    max-width: 239px;
    top: calc(90% + 5px);
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    background-color: #151b2cba;
    padding: 5px 15px;
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
    z-index: 99;
    pointer-events: none;
}
[data-tooltip]:hover:before {
    opacity: 1;
    visibility: visible;
    top: calc(100% + 5px);
}

[data-tooltip]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(90% + 1px);
    transform: translateX(-50%);
    border-color: transparent transparent #151b2cba transparent;
    border-style: solid;
    border-width: 0px 4px 4px 4px;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}

[data-tooltip]:hover:after {
    opacity: 1;
    visibility: visible;
    top: calc(100% + 1px);
}
/* PLATCOLORS */
[data-platform="main"] {
    --pcolor: var(--main-color);
}
[data-platform="instagram"] {
    --pcolor: #d9417a;
}
[data-platform="twitter"] {
    --pcolor: #5677d6;
}
[data-platform="tiktok"] {
    --pcolor: #453a61;
}
[data-platform="discord"] {
    --pcolor: #5466e2;
}
[data-platform="twitch"] {
    --pcolor: #8224d2;
}
[data-platform="facebook"] {
    --pcolor: #414aa3;
}
[data-platform="youtube"] {
    --pcolor: #db3050;
}
[data-platform="snapchat"] {
    --pcolor: #dca22e;
}
[data-platform="spotify"] {
    --pcolor: #46983b;
}
[data-platform="telegram"] {
    --pcolor: #4b6fb2;
}
[data-platform="tumblr"] {
    --pcolor: #34496e;
}
[data-platform="kwai"] {
    --pcolor: #f76e05;
}
[data-platform="pubg"] {
    --pcolor: #e07914;
}
[data-platform="dolap"] {
    --pcolor: #1fbb8f;
}
[data-platform="tinder"] {
    --pcolor: #fc506a;
}
/* PLATCOLORS END */

/* THEME */

header nav.menu {
    display: flex;
    align-items: center;
}

header {
    padding: 20px 0;
    position: fixed;
    z-index: 9;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    right: 0;
    height: 85px;
}
header::before,
header::after {
    content: "";
    position: absolute;
    top: 0;
    width: 0%;
    bottom: 0;
    background-color: var(--secondary-dark-color);
    opacity: 0;
    transition: 0.5s;
    z-index: -1;
}
header::before {
    left: 0%;
}
header::after {
    right: 0;
}
header.scrolled::before,
header.scrolled::after {
    opacity: 0.95;
    width: 50%;
}
header a.logo img {
    display: block;
    height: 40px;
    width: auto;
}
header a.logo img.mobile {
    display: none;
}
header .navArea {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
header ul.navLinks {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-left: auto;
}

header ul.navLinks li .nav-link {
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    user-select: none;
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
}

header ul.navLinks li .nav-link > i {
    color: var(--main-color);
    position: relative;
}

header nav.menu .navAction {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
}

header .navAction .notify {
    position: relative;
    min-width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.headWallet {
    position: relative;
    user-select: none;
    cursor: pointer;
    user-select: none;
    cursor: pointer;
    border: 1px solid #6b6f8180;
    border-radius: 12px;
    padding: 6px 10px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: 0.2s;
    min-width: 105px;
}

.headWallet .icon {
    font-size: 20px;
    color: #fff;
    display: flex;
    align-items: center;
}

.headWallet .text {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding-right: 2px;
}

.headWallet:hover .icon > i::before {
    content: "\e9fd";
}

.headWallet:hover {
    background: #6b6f8130;
}
header .navAction .notify .notifyBell,
header .headBasket,
header nav.menu .navAction .butto-login.btnActionUser {
    position: relative;
    user-select: none;
    cursor: pointer;
    user-select: none;
    cursor: pointer;
    border: 1px solid #6b6f8180;
    border-radius: 12px;
    padding: 6px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}
header .navAction .notify .notifyBell.active,
header .navAction .notify .notifyBell:hover,
header .headBasket:hover {
    background: #6b6f8130;
}
header .navAction .notify .notifyBell i,
header .headBasket > i {
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}
header .headBasket > i {
    font-size: 22px;
}
.notifyBell.active > i::before {
    content: "\ea40";
}
header .navAction .notify .notifyBell span.count,
header .headBasket .count {
    position: absolute;
    top: -2.5px;
    background: #e91e63;
    border-radius: 12px;
    color: #1b1e2c;
    text-align: center;
    font-weight: 600;
    height: 5px;
    width: 10px;
    left: calc(50% - 5px);
}

.notifyList {
    position: absolute;
    right: -56px;
    top: calc(100% - 10px);
    opacity: 0;
    visibility: hidden;
    width: 400px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 35px rgb(26 26 32 / 15%);
    transition: 0.2s;
    user-select: none;
    z-index: 3;
}

.notifyList.show {
    opacity: 1;
    visibility: visible;
    top: calc(100% + 12px);
}

.notifyList ul li {
    padding: 18px !important;
    border-bottom: 1px solid var(--bg);
    border-radius: 0 !important;
    transition: 0.2s;
}
.notifyList ul li:first-child {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
}
.notifyList ul li:last-child {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
}
.notifyList ul li:hover {
    background: #f5f8fd;
}

.notifyList::before {
    position: absolute;
    display: inline-block;
    content: "";
    top: -5px;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: 7px solid #fff;
    right: 60px;
    transition: all 0.3s ease;
    transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
}

.notifyList ul li:last-child {
    border: none;
}

.notifyList ul li span {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notifyList ul li span .icon {
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    border: none;
    color: #fff;
    font-size: 21px;
    border-radius: 15px;
}

.notifyList ul li span .text .title {
    font-weight: bold;
    color: var(--main-text-color);
    margin-bottom: 2px;
}

.notifyList ul li span .text p {
    color: var(--soft-text-color);
    line-height: 20px;
}

header nav.menu .navAction .butto-login {
    padding: 11px 22px;
    border-radius: 15px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 7px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    border: 2px solid var(--main-color);
    background: transparent;
}
header nav.menu .navAction .butto-login.btnActionUser {
    font-size: 19px;
}
header ul.navLinks li.active::before {
    content: "";
    position: absolute;
    width: 26px;
    height: 3px;
    border-radius: 5px;
    left: calc(50% - 13px);
    bottom: 0px;
    background: var(--main-color);
}

header ul.navLinks li {
    position: relative;
    padding: 8px 0;
}

header ul.navLinks li.drop {
    display: flex;
    align-items: center;
    gap: 3px;
}

header ul.navLinks li.drop::after {
    content: "\e93c";
    font-family: "nivu";
    color: #fff;
}
.menuDropArea {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(100% - 10px);
    z-index: 3;
    background: #fff;
    border-radius: 25px;
    padding: 20px;
    display: flex;
    gap: 20px;
    transition: 0.2s;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 10px 20px #54546c14;
}

.menuDropArea.show {
    top: calc(100% + 15px);
    opacity: 1;
    visibility: visible;
}

.menuDropArea::before {
    content: "";
    position: absolute;
    left: calc(50% - 20px);
    top: -9px;
    width: 25px;
    height: 10px;
    background: #fff;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.menuDropArea .area ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}

.menuDropArea .area > h6 {
    font-size: 17px;
    font-weight: 600;
    color: var(--soft-text-color);
    border-bottom: 1px solid #7b7f9314;
    padding-bottom: 12px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.menuDropArea .area ul li a {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    background: #f3f5f9;
    padding: 12px 15px;
    border-radius: 12px;
    transition: 0.2s ease;
    text-transform: capitalize;
    font-weight: 600;
    color: var(--main-text-color);
    display: flex;
    align-items: center;
    min-width: 225px;
    font-size: 16px;
    gap: 5px;
    transition: 0.2s;
}

.menuDropArea .area ul li a .icon {
    display: flex;
}

.menuDropArea .area ul li {
    padding: 0;
}

.menuDropArea .area.popi ul {
    grid-template-columns: 1fr;
}

.menuDropArea .area ul li a > .icon {
    color: var(--pcolor);
    font-size: 18px;
}

.menuDropArea .area ul li a:hover {
    background: #e3e8ed;
}

.menuDropArea .area > h6 > i {
    font-size: 18px;
}
.bgPath1 {
    opacity: 0.07;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.bgPath1 svg {
    width: 100%;
}

.bgPath1 svg path {
    min-width: 100% !important;
}
section#introArea {
    margin-top: -1px;
    overflow: hidden;
}

.intro {
    background: linear-gradient(118deg, #121726, #1b1f32);
    display: flex;
    align-items: center;
    position: relative;
    clip-path: ellipse(120% 100% at top center);
    z-index: 1;
}
.intro.bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: url(../img/ibg.webp);
    background-attachment: fixed;
    background-position: center top;
    animation: 1s ease intBG;
    animation-fill-mode: forwards;
}
.intro .content {
    display: grid;
    grid-template-columns: 1fr 350px 1fr;
    align-items: center;
    min-height: 700px;
    padding-top: 50px;
}
.intro .textCont {
    color: #fff;
    padding-top: 50px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    text-align: center;
    padding-bottom: 35px;
}
.intro .textCont::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(to top, var(--secondary-dark-color), transparent);
    z-index: -1;
}

.intro .textCont > h1.title-badge {
    padding: 12px 25px;
    border: 1px solid #fff;
    width: fit-content;
    border-radius: 15px;
    margin: 0 auto 5px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 18px;
    font-weight: 500;
}

.intro .textCont > .head {
    font-size: 35px;
    font-weight: 500;
    line-height: 52px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.intro .textCont > .head > h1 {
    display: block;
    font-weight: 900;
    font-size: 40px;
    background: -webkit-linear-gradient(309deg, #4363ff 25%, #e35ff3 75%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: -10px;
}

.intro .textCont > p {
    margin: 0;
    margin-top: 10px;
    font-size: 18px;
    line-height: 23px;
    color: #d8d8e5;
    max-width: 500px;
    margin: 0 auto;
}

.intro .boxSide {
    position: relative;
    z-index: 5;
    align-self: flex-end;
    margin-bottom: -75px;
}

.intro .boxSide img {
    display: block;
    animation: intimg 1s forwards;
    width: 100%;
    height: auto;
}

.intro img.introDots {
    position: absolute;
    opacity: 0;
    transition: 0.2s;
    animation: 1s ease intDots;
    animation-fill-mode: forwards;
    width: 600px;
    height: auto;
    left: calc(50% - 300px);
}

.introConti {
    display: flex;
    z-index: 4;
    padding-top: 70px;
    animation: 1s ease intDots;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

.introConti.left {
    padding-right: 100px;
}
.introConti.right {
    padding-left: 100px;
}

.intNotiList .item {
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 15px;
    padding-right: 25px;
    border-radius: 10px;
    min-width: 300px;
}

.intNotiList .item .icon i {
    display: block;
    font-size: 27px;
}

.intNotiList .item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0.9;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 #a3a9d73b;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.intNotiList .item .icon {
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100%;
}

.intNotiList .item .text span {
    display: block;
    font-weight: 600;
    font-size: 18px;
}
.introConti.left .intNotiList .item:nth-child(1) {
    transform: translateX(-60px);
}
.introConti.left .intNotiList .item:nth-child(2) {
    transform: translateX(-30px);
}
.introConti.right .intNotiList .item:nth-child(1) {
    transform: translateX(60px);
}
.introConti.right .intNotiList .item:nth-child(2) {
    transform: translateX(30px);
}
.introConti.left .intNotiList .item:nth-child(1)::before {
    background: rgba(217, 65, 122, 0.6);
    box-shadow: 0 8px 32px 0 rgba(217, 65, 122, 0.6);
    border: 1px solid rgba(217, 65, 122, 0.6);
}
.introConti.left .intNotiList .item:nth-child(2)::before {
    background: rgba(86, 119, 214, 0.6);
    box-shadow: 0 8px 32px 0 rgba(86, 119, 214, 0.6);
    border: 1px solid rgba(86, 119, 214, 0.6);
}
.introConti.left .intNotiList .item:nth-child(3)::before {
    background: rgba(70, 152, 59, 0.6);
    box-shadow: 0 8px 32px 0 rgba(70, 152, 59, 0.6);
    border: 1px solid rgba(70, 152, 59, 0.6);
}

.introConti.right .intNotiList .item:nth-child(1)::before {
    background: rgba(130, 36, 210, 0.6);
    box-shadow: 0 8px 32px 0 rgba(130, 36, 210, 0.6);
    border: 1px solid rgba(130, 36, 210, 0.6);
}
.introConti.right .intNotiList .item:nth-child(2)::before {
    background: rgba(220, 162, 46, 0.6);
    box-shadow: 0 8px 32px 0 rgba(220, 162, 46, 0.6);
    border: 1px solid rgba(220, 162, 46, 0.6);
}
.introConti.right .intNotiList .item:nth-child(3)::before {
    background: rgba(219, 48, 80, 0.6);
    box-shadow: 0 8px 32px 0 rgba(219, 48, 80, 0.6);
    border: 1px solid rgba(219, 48, 80, 0.6);
}

.heading {
    position: relative;
    text-align: center;
}

.heading h2 {
    font-size: 30px;
    color: #4c5473;
}

.heading h2 .mainColor {
    color: var(--main-color);
}

.heading p {
    color: #666f94;
    font-size: 16px;
}

.heading.white h2 {
    color: #fff;
}

.heading.white p {
    color: #959aac;
}

.upzone {
    background: var(--secondary-dark-color);
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 1;
    padding-top: 90px;
    margin-bottom: 35px;
}
.upzone.linear {
    background: linear-gradient(118deg, #171c2e, #1f243a);
}

.upzone.ellipse {
    clip-path: ellipse(120% 100% at top center);
}

.upzone.bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: url(../img/ibg.webp);
    background-attachment: fixed;
    background-position: center bottom;
    animation: 1s ease intBG;
    animation-fill-mode: forwards;
    opacity: 0.1 !important;
}

.upzone.bg-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: url(../img/intBG.webp);
    background-attachment: fixed;
    background-position: center bottom;
    animation: 1s ease intBG;
    animation-fill-mode: forwards;
    opacity: 0.025 !important;
}
.upzone.tab-hide {
    padding-bottom: 35px;
}
.upzone.tab-hide::after {
    display: none;
}
.upzone.tab::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 135px;
    border-top: 1px solid #ffffff12;
    background: #ffffff08;
    z-index: -1;
}

.upzone .platZone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    margin-bottom: 50px;
}

.upzone .tabzone .tabType {
    display: flex;
    align-items: center;
    border-radius: 32px;
    height: 58px;
    max-width: fit-content;
    padding-bottom: 8px;
}

.upzone .tabzone .tabType .item {
    font-size: 17px;
    padding: 13px 30px;
    border-radius: 12px;
    color: #bec2d5;
    cursor: pointer;
    min-width: max-content;
    user-select: none;
}

.upzone .tabzone .tabType .item:hover {
    background: #ffffff05;
}

.upzone .tabzone .tabType .item.active {
    color: #fff;
    background: var(--pcolor);
    font-weight: 500;
    position: relative;
}

.upzone .tabzone .tabType .item::after {
    content: "";
    position: absolute;
    left: calc(50% - 13px);
    bottom: -9px;
    width: 26px;
    height: 10px;
    background: var(--pcolor);
    clip-path: polygon(100% 0%,0% 0%,50% 99%);
    opacity: 0;
}
.upzone .tabzone .tabType .item.active::after {
    opacity: 1;
}

.tabzone {
    overflow: auto;
    margin-bottom: 10px;
    padding-bottom: 50px;
}

.upzone .platZone .heading .icon {
    width: 110px;
    height: 65px;
    border-radius: 14px;
    background: var(--pcolor);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    font-size: 28px;
    color: #fff;
    position: relative;
    margin-left: 10px;
}
.upzone .heading {
    position: relative;
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: space-between;
    width: 100%;
}
.upzone .heading .info {
    position: relative;
    padding-bottom: 10px;
}

.upzone .heading .info > h1 {
    font-size: 26px;
    color: #fff;
}

.upzone .heading .info > p {
    color: #9ea5b5;
}

.upzone.platform .tabzone {
    padding: 0;
}

.upzone.platform::after {
    height: 85px;
}

.platZone .reviews {
    background: #ffffff05;
    border: 1px solid #ffffff15;
    color: #dbdae7;
    padding: 5px;
    border-radius: 20px;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: 12px;
}

.platZone .reviews span {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.platZone .reviews .text {
    padding-left: 15px;
    width: max-content;
    color: #a7adbb;
}

.platZone .reviews .text .total {
    display: inline-block;
}

.platZone .reviews .icon {
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d98e20;
    border-radius: 9px;
    font-size: 24px;
}

.serviceBoxs {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.serviceBoxs .item {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    background: var(--pcolor, var(--main-color));
    padding: 14px;
    border-radius: 20px;
    position: relative;
    transition: 0.2s;
}

.serviceBoxs .item:hover {
    opacity: 0.9;
}

.serviceBoxs .item .icon {
    min-width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    border-radius: 15px;
    color: #fff;
    border: 1px dashed #ffffff42;
    background: #ffffff26;
    position: relative;
}

.serviceBoxs .item .text {
    padding-left: 5px;
    color: #fff;
    font-size: 16px;
}

.serviceBoxs .item .text span {
    display: block;
    font-weight: 600;
    font-size: 18px;
}

section#combo {
    z-index: 1;
    background: var(--secondary-dark-color);
    position: relative;
    padding: 70px 0 50px;
    overflow: hidden;
}

section#combo::before {
    content: "";
    position: absolute;
    left: calc(50% - 20px);
    top: -1px;
    width: 40px;
    height: 15px;
    background: var(--bg);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}
section#combo::after {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 100%;
    background: #ffffff05;
    right: calc(50% - 1000px);
    top: -200px;
    z-index: -1;
}
.comboHeading {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 16px;
    justify-content: space-between;
}

.comboHeading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 10px;
    background: var(--main-color);
}

.comboHeading h2 {
    color: #fff;
    font-size: 30px;
}

.comboHeading p {
    color: #b6bac9;
    font-size: 18px;
}

.comboHeading .tabs {
    display: flex;
    align-items: center;
    gap: 20px;
}

.comboHeading .tabs .tabPlat,
.comboHeading .tabs .tabType {
    display: flex;
    align-items: center;
    background: #262937;
    border: 1px solid #2a2f41;
    padding: 8px;
    border-radius: 32px;
    height: 58px;
}

.comboHeading .tabs .tabPlat .item {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    border-radius: 50px;
    cursor: pointer;
}

.comboHeading .tabs .tabPlat .item.active {
    background: var(--pcolor);
}

.comboHeading .tabs .tabType .item {
    font-size: 17px;
    padding: 10px 30px;
    border-radius: 50px;
    color: #a6afd3;
    cursor: pointer;
}

.comboHeading .tabs .tabType .item.active {
    color: #fff;
    background: var(--main-color);
    font-weight: 500;
}

.comboBoxArea {
    position: relative;
    margin-top: 50px;
    background: var(--secondary-hover-color);
    border-radius: 45px;
    z-index: 1;
}

.comboBoxArea .content {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 45px;
    z-index: 2;
}

.comboBoxArea > .image {
    position: absolute;
    left: -38px;
    bottom: 0;
    z-index: 3;
}

.comboBoxArea .image img {
    display: block;
    height: 475px;
    width: auto;
}

.comboBoxArea .content .leftBox {
    padding-left: 265px;
    padding-right: 50px;
    min-height: 450px;
    min-width: 535px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.comboBoxArea .content .leftBox::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: var(--main-color);
    z-index: -1;
    clip-path: ellipse(100% 95% at left center);
}

.comboBoxArea .content .leftBox .icon {
    font-size: 60px;
    color: #fff;
}

.comboBoxArea .content .leftBox .boxText .packTitle .comboPlatformName {
    font-size: 34px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    display: block;
}

.comboBoxArea .content .leftBox .boxText .packTitle .comboTypeName {
    color: #fff;
    font-size: 22px;
}

.comboBoxArea .content .leftBox .boxText .packTitle {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.comboBoxArea .content .leftBox .boxText .packTitle::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    border-radius: 10px;
    width: 150px;
    background: #fff;
}

.comboBoxArea .content .leftBox .boxText .packPrice {
    color: #fff;
    font-size: 28px;
}

.comboBoxArea .content .leftBox .boxText .packPrice .normalPrice {
    display: block;
    font-size: 20px;
    opacity: 0.6;
    text-decoration: line-through;
}

.comboBoxArea .content .leftBox .boxText .packPrice .newPrice {
    font-weight: 600;
}

.comboBoxArea .packBuyButton .butto-comboBuy {
    background: #fff;
    color: var(--main-color) !important;
    margin-top: 23px;
    width: 275px;
    margin-right: -64px;
    padding: 18px 25px !important;
    font-size: 20px;
    font-weight: bold;
    border-radius: 0 30px 30px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
}

.comboBoxArea .packBuyButton .butto-comboBuy i {
    font-size: 23px;
}

.comboBoxArea .content .detailArea {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    padding: 35px;
    gap: 10px;
}

.comboBoxArea .content .detailArea .item {
    background: var(--secondary-color);
    border: 1px solid #30364c;
    padding: 15px;
    border-radius: 30px;
    display: flex;
    align-items: center;
}

.comboBoxArea .content .detailArea .item .icon {
    min-width: 50px;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
    color: #fff;
    font-size: 20px;
    background: var(--main-color);
}

.comboBoxArea .content .detailArea .item .text {
    color: #939bb7;
    padding-left: 12px;
}

.comboBoxArea .content .detailArea .item .text span {
    display: block;
    font-weight: bold;
    color: #fff;
}

.comboBottomAlert {
    margin: 30px auto 0;
    width: fit-content;
    padding: 10px 15px;
    padding-left: 10px;
    border-radius: 30px;
    color: #18d3a6;
    background: #18d3a624;
    display: flex;
    align-items: center;
    gap: 6px;
}

.comboBottomAlert i {
    font-size: 20px;
}

section#aboutUsCount {
    position: relative;
    background: var(--main-color);
    padding: 25px 0;
}
section#aboutUsCount::after {
    content: "";
    position: absolute;
    left: calc(50% - 20px);
    bottom: -14px;
    width: 40px;
    height: 15px;
    background: var(--main-color);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 2;
}

.usCount {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.usCount .item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.usCount .item .icon {
    min-width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 2px dashed #fff;
    font-size: 26px;
    color: #fff;
}

.usCount .item .text {
    color: #d8dbe1;
    font-size: 18px;
    line-height: 25px;
}

.usCount .item .text span {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 28px;
}

section#vizLinkArea {
    padding-top: 60px;
    position: relative;
    overflow: hidden;
}

.vizLinkContent {
    display: grid;
    grid-template-columns: 1fr 350px 1fr;
}

.wellco {
    align-self: center;
    position: relative;
    z-index: 1;
}

.vizLinkContent .image .bgDots img {
    display: block;
    width: 550px;
    position: absolute;
    left: calc(50% - 275px);
    bottom: -300px;
    z-index: -1;
}

.vizLinkContent > .image {
    text-align: center;
    z-index: 3;
    position: relative;
}

.vizLinkContent .image .icon {
    font-size: 115px;
    color: var(--main-color);
    margin-bottom: -50px;
}

.vizLinkContent .wellco h3 {
    font-size: 35px;
    color: var(--main-color);
    line-height: 38px;
    margin-bottom: 12px;
}

.vizLinkContent .wellco h3 span {
    display: block;
    color: #4a5069;
}

.vizLinkContent .wellco p {
    color: #656e94;
    font-size: 18px;
    max-width: 385px;
}

.vizInput {
    margin-bottom: 35px;
    max-width: 410px;
    position: relative;
}

.viz-input {
    border: none;
    height: 65px;
    width: 100%;
    padding: 10px 25px;
    font-size: 16px;
    color: #687193;
    font-family: "Gilroy", sans-serif;
    border-radius: 40px;
}

.buttoVZ {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 30px;
    padding: 13px 20px;
    font-size: 17px;
}

.wellco::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -125px;
    width: 480px;
    height: 480px;
    border-radius: 100%;
    background: var(--main-color);
    z-index: -1;
    opacity: 0.05;
}

.vizLinkContent .partners h3 {
    font-size: 35px;
    color: var(--main-color);
    line-height: 38px;
}

.vizLinkContent .partners p {
    color: #656e94;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
}

.vizLinkContent .partners {
    text-align: center;
    align-self: center;
    padding-left: 50px;
    position: relative;
    z-index: 1;
}

.partnerList .item {
    display: flex;
    align-items: center;
    background: var(--main-color);
    border: 2px solid var(--main-color);
    border-radius: 50px;
    margin-bottom: 10px;
    padding: 10px;
}

.partnerList {
    max-width: 400px;
    margin: 0 auto;
}

.partnerList .item .image img {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.partnerList .item .text {
    padding-left: 12px;
    color: #dbe2eb;
    text-align: left;
}

.partnerList .item .text span {
    display: block;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.partnerList .item .link {
    margin-left: auto;
    font-size: 24px;
    padding-right: 14px;
    display: grid;
    color: #fff;
}

.partnerList .item:nth-child(even) {
    background: transparent;
    border: 2px dashed var(--main-color);
}

.partnerList .item:nth-child(even) .text {
    color: var(--main-color);
}

.partnerList .item:nth-child(even) .text span {
    color: var(--main-color);
}

.partnerList .item:nth-child(even) .link {
    color: var(--main-color);
}

section#vizLinkArea::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #d7e6f7;
    padding-top: 60px;
    clip-path: ellipse(170% 100% at top center);
}

.vizLinkContent > .image .phone img {
    margin-bottom: -50px;
}

.vizLinkContent .partners::before {
    content: "";
    position: absolute;
    left: 150px;
    width: 800px;
    height: 800px;
    border-radius: 100%;
    background: var(--main-color);
    top: -500px;
    z-index: -1;
    opacity: 0.05;
}

section#mainFaq {
    padding: 30px 0 80px;
    position: relative;
    overflow: hidden;
}

.faqBGDots img {
    display: block;
    position: absolute;
    width: 500px;
    left: calc(50% - 250px);
    top: 150px;
    z-index: -1;
    opacity: 0.1;
}

.faqList {
    margin-top: 35px;
}

.accordion.faq .item {
    background: #fff;
    border-radius: 30px;
    margin-bottom: 5px;
}

.accordion.faq .item .body {
    display: none;
}

.accordion.faq .item .head {
    display: flex;
    align-items: center;
    padding: 15px;
    color: #494e62;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.accordion.faq .item .head span {
    font-size: 17px;
}

.accordion.faq .item .head .icon {
    min-width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-color);
    border-radius: 100%;
    font-size: 15px;
    color: #fff;
    position: relative;
    z-index: 1;
    margin-right: 16px;
}

.accordion.faq .item .head .icon::before {
    content: "";
    position: absolute;
    left: -3px;
    top: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 100%;
    background: var(--main-color);
    opacity: 0.2;
    z-index: -1;
}

.accordion.faq .item .body {
    padding: 20px 30px 25px;
    color: #666f94;
    font-size: 17px;
    line-height: 22px;
    border-top: 1px solid var(--bg);
}

.accordion.faq .item.special {
    background: var(--main-color);
}

.accordion.faq .item.special .head .icon {
    background: #fff;
    color: var(--main-color);
}

.accordion.faq .item.special .head .icon::before {
    background: #fff;
}

.accordion.faq .item.special .head {
    color: #fff;
}

.accordion.faq .item.special .body {
    border-color: #ffffff10;
    color: var(--bg);
}
.faqList .accordion.faq .item {
    margin-bottom: 10px;
}

.faqList .accordion.faq {
    gap: 0;
}
.whyUsCards {
    background: var(--secondary-color);
    padding: 45px;
    border-radius: 40px;
    display: flex;
    gap: 25px;
    overflow: hidden;
    position: relative;
}

.whyUsCards .card {
    padding: 30px;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.whyUsCards .card .icon {
    position: absolute;
    right: -15px;
    top: -15px;
    min-width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 10px;
    padding-top: 10px;
    background: var(--main-color);
    border-radius: 100%;
    font-size: 25px;
    color: #fff;
    font-weight: 700;
    z-index: 1;
}

.whyUsCards .card .icon::before {
    content: "";
    position: absolute;
    left: -7px;
    top: -7px;
    right: -7px;
    bottom: -7px;
    border-radius: 100%;
    border: 2px dashed var(--main-color);
    z-index: -1;
}

.whyUsCards .card .title {
    font-size: 22px;
    font-weight: 600;
    color: #585c77;
    margin-bottom: 5px;
}

.whyUsCards .card p {
    color: #8487a0;
    font-size: 17px;
}

.whyUsCards .card.special {
    background: var(--main-color);
}

.whyUsCards .card.special .icon {
    background: #fff;
    color: var(--main-color);
}

.whyUsCards .card.special .icon::before {
    border-color: #fff;
}

.whyUsCards .card.special .title {
    color: #fff;
}

.whyUsCards .card.special p {
    color: var(--bg);
}

.whyUsCards::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 100%;
    left: -50px;
    top: -210px;
    background: #fff;
    opacity: 0.05;
}

section#reviews {
    background: var(--secondary-dark-color);
    position: relative;
}
section#reviews::after {
    content: "";
    position: absolute;
    left: calc(50% - 20px);
    bottom: -14px;
    width: 40px;
    height: 15px;
    background: var(--secondary-dark-color);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 2;
}

.reviewTop {
    background: var(--main-color);
    padding: 22px 0;
}

.reviewTop .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reviewTop .detail {
    display: flex;
    align-items: center;
}

.reviewTop .detail .icon {
    display: flex;
    color: #fff;
    font-size: 60px;
    margin-right: 15px;
}

.reviewTop .detail .text {
    color: #ced6f1;
    font-size: 18px;
}

.reviewTop .detail .text h2 {
    display: block;
    font-size: 26px;
    font-weight: 600;
    color: #fff;
}

.butto-remiewBTN {
    color: var(--main-color);
    background: #fff;
    padding: 15px 30px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    position: relative;
}

.butto-remiewBTN > i {
    font-size: 20px;
}

.butto-remiewBTN::before {
    content: "";
    position: absolute;
    left: -8px;
    top: -7px;
    right: -8px;
    bottom: -7px;
    border-radius: 40px;
    border: 2px dashed #fff;
    opacity: 0.5;
}

.reviewsArea {
    position: relative;
    padding: 50px 0;
    overflow: hidden;
    z-index: 1;
}

.reviewsArea::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 100%;
    background: #99a4cd;
    left: calc(50% - 250px);
    top: -200px;
    z-index: -1;
    opacity: 0.01;
}

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

.topDetail .info {
    width: 50%;
    text-align: right;
    padding: 12px 0;
    padding-right: 25px;
    color: #fff;
    font-size: 17px;
}

.topDetail .average {
    width: 50%;
    text-align: left;
    border-left: 1px dashed #ffffff20;
    padding: 12px 0;
    padding-left: 25px;
    color: #fff;
    font-size: 19px;
}

.topDetail .info span {
    display: block;
    font-size: 45px;
    font-weight: 600;
    line-height: 40px;
}

.topDetail .average .stars {
    font-size: 22px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 2px;
}

.reviewsList .review {
    background: #272b3c;
    padding: 30px;
    border-radius: 20px;
    position: relative;
}

.reviewsList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

.reviewsList .review .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #fff;
}

.reviewsList .review .head .name {
    font-weight: 600;
    font-size: 19px;
}

.reviewsList .review .head .name span {
    display: block;
    font-size: 15px;
    font-weight: 400;
    color: var(--main-color);
}

.reviewsList .review .head .rate {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 20px;
    color: var(--main-color);
}

.reviewsList .review .text p {
    color: #aeb5cd;
}

.reviewsList .review::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 12px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: var(--main-color);
}

.moreReviews {
    margin: 30px auto 0;
    width: fit-content;
    background: #272b3c;
    padding: 12px 23px;
    border-radius: 30px;
    color: #858eab;
    position: relative;
    cursor: pointer;
    transition: 0.2s;
}

.moreReviews::before {
    content: "";
    position: absolute;
    left: -8px;
    top: -7px;
    right: -8px;
    bottom: -7px;
    border-radius: 40px;
    border: 2px dashed #272b3c;
}

.moreReviews:hover {
    background: #2d3244;
    color: #a9b0c9;
}

section#article {
    position: relative;
    padding: 30px 0 50px;
}

section#article .container::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 70px;
    background: linear-gradient(to bottom, var(--bg), #edf4fc00);
}

section#article .container::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100px;
    background: linear-gradient(to top, var(--bg), #edf4fc00);
}

section#article .content {
    padding: 50px 0;
    max-height: 550px;
    overflow: auto;
}

section#article .content :is(h1, h2, h3, h4, h5) {
    color: #4d567a;
    margin-bottom: 10px;
}

section#article .content p {
    font-size: 18px;
    color: #5f6889;
    line-height: 22px;
    margin-bottom: 20px;
    font-weight: 400;
}

section#article .content::-webkit-scrollbar-track {
    border-radius: 20px;
    background-color: #c8d7e8;
}
section#article .content::-webkit-scrollbar {
    width: 5px;
    background-color: #f5f5f5;
}
section#article .content::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: #b3c3d4;
}

footer {
    background: var(--secondary-color);
}

footer .footerTop {
    background: var(--main-color);
    padding: 25px 0;
}

footer .footerTop .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .footerTop .info {
    display: flex;
    align-items: center;
    gap: 15px;
}

footer .footerTop .info .icon i {
    display: flex;
    font-size: 58px;
    color: #fff;
}

footer .footerTop .info .text {
    color: #cfe0f3;
    font-size: 17px;
}

footer .footerTop .info .text span {
    display: block;
    font-weight: 600;
    font-size: 24px;
    color: #fff;
}

.footerTop .action {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footerTop .action > :is(a, button) {
    color: #fff;
    font-size: 23px;
    position: relative;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    border: 2px dashed #fff;
    transition: 0.2s;
    cursor: pointer;
}

.footerTop .action > :is(a, button):hover {
    border-style: solid;
    background: #fff;
    color: var(--main-color);
}

.footerTop .action > a.footWhatsapp {
    width: auto;
    border-radius: 30px;
    padding: 5px 20px;
    font-size: 17px;
    border-style: solid;
    background: #fff;
    color: var(--main-color);
    gap: 20px;
    font-weight: 600;
}

.footerTop .action > a.footWhatsapp > i {
    font-size: 21px;
}

.footerTop .action > a.footWhatsapp:hover {
    opacity: 0.9;
}

footer .footTop {
    padding: 30px 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .footTop .alert {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 713px;
    padding-left: 0;
}

footer .footTop .alert .icon {
    min-width: 60px;
    height: 60px;
    border-radius: 100%;
    background: var(--main-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
}

footer .footTop .alert .text {
    color: #fff;
    font-size: 16px;
}

footer .footTop .action {
    display: flex;
    align-items: center;
}

footer .footTop .action .footLogo img {
    height: 40px;
}

footer .footTop .action .socialMedias {
    margin-left: 25px;
    border-left: 1px dashed #ffffff40;
    padding: 10px 0;
    padding-left: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

footer .footTop .action .socialMedias .item {
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-color);
    border-radius: 100%;
    color: #fff;
    font-size: 21px;
}

.footerBody .footBody {
    background: var(--secondary-dark-color);
}

.footerBody .footBody .footMenu {
    text-align: center;
}

.footBody .footMenu .tabsArea .tabHead {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    border: 2px solid var(--secondary-dark-color);
    width: fit-content;
    margin: 0 auto;
    padding: 0 8px;
    border-radius: 50px;
    height: 60px;
    position: relative;
    transform: translateY(-30px);
}

.footBody .footMenu .tabsArea .tabHead .item {
    padding: 0 35px;
    color: #828bad;
    cursor: pointer;
    border-radius: 50px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 500;
    background: transparent;
    transition: 0.2s;
    user-select: none;
}

.footBody .footMenu .tabsArea .tabHead .item.active {
    color: #fff;
    background: var(--main-color);
}

.footMenuList ul {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(4, 1fr);
}

.footMenuList ul li a.item {
    background: var(--secondary-color);
    display: block;
    padding: 17px;
    font-size: 17px;
    padding-left: 41px;
    border-radius: 30px;
    font-weight: 500;
    color: #bec6e3;
    text-align: left;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.4s;
}

.footMenuList ul li a.item::before {
    content: "";
    position: absolute;
    left: 15px;
    top: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: var(--main-color);
    transition: 0.3s;
    z-index: -1;
}

.footMenuList ul li a.item:hover:before {
    left: -35px;
    top: calc(50% - 25px);
    right: 0;
    bottom: 0;
    height: 50px;
    width: 50px;
}

.footMenuList ul li a.item:hover {
    color: #fff;
    padding-left: 30px;
    background: #242836;
}

.tabContent .tabitem {
    display: none;
}

.tabContent .tabitem.show {
    display: block;
}

footer .footBottom {
    background: var(--secondary-color);
}

footer .footBottom .container {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer .footBottom .container .copyright {
    color: #a7afd0;
}

footer .footBottom .container .paymentMethods img {
    display: block;
}
.mobileNav {
    display: none;
}
.mobileMenu {
    display: none;
}
body.piscroll .bottomMenu {
    bottom: -120px;
}
.bmAction .el .tabHead {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-dark-color);
    border: 1px solid var(--secondary-hover-color);
    max-width: 300px;
    margin: 0 auto;
    padding: 5px;
    border-radius: 20px;
    position: relative;
}

.bmAction .el.support .tabHead {
    max-width: 100%;
    margin-bottom: 12px;
    background: var(--secondary-color);
}

.bmAction .el .tabHead .item {
    padding: 0 25px;
    color: #828bad;
    cursor: pointer;
    border-radius: 15px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    transition: 0.2s;
    gap: 5px;
    user-select: none;
    font-size: 15px;
    width: 100%;
}

.bmAction .el .tabHead .item .text {
    min-width: max-content;
}

.bmAction .el .tabHead .item.active {
    color: #c9cee7;
    background: #2f354c;
}

.bmAction .el .tabHead .item .icon i {
    display: block;
    font-size: 18px;
}

.bmAction .el.basket {
    position: relative;
}
.piChatArea {
    max-height: calc(100vh - 200px);
    padding-bottom: 58px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.piChatArea::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    background: linear-gradient(to bottom, var(--secondary-dark-color), #1e213000);
    z-index: 1;
    pointer-events: none;
}

.piChatArea .inputArea {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

.piChatArea .inputArea .pim-control {
    padding-right: 65px !important;
}

.piChatArea .chatContent {
    padding: 15px 10px 15px;
    margin-bottom: 5px;
    overflow: auto;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

.piChatArea .chatContent .date span {
    text-align: center;
    padding: 4px 12px;
    background: #1c1f2c;
    border: 1px solid var(--secondary-color);
    border-radius: 30px;
    font-size: 13px;
    color: #71778f;
    font-weight: 400;
    position: relative;
}

.piChatArea .chatContent .date::before {
    content: "";
    position: absolute;
    left: 0;
    animation: 0;
    top: 50%;
    height: 1px;
    width: 100%;
    background: var(--secondary-color);
    z-index: -1;
}

.piChatArea .chatContent .date {
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    position: relative;
}

.piChatArea .chatContent .message {
    margin-bottom: 10px;
}

.piChatArea .chatContent .message .cont {
    background: transparent;
    width: fit-content;
    max-width: 90%;
    padding: 10px 13px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    font-size: 15px;
}
.piChatArea .chatContent::-webkit-scrollbar-track {
    border-radius: 20px;
    background-color: var(--secondary-color);
}

.piChatArea .chatContent::-webkit-scrollbar {
    width: 6px;
    margin: 2px !important;
    background-color: var(--secondary-dark-color);
    border-radius: 20px;
}

.piChatArea .chatContent::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: var(--secondary-hover-color);
}

.piChatArea .chatContent .message.user .cont {
    margin-left: auto;
    border-radius: 15px 0 15px 15px;
    background: var(--main-color);
    color: #ddddf1;
}

.piChatArea .chatContent .message img.chatIMG {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 0 15px 15px 15px;
    cursor: pointer;
    display: block;
    background: var(--secondary-hover-color);
    padding: 2px;
}

.piChatArea .chatContent .message.user {
    text-align: right;
}
.piChatArea .chatContent .message.user img.chatIMG {
    margin-left: auto;
    border-radius: 15px 0 15px 15px;
}

.piChatArea .chatContent .message .mesDetail {
    font-size: 14px;
    margin-bottom: 5px;
    padding: 2px;
    color: #505770;
    font-weight: 500;
    width: fit-content;
}

.piChatArea .chatContent .message.user .mesDetail {
    margin-left: auto;
}

.piChatArea .chatContent .message.root .cont {
    margin-right: auto;
    border-radius: 0 15px 15px 15px;
    background: #2f354c;
    color: #c1c1d9;
}

.piChatArea .chatContent .message .time {
    color: #ffffff50;
    font-size: 13px;
    padding-left: 10px;
    border-left: 1px solid #ffffff20;
}

.piChatArea .chatContent .message:last-child {
    margin-bottom: 0;
}

.piChatArea .inputArea .action {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
}

.piChatArea .inputArea .action .butto-chatAdd {
    cursor: pointer;
    border: 1px solid #6b6f8180;
    border-radius: 10px;
    padding: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.piChatArea .inputArea .action .butto-chatAdd:hover {
    background: #6b6f8130;
}

.piChatArea .inputArea .action .sendBTN {
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 10px 15px;
}
.piChatArea .chatContent .alert {
    color: #7e83a3;
    background: #262a3c;
    font-size: 15px;
    text-align: center;
    border-radius: 50px;
    width: fit-content;
    margin: 0 auto;
    padding: 10px 20px;
}
.piChatArea .chatContent .alert .load {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 15px;
}

.piChatArea .chatContent .alert .load .spinner i {
    display: flex;
    animation: 1.5s ease rotate infinite;
}
.piLoginForm {
    max-width: 300px;
    width: 100%;
    margin: 0 auto;
    margin-top: 15px;
}
.piLoginForm .mb-2 {
    margin-bottom: 0.3rem !important;
}

.bmAction .el .pim-control {
    width: 100%;
    height: 58px;
    padding: 10px 20px;
    border-radius: 15px;
    color: #c9cbe9;
    background: var(--secondary-color);
    border: 1px solid var(--secondary-hover-color);
    font: 16px var(--font);
}
.piShapeArea .pim-control {
    background: var(--secondary-dark-color) !important;
}
.bmAction .el .pim-control:focus {
    border-color: var(--light);
}

.bmAction .el .pim-control::placeholder {
    color: #3b4053;
}

.bmAction .el textarea.pim-control {
    resize: none;
    min-height: 80px;
    padding: 20px;
}

.bmAction .el .butto-piloginBTN {
    width: 100%;
    padding: 18px !important;
    border-radius: 18px;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.bmAction .el .piChatBTN {
    width: 100%;
    padding: 16px !important;
    border-radius: 18px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.bottomMenu {
    position: fixed;
    z-index: 29;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    pointer-events: none;
    padding: 0 7px;
    max-width: 700px;
    margin: 0 auto;
    padding-bottom: calc(env(safe-area-inset-bottom) - 25px);
}
.bottomMenu.end {
    bottom: -100px;
}
.bottomMenu .bmContent {
    background: var(--secondary-dark-color);
    border: 1px solid #ffffff10;
    padding: 10px;
    padding-right: 5px;
    transition: width 0.3s ease;
    border-radius: 30px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    pointer-events: all;
}

.bottomMenu .bmContent .bmList {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-right: 5px;
}

.bottomMenu.show .bmContent .bmList {
    padding-top: 15px;
    border-top: 1px solid #ffffff10;
}

.bottomMenu .bmContent.wwStart {
    width: fit-content;
}

.bmContent.fullW {
    width: 100% !important;
}

.bottomMenu .bmList .item {
    color: #fff;
    background: var(--secondary-color);
    border: 1px solid #ffffff07;
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 35px;
    font-size: 16px;
    position: relative;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    transition: 0.2s;
}
.bottomMenu .bmList .item:hover {
    background: var(--secondary-hover-color);
}
.bottomMenu .bmList .item.active.have::before {
    display: none;
}

.bottomMenu .bmList .item .icon {
    font-size: 20px;
}

.bottomMenu .bmList .item .text {
    opacity: 0;
    width: 0px;
    transition: 0.2s;
    margin-left: 0;
    pointer-events: none;
    transition-delay: 0.2s;
}

.bottomMenu .bmList .item .icon i {
    display: flex;
}
.bottomMenu .bmList .item span.count {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -8px;
    font-size: 11px;
    min-width: 30px;
    padding: 0 3px;
    height: 16px;
    background: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    visibility: hidden;
    opacity: 0;
    transition: 0.2s;
}
.bottomMenu .bmList .item.have span.count {
    opacity: 1;
    visibility: visible;
}
.bmContent.free-active .bmList .item span.count {
    display: none;
}
.bottomMenu .bmList .item.active span.count {
    opacity: 0;
}
.bottomMenu .bmList .item.have {
    border-color: #3765e65e;
}
.bottomMenu .bmList .item.support.have {
    border-color: #e91e6347;
}
.bottomMenu .bmList .item.support span.count {
    background: #e91e63;
}
.bottomMenu .bmList .item.active.support.have {
    border-color: var(--main-color);
}
.bottomMenu .bmList .item.tools.active .icon i::before {
    content: "\ebcc";
}
.bottomMenu .bmList .item.search.active .icon i::before {
    content: "\e9c1";
}
.bottomMenu .bmList .item.basket.active .icon i::before {
    content: "\eb96";
}
.bottomMenu .bmList .item.support.active .icon i::before {
    content: "\e955";
}
.bottomMenu .bmList .item.action.active .icon i::before {
    content: "\e938";
}

.bottomMenu .bmList .item.active .text {
    opacity: 1;
    transition: 0.2s;
    transition-delay: 0.2s;
    margin-left: 5px;
    pointer-events: all;
}

.bottomMenu .bmList .item.tools.active .text {
    width: 55px;
}
.bottomMenu .bmList .item.search.active .text {
    width: 45px;
}
.bottomMenu .bmList .item.basket.active .text {
    width: 45px;
}
.bottomMenu .bmList .item.support.active .text {
    width: 52px;
}
.bottomMenu .bmList .item.login.active .text {
    width: 37px;
}
.bottomMenu .bmList .item.action.active .text {
    width: 54px;
}

.bottomMenu .bmList .item.active {
    background: var(--main-color) !important;
    padding: 10px 20px;
}
.serviceList {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.serviceList .box {
    background: #ffffff06;
    border-radius: 15px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s;
}

.serviceList .box .icon {
    min-width: 45px;
    height: 45px;
    font-size: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #849bdb;
    background: #ffffff07;
    border-radius: 12px;
}
.serviceList .box.grid-w100 {
    text-align: center;
    justify-content: center;
}
.serviceList .box:nth-child(1) .icon {
    color: #f183ba;
}
.serviceList .box:nth-child(2) .icon {
    color: #8f9deb;
}
.serviceList .box:nth-child(3) .icon {
    color: #e2b167;
}
.serviceList .box:nth-child(4) .icon {
    color: #67e29e;
}
.serviceList .box:nth-child(5) .icon {
    color: #80b5e7;
}
.serviceList .box:nth-child(6) .icon {
    color: #d1bf82;
}

.serviceList .box .icon i {
    display: flex;
}
.serviceList .box .text {
    color: #dad9e8;
    font-weight: 400;
    font-size: 15px;
}

.serviceList .box .text span {
    display: block;
    font-weight: 500;
    color: #fff;
}
.serviceList .box .text span.top {
    color: #a9a7bb;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
}
.serviceDataList {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px 0;
}

.serviceDataList .item {
    width: 45px;
    height: 45px;
    margin-right: -5px;
    margin-left: -5px;
    position: relative;
    z-index: 1;
}

.serviceDataList .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50px;
    border: 2px solid #21242f;
}
.serviceList.toggle .serviceDataList .item img {
    border: 3px solid #232635;
}
.bgOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background: #29293fb3;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}
body.piBo {
    overflow: hidden;
}
body.piBo .wrapper {
    overflow: hidden;
}
body.piBo .wrapper :is(header, main, footer) {
    pointer-events: none;
}
body.piBo .bgOverlay {
    opacity: 1;
    visibility: visible;
}
body.piBo :is(header, main) {
    filter: blur(2px);
}
.piModal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    padding: 30px 12px;
    background: #262b37ed;
    z-index: 1060;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}
.piModal .piOverlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
.piModal .piMoPosi {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    transition: transform 0.4s ease-out;
    transform: translate(0, -50px);
}
.piModal.show {
    opacity: 1;
    visibility: visible;
    display: block;
}
.piModal.show .piMoPosi {
    transform: none;
}
.bmOrder .close {
    position: absolute;
    right: 15px;
    top: 15px;
    min-width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    background: #ffffff06;
    border-radius: 12px;
    cursor: pointer;
    z-index: 2;
    transition: 0.2s;
}
.bmOrder .close i {
    display: block;
    position: relative;
    top: 1px;
}
.bmOrder .close:hover {
    background: #ffffff10;
}
.piModal .bmOrder {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--secondary-dark-color);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    padding: 15px;
}
.bmOrder .orderContent .packTitle {
    margin-bottom: 20px;
    padding: 10px;
    padding-right: 40px;
    position: relative;
}

.bmOrder .orderContent .packTitle h2 {
    font-size: 22px;
    color: #fff;
    font-weight: 600;
    text-align: left;
}
.bmOrder .orderContent .packTitle p {
    text-align: left;
    color: #a0a4b8;
    margin-bottom: 5px;
}

.bmOrder .orderContent .packTitle::after {
    content: "";
    position: absolute;
    left: 10px;
    width: 50px;
    height: 4px;
    background: var(--main-color);
    bottom: -2px;
    border-radius: 10px;
}

.piDetailToggle .content {
    margin-top: 15px;
}

.bmOrder .InfoCont .head {
    position: relative;
}

.bmOrder .InfoCont .head h3 {
    text-align: center;
    color: #d2d6ea;
    font-weight: 500;
    font-size: 18px;
}

.bmOrder .InfoCont .head p {
    text-align: center;
    color: #a0a4b8;
    margin-bottom: 15px;
}

.bmOrder .InfoCont .inpArea {
    position: relative;
}

.bmOrder .InfoCont .inpArea .basket-control {
    border: none;
    color: #fff;
    background: #1a1d2a;
    border: 1px solid #33374c;
    height: 65px;
    padding: 20px;
    border-radius: 12px;
    width: 100%;
    font-family: "Gilroy", sans-serif;
    font-size: 16px;
}

.bmOrder .checkContHE {
    opacity: 0.3;
    pointer-events: none;
    transition: 0.2s;
}

.bmOrder .checkContHE .load {
    display: none;
    animation: 1s linear rotate infinite;
}

.bmOrder .checkContHE.waiting-control .load {
    display: flex;
}

.bmOrder .checkContHE.waiting-control .text {
    display: none;
}

.bmOrder .checkContHE.active {
    opacity: 1;
    pointer-events: all;
}

.bmOrder .InfoCont .inpArea .butto {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
}

.bmOrder .InfoCont .inpArea .basket-control::placeholder {
    color: #605f74;
}

.bmAction .el {
    display: none;
    margin-bottom: 15px;
    max-height: calc(100vh - 120px);
    overflow: auto;
    border-radius: 15px;
    padding-right: 5px;
}
.bmAction .el::-webkit-scrollbar-track {
    border-radius: 20px;
    background-color: var(--secondary-hover-color);
}

.bmAction .el::-webkit-scrollbar {
    width: 5px;
    margin: 2px !important;
    background-color: var(--secondary-color);
    border-radius: 20px;
}

.bmAction .el::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: var(--secondary-color);
}
.bmAction .el.search {
    position: relative;
}
.bmAction .el.search .form-control {
    width: 100%;
    border: none;
    border-radius: 20px;
    height: 60px;
    padding: 20px;
    background: var(--secondary-color);
    font-family: "Gilroy", sans-serif;
    font-size: 16px;
    color: #fff;
    position: relative;
}

.bmAction .el.search .form-control::placeholder {
    color: #767795;
}
button.hidden {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    right: 0;
    top: 0;
}
.bmAction .el.search .butto {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 18px;
}

.bmAction .el.search .butto i {
    display: flex;
}
.bmAction .el.tools .cont {
    background: var(--secondary-color);
    border-radius: 20px;
    padding: 12px;
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bmAction .el.tools .cont .text {
    color: #c8cada;
}

.bmAction .el.tools .cont .text span {
    display: block;
    font-weight: 600;
    color: #fff;
    font-size: 18px;
}

.bmAction .el.tools .cont .butto {
    border-radius: 10px;
    padding: 10px 20px;
}
.bmAction .el.basket .cont {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--secondary-color);
    border: 1px solid #ffffff05;
    border-radius: 18px;
    padding: 8px;
}

.bmAction .el.basket .cont .text {
    color: #96a5c1;
    font-size: 14px;
}

.bmAction .el.basket .cont .text span {
    display: block;
    font-weight: 600;
    color: #fff;
    font-size: 16px;
}

.bmAction .el.basket .cont .butto {
    border-radius: 10px;
    padding: 10px 20px;
}

.balance-modal {
    position: absolute;
    left: 0;
    top: 0;
    right: 5px;
    bottom: 0;
    z-index: 2;
    background: #181c2afa;
    border-radius: 18px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.balance-modal.show {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.balance-modal .content {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.balance-modal .content .icon {
    font-size: 45px;
    color: #fff;
    position: relative;
}

.balance-modal .content .top {
    transform: translateY(-30px);
    opacity: 0;
    transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.balance-modal.show .content .top {
    transform: translateY(0px);
    opacity: 1;
    transition-delay: 0.2s;
}

.balance-modal .content .action {
    transform: translateY(30px);
    opacity: 0;
    transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.balance-modal.show .content .action {
    transform: translateY(0px);
    opacity: 1;
    transition-delay: 0.2s;
}

.balance-modal .content .text h3 {
    color: #fff;
    font-size: 20px;
}

.balance-modal .content .text p {
    color: #bfc4d5;
    margin-bottom: 20px;
}

.balance-modal .content .action {
    display: flex;
    justify-content: center;
    gap: 7px;
}

.balance-modal .content .action .butto {
    border-radius: 10px;
    padding: 9px 20px;
    font-size: 15px;
}

.basketProductList {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    max-height: 244px;
    justify-content: space-between;
    border-radius: 17px;
    overflow-x: auto;
}

.basketProductList.scroll {
    padding-right: 5px;
    margin: 2px;
    margin-bottom: 5px;
}

.basketProductList::-webkit-scrollbar-track {
    border-radius: 20px;
    background-color: var(--secondary-color);
}

.basketProductList::-webkit-scrollbar {
    width: 6px;
    margin: 2px !important;
    background-color: var(--secondary-dark-color);
    border-radius: 20px;
}

.basketProductList::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: #373c50;
}

.basketProductList .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    padding: 12px 15px;
    background: var(--secondary-color);
    margin-bottom: 5px;
    border-radius: 12px;
}

.basketProductList .item .text {
    color: #b6c0d4;
    font-size: 15px;
    margin-right: 15px;
    max-width: calc(100% - 150px);
}

.basketProductList .item .text span {
    color: #fff;
    font-size: 15px;
    margin-right: 15px;
}

.basketProductList .item:last-child {
    border: none;
}

.basketProductList .item .price {
    color: #96a5c1;
    font-size: 13px;
    text-align: right;
    margin-left: auto;
    margin-right: 15px;
}

.basketProductList .item .price span {
    display: block;
    font-size: 14px;
    color: #fff;
    font-weight: 500;
}

.basketProductList .item .remove {
    min-width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    background: var(--secondary-hover-color);
    border-radius: 10px;
    cursor: pointer;
    z-index: 2;
    transition: 0.2s;
}

.basketProductList .item .text > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

.basketProductList .item .text > span.productInfo {
    color: #96a5c1;
    font-size: 14px;
    max-width: 290px;
}

.basketProductList .item .remove {
    min-width: 32px;
    height: 32px;
    font-size: 22px;
}

.basketProductList .item .price {
    margin-right: 12px;
}

.basketProductList .item .remove:hover {
    background: #68739130;
}

.bmAction .el .piShapeArea {
    border-radius: 20px;
    background: var(--secondary-color);
    padding: 25px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.bmAction .el .piShapeArea::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: url(https://demo.nivupro.com/themes/elissa/img/des2.png);
    background-size: cover;
    opacity: 0.3;
}

.bmAction .el .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.bmAction .el .list .item {
    background: var(--secondary-color);
    border-radius: 20px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 7/6;
    gap: 5px;
    transition: 0.2s;
    position: relative;
}
.bmAction .el .list .item:hover {
    background: var(--secondary-hover-color);
}

.bmAction .el .list .item .icon {
    font-size: 38px;
    height: 36px;
    display: flex;
    align-items: center;
    color: #fff;
    margin-bottom: 5px;
}

.bmAction .el .list .item .text {
    letter-spacing: .5px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
}

.bmAction .el .list .item .text .subtext {
    display: block;
    text-align: center;
    color: #9d9eaf;
    font-size: 14px;
    text-transform: capitalize;
}

.bmAction .el .list .item .text .subtext.soon {
    color: #c7ad8d;
}

.bmAction .el .list .item.logout {
    grid-column: 1 / -1;
    aspect-ratio: auto;
    flex-direction: revert;
    background: #e91e63;
    border-radius: 15px;
    padding: 15px;
}
.bmAction .el .list .item span.haveOrder {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 12px;
    font-weight: 500;
    background: #b4bbd926;
    min-width: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 10px;
    padding: 2px 10px;
}

.bmAction .el .list .item.logout > .icon {
    font-size: 18px;
    margin: 0;
}

.bmAction .el .list .item .icon i {
    display: flex;
}

.bmAction .el .list .item.logout .text {
    letter-spacing: 0;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
}

.bmAction .el .piActionList {
    display: grid;
    gap: 15px;
}
.piActionList .puserBox {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    background: var(--secondary-color);
    border-radius: 20px;
    padding: 9px;
}

.piActionList .puserBox .user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.piActionList .puserBox .user .avatar {
    width: 50px;
    height: 50px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid #6b6f8140;
    background: var(--secondary-dark-color);
    color: #fff;
}

.piActionList .puserBox .user .info span.name {
    font-weight: 600;
    color: #fff;
    display: block;
}

.piActionList .puserBox .user .info span.verified {
    font-size: 14px;
    color: #a4a6bf;
}

.piActionList .puserBox .user .info {
    line-height: 18px;
}

.piActionList .puserBox .action {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 7px;
}
.headWallet .text .add {
    display: none;
}

.headWallet:hover .text .add {
    display: block;
}

.headWallet:hover .text .funds {
    display: none;
}

.piActionList .puserBox .action .butto {
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 500;
    transition: 0.2s;
}

.piActionList .puserBox .action .piAct-addFunds {
    border-color: var(--main-color);
}

.piActionList .puserBox .action .piAct-logout {
    border-color: #e91e63;
}

.piActionList .puserBox .action .butto > i {
    font-size: 18px;
}

.bmAction .addFunds {
    padding: 3px;
    padding-top: 0;
    display: none;
}

.bmAction .addFunds .selectMethod {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.bmAction .addFunds .selectMethod .item {
    padding: 16px;
    border-radius: 12px;
    background: var(--secondary-hover-color);
    color: #fff;
    width: 100%;
    cursor: pointer;
    transition: 0.2s;
    font-weight: 600;
}

.bmAction .addFunds .selectMethod .item span {
    font-weight: 400;
    display: block;
    font-size: 14px;
    color: #bec1d1;
}

.bmAction .addFunds .selectMethod .item:hover {
    background: #31374c;
}

.bmAction .addFunds .selectMethod .item.active {
    background: var(--main-color);
}

.bmAction .addFunds .form-control {
    width: 100%;
    height: 58px;
    padding: 10px 20px;
    border-radius: 10px;
    color: #fff;
    background: #191b28;
    border: none;
    font: 16px var(--font);
}

.bmAction .addFunds .form-control::placeholder {
    color: #5c5e72;
}

.piActionList .fundsInpArea {
    position: relative;
    margin-top: 1rem;
}

.piActionList .fundsInpArea .form-control {
    border: none;
    color: #fff;
    border: 1px solid var(--main-color);
    height: 65px;
    padding: 20px;
    border-radius: 12px;
}
.bmAction .el .pim-control.piFunds-control {
    height: 65px;
}
.piActionList .fundsInpArea .piFundsBTN {
    border-radius: 12px;
    padding: 12px 20px;
    transition: 0.2s;
    pointer-events: none;
    opacity: 0.4;
}
.bmAction .havecont .close {
    width: fit-content;
    background: var(--secondary-color);
    border: 1px solid #ffffff19;
    padding: 8px 15px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    user-select: none;
}
.bmAction .havecont .close:hover {
    background: #2f354a;
}
.piActionList .fundsInpArea .action {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    top: 11px;
    right: 12px;
}
.piActionList .fundsInpArea .action .priceSymbol {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    pointer-events: none;
    opacity: 0.2;
    transition: 0.2s;
}
.piActionList .fundsInpArea .piFundsBTN.active {
    opacity: 1;
    pointer-events: all;
}
.piActionList .action.active .piFundsBTN,
.piActionList .action.active .priceSymbol {
    opacity: 1;
    pointer-events: all;
}

.piDetailToggle .productDetail {
    display: flex;
    align-items: center;
    background: #ffffff06;
    border: 1px solid #ffffff08;
    padding: 15px;
    border-radius: 15px;
}

.piAddBasket .toggle {
    display: flex;
    align-items: center;
}

.piAddBasket .toggle span.btnText {
    display: none;
}

.piBasketDeta {
    margin-top: 20px;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
}

.piBasketDeta .piShowBasket {
    padding: 12px 25px !important;
    padding-bottom: 11px !important;
    border-radius: 30px;
    text-transform: uppercase;
    font-weight: 500;
    color: #fff;
    border: 2px solid #3765e6;
    background: transparent;
    font-size: 15px;
}

.piBasketDeta .piShowBasket i {
    font-size: 18px;
    position: relative;
    top: -1px;
}

.piDetailToggle .productDetail .avatar {
    min-width: 55px;
    height: 55px;
}

.piDetailToggle .productDetail .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.piDetailToggle .productDetail .text {
    color: #abb4cb;
    margin-left: 12px;
}

.piDetailToggle .productDetail .text > span {
    display: block;
    color: #fff;
}

.piDetailToggle .productDetail .text .productHref {
    display: block;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
    margin-top: 2px;
}
.piDetailToggle .productDetail .detasi {
    display: flex;
    margin-left: auto;
}

.piDetailToggle .productDetail .detasi .action {
    display: flex;
    align-items: center;
}
.piDetailToggle .productDetail .price {
    color: #abb4cb;
    text-align: right;
    margin-right: 15px;
}

.piDetailToggle .productDetail .price span {
    display: block;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.piDetailToggle .productDetail .action .butto {
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 10px;
}

.piDetailToggle .productDetail .action .butto i {
    display: block;
    font-size: 18px;
}

.piDetailToggle .productDetail.plus {
    margin-top: 7px;
    padding: 8px 15px;
    background: #3765e612;
    border: 1px solid #3765e629;
}

.productDetail.plus .piAddBasket {
    text-transform: none !important;
    font-weight: 400 !important;
    font-size: 15px;
    padding: 8px 12px;
}
section.packArea {
    margin-bottom: 50px;
}
.packList .pack {
    border-radius: 15px;
    background: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    padding: 10px;
    border: 3px solid transparent;
}
.packList .pack .icon {
    color: #fff;
    min-width: 60px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    position: relative;
    z-index: 1;
}

.packList .pack .icon::before {
    content: "";
    position: absolute;
    left: -50px;
    top: -45px;
    bottom: -50px;
    background: var(--pcolor);
    width: 120px;
    height: 150px;
    z-index: -1;
    transform: rotate(15deg);
    border-radius: 100%;
    transition: 0.3s cubic-bezier(0, 0, 0.34, 0.81);
}
.packList .pack .action-go {
    position: absolute;
    right: -32px;
    bottom: 20px;
    width: 40px;
    top: 20px;
    min-width: 50px;
    background: var(--pcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    border-radius: 50px;
    opacity: 0.05;
    transition: 0.2s cubic-bezier(0, 0, 0.34, 0.81);
}

.packList .pack:hover .action-go {
    right: 12px;
    opacity: 1;
}
.packList .pack .text {
    padding-left: 25px;
    display: block;
    font-size: 17px;
    transition: 0.3s cubic-bezier(0, 0, 0.34, 0.81);
}

.packList .pack:hover .text {
    padding-left: 30px;
}

.packList .pack .text span {
    display: block;
    font-size: 18px;
    font-weight: bold;
    color: var(--main-text-color);
}

.packList .pack:hover .icon::before {
    top: -30px;
}
.packDetail {
    padding-top: 20px;
}
.specialBadge {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: -32px auto 0;
    max-width: fit-content;
    padding: 6px 17px;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 13px;
    background: var(--speColor);
    border: 2px solid #fff;
    border-radius: 30px;
    z-index: 2;
    position: relative;
}
.packList .pack .packDetail ul {
    max-height: 199px;
    overflow: auto;
}
.packList .pack .packDetail ul::-webkit-scrollbar-track,
.haveScroll::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
.packList .pack .packDetail ul::-webkit-scrollbar,
.haveScroll::-webkit-scrollbar {
    width: 5px;
    background-color: #f5f5f5;
}
.packList .pack .packDetail ul::-webkit-scrollbar-thumb,
.haveScroll::-webkit-scrollbar-thumb {
    background-color: #cacad1;
}
.packList .pack .packDetail ul li {
    padding: 15px 20px;
    border-bottom: 1px solid var(--bg);
    display: flex;
    align-items: center;
    font-weight: 500;
    color: var(--main-text-color);
}
.packList .pack .packDetail ul li:last-child {
    border: none;
}
.packList .pack .packDetail ul li i {
    color: var(--pcolor);
    margin-right: 10px;
    font-size: 18px;
}
.packList .pack .packAction {
    padding: 20px;
    padding-top: 15px;
}
.packList .pack .packAction .top {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.packList .pack .packAction .top .price {
    display: flex;
    align-items: center;
    color: var(--main-text-color);
    font-weight: 700;
    font-size: 22px;
    line-height: 20px;
}
.packList .pack .packAction .top .price .icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 22px;
    margin-right: 12px;
}
.packList .pack .packAction .top .price .icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: var(--secondary-color);
    border-radius: 6px;
    opacity: 0.1;
}
.packList .pack .packAction .top .oldPrice {
    font-size: 16px;
    color: var(--soft-text-color);
    text-decoration: line-through;
    font-weight: 400;
}
.packList .pack .packAction .top .addFavBtn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 18px;
    color: #d6a447;
    background: #dab16536;
    border-radius: 5px;
    cursor: pointer;
}
button.addFavBtn:hover i:before {
    content: "\ea32";
}
.packList .pack .packAction .packBtn {
    background: #46c59c;
    width: 100%;
    text-align: center;
    border-radius: 8px;
    padding: 20px !important;
}

.howArea .quotation {
    color: #bd8c32;
    background: #dab1654d;
    padding: 15px;
    text-align: center;
    border-radius: 18px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.howArea .quotation p {
    font-weight: 600;
    text-transform: uppercase;
}

.howArea .quotation::before {
    content: '"';
    font-family: sans-serif;
    position: absolute;
    left: 15px;
    top: -37px;
    font-size: 150px;
    transform: rotate(15deg);
    opacity: 0.7;
}

.howArea .quotation::after {
    content: '"';
    font-family: sans-serif;
    position: absolute;
    right: 15px;
    top: -65px;
    font-size: 150px;
    transform: rotate(195deg);
    opacity: 0.7;
}

.howBuy {
    display: grid;
    grid-template-columns: 405px auto;
    gap: 25px;
    position: relative;
    align-items: center;
    margin-bottom: 30px;
    overflow: hidden;
    z-index: 1;
    background: #fff;
    padding: 5px;
    border-radius: 25px;
}

.howBuy .content {
    padding: 20px;
    border-radius: 20px;
    padding-left: 10px;
    min-width: 100%;
}

.howBuy .content :is(h1, h2, h3, h4, h5) {
    color: var(--main-text-color);
    margin-bottom: 3px;
}

.howBuy .content p {
    font-size: 17px;
    color: var(--soft-text-color);
    line-height: 20px;
    margin-bottom: 20px;
    font-weight: 400;
    margin-bottom: 0;
}

.howBuy .media img {
    max-height: 405px;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

.howBuy .media.free img {
    max-height: 300px;
}

.howBuy .media {
    position: relative;
}

.howBuy .content ul li {
    font-size: 17px;
    color: var(--soft-text-color);
    padding-left: 20px;
    font-weight: 400;
    position: relative;
}

.howBuy .content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 10px;
    background: var(--secondary-color);
}

.howBuy .content ul li::after {
    content: "";
    position: absolute;
    left: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    opacity: 0.2;
    border-radius: 10px;
    background: var(--secondary-color);
}

.howBuy .content ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.howBuy::before {
    content: "\e9bc";
    position: absolute;
    right: -35px;
    font-family: "nivu";
    font-size: 150px;
    opacity: 0.05;
    color: var(--main-text-color);
    z-index: -1;
    top: -32px;
    transform: rotate(8deg);
}

.howBuy ol {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 25px;
    counter-reset: item-counter;
}

.howBuy ol li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid #e4e9ef;
    position: relative;
    overflow: hidden;
}

.howBuy ol li .count {
    width: 60px;
    min-width: 60px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-text-color);
    background: #eaeef3;
    border-radius: 13px;
    font-size: 28px;
    transition: .3s;
    font-weight: bold;
}
section#introArea.packPage {
    position: relative;
}
.packList .pack.category {
    background: transparent;
}

.packList .pack.category .packHead {
    border-radius: 15px;
    padding: 20px;
}

.packList .pack.category .packHead .packBtn {
    padding: 15px 25px !important;
    background-color: var(--pcolor);
}

.langArea {
    position: relative;
}

.langArea .langDrop {
    background: var(--secondary-color);
    border-radius: 4px;
    transition: 0.2s;
}

.langArea .langDrop .selectedLang {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 26px;
    cursor: pointer;
}

.langArea .langDrop .otherLangs {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 100%;
    width: 36px;
    background: var(--secondary-color);
    border-radius: 4px;
    transition: 0.2s;
    margin-bottom: 3px;
    z-index: 1;
    padding: 2px 0;
}

.langArea .otherLangs .item img {
    opacity: 0.7;
    transition: 0.2s;
}

.langArea .otherLangs .item:hover img {
    opacity: 1;
}

.langArea .otherLangs .item {
    cursor: pointer;
    height: 24px;
}

.langArea .langDrop:hover {
    background: var(--secondary-hover-color);
}

.blogWhoWhat {
    display: grid;
    grid-template-columns: 70% auto;
    gap: 20px;
}

.blogWhoWhat .blogSide {
    display: grid;
    grid-template-columns: 43% auto;
    align-items: center;
    background: #dfedfc;
    border-radius: 32px;
    border: 3px solid #e9f4ff;
    height: fit-content;
}

.blogWhoWhat .blogSide .featured {
    position: relative;
    z-index: 1;
    height: fit-content;
}

.blogWhoWhat .blogSide .featured > img {
    aspect-ratio: 1/1;
    width: 100%;
    object-fit: cover;
    border-radius: 30px;
    display: block;
}

.blogWhoWhat .blogSide .featured::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, var(--secondary-dark-color), transparent);
    border-radius: 30px;
}

.blogSide .blogList .details .title a {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blogWhoWhat .blogSide .featured .details {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 35px;
}

.blogSide .blogList .item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blogSide .blogList .item .BLimg img {
    width: 155px;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 30px;
    display: block;
    border: 3px solid #e9f4ff;
}

.blogSide .blogList {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blogSide .blogList .item .details .category {
    font-size: 14px;
    color: var(--soft-text-color);
    background: #cddcec;
    font-weight: 500;
    padding: 4px 15px;
    display: block;
    width: fit-content;
    border-radius: 10px;
    margin-bottom: 6px;
}

.featured > .badge {
    position: absolute;
    left: 15px;
    top: 15px;
    background: #ffb307;
    padding: 6px 15px;
    font-size: 16px;
    border-radius: 30px;
    z-index: 2;
}

.blogWhoWhat .blogSide .featured .details a {
    font-size: 22px;
    line-height: 28px;
    text-align: center;
    display: block;
    font-weight: 600;
    color: #fff;
}

.blogWhoWhat .blogSide .featured .details > .category {
    display: block;
    margin: 10px auto 3px;
    width: fit-content;
    background: #ffffff12;
    padding: 5px 15px;
    border-radius: 10px;
    color: #fff;
}

section#blogWhoWhat {
    padding: 60px 0 70px;
    position: relative;
    overflow: hidden;
    background: #d7e6f7;
    border-radius: 0 0 75px 75px;
}
.whoWhatSide .tabsArea .tabHead {
    display: flex;
    align-items: center;
    background: #dfedfc;
    border: 3px solid #e9f4ff;
    width: fit-content;
    padding: 0px;
    border-radius: 30px;
    margin-bottom: 7px;
}

.whoWhatSide .tabsArea .tabHead .item {
    padding: 8px 30px;
    font-weight: 500;
    color: var(--soft-text-color);
    cursor: pointer;
}

.whoWhatSide .tabsArea .tabHead .item.active {
    background: var(--main-color);
    border-radius: 30px;
    color: #fff;
}

.whatArea {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.whatArea .item {
    background: #dfedfc;
    border-radius: 26px;
    border: 2px solid #e9f4ff;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 6px;
}

.whatArea .item > a img {
    height: 74px;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

.whatArea .item h4 {
    font-size: 18px;
    padding-right: 20px;
    font-weight: 700;
}

.whatArea .item h4 a {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.whoArea {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.whoArea .item {
    position: relative;
    padding: 1px;
    background: #e9f4ff;
    border: 3px solid #e9f4ff;
    border-radius: 30px;
    height: 185px;
}

.whoArea .item img {
    width: 100%;
    height: 118px;
    object-fit: cover;
    border-radius: 25px;
    display: block;
}

.whoArea .item .title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 56px;
    font-weight: 600;
    text-align: center;
    padding: 5px 10px 10px;
}

.intro.bg.orderView {
    min-height: 275px;
}

.orderViewContent {
    display: grid;
    grid-template-columns: 360px auto 360px;
    gap: 15px;
    transform: translateY(-120px);
    z-index: 1;
    position: relative;
}

.orderViewContent .waps {
    background: #fff;
    border-radius: 35px;
    padding: 25px;
    height: fit-content;
}

.orderViewContent .butto-waps {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 15px;
    padding: 20px 25px !important;
    align-items: center;
}

.orderViewContent .butto-waps .text {
    font-size: 16px;
    font-weight: 400;
    opacity: 0.8;
}

.orderViewContent .butto-waps .statu {
    font-weight: 700;
    font-size: 16px;
}

.orderViewContent .orderTimeline {
    display: flex;
    flex-direction: column;
    padding-left: 35px;
    position: relative;
}

.orderViewContent .orderTimeline .step {
    font-size: 16px;
    color: var(--main-text-color);
    font-weight: bold;
    text-transform: uppercase;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    opacity: 0.7;
    position: relative;
    transition: 0.25s;
}

.orderViewContent .orderTimeline .step > span {
    display: block;
    font-weight: 400;
    opacity: 0.8;
    font-size: 15px;
    text-transform: capitalize;
    margin-top: 1px;
}

.orderViewContent .orderTimeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 30px;
    bottom: 30px;
    width: 8px;
    border-radius: 10px;
    background: #dbddeb;
}

.orderViewContent .orderTimeline .step.active {
    opacity: 1;
    transition-delay: 0.3s;
}

.orderViewContent .orderTimeline .step.active::before {
    content: "";
    position: absolute;
    left: -33px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 100%;
    background: var(--stepColor);
}

.orderViewContent .orderTimeline::after {
    content: "";
    position: absolute;
    left: 9px;
    width: 4px;
    height: 0px;
    top: 34px;
    background: var(--stepColor);
    border-radius: 10px;
    transition: 0.2s;
}

.orderViewContent .orderTimeline.step2::after {
    height: 60px;
}

.orderViewContent .orderTimeline.step3::after {
    height: 120px;
}

.orderViewContent .orderTimeline.step4::after {
    height: 172px;
}

.orderViewContent .waps.timeline {
    position: relative;
    overflow: hidden;
}

.orderViewContent .waps.timeline::before {
    content: "\ea6c";
    font-family: "nivu";
    position: absolute;
    right: 30px;
    top: 56%;
    transform: translateY(-50%);
    font-size: 90px;
    color: var(--main-color);
    opacity: 0.06;
}

.wapsList ul li {
    padding: 15px 0;
    border-bottom: 1px solid var(--bg);
    display: flex;
    justify-content: space-between;
    color: var(--soft-text-color);
}

.wapsList ul li:last-child {
    padding-bottom: 7px;
    border: none;
}

.wapsList ul li > span {
    color: var(--main-text-color);
    font-weight: 600;
}

.orderViewContent .caps .heading {
    position: relative;
    margin-bottom: 20px;
    margin-top: -5px;
}

.orderViewContent .caps .heading h1 {
    font-size: 22px;
    text-transform: uppercase;
    color: #fff;
}

.orderViewContent .caps .heading p {
    color: #989dab;
}

.orderViewContent .baskContent {
    background: #fff;
    padding: 25px;
    border-radius: 35px;
}

.orderViewContent .baskContent .head {
    display: flex;
    align-items: center;
    gap: 12px;
    display: none;
}

.orderViewContent .baskContent .head .icon {
    width: 60px;
    min-width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft-color);
    border-radius: 20px;
    font-size: 30px;
    color: #fff;
}

.orderViewContent .baskContent .head .detail {
    color: var(--soft-text-color);
}

.orderViewContent .baskContent .head .detail span {
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--main-text-color);
    font-size: 17px;
}

.orderViewContent .baskContent .head .badge-statu {
    margin-left: auto;
    padding: 13px 30px;
    border-radius: 15px;
    font-weight: 600;
}

.orderViewContent .baskContList {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.orderViewContent .baskContList .item {
    display: flex;
    align-items: center;
    background: #f6f7fb;
    padding: 15px;
    border-radius: 25px;
    gap: 10px;
}

.orderViewContent .baskContList .item .icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    background: var(--pcolor);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    border-radius: 12px;
}

.orderViewContent .baskContList .item .text .link {
    color: var(--soft-text-color);
    font-size: 15px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.orderViewContent .baskContList .item .text .product {
    color: var(--main-text-color);
    font-weight: bold;
}

.orderViewContent .baskContList .item .text {
    max-width: 310px;
}

.orderViewContent .baskContList .item .statu .badge {
    padding: 6px 15px;
    font-size: 14px;
    border-radius: 10px;
}

.orderViewContent .baskContList .item .statu {
    margin-left: auto;
}

.profileHead {
    background: #fff;
    margin-bottom: 25px;
}

.profileHead .profileList {
    display: flex;
    align-items: center;
}

.profileHead .profileList .item {
    padding: 22px 25px;
    border-left: 1px solid var(--bg);
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--main-text-color);
    position: relative;
    overflow: hidden;
}

.profileHead .profileList .item:last-child {
    border-right: 1px solid var(--bg);
}

.profileHead .profileList .item i {
    font-size: 17px;
}

.profileHead .profileList .item.active::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 10px;
    border-radius: 30px;
    left: calc(50% - 25px);
    bottom: -5px;
    background: var(--main-color);
}

.contentHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
}

.contentHeading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0px;
    bottom: 0px;
    width: 7px;
    border-radius: 10px;
    background: var(--main-color);
}

.contentHeading .title {
    color: var(--main-text-color);
}

.contentHeading .title p {
    color: var(--soft-text-color);
}

.contentHeading .action .orderContentDetail {
    border: 1px solid #cad3e1;
    padding: 12px 5px;
    border-radius: 18px;
    display: flex;
    align-items: center;
}

.contentHeading .action .orderContentDetail .item {
    padding: 0 20px;
    text-align: right;
    border-right: 1px solid #00000010;
    color: var(--soft-text-color);
}

.contentHeading .action .orderContentDetail .item span {
    display: block;
    font-weight: bold;
}

.contentHeading .action .orderContentDetail .item:last-child {
    text-align: left;
    border: none;
}

.profile-content-list {
    display: grid;
    grid-template-columns: auto;
    gap: 10px;
    margin-bottom: 70px;
}

.profile-content-list .item {
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
    gap: 15px;
}

.profile-content-list .item .icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--soft-text-color);
    border-radius: 12px;
    font-size: 22px;
}

.profile-content-list .item .text {
    color: var(--main-text-color);
    font-weight: bold;
    font-size: 16px;
    flex: 1;
}

.profile-content-list .item .text span {
    display: block;
    font-size: 16px;
    color: var(--soft-text-color);
    font-weight: 400;
}

.profile-content-list .item .action {
    display: flex;
    gap: 7px;
}

.profileDetail.upzone {
    padding: 110px 0 40px !important;
}

.profileDetail .wellcome {
    color: #ccd7e3;
}

.profileDetail .action {
    margin-left: auto;
}

.profileDetail.intro.bg {
    padding: 35px 0;
}

.profileDetail .container {
    width: 100%;
    display: flex;
    align-items: center;
}

.profileDetail .wellcome span {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
}

.profileDetail.intro.bg {
    clip-path: none;
    background: #1d212e;
    border-top: 1px solid #ffffff15;
}

.headWallet.pilink {
    min-width: 150px;
}

.profileDetail .avatar {
    width: 70px;
    min-width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff15;
    border-radius: 20px;
    border: 1px solid #ffffff20;
    margin-right: 15px;
    font-weight: bold;
    color: #fff;
    font-size: 20px;
}

.container.blog {
    max-width: 1300px;
}

section.blogHead {
    position: relative;
    margin-bottom: 40px;
    padding-top: 40px;
}

section.blogHead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 80%;
    background: #dbe4ef;
    clip-path: ellipse(120% 100% at top center);
}

.blogHead .featureList {
    display: grid;
    grid-template-columns: auto 65%;
    gap: 12px;
    max-width: 100%;
    position: relative;
}

.blogHead .featureList img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}

.blogHead .featureList .item {
    position: relative;
    transition: 0.1s;
}

.blogHead .featureList .item:hover {
    transform: scale(1.02);
}

.blogHead .featureList .item .linear {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, #1e2130, #1e213000);
    z-index: 1;
    border-radius: 28px;
}

.blogHead .featureList .item.single {
    height: 515px;
}

.blogHead .featureList .multi-flex {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blogHead .featureList .multi-flex:last-child {
    grid-template-columns: 60% auto;
}

.blogHead .featureList .multi-flex .flex-items {
    display: grid;
    grid-template-columns: 40% auto;
    gap: 12px;
}

.blogHead .featureList .multi-flex .flex-items:last-child {
    grid-template-columns: auto 40%;
}

.blogHead .featureList .multi-flex .flex-items .item.multi {
    height: 250px;
}

.blogHead .featureList .item .content {
    position: absolute;
    z-index: 2;
}

.blogHead .featureList .item.single .content {
    left: 20px;
    right: 20px;
    bottom: 20px;
}

.blogHead .featureList .item.single .content .title {
    text-align: center;
    display: block;
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    padding: 12px;
}

.blogHead .featureList .item.single .content .category {
    display: block;
    margin: 0 auto;
    margin-top: 12px;
    width: fit-content;
    padding: 8px 20px;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 15px;
}

.blogHead .featureList .multi-flex .flex-items .item.multi .content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 25px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    font-size: 17px;
    text-transform: uppercase;
}

.bCatList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 10px;
    margin-bottom: 30px;
}

.bCatList .item {
    color: var(--soft-text-color);
    background: #c8d3e161;
    border: 1px solid #d0dceb;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 15px;
    font-size: 17px;
    font-weight: 500;
    transition: 0.2s;
}

.bCatList .item > i {
    display: block;
}

.bCatList .item:hover {
    background: #d3deeb;
}

.title-heading {
    position: relative;
    padding-bottom: 7px;
    margin-bottom: 20px;
}
.title-heading::before {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    height: 5px;
    width: 100px;
    background: var(--main-text-color);
    border-radius: 10px;
}
.title-heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #00000010;
}
.title-heading h2 {
    font-size: 22px;
    color: var(--main-text-color);
    margin-bottom: 5px;
}
.title-heading.upper h2 {
    text-transform: uppercase;
}
.title-heading.icon h2 {
    display: flex;
    font-size: 20px !important;
    align-items: center;
}
.title-heading.icon h2 i {
    position: absolute;
    right: 0;
    opacity: 0.4;
}
.title-heading.icon::before {
    bottom: -1px;
    height: 3px;
    width: 85px;
}
.post-item {
    display: flex;
    position: relative;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgb(88 92 108 / 8%);
    margin-bottom: 15px;
    z-index: 1;
    background: #fff;
    padding: 20px;
}
.post-thumbnail {
    width: 265px;
    min-width: 265px;
    height: 170px;
    position: relative;
}
.post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
.post-information {
    width: 100%;
    position: relative;
    padding-right: 20px;
    padding-left: 5px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-self: center;
}
.post-title h3 {
    font-size: 22px;
    line-height: 28px;
    margin-bottom: 3px;
}
.post-title h3 a {
    color: var(--main-text-color);
}
.post-title h3 a:hover {
    background-image: linear-gradient(0deg, rgb(43 33 58 / 10%), rgb(43 33 58 / 10%));
    background-size: 5px 9px;
    background-repeat: repeat-x;
    background-position: bottom;
}
.post-title p {
    color: var(--soft-text-color);
    font-size: 17px;
    margin-top: 7px;
    line-height: 1.38;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.post-details {
    margin-top: 7px;
    display: flex;
    align-items: center;
    padding-top: 2px;
}
.author-info a {
    display: flex;
    align-items: center;
}
.author-info img {
    width: 25px;
    height: 25px;
    border-radius: 30px;
}
.author-info span {
    margin-left: 7px;
    font-weight: 600;
    color: var(--main-text-color);
    font-size: 15px;
}
.author-info span a span {
    margin-left: 0;
}
.post-category {
    color: var(--soft-text-color);
    font-weight: 500;
    font-size: 14px;
    background: var(--bg);
    padding: 3px 20px;
    border-radius: 8px;
    display: inline-block;
}
.post-date {
    color: var(--soft-text-color);
    font-size: 13px;
    padding-left: 5px;
}
.post-info {
    color: #96939a;
    font-size: 13px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
}
.post-info i {
    font-size: 15px;
    position: relative;
    top: 2px;
}
.post-info i:nth-last-child(1) {
    margin-left: 5px;
}

.most-popular {
    margin-bottom: 35px;
}
.most-popular-item {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 12px;
    padding-top: 12px;
    border-top: 1px solid #00000008;
}
.most-thumbnail {
    min-width: 100px;
    width: 100px;
    height: 65px;
}
.most-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.most-title {
    padding-left: 12px;
}
.article-most .most-title {
    padding-left: 12px;
    padding-right: 0;
}
.most-title .category {
    color: var(--main-color);
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
}
.most-title a {
    font-weight: 600;
    font-size: 17px;
    color: var(--main-text-color);
}
.most-title a:hover {
    background-image: linear-gradient(0deg, rgb(43 33 58 / 10%), rgb(43 33 58 / 10%));
    background-size: 5px 7px;
    background-repeat: repeat-x;
    background-position: bottom;
}

.blist-head {
    font-size: 17px;
    padding-left: 18px;
    position: relative;
    color: var(--main-text-color);
    margin-bottom: 15px;
}
.blist-head.flex {
    display: flex;
    align-items: flex-end;
}
.blist-head::before {
    content: "";
    position: absolute;
    left: 2px;
    width: 7px;
    border-radius: 16px;
    height: 100%;
    background: var(--main-color);
}
.blist-head span {
    display: block;
    font-size: 24px;
    font-weight: bold;
    margin-top: -3px;
    color: var(--main-text-color);
}
.blist-head > i {
    position: absolute;
    right: 5px;
    top: 49%;
    transform: translateY(-50%);
    font-size: 34px;
    color: var(--main-text-color);
    opacity: 0.4;
}
.blist-head .butto-more {
    background: #d6dbe5;
    font-size: 15px;
    border-radius: 15px;
    color: #687587;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    font-weight: 500;
}
.sidebar-area {
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0px 15px 20px 0 rgb(0 0 0 / 2%);
}
.categories ul {
    padding: 0;
    margin: 0;
}
.categories ul li {
    list-style: none;
    padding: 10px 5px;
    transition: 0.3s;
    border-bottom: 1px solid #00000010;
    font-weight: bold;
}
.categories ul li:hover {
    padding-left: 10px;
}
.categories ul li a {
    color: var(--main-text-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.categories ul li span {
    float: right;
    color: #ffffff;
    background: var(--main-color);
    padding: 1px 10px;
    border-radius: 27px;
    font-weight: 600;
    font-size: 13px;
    min-width: 30px;
    text-align: center;
}
.categories ul li:nth-last-child(1) {
    border-bottom: none;
    margin-bottom: 0;
}

.content-feed {
    margin-bottom: 50px;
}

section.blogContentArea {
    margin-bottom: 50px;
}
.breadcrumb {
    padding: 15px 0px;
    background: #dfe6ed;
    margin-bottom: 30px;
}
.breadcrumb ul {
    display: flex;
}
.breadcrumb ul li {
    list-style: none;
    padding-right: 5px;
    position: relative;
    min-width: fit-content;
}
.breadcrumb ul li .el {
    font-size: 14px;
    color: var(--main-text-color);
    transition: 0.3s;
    font-weight: 500;
}
.breadcrumb ul li .el:hover {
    color: var(--main-text-color);
}
.breadcrumb ul li::after {
    content: "\e946";
    font-family: "nivu" !important;
    color: var(--soft-text-color);
    position: relative;
    top: 2px;
}
.breadcrumb ul li:nth-last-child(1) span {
    font-weight: 600;
    display: block;
}
.breadcrumb ul li:nth-last-child(1):after {
    content: none;
}
.single-post h1.title {
    font-size: 30px;
    color: var(--main-text-color);
}
.article-area .bol-8 {
    max-width: 70%;
}
.article-area .bol-4 {
    max-width: 30%;
}
.article-info {
    margin: 15px 0;
    display: flex;
    align-items: center;
}
.single-post .category {
    color: #e91e63;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 3px;
}
.article-info .author-info {
    display: flex;
    align-items: center;
}
.article-info .author-info a {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #727075;
    font-size: 15px;
}
.article-info .author-info img {
    width: 30px;
    height: 30px;
}
.article-head-details {
    display: flex;
    align-items: center;
    margin-left: auto;
}
.article-head-details .item {
    border: 1px solid #d3dce7;
    padding: 4px 15px;
    margin-right: 5px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--main-text-color);
    display: flex;
    align-items: center;
}
.article-head-details .item i {
    margin-right: 5px;
}
.article-info .item.published-date {
    font-size: 13px;
    color: var(--soft-text-color);
    display: flex;
    align-items: center;
    font-weight: 500;
}
.article-info .item.published-date i {
    margin-right: 5px;
}
.article-head-details .item:nth-last-child(1) {
    margin-right: 0;
}
.single-post .post-content .post-image img {
    width: 100%;
    border-radius: 25px;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.post-content-area {
    display: flex;
}
.post-content-area .post-content.flex {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.single-post .post-body {
    padding: 25px;
    background: #fff;
    border-radius: 25px;
}

.single-post .post-body img {
    width: 100%;
    display: block;
    border-radius: 20px;
}
.pcontent-sticky ul {
    width: 60px;
    position: sticky;
    top: 30px;
    margin-right: 15px;
    background: #fff;
    padding: 1px 5px;
    border-radius: 15px;
}
.pcontent-sticky ul li {
    list-style: none;
    font-size: 27px;
    text-align: center;
    margin: 20px 0px;
    color: var(--soft-text-color);
    cursor: pointer;
}
.pcontent-sticky ul li.trending {
    color: #ffb307;
}
.pcontent-sticky ul li.likepost {
    font-size: 25px;
    margin-top: 15px;
    padding-top: 20px;
    border-top: 1px solid #00000010;
}
.pcontent-sticky ul li.likepost i {
    cursor: pointer;
    display: grid;
    margin-bottom: 4px;
    transition: 0.2s;
}
.pcontent-sticky ul li.likepost i.active {
    animation: 0.3s linear zirr;
    color: #e91e63;
}
.pcontent-sticky ul li.likepost i.active::before {
    content: "\ea24";
}
.pcontent-sticky ul li.likepost span {
    display: block;
    font-size: 14px;
    font-weight: 500;
}
.single-post .post-body p {
    color: #616a8d;
    font-size: 17px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 25px;
    letter-spacing: normal;
    margin-bottom: 20px;
}
.single-post .post-body p a {
    color: var(--soft-text-color);
    font-weight: bold;
    background-image: linear-gradient(0deg, #21293a12, #21293a12);
    background-size: 5px 7px;
    background-repeat: repeat-x;
    background-position: bottom;
    transition: 0.3s;
}
.single-post .post-body p a:hover {
    background-image: linear-gradient(0deg, #21293a22, #21293a22);
}
.post-body .badge {
    padding: 2px 12px;
    border-radius: 8px;
}
.post-bottom-area {
    padding-left: 72px;
}
.post-reaction {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    gap: 10px;
}
.post-reaction .item {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 15px;
    padding: 10px;
    width: 100%;
    text-align: center;
    transition: 0.2s;
}
.post-reaction .item.active {
    border: 1px solid var(--main-color);
}
.post-reaction .item .reaction-count {
    text-align: center;
    margin-bottom: 10px;
    font-weight: 500;
    color: #939096;
}
.post-reaction .item .reaction-svg {
    cursor: pointer;
}
.post-reaction .item .reaction-svg img {
    opacity: 0.4;
    transition: 0.2s;
}
.post-reaction .item .reaction-svg img:hover {
    opacity: 1;
}
.post-reaction .item.active .reaction-svg img {
    opacity: 1;
    animation: 0.3s linear zirr;
}
.related-post {
    margin-top: 40px;
}
.related-list {
    display: flex;
}
.related-list .item {
    margin-right: 15px;
    width: 100%;
}
.related-list .item:nth-last-child(1) {
    margin-right: 0;
}
.related-list .item a {
    display: block;
}
.related-list .item img {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 20px;
    object-fit: cover;
    display: block;
}
.related-list .item .category {
    font-size: 12px;
}
.related-list .item a.title {
    font-weight: 600;
    font-size: 16px;
    color: var(--main-text-color);
}
.post-body :is(h1, h2, h3, h4, h5) {
    color: var(--main-text-color);
    margin-bottom: 5px;
}
.post-body ul,
.post-body ol {
    color: #616a8d;
    padding-left: 20px;
    margin-bottom: 20px;
    font-size: 17px;
}
.post-body ol {
    list-style: disc;
}

.post-body ul {
    list-style: decimal;
}
.post-body blockquote {
    padding: 15px;
    padding-left: 15px;
    background: #505a9d0d;
    border-left: 4px solid #505a9d0d;
    border-radius: 15px;
}
.post-body blockquote p {
    margin-bottom: 0 !important;
}
.related-daf-sidebar {
    margin-bottom: 35px;
}
.related-daf-sidebar > .item {
    display: flex;
    align-items: center;
    padding: 10px 0px;
    background: #ececec;
    position: relative;
    overflow: hidden;
    padding: 12px;
    border-radius: 5px;
}
.related-daf-sidebar > .item > .left > img {
    display: block;
    max-width: 50px;
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 5px;
}
.related-daf-sidebar > .item > .right {
    padding-left: 10px;
}
.related-daf-sidebar > .item > .right h3 {
    font-size: 17px;
    margin-bottom: 5px;
    position: relative;
}
.single-post-comments {
    margin-top: 40px;
}
.sp-comments-area .comment {
    background: #fff;
    padding: 15px;
    border-radius: 20px;
    margin-bottom: 7px;
}
.sp-comments-area .comment .comment-content {
    display: flex;
    align-items: center;
    min-width: 100%;
}
.comment-content .spcom-detail {
    width: 100%;
}
.sp-comments-area .comment .spcom-img {
    margin-right: 12px;
}
.sp-comments-area .spcom-img img {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 15px;
    object-fit: cover;
}
.sp-comments-area .comment .spcd-top {
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sp-comments-area .comment .spcd-top span.name {
    color: var(--main-text-color);
    font-size: 16px;
    font-weight: 600;
}
.sp-comments-area .comment .spcd-top span {
    font-size: 14px;
    color: #b7bcd1;
}
.sp-comments-area .comment .spcd-bottom p {
    font-size: 16px;
    color: var(--soft-text-color);
}
.comment-reply-area .reply-input {
    display: none;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #00000010;
}
.comment-reply-area .reply-input .reply-input-flex {
    display: flex;
    align-items: center;
}
.comment-reply-area .reply-input .reply-user-img img {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: block;
}
.comment-reply-area .reply-input .reply-input-area {
    width: 100%;
    padding-left: 12px;
}
.comment-reply-area .reply-control {
    color: #716b77;
    background: #f6f6f6;
    font-size: 15px;
    width: 100%;
    min-height: 40px;
    padding: 10px 15px;
    border-radius: 5px;
    display: block;
}
.comment-reply-area .reply-control::placeholder {
    color: #afabb3;
    font-size: 15px;
}
.comment-reply-area .reply-submit {
    display: flex;
    align-items: center;
    width: 40px;
    justify-content: flex-end;
}
.reply-no-btn {
    background: none;
    color: #939096;
    font-size: 25px;
}
.commend-add-area {
    margin-top: 40px;
    margin-bottom: 70px;
}
.commend-add-area .comment-add {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 15px;
    border-radius: 20px;
}
.commend-add-area .comadd-img img {
    height: 60px;
    min-width: 60px;
    width: 60px;
    border-radius: 15px;
    object-fit: cover;
    display: block;
}
.commend-add-area .comadd-input-area {
    padding: 0 12px;
    width: 100%;
}
.commend-add-area .comadd-input-area .comadd-control::placeholder {
    color: var(--soft-text-color);
    font-weight: 400x !important;
}
.commend-add-area .comadd-input-area .comadd-control {
    color: var(--main-text-color);
    background: #f3f6f9;
    font-family: "Gilroy";
    border: none;
    font-size: 16px;
    width: 100%;
    min-height: 60px;
    padding: 20px;
    border-radius: 15px;
    font-weight: 500;
    display: block;
}
.comadd-submit {
    color: var(--soft-text-color);
    background: none;
    font-size: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.comadd-submit:hover i::before {
    content: "\ea06";
}

section#whoHead {
    background: var(--secondary-dark-color);
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 130px 0 180px;
}
section#whoHead.whatHead {
    padding: 130px 0 80px;
    border-radius: 0 0 70px 70px;
}
section#whoContent {
    transform: translateY(-100px);
    z-index: 1;
    position: relative;
    background: var(--bg);
    padding-top: 50px;
    border-radius: 50px 50px 0 0;
}

section#whoHead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: url(../img/ibg.png);
    background-attachment: fixed;
    background-position: center top;
    animation: 1s ease intBG;
    animation-fill-mode: forwards;
}

.whoHead .title h1 {
    font-size: 30px;
    color: #fff;
}

.whoHead .title {
    text-align: center;
    margin-bottom: 25px;
}

.whoHead .title p {
    color: #a0a2b1;
    font-size: 17px;
}

.whoHead .search {
    position: relative;
}

.whoHead .search .who-control {
    padding: 25px;
    height: 70px;
    border: none;
    width: 100%;
    font-size: 16px;
    font-family: "Gilroy";
    border-radius: 20px;
    color: #fff;
    background: var(--secondary-hover-color);
    border: 1px solid #ffffff12;
    transition: 0.2s;
}

.whoHead .search .who-control::placeholder {
    color: #7a8091;
}

.whoHead .search .who-control:focus {
    border-color: #ffffff20;
}

.whoHead .search {
    max-width: 750px;
    width: 100%;
    margin: 0 auto;
}

section#whoHead .container {
    width: 100%;
}

.whoHead .search .butto-who-searchBTN {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
    border-radius: 15px;
    padding: 10px 25px;
    font-size: 15px;
    font-weight: 600;
}

.whoList {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.whoList.listmain {
    grid-template-columns: repeat(4, 1fr);
}

.whoList.main {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 0;
}

.whoList.side {
    grid-template-columns: repeat(2, 1fr);
}

.whoList.side .item img {
    aspect-ratio: 1/1;
}

.whoList.side .item .title span.type {
    margin-bottom: 4px;
}

.whoList .item {
    position: relative;
    transition: 0.1s;
}
.whoList .item:hover {
    transform: scale(1.03);
}

.whoList .item img {
    width: 100%;
    object-fit: cover;
    border-radius: 25px;
    aspect-ratio: 5/6;
}

.whoList.main .item img {
    width: 100%;
    height: 204px;
    aspect-ratio: inherit;
}

.whoList.main .item .title span.type {
    margin-bottom: 5px;
    margin-top: 0;
    font-size: 14px;
}

.whoList.main .item .title {
    font-size: 16px;
}

.whoList.related {
    grid-template-columns: repeat(3, 1fr);
}

.whoList.related .item img {
    aspect-ratio: 1/1;
}

.whoList.related .item .title span.type {
    margin-top: 0;
    margin-bottom: 5px;
}

.whoList.best .item img {
    aspect-ratio: 3/4;
}

.whoList .item .linear {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, var(--secondary-color), #22263700);
    border-radius: 25px;
}

.whoList .item .title {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 22px;
    z-index: 1;
    color: #fff;
    text-align: center;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: bold;
}

.whoList .item .bestBadge {
    position: absolute;
    right: 12px;
    top: 12px;
    min-width: 35px;
    height: 35px;
    padding: 0px 10px;
    background: #ffffff25;
    border: 1px solid #ffffff20;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    z-index: 1;
}

.whoList .item .title span.nickname {
    display: block;
    font-weight: 400;
    font-size: 15px;
}

.whoList .item .title span.type {
    font-size: 15px;
    text-transform: capitalize;
    display: block;
    margin: 0 auto;
    margin-top: 5px;
    background: #ffffff15;
    border: 1px solid #ffffff12;
    width: fit-content;
    padding: 5px 15px;
    border-radius: 12px;
    font-weight: 500;
}

.whoList.last .item .title span.type {
    margin-top: 0;
    margin-bottom: 5px;
    padding: 5px 12px;
    font-size: 14px;
    border-radius: 10px;
}

.who-top-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.who-top-list .item {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    padding: 3px;
    border-radius: 20px;
}

.who-top-list .item .picture {
    display: block;
}

.who-top-list .item .picture img {
    display: block;
    width: 100px;
    max-width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 16px;
}

.who-top-list .item .text {
    color: var(--main-text-color);
    padding-left: 10px;
    font-size: 17px;
}

.who-top-list .item .text span {
    display: block;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
}

.who-top-list .item .text span.read {
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    padding-top: 5px;
    text-transform: inherit;
}

.who-top-list .item .rating {
    margin-left: auto;
    margin-right: 15px;
    background: var(--main-color);
    padding: 6px 15px;
    display: inline-block;
    min-width: 40px;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 3px 12px #3765e63d;
    cursor: pointer;
}

.showMoreButton span {
    width: fit-content;
    margin: 0 auto;
    background: transparent;
    border: 1px solid var(--soft-text-color);
    padding: 7px 15px;
    border-radius: 12px;
    color: var(--soft-text-color);
    font-weight: 500;
    font-size: 15px;
    cursor: pointer;
    transition: 0.2s;
}

.showMoreButton {
    display: flex;
    align-items: center;
}

.showMoreButton span:hover {
    background: #757ea214;
    padding: 7px 22px;
}

.whoList.profile {
    grid-template-columns: auto;
}

.whoView {
    display: grid;
    gap: 25px;
    grid-template-columns: 300px auto 325px;
}

.whoView .profile {
    position: sticky;
    top: 15px;
    height: fit-content;
}

.whoView .profile img {
    display: block;
    width: 100%;
    border-radius: 30px;
    aspect-ratio: 3/4;
    object-fit: cover;
}

.whoView .profile .head {
    position: relative;
}

.whoView .profile .head .title {
    position: absolute;
    left: 12px;
    bottom: 12px;
    right: 12px;
    background: #1a1e30ad;
    border: 1px solid #ffffff20;
    border-radius: 20px;
    padding: 15px;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    font-size: 17px;
}

.whoView .profile .head .title span {
    display: block;
    font-size: 20px;
    font-weight: bold;
}

.whoView .topDetail {
    display: flex;
    margin: 20px 0;
    gap: 8px;
}

.whoView .topDetail .item {
    background: #fff;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
}

.whoView .topDetail .item .icon {
    width: 100%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: var(--pcolor);
    border-radius: 12px;
    color: #fff;
    margin-bottom: 10px;
}

.whoView .topDetail .item .text {
    text-align: center;
    color: var(--soft-text-color);
    padding-bottom: 5px;
}

.whoView .topDetail .item .text span {
    font-weight: bold;
    font-size: 17px;
}
.single-post.who .post-body {
    margin-bottom: 20px;
    border-radius: 25px;
}
.post-content-title {
    background: #edf3fbeb;
    border: 1px solid #e8edf3;
    padding: 15px;
    text-align: center;
    border-radius: 15px;
    margin: -10px;
    margin-bottom: 20px;
}

.post-content-title h3 {
    margin: 0;
}

.quickContent .card {
    position: sticky;
    top: 15px;
}

.inlistContent ul li {
    position: relative;
    padding-left: 30px;
    border-bottom: 1px solid var(--bg);
}

.inlistContent ul li:last-child {
    border: none;
}

.inlistContent ul li a {
    padding: 12px 10px;
    display: block;
    color: var(--soft-text-color);
    font-weight: 500;
    transition: 0.2s;
}

.inlistContent ul li::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    bottom: 0;
    width: 15px;
    height: 9px;
    border-radius: 10px;
    background: var(--main-color);
    opacity: 0.5;
}

.inlistContent ul li a:hover {
    color: var(--main-color);
}

.inlistContent ul li:hover:before {
    opacity: 1;
}

.whoView .single-post .head {
    background: var(--secondary-color);
    padding: 20px 25px;
    border-radius: 25px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.whoView .single-post .head .name {
    color: #fff;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid #ffffff1a;
    font-size: 15px;
}

.whoView .single-post .head .name span {
    display: block;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
}

.whoView .single-post .head .socialinks {
    display: flex;
    align-items: center;
    gap: 3px;
}

.whoView .single-post .head .socialinks .item {
    position: relative;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    z-index: 1;
    overflow: hidden;
}

.whoView .single-post .head .socialinks .item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: -1;
    border-radius: 3px;
    opacity: 0.1;
    transition: 0.2s;
}

.whoView .single-post .head .socialinks .item:hover:before {
    background: var(--pcolor);
    opacity: 1;
}

.whoView .single-post .head .userRate {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}

.whoView .single-post .head .userRate .comment {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff20;
    color: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.whoView .single-post .head .userRate .comment:hover {
    background: #ffffff35;
}

.whoView .single-post .head .userRate .rate {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--warning) 40;
    color: var(--warning);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.whoView .single-post .head .userRate .thisRate {
    padding: 8px 12px;
    justify-content: center;
    background: #e91e63;
    color: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.whoView .single-post .head .userRate .thisComment {
    padding: 8px 12px;
    justify-content: center;
    background: var(--main-color);
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.whoView .single-post .head .userRate .rate:hover {
    background: var(--warning) 55;
}

.piLiBox {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #e91e6338;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 20px;
}

.piLiBox .icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e91e63;
    border-radius: 15px;
    font-size: 21px;
    color: #fff;
}

.piLiBox .text {
    color: #951e46;
    font-size: 17px;
}

.piLiBox .text span {
    display: block;
    font-weight: bold;
    font-size: 18px;
}

.piLiBox .action {
    margin-left: auto;
}

.piLiBox .action .buttoPiLi {
    padding: 15px 25px;
    background: #e91e63;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    font-weight: 500;
    transition: 0.2s;
}

.piLiBox .action .buttoPiLi i {
    display: block;
}

.piLiBox .action .buttoPiLi:hover {
    background: #c7225a;
}

.pack-list-content {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    height: fit-content;
}

.main-cont-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--main-text-color);
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 25px;
    z-index: 1;
}

.main-cont-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 4px;
    width: 45px;
    border-radius: 10px;
    background: var(--main-color);
}

.main-cont-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--bg);
    z-index: -1;
}

.pack-contrea {
    display: grid;
    grid-template-columns: 68% auto;
    gap: 20px;
    position: relative;
    margin-bottom: 30px;
}

.pack-list-area {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.pack-list-area .item {
    border: 2px solid var(--bg);
    padding: 20px 15px;
    border-radius: 15px;
    color: var(--main-text-color);
    cursor: pointer;
    transition: 0.4s cubic-bezier(0, 0, 0.34, 0.81);
    user-select: none;
    position: relative;
}

.pack-list-area .item .top {
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--bg);
}

.pack-list-area.funds.form .item .top {
    padding-bottom: 7px;
    margin-bottom: 7px;
    border-bottom: 1px solid var(--bg);
    border-color: var(--bg);
    text-align: left;
}

.pack-list-area.funds.form .item .bottom {
    text-align: left;
}
.pack-list-area.funds .item .top .text {
    text-align: left;
}

.pack-list-area.funds.line {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pack-list-area.funds .item::before {
    font-size: 22px;
}
.pack-list-area.funds .item.selected::before {
    font-size: 22px;
    color: var(--main-color);
}

.pack-list-area.funds .item.selected .icon {
    background: var(--main-color) !important;
    color: #fff !important;
}

.pack-list-area.funds.balance {
    gap: 7px;
}

.pack-list-area.funds.balance .item {
    padding: 12px 15px;
}

.pack-list-area.funds.balance .item .bottom {
    text-align: left;
}

.pack-list-area.funds.balance .item .tag {
    top: 7px;
    right: 6px;
    left: initial;
    transform: translate(0);
    background: #6dc78417;
    color: var(--success);
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 7px;
    transition: 0.2s cubic-bezier(0, 0, 0.34, 0.81);
}

.pack-list-area.funds.balance .item.selected .price {
    color: var(--main-color);
    font-weight: bold;
}

.pack-list-area.funds.balance .item::before {
    color: var(--main-color) !important;
    font-size: 22px;
}

.pack-list-area.funds.balance .item.selected .tag {
    right: 30px;
    opacity: 0;
    background: #6dc78417;
}

.pack-list-area .item .top span.amount {
    font-size: 21px;
    font-weight: bold;
}

.pack-list-area .item .top span.type {
    display: block;
    color: var(--soft-text-color);
    font-size: 15px;
}

.pack-list-area .item .bottom {
    text-align: center;
    line-height: normal;
}

.pack-list-area .item .bottom .old-price {
    text-decoration: line-through;
    color: var(--soft-text-color);
    opacity: 0.7;
    font-size: 13px;
}

.pack-list-area .item .bottom .price {
    font-weight: 600;
    font-size: 16px;
}

.pack-list-area .item.selected {
    border: 2px solid var(--main-color) !important;
}
.pack-list-area .item.selected .top span.amount {
    color: var(--main-color);
}
.pack-list-area .item.popi {
    border-color: #e91e63;
}

.pack-list-area .item .tag {
    display: block;
    font-size: 11px;
    min-width: max-content;
    font-weight: 500;
    color: #fff;
    background: #e91e63;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 8px;
    border-radius: 6px;
    transition: 0.4s cubic-bezier(0, 0, 0.34, 0.81);
}
.pack-list-area .item:hover {
    border: 2px solid #3765e657;
}
.pack-list-area .item.selected .top .tag {
    background: var(--main-color);
}
.pack-list-area .item.selected .bottom .price {
    color: var(--main-color);
}

.pack-list-area .item::before {
    content: "\e95e";
    position: absolute;
    color: var(--main-color);
    right: -3px;
    top: 3px;
    font-family: "nivu";
    opacity: 0;
    visibility: hidden;
    transition: 0.2s cubic-bezier(0, 0, 0.34, 0.81);
}

.pack-list-area .item.selected::before {
    opacity: 1;
    visibility: visible;
    right: 3px;
}
[data-buy_text] {
    font-size: 19px;
    font-weight: 600;
}
.amount-detail {
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    background: #f9fafb;
    height: 58px;
    border: 1px solid #e4e7eb;
    width: 100%;
    flex: 1;
}
.pack-select-bottom {
    gap: 15px;
    flex-wrap: wrap;
}

.pack-select-bottom .butto {
    min-width: 220px;
    justify-content: center;
}

.amount-detail .amount .form-floating {
    position: relative;
}

.amount-detail .el {
    color: var(--soft-text-color);
    font-size: 14px;
    padding: 0 15px;
    border-left: 1px solid #cfd8e3;
    text-align: left;
}

.amount-detail .el.first {
    border-left: none;
}

.amount-detail .el span {
    display: block;
    font-weight: bold;
    font-size: 16px;
}

.amount-detail .el.price {
    margin-left: auto;
    border-left: none;
    padding-right: 12px;
    text-align: right;
}

.amount-detail .el.price .old {
    font-size: 13px;
    font-weight: 400;
    text-align: right;
}

.amount-detail .el.price .new {
    font-size: 17px;
}

section#packAmount {
    position: relative;
    z-index: 1;
    margin-top: -50px;
}

.category-sidebar {
    background: #fff;
    border-radius: 20px;
    padding: 30px 25px;
    position: sticky;
    z-index: 1;
    overflow: hidden;
    height: fit-content;
    top: 120px;
}

.category-sidebar::before {
    content: "\e91b";
    position: absolute;
    font-family: "nivu";
    bottom: -90px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 170px;
    z-index: -1;
    color: var(--main-color);
    opacity: 0.05;
}

.sidebar-features {
    margin-bottom: 10px;
}

.sidebar-features .item {
    background: #ecf1f74f;
    border: 1px solid #9db0c73b;
    margin-bottom: 7px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 15px;
}

.sidebar-features .item .icon {
    display: flex;
    color: var(--pcolor);
    font-size: 19px;
    position: relative;
    top: 1px;
}

.sidebar-features .item .text {
    font-weight: 500;
    color: var(--main-text-color);
}

.serviceList.main {
    grid-template-columns: repeat(2, 1fr);
}

.serviceList.main .box {
    background: transparent;
    border: 1px solid var(--bg);
}
.serviceList.main.cat {
    grid-template-columns: auto;
}
.serviceList.main.cat .box {
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 6px;
}
.serviceList.main.cat .box .text {
    padding-left: 7px;
}
.serviceList.main.cat .box.end {
    padding-top: 10px;
    justify-content: center;
}
.serviceList.main .box .icon {
    background: var(--bg);
}

.serviceList.main .box .text {
    color: var(--soft-color);
}

.serviceList.main .box .text span {
    font-weight: 600;
    color: var(--main-text-color);
}

.serviceDataList .item img {
    border: 3px solid #fff;
}
.serviceList.main .box .text span.top {
    font-weight: 400;
    text-transform: capitalize;
}

.piDetailToggle .serviceList {
    margin-top: 15px;
    grid-template-columns: auto;
}

.pagination ul {
    gap: 3px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pagination ul li a {
    padding: 3px 10px;
    color: var(--soft-text-color);
    border: 1px solid #666e8526;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    min-height: 26px;
    min-width: 30px;
    transition: 0.2s;
}

.pagination ul li a i {
    font-size: 16px;
}

.pagination ul li a:hover {
    background: #666e8515;
}

.pagination ul li.active a {
    background: var(--soft-text-color);
    color: #fff;
}

.toastify {
    padding: 12px 20px;
    color: #ffffff;
    display: inline-block;
    background: linear-gradient(135deg, #73a5ff, #5477f5);
    position: fixed;
    opacity: 0;
    top: -2px;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    max-width: calc(50% - 20px);
    z-index: 99999999;
}

.toastify.bg-danger {
    background: linear-gradient(135deg, #ff73c5, #f55454);
}

.toastify.bg-success {
    background: linear-gradient(135deg, #40c080, #159c91);
}

.toastify.on {
    opacity: 1;
}

.toast-close {
    background: transparent;
    border: 0;
    color: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 1em;
    opacity: 0.4;
    padding: 0 5px;
}

.toastify-right {
    right: 15px;
}

.toastify-bottom {
    bottom: -150px;
}

.toastify-rounded {
    border-radius: 25px;
}

.toastify-avatar {
    width: 1.5em;
    height: 1.5em;
    margin: -7px 5px;
    border-radius: 2px;
}

.toastify-center {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    max-width: fit-content;
    max-width: -moz-fit-content;
}
@media only screen and (max-width: 360px) {
    .toastify-right,
    .toastify-left {
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        max-width: fit-content;
    }
}
.toastify-center {
    transform: translate(0px, -10px) !important;
}

.shaped-text-area .shaped-control {
    color: var(--main-text-color);
    background: #fff;
    border: none;
    font-family: "Gilroy", sans-serif;
    height: 70px;
    width: 100%;
    border-radius: 20px;
    padding: 20px;
    font-size: 16px;
    font-weight: 500;
}

.shaped-text-area {
    position: relative;
    margin-bottom: 45px;
}

.shaped-text-area .butto {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 12px;
    padding: 12px 20px !important;
}
#shapedText {
    margin-top: 15px;
    padding-bottom: 25px;
}
.shaped-text-area .shaped-control::placeholder {
    color: #a1afc5;
}
.shaped-texts {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.shaped-texts .item .input {
    position: relative;
}

.shaped-texts .item {
    background: #fff;
    border-radius: 20px;
    padding: 12px;
}

.shaped-texts .item .title {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 500;
    color: var(--soft-text-color);
    padding: 0px 10px 7px;
}

.shaped-texts .item .shaped-end-control {
    color: var(--main-text-color);
    background: #f2f4f7;
    border: 1px solid #e6e8fb;
    font-family: "Gilroy", sans-serif;
    height: 65px;
    width: 100%;
    border-radius: 15px;
    padding: 20px;
    font-size: 20px;
    font-weight: 500;
}

.shaped-texts .item .butto {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 12px;
    padding: 12px 20px !important;
}
.bottomMenu .free-time {
    display: none;
}
.bottomMenu.show .free-time {
    opacity: 0 !important;
    visibility: hidden !important;
}
.bmContent.free-active .free-time {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transition: 0.2s;
    opacity: 1;
    visibility: visible;
}

.bmContent.free-active .free-time::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    right: 2px;
    bottom: 2px;
    background: var(--main-color);
    opacity: 1;
    z-index: -1;
    transition: 0.2s;
    border-radius: 50px;
}

.bmContent.free-active .free-time span {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    pointer-events: none;
    transition: 0.2s;
}

.upzone.page {
    padding: 120px 0 90px;
    margin-bottom: 0;
}

.dotline {
    position: relative;
    overflow: initial !important;
}
.dotline::after {
    content: "";
    position: absolute;
    height: 8px;
    width: 50px;
    border-radius: 10px;
    bottom: -4px;
    left: calc(50% - 25px);
    background: var(--main-color);
    z-index: 1;
}

.upzone.page .container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.upzone.page .title h1 {
    color: #fff;
    font-size: 26px;
}

.upzone.page .title p {
    color: #d7d8e3;
}

.upzone.page .icon {
    width: 85px;
    min-width: 85px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-color);
    color: #fff;
    font-size: 28px;
    border-radius: 20px;
}
section#contactArea {
    margin-top: -60px;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.form-control {
    font-family: "Gilroy", sans-serif;
    font-weight: 500;
    color: var(--main-text-color);
    background: #fff;
    border: 1px solid #e5e5f5;
    padding: 0.8rem 1rem;
    height: 58px;
    border-radius: 10px;
    font-size: 16px;
    width: 100%;
    transition: 0.2s;
}

.form-control:disabled {
    color: var(--light-text);
    background: #f4f5f7 !important;
}

.form-control::placeholder {
    color: var(--light);
    font-weight: 400;
}

.form-control:focus {
    border-color: var(--light) !important;
}

.form-floating {
    position: relative;
    margin-bottom: 12px;
}

.form-floating .form-control {
    padding-top: 27px;
}
.form-floating .form-control::placeholder {
    opacity: 0;
}

.form-floating textarea {
    min-height: 85px;
}

.form-floating > label {
    color: var(--soft-text-color);
    font-weight: 400;
    position: absolute;
    top: 0;
    left: 0;
    height: 58px;
    padding: 1.15rem 1.1rem;
    font-size: 16px;
    pointer-events: none;
    border: 1px solid transparent;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
    opacity: .75;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    transform: scale(0.8) translateY(-0.27rem) translateX(0.3rem);
    opacity: 0.7;
}

.form-floating > .form-control::placeholder {
    color: transparent;
}

.contact-area {
    background: #fff;
    padding: 25px;
    border-radius: 20px;
}

.contact-sidebar {
    background: #fff;
    padding: 25px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-sidebar .content {
    border: 1px solid var(--bg);
    padding: 15px;
    background: var(--bg);
    color: var(--light);
    border-radius: 12px;
}

.contact-sidebar .item {
    border: 1px solid var(--bg);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px;
    padding-right: 20px;
    border-radius: 15px;
}

.contact-sidebar .item .icon {
    width: 50px;
    min-width: 50px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--icolor);
    color: #fff;
    border-radius: 10px;
    font-size: 20px;
}

.contact-sidebar .item .text {
    color: var(--soft-color);
    font-size: 15px;
}

.contact-sidebar .item .text span {
    display: block;
    color: var(--main-text-color);
    font-weight: 600;
}

.dropList {
    position: relative;
}
.dropList.phone {
    position: initial;
}
.dropList.mb10 {
    margin-bottom: 10px;
}
.dropListTable {
    display: none;
    border-top: 0;
    background: #fff;
    position: absolute;
    width: 100%;
    z-index: 2;
    border-radius: 15px;
    border-top: 0;
    overflow: hidden;
    box-shadow: 0 10px 15px #acacbd7d;
    max-height: 320px;
    overflow: auto;
}
.dropListTable.dark {
    background: var(--secondary-dark-color);
}
.dropListTable::-webkit-scrollbar-track {
    background-color: #f5f5f5;
}
.dropListTable::-webkit-scrollbar {
    width: 5px;
    background-color: #f5f5f5;
}
.dropListTable::-webkit-scrollbar-thumb {
    background-color: var(--soft-color);
}
.dropListTable .item {
    position: relative;
    padding: 10px 15px;
    border-bottom: 1px solid #f5f4fb;
    font-size: 16px;
    color: var(--soft-color);
    cursor: pointer;
    transition: 0.3s;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropList.light,
.dropList.selected {
    background: #fff;
    border-radius: 5px;
}

.dropList.light .dropListTitle,
.dropList.selected .dropListTitle {
    background-color: #f8f9fc;
    align-items: center;
}
.dropListTable .search {
    border-bottom: 1px solid #f5f4fb;
}

.dropList.dark .dropListTable .search {
    border-bottom: 1px solid #282d40;
}

.dropListTable .search .butto {
    display: flex;
    align-items: center;
    gap: 2px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: 0.2s;
}
.dropListTable .search .butto.show {
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

.dropListTable .item.active {
    background: #fafafb;
}
.dropListTable .item .text {
    color: #9699ad;
}
.dropListTable .item .text span {
    color: var(--soft-text-color);
    display: block;
    margin-bottom: 2px;
    display: block;
    font-size: 16px;
    font-weight: 500;
}
.dropListTable .item.active .text span {
    color: var(--main-text-color);
    font-weight: 600;
}
.dropListTable .item.active .icon {
    opacity: 1;
}
.dropListTable .item:last-child {
    border: none;
}
.dropListTable .item span span {
    font-weight: 400;
}
.dropListTable .item:hover {
    background: #fbfbfd;
}
.dropListTitle {
    position: relative;
    padding: 0.8rem 1rem;
    border: 1px solid #e5e5f5;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--soft-text);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.2s;
    transition-delay: 0.2s;
    height: 58px;
}
.dropListTitle.border-0 {
    border: 0 !important;
}
.dropListTitle .icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    font-size: 29px;
    color: var(--main-text-color);
}
.dropList.show .dropListTitle {
    background: #f5f6f9;
    transition: 0s;
}
.dropListTable .item .icon {
    display: flex;
    font-size: 22px;
    opacity: 0.2;
}
.dropListTitle::after {
    content: "\ea64";
    font-family: "nivu";
    color: #babcdb;
    position: absolute;
    right: 8px;
    font-size: 29px;
    display: flex;
    transition: 0.2s;
}
.dropListTitle.nodrop::after {
    content: "";
}
.dropList.show .dropListTitle::after {
    transform: rotateX(180deg);
}
.dropListTitle label.title {
    position: absolute;
    top: 0px;
    left: 0;
    height: 100%;
    padding: 0.85rem 1rem;
    font-weight: 500;
    color: var(--soft-text-color);
    font-size: 16px;
    pointer-events: none;
    border: 1px solid transparent;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
}

.dropList.selected .dropListTitle label.title {
    opacity: 0.6;
    transform: scale(0.8) translateY(-0.1rem) translateX(0.2rem);
}
.dropList.selected .dropListTitle .dlabName {
    color: var(--main-text-color);
    padding-top: 1.5rem;
    padding-bottom: 0.625rem;
}

.dropList.phone .dropListTitle {
    width: 100%;
    padding: 7px;
    padding-right: 26px;
    border-radius: 15px;
    font: 16px var(--font);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0s;
}
.dropList.dark .dropListTitle {
    color: #c9cbe9;
    background: var(--secondary-dark-color);
    border: 1px solid var(--secondary-hover-color);
}
.dropList.dark .dropListTable::-webkit-scrollbar-track {
    background-color: var(--secondary-hover-color);
}
.dropList.dark .dropListTable::-webkit-scrollbar {
    background-color: var(--secondary-hover-color);
}
.dropList.dark .dropListTable::-webkit-scrollbar-thumb {
    background-color: var(--soft-color);
}

.dropList.phone .dropListTable::-webkit-scrollbar-track {
    border-radius: 10px;
}
.dropList.phone .dropListTable::-webkit-scrollbar {
    width: 5px;
    border-radius: 10px;
}
.dropList.phone .dropListTable::-webkit-scrollbar-thumb {
    border-radius: 10px;
}
.dropList.phone.show .dropListTitle {
    border-color: var(--light);
    transition: 0s;
    border-right-color: var(--light) !important;
}

.dropList.phone .dropListTitle span.dlabName {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    color: var(--main-text-color);
}

.dropList.phone.dark .dropListTitle span.dlabName {
    color: #c9cbe9;
}

.dropList.phone .dropListTitle span.dlabName .title {
    position: relative;
    top: 1px;
}

.dropList.phone .dropListTitle span.dlabName .flag {
    display: flex;
    align-items: center;
}
.form-floating label.after {
    opacity: 0;
}
.form-floating > .form-control:focus ~ label.before,
.form-floating > .form-control:not(:placeholder-shown) ~ label.before {
    opacity: 0;
}
.form-floating > .form-control:focus ~ label.after,
.form-floating > .form-control:not(:placeholder-shown) ~ label.after {
    opacity: 0.8;
    transform: scale(0.8) translateY(-0.27rem) translateX(0.1rem);
}

.dropList.phone .dropListTitle span.dlabName .flag img {
    width: 18px;
    height: 18px;
    object-fit: cover;
    border-radius: 100%;
}

.dropList.dark .dropListTable {
    background: var(--secondary-color);
    box-shadow: none;
    border: 1px solid var(--secondary-hover-color);
    margin-top: 2px;
}
.dropList.phone.phone .dropListTable {
    border-radius: 15px 5px 5px 15px;
}

.dropList.dark .dropListTable .item.active {
    background: var(--secondary-hover-color);
}

.dropList.dark .dropListTable .item {
    border-color: #282d40;
}

.dropList.dark .dropListTable .item.active .text span {
    color: #d5d5eb;
}

.dropList.dark .dropListTable .item:hover {
    background: var(--secondary-color);
}

.dropList.phone .dropListTable .item .text span img {
    width: 18px;
    height: 18px;
    border-radius: 100%;
    display: block;
    object-fit: cover;
}

.dropList.phone.selected {
    background: transparent;
}

.dropList.phone.selected span.dlabName {
    padding: 0;
    padding-top: 0px;
    font-weight: 500;
    color: var(--main-text-color);
}

.pim-control[pim-floating] {
    padding-top: 22px !important;
    padding-left: 17px !important;
}

.pim-control[pim-floating]::placeholder,
[form-input-type] .form-control::placeholder {
    color: transparent !important;
}

[form-input-type].form-floating > label {
    padding-top: 18px;
    padding-left: 14px;
}

[form-input-type].form-floating > .form-control {
    padding: 15px;
    padding-top: 30px;
}

.heading .breadcrumb {
    padding: 0;
    background: transparent;
    margin: 0;
}

.heading .breadcrumb ul li a,
.heading .breadcrumb ul li a::after {
    color: #808897;
    font-size: 15px;
}

.upzone .breadcrumb ul li:nth-last-child(2)::after {
    transform: rotate(90deg);
    display: inline-block;
}

.heading.left {
    align-items: flex-start;
}

.pack-list-area.funds {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.pack-list-area.funds .item {
    border: 1px solid transparent;
    padding: 8px;
    border-radius: 15px;
    background: var(--secondary-color);
}

.pack-list-area.funds .item .top {
    border-color: #363c52;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: none;
}

.pack-list-area.funds .item .top span.amount {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}
.pack-list-area.funds .item .top span.type {
    color: var(--soft-text-color);
    font-size: 14px;
    margin-top: 2px;
}

.pack-list-area.funds.line .item::before {
    color: var(--main-color);
    font-size: 22px;
}
.pack-list-area.funds .item.selected {
    border: 1px solid #3765e669 !important;
}

.pack-list-area.funds .item .bottom .price {
    color: #fff;
}

.pack-list-area.funds .item .bottom .old-price {
    color: #999db5;
    opacity: 1;
    margin-top: 1px;
    text-decoration: none;
}

.pack-list-area.funds .item .bottom .price {
    font-size: 18px;
}

.pack-list-area.funds .item.selected .tag {
    background-color: var(--main-color);
}
.pack-list-area.funds.line.basket {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 10px;
}
.pack-list-area.funds.line.basket .top .icon {
    background: var(--secondary-dark-color);
}
.bmAction .havecont .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.bmAction .havecont .head .title span {
    text-transform: uppercase;
    font-size: 13px;
    background: var(--secondary-color);
    width: fit-content;
    border: 1px solid #ffffff19;
    padding: 9px 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    cursor: pointer;
    user-select: none;
}

input.piFunds-control::-webkit-outer-spin-button,
input.piFunds-control::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"].piFunds-control {
    -moz-appearance: textfield;
}

.basket-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #222637;
    border: 1px solid #ffffff10;
    border-radius: 18px;
    padding: 15px;
}

.basket-empty span {
    color: var(--soft-text-color);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
}

.dropList.phone.wizard .dropListTitle {
    justify-content: flex-start;
    border-radius: 15px;
}
.dropList.dark.wizard .dropListTitle {
    background: var(--secondary-color);
}

.dropList.phone.wizard .dropListTitle .dlabName {
    padding-top: 15px;
    padding-left: 9px;
}

.dropList.wizard.selected .dropListTitle label.title {
    transform: scale(0.8) translateY(-0.11rem) translateX(0.2rem);
    color: var(--soft-text-color);
    opacity: 0.8;
}

.payment-form-wizard {
    display: inline-block;
    width: 100%;
    background: #fff;
    padding: 25px;
    border-radius: 25px;
}

.payment-form-wizard > .title {
    color: var(--soft-text-color);
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: left;
    margin-bottom: 12px !important;
    padding-left: 5px;
}

.dropList.phone span.dlabName {
    padding: 0;
}

.dropList.phone .dropListTitle {
    justify-content: center;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid transparent;
    min-width: 105px;
    height: 58px;
}

[phone-control] {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.dropList.phone .dropListTable {
    max-height: 205px;
    width: 100%;
    min-width: 100%;
}

.dropListTable .search .form-control {
    height: 50px;
    border-radius: 10px;
}
.dropList.dark .dropListTable.dark .search .form-control {
    background: var(--secondary-dark-color);
}

.pack-list-area.funds.form .item {
    background: var(--secondary-color);
    border: none;
    padding: 12px 15px;
    border: 1px solid #e5e5f5;
}

.pack-list-area.funds.form {
    gap: 10px;
}

.pack-list-area.funds.form .item .top span.amount {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.pack-list-area.funds.form .item.selected {
    border-left: 3px solid var(--main-color) !important;
}

.pack-list-area.funds.form .item .bottom .price {
    font-size: 14px;
    font-weight: 500;
}

.pack-list-area.funds.form .item .top span.type {
    font-size: 14px;
    color: var(--soft-text-color);
    font-weight: 500;
}

section#payForm {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    margin-top: -65px;
    max-width: 700px;
    width: 100%;
    margin-bottom: 80px;
}

.pack-list-area.funds.form.light .item {
    background: #f8f9fc;
}

.pack-list-area.funds.form.light .item span.amount {
    color: var(--main-text-color);
}

.pack-list-area.funds.form.light .item .price {
    color: var(--soft-text-color);
}

.pack-list-area.funds.form.light .item.selected .price {
    color: var(--main-color);
}

.pack-list-area.funds.cart-form .item .top i {
    position: absolute;
    right: 15px;
    bottom: 12px;
    font-size: 12px;
    opacity: 0.2;
}

.pack-list-area.funds.form.cart-form .item .top span.amount {
    font-size: 15px;
}

.pack-list-area.funds.form.cart-form .item {
    padding: 12px;
}

.pack-list-area.funds.form.cart-form .item.selected {
    border: 1px solid #3765e669 !important;
}

.upzone .container.pay-page {
    max-width: 700px;
    justify-content: space-between;
    width: 100%;
    flex-direction: row-reverse;
}

.priceTag {
    display: flex;
    align-items: center;
    gap: 10px;
}

.priceTag .icon {
    min-width: 50px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a8accb;
    background: #f8f9fc;
    border-radius: 12px;
    font-size: 18px;
    color: var(--soft-text-color);
    border: 1px solid #e5e5f5;
}

.cont .priceTag .icon {
    min-width: 45px;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    color: #b4bbd1;
    background: #2e3346;
    border: none;
    font-size: 20px;
}

.priceTag .text {
    color: var(--soft-text-color);
    font-size: 15px;
    position: relative;
    top: 1px;
    line-height: 19px;
}

.priceTag .text span {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--soft-text-color);
}

.pack-list-area.funds.form.cart {
    grid-template-columns: repeat(2, 1fr);
}

.pack-list-area.funds.cart .item {
    border-color: var(--secondary-hover-color);
}

.pack-list-area.funds.cart .item .top {
    border-color: var(--secondary-hover-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.pack-list-area.funds.form.cart {
    margin-bottom: 10px;
}

.pack-list-area.funds.cart .item .top span.type {
    color: #bbbed3;
}

.pack-list-area.funds .item .top .icon {
    width: 45px;
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2e3346;
    border-radius: 10px;
    font-size: 15px;
    color: #b2b6c9;
    transition: 0.4s cubic-bezier(0, 0, 0.34, 0.81);
}

.pack-list-area.funds.line.basket .item .top {
    flex-direction: row-reverse;
    justify-content: space-between;
}

.pack-list-area.funds.line.basket .item .top .icon {
    height: 27px;
    width: 27px;
    min-width: 27px;
    border-radius: 10px;
    font-size: 16px;
}

.pack-list-area.funds.line.basket .item::before {
    display: none;
}

.pack-list-area.funds.line.basket .item {
    padding: 12px 15px;
}

.pack-list-area.funds.line.basket .item .top .icon i {
    opacity: 0;
    transition: 0.2s;
}

.pack-list-area.funds.line.basket .item.selected .top .icon i {
    opacity: 1;
}

.upzone.page.tool {
    padding: 120px 0;
}

section#toolList {
    position: relative;
    z-index: 1;
    margin-top: -70px;
    padding-bottom: 100px;
}

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

.tool-list .tool {
    position: relative;
}

.tool-list .tool .head {
    background: var(--pcolor);
    display: flex;
    align-items: center;
    height: 70px;
    padding: 0 20px;
    border-radius: 20px 20px 0 0;
}

.tool-list .tool .head .text {
    color: #fff;
    font-weight: 600;
    font-size: 17px;
}

.tool-list .tool .head .text span {
    display: block;
    font-weight: 400;
    font-size: 15px;
    opacity: 0.8;
}

.tool-list .tool .head .count {
    margin-left: auto;
    background: #ffffff20;
    padding: 5px 15px;
    font-size: 14px;
    color: #fff;
    border-radius: 14px;
    font-weight: 400;
}

.tool-list .tool .head .icon {
    margin-left: 15px;
    font-size: 20px;
    color: #fff;
    display: flex;
}

.tool-list .tool .list-area {
    background: #fff;
    height: 250px;
    overflow: hidden;
    transition: 0.3s cubic-bezier(0, 0, 0.34, 0.81);
}
.tool-list .tool .list {
    display: flex;
    flex-direction: column;
}

.tool-list .tool .list a {
    color: var(--soft-text-color);
    font-weight: 500;
    height: 50px;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 15px;
    border-bottom: 1px solid var(--bg);
    transition: 0.3s cubic-bezier(0, 0, 0.34, 0.81);
}

.tool-list .tool .list a.soon i {
    display: none;
}

.tool-list .tool .list a.soon span.soon {
    font-size: 12px;
    background: #ff980026;
    color: #ff9800;
    padding: 4px 10px;
    border-radius: 23px;
}

.tool-list .tool .list a:hover {
    background: #f6f7f9;
}

.tool-list .tool .more {
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #757ea28f;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    background: #fff;
    border-radius: 0 0 15px 15px;
    border-top: 1px solid var(--bg);
    margin-top: -1px;
    transition: 0.3s cubic-bezier(0, 0, 0.34, 0.81);
    user-select: none;
}
.tool-list .tool .more.active {
    cursor: pointer;
    color: var(--soft-text-color);
}
.tool-list .tool .more.active:hover {
    background: #f6f7f9;
}
.tool-list .tool .more.active .hide-more {
    display: none;
}
.tool-list .tool.more .more.active .hide-more {
    display: flex;
}
.tool-list .tool.more .more.active .show-more {
    display: none;
}

.tool-list .tool .list a i {
    font-size: 18px;
    color: var(--pcolor);
}
.element-list .el {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid var(--bg);
}
.element-list .el .icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--bg);
    color: var(--main-text-color);
}
.element-list .el:last-child {
    border: none;
}
.element-list .el .text span {
    font-weight: 600;
    color: var(--main-text-color);
}
.element-list .el .text p {
    font-size: 16px;
    color: var(--soft-text-color);
}
.profileContent {
    min-height: 250px;
    padding-bottom: 50px;
}

.ticketInfo {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--bg);
}

.ticketInfo .badges {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.ticketReply {
    background: #50547008;
    padding: 20px;
    display: none;
    border-bottom: 1px solid var(--bg);
}

.ticketReply .ticketReplyBottom {
    margin-top: 20px;
    display: flex;
}

.ticketReplyBottom .optionFast {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.ticketMessages .message {
    border-bottom: 1px solid var(--bg);
}

.ticketMessages .message:last-child {
    border: none;
}

.ticketMessages .message .head {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--bg);
    background: #50547008;
}

.ticketMessages .message .head .title {
    font-weight: 600;
    color: var(--secondary-color);
    font-size: 18px;
    margin-right: 10px;
}

.ticketMessages .message .head .badge.statu {
    display: flex;
    align-items: center;
    margin-right: 5px;
}

.ticketMessages .message .content {
    font-size: 17px;
    color: var(--main-text-color);
    padding: 20px;
    line-height: 22px;
}

.ticketMessages .message .content .ticketimg {
    display: block;
    margin-top: 15px;
}

.ticketMessages .message .content img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin: 15px 0;
    margin-top: 5px;
    border-radius: 3px;
    border: 3px solid var(--bg);
}

.ticketMessages .message .content img.zoom {
    width: 100%;
    height: auto;
}

.ticketMessages .message .head .title .badge:last-child {
    margin-left: auto;
}

.controlMessage {
    position: relative;
    font-size: 18px;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 1;
}

.controlMessage.view .action i {
    transform: rotate(45deg);
}

.controlMessage .actionMess {
    display: flex;
    align-items: center;
    gap: 5px;
    transform: translateX(-15px);
    width: 40px;
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}

.controlMessage .editMess {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 40px;
}

.controlMessage .editMess i {
    display: flex;
    cursor: pointer;
    font-size: 18px;
}

.controlMessage .editMess .save i {
    color: #57c781;
}

.controlMessage .editMess .cancel i {
    color: #ebb35f;
}

.controlMessage .action {
    color: var(--soft-text-color);
    cursor: pointer;
}

.controlMessage .action i {
    display: grid;
    transition: 0.2s;
}

.controlMessage .actionMess.show {
    transform: translateX(0px);
    opacity: 1;
    visibility: visible;
}

.controlMessage .actionMess i {
    display: flex;
    cursor: pointer;
}

.controlMessage .actionMess.show .remove i {
    color: #f56a6a;
}

.controlMessage .actionMess.show .edit i {
    color: #6a7bf5;
}

.profileHead .head {
    display: none;
}

.support-start-area .content {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
    padding: 10px;
}

.support-start-area .content .text {
    text-align: center;
    margin-bottom: 15px;
}

.support-start-area .content .text > span {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.support-start-area .content .text > p {
    color: #a1a4bb;
}

.support-start-area .content .butto {
    width: 100%;
    justify-content: center;
}

.support-start-area .content .sup-start-info {
    margin-bottom: 15px;
}

.upzone.page.category {
    padding: 110px 0 50px;
}

.author.upzone.page .icon {
    width: 65px;
    min-width: 65px;
    border-radius: 100%;
}

.author.upzone.page .reviews .icon {
    border-radius: 15px;
}

.page-content {
    position: relative;
    z-index: 1;
    transform: translateY(-59px);
    margin-bottom: 50px;
}

.page-content .card {
    margin-bottom: 30px;
}

.page-content-area {
    padding: 25px;
}

.page-content-area a {
    font-weight: 500;
    color: var(--main-color);
}

.page-content-area img {
    max-width: 100%;
    border-radius: 12px;
    margin-bottom: 15px;
    min-height: 150px;
    object-fit: cover;
}

.page-content-area p {
    color: var(--soft-text-color);
    font-size: 17px;
    line-height: 1.4;
}
.page-content-area p:last-child {
    margin-bottom: 0;
}

.page-content-area :is(h1, h2, h3, h4, h5) {
    color: var(--main-text-color);
    margin-bottom: 5px;
}

.corporate-menu {
    padding: 15px;
}

.corporate-menu ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.corporate-menu ul li a.cor-link {
    padding: 12px 15px;
    display: block;
    border-radius: 7px;
    font-weight: 500;
    position: relative;
    transition: 0.2s;
}

.corporate-menu ul li.active a.cor-link {
    background: var(--bg);
}

.corporate-menu ul li a.cor-link::before {
    content: "\e942";
    position: absolute;
    font-family: "nivu";
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--main-color);
    transition: 0.2s;
    opacity: 0;
}

.corporate-menu ul li a.cor-link:hover:before {
    right: 15px;
    opacity: 1;
}

.corporate-menu ul li a.cor-link:hover {
    background: var(--bg);
}

.corporate-menu ul li.active a.cor-link::before {
    content: "\ea73";
    right: 15px;
    opacity: 1;
}

.page-not-found {
    background: var(--secondary-dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 100vh;
}

.page-not-found .content {
    max-width: 520px;
    width: 100%;
    margin: 20px;
}

.page-not-found .content .showOn {
    position: relative;
    border-radius: 25px;
    height: 600px;
    border: 2px dashed #fff;
    overflow: hidden;
}

.page-not-found .content .showOn img {
    width: 100%;
    object-fit: cover;
    height: 600px;
    border-radius: 21px;
}

.showOn .overlayDark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(20deg, #1c2030, #1e21304a);
    z-index: 15;
    z-index: 1;
}

.page-not-found .content .showIn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30px;
    padding-bottom: 40px;
    z-index: 1;
    text-align: center;
}

.page-not-found .content .showIn > i {
    color: #fff;
    font-size: 60px;
}

.page-not-found .content .showIn > span {
    display: block;
    color: var(--main-color);
    font-size: 25px;
    font-weight: 600;
}

.page-not-found .content .showIn > h1 {
    color: #fff;
}

.page-not-found .content .showIn > p {
    color: #a0a5b7;
    font-size: 17px;
    margin-bottom: 23px;
}

.page-not-found .content .showIn .butto {
    gap: 5px;
    padding: 10px 20px;
    border-radius: 10px;
}

.delete-account-step .step-2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.delete-account-step .step-2 .butto {
    flex: 1;
    width: 100%;
}

.media-link-input .form-control {
    color: var(--main-text-color);
    background: #fff;
    border: none;
    font-family: "Gilroy", sans-serif;
    height: 76px;
    width: 100%;
    border-radius: 20px;
    padding: 25px;
    font-size: 16px;
    font-weight: 500;
}

.media-link-input {
    position: relative;
    margin-bottom: 30px;
}

.media-link-input .butto {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 10px;
    height: 50px;
    padding: 0 25px !important;
}

section.media-download {
    margin-top: -37px;
    position: relative;
    z-index: 1;
    margin-bottom: 26px;
}

.media-link-input .form-control::placeholder {
    font-size: 17px;
}

.media-list-area {
    background: #fff;
    padding: 20px;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
    min-height: 200px;
}

.media-list-area .item {
    position: relative;
    background: var(--bg);
    border-radius: 20px;
    padding: 4px;
}

.media-list-area .item :is(img, video) {
    width: 100%;
    border-radius: 16px;
    display: block;
}

.media-list-area .item .bottom {
    padding: 8px;
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.media-list-area .item .bottom .size span {
    display: block;
    color: var(--soft-text-color);
    font-size: 15px;
    font-weight: 500;
}

.media-list-area .item .bottom .butto {
    border-radius: 12px;
    width: 100%;
    justify-content: center;
}

.media-list-area .loader {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: #ffffffeb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-list-area .loader .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    color: var(--soft-text-color);
    font-size: 18px;
}

.media-list-area .loader .content > i {
    font-size: 50px;
    animation: 1s ease rotate infinite;
    color: var(--main-color);
}

section.media-download.story .media-list-area .item :is(img, video) {
    aspect-ratio: 9/16;
}

.pp-view-area .item {
    max-width: 450px;
    margin: 0 auto;
}

.free-card-content {
    margin-bottom: 20px;
}

.free-card-content .item {
    background: #f8f9fc;
    border: 1px solid #e5e5f5 !important;
}

.free-card-content .item span.productName {
    color: var(--main-text-color);
    font-weight: 600;
}

.free-card-content .item span.productInfo {
    color: var(--soft-text-color) !important;
}

.free-card-content .item .price {
    color: var(--soft-text-color);
}

.free-card-content .item .price span {
    color: var(--main-text-color);
    font-weight: 600;
}

.free-card-content .basketProductList {
    overflow: inherit;
}

/* THEME END */

/* KEYFRAMES */

@keyframes intimg {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}
@keyframes zirr {
    0%,
    100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}
@keyframes breath {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}
@keyframes intimgShadow {
    0% {
        filter: drop-shadow(2px 4px 36px rgb(193, 105, 219, 0));
    }
    50% {
        filter: drop-shadow(2px 4px 36px rgb(193, 105, 219, 0));
    }
    60% {
        filter: drop-shadow(2px 4px 36px rgb(193, 105, 219, 0.3));
    }
    80% {
        filter: drop-shadow(2px 4px 36px rgb(193, 105, 219, 0));
    }
    100% {
        filter: drop-shadow(2px 4px 36px rgb(193, 105, 219, 0.3));
    }
}
@keyframes bottomAnimation {
    0% {
        color: #fff;
        background: #ffffff08;
    }
    50% {
        color: #fff;
        background: var(--main-color);
    }
    100% {
        color: #fff;
        background: #ffffff08;
    }
}

@keyframes intDots {
    0% {
        bottom: -320px;
    }
    100% {
        opacity: 1;
        bottom: -120px;
    }
}
@keyframes intBG {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0.35;
    }
}
@keyframes opaCi {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.15;
    }
}

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

@keyframes scrollani {
    0%,
    100% {
        left: 0;
    }
    50% {
        left: -40px;
    }
}

/* -------------------------- Media -------------------------- */
@media (min-width: 768px) {
    .bmContent .bmList .item .text {
        width: auto !important;
        opacity: 1;
        margin-left: 5px;
        transition: 0.2s;
    }

    .bottomMenu .bmList .item {
        padding: 10px 20px;
    }
    .bmAction .el .list {
        grid-template-columns: repeat(4, 1fr);
    }
    .intro .boxSide img {
        animation: intimg 1s forwards, intimgShadow 500ms 1s forwards;
    }
    .bmContent.free-active:hover .bmList .item.tools .free-time,
    .bmContent.free-active:hover .bmList .item.tools .free-time span {
        opacity: 0;
        visibility: hidden;
    }
    .piModal .bmOrder {
        padding: 30px;
    }
    .bmOrder .orderContent .packTitle {
        padding-left: 7px;
    }
    .bmContent.free-active:hover .item .free-time {
        opacity: 0;
    }
}
@media (max-width: 1450px) {
    .orderViewContent {
        grid-template-columns: 350px auto 350px;
    }
}

@media (max-width: 1400px) {
    .introConti.left {
        padding-right: 0px;
    }
    .introConti.right {
        padding-left: 0px;
    }
    .container {
        max-width: 1250px;
    }
    header {
        position: absolute;
    }
    .menuDropArea .area ul {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .blogWhoWhat .blogSide .featured > img {
        height: 425px;
    }
    .orderViewContent .caps {
        order: 1;
        grid-column: 1 / -1;
    }

    .orderViewContent .waps {
        order: 2;
    }

    .orderViewContent {
        grid-template-columns: auto auto;
    }
    .blogWhoWhat {
        grid-template-columns: 65% auto;
    }
    .pack-contrea {
        grid-template-columns: 60% auto;
    }
    .pack-list-area {
        grid-template-columns: repeat(4, 1fr);
    }
    .whoView {
        grid-template-columns: 250px auto 270px;
    }

    .whoView .profile .head .title {
        font-size: 16px;
    }

    .whoView .profile .head .title span {
        font-size: 18px;
    }

    .whoView .topDetail .item .icon {
        font-size: 24px;
    }

    .whoView .topDetail .item .text {
        font-size: 14px;
    }

    .whoView .topDetail .item .text span {
        font-size: 15px;
    }
    .piLiBox {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .piLiBox .action {
        margin: 0;
    }
    .amount-detail {
        flex: auto;
    }
    .category-sidebar {
        top: 30px;
    }
}
@media (max-width: 1250px) {
    .serviceBoxs {
        gap: 8px;
    }
    .serviceBoxs .item .icon {
        min-width: 50px;
        height: 50px;
    }
    .whoList {
        grid-template-columns: repeat(5, 1fr);
    }
}
@media (max-width: 1200px) {
    .lg-d-none {
        display: none !important;
    }
    .lg-w-100 {
        width: 100% !important;
    }
    .lg-miw-100 {
        min-width: 100% !important;
    }
    .lg-maw-100 {
        max-width: 100% !important;
    }
    .lg-h-100 {
        height: 100% !important;
    }
    .lg-m-0 {
        margin: 0 !important;
    }
    .lg-d-grid {
        display: -ms-grid !important;
        display: grid !important;
    }
    .lg-grid-g-0 {
        grid-gap: 0 !important;
    }
    .lg-grid-g-1 {
        grid-gap: 0.25rem !important;
    }
    .lg-grid-g-2 {
        grid-gap: 0.5rem !important;
    }
    .lg-grid-g-3 {
        grid-gap: 1rem !important;
    }
    .lg-grid-g-4 {
        grid-gap: 1.5rem !important;
    }
    .lg-grid-g-5 {
        grid-gap: 3rem !important;
    }
    .lg-grid-auto {
        -ms-grid-columns: auto !important;
        grid-template-columns: auto !important;
    }
    .lg-grid-2 {
        -ms-grid-columns: 1fr 1fr !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .lg-grid-3 {
        -ms-grid-columns: 1fr 1fr 1fr !important;
        grid-template-columns: 1fr 1fr 1fr !important;
    }
    .lg-grid-w100 {
        grid-column: 1 / -1;
    }
    .lg-flex-d-column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .well .lg-ww-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .well .lg-ww-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }
    .well .lg-ww-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .well .lg-ww-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .well .lg-ww-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }
    .well .lg-ww-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .well .lg-ww-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .well .lg-ww-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%;
    }
    .well .lg-ww-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .well .lg-ww-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
    }
    header ul.navLinks {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-left: 20px;
    }
    .serviceBoxs {
        grid-template-columns: repeat(4, 1fr);
    }
    .comboBoxArea > .image {
        display: none;
    }
    .comboBoxArea .content .leftBox {
        padding-left: 50px;
        min-width: 320px;
    }
    .usCount .item .icon {
        min-width: 55px;
        height: 55px;
        font-size: 23px;
    }

    .usCount .item .text span {
        font-size: 24px;
    }

    .usCount .item .text {
        font-size: 17px;
    }

    .vizLinkContent .wellco h3 {
        font-size: 28px;
        line-height: 30px;
    }

    .vizLinkContent > .image .phone img {
        width: 250px;
    }

    .vizLinkContent .partners {
        padding-left: 0;
    }

    .vizLinkContent .image .bgDots img {
        width: 420px;
        left: calc(50% - 210px);
    }

    section#vizLinkArea::before {
        clip-path: none;
    }
    .menuDropArea .area ul {
        grid-template-columns: 1fr 1fr;
    }
    .introConti.left {
        transform: scale(0.9) translateX(50px);
    }
    .introConti.right {
        transform: scale(0.9) translateX(-50px);
    }
    .blogWhoWhat {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .whatArea {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 12px;
    }

    section#blogWhoWhat {
        border-radius: 0 0 30px 30px;
        padding: 80px 0 50px;
    }

    .blogWhoWhat .blogSide {
        grid-template-columns: 50% auto;
    }

    .whatArea .item {
        display: flex;
        flex-direction: column;
    }

    .whatArea .item > a img {
        width: 100%;
        height: auto;
        aspect-ratio: 3/2;
    }

    .whatArea .item h4 {
        padding: 0 20px 10px;
        text-align: center;
    }

    .whoArea {
        grid-template-columns: repeat(4, 1fr);
    }

    .whoArea .item img {
        height: auto;
        aspect-ratio: 3/2;
    }

    .whoArea .item {
        height: auto;
    }

    .whoArea .item .title {
        height: auto;
        min-height: 50px;
        font-size: 18px;
        font-weight: bold;
    }
    .whoList.main {
        grid-template-columns: repeat(4, 1fr);
        margin-bottom: 0;
    }
    .whoList.main .item img {
        height: auto;
        aspect-ratio: 5/6;
    }
    .whoList .item .title {
        font-size: 15px;
        padding: 0 20px 15px;
    }

    .whoList .item .title span.nickname {
        font-size: 14px;
    }
    .post-thumbnail {
        width: 200px;
        height: auto;
        min-width: 200px;
    }

    .post-thumbnail img {
        width: 100%;
        aspect-ratio: 1/1;
    }

    .most-thumbnail {
        min-width: 70px;
        width: 70px;
    }

    .most-title a {
        font-size: 16px;
    }
    .whoView {
        grid-template-columns: 220px auto 250px;
    }
    .inlistContent ul li a {
        font-size: 15px;
    }
    .whoView .single-post .head {
        padding: 15px;
        padding-left: 20px;
        border-radius: 20px;
    }
    .howBuy .media img {
        width: 100%;
    }
    .howBuy {
        grid-template-columns: 350px auto;
        gap: 15px;
    }
}

@media (max-width: 1024px) {
    .container {
        max-width: 100%;
    }
    .md-w-100 {
        width: 100% !important;
    }
    .well .md-ww-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .well .md-ww-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }
    .well .md-ww-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .well .md-ww-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .well .md-ww-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }
    .well .md-ww-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .well .md-ww-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .well .md-ww-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%;
    }
    .well .md-ww-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .well .md-ww-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
    }
    .md-miw-100 {
        min-width: 100% !important;
    }
    .md-maw-100 {
        max-width: 100% !important;
    }
    .md-h-100 {
        height: 100% !important;
    }
    .md-d-none {
        display: none !important;
    }
    .md-grid-g-0 {
        grid-gap: 0 !important;
    }
    .md-grid-g-1 {
        grid-gap: 0.25rem !important;
    }
    .md-grid-g-2 {
        grid-gap: 0.5rem !important;
    }
    .md-grid-g-3 {
        grid-gap: 1rem !important;
    }
    .md-grid-g-4 {
        grid-gap: 1.5rem !important;
    }
    .md-grid-g-5 {
        grid-gap: 3rem !important;
    }
    .md-grid-auto {
        -ms-grid-columns: auto !important;
        grid-template-columns: auto !important;
    }
    .md-grid-2 {
        -ms-grid-columns: 1fr 1fr !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .md-grid-w100 {
        grid-column: 1 / -1;
    }
    .md-flex-d-column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    header .navArea .navLinks {
        display: none !important;
    }
    header nav.menu .navAction .mobileNav {
        background: transparent;
        user-select: none;
        cursor: pointer;
        border: 1px solid #6b6f8180;
        border-radius: 12px;
        padding: 6px;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    header nav.menu .navAction .mobileNav {
        background: var(--secondary-hover-color);
    }
    .userActionArea .butto > span {
        display: none;
    }

    header nav.menu .navAction .butto-login {
        font-size: 21px;
        gap: 7px;
        text-transform: uppercase;
        font-weight: 600;
        color: #fff;
        background: transparent;
        user-select: none;
        cursor: pointer;
        border: 1px solid #6b6f8180;
        border-radius: 12px;
        padding: 6px;
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    header nav.menu .navAction .butto-login > i {
        font-size: 21px;
    }
    header nav.menu .navAction .butto-login.btnActionUser > i {
        font-size: 16px;
    }
    header nav.menu .navAction .mobileNav > i {
        font-size: 21px;
        color: #fff;
    }
    .topBar {
        display: none;
    }
    section#introArea {
        margin-top: -1px;
    }
    header {
        padding: 20px 5px;
        position: absolute;
        height: auto;
        border-bottom: none;
        background: transparent;
    }
    .introIco {
        display: none;
    }
    .intro .content {
        border-radius: 0;
    }
    .mobileNav {
        display: block;
    }
    .monavBar [class*="item"] {
        height: 5px;
        width: 100%;
        background: #fff;
        border-radius: 10px;
        transition: 0.4s;
    }

    .mobileNav .monavBar {
        position: relative;
        width: 30px;
        height: 25px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .monavBar .item2 {
        width: 75%;
        margin-left: auto;
    }
    header .navAction .notify .notifyBell span.count,
    header .navAction .basket > span.count {
        border-color: #fff;
    }
    img.introDots {
        width: 500px;
    }
    .comboHeading {
        flex-direction: column;
        text-align: center;
    }

    .comboHeading::before {
        width: 80px;
        height: 5px;
        top: -15px;
        left: calc(50% - 40px);
    }

    .comboHeading p {
        margin-bottom: 25px;
    }

    .comboBoxArea .content {
        flex-direction: column;
    }

    .comboBoxArea .content .leftBox {
        min-width: 100%;
        align-items: center;
        min-height: 160px;
        padding-bottom: 10px;
    }

    .comboBoxArea .content .leftBox::before {
        clip-path: ellipse(100% 95% at top center);
    }

    .comboBoxArea .content .leftBox .boxText .packTitle {
        text-align: left;
        margin: 0;
        padding: 0;
        padding-right: 20px;
        margin-right: 20px;
        border-right: 1px solid #ffffff10;
    }

    .comboBoxArea .content .leftBox .boxText .packPrice {
        padding-right: 20px;
        margin-right: 20px;
        border-right: 1px solid #ffffff10;
    }

    .comboBoxArea .content .leftBox .boxText {
        display: flex;
        align-items: center;
    }

    .comboBoxArea .content .leftBox .boxText .packTitle::before {
        display: none;
    }

    .comboBoxArea .packBuyButton .butto-comboBuy {
        margin: 0;
    }

    .comboBoxArea .content .leftBox .icon {
        display: none;
    }
    .serviceBoxs .item {
        flex-direction: column;
        gap: 2px;
        border-radius: 15px;
    }

    .serviceBoxs .item .text {
        padding: 0;
        text-align: center;
    }

    .serviceBoxs .item .icon {
        border: none;
        background: none;
        font-size: 40px;
    }
    .whyUsCards {
        flex-direction: column;
    }
    .usCount {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .usCount {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .faqList .well .ww-6 {
        width: 100%;
    }
    .whyUsCards {
        flex-direction: column;
    }
    .vizLinkContent {
        display: block;
    }
    .vizLinkContent .partners {
        display: none;
    }

    .vizLinkContent > .image {
        position: absolute;
        bottom: 53px;
        width: 250px;
        left: calc(50% - 125px);
        z-index: 1;
        transform: rotate(0deg);
    }

    section#vizLinkArea .container {
        padding: 0;
    }

    .wellco {
        min-height: 450px;
        z-index: 2;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding: 0 20px 50px;
        position: relative;
        width: 100%;
    }

    .wellco::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        background: linear-gradient(to top, var(--secondary-color) 30%, transparent 100%);
        z-index: -1;
    }

    .wellco::before {
        display: none;
    }

    section#vizLinkArea {
        clip-path: ellipse(170% 100% at top center);
    }

    .vizLinkContent .wellco h3 span {
        color: #fff;
    }

    .vizLinkContent .wellco p {
        color: #b5bdd5;
        max-width: 100%;
        text-align: center;
    }

    .vizInput {
        margin-top: 0;
        margin-bottom: 20px;
        padding: 0 10px;
        width: 100%;
    }

    section#vizLinkArea::before {
        background: url(../img/deso.png), #141722;
    }

    .vizLinkContent > .image .phone img {
        width: 250px;
        border: 4px solid #ffffff17;
        border-radius: 40px;
        box-shadow: 0 0 50px #10141a;
    }

    .vizLinkContent .wellco h3 {
        margin-bottom: 8px;
        text-align: center;
    }

    .buttoVZ {
        right: 20px;
    }
    .reviewsList {
        grid-template-columns: auto;
    }
    .footMenuList ul {
        grid-template-columns: repeat(3, 1fr);
    }

    .mobileMenu {
        background: var(--secondary-dark-color);
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        padding-top: 65px;
        padding-bottom: 70px;
        padding-left: 80px;
        padding-right: 25px;
        transition: 0.5s;
        overflow: auto;
        visibility: hidden;
        z-index: -1;
        display: block;
    }
    .wrapper {
        transition: 0.5s;
        background: var(--bg);
        z-index: 1;
        height: auto;
        max-width: 100%;
    }
    .wrapper.height {
        height: 100vh;
        max-height: 100% !important;
    }
    .wrapper.menu {
        transform: scale(0.9) translateX(calc(-100% + 10%)) translateY(calc(50% - 50%));
        background: var(--bg);
        border-radius: 30px;
        border-right: 5px solid var(--bg);
        position: fixed;
        user-select: none;
        transition-delay: 0.1s;
        overflow: hidden;
        height: 100vh;
        max-height: 100% !important;
    }
    body.menu .mobileMenu {
        padding-left: 20%;
        padding-right: 5%;
        visibility: visible;
        user-select: none;
    }
    .mobileMenu .mmContent {
        height: auto;
        min-height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 20px;
    }

    .mobileMenu .mmContent .head {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobileMenu .mmContent .head .logo img {
        height: 40px;
        margin-bottom: -7px;
    }

    .mobileMenu .mmContent .head .close {
        font-size: 20px;
        background: var(--main-color);
        padding: 8px;
        border-radius: 10px;
    }

    .mobileMenu .mmContent .head .close i {
        display: flex;
        color: #fff;
    }

    .mobileMenu .mmContent .navList ul.navLinks {
        display: flex;
    }

    .mobileMenu .navLinks li .nav-link {
        color: #fff;
        text-transform: uppercase;
        font-size: 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 500;
        position: relative;
        padding: 13px 15px;
    }

    .mobileMenu .navLinks li.drop > .nav-link::before {
        content: "\e93c";
        font-family: "nivu";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #fff;
        transition: 0.2s;
        font-size: 18px;
    }
    .mobileMenu .navLinks li.drop.show > .nav-link::before {
        transform: rotateX(180deg);
        top: calc(50% - 7px);
    }
    .respoLinks li.drop .resDropArea .area li a {
        margin-bottom: 0 !important;
    }

    .mobileMenu .mmContent .menuList .navLinks li {
        width: 100%;
        margin-bottom: 5px;
        background: var(--secondary-color);
        border-radius: 10px;
    }

    .mobileMenu .navLinks li .nav-link > i {
        color: var(--main-color);
        font-size: 18px;
        position: relative;
        top: -1px;
    }
    .respoLinks li.drop .resDropArea {
        display: none;
    }

    .mobileMenu .mmContent .menuList .navLinks li.drop > a::after {
        content: "\e93c";
        font-family: "nivu";
        margin-left: auto;
        font-size: 19px;
        transition: 0.2s;
    }
    .mobileMenu .mmContent .menuList .navLinks li.show a:after {
        transform: rotateX(180deg);
    }
    .mobileMenu .mmContent .body {
        margin-top: auto;
        margin-bottom: auto;
    }
    .mobileMenu .menuList {
        margin: 20px 0;
    }
    .resDropArea ul li a {
        border-bottom: 1px solid #ffffff10;
    }
    .resDropArea ul li:first-child a {
        border-top: 1px solid #ffffff10;
    }
    .resDropArea ul li:last-child a {
        border-bottom: none;
    }
    .respoLinks li.drop .resDropArea .area li a {
        margin-bottom: 0 !important;
        text-transform: capitalize;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        font-weight: 400;
    }
    .respoLinks li.drop .resDropArea .area li a .icon > i {
        color: var(--pcolor);
        display: block;
    }
    .mmContent .foot {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mmContent .foot .footLogin {
        padding: 12px 15px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        gap: 7px;
        text-transform: uppercase;
        font-weight: 600;
        color: #fff;
        border: 2px solid var(--main-color);
        background: transparent;
        width: 100%;
        justify-content: center;
        font-size: 15px;
    }

    .mmContent .foot .footRegister {
        justify-content: center;
        padding: 12px 15px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        gap: 7px;
        text-transform: uppercase;
        font-weight: 600;
        color: #fff;
        border: 2px solid var(--main-color);
        background: var(--main-color);
        width: 100%;
        font-size: 15px;
    }
    body.menu .monavBar {
        pointer-events: none;
    }
    header .navAction .basket {
        display: none;
    }
    .intro .content {
        grid-template-columns: 1fr 300px 1fr;
        min-height: 600px;
    }
    .introConti {
        padding-top: 0;
    }
    .upzone .heading {
        flex-direction: column;
        gap: 20px;
    }

    .upzone .heading .info {
        padding: 0;
        text-align: center;
    }

    .upzone .platZone.shaped .heading {
        flex-direction: row;
        gap: 0;
    }

    .upzone .platZone.shaped .heading .info {
        text-align: left;
    }

    .upzone .heading .info::before {
        display: none;
    }

    .upzone .platZone .heading .icon {
        height: 60px;
        width: 100px;
        font-size: 35px;
        margin-left: 0;
        border-radius: 10px;
    }

    .platZone .reviews {
        flex-direction: row-reverse;
    }

    .platZone .reviews .text {
        padding-left: 0;
        padding-right: 12px;
    }
    .howArea .quotation::before,
    .howArea .quotation::after {
        opacity: 0.2;
    }
    .blogWhoWhat .blogSide {
        grid-template-columns: 40% auto;
    }

    .whatArea .item h4 {
        padding: 0 15px 10px;
    }
    .pack-contrea {
        grid-template-columns: auto;
    }
    .pack-list-area {
        grid-template-columns: repeat(4, 1fr);
    }
    .pack-list-content {
        padding: 20px;
    }
    .category-sidebar {
        padding: 25px 20px;
    }
    .amount-detail .amount {
        width: 100%;
    }
    .amount-detail .amount input {
        width: 100%;
    }
    .amount-detail .el {
        padding: 5px 15px;
    }
    .amount-detail .el.price {
        padding-right: 15px;
    }
    .blogHead .featureList {
        grid-template-columns: 35% auto;
    }

    .blogHead .featureList .multi-flex .flex-items {
        grid-template-columns: 1fr 1fr !important;
    }

    .blogHead .featureList .item.single {
        height: 420px;
    }

    .blogHead .featureList .item.single .content .title {
        font-size: 18px;
    }

    .blogHead .featureList .multi-flex .flex-items .item.multi {
        height: 204px;
    }

    .blogHead .featureList .multi-flex .flex-items .item.multi .content {
        font-size: 16px;
    }
    .sidebar-content {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .sidebar-content .item {
        width: 100%;
        flex: 1;
    }
    .sidebar-content > .item:last-child {
        top: 10px;
    }
    .whoList.side {
        grid-template-columns: repeat(4, 1fr);
    }
    .most-popular {
        margin-bottom: 10px;
    }
    section#whoContent {
        border-radius: 30px 30px 0 0;
    }
    .whoList {
        grid-template-columns: repeat(4, 1fr);
    }
    .quickContent {
        display: none;
    }
    .whoView {
        grid-template-columns: 290px auto;
    }
    .wrapper {
        overflow: hidden;
    }
    .breadcrumb ul {
        justify-content: center;
    }
    .whoList.listmain {
        grid-template-columns: repeat(3, 1fr);
    }
    .upzone.page .title p {
        display: none;
    }
    .howBuy {
        grid-template-columns: auto;
    }
    .howBuy .media {
        height: 380px;
    }
}
@media (max-width: 1024px) AND (min-width: 920px) {
    .pack-select-bottom {
        flex-direction: column;
    }
}
@media (max-width: 920px) {
    footer .footTop {
        flex-direction: column;
    }

    footer .footTop .alert {
        margin-bottom: 0;
    }

    footer .footTop .action {
        margin-bottom: 15px;
    }

    footer .footerTop .container {
        flex-direction: column;
        gap: 20px;
    }

    footer .footerTop .info {
        text-align: center;
    }

    footer .footerTop .info .icon {
        display: none;
    }
    .introConti.left {
        transform: scale(0.9) translateX(70px);
    }
    .introConti.right {
        transform: scale(0.9) translateX(-70px);
    }
    .pack-list-area {
        grid-template-columns: repeat(4, 1fr);
    }

    .pack-list-content {
        margin-bottom: 0;
    }
}
@media (max-width: 900px) {
    .introConti.right {
        display: none;
    }
    .intro .content {
        grid-template-columns: 1fr 300px;
    }
    .introConti.left {
        transform: scale(0.95) translateX(100px) translateY(-40px);
    }

    .intro .textCont > .head {
        font-size: 32px;
        line-height: 42px;
    }

    .intro .textCont > .head > h1 {
        font-size: 30px;
    }
    .whoView {
        grid-template-columns: 230px auto;
    }
    .intro img.introDots {
        display: none;
    }
}
@media (max-width: 860px) {
    .serviceList {
        grid-template-columns: repeat(2, 1fr);
    }
    .piDetailToggle .productDetail .text .productHref {
        font-size: 15px;
        max-width: 320px;
    }
}
@media (max-width: 800px) {
    .howBuy {
        flex-direction: column;
        display: flex;
        align-items: flex-start;
    }

    .howBuy .media img {
        width: 100%;
    }
    .howBuy .media {
        width: 100%;
        height: 100%;
    }
    .howBuy ol {
        grid-template-columns: auto;
    }
}
@media (max-width: 768px) {
    .container {
        max-width: 100%;
        width: 100%;
    }
    .sm-d-none {
        display: none !important;
    }
    .well .sm-ww-2 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .well .sm-ww-3 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }
    .well .sm-ww-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .well .sm-ww-5 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .well .sm-ww-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }
    .well .sm-ww-7 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .well .sm-ww-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .well .sm-ww-9 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 75%;
    }
    .well .sm-ww-10 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .well .sm-ww-12 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 100%;
    }
    .sm-w-100 {
        width: 100% !important;
    }
    .sm-miw-100 {
        min-width: 100% !important;
    }
    .sm-maw-100 {
        max-width: 100% !important;
    }
    .sm-h-100 {
        height: 100% !important;
    }
    .sm-grid-g-0 {
        grid-gap: 0 !important;
    }
    .sm-grid-g-1 {
        grid-gap: 0.25rem !important;
    }
    .sm-grid-g-2 {
        grid-gap: 0.5rem !important;
    }
    .sm-grid-g-3 {
        grid-gap: 1rem !important;
    }
    .sm-grid-g-4 {
        grid-gap: 1.5rem !important;
    }
    .sm-grid-g-5 {
        grid-gap: 3rem !important;
    }
    .sm-grid-auto {
        -ms-grid-columns: auto !important;
        grid-template-columns: auto !important;
    }
    .sm-grid-2 {
        -ms-grid-columns: 1fr 1fr !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .sm-grid-w100 {
        grid-column: 1 / -1;
    }
    .sm-flex-d-column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .intro {
        display: flex;
        flex-direction: column;
        min-height: auto;
        height: auto;
        clip-path: ellipse(170% 100% at top center);
    }
    .intro .content {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 550px;
    }
    .introConti.left {
        transform: scale(0.9) translateX(120px) translateY(0px);
    }
    .intro .boxSide {
        margin-right: 40px;
    }
    .intro .boxSide img {
        width: 300px;
    }

    img.introDots {
        left: calc(50% - 250px);
        position: absolute;
        opacity: 1;
    }

    .intro .textCont {
        position: absolute;
        bottom: 0;
        max-width: 460px;
        text-align: center;
        padding: 0 20px 25px;
        max-width: 100%;
        margin: 0 auto;
        width: 100%;
    }
    .intro .textCont::after {
        content: "\e93c";
        font-family: "nivu";
        font-size: 35px;
        position: relative;
        top: 5px;
    }
    .intro .textCont > p {
        display: none;
    }

    .intro .textCont > .head {
        font-size: 28px;
        line-height: 42px;
        margin-bottom: -5px;
    }
    .monavBar [class*="item"] {
        background: #fff;
    }

    header .navAction .basket > i {
        color: #fff;
    }
    .heading h2 {
        font-size: 23px;
        color: #4c5473 !important;
        text-transform: uppercase;
        font-weight: 700;
    }
    .comboHeading .tabs {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .comboBoxArea {
        margin-top: 30px;
    }

    .comboBoxArea .content .leftBox .boxText {
        width: 100%;
        flex-wrap: wrap;
    }

    .comboBoxArea .content .leftBox {
        min-height: 275px;
        justify-content: flex-start;
        padding-top: 35px;
    }

    .comboBoxArea .content .leftBox .boxText .packTitle {
        margin: 0;
        padding: 0;
        border: none;
        text-align: left;
        flex: 1;
    }

    .comboBoxArea .content .leftBox .boxText .packPrice {
        margin: 0;
        padding: 0;
        border: none;
        flex: 1;
        margin-left: auto;
        text-align: right;
    }

    .comboBoxArea .content .leftBox .boxText .packBuyButton {
        width: 100%;
        padding-top: 20px;
        margin-top: 15px;
        border-top: 1px solid #ffffff10;
    }
    .comboHeading .tabs .tabPlat {
        width: fit-content !important;
        gap: 15px;
    }
    .comboBoxArea .packBuyButton .butto-comboBuy {
        width: 100%;
    }

    .comboBoxArea .content .detailArea {
        grid-template-columns: auto;
        gap: 8px;
        padding: 30px 30px 50px;
    }

    .comboHeading .tabs .tabPlat,
    .comboHeading .tabs .tabType {
        width: 100%;
        justify-content: center;
    }

    .comboHeading {
        padding-left: 0;
    }

    .comboHeading .tabs .tabType .item {
        width: 100%;
        padding: 10px 0;
    }
    .reviewTop .container {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .reviewTop .detail {
        justify-content: center;
        text-align: center;
    }

    .reviewTop .detail .icon {
        display: none;
    }
    .reviewsArea::before {
        content: "";
        width: 200px;
        height: 200px;
        left: calc(50% - 100px);
        top: 25px;
    }
    .footMenuList ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .piDetailToggle .productDetail {
        flex-wrap: wrap;
    }

    .piDetailToggle .productDetail .detasi {
        flex: 1;
        min-width: 100%;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        background: #ffffff07;
        border: 1px solid #ffffff07;
        padding: 12px;
        padding-left: 15px;
        border-radius: 10px;
    }

    .piDetailToggle .productDetail .text .productHref {
        font-size: 16px;
        max-width: 100%;
    }

    .piDetailToggle .productDetail .text {
        flex: 1;
        max-width: calc(100% - 70px);
    }

    .piDetailToggle .productDetail .avatar {
        flex: 1;
        max-width: 55px;
    }
    .piDetailToggle .productDetail .price {
        text-align: left;
    }
    .piDetailToggle .productDetail.plus {
        padding: 15px;
    }
    .productDetail.plus .piAddBasket .toggle {
        gap: 5px;
        padding: 3px 5px;
    }
    .piDetailToggle .productDetail.plus .text {
        max-width: 100%;
    }
    .bmOrder .orderContent .packTitle {
        padding-left: 5px;
        padding-top: 5px;
    }
    .bottomMenu .bmContent .bmList {
        justify-content: center;
    }
    .bottomMenu .bmList .item:nth-child(1) {
        animation: 0.5s ease bottomAnimation;
    }
    .bottomMenu .bmList .item:nth-child(2) {
        animation: 0.5s ease bottomAnimation;
        animation-delay: 0.1s;
    }
    .bottomMenu .bmList .item:nth-child(3) {
        animation: 0.5s ease bottomAnimation;
        animation-delay: 0.2s;
    }
    .bottomMenu .bmList .item:nth-child(4) {
        animation: 0.5s ease bottomAnimation;
        animation-delay: 0.3s;
    }
    .bottomMenu .bmList .item:nth-child(5) {
        animation: 0.5s ease bottomAnimation;
        animation-delay: 0.4s;
    }
    .howBuy {
        display: flex;
        flex-direction: column;
    }
    .bmAction .el .list {
        grid-template-columns: repeat(2, 1fr);
    }
    .bmAction .el .list .item {
        aspect-ratio: 4/3;
    }
    .bmAction .headWallet .icon {
        display: none;
    }

    .piActionList .puserBox .action .piAct-logout .text {
        display: none;
    }

    .piActionList .puserBox .action {
        margin-left: auto;
        gap: 5px;
    }

    .bmAction .headWallet {
        min-width: auto;
        padding: 5px 12px;
        padding-top: 6px;
        height: 42px;
    }

    .piActionList .puserBox .user .avatar {
        min-width: 45px;
        width: 45px;
        height: 45px;
        font-size: 16px;
        border-radius: 15px;
    }

    .piActionList .puserBox .user {
        gap: 8px;
    }

    .piActionList .puserBox {
        padding: 7px;
    }

    .piActionList .puserBox .user .info span.name {
        font-size: 15px;
    }

    .piActionList .puserBox .user .info {
        padding-top: 2px;
        line-height: 17px;
    }

    .piActionList .puserBox .action .piAct-logout {
        padding: 12px;
        padding-top: 13px;
        height: 42px;
    }
    .whatArea {
        grid-template-columns: 1fr 1fr;
    }
    .blogWhoWhat .blogSide {
        display: flex;
        flex-direction: column;
    }
    .blogWhoWhat .blogSide .featured > img {
        width: 100%;
        height: auto;
        aspect-ratio: 2/1;
    }
    .blogSide .blogList {
        padding: 20px;
    }
    .whoArea {
        grid-template-columns: repeat(2, 1fr);
    }
    .orderViewContent {
        grid-template-columns: auto;
    }
    .profileHead .profileList {
        justify-content: center;
    }
    .whoList.main {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 0;
    }
    .whoList.main .item img {
        height: auto;
        aspect-ratio: 5/6;
    }
    .blogHead .featureList {
        display: flex;
        flex-direction: column;
    }

    .blogHead .featureList .item.single {
        display: none;
    }

    .sidebar-content {
        flex-direction: column;
    }

    .whoList.side {
        grid-template-columns: repeat(2, 1fr);
    }
    .single-post h1.title {
        font-size: 24px;
    }
    .post-reaction .item .reaction-svg img {
        width: 100%;
    }
    .whoList {
        grid-template-columns: repeat(3, 1fr);
    }
    section#whoView .container {
        max-width: 500px;
    }
    .whoView {
        grid-template-columns: auto;
    }
    .whoView .profile {
        position: relative;
        top: 0;
        display: flex;
        gap: 10px;
    }
    .whoView .profile img {
        aspect-ratio: 1/1;
    }
    .whoView .topDetail {
        flex-direction: column;
        min-width: 72px;
        margin: 0;
    }
    .whoView .topDetail .item {
        height: 100%;
    }
    .whoView .single-post .head .name {
        margin-right: 15px;
        padding-right: 15px;
    }
    .whoView .single-post .head .socialinks .item {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .whoView .single-post .head .userRate .thisComment {
        font-size: 14px;
        border-radius: 8px;
    }
    .whoView .single-post .head .userRate .thisRate {
        font-size: 14px;
        border-radius: 8px;
    }
    .whoView .single-post .head .name {
        font-size: 14px;
    }

    .whoView .single-post .head .name span {
        font-size: 15px;
    }
    .breadcrumb {
        margin-bottom: 15px;
    }
    .bottomMenu .bmContent.free-active .bmList .item.basket {
        min-width: 95px;
        justify-content: center;
    }
    .bottomMenu.show .bmContent.free-active .bmList .item.basket {
        min-width: inherit;
    }
    .bottomMenu.show .bmContent.free-active .bmList .item.tools {
        min-width: fit-content;
    }
    .bmContent.free-active .free-time span {
        font-size: 17px;
    }
    .breadcrumb ul li.last {
        display: none;
    }
    header .container {
        padding: 0 10px;
    }
    .whoList.listmain {
        grid-template-columns: repeat(2, 1fr);
    }
    .bmOrder .orderContent .packTitle::after {
        left: 5px;
    }
    .piDetailToggle .productDetail {
        background: transparent;
        padding: 0;
        border: none;
    }
    .piDetailToggle .productDetail .avatar img {
        border-radius: 12px;
    }
    .piDetailToggle .productDetail .detasi {
        border-radius: 15px;
    }
    .pack-list-area.funds.balance {
        grid-template-columns: repeat(2, 1fr);
    }
    .pack-list-area.funds.line.basket {
        display: flex;
        flex-direction: column;
    }
    .pack-list-area.funds.basket .item .top .icon {
        height: 45px;
    }
    .tool-list .tool .list-area {
        height: auto;
        border-radius: 0 0 20px 20px;
    }
    .tool-list .tool .more {
        display: none;
    }
    .profileHead .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 0 18px;
        width: 100%;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: bold;
        color: var(--main-text-color);
    }

    .profileHead .head > i {
        font-size: 27px;
    }

    .profileHead .container {
        padding: 0;
        margin: 0;
    }

    .profileHead .container .profileList {
        flex-direction: column;
        display: none;
    }

    .profileHead .profileList .item {
        border-left: none;
        border-top: 1px solid var(--bg);
        width: 100%;
        padding: 20px;
    }

    .profileHead .profileList .item.active::before {
        top: 5px;
        bottom: 5px;
        left: 0;
        width: 4px;
        height: auto;
        border-radius: 0 5px 5px 0;
    }
    .platZone .reviews {
        display: none;
    }
    .upzone .heading .info > h1 {
        font-size: 22px;
    }
    .bottomMenu .bmContent {
        overflow: inherit;
    }
    .bottomMenu .bmList .item.action {
        overflow: hidden;
    }
}
@media (max-width: 700px) {
    .intro .boxSide img {
        width: 280px;
    }
    .intro .boxSide {
        margin-right: 0px;
    }
    .pack-list-area {
        grid-template-columns: repeat(3, 1fr);
    }
    .breadcrumb ul li:nth-last-child(2):after {
        display: none;
    }
    .pack-list-area.funds.form.cart-form {
        display: flex;
        flex-direction: column;
    }
}
@media (min-width: 600px) {
    .piModal .serviceList {
        display: none;
    }
}
@media (max-width: 600px) {
    .serviceBoxs {
        grid-template-columns: repeat(3, 1fr);
    }
    .serviceBoxs .item .icon {
        font-size: 24px;
        height: 30px;
        margin-bottom: 5px;
    }

    .serviceBoxs .item .text {
        font-size: 14px;
        line-height: 17px;
    }

    .serviceBoxs .item .text span {
        font-size: 16px;
    }
    .comboBoxArea .content .leftBox {
        padding: 25px;
        min-height: 250px;
    }

    .comboBoxArea .content {
        border-radius: 30px;
    }

    .comboBoxArea .content .leftBox .boxText .packTitle .comboPlatformName {
        font-size: 30px;
    }

    .comboBoxArea .content .leftBox .boxText .packTitle .comboTypeName {
        font-size: 20px;
    }

    .comboBoxArea {
        margin-top: 20px;
    }

    .comboBoxArea .content .detailArea {
        padding: 15px 15px 20px;
    }
    footer .footTop .action {
        flex-direction: column;
    }

    footer .footTop .action .socialMedias {
        margin: 0;
        padding: 0;
        border: none;
        margin-top: 20px;
    }

    footer .footTop .alert .icon {
        display: none;
    }

    footer .footTop .alert .text {
        text-align: center;
    }

    footer .footTop {
        flex-direction: column-reverse;
    }
    .footMenuList ul {
        grid-template-columns: auto;
    }
    .footBody .footMenu .tabsArea .tabHead {
        flex-direction: column;
        width: 100%;
        height: auto;
        border-radius: 30px;
        padding: 10px;
    }

    .footBody .footMenu .tabsArea .tabHead .item {
        padding: 10px 25px;
        width: 100%;
    }
    .intro.bg::before {
        animation: none;
        opacity: 1;
    }
    .introConti.left {
        position: absolute;
        left: -14%;
        top: 30%;
        filter: blur(1.5px);
        animation-delay: 0.4s;
        transform: scale(0.7) translateX(0) translateY(0px) rotate(-5deg);
    }

    .intro .boxSide img {
        width: 250px;
    }

    .intro .boxSide {
        margin-right: -20px;
    }

    .intro .content {
        min-height: 500px;
        padding-top: 100px !important;
    }
    .introConti .intNotiList .item {
        transform: translateX(0px) !important;
    }
    .introConti.right {
        display: block;
        position: absolute;
        right: -27%;
        top: 10%;
        filter: blur(1.5px);
        animation-delay: 0.2s;
        transform: scale(0.7) translateX(0) translateY(0px) rotate(-5deg);
    }

    .intro .textCont {
        padding-top: 60px;
    }
    .blogWhoWhat .blogSide .featured > img {
        aspect-ratio: 3/2;
    }

    .blogSide .blogList .item .BLimg img {
        width: 140px;
    }
    .orderViewContent {
        grid-template-columns: auto;
    }

    .orderViewContent .baskContList .item .statu {
        margin-left: 0;
        width: 100%;
    }

    .orderViewContent .baskContList .item {
        position: relative;
        border-radius: 20px;
        padding: 15px;
        overflow: hidden;
        flex-wrap: wrap;
    }

    .orderViewContent .baskContent {
        padding: 20px;
    }

    .orderViewContent .baskContent .head .badge-statu {
        padding: 10px 15px;
        font-size: 13px;
        border-radius: 12px;
    }

    .orderViewContent .baskContent .head .icon {
        width: 46px;
        min-width: 46px;
        height: 46px;
        font-size: 22px;
        border-radius: 15px;
    }

    .orderViewContent .baskContList .item .text {
        flex: 1;
        width: 100%;
    }

    .orderViewContent .baskContList .item .text .product {
        font-size: 15px;
    }

    .orderViewContent .baskContent .head .detail {
        font-size: 14px;
    }

    .orderViewContent .baskContent .head .detail span {
        font-size: 16px;
    }

    .orderViewContent .caps .heading {
        margin-top: -25px;
    }

    .orderViewContent .caps .heading h1 {
        font-size: 18px;
    }

    .orderViewContent .caps .heading p {
        font-size: 16px;
    }

    .orderViewContent .baskContList .butto {
        border-radius: 12px !important;
    }
    .contentHeading {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .contentHeading .action .orderContentDetail {
        border-radius: 10px;
    }

    .contentHeading .action .orderContentDetail .item {
        text-align: left;
    }

    .profile-content-list .item {
        flex-wrap: wrap;
    }

    .profile-content-list .item .action {
        width: 100%;
    }
    .pack-list-area .item {
        padding: 15px 10px;
    }

    .pack-list-area .item .top span.amount {
        font-size: 16px;
    }

    .pack-list-area .item .top span.type {
        font-size: 14px;
    }

    .pack-list-area .item .bottom .price {
        font-size: 15px;
    }

    .main-cont-title {
        font-size: 18px;
    }

    .pack-list-content {
        padding: 18px;
    }
    header a.logo img {
        height: auto;
    }
    header nav.menu .navAction {
        gap: 5px;
    }
    header .navAction .notify .notifyBell,
    header .headBasket,
    header nav.menu .navAction .butto-login,
    header nav.menu .navAction .mobileNav {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
    header .navAction .notify .notifyBell i,
    header .headBasket > i,
    header nav.menu .navAction .butto-login > i,
    header nav.menu .navAction .mobileNav > i {
        font-size: 16px;
    }
    header nav.menu .navAction .butto-login.btnActionUser {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
    .blogHead .featureList .item.single {
        display: block;
        height: 240px;
    }

    .blogHead .featureList .multi-flex .flex-items:last-child {
        display: none;
    }

    .blogHead .featureList .multi-flex .flex-items .item.multi .content {
        padding: 20px;
        font-size: 15px;
    }

    .blogHead .featureList .item.single .content .title {
        padding-bottom: 5px;
        font-size: 16px;
    }

    .post-item {
        flex-direction: column-reverse;
    }

    .post-thumbnail {
        width: 100%;
        height: fit-content;
        margin-bottom: 12px;
    }

    .post-thumbnail a {
        display: block;
    }

    .post-thumbnail img {
        display: block;
        aspect-ratio: 16/9;
    }
    footer .footerTop .info .text {
        font-size: 15px;
    }
    .post-content-area {
        flex-direction: column;
        gap: 10px;
    }

    .pcontent-sticky ul {
        height: 60px;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .pcontent-sticky ul li {
        width: 100%;
        margin: 0;
        border-right: 1px solid var(--bg);
    }

    .pcontent-sticky ul li.likepost {
        border: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
    }

    .pcontent-sticky ul li.likepost i {
        margin: 0;
    }

    .single-post .post-content .post-image img {
        border-radius: 20px;
    }

    .single-post .post-body {
        border-radius: 20px;
    }

    .post-bottom-area {
        padding: 0;
    }

    .related-list .item img {
        height: 120px;
    }
    .whoList {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .shaped-texts .item .shaped-end-control {
        font-size: 16px;
        padding-right: 70px;
    }
    .shaped-texts .item .butto span {
        display: none;
    }
    .pack-list-area .item.popi {
        border: 2px solid var(--bg);
    }
    .pack-list-area .item .tag {
        display: none;
    }
    .profileDetail .avatar {
        width: 55px;
        min-width: 55px;
        height: 55px;
        font-size: 16px;
        border-radius: 15px;
        margin-right: 10px;
    }

    .profileDetail .wellcome span {
        font-size: 20px;
        font-weight: 600;
    }
    .profileDetail .action .headWallet.pilink {
        min-width: 100px;
    }
    .upzone .heading .info > p {
        display: none;
    }
    .upzone .tabzone .tabType .item {
        font-size: 16px;
        padding: 12px 20px;
    }
    .upzone .heading .info > h1 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .upzone .platZone {
        padding-top: 0;
        margin-bottom: 45px;
    }
    .upzone .platZone.shaped {
        padding-top: 20px;
        margin-bottom: 30px;
    }
    .page-not-found .content .showIn > .d-flex {
        flex-direction: column;
    }

    .page-not-found .content .showIn > .d-flex a {
        justify-content: center;
    }

    .page-not-found .content .showIn > h1 {
        font-size: 24px;
    }

    .page-not-found .content .showIn > span {
        font-size: 20px;
    }

    .page-not-found .content .showIn > p {
        font-size: 16px;
    }

    .page-not-found {
        align-items: flex-start;
    }
    .packList .pack .action-go {
        right: 15px;
    }
    .upzone .tabzone .tabType {
        position: relative;
        animation: 1.2s cubic-bezier(0.455, 0.03, 0.515, 0.955) scrollani;
        animation-delay: 0.5s;
    }
    .toastify {
        width: fit-content;
        max-width: calc(100% - 30px);
    }
    .upzone.page .title h1 {
        font-size: 22px;
    }
    .upzone.page.tool {
        padding: 100px 0 120px;
    }
    .media-link-input .butto {
        position: relative;
        transform: initial;
        margin-top: 10px;
        right: 0;
        width: 100%;
        border-radius: 15px;
    }
}

@media (max-width: 500px) {
    .xs-grid-g-0 {
        grid-gap: 0 !important;
    }
    .xs-grid-g-1 {
        grid-gap: 0.25rem !important;
    }
    .xs-grid-g-2 {
        grid-gap: 0.5rem !important;
    }
    .xs-grid-g-3 {
        grid-gap: 1rem !important;
    }
    .xs-grid-g-3 {
        grid-gap: 1.5rem !important;
    }
    .xs-grid-g-5 {
        grid-gap: 3rem !important;
    }
    .xs-grid-auto {
        -ms-grid-columns: auto !important;
        grid-template-columns: auto !important;
    }
    .xs-grid-2 {
        -ms-grid-columns: 1fr 1fr !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .xs-flex-d-column {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .usCount .item .icon {
        border: none;
        border-radius: 7px;
        background: #ffffff12;
    }
    .usCount .item {
        background: #ffffff10;
        border-radius: 12px;
        padding: 10px;
    }

    .usCount .item .icon {
        min-width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .usCount .item .text {
        line-height: 18px;
        font-size: 14px;
    }

    .usCount .item .text span {
        font-size: 18px;
    }

    .usCount {
        gap: 8px;
    }
    .serviceList .box .icon {
        min-width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .serviceList .box .text {
        font-size: 14px;
    }

    .serviceList {
        gap: 8px;
    }
    .serviceDataList .item {
        width: 40px;
        height: 40px;
    }
    .bmOrder .orderContent .packTitle h2 {
        font-size: 18px;
        text-align: left;
    }
    .bmOrder .orderContent .packTitle p {
        font-size: 15px;
        text-align: left;
    }
    .notifyList {
        width: 350px;
    }
    .notifyList ul li {
        padding: 12px !important;
    }
    .notifyList ul li span .text {
        font-size: 15px;
    }
    .notifyList.show {
        top: calc(100% + 20px);
    }
    .notifyList::before {
        right: 95px;
    }
    .notifyList {
        right: -90px;
    }
    .navArea .headWallet {
        display: none;
    }
    .blogWhoWhat .blogSide .featured > img {
        aspect-ratio: 3/2;
    }
    .blogSide .blogList .item .BLimg img {
        width: 140px;
    }
    section#blogWhoWhat {
        padding: 50px 0 20px;
    }
    .blogWhoWhat .blogSide {
        background: transparent;
        border: none;
    }
    .blogSide .blogList {
        padding: 20px 0 0;
        gap: 12px;
    }
    .blogSide .blogList .item .BLimg img {
        width: 100px;
        border-radius: 20px;
        border-width: 1px;
    }
    .blogSide .blogList .details .title a {
        font-size: 16px;
    }
    .blogSide .blogList .item .details .category {
        padding: 3px 15px;
        margin-bottom: 3px;
        border-radius: 7px;
        font-size: 12px;
    }
    .blogWhoWhat {
        gap: 25px;
    }
    .whatArea {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .whatArea .item {
        flex-direction: row;
    }
    .whatArea .item > a img {
        width: 95px;
        aspect-ratio: 4/3;
    }
    .whatArea .item h4 {
        padding: 0;
        text-align: left;
        font-size: 16px;
    }
    .whoArea .item .title {
        font-size: 16px;
        padding: 10px;
    }
    .blogWhoWhat .blogSide .featured .details {
        padding: 20px;
    }
    .blogWhoWhat .blogSide .featured .details a {
        font-size: 20px;
        line-height: 24px;
    }
    .whoWhatSide {
        margin-top: 10px;
    }
    .whyUsCards {
        padding: 0;
        background: transparent;
        gap: 10px;
    }
    section#mainFaq {
        padding: 30px 0 25px;
        border-bottom: 1px dashed#00000010;
        margin-bottom: 25px;
        z-index: 1;
    }
    section#whyUsCards {
        padding-top: 15px;
        padding-bottom: 0px !important;
    }
    footer .footBottom .container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    footer .footBottom .container .copyright {
        margin: 0 auto !important;
    }
    .paymentMethods {
        padding: 10px;
        text-align: center;
        width: 100%;
    }
    footer .footBottom .container .paymentMethods img {
        margin: 0 auto;
    }
    section.blogHead {
        padding-top: 30px;
    }
    .blogHead .featureList .item.single {
        height: 200px;
    }
    .blogHead .featureList .multi-flex .flex-items {
        gap: 10px;
    }
    .blogHead .featureList .multi-flex .flex-items .item.multi {
        height: 180px;
    }
    .blogHead .featureList .multi-flex .flex-items .item.multi .content {
        padding: 0 12px 15px;
        font-size: 14px;
    }
    .blogHead .featureList .multi-flex .flex-items .item.multi .content span {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .post-item {
        padding: 12px;
    }
    .post-title h3 {
        font-size: 18px;
        line-height: normal;
    }
    .post-title p {
        font-size: 15px;
        line-height: normal;
    }
    .pcontent-sticky ul li {
        font-size: 22px;
    }
    .pcontent-sticky ul li.likepost {
        font-size: 22px;
    }
    .single-post .post-body {
        padding: 20px;
    }
    .post-reaction .item {
        padding: 15px 7px 5px;
        border-radius: 15px;
    }
    .post-reaction .item .reaction-count {
        font-size: 14px;
        color: var(--soft-text-color);
    }
    .post-reaction {
        margin-top: 10px;
    }
    .related-post {
        margin-top: 25px;
    }
    .related-list {
        flex-direction: column;
        gap: 20px;
    }
    .related-list .item {
        margin-right: 0 !important;
    }
    .related-list .item .category {
        margin-top: 8px !important;
    }
    .related-list .item img {
        height: 170px;
    }
    .commend-add-area .comadd-img img {
        height: 50px;
        min-width: 50px;
        width: 50px;
    }
    .commend-add-area .comadd-input-area .comadd-control {
        height: 55px;
        min-height: 55px;
    }
    .comadd-submit {
        font-size: 26px;
    }
    section#whoHead {
        padding: 110px 0 160px;
    }
    .whoHead .title h1 {
        font-size: 26px;
    }
    .whoHead .title p {
        font-size: 16px;
    }
    .whoView .profile {
        flex-direction: column;
    }
    .whoView .topDetail {
        flex-direction: row;
    }
    .whoView .topDetail .item {
        height: auto;
        width: 100%;
    }
    .whoView .topDetail .item .icon {
        aspect-ratio: auto;
        padding: 15px 10px;
    }
    .whoView .topDetail .item .text {
        font-size: 15px;
    }
    .whoView .topDetail .item .text span {
        font-size: 16px;
        display: block;
    }
    .piLiBox .icon {
        flex: 1;
    }
    .piLiBox .text {
        font-size: 16px;
    }
    .whoView .single-post .head .name {
        display: none;
    }
    .whoList.related {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding-inline-end: 15px;
        margin-right: -15px;
    }
    .whoList.related .item {
        transform: scale(1) !important;
        scroll-snap-align: end;
        min-width: 46%;
        aspect-ratio: auto;
        display: block;
    }
    .whoList.related .item img {
        aspect-ratio: auto;
        height: 100%;
        display: block;
    }
    .single-post.who .post-body {
        border-radius: 20px;
        padding: 15px;
    }

    .single-post .post-body p {
        font-size: 16px;
        line-height: 22px;
    }

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

    .piLiBox .action {
        margin: 0 auto;
    }
    .pack-list-area {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .pack-list-area .item .top {
        padding-bottom: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
    .pack-list-area .item .tag {
        top: -2px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding-bottom: 4px;
    }
    .amount-detail {
        gap: 0;
        flex-direction: column;
        height: auto;
        align-items: flex-start;
    }
    .amount-detail .el.price {
        margin-left: 0;
        text-align: left;
    }

    .amount-detail .el.price .old {
        text-align: left;
    }

    .amount-detail .el.first {
        width: 100%;
        border-bottom: 1px solid #e4e7eb;
        padding-bottom: 12px;
    }
    .amount-detail .el {
        padding: 10px;
    }
    .pack-select-bottom .butto {
        width: 100%;
    }
    .priceTag .icon {
        display: none;
    }
    .priceTag .text {
        padding-left: 3px;
    }
    .upzone.page .icon {
        width: 65px;
        min-width: 65px;
        font-size: 24px;
    }

    .upzone .container.pay-page {
        padding: 0 20px;
    }

    .upzone.page {
        padding: 100px 0 90px;
    }
    .bottomMenu .bmList .item span.count {
        top: -8px;
        font-size: 9px;
        min-width: 20px;
        padding: 0 1px;
        height: 15px;
    }
    .bmOrder .InfoCont .inpArea .butto {
        position: relative;
        left: 0;
        top: 0;
        transform: translate(0);
        margin-top: 10px;
        width: 100%;
        padding: 13px;
        border-radius: 12px;
        text-transform: uppercase;
        height: 45px;
    }
    .media-list-area .item {
        max-width: 100%;
    }
    .howBuy ol li {
        padding: 12px;
        min-height: auto;
        gap: 12px;
    }
    
    .howBuy ol li p {
        font-size: 16px !important;
        line-height: normal !important;
    }
}