:root {
    --white: #fff;
    --danger: #f56a6a;
    --warning: #ebb35f;
    --primary: #6a7bf5;
    --success: #57c781;
    --orange: #fe500b;
    --light: #5f728a;
    --text-color: #495057;
    --alternative-font: "Montserrat", sans-serif
}

.butto,.badge {
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 8px 15px;
    text-decoration: none!important;
    font-size: 14px;
    border-radius: 7px;
    transition: .4s;
    display: inline-block;
    line-height: normal
}

.butto:hover,.badge:hover {
    -webkit-filter: brightness(.9);
    filter: brightness(.9)
}

[class*=butto-outline],[class*=badge-outline] {
    padding: 7px 15px;
    background: 0 0
}

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

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

[class*=butto-outline].butto-xs,[class*=badge-outline].badge-xs {
    padding: 2px 12px!important
}

.butto-sm,.badge-sm {
    padding: 6px 12px;
    font-size: 14px
}

[class*=butto-outline].butto-sm,[class*=badge-outline].badge-sm {
    padding: 5px 12px!important
}

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

[class*=butto-outline].butto-lg,[class*=badge-outline].badge-lg {
    padding: 9px 20px!important
}

.butto-xlg,.badge-xlg {
    padding: 10px 15px;
    font-size: 15px
}

[class*=butto-outline].butto-xlg,[class*=badge-outline].badge-xlg {
    padding: 14px 25px!important
}

.butto-primary,.badge-primary {
    color: #fff!important;
    background: var(--primary)
}

.border-primary {
    border-color: var(--primary)!important
}

.badge-outline-primary,.butto-outline-primary {
    color: var(--primary)!important;
    border: 1px solid var(--primary);
    filter: brightness(1)!important
}

.badge-outline-primary:hover,.butto-outline-primary:hover {
    color: #fff!important;
    background: var(--primary)
}

.butto-main,.badge-main {
    color: #fff!important;
    background: var(--main-color)
}

.badge-outline-main,.butto-outline-main {
    color: var(--main-color)!important;
    border: 1px solid var(--main-color);
    filter: brightness(1)!important
}

.badge-outline-main:hover,.butto-outline-main:hover {
    color: #fff!important;
    background: var(--main-color)
}

.butto-success,.badge-success {
    color: #fff!important;
    background: var(--success)
}

.border-success {
    border-color: var(--success)!important
}

.badge-outline-success,.butto-outline-success {
    color: var(--success)!important;
    border: 1px solid var(--success);
    filter: brightness(1)!important
}

.badge-outline-success:hover,.butto-outline-success:hover {
    color: #fff!important;
    background: var(--success)
}

.butto-warning,.badge-warning {
    color: #fff!important;
    background: var(--warning)
}

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

.badge-outline-warning,.butto-outline-warning {
    color: var(--warning)!important;
    border: 1px solid var(--warning);
    filter: brightness(1)!important
}

.badge-outline-warning:hover,.butto-outline-warning:hover {
    color: #fff!important;
    background: var(--warning)
}

.butto-danger,.badge-danger {
    color: #fff!important;
    background: var(--danger)!important
}

.border-danger {
    border-color: var(--danger)!important
}

.badge-outline-danger,.butto-outline-danger {
    color: var(--danger)!important;
    border: 1px solid var(--danger);
    filter: brightness(1)!important
}

.badge-outline-danger:hover,.butto-outline-danger:hover {
    color: #fff!important;
    background: var(--danger)
}

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

.badge-outline-light,.butto-outline-light {
    color: var(--light)!important;
    border: 1px solid #e0e0e0;
    filter: brightness(1)!important
}

.badge-outline-light:hover,.butto-outline-light:hover {
    color: var(--white)!important;
    background: var(--light)!important;
    border-color: var(--light)!important
}

.butto-base,.badge-base {
    color: var(--white);
    background: var(--orange)
}

.badge-outline-base,.butto-outline-base {
    color: var(--orange)!important;
    border: 1px solid var(--orange);
    filter: brightness(1)!important
}

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

.tabContent .tabitem {
    display: none
}

.tabContent .tabitem.show {
    display: block
}

.intro-product-card.anket-oylama {
    background: #597583
}

.intro-product-card.anket-oylama:hover {
    background: #607d8b
}

.su-banner .su__banner--wrapper.cart {
    height: auto;
    padding-top: 70px;
    padding-bottom: 95px!important
}

.su-banner .su__banner--wrapper.cart .right__content .image img {
    height: 250px
}

.su-banner .su__banner--wrapper.cart .right__content .image {
    right: 50px
}

.su-banner .su__banner--wrapper.login {
    justify-content: center;
    background: #fff0!important;
    text-align: center;
    color: #fff;
    height: auto;
    padding-top: 50px;
    padding-bottom: 130px
}

.logHead h1 {
    font-size: 24px;
    font-weight: 600
}

.logHead p {
    opacity: .7
}

.login-area {
}

.login-area .tabHead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    margin-top: -110px
}

.login-area .tabHead .item {
    width: 100%;
    text-align: center;
    padding: 10px;
    background: #713be1;
    border-radius: 7px;
    color: #fff;
    cursor: pointer;
    transition: .2s;
    user-select: none
}

.login-area .loreBox {
    background: #fff;
    padding: 35px 30px;
    border-radius: 12px
}

.forgot-content {
    display: none;
    position: relative
}

.forgot-content .ord-control {
    border-radius: 12px
}

.forgot-content .butto {
    position: absolute;
    right: 10px;
    transform: translateY(-50%);
    top: 50%
}

.head-stable {
    display: flex;
    align-items: center;
    margin-left: 10px;
    gap: 7px
}

.bask-head {
    height: 40px;
    width: 40px;
    min-width: 40px;
    border-radius: 8px;
    border: 1px solid rgba(var(--cl1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--cl1))!important;
    position: relative;
    transition: .2s
}

.bask-head span.count {
    background: rgba(var(--cl1));
    color: #fff;
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 9px;
    text-align: center;
    padding: 1px 4px;
    border-radius: 4px;
    min-width: 15px
}

.bask-head>i {
    display: block;
    font-size: 16px;
    position: relative
}

.profile-login {
    background: var(--main-color);
    color: #fff!important;
    padding: 3px 20px;
    border-radius: 8px;
    cursor: pointer;
    margin-left: 2px;
    box-shadow: 0 5px 25px rgba(var(--cl1),0.3);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 15px;
    position: relative
}

.profile-head .avatar {
    height: 40px;
    padding-right: 3px;
    border-radius: 8px;
    border: 1px solid var(--main-color);
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    color: rgba(var(--cl1))!important;
    transition: .2s;
    position: relative;
    cursor: pointer
}

.bask-head:hover,.profile-head .avatar:hover {
    background: rgba(var(--cl1),0.15)
}

.profile-head ul.profile-head-drop {
    position: absolute;
    top: 40px;
    padding: 0;
    background: #fff;
    border-radius: 5px;
    min-width: 200px;
    right: 0;
    z-index: 99;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .1s;
    user-select: none
}

.profile-head ul.profile-head-drop li {
    list-style: none;
    border-bottom: 1px solid var(--bg)
}

.profile-head ul.profile-head-drop li:last-child {
    border: none
}

.profile-head ul.profile-head-drop li a {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: .2s;
    color: var(--text-color);
    font-size: 15px;
    font-weight: 500;
    border-radius: 5px
}

.profile-head ul.profile-head-drop li a:hover {
    background: #3b41470d
}

.profile-head ul.profile-head-drop li a>i {
    color: var(--main-color)
}

.profile-head {
    position: relative
}

ul.profile-head-drop::before {
    content: "";
    position: absolute;
    right: 12px;
    display: block;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom-color: #fff;
    top: -14px;
    margin-top: 0
}

.profile-head.show ul.profile-head-drop {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    top: 50px
}

.profile-head.show .avatar {
    background: var(--main-color);
    color: #fff!important
}

.profile-head .avatar .balance {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--main-color);
    font-weight: 600;
    padding-left: 10px;
    padding-right: 5px;
    font-family: var(--alternative-font);
    user-select: none
}

.profile-head .avatar .profile {
    width: 32px;
    height: 32px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--main-color);
    color: #fff;
    user-select: none
}

.profile-head.show .avatar .balance {
    color: #fff!important
}

.profile-head.show .avatar .profile {
    background: #ffffff10;
    border: 1px solid #ffffff15
}

.notfavlist {
    text-align: center;
    background: #fff;
    border-radius: 10px;
    padding: 70px 0;
    height: fit-content
}

.notfavlist span {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color)
}

.notfavlist p {
    color: var(--text-color);
    margin-bottom: 0;
    opacity: .7
}

.order-step-area {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 20px;
    position: relative
}

.priceTag {
    display: flex;
    align-items: center;
    gap: 12px
}

.priceTag .icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    background: var(--bg);
    border-radius: 8px;
    font-size: 23px
}

.priceTag.cart .icon {
    background: var(--main-color);
    color: #fff
}

.priceTag .text {
    font-size: 14px;
    color: #5c6a7a;
    line-height: 20px
}

.priceTag .text span {
    display: block;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--alternative-font)
}

.cart-after-btn {
    background: var(--main-color);
    border: none;
    height: 50px;
    padding: 10px 20px;
    border-radius: 8px;
    color: #fff
}

.su-banner .su__banner--wrapper.profile {
    height: auto;
    padding: 20px;
    display: flex;
    align-items: center;
    padding-bottom: 55px;
    min-height: auto
}

.su-banner .su__banner--wrapper.profile .cont {
    display: flex;
    align-items: center;
    gap: 15px
}

.su-banner .su__banner--wrapper.profile .cont .avatar {
    width: 60px;
    min-width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff15;
    border-radius: 5px;
    color: #fff;
    font-size: 20px
}

.su-banner .su__banner--wrapper.profile .cont .text {
    line-height: 20px
}

.su-banner .su__banner--wrapper.profile .cont .text h1 {
    font-size: 20px;
    color: #fff
}

.su-banner .su__banner--wrapper.profile .cont .text p {
    color: #ffffff90
}

.su-banner .su__banner--wrapper.profile .detail {
    margin-left: auto
}

.su-banner .su__banner--wrapper.profile .detail .balance {
    display: flex;
    align-items: center;
    background: #ffffff10;
    padding: 5px;
    padding-left: 15px;
    border-radius: 10px;
    font-size: 15px;
    color: #fff;
    font-family: var(--alternative-font)
}

.su-banner .su__banner--wrapper.profile .detail .balance .addBalance {
    background: var(--orange);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 15px;
    color: #fff;
    margin-left: 15px;
    transition: .2s;
    font-family: euclid
}

.profile-content-title {
    position: relative;
    padding-left: 23px;
    margin-bottom: 20px;
    line-height: 20px
}

.profile-content-title h2 {
    font-size: 22px;
    color: var(--text-color);
    font-weight: 600
}

.profile-content-title p {
    color: var(--text-color) 80;
    margin: 0
}

.profile-content-title::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 0;
    bottom: 0;
    width: 5px;
    background: rgba(var(--cl1));
    border-radius: 5px
}

.addfunds-info,.profile-set-area {
    background: #fff;
    padding: 20px;
    border-radius: 12px
}

.profile-set-area {
    padding: 25px
}

.addfunds-area {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 20px
}

.addfunds-info .head,.profile-set-area .head {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    padding-bottom: 12px;
    position: relative;
    color: var(--light);
    border-bottom: 1px solid var(--bg);
    display: flex;
    align-items: center;
    justify-content: space-between
}

.addfunds-info .head::before,.profile-set-area .head::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 35px;
    height: 4px;
    border-radius: 5px;
    background: rgba(var(--cl1))
}

.addfunds-info p {
    margin: 0;
    color: var(--light);
    line-height: 21px
}

.addfunds-area .body {
    padding: 25px 25px 13px;
    border-bottom: 1px solid var(--bg)
}

.addfunds-area .foot {
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center
}

.select-payment-method {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--bg)
}

.select-payment-method .item {
    font-size: 15px!important;
    color: #63667c;
    font-weight: 500;
    padding: 10px;
    border: 1px solid #dcdde1;
    border-radius: 10px;
    user-select: none;
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    margin-bottom: 10px
}

.select-payment-method .item.selected {
    border-color: #fe500b
}

.select-payment-method .item img {
    display: block;
    border-radius: 7px;
    height: 30px;
    width: 30px;
    object-fit: cover
}

.select-payment-method .item .text span {
    display: block;
    font-weight: 400;
    font-size: 14px;
    opacity: .7
}

.select-payment-method .item .text {
    color: var(--text-color);
    line-height: 17px
}

.user-account-menu {
    border-radius: 40px;
    background: #fff;
    position: relative;
    transform: translateY(-25px);
    z-index: 2;
    width: fit-content;
    margin: 0 auto;
    overflow: hidden
}

.user-account-menu .responsive-bar {
    display: none
}

.user-account-menu ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center
}

.user-account-menu ul li {
    list-style: none
}

.user-account-menu ul li a {
    padding: 10px 25px;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-left: 1px solid #c1c4cd36!important;
    font-weight: 500;
    color: #5d6078;
    transition: .2s;
    user-select: none;
    font-size: 15px
}

.user-account-menu ul li:first-child a {
    border: none!important
}

.user-account-menu ul li a:hover {
    background: #a8a8c717
}

label.form-control-label {
    font-size: 14px;
    color: #9c9ca7;
    margin-bottom: 5px;
    padding-left: 3px
}

.full-alert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transition: .4s cubic-bezier(0,0,.34,.81)
}

.full-alert.show {
    opacity: 1;
    pointer-events: all
}

.full-alert .overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #353642;
    opacity: .95;
    transition: .4s cubic-bezier(0,0,.34,.81)
}

.full-alert .contside {
    background: #202130;
    padding: 20px 30px;
    z-index: 1;
    border-radius: 25px;
    min-width: 380px;
    position: relative;
    overflow: hidden
}

.full-alert .contside::before {
    content: "";
    position: absolute;
    left: -144px;
    top: -45px;
    background-image: url(data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9JzMyNycgaGVpZ2h0PSczNzAnIHZpZXdCb3g9JzAgMCAzMjcgMzcwJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxnIG9wYWNpdHk9JzAuMic+PHBhdGggb3BhY2l0eT0nMC4wNScgZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J00xMTUuMzU2IDE4LjYzODRDNjQuNDIxMiA0Ny43NjEyIDMxLjAzOTggNzYuODEzMiAxMi4zOTIgMTEwLjk5OEMyLjEyNjU1IDEyOS44MTYgLTEuMzU2MTYgMTQyLjkzMSAwLjQ1OTM4OCAxNTYuODYxQzIuMTIwMDYgMTY5LjYwMyA3LjYzNzg5IDE4Mi4zMzggMjEuODU3NCAyMDguMjgyQzI3LjgyOTkgMjE5LjE3OSAyNy42NjI2IDIzNi42NjEgMjIuODk1OCAyNjEuNTQ0QzIxLjc1NjQgMjY3LjQ5MiAyMC40MDgyIDI3My42NDMgMTguNTk1MSAyODEuMzU1QzE5LjAyOCAyNzkuNTE0IDE0LjU1NDggMjk4LjI1OSAxMy41ODA1IDMwMi42NTFDMTEuOTg0IDMwOS44NDggMTEuMDk1NiAzMTQuOTU1IDEwLjg0MjkgMzE4LjgzM0M5LjI4OTg0IDM0Mi42NjggMjUuMjk1NyAzNjAuMzU1IDUxLjAzNjggMzY2LjgwM0M3NS45MzMzIDM3My4wMzkgMTA0LjgyOCAzNjcuMzYyIDEyNC43MTQgMzUxLjIwMUMxMjcuMzgyIDM0OS4wMzMgMTM0LjE4NSAzNDMuNDc1IDEzOC4yMjMgMzQwLjE3NkMxMzkuNzk0IDMzOC44OTMgMTQwLjk0NiAzMzcuOTUxIDE0MS4yNzUgMzM3LjY4NEMxNDcuMzc2IDMzMi43MTIgMTUxLjg2MSAzMjkuMTA4IDE1Ni4wODkgMzI1LjgwMUMxNjYuNDg0IDMxNy42NzEgMTc0Ljc4IDMxMS44MDQgMTgyLjc4IDMwNy4wNzFDMjA1LjcyNiAyOTMuNDk0IDIyNy44NjQgMjg4LjY3NyAyNjAuNjg4IDI5MC45NzRDMjc1LjU2NiAyOTIuMDE1IDI4OS41NjMgMjg2LjAzNCAzMDEuMTUgMjc0LjQxOUMzMTEuOTI4IDI2My42MTQgMzIwLjA1MSAyNDguNDIxIDMyNC4wMTYgMjMxLjkzNEMzMjguMDY5IDIxNS4wODMgMzI3LjUyOSAxOTguMDAyIDMyMi4xNTIgMTgzLjY3N0MzMTYuMjI4IDE2Ny44OTcgMzA0Ljc1OCAxNTYuMDkgMjg4LjE0OCAxNDkuODMxQzI3MC4xMjggMTQzLjA0MiAyNjIuMzcgMTM0LjU4NCAyNjIuMTc0IDEyMy41MThDMjYyLjA5IDExOC44IDI2My4zNDIgMTEzLjU4IDI2NS44ODggMTA3LjI2QzI2Ny43MzggMTAyLjY2NSAyNjguMTI5IDEwMS44NjMgMjc0LjQ2NCA4OS4yMzYyQzI4MS4yMzcgNzUuNzM1NSAyODQuNDg1IDY3Ljc0MTEgMjg2LjA3NyA1OC44MzIzQzI4OC4xNTcgNDcuMTkyNiAyODYuMzA1IDM2LjYxOTQgMjc5LjY0MyAyNi41MDMyQzI2OS4yOCAxMC43NjQ2IDI0MS41NDggMS4zMjc5NCAyMDYuNjU1IDAuMTI3NTc2QzE3Mi44MSAtMS4wMzY3MyAxMzcuNzc4IDUuODE4NSAxMTUuMzU2IDE4LjYzODRaTTEuNjUwMTcgMTU2LjcwNkMtMC4xMjc3NDEgMTQzLjA2NCAzLjI5MTc2IDEzMC4xODggMTMuNDQ2MiAxMTEuNTczQzMxLjk2ODMgNzcuNjE4OCA2NS4xOTI4IDQ4LjcwMzMgMTE1Ljk1MiAxOS42ODA4QzEzOC4xNiA2Ljk4MzM3IDE3Mi45NzYgMC4xNzA0OTMgMjA2LjYxNCAxLjMyNzY4QzI0MS4xNTUgMi41MTU5MyAyNjguNTQ5IDExLjgzNzggMjc4LjY0MSAyNy4xNjM2QzI4NS4xMjUgMzcuMDExNiAyODYuOTIzIDQ3LjI3MjYgMjg0Ljg5NSA1OC42MjA5QzI4My4zMjkgNjcuMzgyMiAyODAuMTE1IDc1LjI5NTcgMjczLjM5IDg4LjY5NzZDMjY3LjAzMyAxMDEuMzY4IDI2Ni42NDMgMTAyLjE3MSAyNjQuNzc0IDEwNi44MTJDMjYyLjE3MyAxMTMuMjY3IDI2MC44ODYgMTE4LjYzNCAyNjAuOTczIDEyMy41MzlDMjYxLjE3OSAxMzUuMTY5IDI2OS4yODggMTQ0LjAwOCAyODcuNzI0IDE1MC45NTVDMzA0LjAwNSAxNTcuMDg5IDMxNS4yMjMgMTY4LjYzNyAzMjEuMDI4IDE4NC4wOTlDMzI2LjMxNiAxOTguMTg2IDMyNi44NDggMjE1LjAyNSAzMjIuODQ4IDIzMS42NTNDMzE4LjkzMyAyNDcuOTMyIDMxMC45MTYgMjYyLjkyOCAzMDAuMyAyNzMuNTdDMjg4Ljk0NyAyODQuOTUyIDI3NS4yODEgMjkwLjc5MSAyNjAuNzcyIDI4OS43NzZDMjI3LjcxMiAyODcuNDYyIDIwNS4zMzEgMjkyLjMzMiAxODIuMTY4IDMwNi4wMzdDMTc0LjExNyAzMTAuODAxIDE2NS43ODEgMzE2LjY5NiAxNTUuMzQ5IDMyNC44NTVDMTUxLjExNCAzMjguMTY4IDE0Ni42MjMgMzMxLjc3NiAxNDAuNTE2IDMzNi43NTNDMTQwLjE4NyAzMzcuMDIxIDEzOS4wMyAzMzcuOTY2IDEzNy40NTUgMzM5LjI1M0MxMzMuNDE1IDM0Mi41NTMgMTI2LjYyMiAzNDguMTA0IDEyMy45NTcgMzUwLjI2OUMxMDQuMzczIDM2Ni4xODQgNzUuODY4MiAzNzEuNzg1IDUxLjMyODYgMzY1LjYzOEMyNi4xMDYzIDM1OS4zMiAxMC41Mjk4IDM0Mi4xMDcgMTIuMDQxMiAzMTguOTExQzEyLjI4ODggMzE1LjExIDEzLjE2ODggMzEwLjA1MyAxNC43NTI5IDMwMi45MTFDMTUuNzI0OCAyOTguNTMgMjAuMTk0NyAyNzkuNzk5IDE5Ljc2NDEgMjgxLjYzQzIxLjU4MDcgMjczLjkwMyAyMi45MzIxIDI2Ny43MzcgMjQuMDc1MiAyNjEuNzdDMjguODkyNyAyMzYuNjIzIDI5LjA2MiAyMTguOTI4IDIyLjkxMDQgMjA3LjcwNEM4Ljc2MjQ2IDE4MS44OTEgMy4yODQ5OSAxNjkuMjUgMS42NTAxNyAxNTYuNzA2WicgZmlsbD0nd2hpdGUnLz48cGF0aCBvcGFjaXR5PScwLjE1JyBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTE4My4wNzIgMTQuNjE3NUMxNTguMTIyIDE3LjE4MDMgMTI5Ljk5NSAyNy4zOTM0IDEwNS4yNTkgNDEuOTAyNUMxMDQuMTIyIDQyLjU2OTcgMTAxLjEzOCA0NC4yNzUgOTcuMzgwMiA0Ni40MjE5Qzg4Ljc4MjkgNTEuMzM0MyA3Ni4xMzg3IDU4LjU1OTIgNzIuMzEzMSA2MC45NTE5QzYwLjM5NDIgNjguNDA2NyA1Mi40ODM3IDc1LjMwMTUgNDQuNjkyOCA4NS41Njg5QzM3LjAxMDEgOTUuNjkzNyAyOS4zMjc5IDEwOS40MDggMTkuNzQ0MyAxMzAuMDg0QzE1Ljg5IDE0MS4xMDYgMTUuMzY0MSAxNTAuNjY0IDE3LjYxNTEgMTU5Ljg3N0MxOS4zNDU1IDE2Ni45NTkgMjIuMDIwMiAxNzIuNDgzIDI4LjA0NDQgMTgyLjcyOUMyOC4yNDIyIDE4My4wNjUgMjguNDQwOCAxODMuNDAyIDI4LjgzNzQgMTg0LjA3NkMzNS43NTc5IDE5NS44MzIgMzguNTMxMSAyMDEuNjQ5IDQwLjIwNjUgMjA5LjY3N0M0Mi40MDkyIDIyMC4yMzEgNDEuMTMxOSAyMzEuNDk3IDM1LjU4NjkgMjQ0LjgzM0MyMy41NTcxIDI3NS41NDggMTkuNjgxNSAzMDAuNTQzIDIzLjIyODYgMzE5LjU4NEMyNi40MDAxIDMzNi42MDkgMzUuNDc4MyAzNDguNDc0IDQ5LjA3NDkgMzU0Ljc2OEM3My43NzE4IDM2Ni4xOTggMTExLjA3MyAzNTcuNDQ0IDEzNC4xNzMgMzM1LjgzNUMxMzYuODk0IDMzMy4yOSAxNDQuOTQxIDMyNS43MjEgMTQ2Ljg5NiAzMjMuODgyTDE0Ny4zMjYgMzIzLjQ3N0MxNTIuMjI4IDMxOC44NzYgMTU1Ljc4MyAzMTUuNTc3IDE1OS4xNTUgMzEyLjUxOUMxNjcuNTAxIDMwNC45NDkgMTc0LjE2MiAyOTkuMzk4IDE4MC41ODIgMjk0Ljc4QzIwMC45MzUgMjgwLjE0IDIyMC41MzcgMjc0LjExNSAyNTAuODA4IDI3NC4xMTVDMjc2Ljc5MSAyNzQuMTE1IDI5Ny45NTQgMjQ5LjcxNiAzMDMuMyAyMTcuODczQzMwNS44NDkgMjAyLjY5MiAzMDQuMzEzIDE4Ny41OTEgMjk4LjY1OSAxNzUuMjMxQzI5Mi40MjggMTYxLjYxMiAyODEuNTI3IDE1MS44NTcgMjY2LjQxMSAxNDcuMzRDMjUwLjEyNSAxNDIuNDc0IDI0Mi43NDYgMTM1LjUyMyAyNDEuODQyIDEyNS44MzVDMjQxLjQ1NiAxMjEuNjk2IDI0Mi4yMTUgMTE3LjAzMSAyNDQuMDQ0IDExMS4zM0MyNDUuMzg2IDEwNy4xNDcgMjQ1Ljk2MyAxMDUuNzA4IDI1MC40NjEgOTQuOTQ2QzI1Ni42MzkgODAuMTYxMSAyNTkuMTY0IDcxLjgyOTkgMjU5LjI2NiA2Mi41MTEyQzI1OS4zNjEgNTMuODczOCAyNTYuODY1IDQ2LjAyNTIgMjUxLjI4NiAzOC43MTk4QzIzNi4zNTUgMTkuMTcxMSAyMTIuNjE1IDExLjU4MyAxODMuMDcyIDE0LjYxNzVaTTk3Ljk0MTMgNDcuNDg0NEMxMDEuNzE2IDQ1LjMyNzUgMTA0LjcxOSA0My42MTE1IDEwNS44NjcgNDIuOTM4NEMxMzAuNDYzIDI4LjUxMDkgMTU4LjQzIDE4LjM1NTkgMTgzLjE5NSAxNS44MTIyQzIxMi4zNTcgMTIuODE2NyAyMzUuNjg1IDIwLjI3MzQgMjUwLjMzMSAzOS40NDg4QzI1NS43NDUgNDYuNTM2OCAyNTguMTU3IDU0LjEyMzUgMjU4LjA2NSA2Mi40OTgxQzI1Ny45NjYgNzEuNjEzMyAyNTUuNDczIDc5LjgzNjUgMjQ5LjM1MiA5NC40ODMxQzI0NC44MzcgMTA1LjI4OCAyNDQuMjU3IDEwNi43MzIgMjQyLjkgMTEwLjk2NEMyNDEuMDI2IDExNi44MDUgMjQwLjI0MyAxMjEuNjIxIDI0MC42NDYgMTI1Ljk0N0MyNDEuNjAzIDEzNi4xOTMgMjQ5LjM1NyAxNDMuNDk3IDI2Ni4wNjcgMTQ4LjQ5MUMyODAuODQ1IDE1Mi45MDcgMjkxLjQ3OCAxNjIuNDIxIDI5Ny41NjYgMTc1LjczMUMzMDMuMTE1IDE4Ny44NiAzMDQuNjI2IDIwMi43MTkgMzAyLjExNiAyMTcuNjc0QzI5Ni44NTYgMjQ4Ljk5OSAyNzYuMTEyIDI3Mi45MTQgMjUwLjgwOCAyNzIuOTE0QzIyMC4yOTEgMjcyLjkxNCAyMDAuNDQzIDI3OS4wMTUgMTc5Ljg4IDI5My44MDVDMTczLjQxOCAyOTguNDU0IDE2Ni43MjUgMzA0LjAzMSAxNTguMzQ4IDMxMS42M0MxNTQuOTcxIDMxNC42OTMgMTUxLjQxIDMxNy45OTYgMTQ2LjUwNCAzMjIuNjAyTDE0Ni4wNzggMzIzLjAwM0MxNDQuMTI5IDMyNC44MzYgMTM2LjA3NCAzMzIuNDEzIDEzMy4zNTMgMzM0Ljk1OEMxMTAuNTg4IDM1Ni4yNTQgNzMuNzk4NSAzNjQuODg3IDQ5LjU3OTIgMzUzLjY3OEMzNi4zMzg3IDM0Ny41NSAyNy41MDk5IDMzNi4wMSAyNC40MDkgMzE5LjM2NEMyMC45MDg0IDMwMC41NzIgMjQuNzUwNCAyNzUuNzk0IDM2LjcwMDIgMjQ1LjI4M0M0Mi4zMzA3IDIzMS43NDIgNDMuNjM1NyAyMjAuMjMxIDQxLjM4MTkgMjA5LjQzMUMzOS42NzE0IDIwMS4yMzYgMzYuODU2OCAxOTUuMzMyIDI5Ljg3MjEgMTgzLjQ2N0MyOS40NzU1IDE4Mi43OTMgMjkuMjc3MSAxODIuNDU2IDI5LjA3OTUgMTgyLjEyQzIzLjExMTkgMTcxLjk3MSAyMC40NzYgMTY2LjUyNyAxOC43ODE1IDE1OS41OTJDMTYuNTg2MyAxNTAuNjA3IDE3LjA5OTIgMTQxLjI4NiAyMC44NTU4IDEzMC41MzRDMzAuMzg0MSAxMDkuOTg0IDM4LjAyNzkgOTYuMzM4OSA0NS42NDkzIDg2LjI5NDlDNTMuMzQ1OCA3Ni4xNTE5IDYxLjE0NzUgNjkuMzUyIDcyLjk0OTggNjEuOTcwMUM3Ni43NTExIDU5LjU5MjUgODkuMzQ2NSA1Mi4zOTU1IDk3Ljk0MTMgNDcuNDg0NFonIGZpbGw9J3doaXRlJy8+PHBhdGggb3BhY2l0eT0nMC4yJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTE4MS4zNzggMjguNTc5NEMxNjQuNDU2IDMyLjQwMzMgMTQ2LjI4NSA0MC40ODA5IDExMy40OTUgNTcuNjI1OEM5Mi4yOTA5IDY4LjcxMjUgODUuMjcxNCA3Mi42NTcgNzguNzYxNSA3Ny40ODU3QzcyLjU0NyA4Mi4wOTUyIDY4LjMxOTggODYuNzUzOSA2NC4wNTUzIDkzLjYwNzRDNjEuNDM2MSA5Ny44MTY4IDU4Ljg4MDQgMTAyLjY0MyA1NC41MzYgMTExLjQwOEM1NC4xNjE0IDExMi4xNjQgNTMuMTEzMyAxMTQuMjg4IDUxLjk2NTUgMTE2LjYxNkM1MC41OTI1IDExOS4zOTkgNDkuMDc2OCAxMjIuNDcyIDQ4LjQwMDUgMTIzLjgzN0M0NS42ODU5IDEyOS4zMTUgNDMuMjI3OCAxMzQuMjA1IDQwLjYwMDYgMTM5LjMzQzM0LjM3MzEgMTUxLjQ3OCAzMi4yMTcxIDE1OS40MjUgMzMuNDEwNyAxNjQuNzY2QzM0LjM4NTEgMTY5LjEyNiAzNi45OTM0IDE3MS4zNjMgNDMuMTE0IDE3NC4zMzNDNDMuMzY2MyAxNzQuNDU1IDQ0LjAyMDUgMTc0Ljc2OSA0NC41Mzc5IDE3NS4wMThDNDQuODQ3NSAxNzUuMTY2IDQ1LjEwOCAxNzUuMjkyIDQ1LjIwNDMgMTc1LjMzOEM0Ni4wMzU0IDE3NS43NCA0Ni42OTExIDE3Ni4wNjUgNDcuMzI0IDE3Ni4zOTJDNTQuMTk5MyAxNzkuOTUxIDU4LjAzMjggMTgzLjk5NSA1OS44NzU2IDE5MS4zNzZDNjIuMjY4MyAyMDAuOTU5IDYwLjU4NjUgMjE1LjM5NCA1My45NDA3IDIzNi4zMzZDNTMuMzY1MyAyMzguMTUgNTIuNzc4OCAyMzkuOTg3IDUyLjAwNzIgMjQyLjM5NkM1Mi4wOTk3IDI0Mi4xMDcgNTAuNTM4NiAyNDYuOTc4IDUwLjExNjUgMjQ4LjI5OEM0OC42MTE2IDI1My4wMDQgNDcuNTQ3OCAyNTYuMzc2IDQ2LjU1MTggMjU5LjYxOUM0NC4wMTYxIDI2Ny44NzYgNDIuMjE5NCAyNzQuMzggNDAuOTA2NCAyODAuMjZDMzcuNzYxNSAyOTQuMzQ2IDM3LjQ5NjQgMzA0Ljc0OCA0MC41NzIgMzEzLjAzNUM0OC4zMDggMzMzLjg3OCA2NC43NTkzIDM0MS45NTQgODYuMzQ1OCAzMzguNzM4QzEwMy45OTQgMzM2LjEwOCAxMjQuMDE5IDMyNS43MDkgMTM3LjMwOSAzMTMuMjY0QzEzNy44MjMgMzEyLjc4MyAxMzkuMTM1IDMxMS41NDcgMTQwLjY4NiAzMTAuMDg2QzE0My4zNjkgMzA3LjU1OCAxNDYuNzY4IDMwNC4zNTUgMTQ3Ljk5MiAzMDMuMjE4QzE1MS42OTIgMjk5Ljc3OCAxNTQuNTY3IDI5Ny4yMjMgMTU3LjM0NSAyOTQuOTRDMTY2Ljg5OSAyODcuMDg4IDE3NS44MzUgMjgyLjIwMyAxODkuMDIxIDI3OC4wMzZDMTkyLjY1OCAyNzYuODg3IDE5NS45MjMgMjc1LjY0NCAxOTguOTgyIDI3NC4yNzVDMjAxLjc1NyAyNzMuMDMyIDIwNC4yMzkgMjcxLjc1IDIwNy4wNzcgMjcwLjE0QzIwNy4yMTkgMjcwLjA2IDIwNy42NzIgMjY5Ljc5OCAyMDguMjgyIDI2OS40NDVDMjA5LjkwMyAyNjguNTA4IDIxMi42MzQgMjY2LjkyOSAyMTMuNTg3IDI2Ni40MDdDMjIwLjQxNCAyNjIuNjcxIDIyNi4wODMgMjYxLjE1MiAyMzUuNjc2IDI2MS4xNTJDMjU3LjY1NyAyNjEuMTUyIDI3NS41NDkgMjQwLjUwNCAyODAuMDY4IDIxMy41NjRDMjgyLjIyMiAyMDAuNzIzIDI4MC45MjQgMTg3Ljk0OCAyNzYuMTQ0IDE3Ny40ODlDMjcwLjg3NSAxNjUuOTYxIDI2MS42NTQgMTU3LjcwMiAyNDguODcxIDE1My44NzhDMjM1LjE4NSAxNDkuNzg1IDIyOC4zNDYgMTQyIDIyNi42MTggMTMwLjMyNEMyMjUuMjgzIDEyMS4zMDIgMjI2LjU5NSAxMTIuMjkgMjMwLjk1MyA5My43NjY4QzIzMS4wNDUgOTMuMzc1OSAyMzEuMTMzIDkzLjAwNTQgMjMxLjI3NSA5Mi40QzIzNC43ODYgNzcuNTA2NiAyMzUuOTk4IDcxLjIyNTggMjM2LjM0OCA2My44MzAyQzIzNi44MTUgNTMuOTgzMiAyMzQuODc2IDQ2LjQzMzIgMjI5Ljg0OSA0MC43Njc2QzIxNy45NzggMjcuMzg4MyAyMDIuMzA2IDIzLjg1MDQgMTgxLjM3OCAyOC41Nzk0Wk03OS40NzY4IDc4LjQ1Qzg1LjkxNSA3My42NzQ1IDkyLjkxMjcgNjkuNzQyMyAxMTQuMDUxIDU4LjY4OThDMTQ2Ljc0OCA0MS41OTM1IDE2NC44NTcgMzMuNTQzNiAxODEuNjQzIDI5Ljc1MDVDMjAyLjE3NiAyNS4xMTA2IDIxNy40MDEgMjguNTQ3NSAyMjguOTUxIDQxLjU2NDVDMjMzLjc0IDQ2Ljk2MjIgMjM1LjYwMiA1NC4yMTE3IDIzNS4xNDkgNjMuNzczMUMyMzQuODAzIDcxLjA2NzMgMjMzLjU5OSA3Ny4zMDc0IDIzMC4xMDYgOTIuMTI0MkMyMjkuOTY0IDkyLjcyOTkgMjI5Ljg3NiA5My4xMDA1IDIyOS43ODQgOTMuNDkxNkMyMjUuMzkgMTEyLjE2OSAyMjQuMDY1IDEyMS4yNzIgMjI1LjQzIDEzMC40OTlDMjI3LjIyNyAxNDIuNjQgMjM0LjM5NyAxNTAuODAyIDI0OC41MjcgMTU1LjAyOUMyNjAuOTcyIDE1OC43NTEgMjY5LjkyNCAxNjYuNzY5IDI3NS4wNTIgMTc3Ljk4OEMyNzkuNzI2IDE4OC4yMTcgMjgwLjk5OSAyMDAuNzUgMjc4Ljg4NCAyMTMuMzY1QzI3NC40NTIgMjM5Ljc4NiAyNTYuOTc4IDI1OS45NTEgMjM1LjY3NiAyNTkuOTUxQzIyNS44NzYgMjU5Ljk1MSAyMjAuMDEgMjYxLjUyMyAyMTMuMDEgMjY1LjM1NEMyMTIuMDQgMjY1Ljg4NSAyMDkuMjc4IDI2Ny40ODIgMjA3LjY2IDI2OC40MTdDMjA3LjA2MiAyNjguNzYzIDIwNi42MjEgMjY5LjAxOCAyMDYuNDg1IDI2OS4wOTVDMjAzLjY3OCAyNzAuNjg3IDIwMS4yMjggMjcxLjk1MyAxOTguNDkxIDI3My4xNzhDMTk1LjQ3NCAyNzQuNTI5IDE5Mi4yNTIgMjc1Ljc1NSAxODguNjYgMjc2Ljg5QzE3NS4zMjUgMjgxLjEwNCAxNjYuMjU0IDI4Ni4wNjQgMTU2LjU4MiAyOTQuMDEyQzE1My43ODMgMjk2LjMxMyAxNTAuODkxIDI5OC44ODMgMTQ3LjE3NCAzMDIuMzM4QzE0NS45NDcgMzAzLjQ3OSAxNDIuNTQgMzA2LjY4OSAxMzkuODU1IDMwOS4yMThDMTM4LjMwOCAzMTAuNjc2IDEzNyAzMTEuOTA4IDEzNi40ODggMzEyLjM4N0MxMjMuMzY4IDMyNC42NzMgMTAzLjU2MyAzMzQuOTU4IDg2LjE2ODcgMzM3LjU1QzY1LjEwOTggMzQwLjY4OCA0OS4yMjEzIDMzMi44ODggNDEuNjk3NyAzMTIuNjE3QzM4LjcxOTYgMzA0LjU5MiAzOC45NzkzIDI5NC40MDIgNDIuMDc4MyAyODAuNTIyQzQzLjM4MzMgMjc0LjY3NyA0NS4xNzIzIDI2OC4yMDEgNDcuNjk5NiAyNTkuOTcyQzQ4LjY5NCAyNTYuNzMzIDQ5Ljc1NjUgMjUzLjM2NiA1MS4yNjAyIDI0OC42NjRDNTEuNjgyMSAyNDcuMzQ0IDUzLjI0MzEgMjQyLjQ3MyA1My4xNTA3IDI0Mi43NjJDNTMuOTIyNiAyNDAuMzUyIDU0LjUwOTQgMjM4LjUxNCA1NS4wODUyIDIzNi42OTlDNjEuNzkyMSAyMTUuNTY1IDYzLjQ5NzYgMjAwLjkyNiA2MS4wNDA2IDE5MS4wODVDNTkuMTAzMSAxODMuMzI0IDU1LjAzMTIgMTc5LjAyOSA0Ny44NzU5IDE3NS4zMjZDNDcuMjMxNiAxNzQuOTkyIDQ2LjU2NjggMTc0LjY2MiA0NS43MjY1IDE3NC4yNTdDNDUuNjI4MiAxNzQuMjA5IDQ1LjM2MjUgMTc0LjA4MSA0NS4wNDg1IDE3My45MzFDNDQuNTMyOCAxNzMuNjgzIDQzLjg4NjggMTczLjM3MyA0My42MzgxIDE3My4yNTJDMzcuODIxNSAxNzAuNDMgMzUuNDUzIDE2OC4zOTkgMzQuNTgyNiAxNjQuNTA0QzMzLjQ2NjUgMTU5LjUxIDM1LjU1OTMgMTUxLjc5NiA0MS42NjkxIDEzOS44NzdDNDQuMjk5IDEzNC43NDcgNDYuNzU5NSAxMjkuODUzIDQ5LjQ3NjMgMTI0LjM3QzUwLjE1MzUgMTIzLjAwNCA1MS42NzA1IDExOS45MjggNTMuMDQzOSAxMTcuMTQzQzU0LjE5MDkgMTE0LjgxOCA1NS4yMzc4IDExMi42OTUgNTUuNjExOSAxMTEuOTQxQzU5LjkzOTggMTAzLjIxIDYyLjQ4MTggOTguNDA4OCA2NS4wNzQ4IDk0LjI0MTdDNjkuMjYxMSA4Ny41MTM4IDczLjM4NjEgODIuOTY3NiA3OS40NzY4IDc4LjQ1WicgZmlsbD0nd2hpdGUnLz48L2c+PC9zdmc+Cg==);
    width: 327px;
    height: 370px;
    z-index: -1
}

.full-alert .content {
    position: relative;
    opacity: 0;
    transform: translateY(-50px);
    transition: .4s cubic-bezier(0,0,.34,.81);
    transition-delay: .2s
}

.full-alert .icon {
    font-size: 80px;
    color: #fff;
    margin-bottom: 5px
}

.full-alert .title {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0
}

.full-alert .description {
    color: #bec7d7;
    font-size: 18px;
    margin-top: 2px;
    margin-bottom: 25px
}

.full-alert .action {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: .4s cubic-bezier(0,0,.34,.81);
    transition-delay: .2s
}

.full-alert .action .butto {
    padding: 15px 25px!important;
    font-size: 16px;
    border-radius: 12px;
    width: 100%
}

.full-alert.show .overlay {
    opacity: .98
}

.full-alert.show .content {
    opacity: 1;
    transform: translateY(0px)
}

.full-alert.show .action {
    opacity: 1;
    transform: translateY(0px)
}

.baskList>.item {
    padding: 10px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    margin-bottom: 7px
}

.baskList>.item:last-child {
    border: none
}

.baskList>.item .icon {
    min-width: 40px;
    height: 40px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--cl1));
    border-radius: 10px;
    color: #fff;
    margin-right: 10px
}

.baskList>.item .text {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    margin-right: 15px;
    line-height: normal
}

.baskList>.item .text span {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-color);
    word-break: break-word;
    table-layout: fixed;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.baskList>.item .price {
    margin-left: auto;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
    margin-right: 15px;
    text-align: right;
    font-family: var(--alternative-font)
}

.baskList>.item .price span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
    text-decoration: line-through
}

.baskList>.item .remove {
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff283c61;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: .4s
}

.baskList>.item .remove:hover {
    background: #ff283c
}

.baskInfo ul.details li {
    color: var(--text-color);
    font-size: 16px;
    font-weight: 500;
    padding: 17px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--bg)
}

.baskInfo ul.details li span {
    font-weight: 700;
    color: var(--text-color)
}

.baskInfo ul.details li .bask-through {
    color: var(--text-color);
    font-weight: 500;
    text-decoration: line-through
}

.priceflex.cart {
    padding: 0 7px
}

.order-step-area .step-two {
    display: none
}

.firstcont {
    padding: 25px;
    background: #fff;
    margin-bottom: 50px;
    border-radius: 12px
}

.firstcont .step h2,.select-payment-head>span {
    font-size: 20px;
    font-weight: 600;
    color: var(--light)
}

.firstcont .step p,.select-payment-head>p {
    color: var(--light);
    opacity: .8;
    margin-bottom: 14px
}

.select-payment-head {
    margin-top: 30px;
    line-height: 22px
}

.check-detail-area {
    margin-top: 15px;
    display: flex;
    align-items: center;
    width: 100%
}

.check-detail-area .detail {
    display: flex;
    align-items: center;
    background: var(--bg);
    border-radius: 12px;
    padding: 12px 18px;
    width: 100%
}

.check-detail-area .detail .item {
    color: #6c7287;
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid #00000010;
    font-weight: 600;
    line-height: 22px
}

.check-detail-area .detail .item:last-child {
    margin: 0;
    padding: 0;
    border: 0
}

.check-detail-area .detail .item>span {
    display: flex;
    align-items: center;
    font-weight: 400
}

.check-detail-area .detail .item>span .amount {
    margin-left: 5px;
    font-size: 15px;
    color: #009688;
    border-radius: 30px;
    display: inline;
    position: relative;
    font-weight: 600
}

.check-detail-area .detail .item>span b {
    margin-left: 4px;
    position: relative
}

.check-detail-area .statu {
    display: flex;
    align-items: center;
    margin-left: 10px;
    background: var(--main-color);
    padding: 15px 18px;
    border-radius: 10px
}

.check-detail-area .statu .text {
    font-size: 15px;
    line-height: 18px;
    color: #fff
}

.check-detail-area .statu .icon {
    color: #fff;
    display: flex;
    margin-left: 12px
}

.check-detail-area .statu .text span:first-child {
    font-weight: 400
}

.check-detail-area .statu .text span {
    font-weight: 600;
    display: block;
    width: max-content
}

.check-post-list {
    margin: 20px 0 15px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 7px
}

.check-post-list .post {
    position: relative;
    cursor: pointer;
    border: 3px solid var(--bg);
    transition: .2s;
    border-radius: 14px;
    user-select: none
}

.check-post-list .post img {
    display: block;
    width: 100%;
    border-radius: 10px;
    transition: .2s;
    aspect-ratio: 1/1;
    object-fit: cover;
    pointer-events: none
}

.check-post-list .post .bottom {
    position: absolute;
    bottom: 10px;
    left: 15px;
    right: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    font-size: 12px;
    z-index: 5
}

.check-post-list .post .bottom :is(.count,.amount) {
    background: #00000040;
    padding: 2px 10px;
    border-radius: 12px;
    transition: .2s;
    display: flex;
    align-items: center;
    gap: 3px
}

.check-post-list .post.selected .bottom .amount {
    background: var(--main-color)
}

.check-post-list .post.selected {
    border-color: var(--main-color)
}

.show-more-post {
    color: #9585bb;
    border: 1px solid #c3b5e3;
    width: fit-content;
    margin: 0 auto;
    font-size: 14px;
    padding: 4px 15px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: .4s;
    user-select: none
}

.show-more-post:hover {
    background: #eeeaf7
}

.select-amount {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 10px;
    margin-bottom: 20px
}

.select-amount .item {
    padding: 10px 15px;
    border: 2px solid var(--bg);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: #81829f;
    cursor: pointer;
    transition: .2s;
    user-select: none;
    position: relative
}

.select-amount .item span.bonus {
    position: absolute;
    right: -2px;
    top: -2px;
    font-size: 10px;
    background: #51bf87;
    padding: 2px 5px;
    color: #fff;
    border-radius: 5px;
    transition: .2s
}

.select-amount .item.selected span.bonus {
    border-radius: 0 5px 0 5px
}

.select-amount .item:hover {
    background: var(--bg)
}

.select-amount .item.selected {
    color: #51bf87;
    border-color: #51bf87
}

.user-account-menu ul li.mobile-logout {
    display: none
}

.amount-input-funds {
    position: relative
}

.amount-input-funds span.type {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 8px;
    border-radius: 5px;
    color: #81829f;
    background: #f9f9f9;
    border: 1px solid #ececec;
    font-weight: 600
}

.amount-bonus p {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.fw-bold {
    font-weight: 700
}

.order-search-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    color: var(--color--1);
    cursor: pointer
}

.order-search-btn i {
    font-size: 18px;
    font-weight: 400
}

.orPayDetail .amount {
    background: #fff;
    border-radius: 15px
}

.orPayDetail .amount ul {
    padding: 0;
    margin: 0
}

.orPayDetail .amount ul li {
    list-style: none;
    padding: 10px 15px;
    font-weight: 500;
    border-bottom: 1px solid var(--bg);
    display: flex;
    align-items: center;
    color: var(--text-color)
}

.orPayDetail .amount ul li span {
    margin-left: auto;
    font-family: var(--alternative-font);
    font-weight: 400
}

.orPayDetail .amount ul li:nth-last-child(1) {
    border-bottom: inherit
}

section.cart .box .body .form-group span.icon img {
    display: none
}

section.cart .box .body .form-group span.icon.scrape-show>img {
    display: block
}

section.cart .box .body .form-group span.icon.scrape-show>i {
    display: none
}

section#packets .packets__wrapper .packet .p .price .new,section#packets .packets__wrapper .packet .oldprice {
    font-family: var(--alternative-font)
}

.profile-content-area.orderdet {
    min-height: auto;
    margin-bottom: 25px;
    padding-bottom: 0
}

.profile-order-list {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.profile-order-list .item {
    background: #fff;
    border-radius: 15px
}

.profile-order-list .item .info {
    display: flex;
    align-items: center;
    padding: 15px;
    gap: 15px;
    background: #fff;
    border-radius: 12px
}

.profile-order-list .item .info .icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    background: var(--bg);
    border-radius: 5px
}

.profile-order-list .item .info .text {
    color: var(--text-color);
    font-weight: 600;
    font-size: 16px;
    line-height: 19px
}

.profile-order-list .item .info .action {
    margin-left: auto
}

.profile-order-list .item .info .text span {
    display: block;
    font-weight: 400;
    opacity: .8;
    font-size: 15px;
    font-family: var(--alternative-font)
}

.profile-order-list .list.support .el {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    color: var(--text-color);
    background: #fff;
    border-radius: 12px;
    margin-top: 5px;
    padding: 15px
}

.profile-order-list .list.support .el .top {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--bg);
    padding-bottom: 10px;
    margin-bottom: 10px
}

.profile-order-list .item .list .el .icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    background: var(--bg);
    border-radius: 5px
}

.profile-order-list .item .list .el .lext {
    color: var(--text-color);
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    margin-left: 15px
}

.profile-order-list .list.support .el .middle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-color);
    width: 100%;
    gap: 10px;
    border-bottom: 1px solid var(--bg);
    padding-bottom: 10px;
    margin-bottom: 10px
}

.profile-order-list .list.support .el .middle span {
    width: 100%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.profile-order-list .list.support .el .middle span.price {
    width: fit-content;
    min-width: fit-content;
    margin-left: 15px;
    font-weight: 700;
    font-family: var(--alternative-font);
    color: var(--text-color)
}

.profile-order-list .list.support .el .bottom {
    display: flex;
    width: 100%;
    align-items: center
}

.profile-order-list .list.support .el .bottom .item {
    margin-right: 12px;
    padding-right: 12px;
    border-right: 1px solid var(--bg);
    border-radius: 0;
    font-size: 14px
}

.profile-order-list .list.support .el .bottom .item:last-child {
    margin: 0;
    padding: 0;
    border: none
}

.profile-order-list .list.support .el .bottom .item span {
    display: block;
    font-weight: 700
}

section.cart .box .body .form-group .spinner-border {
    width: 20px;
    height: 20px
}

section.cart .box .body .form-group .spinner {
    margin-right: 5px
}

.cart-buttom-area {
    margin-top: 15px;
    display: flex;
    align-items: center
}

.cart-buttom-area .total-price {
    color: #6e7781;
    line-height: normal;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto
}

.cart-buttom-area .total-price span {
    display: block;
    font-weight: 600;
    font-family: var(--alternative-font);
    font-size: 18px;
    color: #505464
}

.profile-order-list .item .list {
    border-top: 1px solid var(--bg)
}

.profile-order-list .item .list .info {
    border-bottom: 1px solid var(--bg);
    gap: 0
}

.profile-order-list .item .list .info .text {
    padding-right: 15px;
    margin-right: 15px;
    border-right: 1px solid var(--bg)
}

.profile-order-list .item .list .info .text:last-child {
    border: 0;
    margin: 0;
    padding: 0
}

.profile-order-list .item .list>.el {
    padding: 15px;
    display: flex;
    align-items: center
}

.profile-order-list .item .list .el .lext span {
    display: block;
    font-weight: 400;
    opacity: .8
}

.profile-order-list .item .list .el .lacti {
    margin-left: auto
}

.profile-order-list .item .list .el .lacti .price {
    font-family: var(--alternative-font);
    color: var(--text-color);
    padding-right: 15px
}

.profile-content-area .load-more {
    width: fit-content;
    margin: 0 auto;
    margin-top: 20px;
    background: var(--main-color);
    color: #fff;
    padding: 6px 15px;
    padding-bottom: 4px;
    border-radius: 20px;
    font-size: 14px;
    border-bottom: 2px solid #00000030;
    cursor: pointer;
    transition: .2s
}

.profile-content-area .load-more:hover {
    background: #6037b9
}

section.cart.freeTools {
    margin-top: 0
}

.free-tool-content {
    max-width: 800px;
    margin: 0 auto;
    margin-top: -75px
}

.alert {
    border-radius: 8px
}

.intro-photograph {
    height: 425px;
    width: 100%;
    background-size: cover!important;
    background-position: center!important
}

.intro-photograph-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 25px;
    text-align: center
}

.intro-photograph-title {
    color: #fff;
    font-size: clamp(28px,3vw,28px);
    font-weight: 600
}

.intro-photograph p {
    font-size: 18px;
    color: rgba(255,255,255,.5)
}

.intro-photograph-input {
    width: 95%;
    height: 60px;
    position: relative
}

.intro-photograph-input input {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    background-color: rgba(255,255,255,.15);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: none;
    padding: 0 20px;
    color: rgba(255,255,255,.7);
    font-size: 14px
}

.intro-photograph-input input::-moz-placeholder {
    color: rgba(255,255,255,.5)
}

.intro-photograph-input input::placeholder {
    color: rgba(255,255,255,.5)
}

.intro-photograph-input button {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    color: #fff;
    background-color: rgba(255,255,255,.25);
    padding: 8px 44px;
    font-weight: 600;
    border-radius: 6px
}

.intro-photograph-input button:hover,.intro-photograph-input button:focus {
    color: #fff!important;
    background-color: rgba(255,255,255,.15)!important
}

.picture-downloaded {
    margin-top: 100px
}

.picture-downloaded .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px
}

.picture-downloaded .container .picture {
    max-width: 486px;
    width: 100%;
    height: 486px;
    border-radius: 6px;
    overflow: hidden
}

.picture-downloaded .container .picture img {
    width: 100%;
    height: 100%!important;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center
}

.picture-downloaded .container .picture-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 24px
}

.picture-downloaded .container .picture-content-title {
    color: #0f2666;
    font-size: clamp(32px,3vw,44px);
    font-weight: 600
}

.picture-downloaded .container .picture-content-desc {
    font-size: 22px;
    color: rgba(15,38,102,.5)
}

.picture-downloaded .container .picture-content button {
    height: 60px;
    border-radius: 6px;
    padding: 0 30px;
    max-width: 265px;
    width: 100%;
    color: #fff;
    font-weight: 600
}

.transform-section {
    transform: translateY(-150px)
}

.su__banner--wrapper.su_category_view {
    /* padding-bottom: 45px; */
    min-height: 175px;
}

.su__banner--wrapper.height {
    min-height: 400px
}

.su-banner .cover {
    border-radius: 15px;
    background-color: #8c60e9!important;
    margin-top: -30px;
    position: relative;
    padding: 7px
}

.su-banner .cover .menu .container {
    padding: 0;
    margin: 0
}

.su-banner .cover .menu {
    z-index: 2;
    position: relative;
    display: block
}

.su-banner .cover .menu ul {
    display: flex;
    align-items: center;
    margin-bottom: 0!important;
    margin-top: 0;
    gap: 2px
}

.su-banner .cover .menu ul li a.active {
    background: #fff!important;
    color: #7746dc;
    font-weight: 600
}

.su-banner .cover .menu ul li a:hover {
    background: #ffffff12
}

.su-banner .cover .menu ul li a {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 25px;
    display: flex;
    transition: all .3s;
    border-radius: 10px
}

.su-banner .cover .menu ul li:last-child a {
    border: 0
}

.ticketList {
    margin-top: 10px
}

.ticketList .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--bg)
}

.ticketList .item:last-child {
    margin: 0;
    padding: 0;
    border: none
}

.ticketList .item.active .action .butto {
    background: var(--primary);
    color: #fff!important
}

.ticketList .item .text {
    display: flex;
    flex-direction: column;
    color: #63667c;
    font-size: 15px
}

.ticketList .item .text span {
    font-weight: 700
}

.ticket-content .messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--bg);
    max-height: 350px;
    overflow: auto
}

.ticket-content .message {
    padding: 12px 15px;
    background: var(--bg);
    border-radius: 12px;
    color: #63667c;
    width: fit-content;
    max-width: 85%
}

.ticket-content .message>span {
    font-size: 14px;
    color: #8c8fa3
}

.ticket-content .message>p {
    font-weight: 500;
    margin: 0
}

.ticket-content .message.user {
    align-self: flex-end;
    text-align: right;
    border-top-right-radius: 0
}

.ticket-content .message.root {
    border-top-left-radius: 0;
    background: #6a7bf5
}

.ticket-content .message.root>span {
    color: #ffffffbf
}

.ticket-content .message.root>p {
    color: #fff
}

.ticket-content .reply-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 5px
}

.reply-area textarea.ticket-form {
    border-radius: 10px;
    padding: 15px;
    font-size: 16px;
    min-height: 85px
}

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

.br15 {
    border-radius: 15px
}

.digi-group {
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    border: 1px solid #c4c9db;
    background-color: #fff;
    padding: 10px;
    display: flex;
    align-items: center;
    transition: .3s
}

.digi-group .icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    border-radius: 6px;
    background-color: #fe500b;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px
}

.digi-group input {
    color: #595b70;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    background-color: transparent;
    height: 50px;
    border: 0;
    box-shadow: none
}

.register-phone .iti__selected-flag {
    margin-left: 0!important;
    border-radius: 6px 0 0 6px!important
}

.register-phone {
    position: relative
}

.register-phone .iti__country-list {
    max-width: 338px
}

.coupon-code {
    position: relative
}

.coupon-code .icon {
    background: var(--main-color)
}

.coupon-code .coupon-check {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px
}

.coupon-code .coupon-check .butto {
    border-radius: 5px
}

.p-relative {
    position: relative
}

.free-loader {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: #292236ed;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: .2s
}

.free-loader.show {
    opacity: 1;
    pointer-events: all;
    visibility: visible
}

.free-loader .spinner {
    position: relative;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px
}

.free-loader .spinner .icon {
    font-size: 38px
}

.free-loader .spinner .icon i {
    animation: 1.2s linear loader infinite;
    display: block;
    position: relative
}

.textbox__wrapper .content ul {
    margin: 30px 15px;
    font-size: 15px;
    font-weight: 400;
    color: var(--color--2)
}

.textbox__wrapper .content li {
    list-style: inside
}

section.profile-analysis {
    position: relative;
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: .2s;
    margin-top: 0
}

.profile-analysis .analysis-content {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-radius: 20px
}

.profile-analysis .analysis-content .avatar {
    width: 120px;
    max-width: 120px;
    height: 120px;
    margin: 0 auto;
    margin-top: -70px
}

.profile-analysis .analysis-content .avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px
}

section.profile-analysis.show {
    opacity: 1;
    visibility: visible;
    height: auto;
    margin-top: -25px
}

.analysis-content .analysis-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 20px;
    border-radius: 20px;
    margin-bottom: 15px
}

.analysis-content .analysis-list .item {
    background: #5f617a10;
    border-radius: 8px;
    padding: 10px 18px;
    display: flex;
    flex-direction: column;
    color: #495057;
    font-weight: 600;
    line-height: normal
}

.analysis-content .analysis-list .item span {
    font-weight: 400
}

.analysis-content .butto {
    width: 100%;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 15px
}

.product-area {
    display: grid;
    grid-template-columns: 320px auto;
    gap: 15px;
    margin-bottom: 50px
}

.product-area .product_type {
    background: var(--white);
    padding: 20px;
    border-radius: 12px;
    height: fit-content
}

.product_type .product_type-select {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px
}

.product_type-select .type {
    border: 2px solid #eaeaed;
    border-radius: 5px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: .2s;
    position: relative;
    width: 100%;
    user-select: none
}

.product_type-select .type .icon {
    min-width: 50px;
    height: 50px;
    width: 50px;
    color: #707184;
    background: #eaeaed;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s
}

.product_type-select .type .text {
    line-height: normal;
    margin-top: 7px;
    color: var(--light);
    transition: .2s
}

.product_type-select .type .text span {
    text-transform: uppercase;
    font-weight: 700;
    color: #4a4961
}

.product_type-select .type.selected {
    border-color: var(--orange)
}

.product_type-select .type.selected .icon {
    background: var(--orange);
    color: #fff
}

.product_type-select .type.selected .text span {
    color: var(--orange)
}

.product_type-select .type::before {
    content: "\f00c";
    font-family: fontawesome;
    position: absolute;
    right: 7px;
    top: 7px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    color: transparent;
    background: #eaeaef;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    font-size: 11px
}

.product_type-select .type.selected::before {
    color: #fff;
    background: var(--orange)
}

.product_type-features {
    display: grid;
    gap: 5px
}

.product_type-features .feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px;
    background: #f4f4f5;
    border-radius: 5px
}

.product_type-features .feature .icon {
    width: 36px;
    min-width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: var(--purple);
    color: #fff;
    font-size: 14px
}

.product_type-features .feature .text {
    color: var(--light);
    font-size: 15px
}

.product-area .product_wrap {
    background: var(--white);
    padding: 20px;
    border-radius: 12px;
    height: fit-content
}

.product_wrap .product_list {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 15px
}

.product_wrap .product_list .product {
    padding: 15px;
    border-radius: 8px;
    border: 2px solid #eaeaed;
    cursor: pointer;
    line-height: 21px;
    color: var(--light);
    position: relative;
    transition: .2s;
    font-size: 15px
}

.product_wrap .product_list .product span {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #4a4961
}

.product_wrap .product_list .product::before {
    content: "\f00c";
    font-family: fontawesome;
    position: absolute;
    right: 6px;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    color: transparent;
    background: #eaeaef;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
    font-size: 10px
}

.product_wrap .product_list .product.selected::before {
    color: #fff;
    background: var(--orange)
}

.product_wrap .product_list .product.selected {
    border-color: var(--orange)
}

.product_wrap .product_list .product.selected span {
    color: var(--orange)
}

.product_list-detail {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #eaeaed;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.product_list-detail .price {
    display: flex;
    align-items: center;
    gap: 10px
}

.product_list-detail .price .icon {
    width: 45px;
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: #eee;
    color: #9aa2ab;
    font-size: 18px
}

.product_list-detail .price .text {
    line-height: normal;
    font-size: 14px;
    color: var(--light)
}

.product_list-detail .price .text span {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #4a4961
}

.product_list-detail .butto {
    padding: 12px 25px
}

.pack_detail {
    background: linear-gradient(329deg,#fe8005, #fe8005);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 90px
}

.pack_detail-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #ffffff10;
    overflow-x: auto;
    overflow-y: hidden
}

.pack_detail-tabs .tab {
    cursor: pointer;
    color: #d1d0db;
    padding: 5px 10px;
    padding-bottom: 12px;
    transition: .2s;
    position: relative;
    user-select: none;
    min-width: max-content
}

.pack_detail-tabs .tab.active {
    color: #fff
}

.pack_detail-tabs .tab::before {
    content: "";
    position: absolute;
    left: 50%;
    height: 4px;
    bottom: -2px;
    width: 0;
    background: #fff;
    border-radius: 5px;
    transition: .2s
}

.pack_detail-tabs .tab.active::before {
    left: 0%;
    width: 100%
}

.pack_detail-content>div {
    display: none;
    margin-top: 15px;
    color: #fff
}

.pack_detail-content>div.active {
    display: block
}

.pack_detail-content .how-buy ul {
    padding: 0;
    margin: 0
}

.pack_detail-content .how-buy ul li {
    font-size: 15px;
    color: #fff;
    font-weight: 400;
    margin-bottom: 12px;
    line-height: 1.3;
    position: relative;
    padding-left: 20px;
    list-style: none
}

.pack_detail-content .how-buy ul li::before {
    box-shadow: 0 0 0 4px rgba(255,255,255,.25);
    background-color: #fff;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    content: ""
}

.pack_detail-content .how-buy p {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 32px
}

.pack_detail-content .how-buy h2 {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 10px;
    position: relative
}

.pack_detail-content .how-buy .content {
    display: grid;
    grid-template-columns: auto 340px;
    gap: 30px;
    align-items: center;
    padding-left: 12px;
    padding-bottom: 5px
}

.pack_detail-content .how-buy .content img {
    border-radius: 10px
}

.product-detail .text h2 {
    font-size: 21px;
    margin-bottom: 5px
}

.product-detail .text p {
    font-weight: 400;
    margin-bottom: 15px
}

.product-detail .text {
    padding: 5px
}

.accordion__wrapper.sss .accordion {
    margin-top: 10px
}

.accordion__wrapper .accordion .accordion-title.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.splide__slide {
    display: flex;
    justify-content: center
}

.product_list .product span.special_name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 400;
    top: -10px;
    background: var(--spack);
    padding: 2px 10px;
    line-height: normal;
    width: max-content;
    color: #fff!important;
    border-radius: 15px
}

.product_list .product.special {
    border-color: var(--spack)
}

.product_list .product.selected span.special_name {
    background: var(--orange)
}

.cart-options {
    position: relative;
    margin-top: 12px;
    display: grid;
    gap: 7px
}

.cart-options .heading {
    text-transform: uppercase;
    font-size: 14px;
    padding: 0 5px;
    color: var(--light);
    margin-bottom: 5px;
    font-weight: 500;
    padding-bottom: 5px;
    border-bottom: 1px solid #eeeff3;
    display: flex;
    justify-content: space-between
}

.cart-options .item {
    padding: 10px;
    background: #eeeff3;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px
}

.cart-options .item .text {
    line-height: normal
}

.cart-options .item .text span {
    color: #5d5a67;
    font-weight: 500;
    font-size: 16px
}

.cart-options .item .text p {
    color: var(--main-color);
    font-size: 14px;
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    word-break: break-word;
    table-layout: fixed;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical
}

.cart-options .item .icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 5px;
    background: #dee0e7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--light)
}

.cart-options .item .action {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px
}

.cart-options .item .action .price {
    text-align: right!important;
    line-height: 15px!important
}

section.cart .box .body .price .old {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #8f9cad;
    text-decoration: line-through;
    font-family: var(--alternative-font)
}

section.cart .box .body .price .new {
    font-size: 17px;
    font-weight: 600;
    color: var(--light);
    font-family: var(--alternative-font)
}

.sd-switch {
    position: relative;
    width: 45px;
    height: 26px;
    border-radius: 30px;
    border: 1px solid #a2a3b5;
    padding: 0 4px;
    cursor: pointer;
    transition: .2s
}

.sd-switch .circle {
    width: 15px;
    height: 15px;
    border-radius: 30px;
    background: #a2a3b5;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    transition: .2s
}

.sd-switch.on .circle {
    left: calc(100% - 20px);
    background-color: #fff
}

.sd-switch.on {
    border-color: var(--success);
    background: var(--success)
}

section.cart .box .body .btn-next.cartActionBTN {
    padding: 15px 20px;
    font-weight: 500
}

.cart-buttom-area .total-price .icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: #eeeff3;
    border-radius: 10px
}

.cart-buttom-area .total-price .price {
    color: #6e7781!important;
    font-size: 16px!important;
    font-weight: 400!important
}

.cart-buttom-area .total-price .price span {
    font-size: 19px
}

.profile_avatar {
    width: 80px;
    max-width: 80px;
    height: 80px;
    position: relative
}

.profile_avatar img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    display: block
}

.profile_avatar .rank {
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer
}

.ava_detail {
    padding-left: 15px;
    line-height: normal
}

span.profile_head_balance {
    line-height: normal
}

span.profile_head_balance span.balance {
    margin-top: 0!important
}

[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: #00000090;
    padding: 3px 15px;
    border-radius: 2px;
    opacity: 0;
    visibility: hidden;
    transition: .2s;
    z-index: 99
}

[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 #00000090 transparent;
    border-style: solid;
    border-width: 0 4px 4px;
    opacity: 0;
    visibility: hidden;
    transition: .2s
}

[data-tooltip]:hover:after {
    opacity: 1;
    visibility: visible;
    top: calc(100% + 1px)
}

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

.noticeList .item:last-child {
    border: 0;
    margin: 0
}

.user-rank-step {
    display: flex;
    position: relative;
    gap: 12px
}

.user-rank-step .step {
    width: 100%;
    font-size: 16px;
    color: var(--light);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: .2s;
    line-height: normal;
    background: 0 0;
    gap: 10px;
    opacity: .6;
    padding: 12px;
    padding-bottom: 28px;
    background: #f8f7fa;
    border-radius: 8px;
    z-index: 1
}

.user-rank-step .step .text {
    line-height: normal;
    text-align: left;
    width: 100%
}

.user-rank-step .step .text .title {
    margin: 0;
    text-align: left;
    align-items: flex-start;
    font-weight: 600;
    color: #475978
}

.user-rank-step .step .rank {
    width: 60px;
    min-width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ebecf3;
    border-radius: 100%;
    border: 1px dashed transparent
}

.user-rank-step .step .text .detail {
    font-size: 14px;
    display: block;
    color: var(--soft-text-color)
}

.user-rank-step .step .rank img {
    width: 40px;
    height: auto
}

.user-rank-step .step.active {
    opacity: 1;
    background: 0 0
}

.user-rank-step .step .text .discount {
    font-size: 12px;
    line-height: normal;
    padding: 2px 12px;
    background: #cecedb;
    color: #fff;
    border-radius: 3px
}

.user-rank-step .step.active .text .discount {
    background: var(--step-color)
}

.user-rank-step .step.active .rank {
    border-color: var(--step-color)
}

.user-rank-step .step.active .text .title {
    color: var(--step-color)
}

.user-rank-step .step.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 8px;
    background: var(--step-color);
    z-index: -1;
    opacity: .1
}

.alert-light-new {
    color: #79828d;
    background: #eceff3
}

.referance-head {
    display: flex;
    align-items: center;
    background: #8c32ef14;
    border: 1px solid #6132ef14;
    padding: 8px;
    border-radius: 5px
}

.referance-head .icon {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: var(--main-color);
    color: #fff
}

.referance-head .text {
    margin-left: 7px;
    line-height: 16px;
    font-size: 15px;
    color: #784aa1
}

.referance-head .text span {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--main-color)
}

.referance-head .copy-icon {
    margin-left: auto;
    display: flex;
    min-width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    background: #9532ef24;
    color: var(--main-color);
    border-radius: 3px;
    cursor: pointer;
    transition: .2s
}

.referance-head .copy-icon:hover {
    background: #7a32ef3b
}

.referance-head .copy-icon.copied i::before {
    font-weight: 600
}

.wb-card-list .item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--bg)
}

.wb-card-list .item:last-child {
    border: 0
}

.wb-card-list .item .icon {
    width: 45px;
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: var(--light);
    background: var(--bg)
}

.wb-card-list .item .text {
    line-height: 18px;
    font-size: 15px;
    color: var(--dark);
    font-weight: 600
}

.wb-card-list .item .text span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--light)
}

.card .empty {
    padding: 25px 15px;
    text-align: center;
    line-height: normal
}

.card .empty span {
    font-size: 17px;
    font-weight: 600;
    color: var(--dark)
}

.card .empty p {
    color: var(--light);
    margin: 0;
    font-size: 15px
}

.notify-area {
    position: relative
}

.notify-area .notify-bell {
    position: relative;
    height: 40px;
    width: 40px;
    min-width: 40px;
    border-radius: 8px;
    border: 1px solid rgba(var(--cl1));
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--cl1))!important;
    transition: .2s;
    cursor: pointer;
    font-size: 18px
}

.notify-area .notify-content {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    min-width: 350px;
    right: -160px;
    top: 50px;
    background: #fff;
    border-radius: 10px;
    transition: .2s;
    z-index: 99;
    box-shadow: 0 5px 20px #53576f1f;
    transform: scale(.7)
}

.notify-area.active .notify-content {
    opacity: 1;
    visibility: visible;
    top: 55px;
    transform: scale(1)
}

.notify-area .notify-bell span.count {
    background: rgba(var(--cl1));
    color: #fff;
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 9px;
    text-align: center;
    padding: 1px 4px;
    border-radius: 4px;
    min-width: 15px
}

.notify-area .notify-bell:hover {
    background: rgba(var(--cl1),0.15)
}

.notify-area .notify-content .item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid var(--bg);
    gap: 10px
}

.notify-area .notify-content .item .icon {
    min-width: 50px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e7edf8;
    border-radius: 8px
}

.notify-area .notify-content .item .text {
    line-height: normal
}

.notify-area .notify-content .item .text span {
    font-weight: 600;
    color: var(--dark);
    font-size: 15px
}

.notify-area .notify-content .item .text p {
    font-size: 15px;
    color: var(--light)
}

.notify-area .notify-content .item:last-child {
    border: 0
}

.notify-area .notify-content::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 110px;
    margin-left: -5px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    transition: .2s
}

.notify-area.active .notify-bell {
    background: rgba(var(--cl1),.2)
}

.card {
    background: var(--dwhite);
    border-radius: 4px
}

.card .card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background-color: transparent!important;
    border-bottom: 1px solid rgba(0,0,0,.125);
    color: var(--main-text-color);
    font-size: 18px;
    font-weight: 600;
    padding: 20px 25px;
    border-bottom: 1px solid var(--bg)
}

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

.basket-rank-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px;
    border-radius: 12px;
    background: #fff;
    margin-top: 12px
}

.basket-rank-detail .icon {
    width: 42px;
    min-width: 42px;
    height: 42px;
}

.basket-rank-detail .icon img {
    width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.basket-rank-detail .text {
    line-height: normal;
    color: var(--light);
    font-size: 15px
}

.basket-rank-detail .text span {
    display: block;
    color: var(--light);
    font-weight: 600
}

.basket-rank-detail .text:last-child {
    margin-left: auto;
    text-align: right;
    padding-right: 7px
}

.basket-rank-detail.main {
    background: #f3f4f9;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1px solid #afb0d547;
}

.user-rank-step .step .progress {
    position: absolute;
    left: 8px;
    bottom: 8px;
    right: 8px;
    background: #666f7c38;
    border-radius: 30px;
    height: 8px
}

.user-rank-step .step .progress .bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 30px;
    background: var(--step-color)
}

.noticeList .item.main {
    background: var(--main-color)
}

.noticeList .item.main .icon {
    background: #ffffff20;
    color: #fff
}

.noticeList .item.main .text span {
    color: #fff
}

.noticeList .item.main .text p {
    color: #ffffff90
}

.noticeList .item.main .butto {
    border-color: #ffffff50!important;
    color: #fff!important
}

.noticeList .item.main .butto:hover {
    background: #ffffff20!important
}

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

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

@media(max-width: 1199px) {
    .scrollm {
        display:flex;
        overflow-x: scroll;
        overflow-y: auto;
        max-width: 100%
    }
}

@media(max-width: 576px) {
    .scrollm {
        display:flex;
        overflow-x: scroll;
        overflow-y: auto;
        max-width: 100%
    }
}

@media(max-width: 1199px) {
    .su-banner .cover .menu ul li a {
        font-size:13px;
        padding-bottom: 11px!important
    }
}

@media(max-width: 576px) {
    .scrollm>* {
        display:flex;
        overflow-x: scroll;
        overflow-y: hidden;
        max-width: 100%;
        width: 100%;
        flex-wrap: nowrap;
        white-space: nowrap;
        justify-content: flex-start!important
    }
}

@media(max-width: 1200px) {
    .scrollm>* {
        display:flex;
        overflow-x: scroll;
        overflow-y: hidden;
        max-width: 100%;
        width: 100%;
        flex-wrap: nowrap;
        white-space: nowrap;
        justify-content: flex-start!important
    }

    .product-area {
        grid-template-columns: 300px auto
    }

    .product_wrap .product_list {
        grid-template-columns: repeat(3,1fr)
    }

    .product-area .product_type {
        position: sticky;
        top: 20px
    }
}

@media(max-width: 950px) {
    .picture-downloaded .container {
        flex-direction:column;
        gap: 16px
    }
}

@media(max-width: 500px) {
    .picture-downloaded .container .picture-content button {
        font-size:14px;
        padding: 0 16px
    }
}

@media(min-width: 1024px) AND (max-width:1250px) {
    .menu .links ul li a.navLink>i:first-child {
        display:none
    }

    header .menu .logo img {
        height: 40px
    }
}

@media(max-width: 1200px) {
    .select-amount {
        grid-template-columns:repeat(3,1fr)
    }
}

@media(max-width: 1024px) {
    .head-stable {
        margin-left:auto
    }

    .mobileMenuBTN {
        margin-left: 10px
    }
}

@media(max-width: 991px) {
    .su-banner .su__banner--wrapper.cart .right__content .image {
        right:0
    }

    .su-banner .su__banner--wrapper.cart .right__content .image img {
        height: 222px
    }

    .order-step-area {
        padding: 0 15px
    }

    .check-post-list {
        grid-template-columns: repeat(3,1fr)
    }

    .md-order-1 {
        order: 1
    }

    .md-order-2 {
        order: 2
    }

    .select-payment-method {
        grid-template-columns: repeat(2,1fr)
    }

    .product-area {
        grid-template-columns: auto
    }

    .product_type-select .type {
        flex-direction: row;
        align-items: center;
        gap: 10px
    }

    .product_type-select .type .text {
        margin-top: 0;
        text-align: left
    }

    .product_type-select .type .text span {
        display: block
    }

    .product-area .product_type {
        position: relative;
        top: 0
    }

    .pack_detail-content .how-buy .content {
        display: flex;
        flex-direction: column
    }

    .pack_detail-content .how-buy .content .image {
        order: 1;
        width: 100%
    }

    .pack_detail-content .how-buy .content .detail {
        order: 2
    }

    .pack_detail-content .how-buy .content .image img {
        width: 100%;
        max-height: 350px;
        object-fit: cover
    }

    .user-rank-step {
        flex-direction: column
    }
}

@media(max-width: 862px) {
    .su-banner .su__banner--wrapper.cart .right {
        display:none
    }

    .su-banner .su__banner--wrapper.cart {
        padding-top: 45px;
        padding-bottom: 75px!important
    }
}

@media(max-width: 768px) {
    .user-account-menu {
        width:calc(100% - 12px);
        border-radius: 12px
    }

    .user-account-menu .responsive-bar {
        display: flex;
        align-items: center;
        padding: 15px 18px;
        justify-content: space-between;
        font-weight: 500
    }

    .user-account-menu ul {
        display: none;
        flex-direction: column;
        align-items: flex-start
    }

    .user-account-menu ul li {
        border-left: none;
        border-top: 1px solid var(--bg);
        width: 100%
    }

    .bask-head {
        display: none
    }

    .select-payment-method {
        grid-template-columns: repeat(1,1fr)
    }

    .cart-options .item {
        flex-wrap: wrap
    }

    .cart-options .item .icon {
        max-width: 50px;
        flex: 1
    }

    .cart-options .item .text {
        flex: 1;
        width: 100%
    }

    .cart-options .item .action {
        width: 100%;
        justify-content: flex-end;
        padding-top: 10px;
        border-top: 1px solid #dbe6ef
    }

    .cart-options .item {
        flex-wrap: wrap
    }

    .cart-options .item .icon {
        max-width: 50px;
        flex: 1
    }

    .cart-options .item .text {
        flex: 1;
        width: 100%
    }

    .cart-options .item .action {
        width: 100%;
        justify-content: flex-end;
        padding-top: 10px;
        border-top: 1px solid #dbe6ef
    }
}

@media(max-width: 600px) {
    .su-banner .su__banner--wrapper.profile {
        flex-direction:column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 45px
    }

    .su-banner .su__banner--wrapper.profile .detail {
        display: none
    }

    .su-banner .su__banner--wrapper.login::before {
        display: none
    }

    .su-banner .su__banner--wrapper.login::after {
        right: auto
    }

    .check-post-list {
        grid-template-columns: repeat(2,1fr)
    }

    .check-post-list .post .bottom {
        left: 10px;
        right: 10px
    }

    .check-detail-area {
        flex-direction: column;
        gap: 10px
    }

    .check-detail-area .detail {
        justify-content: center
    }

    section.cart .box .body .btn-next {
        width: 100%
    }

    .check-detail-area .text-end {
        width: 100%
    }

    .check-detail-area .detail .item {
        text-align: center
    }

    section.cart .box .body .form-group {
        flex-wrap: wrap
    }

    section.cart .box .body .form-group span.icon {
        flex: 1;
        max-width: 50px;
        margin-right: 5px
    }

    section.cart .box .body .form-group input {
        flex: 1;
        background: var(--bg)
    }

    section.cart .box .body .form-group .butto {
        width: 100%;
        margin: 0;
        margin-top: 10px
    }

    .product_wrap .product_list {
        grid-template-columns: repeat(2,1fr);
        gap: 12px
    }

    .pack_detail-content .how-buy .content .image img {
        max-height: max-content
    }

    .product_list .product span.special_name {
        top: -7px
    }

    .cart-buttom-area {
        flex-direction: column;
        gap: 12px
    }

    section.cart .box .body .btn-next.cartActionBTN {
        padding: 20px 24px 20px 26px
    }
}

@media(max-width: 525px) {
    .select-payment-method {
        margin-bottom:15px
    }

    .price-bottom-flex {
        flex-wrap: wrap
    }

    .price-bottom-flex .priceTag {
        flex: 1;
        min-width: 100%
    }

    .price-bottom-flex .butto {
        width: 100%;
        flex: 1;
        margin-top: 12px
    }

    .product_type-select .type {
        padding: 12px
    }

    .product_type-select .type .icon {
        min-width: 40px;
        width: 40px;
        height: 40px;
        font-size: 14px
    }

    .product-area .product_type {
        padding: 15px
    }

    .product_type .product_type-select {
        flex-direction: column
    }

    .product-area .product_wrap {
        padding: 15px
    }

    .product_list-detail {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start
    }

    .product_list-detail .butto {
        width: 100%;
        text-align: center
    }
}
.pack-select-bottom {
    gap: 15px;
    flex-wrap: wrap;
}
.pack-select-bottom .butto {
    min-width: 220px;
    justify-content: center;
    gap: 5px;
    background: #fd500b!important;
}
.btnAnimated {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
@media (min-width: 991px) {
    .pack-select-bottom a { 
        padding-top: 18px;
    }
}
@media (max-width: 500px) {
    .pack-select-bottom .butto {
        width: 100%;
    }
    .pack-select-bottom {
    gap: 15px;
    flex-wrap: wrap;
    display:grid!important;
}
}
.butto-xlg, .badge-xlg {
    padding: 15px 25px !important;
    font-size: 17px;
}
.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;
}
.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;
    margin-top:15px;
}
.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: 23px;
}
    @media (max-width: 500px) {
         .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;
    }
    }