.offers-swiper {
    background-color: var(--color-accent);
    aspect-ratio: 3/1.5;
    margin-top: 2%;
    border-radius: var(--rounded-main);
    overflow: hidden !important;
}

.offer-swiper-texts {
    width: 70%;
    text-align: center;
}


.swiper-pagination-bullet {
    background-color: var(--color-mute) !important;
}

.offers-swiper img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.offers-swiper .just-image img {
}

.offers-swiper .image-and-text {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.offers-swiper .image-and-text > * {
    position: absolute;
}

.offers-swiper .image-and-text .swiper-image-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    z-index: 1;
}

.offers-swiper .image-and-text .offer-swiper-texts {
    z-index: 2;
}

.just-product {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.just-product .jp-image {
    width: 48%;
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 98%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0) 100%);
}

.offer-swiper-texts * {
    color: var(--color-bg);
}

.offer-swiper-texts :is(.ost-name, .ost-price) {
    font-size: calc(var(--font-size-xl) * 1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offer-swiper-texts .ost-des {
    font-size: calc(var(--font-size-sm) * 1);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 992px) {
    .offer-swiper-texts :is(.ost-name, .ost-price) {
        font-size: calc(var(--font-size-xl) * 2);
    }

    .offer-swiper-texts .ost-des {
        font-size: calc(var(--font-size-xl) * 1);
    }
}


.offers .swiper-slide {
    background-color: var(--color-gray);
    aspect-ratio: 3/1;
    width: 100%;
}

.card-container {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    gap: 0 2%;
}

.card {
    overflow: hidden;
    z-index: 1;
    position: relative;
    margin-bottom: 5%;
}

.card-info {
    display: block;
}

.card-info * {
    box-sizing: border-box;
}

.card-info .amenity {
    /*max-width: 50%;   */
    box-sizing: border-box;
}

.card-info .amenity .amenity_image {
    background-color: var(--color-gray);
}


.card-info .amenity p {
    white-space: nowrap;
}

.card.product-compact {
    box-shadow: var(--shadow-style);
    display: grid;
    grid-template-columns: 30% 1fr;
    padding: 1%;
}


.card-container .product-compact .card-img-container .extra-butten {
    width: 30%;
    z-index: 50;
}

.card .card-des-2 {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
}

.card .card-img-container {
    align-items: center;
    position: relative;
    display: block;
    container-type: size;
}

.card [id^=scheduledescription]:not(:empty) {
    position: absolute;
    top: 0%;
    inset-inline-start: 13%;
    background: var(--color-error);
    transform-origin: left center;
    transform: translateY(-50%) rotate(90deg);
    white-space: nowrap;
    width: 100cqh;
    text-align: center;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);


}
.card-admin-btns {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    margin: 0;
    transform: translate(3%, 20%);
}

.card-admin-btns {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
}

.card-admin-btns .btn {
    border-radius: var(--rounded-pill);
}

.card .card-img-container .extra-butten {
    position: absolute;
    bottom: 3%;
    inset-inline-end: 3%;
    position: absolute;
    width: 10%;
    background-color: var(--color-accent);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100vw;
}


.card .card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card .card-offer {
    text-align: center;
}

.card .card-offer * {
    white-space: nowrap;
}


.card .card-extra-info {
}


.card .card-prices {
    align-items: center;
    gap: 5%;
}

.card-prices :is(.card-last-price,[id^="oldamount"]) {
    text-decoration: line-through;
    color: var(--color-accent) !important;
    font-size: var(--font-size-xs) !important;
}

@media (max-width: 576px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 576px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .card-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 992px) {
    .card-container {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1400px) {
    .card-container {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* card customize */


/* catgury */
.categury-swiper-container {
    position: sticky;
    top: 0;
    z-index: 5;
    background-color: var(--color-bg);
    width: 101%;
    left: 0;
}

.categury-swiper {
    width: 100%;
    padding: 10px 0;
    margin: 2% 0;
}

.swiper-wrapper {
    display: flex;
}

.categury-swiper .swiper-slide {
    margin: 0 0.5%;
    text-align: center;
    padding: 1%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content !important;
    transition: width 0.3s ease;
    border-radius: var(--rounded-pill);
    gap: 5%;
    transition: 0.3s;
    cursor: pointer;
}

.categury-swiper .swiper-slide.active img {
    background-color: var(--color-secondry);
}


.categury-swiper h3 {
    white-space: nowrap;
    margin: 0;
}

.categury-swiper img {
    border-radius: var(--rounded-pill);
    width: var(--img-width-xxl);
}

/* navigation */
/* mobile nav */
.nav-content {
    display: flex;
    width: 100%;
}

#mob-nav .nav-content, #mob-nav-clone .nav-content {
    height: 12vh;
}

@media (orientation: portrait) {
    #mob-nav .nav-content, #mob-nav-clone .nav-content {
        height: 7vh;
    }

}

#mob-nav, #mob-nav-clone {
    background-color: var(--color-main);
    box-shadow: var(--shadow-style);
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 10;
    padding: 1% 4%;
}

#mob-nav-clone {
    position: absolute;
}

#mob-nav .nav-content, #mob-nav-clone .nav-content {
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
}

#pcnav .nav-content {
    justify-content: end;
    gap: 10%;
}


.nav-item,
.nav-item * {
    text-align: center;
    cursor: pointer;
}

.nav-item:has(.btn) {
    height: 90%;
}

.nav-item:has(.iconify) * {
    color: var(--color-bg)
}

.nav-item:has(.numbericUpDow) * {
    color: var(--color-text);
}

.nav-total-price .card-current-price {
    font-size: var(--font-size-md);
}

#mob-nav .nav-item:has(.numbericUpDow) {
    width: 29%;
}

#description {
    text-align: justify;
}

#mob-nav .nav-item .card-current-price {
    color: var(--color-bg);
}

.card-current-price {
    font-size: var(--font-size-sm);
}
.card-current-price:has(.card-last-price.d-none) {
    font-size: var(--font-size-md);
}

.card-current-price .card-last-price {
    font-size: var(--font-size-sm);
    color: var(--color-mute);
    text-decoration: line-through;
    /*margin-inline-end: 2%;*/
}

#mob-nav .order-btn-cart .btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.just-num-show {
    margin-inline-end: 10%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--rounded-pill);
    padding: 2%;
    color: var(--color-bg) !important;
    background-color: var(--color-text);
}

/* pc nav */
#pcnav {
    align-items: center;
    margin-bottom: 3%;
    align-items: center;
    margin-bottom: 3%;
    justify-content: space-between;
    padding: 1% 1.5%;
    display: none;
}

.PcNavItems {
    gap: 10%;
    justify-content: flex-end;
}

.PcNavItems .btn, nav:not(#mob-nav-clone) .nav-content .btn {
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

#mob-nav-clone .nav-content .btn {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}


.nav-company-logo img {
    width: calc(var(--img-width-xxl) * 3);
    aspect-ratio: 2/1;
}


#pcnav .menu-icon {
    cursor: pointer;
}

.acordion-container:has(.nav-sub-item-title) {
    border-radius: 0;
}

.acordion-container .nav-sub-item-title {
    background-color: transparent;
    padding: 0;
    border-bottom: none;
}

.acordion-container .acordion-contenet.nav-sub-items {
    background-color: transparent;
    padding-inline-start: 1%;
}

.black-Sidebar-container {
    background-color: #2121218a;
    height: 100dvh;
    width: 100vw;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1100;
    transition: 0.3s;
    will-change: opacity;
    opacity: 0;
    visibility: hidden;
}

.pcnav-content ul .acordion-container:hover {
    background-color: color-mix(in srgb, var(--color-mute-light), white 70%);
}

.black-Sidebar-container.close {
    animation: hidenavbar 0.3s ease-in-out forwards;
}

@keyframes hidenavbar {
    0% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.black-Sidebar-container.open {
    animation: shownavbar 0.3s ease-in-out forwards;
}

@keyframes shownavbar {
    0% {
        opacity: 0;
        visibility: hidden;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

#SearchboxContainer .pcnav-content {
    float: inline-end;
}

.aminiti-serach img {
    border-radius: var(--rounded-pill);
}

.backs-container {
    align-items: center;
    padding: 2% 0;
}

.pcnav-content {
    width: 30%;
    height: 100%;
    background-color: var(--color-bg);
    padding: 0%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.profile-name {
    white-space: nowrap;
}

.nav-profile-container {
    align-items: center;
    padding: 2% 0 4% 0;
    grid-template-columns: 20% 60% 1fr;
    background-color: var(--color-gray);
    padding-inline-start: var(--p-1);
    justify-content: space-between;
}

.nav-back {
    background-color: var(--color-main);
    aspect-ratio: 3/2;
    border-start-start-radius: var(--rounded-main);
    border-end-start-radius: var(--rounded-main);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bg);
    width: 22%;

}

.nav-profile-action {
    background-color: var(--color-gray);
    gap: 0.5rem;
    padding: 4%;
    padding-inline-start: 0;
    padding-top: 0;
}

.nav-profile-action * {
    white-space: nowrap;
}

.nav-profile-action > div {
    cursor: pointer;
    transition: 0.2s;
}

.nav-profile-action > div:hover {
    background-color: var(--color-mute-light);
    border-radius: var(--rounded-main);
}

.nav-profile-container .profile-image {
    width: 25%;
    object-fit: cover;
    border-radius: var(--rounded-pill);
}

.nav-profile-container .profileAndinfo {
    width: 78%
}


.nav-profile-container .profile-name,
.nav-profile-container .color-mute {
    width: 100%;
}

.nav-profile-container .color-mute {
    word-wrap: break-word
}

.pcnav-content ul {
    padding: 0;
    margin: 0;
}

.pcnav-content ul, .pcnav-content .nav-profile-container, .pcnav-content .nav-profile-action {
    padding-inline-start: 5% !important;
}

.pcnav-content ul span, .pcnav-content ul .iconify {
    color: var(--color-mute-dark);
}

.pcnav-content ul li:not(:empty) {
    /* border-bottom: 0.1rem solid var(--color-mute); */
    padding: 3% 1%;
    transition: 0.2s ease-in-out;
    cursor: pointer !important;
}

.pcnav-content ul li:last-child {
    border-bottom: none;
}

.pcnav-content ul li:hover {
    background-color: var(--color-mute-light);
}

.pcnav-content ul li a {
    align-items: center;
}

@media (max-width: 576px) {
    #pcnav-content-container {
        display: block;
    }

    #pcnav:not(.adminNav) {
        display: none;
    }

    .pcnav-content ul li {
        padding: 4% 1%;
    }
}

@media (min-width: 576px) {
    #mob-nav, #mob-nav-clone {
        display: none;
    }

    #pcnav {
        display: flex;
    }
}

/* check out page */
.selectable-item {
    transition: 0.3s;
    cursor: pointer;
}

#check-out-container {
    grid-template-columns: 70% 30%;
}


#check-out-container .check-out-image-section {
    grid-column: 2;
    overflow: hidden;
}


#check-out-container .check-out-image-section .checkOut-image-container .checkOut-offers {
    color: var(--color-accent);
    font-weight: bold;
}

#check-out-container .check-out-image-section .checkOut-image-container {
    display: flex;
    overflow: hidden;
    align-items: center;
    gap: 0.5rem;
}

#check-out-container .check-out-image-section .checkOut-image-container:has(.checkOut-offers) {
    padding: 1%;
}

.checkOut-offers * {
    white-space: nowrap;
}

.checkOut-offers h4 {
    /* font-size: clamp(40px,5vw,200px); */
    font-size: var(--font-size-xl);
}

.checkOut-offers h5 {
    font-size: var(--font-size-xxl);
}

.checkOut-offers h6 {
    font-size: var(--font-size-xl);
}

#check-out-container .check-out-image-section .checkOut-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--rounded-main);
}

.other-image {
    width: 100%;
    overflow: hidden;
}

.other-image img {
    --otherImageWidth: 7%;
    width: 7%;
    object-fit: cover;
    border-radius: var(--rounded-main);
    box-sizing: border-box;
}

.other-size .btn {
    background-color: var(--color-mute-light);
    color: var(--color-text) !important;
}

.other-size .btn {
    background-color: var(--color-mute-light);
}

.other-size .btn * {
    color: var(--color-text) !important;
}

.other-size .active {
    background-color: var(--color-accent);
    color: var(--color-bg) !important;
}

.other-size .active * {
    color: var(--color-bg) !important;
}

.other-size .btn {
    width: fit-content;
    margin-inline-end: 2%;
}

.other-image .active {
    border: calc(var(--border-size) * 3) solid var(--color-main);
    width: calc(var(--otherImageWidth) + 1%);
}

.check-out-info-section {
    grid-column: 1;
    grid-row: 1;
}


.toping-container li {
    margin-top: 1%;
}

toping-container .toping-info {
    width: 100%;
}

.toping-container li .numbericUpDow {
    padding:0.3rem;
}
.toping-container li .numbericUpDow>* {
    width: 2.4rem;
}
@media (max-width: 1200px) {
    .toping-container li .numbericUpDow>* {
        width: 1.8rem;
    }
}
#check-out-container .acordion-container {
    width: 100%;
}

.total-price-container .numbericUpDow {

    margin: 2% 0;
}
.total-price-container .numbericUpDow>* {
    width: 3rem;
}
@media (max-width: 992px) {
    .total-price-container .numbericUpDow>* {
        width: 2.5rem;
    }
}

@keyframes priceIncrease {
    0% {
        transform: scale(1);
        color: green;
    }

    50% {
        transform: scale(1.05);
        color: var(--color-success);
    }

    100% {
        transform: scale(1);
        color: inherit;
    }
}

@keyframes priceDecrease {
    0% {
        transform: scale(1);
        color: red;
    }

    50% {
        transform: scale(0.9);
        color: var(--color-error);
    }

    100% {
        transform: scale(1);
        color: inherit;
    }
}

.price-increase-effect {
    animation: priceIncrease 0.3s ease-in-out;
}

.price-decrease-effect {
    animation: priceDecrease 0.3s ease-in-out;
}




.toping-container .toping-info {
    width: 65%;
}

.toping-container .toping-info img {
    width: 10%;
    border-radius: var(--rounded-main);
    object-fit: cover;
}

@media (max-width: 992px) {
    .toping-container .toping-info img {
        width: 14%;
    }
}

@media (min-width: 2000px) {
    .toping-container .toping-info img {
        width: 7%;
    }
}

.payment-sm-nav {
    display: none;
    position: fixed;
    background: #fff;
    bottom: 0;
    z-index: 50;
    width: 100%;
    left: 0;
}

@media (max-width: 576px) {
    #check-out-container {
        grid-template-columns: 100%;
    }

    #check-out-container .check-out-image-section {
        grid-column: unset;
        order: 1;
    }

    .check-out-info-section {
        grid-column: 1;
        grid-row: 2;
    }

    .other-image img {
        width: 11%;
    }

    .payment-nav {
        display: none;
    }

    .payment-sm-nav {
        display: block;
    }

    .payment-sm-nav > div {
        justify-content: space-around;
        align-items: center;
    }
}


/* end check out */

/* addmin panls */

/* addmin navbar */
.pcnav-content {
    width: 75%;
    margin: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

@media (min-width: 768px) {
    .pcnav-content {
        width: 30%;
    }
}

/* feature-item component */
.feature-item-container {
    flex-wrap: wrap;
    margin: 1% 0;
}

.feature-item {
    grid-template-columns: 20% 80%;
    align-items: center;
    width: calc(100% / 2 - 1%);
    margin-top: 1%;
    padding: 0.5%;
}

.feature-item .feature-images {
    grid-column: 1;
    width: 100%;
}

.feature-item .feature-images img {
    object-fit: cover;
    border-radius: var(--rounded-pill);
}

.feature-item .feature-info {
    flex-direction: column;
    width: 90%;
}

.feature-item .feature-info h5,
.feature-item .feature-info h6 {
    width: 100%;
}


.feature-item .feature-info * {
    display: inline;
    width: fit-content;
}

@media (max-width: 576px) {
    .feature-item {
        width: calc(100% / 2 - 1%);
    }
}

@media (min-width: 576px) {
    .feature-item {
        width: 50%;
    }
}

@media (min-width: 768px) {
    .feature-item {
        width: calc(100% / 3 - 1%);
    }
}

@media (min-width: 992px) {
    .feature-item {
        width: calc(100% / 4 - 1%);
    }
}

@media (min-width: 1400px) {
    .feature-item {
        width: calc(100% / 5 - 1%);
    }
}

/* chose theme */
.chose-theme-container {
    padding: 1%;
}

.chose-theme-header {
    justify-content: space-between;
    align-items: center;
    margin: 1% 0;
}

.chose-theme-content {
    align-items: center;
    flex-wrap: wrap;
}

.chose-theme-content .theme-image {
    width: calc(100% / 3 - 2%);
    margin-bottom: 2%;
    padding: 0;
    overflow: hidden;
}

.chose-theme-content .theme-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chose-theme-container .acordion-container {
    width: 100%;
}

.acordion-openner-container {
    gap: 5%;
    align-items: center;
}

@media (min-width: 768px) {
    .chose-theme-content .theme-image {
        width: calc(100% / 5 - 2%);
    }
}

@media (min-width: 1400px) {
    .chose-theme-content .theme-image {
        width: calc(100% / 6 - 2%);
    }
}

/* text icon component */
.text-ico-container {
    grid-template-columns: 10% 1fr fit-content(30%);
    align-items: center;
    padding: 1%;
    /*margin: 1% 0;*/
}

.text-ico-container.custom-order {
    grid-template-columns: fit-content(30%) 1fr;
}

.text-ico-container.custom-order .text-ico-rang input {
    width: 100%;
}

.text-ico-container .text-ico-icon {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-ico-container .text-ico-icon > * {
    width: 100%;
}

.text-ico-container .text-ico-icon > img {
    width: 80%;
}

@media (max-width: 768px) {
    .text-ico-container .text-ico-icon > img {
        width: 90%;
    }
}

.arrow-postion .text-ico-icon {
    justify-content: end;
}

.arrow-postion .text-ico-icon > * {
    width: unset;
}

.container {
    width: 90%;
    margin: auto;
}

.container:has(.order-status-page) {
    width: 100%;
    position: relative;
}

.osg-right-top {
    display: flex;
    justify-content: center;
    align-items: center;
}

.osg-number-title {
    font-size: calc(var(--font-size-xxl) * 2)
}

/* check box in */
.checkBoxIn {
    transition: 0.2s;
}

.checkBoxIn .check-box {
    width: 3rem !important;
}

.box.checkBoxIn:has(.check-box input[type="checkbox"]) {
    background-color: var(--color-gray);
}

.box.checkBoxIn:has(.check-box input[type="checkbox"]:checked) {
    background-color: var(--color-mute-light);
}


.chartPage {
    grid-template-columns: unset;
}

@media (min-width: 768px) {
    .chartPage {
        grid-template-columns: 1fr 1fr;
    }
}

/* text each other */
.text-each-other-container {
    align-items: center;
}

.text-each-other-container .text-each-other {
    display: flex;
    flex-direction: column;
    padding: 1%;
}

.text-each-other-container .text-each-other:not(.text-each-other-container .text-each-other:first-child) {
    border-left: 0.1rem solid var(--color-mute);
}

/* page table */

th,
td {
    border: 1px solid var(--color-main);
    padding: 10px;
}

tr:nth-child(even) {
    background-color: var(--color-mute-light);
}


th {
    background-color: var(--color-main-light);
}

.monthDay-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.monthDay-table .day-name > * {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.day-num {
    text-align: center;
}

.day-num > .first-day {
    font-weight: bold;
    color: rebeccapurple;
}

/* .monthDay-table .day-5,
.monthDay-table .day-6,
.monthDay-table .day-7 {
    background-color: aqua;
} */

@media (min-width: 768px) {
    .table-page {
        grid-template-columns: 1fr 1fr;
    }

    .table-page .checkBoxIn .check-box {
        width: 10% !important;
    }
}

/* table page sort */
.table-page .admin-form {
    padding: 3%;
}

/* استایل‌دهی بازه */
td {
    position: relative;
    /* برای قرارگیری خط و متن بازه */
    padding-bottom: 20px;
    /* فاصله برای نمایش خط و متن */
}

.range-start::after,
.range-mid::after,
.range-end::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0.5rem;
    background-color: var(--color-secondry);
}

.range-start::after {
    border-top-left-radius: 5px;
    /* گرد کردن گوشه شروع */
}

.range-end::after {
    border-top-right-radius: 5px;
    /* گرد کردن گوشه پایان */
}


.range-end::before,
.range-start::before {
    content: "end";
    position: absolute;
    /* bottom: -2%; */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1rem;
    z-index: 5;
    background-color: var(--color-secondry);
    color: var(--color-text);
    padding: 5%;
    border-radius: var(--rounded-main);
}

.range-start::before {
    content: "start";
}

/* 3btn box component */
.btn-box .btn-items {
    margin-top: 2%;
    align-items: center;
}

/* combained page sort */


@media (min-width: 768px) {
    .combained-page {
        grid-template-columns: 1fr 1fr;
    }
}

.combained-page .feature-item {
    width: 48% !important;
}

/* chart */
.chart-container {
    position: relative;
    padding: 0;
    margin: 2% 0;
}

.chart-container .chart-info {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--color-main) 50%, transparent);
    padding: 2%;
    box-sizing: border-box;
    color: var(--color-bg);
}

/* cart type 2 */
.card-type2-container {
    gap: 0;
}


@media (min-width: 768px) {
    .card-type2-container {
        grid-template-columns: 1fr 1fr;
    }
}

.card-type2-container.oneCol {
    grid-template-columns: 1fr !important;
}

.card-type2 {
    padding: 1%;
    margin-bottom: 1%;
    width: 95%;
    margin-top: 2%;
    display: flex;
}

.card-type2 .ct2-line-one {
    display: flex;
    align-items: center;
}

.card-type2 .ct2-image {
    border-radius: var(--rounded-pill);
    width: 3.5rem;
    margin-inline-end: 1%;
}


.ct2-info-container .ct2-info {
    border-inline-start: solid var(--color-text) 0.1rem;
}

.ct2-info-container .ct2-info:first-child {
    border-inline-start: none;
}

.ct2-last-line {
    display: flex;
    justify-content: space-between;
}

.ct2-box.selected {
    content: "";
    display: block;
    width: 100%;
    background-color: rgb(110, 167, 252);
    padding: 1%;
    border-radius: var(--rounded-main);
}

.ct2-navigate {
    justify-content: end;
    gap: 15%;
}

.select-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1% 2%;
    background-color: var(--color-main-light);
    position: fixed;
    z-index: 20;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    top: 0;
    transform: translateY(-100%);
}

.select-navbar.down {
    transform: translateY(0);
}

/* line btn component  */
.line-btn-container {
    width: 95%;
    margin: auto;
}

.line-btn-container .line-btn {
    background-color: var(--color-mute-light) !important;
}

.line-btn-container .line-btn {
    width: 100%;
    padding: 1%;
}

.line-btn-image {
    background-color: var(--color-bg);
    padding: 2%;
    border-radius: var(--rounded-main);
    width: 6%;
}

.line-btn-image * {
    width: 100%;
    height: 100%;
}

.line-btn-info > h6 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*@media (min-width: 768px) {
    .line-btn-image {
        --width-line-btn: 23%;
        width: var(--width-line-btn);
    }

    .line-btn-info {
        width: calc(100% - var(----width-line-btn));
    }

    .line-btn-container {
        width: 70%;
    }
}*/
@media (max-width: 576px) {
    .line-btn-image {
        width: 30%;
    }

    .line-btn {
        padding: 3%;
    }
}

/* tip component */
.tip-container {
    width: 90%;
    background-color: antiquewhite;
    padding: 1%;
    border-radius: var(--rounded-main);
    margin: 1% auto;
    box-sizing: border-box;
}

.tip-container .tip-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5% 0;
}

.tip-container .tip-item .form-control {
    float: inline-end;
    padding: 0.5%;
}

.tip-container .tip-item .form-control input {
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 0;
}

.tip-container .tip-item:nth-last-child(2) {
    border-bottom: var(--border-size) solid var(--color-main);
    padding: 0.5% 0;
}

.tip-container input {
    padding: 0.3%;
}

.no-matter-tip h5,
.no-matter-tip .card-current-price,
.no-matter-tip input {
    font-size: var(--font-size-xs) !important;
    color: var(--color-mute) !important;
}


/* error page */
.error-page {
    display: grid;
    grid-template-rows: 1fr;
    /* background-color: aqua; */

    width: 100%;
}

.error-image {
    width: 100%;
    transform: translateX(-20%);
    display: flex;
    height: 100%;
}

.error-page-info {
    margin: 2% 0 3% 0;
}

.error-page .btn {
    width: fit-content;
}

.error-page-title {
    font-weight: bold;
}

/* product page */
/* .product-frame-container {
    margin: 2% auto;
    border-radius: var(--rounded-main);
} */
.product-to-buy .shoping-cart {
    margin-bottom: 1%;
}

.shoping-cart {
    border-radius: var(--rounded-secondry);
    overflow: hidden;
}


.shoping-cart .card.box {
    width: 100%;
    grid-template-rows: 1fr;
    grid-template-columns: 30% 1fr;
    overflow: hidden;
    padding: 0.5%;
    margin-bottom: 0;
    z-index: 1;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    display: grid;
}

.shoping-cart-slim .card.box {
    grid-template-columns: 17% 1fr;
}

.shoping-cart .card .card-info {
    padding-inline-start: 5%;
    box-sizing: border-box;
    position: relative;
    padding-block: 2%;
    padding-inline-start: 2%;
    padding-inline-end: 2%;
}

.shoping-cart-slim .card .card-info {
    padding: 0.5% 0.5% 0.5% 1%;
}

.shoping-cart-slim .card .numbericUpDow {
    width: 55%;
}


.stars * {
    color: var(--color-star) !important;
}

.card-items {
    background-color: var(--color-mute-light) !important;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 0;
    margin: 0;
}

.card-items > ul {
    padding: 0.5%;
    margin: 0;
    list-style: none;
}

.card-items > ul > ul {
    padding: 0 0 0 4%;
}

.card-items > ul > ul > ul {
    padding: 0 0 0 4%;
}

.card-item {
    background-color: var(--color-gray);
    margin-bottom: 0.15em;
    padding: 1%;
    border-radius: var(--rounded-main);
    font-size: var(--font-size-xs);
}

.card-item-opener {
    cursor: pointer;
    user-select: none;
}

.card-item-opener .iconify {
    transition: 0.3s;
}

.card-num-container {
    width: 100%;
}

.card.item-margin-container > *:nth-child(1) {
    margin-top: 0;
}

.card .numbericUpDow {
    color: var(--color-text) !important;
}
.card .numbericUpDow>* {
    width: 2.6rem;
}
@media (max-width: 992px) {
    .card .numbericUpDow>* {
        width: 2rem;
    }
}

.card .cart-last-line-container {
    margin-top: 2%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: end;
}

.card .cart-last-line-container .numbericUpDow {
    grid-column: 2;
}

.card .cart-last-line-container .card-item-opener {
    grid-column: 1;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 2%;
}


.card .numbericUpDow * {
    color: var(--color-text) !important;
}

.card .numbericUpDow .num-icon:has(.iconify) * {
    color: var(--color-error) !important;
}

.card-num-container {
    display: flex;
    align-items: center;
    border-inline-start: var(--color-text) var(--border-size) solid;
    padding: 1%;
    box-sizing: border-box;
}

.Product-not-available .product-over-tag {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: color-mix(in srgb, var(--color-bg) 70%, transparent);
    display: flex;
    justify-content: center;
    align-items: center;
}

.Product-not-available .product-over-tag * {
    color: var(--color-accent) !important;
}

.navigate-card {
}

.navigate-card * {
    cursor: pointer;
}

/* order-status-page */
.gp-2part-layout {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);
}

@media (max-width: 576px) {
    .gp-2part-layout {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
    }
}

.order-status-page {
    position: relative;
    overflow-y: hidden;
    padding: 0;
    gap: 0;
    height: 100dvh;
}

.order-status-page .osg-left {
    grid-column: 1;
    grid-row: 1;
    overflow-y: auto;
}

.order-status-page .osg-right {
    grid-column: 2;
    grid-row: 1;
}

.osg-right {
    grid-template-rows: 50% 50%;
    grid-template-columns: 1fr;
    gap: 0;
}

.osg-right-down {
    overflow: auto;
    display: flex;
    align-items: end;
}

.osg-right-down > div {
    padding-inline: 2%;
}


.text-btn {
    padding: 2%;
}

.text-btn h5 {
    color: var(--color-mute);
}

.order-status-page .order-detile .profile-image {
    width: 15%;
}

.od-user-detile {
    grid-template-columns: 1fr 25%;
    align-items: center;
}

.od-btns-container {
    justify-content: center;
    gap: 5%;
}

.od-btns-container > div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-main);
    border-radius: var(--rounded-pill);
    width: 30%;
    cursor: pointer;
}

.osg-left > * {
    margin-bottom: 1%;
}

.osg-mob {
    display: none;
}

.table-container {
    overflow: auto;
}

.Detile-navigate-btns {
    overflow: auto;
    margin-top: 2%;
}

.Detile-navigate-btns > * {
    margin-inline-end: 2%;
}

.swip-icon {
    display: none;
}

@media (max-width: 576px) {

    :root {
        --osg-height: 15dvh;
    }

    .swip-icon {
        display: block;
    }

    .order-status-page .osg-right {
        grid-column: 1;
        grid-row: 1;
        height: calc(100dvh - var(--osg-height) * 1.2);
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50dvh 1fr;
        gap: 0;
        padding: 1%;
    }

    .osg-left {
        position: absolute;
        bottom: 0;
        height: var(--osg-height);
        transition: 0.3s;
        overflow-y: hidden;
        width: 100%;
        border-radius: var(--rounded-secondry) var(--rounded-secondry) 0 0;
        box-shadow: 1px 0px 12px 0px var(--color-mute) !important;
        -webkit-box-shadow: 1px 0px 12px 0px rgba(0, 0, 0, 0.62);
        -moz-box-shadow: 1px 0px 12px 0px rgba(0, 0, 0, 0.62);
    }
}


.osg-mob {
    display: block;
}

}

/*pagination*/
.pagination {
    list-style: none;
    display: flex;
    gap: 1%;
    justify-content: center;
}

/*card-col-controler*/
.card-col-controler {
    justify-content: center;
    margin: 1%;
}

@media (max-width: 768px) {
    .card-col-controler {
        display: none;
    }

    /* addres-page */
    /*.address-page {
    width: 70%;
}*/
    .tic-layout {
        width: 70%;
        margin-top: 10%;
    }

    .tic-layout .text-ico-container.box {
        padding: 4%;
    }
}

@media (orientation: portrait) {

    .payment-wating-container,
    .tic-layout {
        margin-top: 30%;
    }

    .tic-layout .text-ico-container.box {
        padding: 7%;
        margin-top: 4%;
    }

    .tic-layout {
        width: 100%;
    }
}

.change-addresr-btn {
    border-bottom: 0 !important;
}

.address-page-title {
    margin-bottom: 2%;
}

.text-ico-container.box {
    border-bottom: var(--border-size) var(--color-mute-light) solid;
    padding: 2%;
}

.acordion-container.box :is(.acordion-header, .acordion-header *) {
    background-color: var(--color-bg);
    color: var(--color-text);
}

.acordion-container.box {
    border-radius: var(--rounded-secondry)
}

.acordion-container.box {
    width: 100%;
    padding: 0;
}

.acordion-container.box .acordion-header {
    padding: 0;
    background-color: transparent;
    border-bottom: none;
}

.acordion-container.box .acordion-header .text-ico-container {
    margin: 0;
}

.acordion-container.box .acordion-contenet {
    background-color: transparent;
}

@media (max-width: 768px) {
    .address-page {
        width: 95%;
    }
}

.address-page .chanage-address {
    padding: 3% 1%;
    border-radius: var(--rounded-secondry);
    background-color: var(--color-accent);
}

/* confirm page */

.confirm-page {
    grid-template-columns: 1fr 45%;
}

.confirm-page .tip-container {
    width: 100%;
    background-color: transparent;
}

.confirm-page-title {
    text-align: center;
}

.address-to-sent > *:not(.address-to-sent>*:first-child) {
    margin-bottom: 3%;
}

.order-btn-pc {
    text-align: center;
    box-sizing: border-box;
}

@media (max-width: 992px) {
    .confirm-page {
        grid-template-columns: 1fr 54%;
    }
}

@media (max-width: 576px) {
    .order-btn-pc {
        display: none;
    }
}

@media (max-width: 576px) {
    .confirm-page {
        grid-template-columns: 1fr;
        margin: 5% 0;
    }


    .cart-title-pc {
        display: none
    }
}

/* log in */
.login {
    width: 90%;
    margin: 5% auto;
    height: 70vh;
    padding: 1%;
}

.login .loginImg {
    width: 50%;
    height: 100%;
    object-fit: cover;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-radius: var(--rounded-main);
}

.login .loginInfo {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 12%;
}

.login .btn {
    width: 100%;
    margin-bottom: 1%;
    display: block;
    box-sizing: border-box;
    text-align: center;
}

.loginInfo input[type="submit"]:nth-of-type(1) {
    background-color: var(--color-main);
}

.loginInfo input[type="submit"]:nth-of-type(1):hover {
    background-color: var(--color-main-dark);
}

.error-page2 .login * {
    margin-bottom: 1%;
}

@media (max-width: 768px) {
    .login {
        flex-direction: column;
        padding: 3%;
        margin-top: 35%;
    }

    .login .loginImg {
        width: 100%;
    }

    .login .loginInfo {
        width: 100%;
    }
}

.ui-menu-item.R1 {
    overflow: hidden;
}

/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* --------------------qtv part--------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

.qtv {
    grid-template-columns: 1fr 1fr;
    background-color: var(--color-gray);
    overflow: hidden;
    padding: 0;
    pointer-events: none;
}

.qtv .price-container:not(.price-container2) {
    background-color: #fff;
    border: #212121 calc(var(--border-size) * 2) solid;
}
.qtv .price-container:has(.price-title){
    background-color: var(--color-error);
}


.price-container.price-container2 {
    padding: 0 !important;
    background-color: transparent;
    border-radius: 0;
}

.price-container.price-container2 span {
    top: 0;
}

.qtv .price-container.offered {
    background-color: red;
    border: #fff calc(var(--border-size) * 2) solid;
}

.qtv .price-container.offered * {
    color: #fff;
}

.qtv .box {
    margin: 0;
}

.qtv:not(.qtv-4, .qtv-5) .price span {
    top: 27%;
}

.qtv-effect {
    position: absolute;
    padding: 0;
    z-index: 50;
    top: 0;
    right: 0;
}

.qtv-effect {
    position: absolute;
    padding: 0;
    z-index: 50;
    top: 0;
    right: 0;
    overflow: hidden;
    mix-blend-mode: plus-lighter;
}

.qtv-effect-vid {
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    object-fit: cover;
}

.wating-border {
    padding: 3%;
}

.qtv .qtv-start .qtv-header * {
    color: var(--color-mute);
    font-size: 2cqw;
}

.qtv .qtv-items {
    list-style: none;
}

.qtv .qtv-items .qtv-item {
    background-color: var(--color-bg);
    margin-bottom: 1%;
    border-radius: var(--rounded-secondry);
    overflow: hidden;
    border: var(--border-size) var(--color-accent) solid;
}

.qtv .qtv-items .qtv-item :is(.qtv-name, .qtv-num) {
    padding: calc(var(--p-1) * 3);
    font-size: 3cqw;
}

.qtv .qtv-items .qtv-item .qtv-num:not(.Level1, .Level2, .Level3) {
    background-color: var(--color-mute);
}

.qtv .qtv-items .qtv-item .qtv-num.Level1 {
    background-color: var(--color-accent);
}

.qtv .qtv-items .qtv-item .qtv-num.Level2 {
    background-color: var(--color-secondry);
}

.qtv .qtv-items .qtv-item .qtv-num.Level3 {
    background-color: var(--color-main);
}

.qtv .qtv-ads {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: var(--color-main);
    border: none;
    padding: 0
}


.qtv .qtv-inProcess .qtv-item :is(.qtv-name, .qtv-num) {
    padding: calc(var(--p-1) * 1.5) !important;
    font-size: 2cqw !important;
}

.qtv .qtv-inProcess .qtv-inp-item {
    background-color: var(--color-accent);
    margin-bottom: 1%;
    padding: 1%;
    font-size: 2cqw;
}

.qtv-start {
    height: 100%;
    scrollbar-width: none;
    position: relative;
}

@media all and (orientation: portrait) {

    .qtv {
        grid-template-columns: 1fr;
        grid-template-rows: 50% 50%;
    }

    .qtv .qtv-start .qtv-header * {
        font-size: 4cqw;
    }

    .qtv .qtv-items .qtv-item :is(.qtv-name, .qtv-num) {
        font-size: 5.5cqw;
    }


    .qtv .qtv-inProcess .qtv-item :is(.qtv-name, .qtv-num) {
        font-size: 4cqw !important;
    }
}

/* qtv 1 */

.qtv-1-image-container {
    width: 90%;
    aspect-ratio: 1/1;
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.qtv-1 {
    grid-template-columns: 60% 40%;
}

.qtv-1-imags {
    position: relative;
    width: 100%;
    height: 100%;
    animation: fadeIn 1s ease-in;
}

.qtv-1-imags * {
    width: 100%;
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.qtv-1-imags img:nth-child(1) {
    top: 50%;
    inset-inline-start: 51%;
    animation: toppingAnimation 10s infinite ease-in-out;
    animation-delay: 1s;
}

.qtv-1-imags img:nth-child(3) {
    top: 47%;
    inset-inline-start: 58%;
    animation: toppingAnimation 10s infinite alternate ease-in-out;
}

.qtv-1-imags img:nth-child(2) {
    width: 100%;
    clip-path: circle(41%);
}

.qtv-1 .qtv-end {
    background-color: var(--color-main);
    display: flex;
    flex-direction: column;
    /* align-items: s; */
    justify-content: center;
    gap: 10%;
    position: relative;
}

.qtv-1 .qtv-end > * {
    width: fit-content;
}


.qtv-1-title {
    transform: translateX(-15%);
    font-size: 4vw;
    margin-inline-start: 10%;
    text-indent: -10%;
    z-index: 2;
}

.qtv-1-des {
    font-size: 3.5vw;
    width: 80% !important;
    margin: 0 auto;
    z-index: 2;
}

@keyframes toppingAnimation {
    0% {
        transform: translate(-50%, -50%);
    }

    25% {
        transform: translate(-52%, -48%);
    }

    50% {
        transform: translate(-48%, -52%);
    }

    75% {
        transform: translate(-51%, -49%);
    }

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

.qtv-1-price {
    margin: 0 auto;
    transform: translate(0%, -10%);
    z-index: 3;
}

.qtv-1-price .price-container {
    padding: 1%;
}

.qtv-1-price .price-container .price {
    font-size: 5vw;
}

.qtv-1-price .price-container span {
    font-size: 3.4vw;
}

.qtv-1-price .price-container .price-title {
    font-size: 2.8vw;
    font-weight: bold;
}

.qtv-1 .qtv-start .qtv-1-title {
    display: none;
}

.qtv-1-animation-element {
    font-size: 7vw;
    position: absolute;
    animation: rotate 3s infinite linear;
    color: #FFFFFF;
    opacity: 0.9;
}

.qtv-1-animation-element.qtv-1-animation-element-1 {
    left: 10%;
    bottom: 3%;
    animation-duration: 5000ms;
}

.qtv-1-animation-element.qtv-1-animation-element-2 {
    right: 10%;
    top: 3%;
}

@media all and (orientation: portrait) {
    .qtv-1 {
        grid-template-columns: 1fr;
        grid-template-rows: 65% 35%;
    }

    element.style {
    }

    .qtv-1-image-container {
        top: 41%;
    }

    .qtv-1 .qtv-start .qtv-1-title {
        display: block;
    }

    .qtv-1-title {
        font-size: 10vw;
        text-indent: 0;
        position: absolute;
        bottom: 0;
        z-index: 3;
        margin-inline-start: 3%;
        transform: translate(0, 0);
    }

    .qtv-1 .qtv-end .qtv-1-title {
        display: none;
    }

    .qtv-1-des {
        font-size: 8vw;
    }

    .qtv-1-price .price-container .price {
        font-size: 10vw;
    }

    .qtv-1-price .price-container span {
        font-size: 7.5vw;
    }

    .qtv-1-price .price-container .price-title {
        font-size: 6vw;
    }

    .qtv-1-animation-element {
        font-size: 20vw;
    }

    .qtv-1-animation-element.qtv-1-animation-element-1 {
        left: 10%;
        bottom: 3%;
    }

    .qtv-1-animation-element.qtv-1-animation-element-2 {
        right: 3%;
        top: 20%;
    }
}


/* qtv-2 */
.qtv-2 {
    background-color: var(--color-main);
    background-image: url('../../public/img/vecteezy_fast-food-seamless-outline-pattern-design_12186625.jpg');
    background-blend-mode: multiply;
    background-size: 50%;
    position: relative;
}

.qtv-2-items {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    height: 80%;
    gap: 2%;
}

.qtv-2-header {
    justify-content: space-between;
    height: 15%;
    padding: 3%;
    box-sizing: border-box;
}

.qtv-2-items:is(.qtv-item-4, .qtv-item-5, .qtv-item-6, .qtv-item-7, .qtv-item-8) .qtv-2-item-container {
    width: calc(100% / 4 - 2%);
    height: 50%;
}

.qtv-2-items.qtv-item-3 .qtv-2-item-container {
    width: calc(100% / 3 - 2%);
    height: 50%;
}

.qtv-2-items.qtv-item-2 .qtv-2-item-container {
    width: calc(100% / 2 - 2%);
    height: 50%;
}

.qtv-2-items.qtv-item-4,
.qtv-2-items.qtv-item-3,
.qtv-2-items.qtv-item-2 {
    align-items: center;
}

.qtv-2-items.qtv-item-2 {
    align-items: center;
}

.qtv-2-item-container {
    position: relative;
    display: flex;
    justify-content: center;
}

.qtv-2-item-container .price-container {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    padding: 0;
}

.qtv-2-item-container .price-container .price {
    font-size: 2.2cqw;
}

.qtv-2-item-container .price-container .price span {
    font-size: 1.7cqw;
}

.qtv-2-item-container .price-container .price-title {
    font-size: 1.7cqw;
    top: -16%;
    inset-inline-start: -3%;
}


.qtv-2-image-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--rounded-pill);
}

.qtv-2-image-container * {
    position: absolute;
    width: 100%;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
}

.qtv-2-image-container .image-effect {
    z-index: 2;
    mix-blend-mode: color-dodge;
}

.qtv-2-item-container .qtv-2-des {
    position: absolute;
    width: 100%;
    top: unset;
    bottom: 0%;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding: 2%;
    font-size: 2cqw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    background: rgba(33, 33, 33, 0.73);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #FFFFFF;
}

.qtv-2-item {
    background-color: #FFFFFF;
    height: 100%;
    aspect-ratio: 1/1;
    position: relative;
    border-radius: var(--rounded-pill);
}

.qtv-2-item-container:nth-of-type(even) {
    animation: zoomInDown 2s ease-in;
}

.qtv-2-item-container:nth-of-type(odd) {
    animation: zoomInUp 2s ease-in;
}

.qtv-2-header h1 {
    font-size: 3cqw;
    font-weight: bold;
}

.qtv-2-header h2 {
    font-size: 2cqw;
    font-weight: bold;
    text-align: end;
}

.qtv-2-badge {
    position: absolute;
    top: 1%;
    inset-inline-start: 10%;
    background: rgba(33, 33, 33, 0.73) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 2%;
    border-radius: 100vw;
    rotate: -27deg;
}

.qtv-2-badge h4 {
    font-size: 1.5cqw;
    color: #ffff;
}

.qtv-2-badge.just-num h4 {
    font-size: 3cqw;
}

.qtv-2-badge.just-num {
    rotate: 0deg;
}

@media all and (orientation: portrait) {
    .qtv-2-items {
        align-items: center;
    }

    .qtv-2-items.qtv-item-8 .qtv-2-item-container,
    .qtv-2-items.qtv-item-7 .qtv-2-item-container,
    .qtv-2-items.qtv-item-6 .qtv-2-item-container,
    .qtv-2-items.qtv-item-5 .qtv-2-item-container,
    .qtv-2-items.qtv-item-4 .qtv-2-item-container {
        width: 48%;
        height: calc(100% / 4 - 2%);
    }

    .qtv-2-items.qtv-item-3 .qtv-2-item-container {
        width: 50%;
        height: calc(100% / 3 - 2%);
    }

    .qtv-2-items.qtv-item-2 .qtv-2-item-container {
        width: 50%;
        height: calc(100% / 2 - 2%);
    }

    .qtv-2-item-container .qtv-2-des {
        font-size: 4.5cqw;
    }

    .qtv-2-header h1 {
        font-size: 6cqw;
    }

    .qtv-2-header h2 {
        font-size: 5cqw;
    }

    .qtv-2-item-container .price-container .price {
        font-size: 4cqw;
    }

    .qtv-2-item-container .price-container .price span {
        font-size: 3cqw;
    }

    .qtv-2-item-container .price-container .price-title {
        font-size: 3cqw;
    }

    .qtv-2-badge h4 {
        font-size: 3cqw;
    }

    .qtv-2-badge.just-num h4 {
        font-size: 5cqw;
    }
}

/* qtv 3 */
.qtv-3 {
    background-color: var(--color-accent-dark);
    grid-template-rows: 10% 1fr;
    gap: 0;
    /*background-image: url("../assets/gif/1.gif");*/
    background-blend-mode: color-burn;
}

.qtv-3-top-title {
    display: flex;
    align-items: end;
    justify-content: center;
    font-size: 4vw;
    grid-column: 1/3;
}


.qtv-3 :is(.qtv-end, .qtv-start) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.qtv-3 .qtv-start {
    grid-column: 1;
    grid-row: 2;
    animation: zoomInLeft ease-in 2s;
}

.qtv-3 .qtv-end {
    grid-column: 2;
    grid-row: 2;
    animation: zoomInRight ease-in 1.8s;
}

@media all and (orientation: portrait) {
    .qtv-3 {
        grid-template-rows: 10% 45% 45%;
    }

    .qtv-3 .qtv-end {
        grid-column: 1;
        grid-row: 3;
    }

    .qtv-3-top-title {
        grid-row: 1;
    }

    .qtv-3-top-title {
        align-items: center;
        font-size: 6vw;
    }
}

.qtv-3 .qtv-3-container {
    width: 70%;
    aspect-ratio: 1/1;
    margin-bottom: 5%;
    position: relative;
}

.qtv-3 .qtv-start .qtv-3-container {
    background-color: transparent;
    box-shadow: none;
}

.qtv-3 .qtv-start .qtv-3-container .bg-animetion {
    border-top-left-radius: 100vw;
    border-top-right-radius: 100vw;
}

.qtv-3 .qtv-3-container .qtv-3-image {
    width: 80%;
    margin: auto;
    display: block;
    border-radius: var(--rounded-pill);
    aspect-ratio: 1/1;
    object-fit: cover;
    background-color: var(--color-bg);
}

.qtv-3 .qtv-3-assets .qtv-3-text {
    text-align: center;
}

.qtv-3 .qtv-3-assets .qtv-3-text h2 {
    font-size: 3cqw;
}

.qtv-3 .qtv-3-assets .qtv-3-text h3 {
    font-size: 2.5cqw;
}

.qtv-3 .price-container .price {
    font-size: 2.5cqw;
}

.qtv-3 .price-container .price span {
    font-size: 2cqw;
}

.qtv-3 .price-container .price-title {
    font-size: 1.7cqw;
}

.qtv-3-bg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: hard-light;
    opacity: 0.3;
}


.qtv-3 .price-container {
    position: absolute;
    padding: 1%;
    top: unset;
    bottom: -5%;
    transform: translate(0, 0);
    inset-inline-end: unset;
    inset-inline-start: -4%;
    z-index: 2;
}

.qtv-3 .qtv-3-info {
    width: 40%;
    background-color: var(--color-main);
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    transform: translate(-40%, 10%);
    padding: 2%;
}

.qtv-3 .qtv-start .qtv-3-info {
    inset-inline-start: unset;
    inset-inline-end: 0;
    transform: translate(30%, 20%);
}

.qtv-3-info p {
    color: var(--color-gray);
    font-size: 1.2cqw;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.qtv-3-assets {
    position: absolute;
    width: 100%;
    left: 0;
}

.qtv-3 .qtv-start .qtv-3-container .price-container {
}

/*qtv3 animetion*/
.qtv-3 .qtv-start {
    animation: zoomInLeft ease-in 2s;
}

.qtv-3 .qtv-end {
    animation: zoomInRight ease-in 1.8s;
}

.qtv-3 .price-container {
    animation: flip ease-in 1s;
    animation-delay: 1.2s;
}

.qtv-3 .qtv-3-container .qtv-3-image {
    opacity: 0;
    animation: rotateIn forwards 1s;
    animation-delay: 1.4s;
}

/* animetion */
.bg-animetion {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    top: 0;
    inset-inline-start: 0;
}

.bg {
    animation: slide 3s ease-in-out infinite alternate;
    background-image: linear-gradient(-60deg, var(--color-secondry) 50%, var(--color-main) 50%);
    bottom: 0;
    left: -50%;
    opacity: 0.8;
    position: absolute;
    right: -50%;
    top: 0;
    z-index: -1;
}

.bg2 {
    animation-direction: alternate-reverse;
    animation-duration: 4s;
}

.bg3 {
    animation-duration: 5s;
}

.qtv-start .bg {
    rotate: -90deg;
}

@keyframes slide {
    0% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(25%);
    }
}

@media all and (orientation: portrait) {
    .qtv-3 .qtv-3-assets .qtv-3-text h2 {
        font-size: 5cqw;
    }

    .qtv-3 .qtv-3-assets .qtv-3-text h3 {
        font-size: 4cqw;
    }

    .qtv-3 .price-container .price {
        font-size: 4cqw;
    }

    .qtv-3 .price-container .price span {
        font-size: 3.5cqw;
    }

    .qtv-3 .price-container .price-title {
        font-size: 3cqw;
    }

    .qtv-3-info p {
        font-size: 2cqw;
    }

    .qtv-3 .qtv-3-info {
        width: 40%;
    }
}

/* qtv 3 fisrt-slide */
.qtv-3.fisrt-slide,
.qtv-seconde-slide {
    grid-template-columns: 1fr;
}

.qtv-3.fisrt-slide .qtv-3-container,
.qtv-seconde-slide .qtv-3-container {
    width: unset;
    height: 80%;
}

.qtv-3.fisrt-slide .qtv-3-info,
.qtv-seconde-slide .qtv-3-info {
    width: 55%;
}

.qtv-3.fisrt-slide .qtv-3-info p,
.qtv-seconde-slide .qtv-3-info p {
    font-size: 2cqw;
}

.qtv-3.fisrt-slide .qtv-end {
    grid-column: 1;
}


@media all and (orientation: portrait) {

    .qtv-3.fisrt-slide,
    .qtv-seconde-slide {
        grid-template-rows: 10% 1fr;
    }


    .qtv-3:is(.qtv-seconde-slide, .fisrt-slide) .qtv-3-container {
        height: unset;
        width: 80%;
    }

    .qtv-3:is(.qtv-seconde-slide, .fisrt-slide) .qtv-3-info {
        width: 40%;
    }

    .qtv-3:is(.fisrt-slide) .qtv-3-info {
        transform: translate(-12%, 24%);
    }

    .qtv-3:is(.qtv-seconde-slide, .fisrt-slide) .qtv-3-info p {
        font-size: 3.5cqw;
    }

    .qtv-3:is(.qtv-seconde-slide, .fisrt-slide) .price-container .price-title {
        font-size: 4cqw;
    }

    .qtv-3:is(.qtv-seconde-slide, .fisrt-slide) .price-container .price {
        font-size: 6cqw;
    }

    .qtv-3:is(.qtv-seconde-slide, .fisrt-slide) .price-container .price span {
        font-size: 5cqw;
    }

    .qtv-3:is(.qtv-seconde-slide, .fisrt-slide) .qtv-3-assets .qtv-3-text h3 {
        font-size: 6cqw;
    }

    .qtv-3:is(.qtv-seconde-slide, .fisrt-slide) .qtv-3-assets .qtv-3-text h2 {
        font-size: 8cqw;
    }

    .qtv-3.fisrt-slide .qtv-end {
        grid-row: 2;
    }
}


/*qtv-4 */
.qtv.qtv-4 {
    grid-template-columns: 60% 40%;
}

.qtv-4 .qtv-start {
    background-color: var(--color-main);
    border-radius: 0 calc(var(--rounded-secondry) * 7) calc(var(--rounded-secondry) * 7) 0;
    display: flex;
    padding: 4%;
    transform: translateX(-100%);
    animation: showQtv4Start 2s forwards;
    animation-delay: calc(var(--cat-time));
    z-index: 0;
    height: 100vh;
    box-sizing: border-box;
}

.qtv-4 .qtv-end {
    position: relative;
}

@keyframes showQtv4Start {
    to {
        transform: translateX(0%);
    }
}

.qtv-4-list-container {
    width: 90%;
    margin-top: 4%;
    display: flex;
    flex-direction: column;
}

.qtv-4-title {
    font-size: 4cqw
}

.qtv-4-des {
    font-size: 1.2cqw;
}

.qtv-4-list-container .qtv-4-list {
    overflow: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    --mask: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 78%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 0) 100% 50% / 100% 120% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    height: 100%;
}

.qtv-4-list-container .qtv-4-list li {
    display: flex;
    align-items: center;
    gap: 2%;
    margin-top: 3%
}

.qtv-4-list-container .qtv-4-list li:last-child {
    margin-bottom: 10%;
}

.qtv-4-list-container .qtv-4-list li .qtv-4-img-name {
    display: flex;
    align-items: center;
    gap: 2%;
    overflow: hidden;
}

.qtv-4-list-container .qtv-4-list li .qtv-4-img-name img {
    width: 20%;
    border-radius: var(--rounded-pill);
    overflow: hidden;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.qtv-4-list-container .qtv-4-list li .qtv-4-img-name h2 {
    white-space: nowrap;
    font-size: 2cqw;
}

.qtv-4-extra-info {
    font-size: 1.5cqw;
}

.qtv-4-list-container .qtv-4-list li .price-container {
    padding: 0;
}

.qtv-4-list-container .qtv-4-list li .price-container .price {
    font-size: 2cqw;
}

.qtv-4-list-container .qtv-4-list li .price-container .price span {
    font-size: 1.5cqw;
}

.qtv-4-Bigimage-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.qtv-4-Bigimage-container img {
    width: 100%;
    height: 100%;
    clip-path: circle(40%);
}

.qtv-4-Bigimage-container .qtv-4-btgimage-title {
    height: 20%;
    font-size: 1.8cqw;
    display: flex;
    justify-content: center;
    align-items: start;
}

.qtv-4 .qtv-end {
    transform: scale(0);
    opacity: 0;
    animation: showQtv4end 2s forwards;
    animation-delay: calc(var(--cat-time));
}

@keyframes showQtv4end {
    to {
        transform: scale(100%);
        opacity: 1;
    }
}

.qtv-4 {
    background-color: var(--color-accent);
}

:root {
    --cat-time: 2s;
}

.qtv-4-cat-name {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-accent);
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4cqw;
    animation: hideCat 3s forwards;
    animation-delay: var(--cat-time);
}

@keyframes hideCat {
    to {
        opacity: 0;
        left: -50%;
        top: -50%;
        filter: blur(100px);
    }
}

.area {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
}

.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}


@keyframes animate {

    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.qtv-4-btgimage-title .price-container {
    position: absolute;
    top: 6%;
    right: 5%;
    padding: 2%;
}

.qtv-4-btgimage-title .price-container .price {
    font-size: 5vw;
}

.qtv-4-btgimage-title .price-container :is(.price span, .price::after) {
    font-size: 3.5vw;
    top: 22%;
    inset-inline-end: 15%;
    
}

@media all and (orientation: portrait) {
    .qtv-4-btgimage-title .price-container .price {
        font-size: 7vw;
    }

    .qtv-4-btgimage-title .price-container :is(.price span, .price::after) {
        font-size: 6vw;
    }

    .qtv-4 .qtv-start {
        transform: translateX(0) translateY(-100%);
        height: 100%;
    }


    .qtv.qtv-4 {
        grid-template-columns: 1fr;
        grid-template-rows: 50% 50%;
    }

    .qtv-4 .qtv-start {
        background-color: var(--color-main);
        border-radius: 0 0 calc(var(--rounded-secondry) * 7) calc(var(--rounded-secondry) * 7);
    }

    .qtv-4-Bigimage-container img {
        height: 81%;
    }

    .qtv-4-Bigimage-container .qtv-4-btgimage-title {
        font-size: 4cqw;
    }

    .qtv-4-list-container .qtv-4-list li .qtv-4-img-name h2 {
        font-size: 5cqw;
    }

    .qtv-4-extra-info {
        font-size: 4cqw;
    }

    .qtv-4-list-container .qtv-4-list li .price-container .price {
        font-size: 5cqw;
    }

    .qtv-4-list-container .qtv-4-list li .price-container .price span {
        font-size: 4cqw;
    }

    .qtv-4-title {
        font-size: 8cqw;
    }

    .qtv-4-des {
        font-size: 2.5cqw;
    }
}

/* qtv 5 */
.qtv-5 {
    grid-template-columns: 60% 40%;
    background-color: var(--color-accent-dark);
    background-blend-mode: color-dodge;
}


.qtv-5-small-items-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.qtv-5-small-items {
    margin: 0;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    gap: 3%;
    list-style: none;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.qtv-5-small-item {
    width: calc(100% / 3 - 3%);
    margin-bottom: 2%;
    aspect-ratio: 1/1;
    text-align: center;
}

.qtv-5-small-item .qtv-5-sm-img-con {
    position: relative;
    width: fit-content;
    width: 100%;
}

.qtv-5-small-item img {
    border-radius: var(--rounded-pill);
    width: 80%;
    display: block;
    margin: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    background-color: var(--color-bg);
}

.qtv-5 .price-container {
    position: absolute;
    padding: 0%;
    top: 0;
    inset-inline-end: 0;
}

.qtv-5 .price-container2 {
    font-size: 2vw;
    position: unset;
}

.qtv-5 .price-container2 span {
    font-size: 1.3vw;
    margin-bottom: 10%;
}

@media all and (orientation: portrait) {
    .qtv-5 .price-container2 {
        font-size: 4vw;
    }

    .qtv-5 .price-container2 span {
        font-size: 3vw;
    }

}

.qtv-5 .price-container .price {
    font-size: 2cqw;
}

.qtv-5-big-item .price-qtv5-container .price {
    font-size: 4vw;
}

.qtv-5-big-item .price-qtv5-container .price span {
    font-size: 3vw !important;
}

@media all and (orientation: portrait) {
    .qtv-5-big-item .price-qtv5-container .price {
        font-size: 8vw !important;
    }

    .qtv-5-big-item .price-qtv5-container .price span {
        font-size: 6vw !important;
    }

}

.qtv-5 .price-container .price span {
    font-size: 1.5cqw;
}

.qtv-5 .price-container .price-title {
    font-size: 1.4cqw;
    top: -18%;
    inset-inline-start: -6%;
}

.qtv-5-small-item h3 {
    font-size: 1.7cqw;
    margin-top: 3%;
}

.qtv-5-small-item h5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 1.2cqw;
}

.qtv-5 .qtv-end {
    display: flex;
    align-items: center;
    justify-content: center;
}
.qtv-5 .qtv-end .swiper-slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.qtv-5-big-image-container {
    width: 70%;
    position: relative;
}

.qtv-5-big-image-container img {
    width: 100%;
    border-radius: var(--rounded-main);
    aspect-ratio: 1/1;
    object-fit: cover;
    background-color: #FFFFFF;
    border-radius: 100%;
}

.qtv-5-image-box-info {
    position: absolute;
    bottom: 0;
    width: 110%;
    max-height: 40%;
    background: rgba(33, 33, 33, 0.73) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
   
    left: 50%;
    transform: translateX(-50%);
}
.qtv-5-image-box-info-inner{
    display: flex;
    gap: 5%;
    flex-wrap: wrap;
    
}

/*.qtv-5-image-box-info > div {*/
/*    max-width: 30%;*/
/*}*/

.qtv-5-image-box-info * {
    color: #FFFFFF;
}

.qtv-5-image-box-info h3 {
    font-size: 1.6cqw;
}
.qtv-5-image-box-info .qtv-5-big-name{
    font-size: 2cqw;    
}

.qtv-5-image-box-info h2 {
    font-size: 1.7cqw;
}

.qtv-5-image-box-info p {
    font-size: 1.1cqw;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.qtv-5-badge {
    position: absolute;
    top: 1%;
    inset-inline-start: 10%;
    background: rgba(33, 33, 33, 0.73) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 2%;
    border-radius: 100vw;
    rotate: -27deg;
}

.qtv-5-badge h4 {
    font-size: 1.5cqw;
    color: #ffff;
}

.qtv-5-badge.just-num h4 {
    font-size: 2cqw;
}
.qtv-end .qtv-5-badge.just-num h4 {
    font-size: 4cqw;
}

.qtv-5-badge.just-num {
    rotate: 0deg;
}


/* Animation for entering items */
:root {
    --qtv-5-slider-enter-duration: 1s;
    --qtv-5-slider-exit-duration: 1s;
}

.item-entering {
    animation: slideIn var(--qtv-5-slider-enter-duration) ease forwards;
}

/* Animation for leaving items */
.item-leaving {
    animation: slideOut var(--qtv-5-slider-exit-duration) ease forwards;
}

/* Slide in animation */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide out animation */
@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-50px);
    }
}

@media all and (orientation: portrait) {
    .qtv-5 {
        grid-template-columns: 100%;
        grid-template-rows: 48% 50%;
        gap: 0;
    }


    .qtv-5 .qtv-start {
        grid-row: 2;
    }

    .qtv-5 .qtv-start {
        padding: 3%
    }

    .qtv-5-image-box-info {
        width: 100%;
    }

    .qtv-5-image-box-info h3 {
        font-size: 3cqw;
    }
    .qtv-5-image-box-info .qtv-5-big-name{
        font-size: 4cqw;
    }

    .qtv-5-image-box-info h2 {
        font-size: 4cqw;
    }

    .qtv-5-image-box-info p {
        font-size: 3cqw;
    }

    .qtv-5-small-item h3 {
        font-size: 4cqw;
    }

    .qtv-5-small-item h5 {
        font-size: 3cqw;
    }

    .qtv-5 .price-container .price {
        font-size: 4.5cqw;
    }

    .qtv-5 .price-container .price span {
        font-size: 3.5cqw;
    }

    .qtv-5 .price-container .price-title {
        font-size: 3.2cqw;
    }

    .qtv-5-badge h4 {
        font-size: 3cqw;
        color: #ffff;
    }

    .qtv-5-badge.just-num h4 {
        font-size: 4cqw;
    }
    .qtv-end .qtv-5-badge.just-num h4 {
        font-size: 6cqw;
    }
}

/*qtv 6 */
.qtv-6 {
    grid-template-columns: 1fr;
    padding: 0;
    position: relative;
    overflow: hidden;
    background-color: #efefef;
}

/* Part 1 Styles */
.qtv-6-part-1 {
    height: 40%;
    background-color: #efefef;
    transform: skewY(-10deg);
    transform-origin: bottom left;
    position: relative;
    z-index: 3;
    overflow: hidden;
}

/* Part 2 Styles */
.qtv-6-part-2 {
    height: 48%;
    background: linear-gradient(231deg, var(--color-main) 0%, var(--color-main) 64%, var(--color-main-dark) 100%);
    transform: skewY(-10deg);
    transform-origin: bottom left;
    position: relative;
    z-index: 2;
}

/* Part 3 Styles */
.qtv-6-part-3 {
    height: 40%;
    transform-origin: bottom left;
    position: relative;
    z-index: 1;
    transform: skewY(-10deg);
    overflow: hidden;
}

/* Common Part Styles */
.qtv-6-part-1::after,
.qtv-6-part-3::after {
    content: "";
    display: block;
    background-color: #efefef;
    background-blend-mode: darken;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    opacity: 0.8;
}

/* Product Styles */
.qtv-6-product {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    gap: 1%;
}

.qtv-6-product img {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 0%;
    box-sizing: border-box;
    border-radius: 100vw;
}

/* Product Info Styles */
.qtv-6-product-info {
    position: relative;
}

.qtv-6-product-info .price-container {
    position: absolute;
    top: 0;
    padding: 3%;
}

.qtv-6-product-info .price {
    font-size: 2.5vw;
}

.qtv-6-product-info .price span {
    font-size: 2.2vw;
}

/* Part Content Styles */
.qtv-6-part > div {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    transform: skewY(10deg);
}

.qtv-6-product-name {
    font-size: 3vw;
    white-space: nowrap;
}


/* Description Styles */
.qtv-6 .qtv-6-des {
    font-size: 2.5vw;
}

.qtv-6 .qtv-6-part-1 .qtv-6-des {
    margin-top: 10%;
    margin-inline-start: 2%;
    animation: fadeInLeft 0.7s ease-in;
}

.qtv-6 .qtv-6-part-3 > div {
    justify-content: end;
}

.qtv-6 .qtv-6-part-2 > div {
    animation: fadeIn 1s ease-in;
}

.qtv-6 .qtv-6-part-3 .qtv-6-des {
    text-align: end;
    margin-bottom: 10%;
    margin-inline-end: 2%;
    animation: fadeInRight 0.7s ease-in;
}

/* Swiper Styles */
.ks-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4vw;
    text-align: center;
}

/*qtv 7 */
.qtv-7 img {
    animation: zoomInUp 1.5s ease-in;
}

/* qtv 11 */
.qtv-11 {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.qtv-11-inner {
    height: 90%;
    width: 90%;
}

.qtv-11 .swiper-slide {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qtv-11-slide {
    border-radius: calc(var(--rounded-main) * 2);
    position: relative;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
}

.ripple-container {
    position: absolute;
    width: 30%;
    aspect-ratio: 1/1;
    right: 0;
}

.ripple {
    position: absolute;
    width: 30%;
    aspect-ratio: 1/1;
    border: 1rem solid rgba(0, 255, 0, 0.6);
    border-radius: 50%;
    animation: pulseRing 2s infinite ease-out;
}

.ripple-container .ripple:nth-child(1) {
    border-color: red;
    opacity: 0;

}

.ripple-container .ripple:nth-child(2) {
    border-color: blue;
    opacity: 0;

}

.ripple-container .ripple:nth-child(3) {
    border-color: green;
    opacity: 0;


}

@keyframes pulseRing {
    0% {
        transform: scale(0.2);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.qtv-11 .swiper-slide .slide-1 {
    background-color: color-mix(in srgb, #e14033 50%, transparent);
    width: 50%;
    height: 100%;
}

.qtv-11:has(.slide-1-container.swiper-slide-active) {
    background: linear-gradient(0deg, color-mix(in srgb, #e14033, white 70%) 0%, #fff 100%);
}

.qtv-11:has(.slide-1-container.swiper-slide-active) #blob1 {
    background: radial-gradient(circle, color-mix(in srgb, #33e140 80%, black), color-mix(in srgb, #33e140 30%, white));
}

.qtv-11:has(.slide-1-container.swiper-slide-active) #blob2 {
    background: radial-gradient(circle, color-mix(in srgb, #4033e1 80%, black), color-mix(in srgb, #4033e1 30%, white));
}

.qtv-11:has(.slide-1-container.swiper-slide-active) .cannet-color {
    background-color: #e14033;
}

.qtv-11 .swiper-slide .slide-2 {
    background-color: color-mix(in srgb, #f1b605 50%, transparent);
    width: 80%;
    height: 100%;
}

.qtv-11:has(.slide-2-container.swiper-slide-active) {
    background: linear-gradient(0deg, color-mix(in srgb, #f1b605, white 70%) 0%, #fff 100%);
}

.qtv-11:has(.slide-2-container.swiper-slide-active) #blob1 {
    background: radial-gradient(circle, color-mix(in srgb, #05f1b6 80%, black), color-mix(in srgb, #05f1b6 30%, white));
}

.qtv-11:has(.slide-2-container.swiper-slide-active) #blob2 {
    background: radial-gradient(circle, color-mix(in srgb, #b605f1 80%, black), color-mix(in srgb, #b605f1 30%, white));
}

.qtv-11:has(.slide-2-container.swiper-slide-active) .cannet-color {
    background-color: #f1b605;
}

.qtv-11 .swiper-slide .slide-3 {
    background-color: color-mix(in srgb, #196edf 50%, transparent);
    width: 80%;
    height: 100%;
}

.qtv-11:has(.slide-3-container.swiper-slide-active) {
    background: linear-gradient(0deg, color-mix(in srgb, #196edf, white 70%) 0%, #fff 100%);
}

.qtv-11:has(.slide-3-container.swiper-slide-active) #blob1 {
    background: radial-gradient(circle, color-mix(in srgb, #df196e 80%, black), color-mix(in srgb, #df196e 30%, white));
}

.qtv-11:has(.slide-3-container.swiper-slide-active) #blob2 {
    background: radial-gradient(circle, color-mix(in srgb, #b605f1 80%, black), color-mix(in srgb, #b605f1 30%, white));
}

.qtv-11:has(.slide-3-container.swiper-slide-active) .cannet-color {
    background-color: #196edf;
}


.qtv-11 .swiper-slide .qtv-11-product-container {
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.qtv-11 .swiper-slide .price-container:not(.price-container2) {
    position: absolute;
    right: 10%;
    bottom: -3%;
    z-index: 2;
}

.qtv-11 .swiper-slide .price-container .price {
    font-size: 4cqw;
}

.qtv-11 .swiper-slide .price-container .price::after {
    font-size: 3.2cqw;
}

.qtv-11 .swiper-slide .price-container .price span {
    font-size: 3.2cqw;
}

.qtv-11 .swiper-slide .qtv-11-product-image {
    width: 100%;
    border-radius: var(--rounded-pill);
    aspect-ratio: 1/1;
    background-color: #ebebeb;
    padding: 2%;
}

.qtv-11 .swiper-slide .qtv-11-product-image img {
    width: 100%;
    height: 100%;
    border-radius: var(--rounded-pill);
}

.qtv-11-product-text {
    font-size: 3cqw;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 10%;
    color: #fff;
    white-space: nowrap;
}

.slide-2 .qtv-11-product-text,
.slide-3 .qtv-11-product-text {
    margin-bottom: 3%;
}

.qtv-11 .qtv-11-all-size-container h3 {
    font-size: 1.7cqw;
}

.qtv-11 .qtv-11-all-size-container .price-container2 {
    font-size: 2cqw;
}

.qtv-11 .qtv-11-all-size-container .price-container2 span {
    font-size: 1.4cqw;
    margin-bottom: 10%;
}


.qtv-11 .qtv-11-all-size-container h2 {
    font-size: 1.8cqw;
}

.qtv-11 .qtv-11-all-size-container {
    position: absolute;
    width: 70%;
    right: -30%;
    top: 50%;
    transform: translate(0%, -50%);
    z-index: 2;
    min-width: 30%;
}

.size {
    display: flex;
    align-items: center;
    gap: 4%;

}

.size * {
    white-space: nowrap;
}

.slide-2 .qtv-11-all-size-container,
.slide-3 .qtv-11-all-size-container {
    width: 50%;
    right: -10%;
    transform: translate(0%, 0%);
}

.qtv-11 .qtv-11-extra-info {
    background-color: #ebebeb;
    width: 40%;
    /*aspect-ratio: 1/1;*/
    padding: 1%;
    position: absolute;
    bottom: -4%;
    left: -10%;
    transform: translate(0, -0);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 5%;
    max-height: 40%;
}

.slide-2 .qtv-11-extra-info,
.slide-3 .qtv-11-extra-info {
    width: 30%;
}

.qtv-11 .qtv-11-extra-info * {
    color: #212121;
}

.qtv-11-extra-info-rate * {
    font-size: 4cqw;
}

.qtv-11-aminity {
    gap: 5%;
}

.qtv-11-aminity img {
    width: 17%;
    background-color: #fff;
    border-radius: var(--rounded-pill);
}

.qtv-11-extra-info-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 1.5cqw;
}

.qtv-11 .price-container {
    padding: 2rem;
}

.qtv-11-back-animetion {
    width: 100vw;
    height: 100vh;
    position: absolute;
    right: 0;
    animation: qtv-11-anim 4s infinite;
}


.qtv-11 .background-animation {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.slide-11-symbol {
    width: 24%;
    height: 42%;
    position: absolute;
    right: -10%;
    top: -5%;
    rotate: -6deg;
}

.slide-11-symbol img {
    width: 100%;
    height: 100%;
    filter: brightness(102%);
}


.qtv-11 .blur-blob {
    position: absolute;
    width: 30%;
    aspect-ratio: 1/1;
    filter: blur(50px);
    opacity: 0.7;
    border-radius: 100vw;
}

.blur-blob#blob2 {
    animation-delay: 5s;
    animation: floatAround 20s ease-in-out infinite reverse;
    top: 10%;
    left: 10%;
}

.blur-blob#blob1 {
    animation: floatAroundReverse 25s ease-in-out infinite;
    top: 80%;
    left: 90%;
}


@keyframes moveBlobs {
    0% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(50vw, 50vh) scale(1.2);
    }

    50% {
        transform: translate(-50vw, -50vh) scale(0.8);
    }

    75% {
        transform: translate(30vw, -30vh) scale(1.1);
    }

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

@keyframes floatAround {
    0% {
        top: 10%;
        left: 10%;
        transform: scale(1);
    }

    20% {
        top: 80%;
        left: 15%;
        transform: scale(1.1);
    }

    40% {
        top: 60%;
        left: 70%;
        transform: scale(0.9);
    }

    60% {
        top: 30%;
        left: 90%;
        transform: scale(1.2);
    }

    80% {
        top: 5%;
        left: 50%;
        transform: scale(1);
    }

    100% {
        top: 10%;
        left: 10%;
        transform: scale(1);
    }
}

@keyframes floatAroundReverse {
    0% {
        top: 80%;
        left: 90%;
        transform: scale(1);
    }

    20% {
        top: 10%;
        left: 85%;
        transform: scale(1.1);
    }

    40% {
        top: 30%;
        left: 30%;
        transform: scale(0.9);
    }

    60% {
        top: 70%;
        left: 5%;
        transform: scale(1.2);
    }

    80% {
        top: 95%;
        left: 50%;
        transform: scale(1);
    }

    100% {
        top: 80%;
        left: 90%;
        transform: scale(1);
    }
}


@media all and (orientation: portrait) {
    .qtv-11 .swiper-slide .slide-1 {
        width: 100%;
        height: 60%;
    }

    .qtv-11 .qtv-11-extra-info {
        left: -3%;
    }

    .qtv-11-extra-info-rate * {
        font-size: 7cqw;
    }

    .qtv-11-extra-info-text {
        font-size: 3cqw;
    }

    .qtv-11-product-text {
        font-size: 6cqw;
    }

    .qtv-11 .qtv-11-all-size-container h3 {
        font-size: 4cqw;
    }

    .qtv-11 .qtv-11-all-size-container h2 {
        font-size: 3.2cqw;
    }

    .qtv-11 .qtv-11-all-size-container {
        width: 89%;
        right: -4%;
        top: -17%;
    }

    .ripple-container {
        bottom: 0;
    }


    .qtv-11 .swiper-slide .price-container .price {
        font-size: 8cqw;
    }

    .qtv-11 .swiper-slide .price-container .price::after {
        font-size: 6.2cqw;
    }

    .qtv-11 .swiper-slide .price-container .price span {
        font-size: 6.2cqw;
    }

    /* slide 2 */
    .qtv-11 .swiper-slide .slide-2 {
        width: 80%;
        height: 66%;
    }

    .qtv-11 .swiper-slide .slide-3 {
        width: 90%;
        height: 60%;
    }

    .qtv-11 .slide-2 .qtv-11-all-size-container,
    .qtv-11 .slide-3 .qtv-11-all-size-container {
        width: 90%;
    }

    .slide-2 .qtv-11-extra-info,
    .slide-3 .qtv-11-extra-info {
        width: 50%;
    }

    .cannet-container {
        right: 8%;
        top: 10%;
    }

    .slide-11-symbol {
        width: 20%;
        height: 37%;
        right: 83%;
        top: 29%;
    }

    .qtv-11 .qtv-11-all-size-container .price-container2 {
        font-size: 6vw;
    }

    .qtv-11 .qtv-11-all-size-container .price-container2 span {
        font-size: 4vw;
    }

}

/* qtv-11 end */

/* Portrait Mode Styles */
@media all and (orientation: portrait) {
    .ks-swiper .swiper-slide {
        font-size: 12vw;
    }

    .qtv-6-part-1 {
        height: 25%;
    }

    .qtv-6-part-2 {
        height: 55%;
    }

    .qtv-6-part-3 {
        height: 29%;
    }

    .qtv-6-part {
        width: 100%;
    }

    .qtv-6-product-name {
        font-size: 6vw;
    }

    .qtv-6-product-info .price {
        font-size: 6vw;
    }

    .qtv-6-product-info .price span {
        font-size: 5vw;
    }

    .qtv-6 .qtv-6-des {
        font-size: 6vw;
    }
}

/* qtv-12 */
.qtv-12 {
    background-color: gray;
    display: flex;
    overflow: hidden;
    position: relative;
}

.qtv-12-side-start {
    width: 50%;
    height: 100%;
}

.qtv-12-side-end {
    background: linear-gradient(90deg, #49b7fb 55%, color-mix(in srgb, #49b7fb 90%, black) 100%);
    width: 50%;
    height: 100%;
}

.qtv-12-side {
    position: relative;
    overflow: hidden;
}

.qtv-12-side::after {
    /* content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;  
background-image: url('../../public/toppings/wallTextur.jpg');
background-size: cover;
background-position: center;
mix-blend-mode: multiply;
z-index: 1;
opacity: 0.2;
background-size: 20%; */
}

.qtv-12-side .qtv-12-side {
    position: relative;
}

.qtv-12-side .qtv-12-product-container {
    position: absolute;
    background-color: #ccc;
    width: 50%;
    aspect-ratio: 1/1;
    border-radius: 100%;
    overflow: hidden;
    padding: 1%;
}

.qtv-12-side-start .qtv-12-product-container {
    left: 100%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

@keyframes product-qtv-12-Start {
    from {
        top: -100%
    }

    to {
        top: 50%;
    }
}

.qtv-12-side-end .qtv-12-product-container {
    right: 100%;
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 2;
}

@keyframes product-qtv-12-end {
    from {
        top: 150%
    }

    to {
        top: 50%;
    }
}

.qtv-12-side .qtv-12-product-container img {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: #FFFFFF;
}

.qtv-12-toppings {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.qtv-12-side-start .qtv-12-toppings img {
    filter: drop-shadow(4px 3px 2px #00000041);
}

.qtv-12-toppings img {
    position: absolute;
    width: 20%;
    z-index: 2;
}

.qtv-12-toppings .onion {
    width: 12%;
    animation: onion 1s forwards steps(5);
}

@keyframes onion {
    0% {
        left: -10%;
        top: 10%;
    }

    100% {
        left: 2%;
        top: 3%;
    }
}

.qtv-12-toppings .broccoli-1 {
    transform: rotate(15deg);
    width: 16%;
    animation: broccoli-1 1s forwards steps(5), broccoli-1-part1 1s infinite 1s steps(6);
}

@keyframes broccoli-1 {
    0% {
        bottom: -10%;
        left: 15%;
    }

    100% {
        bottom: 4%;
        left: 7%;
    }
}

@keyframes broccoli-1-part1 {
    0% {
        bottom: 4%;
        left: 7%;
        transform: rotate(15deg);
    }

    20% {
        bottom: 4.3%;
        left: 7.4%;
        transform: rotate(13deg);
    }

    40% {
        bottom: 3.8%;
        left: 6.8%;
        transform: rotate(17deg);
    }

    60% {
        bottom: 4.1%;
        left: 7.2%;
        transform: rotate(14deg);
    }

    80% {
        bottom: 3.9%;
        left: 7.1%;
        transform: rotate(16deg);
    }

    100% {
        bottom: 4%;
        left: 7%;
        transform: rotate(15deg);
    }
}

.qtv-12-toppings .broccoli-2 {
    bottom: 5%;
    left: 19%;
    width: 9%;
    animation: broccoli-2 1s forwards steps(6), broccoli-2-part2 1s infinite 1s steps(2);
}

@keyframes broccoli-2 {
    0% {
        bottom: -10%;
        left: 15%;
    }

    100% {
        bottom: 5%;
        left: 16%;
    }
}

@keyframes broccoli-2-part2 {
    0% {
        bottom: 5%;
        left: 16%;
        transform: rotate(40deg);
    }

    25% {
        bottom: 4.7%;
        left: 16.3%;
        transform: rotate(38deg);
    }

    50% {
        bottom: 5.2%;
        left: 15.8%;
        transform: rotate(42deg);
    }

    75% {
        bottom: 4.9%;
        left: 16.1%;
        transform: rotate(39deg);
    }

    100% {
        bottom: 5%;
        left: 16%;
        transform: rotate(40deg);
    }
}


.qtv-12-toppings .salt {
    transform: rotate(40deg);
    width: 20%;
    animation: salt 1.3s forwards steps(10), salt-rotate 2s infinite 1s steps(6);
}

@keyframes salt {
    0% {
        top: 35%;
        left: -100%;
    }

    100% {
        top: 30%;
        left: 30%;
    }
}

@keyframes salt-rotate {
    0% {
        transform: rotate(40deg);
    }

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

.qtv-12-toppings .bell {
    animation: bell 1s forwards steps(7), bell-rotate 0.7s infinite 1s steps(2);
    transform: rotate(40deg);
    width: 14%;
}

@keyframes bell {
    0% {
        bottom: 30%;
        right: 0%;
    }

    100% {
        bottom: 10%;
        right: 20%;
    }
}

@media all and (orientation: portrait) {
    @keyframes bell {
        0% {
            bottom: 30%;
            right: 0%;
        }

        100% {
            bottom: 20%;
            right: 4%;
        }
    }
}

@keyframes bell-rotate {
    0% {
        transform: rotate(40deg);
    }

    50% {
        transform: rotate(50deg);
    }

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

.qtv-12-toppings .mushroom {
    transform: rotate(40deg);
    width: 12%;
    animation: mushroom 1s forwards steps(5);
}

@keyframes mushroom {
    0% {
        top: -20%;
        right: -40%;
    }

    100% {
        top: 10%;
        right: 27%;
    }
}

.qtv-12-toppings .green-pepper {
    transform: rotate(40deg);
    width: 20%;
    animation: green-pepper 1s forwards steps(6), green-pepper-rotate 1s infinite 1s steps(5);
}

@keyframes green-pepper {
    0% {
        left: -10%;
        bottom: -30%;
    }

    100% {
        left: 10%;
        bottom: 30%;
    }
}

@keyframes green-pepper-rotate {
    0% {
        transform: rotate(40deg);
    }

    50% {
        transform: rotate(30deg);
    }

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

.qtv-12-toppings .kaho {
    width: 17%;
    animation: kaho 1s forwards steps(6), kaho-rotate 1s infinite 1s steps(4);
}

@keyframes kaho {
    0% {
        left: 100%;
        top: 2%;
    }

    100% {
        left: 2%;
        top: 3%;
    }
}

@keyframes kaho-rotate {
    0% {
        transform: rotate(-30deg);
    }

    50% {
        transform: rotate(-20deg);
    }

    100% {
        transform: rotate(-30deg);
    }
}

.qtv-12-toppings .red-papper {
    animation: red-papper 1s forwards steps(5), red-papper-rotate 1s infinite 1s steps(5);
    width: 20%;
}

@keyframes red-papper {
    0% {
        top: 30%;
        left: 0%;
    }

    100% {
        top: 30%;
        left: 30%;
    }
}

@keyframes red-papper-rotate {
    0% {
        transform: rotate(40deg);
    }

    50% {
        transform: rotate(50deg);
    }

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

.qtv-12-toppings .pepper {
    width: 24%;
    animation: papper 1s forwards steps(6);
}

@keyframes papper {
    0% {
        bottom: -10%;
        right: -20%;
    }

    100% {
        bottom: 10%;
        right: 20%;
    }
}

@media all and (orientation: portrait) {
    @keyframes papper {
        0% {
            bottom: -10%;
            right: -20%;
        }

        100% {
            bottom: 10%;
            right: 3%;
        }
    }
}

.qtv-12-toppings .bread-1 {
    bottom: 4%;
    left: 7%;
    transform: rotate(15deg);
    width: 16%;
}

.qtv-12-toppings .bread-1 {
    bottom: 4%;
    left: 7%;
    width: 16%;
}


.qtv-12-toppings .bread-1 {
    width: 20%;
    animation: bread-1 0.8s forwards steps(6);
    z-index: 2;
}

.qtv-12-toppings .bread-2 {
    animation: bread-2 1s forwards steps(6);
    width: 18%;
    z-index: 3;
}

.qtv-12-toppings .bread-3 {
    animation: bread-3 1.2s forwards steps(6);
    width: 15%;
    z-index: 4;
}

@keyframes bread-1 {
    0% {
        left: 7%;
        bottom: -30%;
        transform: rotate(0deg);
    }

    100% {
        left: 7%;
        bottom: 0%;
        transform: rotate(15deg);
    }
}

@keyframes bread-2 {
    0% {
        left: 7%;
        bottom: -30%;
        transform: rotate(0deg);
    }

    100% {
        bottom: 2%;
        left: 10%;
        transform: rotate(30deg);
    }
}

@keyframes bread-3 {
    0% {
        left: 7%;
        bottom: -30%;
        transform: rotate(0deg);
    }

    100% {
        bottom: 0%;
        left: 13%;
        transform: rotate(45deg);
    }
}

.pasta {
    animation: pasta 1s forwards steps(5), pasta-rotate 1s infinite 1s steps(4);
    transform: rotate(40deg);
    width: 12%;
}

@keyframes pasta {
    0% {
        top: 10%;
        right: -27%;
    }

    100% {
        top: 10%;
        right: 27%;
    }
}

@media all and (orientation: portrait) {
    @keyframes pasta {
        0% {
            top: 10%;
            right: -27%;
        }

        100% {
            top: 10%;
            right: 7%;
        }
    }
}

@keyframes pasta-rotate {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(180);
    }

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

.qtv-12-touch-hand {
    position: absolute;
    height: 90%;
    z-index: 10;
    transform: translateX(-50%);
    left: 50%;
    bottom: -100%;
    animation: touch-animetion 1s forwards 1.5s, hide-all 1s forwards 2.2s;
}

@keyframes touch-animetion {
    from {
        bottom: -100%;
    }

    to {
        bottom: -45%;
    }
}

.qtv-12-side-start .qtv-12-product-container {
    animation: product-qtv-12-Start 1s forwards steps(30), hide-qtv-12-product-1 2s forwards 3.5s;
}

.qtv-12-side-end .qtv-12-product-container {
    animation: product-qtv-12-end 1s forwards steps(30), hide-qtv-12-product-2 2s forwards 3.5s;
}

.qtv-12-toppings {
    animation: hide-all 1s forwards 2.2s;
}

@keyframes hide-all {
    from {
        display: block;
    }

    to {
        display: none;
    }
}

@keyframes hide-qtv-12-product-1 {
    from {
        left: 100%;
    }

    to {
        left: -100%;
    }
}

@keyframes hide-qtv-12-product-2 {
    from {
        right: 100%;
    }

    to {
        right: -100%;
    }
}

.qtv-12-product-info, .qtv-12-product-info * {
    text-align: center;
}

.qtv-12-product-all-size .size {
    justify-content: space-between;
    width: 50%;
    margin: auto;
}

.qtv-12-product-all-size .size h3 {
    text-align: justify;
    width: 65%;

}

.qtv-12-product-all-size .size .price-container2 {
    text-align: start;
    width: 35%;
}

.qtv-12-product-all-size .size .price-container2 {
    font-size: 3.2vw;
    aspect-ratio: unset;
}

.qtv-12-product-all-size .size .price-container2 span {
    font-size: 2.3vw;
    margin-bottom: 10%;
}

.qtv-12-product-info .qtv-12-product-info {
    font-size: 5vw;
}

.qtv-12-product-info .qtv-12-product-all-size {
    font-size: 2.5vw;
    filter: drop-shadow(2px 2px 0px #21212159);
}

.qtv-12-product-info .qtv-12-product-all-size h2 {
    color: #fff;
}

.qtv-12-product-name {
    font-size: 5vw;
    margin-top: 20%;
}

.qtv-12-side-end .qtv-12-product-name {
    animation: rith-to-left 2s forwards 3.2s;
}

.qtv-12-side-end .qtv-12-product-all-size {
    animation: left-to-rithe 2s forwards 3.2s;
}

.qtv-12-side-start .qtv-12-product-name {
    animation: left-to-rithe 2s forwards 3.2s;
}

.qtv-12-side-start .qtv-12-product-all-size {
    animation: rith-to-left 2s forwards 3.2s;
}

@keyframes rith-to-left {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes left-to-rithe {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@media all and (orientation: portrait) {
    .qtv-12 {
        flex-direction: column;
    }

    .qtv-12-side-start {
        width: 100%;
        height: 50%;
    }

    .qtv-12-side-end {
        width: 100%;
        height: 50%;
    }

    .qtv-12-side-start .qtv-12-product-container {
        left: 50%;
    }

    @keyframes product-qtv-12-Start {
        from {
            top: -100%
        }

        to {
            top: 100%;
        }
    }

    .qtv-12-side-end .qtv-12-product-container {
        right: 50%;
    }

    @keyframes product-qtv-12-end {
        from {
            top: 150%
        }

        to {
            top: 0%;
        }
    }

    .qtv-12-product-name {
        font-size: 9vw;
    }

    .qtv-12-product-info .qtv-12-product-all-size {
        font-size: 5vw;
    }

    @keyframes hide-qtv-12-product-1 {
        to {
            top: 100%;
        }
    }

    @keyframes hide-qtv-12-product-2 {
        to {
            top: -100%;
        }
    }

    @keyframes hide-qtv-12-product-1 {
        from {
            top: 100%;
        }

        to {
            top: -100%;
        }
    }

    @keyframes hide-qtv-12-product-2 {
        from {
            top: 0%;
        }

        to {
            top: 200%;
        }
    }

    .qtv-12-product-all-size .size .price-container2 {
        font-size: 6vw;
    }

    .qtv-12-product-all-size .size .price-container2 span {
        font-size: 4vw;
    }
}

.animated-cube-bg {
    position: absolute;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    font-family: sans-serif;
}

.animated-cube-bg__title {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4vw;
    z-index: 1;
}

.cube-item {
    position: absolute;
    width: 1%;
    aspect-ratio: 1/1;
    border: solid 0.15vw #ffff;
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: cube-anim 12s ease-in forwards infinite;
}

.cube-item:nth-child(2n) {
    border-color: #ffff;
}

.cube-item:nth-child(1) {
    top: 80%;
    left: 45%;
}

.cube-item:nth-child(2) {
    animation-delay: 1s;
    top: 40%;
    left: 25%;
}

.cube-item:nth-child(3) {
    animation-delay: 2s;
    top: 50%;
    left: 75%;
}

.cube-item:nth-child(4) {
    animation-delay: 4s;
    top: 10%;
    left: 90%;
}

.cube-item:nth-child(5) {
    animation-delay: 6s;
    top: 85%;
    left: 10%;
}

.cube-item:nth-child(6) {
    animation-delay: 8s;
    top: 10%;
    left: 50%;
}

@keyframes cube-anim {
    from {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }

    to {
        transform: scale(20) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}

.sun-orbit {
    width: 500%;
    height: 500%;
    position: absolute;
    overflow: hidden;
    top: -200%;
    left: -200%;
    animation: rotate-sun 111s linear infinite;
}

.sun-orbit .ray {
    width: 50%;
    height: 50%;
    position: absolute;
    background: #89f002;
    transform-origin: right bottom;
}

.sun-orbit .ray:nth-child(2n) {
    background: #00e988;
}

.ray1 {
    transform: rotate(18deg) skew(72deg);
}

.ray2 {
    transform: rotate(36deg) skew(72deg);
}

.ray3 {
    transform: rotate(54deg) skew(72deg);
}

.ray4 {
    transform: rotate(72deg) skew(72deg);
}

.ray5 {
    transform: rotate(90deg) skew(72deg);
}

.ray6 {
    transform: rotate(108deg) skew(72deg);
}

.ray7 {
    transform: rotate(126deg) skew(72deg);
}

.ray8 {
    transform: rotate(144deg) skew(72deg);
}

.ray9 {
    transform: rotate(162deg) skew(72deg);
}

.ray10 {
    transform: rotate(180deg) skew(72deg);
}

.ray11 {
    transform: rotate(198deg) skew(72deg);
}

.ray12 {
    transform: rotate(216deg) skew(72deg);
}

.ray13 {
    transform: rotate(234deg) skew(72deg);
}

.ray14 {
    transform: rotate(252deg) skew(72deg);
}

.ray15 {
    transform: rotate(270deg) skew(72deg);
}

.ray16 {
    transform: rotate(288deg) skew(72deg);
}

.ray17 {
    transform: rotate(306deg) skew(72deg);
}

.ray18 {
    transform: rotate(324deg) skew(72deg);
}

.ray19 {
    transform: rotate(342deg) skew(72deg);
}

.ray20 {
    transform: rotate(360deg) skew(72deg);
}

@keyframes rotate-sun {
    to {
        transform: rotate(360deg);
    }
}

.qtv-13 {
    position: relative;
}

.qtv-13-slider {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3 !important;
}

.qtv-13-product-container {
    width: 50%;
    position: relative;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qtv-13-product-image {
    width: 100%;
    aspect-ratio: 1/1;
    background-color: #ccc;
    overflow: visible;
    border-radius: 100%;
    padding: 2%;
}

.qtv-13-product-image img {
    border-radius: 100%;
    background-color: #ffff;
}

.qtv-13-product-name {
    font-size: 5vw;
    text-align: center;
    margin-bottom: 2%;
    color: white;
    text-shadow: -2px 2px 2px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(100%);
    transition: 0.7s;
    width: 140%;
    text-overflow: ellipsis;
    overflow: hidden;
}

.swiper-slide-active .qtv-13-product-name {
    opacity: 1;
    transform: translateY(0%);
}

.qtv-13 .price-container:not(.price-container2) {
    border: #ccc calc(var(--border-size) * 5) solid;
    position: absolute;
    right: -20%;
    bottom: 0;
}

.qtv-13 .price-container:not(.price-container2) .price {
    font-size: 4vw;
}

.qtv-13 .price-container:not(.price-container2) .price span {
    font-size: 3.3vw;
}

.qtv-13-all-size {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 125%;
    display: flex;
    flex-wrap: wrap;
    gap: 8%;
}

.qtv-13-all-size h3 {
    font-size: 1.8vw;
}

.qtv-13-all-size .price-container2 {
    font-size: 2vw;
}

.qtv-13-all-size .price-container2 span {
    font-size: 1.5vw;
    margin-bottom: 7%;
}

.swiper-slide-shadow-left,
.swiper-slide-shadow-right,
.swiper-slide-shadow {
    display: none !important;
    /* یا opacity: 0; */
}

.withe-polygan {
    background-color: #fff;
    width: 65%;
    height: 100%;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    clip-path: polygon(54% 0, 100% 0, 100% 100%, 43% 100%);
}

.qtv-13 .price-container:not(.price-container2) {
    padding: 2%;
}

.leaf-background {
    padding: 0;
    position: absolute;
    z-index: 2;
    top: 0;
    mix-blend-mode: soft-light;
    filter: brightness(40%);
    overflow: hidden;
}

.leaf-background img {
    position: absolute;
}

.leaf-1 {
    left: -10%;
    top: -26%;
    transform: rotate(147deg);
    width: 15%;
}

.leaf-2 {
    left: 92%;
    top: -28%;
    transform: rotate(168deg);
    width: 15%;
}

.leaf-3 {
    right: -5%;
    bottom: -11%;
    width: 20%;
}

.leaf-4 {
    left: -5%;
    bottom: -14%;
    width: 16%;
    transform: rotate(45deg);
}

.leaf-5 {
    left: 19%;
    bottom: -6%;
    width: 16%;
    transform: rotate(67deg);
}

.leaf-6 {
    right: 47%;
    top: -6%;
    width: 16%;
    transform: rotate(-96deg);
}

@keyframes wind1 {
    0% {
        transform: rotate(147deg) translate(0, 0);
    }

    50% {
        transform: rotate(153deg) translate(4px, -6px);
    }

    100% {
        transform: rotate(147deg) translate(0, 0);
    }
}

@keyframes wind2 {
    0% {
        transform: rotate(168deg) translate(0, 0);
    }

    50% {
        transform: rotate(175deg) translate(-5px, -4px);
    }

    100% {
        transform: rotate(168deg) translate(0, 0);
    }
}

@keyframes wind3 {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }

    50% {
        transform: rotate(7deg) translate(6px, 4px);
    }

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

@keyframes wind4 {
    0% {
        transform: rotate(45deg) translate(0, 0);
    }

    50% {
        transform: rotate(52deg) translate(5px, -5px);
    }

    100% {
        transform: rotate(45deg) translate(0, 0);
    }
}

@keyframes wind5 {
    0% {
        transform: rotate(67deg) translate(0, 0);
    }

    50% {
        transform: rotate(74deg) translate(-6px, 5px);
    }

    100% {
        transform: rotate(67deg) translate(0, 0);
    }
}

@keyframes wind6 {
    0% {
        transform: rotate(-96deg) translate(0, 0);
    }

    50% {
        transform: rotate(-90deg) translate(5px, 5px);
    }

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

/* انیمیشن برای هر برگ با شدت بیشتر */
.leaf-1 {
    animation: wind1 4s ease-in-out infinite;
}

.leaf-2 {
    animation: wind2 3.5s ease-in-out infinite;
}

.leaf-3 {
    animation: wind3 4.2s ease-in-out infinite;
}

.leaf-4 {
    animation: wind4 3.8s ease-in-out infinite;
}

.leaf-5 {
    animation: wind5 4.1s ease-in-out infinite;
}

.leaf-6 {
    animation: wind6 3.9s ease-in-out infinite;
}

@media all and (orientation: portrait) {
    .qtv-13-product-container {
        width: 80%;
    }

    .qtv-13-product-name {
        font-size: 8vw;
    }

    .qtv-13-all-size h1 {
        margin: 1% 0;
        font-size: 4vw;
    }

    .qtv-13 .price-container:not(.price-container2) .price {
        font-size: 5.7vw;
    }

    .qtv-13 .price-container:not(.price-container2) .price span {
        font-size: 4.3vw;
    }

    .leaf-1 {
        left: -3%;
        top: -2%;
        transform: rotate(147deg);
        width: 21%;
    }

    .leaf-2 {
        left: 86%;
        top: -4%;
        transform: rotate(168deg);
        width: 20%;
    }

    .leaf-3 {
        right: 0%;
        bottom: 0%;
        width: 26%;
    }

    .leaf-4 {
        left: -5%;
        bottom: -7%;
        width: 32%;
        transform: rotate(45deg);
    }

    .leaf-5 {
        left: 33%;
        bottom: 80%;
        width: 36%;
        transform: rotate(67deg);
    }

    .leaf-6 {
        right: 37%;
        top: 85%;
        width: 30%;
        transform: rotate(-96deg);
    }

    .qtv-13-all-size {
        width: 105%;
    }

    .qtv-13-all-size .price-container2 {
        font-size: 6vw;
    }

    .qtv-13-all-size .price-container2 span {
        font-size: 4vw;
    }

    .qtv-13-all-size h3 {
        font-size: 4vw;
    }
}


#card-element {
    margin: 2% 0;
    border-radius: var(--rounded-main);
    padding: calc(var(--p-1) * 2);
    border: var(--color-mute) solid var(--border-size)
}

/*admin panle part*/
.visard-panel {
    display: grid;
    grid-template-columns: 30% 70%;
    padding: 2%;
}

.visard-start {
    overflow: auto;
    position: sticky;
    top: 0;
    left: 0;
    height: fit-content;
    z-index: 4;
}

.visard-start > .step-bar-container {
    background-color: var(--color-bg)
}

@media (max-width: 576px) {
    .visard-panel {
        display: flex;
        flex-direction: column;
    }
}

.live-translate-container .check-box {
    width: 3rem;
}

.map-container {
    aspect-ratio: 16/6
}

/*modal*/
.removeModal {
    width: 30%;
}

@media (max-width: 768px) {
    .removeModal {
        width: 70%;
    }
}

/*seller index*/
.modal.full-page {
    width: 100vw;
    overflow: hidden;
}


.modal-body.confirm-page {
    height: 100%;
    max-height: unset !important;
    overflow: hidden;
    box-sizing: border-box;
}

.modal.full-page form {
    height: 100%;
    padding-bottom: 3%;
}


.l-static-R-scroll .product-to-buy {
    overflow: auto;
    padding-bottom: 10%;
}

@media (max-width: 768px) {
    .modal-body.confirm-page {
        overflow: auto;
    }

    .l-static-R-scroll .product-to-buy {
        overflow: visible;
    }
}

/*kiosk*/
#payment-animetion {
    width: 80%;
    margin: 15% auto 0 auto;
}

/*product*/
.page-path {
    flex-wrap: wrap;
}

.page-path-text * {
    white-space: nowrap;
}

#screenSaver {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--color-text);
    z-index: 9999;
}

.screenSaver-btn {
    position: fixed;
    bottom: 3%;
    left: 50%;
    width: 90%;
    transform: translate(-50%, 0);
    font-size: calc(var(--font-size-xxl) * 1.5)
}

.screenSaver-vid {
    width: 100vw;
    height: 100vh;
    position: absolute;
    background: var(--color-bg-dark);
    top: 0;
    left: 0;
    object-fit: cover;
    opacity: 0.7;
}

/*.will-load-box {
border-top: var(--color-mute) solid var(--border-size);
}

.will-load-box:nth-of-type(1) {
    border-top: none;
}
.will-load-box:nth-of-type(-1) {
    border-top: none;
}*/
.edite-image-container {
    aspect-ratio: 16/4;
    background-color: var(--color-mute-light);
    display: flex;
    justify-content: center;
    border-radius: var(--rounded-secondry);
}

.edite-image-container img {
    height: 100%;
    aspect-ratio: 1/1;
    background-color: var(--color-bg-dark);
}

/*schedules-btn*/
.schedules-btn {
    display: flex;
    gap: 0;
    width: fit-content;
    justify-content: space-between;
    padding: 0;
    overflow: hidden;
    /*    margin:auto;*/
    background-color: transparent;
}

.schedules-btn > .btn {
    border-radius: 0;
    width: fit-content;
}

.schedules-btn .small-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/*.table-day {*/
/*    background: r*/
/*}*/

@media print {
    .d-print-none {
        display: none !important;
    }
}

.back-icon {
    font-size: calc(var(--font-size-xxl) * 1.5);
}

.service-unavailable-page img {
    width: 20%;
    margin-top: 5%;
}

@media (max-width: 768px) {
    .service-unavailable-page img {
        margin-top: 9%;
        width: 40%;
    }
}

.timer-container * {
    color: var(--color-mute)
}

.timer-container.timeIsDone * {
    color: var(--color-accent);
}

/*.seller-profile-box div:has(.profile-image){*/
/*    object-fit: cover;*/
/*}*/
.seller-profile-box .profile-image {
    object-fit: cover;
    border-radius: var(--rounded-pill);
}

.profile-image-container {
    width: 20%;
}

.profile-text-container {
    width: 80%;
}

/*.productPropertySizeOf .btn.flex-container:not(.addattr) {*/
/*    padding: 0;*/
/*}*/

.productPropertySizeOf .btn > *:not(:last-child) {
    padding: var(--p-1) calc(var(--p-1) * 2);
    border-inline-end: var(--border-size) solid var(--color-bg);
}

.advance-search-box {
    margin-top: var(--m-2);
    margin-bottom: 3rem;
    transition: 0.3s;
}

.advance-search-box:has(.advance-search-content.d-none), .advance-search-box.with-out-search-option {
    padding: 0 !important;
    margin-inline: auto;
    width: fit-content;
}

.productPropertySizeOf .btn > *:last-child {
    border-inline-end: none;
}


.productPropertySizeOf .btn > .DelBtn {
    padding-inline-start: 0;
}

.admin-page-advanceSearch-title {
    align-items: stretch;
    justify-content: center;
}

.admin-page-advanceSearch-title .form-control {
    margin: 0
}

.advance-search-title {
    border-radius: 0;
    padding: var(--p-1);
}

.plan-box {
    border: var(--border-size) var(--color-mute) solid;
    padding: 1rem;
    width: 30%;
    order: 2;
}

.plan-box.checked {
    order: 1;
    background-color: var(--color-mute-light);
}

.plan-box-header {
    background-color: var(--color-main) !important;
}

.plan-box-header * {
    color: var(--color-bg);
}

.plan-box-container {
    grid-template-columns: repeat(3, 1fr)
}

.plan-box-info li {
    border-bottom: var(--border-size) var(--color-mute) solid;
    padding: var(--p-1);
}

.plan-box-info li:last-child {
    border-bottom: none;
}

@media (max-width: 992px) {
    .plan-box {
        width: 48%;
    }
}

@media (max-width: 576px) {
    .plan-box {
        width: 100%;
    }
}

/*#typeListitems > .d-flex {*/
/*    flex-wrap: wrap;*/
/*    gap: 1rem;*/
/*}*/

@media (min-width: 992px) {
    .orders-detail-container .shoping-cart {
        width: 75% !important;
        margin-inline: auto;
    }
}

.EditDevice-user-container [id^="partialAdd"] {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}

.EditDevice-user-container [id^="partialAdd"] .form-control {
    width: 48%;
}

.first-touch {
    margin-top: 10%;
}

.dashboard-item-extra-data .iconify {
    background-color: var(--color-gray);
    padding: var(--p-1);
    border-radius: var(--rounded-main);
}

.dashboard-item-extra-data span:not(.iconify) {
    border-radius: var(--rounded-secondry);
    padding: calc(var(--p-1) / 1.5);
    height: fit-content;
}

.dashboard-container {
    grid-template-columns: 70% 30%;
}

#dashboardChart {
    width: 100%;
    aspect-ratio: 3/1;
}

.dashboard-item {
    width: 100%;
}

.dashboard-items-container {
    overflow-y: visible;
    height: fit-content;
}

@media (max-width: 992px) {
    .dashboard-container {
        grid-template-columns: 1fr;
    }

    .dashboard-item {
        flex: 1 1 auto
    }
}

.form-control:has(.moreThenTwoItem) input[datacontroller="TVMenu"] {
    margin-bottom: var(--m-1);
}

.upload-imag-inner {
    aspect-ratio: 8/1;
    border: var(--color-mute) dashed var(--border-size);

}

.upload-icon {
    height: 50%;
    opacity: 0.5;
}

.upload-image-inner-befor-upload {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.upload-image-inner-after-upload {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.upload-image-after-edite-btn {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
}

.uploaded-image-container img {
    width: 5%;
}

.uploaded-image-prcent {
    width: 100%;
    overflow: hidden;
}

.uploaded-image-prcent input[type=range],
.uploaded-image-prcent input[type=range]::-webkit-slider-runnable-track,
.uploaded-image-prcent input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font: inherit;
}

.uploaded-image-prcent input {
    width: 100%;
    height: 0.5em;
    margin: 1em 0;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 0.25em;
    overflow: hidden;
}

.uploaded-image-prcent input::-webkit-slider-thumb {
    width: 0.5em;
    height: 0.5em;
    background-color: dodgerblue;
    border-radius: 0;
    box-shadow: -100vw 0 0 100vw dodgerblue;
}

.uploaded-image-prcent input::-moz-range-thumb {
    width: 0.5em;
    height: 0.5em;
    background-color: dodgerblue;
    border-radius: 0;
    border: none;
}

@media (max-width: 992px) {
    .upload-imag-inner {
        aspect-ratio: 8/2;


    }

    .uploaded-image-container img {
        width: 11%;
    }
}
.modal-body:has(.cropper-container){
    overflow: visible;
}

.cropper-center {
    width: 87% !important;
    aspect-ratio: 1 / 1;
    height: unset !important;
    transform: translate(-50%, -50%);
    border-radius: var(--rounded-pill);
    border: 0.2rem dashed #3399ff;
}

.cropper-center:before,
.cropper-center::after {
    display: none;
}

.uploaded-image-list > div img {
    border-radius: var(--rounded-main);
}

/*admin-page-title*/
.admin-page-title {
    background-color: var(--color-gray);
    padding: var(--p-2) var(--p-1);
}

/* breadcrumbs */
.breadcrumbs {
    width: fit-content;
    display: flex;
    align-items: center;
}

.admin-page-title-back {
    cursor: pointer;
}

.breadcrumbs * {
    color: var(--color-text);
}

.bc-address {
    font-weight: normal;
}

.breadcrumbs > div {
    gap: 0.2%;

}

.breadcrumbs > div h6 {
    padding: 0;
    margin: 0;
}

.calander-table {
    margin-inline: auto;
}

.calander-table-days-name,
.calander-table-days {
    display: flex;
    justify-content: space-between;
}

.calander-table-days-name {
    background-color: var(--color-gray);
}

.calander-table-days > div,
.calander-table-days-name > div {
    width: calc(100% / 7);
    border: var(--border-size) var(--color-mute-light) solid;
    font-size: var(--font-size-sm);
    padding: var(--p-1);
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calander-table-days > div {
    aspect-ratio: 2/1;
    transition: 0.3s;
    cursor: pointer;
}

.calander-table-days > div:not(.calander-event):hover {
    background-color: var(--color-gray);

}

@media (max-width: 992px) {
    .calander-table-days > div {
        aspect-ratio: 1 / 1.4;
    }
}

.calander-event {
    background-color: var(--color-accent);
    color: var(--color-bg);
}

.calander-event:hover {
    background-color: var(--color-accent-dark);
    color: var(--color-bg);
}

.calander-active-day {
    background-color: var(--color-accent-dark);
}

.calander-controler {
    background: var(--color-gray);
    padding: var(--p-1);
}

.detail-product-notActive {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.visard-Next-Btn {
    margin-top: 4rem !important;
}

@media (max-width: 576px) {
    .visard-Next-Btn {
        display: none;
    }
}

.AddWeeklySchedule-day-input-container {
    width: 90%;
    margin-inline: auto;
}

@media (max-width: 768px) {
    .AddWeeklySchedule-day-input-container {
        width: 100%;
        margin-inline: unset;
    }
}

.company-detail-lan-container .input-group .just-one-default {
    pointer-events: none;
    opacity: 0.5;
    transition: 0.3s;
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 768px) {
    .company-detail-lan-container .input-group .just-one-default {
        width: 53%;
    }
}

.company-detail-lan-container .input-group:has(input[type='checkbox']:checked) .just-one-default {
    pointer-events: unset;
    opacity: 1;
}

.order-seller-mob-summary {
    display: none;
}

@media (max-width: 576px) {
    .order-seller-mob-summary {
        display: block;
    }

    .order-seller-pc-summary {
        display: none;
    }
}


@media (max-width: 576px) {
    .seller-index-pc-action-btn {
        display: none;
    }

    .seller-index-modal .l-static-R-scroll {
        display: grid;
        grid-template-rows: fit-content(70%) 1fr;
    }

    .seller-index-modal form {
        padding-bottom: 8vh !important;
        box-sizing: border-box;
    }

}
.ico-text-btn img{
    width: 4rem;
    object-fit: cover;
}