.theme-color-1 {
    --theme-color: #d99f46;
    --theme-color-rgb: 217, 159, 70
}

.theme-color-2 {
    --theme-color: #FF5900;
    --theme-color-rgb: 255,89,0;
}

.theme-color-3 {
    --theme-color: #239698;
    --theme-color-rgb: 35, 150, 152
}

.theme-color-4 {
    --theme-color: #6262a6;
    --theme-color-rgb: 35, 150, 152
}

.theme-color-5 {
    --theme-color: #2A007C;
    --theme-color: #82347A;
    --theme-color: #4d0045;
    --theme-color-rgb: 42,0,124;
}

:root {
    --theme-color: #2A007C;
    --theme-color-rgb: 0, 0, 0;
    --theme-color1: #0e947a;
    --theme-color1-rgb: 14, 148, 122;
    --theme-color2: #000000;
}

@-webkit-keyframes scaleUpDown {
    0%,100% {
        -webkit-transform: scaleY(1) scaleX(1);
        transform: scaleY(1) scaleX(1)
    }

    50%,90% {
        -webkit-transform: scaleY(1.1);
        transform: scaleY(1.1)
    }

    75% {
        -webkit-transform: scaleY(0.95);
        transform: scaleY(0.95)
    }

    80% {
        -webkit-transform: scaleX(0.95);
        transform: scaleX(0.95)
    }
}

@keyframes scaleUpDown {
    0%,100% {
        -webkit-transform: scaleY(1) scaleX(1);
        transform: scaleY(1) scaleX(1)
    }

    50%,90% {
        -webkit-transform: scaleY(1.1);
        transform: scaleY(1.1)
    }

    75% {
        -webkit-transform: scaleY(0.95);
        transform: scaleY(0.95)
    }

    80% {
        -webkit-transform: scaleX(0.95);
        transform: scaleX(0.95)
    }
}

@-webkit-keyframes shake {
    0%,100% {
        -webkit-transform: skewX(0) scale(1);
        transform: skewX(0) scale(1)
    }

    50% {
        -webkit-transform: skewX(5deg) scale(0.9);
        transform: skewX(5deg) scale(0.9)
    }
}

@keyframes shake {
    0%,100% {
        -webkit-transform: skewX(0) scale(1);
        transform: skewX(0) scale(1)
    }

    50% {
        -webkit-transform: skewX(5deg) scale(0.9);
        transform: skewX(5deg) scale(0.9)
    }
}

@-webkit-keyframes particleUp {
    0% {
        opacity: 0
    }

    20% {
        opacity: 1
    }

    80% {
        opacity: 1
    }

    100% {
        opacity: 0;
        top: -100%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
}

@keyframes particleUp {
    0% {
        opacity: 0
    }

    20% {
        opacity: 1
    }

    80% {
        opacity: 1
    }

    100% {
        opacity: 0;
        top: -100%;
        -webkit-transform: scale(0.5);
        transform: scale(0.5)
    }
}

@-webkit-keyframes shape {
    0% {
        background-position: 100% 0
    }

    50% {
        background-position: 50% 50%
    }

    100% {
        background-position: 0 100%
    }
}

@keyframes shape {
    0% {
        background-position: 100% 0
    }

    50% {
        background-position: 50% 50%
    }

    100% {
        background-position: 0 100%
    }
}

@-webkit-keyframes rounded {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

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

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

@keyframes rounded {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

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

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

@-webkit-keyframes move {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);
        transform: scale(1) rotate(0deg) translate3d(0, 0, 1px)
    }

    30% {
        opacity: 1
    }

    100% {
        z-index: 10;
        -webkit-transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);
        transform: scale(0) rotate(360deg) translate3d(0, 0, 1px)
    }
}

@keyframes move {
    0% {
        -webkit-transform: scale(1) rotate(0deg) translate3d(0, 0, 1px);
        transform: scale(1) rotate(0deg) translate3d(0, 0, 1px)
    }

    30% {
        opacity: 1
    }

    100% {
        z-index: 10;
        -webkit-transform: scale(0) rotate(360deg) translate3d(0, 0, 1px);
        transform: scale(0) rotate(360deg) translate3d(0, 0, 1px)
    }
}

@-webkit-keyframes mover {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
}

@keyframes mover {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px)
    }
}

@-webkit-keyframes flash {
    0% {
        opacity: .4;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out
    }

    100% {
        opacity: 1;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out
    }
}

@keyframes flash {
    0% {
        opacity: .4;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out
    }

    100% {
        opacity: 1;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out
    }
}

@keyframes shake {
    0% {
        -webkit-transform: translate(3px, 0);
        transform: translate(3px, 0)
    }

    50% {
        -webkit-transform: translate(-3px, 0);
        transform: translate(-3px, 0)
    }

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

@-webkit-keyframes grow {
    0%,100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

@keyframes grow {
    0%,100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.alert {
    font-size: 15px;
    letter-spacing: .3px;
    padding: 18px 24px
}

@media(max-width: 575px) {
    .alert {
        top: 0px !important;
        right: 0px !important;
        margin: 12px !important;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }
}

.alert .alert-success {
    background: #39da8a !important;
    color: #fff !important;
    border: none
}

    .alert .alert-success .close {
        color: #fff;
        opacity: 1;
        top: -4px;
        text-shadow: none;
        font-weight: 400;
        font-size: 24px
    }

.alert .btn-close {
    top: 50% !important;
    -webkit-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important
}

[dir=rtl] .alert .btn-close {
    right: unset !important;
    left: 10px !important
}

[data-notify=icon] {
    margin-right: 5px
}

[dir=rtl] [data-notify=icon] {
    margin-right: unset;
    margin-left: 5px
}

[data-notify=progressbar] {
    width: 100%;
    height: 5px;
    margin-bottom: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0
}

.progress-bar-info {
    background-color: #0c5460
}

.add-cart-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 10px;
    position: fixed;
    top: -90px;
    right: calc(10px + 10*(100vw - 320px)/1600);
    border: 1px solid #ececec;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px 10px;
    -webkit-box-shadow: 0px 3px 5px rgba(34,34,34,.129);
    box-shadow: 0px 3px 5px rgba(34,34,34,.129);
    border-radius: 5px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background-color: #fff;
    z-index: 6
}

    .add-cart-box.show {
        top: calc(10px + 10*(100vw - 320px)/1600)
    }

    .add-cart-box .add-iamge {
        width: 50px;
        height: auto
    }

    .add-cart-box .btn-close {
        color: #fff;
        background-color: var(--theme-color);
        opacity: 1;
        background-image: none;
        position: absolute;
        top: -6px;
        right: -6px
    }

    .add-cart-box .add-contain h6 {
        font-weight: 600
    }

.breadscrumb-section {
    background-color: #f8f8f8;
    position: relative;
    overflow: hidden
}

    .breadscrumb-section .breadscrumb-contain {
        padding: calc(26px + 14*(100vw - 320px)/1600) 0;
        text-align: center;
        color: #222;
        font-family: "Public Sans",sans-serif;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

@media(max-width: 480px) {
    .breadscrumb-section .breadscrumb-contain {
        display: block
    }
}

.breadscrumb-section .breadscrumb-contain h2 {
    font-weight: 700;
    font-size: calc(16px + 6*(100vw - 320px)/1600);
    margin-bottom: 0
}

@media(max-width: 480px) {
    .breadscrumb-section .breadscrumb-contain h2 {
        text-align: center;
        margin-bottom: 8px
    }
}

.breadscrumb-section .breadscrumb-contain .search-box-breadscrumb {
    position: relative;
    width: 70%;
    margin: 0 auto
}

@media(max-width: 575px) {
    .breadscrumb-section .breadscrumb-contain .search-box-breadscrumb {
        width: 90%
    }
}

@media(max-width: 360px) {
    .breadscrumb-section .breadscrumb-contain .search-box-breadscrumb {
        width: 100%
    }
}

.breadscrumb-section .breadscrumb-contain .search-box-breadscrumb input {
    width: 100%;
    border: none;
    border-radius: 6px;
    font-size: 15px
}

.breadscrumb-section .breadscrumb-contain .search-box-breadscrumb i {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    right: calc(14px + 6*(100vw - 320px)/1600);
    color: #4a5568;
    font-size: calc(15px + 3*(100vw - 320px)/1600)
}

.breadscrumb-section .breadscrumb-contain nav {
    margin-left: auto
}

[dir=rtl] .breadscrumb-section .breadscrumb-contain nav {
    margin-left: unset;
    margin-right: auto
}

.breadscrumb-section .breadscrumb-contain nav .breadcrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

    .breadscrumb-section .breadscrumb-contain nav .breadcrumb .breadcrumb-item {
        font-weight: 500
    }

        .breadscrumb-section .breadscrumb-contain nav .breadcrumb .breadcrumb-item i {
            color: #4a5568
        }

        .breadscrumb-section .breadscrumb-contain nav .breadcrumb .breadcrumb-item.active {
            color: #000;
            margin-top: 2px
        }

        .breadscrumb-section .breadscrumb-contain nav .breadcrumb .breadcrumb-item + .breadcrumb-item {
            position: relative
        }

[dir=rtl] .breadscrumb-section .breadscrumb-contain nav .breadcrumb .breadcrumb-item + .breadcrumb-item {
    padding-left: 0;
    padding-right: 8px
}

.breadscrumb-section .breadscrumb-contain nav .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "";
    color: #4a5568
}

.breadscrumb-section .breadscrumb-order {
    display: block
}

    .breadscrumb-section .breadscrumb-order .order-box .order-image {
        width: calc(170px + 80*(100vw - 320px)/1600);
        height: auto;
        margin: 0 auto calc(16px + 12*(100vw - 320px)/1600)
    }

        .breadscrumb-section .breadscrumb-order .order-box .order-image .checkmark {
            position: relative;
            padding: 30px;
            -webkit-animation: checkmark 5m cubic-bezier(0.42, 0, 0.275, 1.155) both;
            animation: checkmark 5m cubic-bezier(0.42, 0, 0.275, 1.155) both;
            display: inline-block;
            -webkit-transform: scale(0.8);
            transform: scale(0.8);
            margin: -20px
        }

        .breadscrumb-section .breadscrumb-order .order-box .order-image .checkmark__check {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 10;
            -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
            fill: #fff
        }

        .breadscrumb-section .breadscrumb-order .order-box .order-image .checkmark__background {
            fill: var(--theme-color);
            -webkit-animation: rotate 35s linear both infinite;
            animation: rotate 35s linear both infinite
        }

        .breadscrumb-section .breadscrumb-order .order-box .order-image .star {
            position: absolute;
            -webkit-animation: grow 3s infinite;
            animation: grow 3s infinite;
            fill: var(--theme-color);
            opacity: 0
        }

            .breadscrumb-section .breadscrumb-order .order-box .order-image .star:nth-child(1) {
                width: 12px;
                height: 12px;
                left: 12px;
                top: 16px
            }

            .breadscrumb-section .breadscrumb-order .order-box .order-image .star:nth-child(2) {
                width: 18px;
                height: 18px;
                left: 168px;
                top: 84px
            }

            .breadscrumb-section .breadscrumb-order .order-box .order-image .star:nth-child(3) {
                width: 10px;
                height: 10px;
                left: 32px;
                top: 162px
            }

            .breadscrumb-section .breadscrumb-order .order-box .order-image .star:nth-child(4) {
                height: 20px;
                width: 20px;
                left: 82px;
                top: -12px
            }

            .breadscrumb-section .breadscrumb-order .order-box .order-image .star:nth-child(5) {
                width: 14px;
                height: 14px;
                left: 125px;
                top: 162px
            }

            .breadscrumb-section .breadscrumb-order .order-box .order-image .star:nth-child(6) {
                width: 10px;
                height: 10px;
                left: 16px;
                top: 16px
            }

            .breadscrumb-section .breadscrumb-order .order-box .order-image .star:nth-child(1) {
                -webkit-animation-delay: 1.5s;
                animation-delay: 1.5s
            }

            .breadscrumb-section .breadscrumb-order .order-box .order-image .star:nth-child(2) {
                -webkit-animation-delay: 3s;
                animation-delay: 3s
            }

            .breadscrumb-section .breadscrumb-order .order-box .order-image .star:nth-child(3) {
                -webkit-animation-delay: 4.5s;
                animation-delay: 4.5s
            }

            .breadscrumb-section .breadscrumb-order .order-box .order-image .star:nth-child(4) {
                -webkit-animation-delay: 6s;
                animation-delay: 6s
            }

            .breadscrumb-section .breadscrumb-order .order-box .order-image .star:nth-child(5) {
                -webkit-animation-delay: 7.5s;
                animation-delay: 7.5s
            }

            .breadscrumb-section .breadscrumb-order .order-box .order-image .star:nth-child(6) {
                -webkit-animation-delay: 9s;
                animation-delay: 9s
            }

        .breadscrumb-section .breadscrumb-order .order-box .order-image .checkmark {
            position: relative;
            padding: 30px;
            -webkit-animation: checkmark 5m cubic-bezier(0.42, 0, 0.275, 1.155) both;
            animation: checkmark 5m cubic-bezier(0.42, 0, 0.275, 1.155) both;
            display: inline-block;
            -webkit-transform: scale(0.8);
            transform: scale(0.8);
            margin: -20px
        }

        .breadscrumb-section .breadscrumb-order .order-box .order-image .checkmark__check {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 10;
            -webkit-transform: translate3d(-50%, -50%, 0);
            transform: translate3d(-50%, -50%, 0);
            fill: #fff
        }

        .breadscrumb-section .breadscrumb-order .order-box .order-image .checkmark__background {
            fill: var(--theme-color);
            -webkit-animation: rotate 35s linear both infinite;
            animation: rotate 35s linear both infinite
        }

        .breadscrumb-section .breadscrumb-order .order-box .order-image i {
            font-size: 50px;
            color: #4ead4e
        }

        .breadscrumb-section .breadscrumb-order .order-box .order-image h2 {
            margin-top: 10px;
            margin-bottom: 15px
        }

        .breadscrumb-section .breadscrumb-order .order-box .order-image p {
            font-size: 18px;
            text-transform: capitalize
        }

        .breadscrumb-section .breadscrumb-order .order-box .order-image.order-fail i {
            color: var(--theme-color)
        }

    .breadscrumb-section .breadscrumb-order .order-box .order-contain h3 {
        font-size: calc(21px + 3*(100vw - 320px)/1600);
        font-weight: 700;
        margin-bottom: 6px
    }

    .breadscrumb-section .breadscrumb-order .order-box .order-contain h5 {
        margin-bottom: 8px;
        line-height: 1.4
    }

.faq-breadscrumb {
    background-color: #f8f8f8;
    position: relative;
    overflow: hidden
}

    .faq-breadscrumb .breadscrumb-contain {
        padding: calc(26px + 34*(100vw - 320px)/1600) 0;
        text-align: center;
        color: #222;
        display: block
    }

        .faq-breadscrumb .breadscrumb-contain h2 {
            font-size: calc(22px + 26*(100vw - 320px)/1600);
            font-weight: 700;
            margin-top: -6px
        }

        .faq-breadscrumb .breadscrumb-contain p {
            margin: calc(11px + 5*(100vw - 320px)/1600) auto 0;
            color: #4a5568;
            width: 50%;
            line-height: 1.7;
            font-size: calc(14px + 2*(100vw - 320px)/1600)
        }

@media(max-width: 1660px) {
    .faq-breadscrumb .breadscrumb-contain p {
        width: 60%
    }
}

@media(max-width: 1366px) {
    .faq-breadscrumb .breadscrumb-contain p {
        width: 70%
    }
}

@media(max-width: 991px) {
    .faq-breadscrumb .breadscrumb-contain p {
        width: 90%
    }
}

@media(max-width: 767px) {
    .faq-breadscrumb .breadscrumb-contain p {
        width: 100%
    }
}

.faq-breadscrumb .breadscrumb-contain p span {
    display: inline
}

.faq-breadscrumb .breadscrumb-contain .faq-form-tag {
    position: relative;
    margin: calc(18px + 17*(100vw - 320px)/1600) auto 0;
    width: 50%
}

@media(max-width: 1660px) {
    .faq-breadscrumb .breadscrumb-contain .faq-form-tag {
        width: 60%
    }
}

@media(max-width: 1366px) {
    .faq-breadscrumb .breadscrumb-contain .faq-form-tag {
        width: 70%
    }
}

@media(max-width: 991px) {
    .faq-breadscrumb .breadscrumb-contain .faq-form-tag {
        width: 90%
    }
}

@media(max-width: 767px) {
    .faq-breadscrumb .breadscrumb-contain .faq-form-tag {
        width: 100%
    }
}

.faq-breadscrumb .breadscrumb-contain .faq-form-tag .input-group {
    background-color: #fff
}

    .faq-breadscrumb .breadscrumb-contain .faq-form-tag .input-group i {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 calc(12px + 8*(100vw - 320px)/1600);
        color: var(--theme-color);
        font-size: calc(14px + 2*(100vw - 320px)/1600)
    }

    .faq-breadscrumb .breadscrumb-contain .faq-form-tag .input-group .form-control {
        padding-left: 0;
        border: none
    }

[dir=rtl] .faq-breadscrumb .breadscrumb-contain .faq-form-tag .input-group .form-control {
    padding-left: unset;
    padding-right: 0
}

.faq-breadscrumb .breadscrumb-contain .faq-form-tag .input-group .form-control:focus {
    background-color: rgba(0,0,0,0)
}

.faq-breadscrumb .breadscrumb-contain .faq-form-tag .input-group .faq-dropdown-menu li {
    display: block
}

.faq-breadscrumb .breadscrumb-contain .faq-form-tag .input-group .faq-dropdown-button {
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    font-weight: 600;
    color: var(--theme-color);
    z-index: 0
}

    .faq-breadscrumb .breadscrumb-contain .faq-form-tag .input-group .faq-dropdown-button::after {
        content: unset
    }

    .faq-breadscrumb .breadscrumb-contain .faq-form-tag .input-group .faq-dropdown-button i {
        position: relative;
        padding: 0;
        margin-left: 5px;
        font-size: calc(13px + 1*(100vw - 320px)/1600)
    }

[dir=rtl] .faq-breadscrumb .breadscrumb-contain .faq-form-tag .input-group .faq-dropdown-button i {
    margin-left: unset;
    margin-right: 5px
}

.btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #222;
    padding: calc(7px + 7*(100vw - 320px)/1600) calc(14px + 18*(100vw - 320px)/1600);
    font-weight: 500;
    background: rgba(0,0,0,0);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
    border: none;
    font-size: calc(14px + 4*(100vw - 320px)/1600);
    z-index: 0;
    white-space: nowrap
}

    .btn:focus {
        -webkit-box-shadow: none;
        box-shadow: none
    }

    .btn:hover .icon {
        -webkit-transform: translateX(3px);
        transform: translateX(3px)
    }

    .btn.dark-button {
        background: linear-gradient(93.33deg, #222221 12.35%, #2F2F2D 99.38%) !important
    }

    .btn .icon {
        margin-left: calc(6px + 6*(100vw - 320px)/1600);
        -webkit-transition: .3s ease;
        transition: .3s ease
    }

[dir=rtl] .btn .icon {
    margin-left: unset;
    margin-right: calc(6px + 6*(100vw - 320px)/1600)
}

.btn .icon-2 {
    margin-left: 6px;
    -webkit-transition: .3s ease;
    transition: .3s ease
}

[dir=rtl] .btn .icon-2 {
    margin-left: unset;
    margin-right: 6px
}

.btn-furniture {
    border: 1px solid #4a5568;
    color: #4a5568;
    display: block
}

.btn-animation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    border-radius: 5px;
    font-weight: 600;
    background: rgba(0,0,0,0);
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
    background: #ff6b6b;
    background: -webkit-gradient(linear, left top, right top, from(#ff6b6b), to(#ff4f4f));
    background: linear-gradient(90deg, #ff600b 0%, #FF5900 100%);
    background: linear-gradient(90deg, #000000 0%, #000000 100%);
    border: none;
    z-index: 0
}

    .btn-animation i {
        -webkit-transition: .3s ease;
        transition: .3s ease
    }

    .btn-animation::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        border-radius: 5px;
        background: #ff4f4f;
        background: -webkit-gradient(linear, left top, right top, from(#ff4f4f), to(#ff6b6b));
        background: linear-gradient(90deg, #ff4f4f 0%, #ff6b6b 100%);
        background: linear-gradient(90deg, #4d0045 0%, #4d0045 100%);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

    .btn-animation:hover {
        color: #fff
    }

        .btn-animation:hover i {
            -webkit-transform: translateX(3px);
            transform: translateX(3px)
        }

        .btn-animation:hover::after {
            top: 0;
            height: 100%
        }

.btn-md {
    padding: calc(8px + 3*(100vw - 320px)/1600) calc(16px + 8*(100vw - 320px)/1600);
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    font-weight: 500
}

.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500
}

.btn-2 {
    padding: 9px 25px;
    font-size: calc(14px + 4*(100vw - 320px)/1600);
    font-weight: 400
}

    .btn-2:hover::after {
        top: 0;
        height: 100%
    }

.btn-2-animation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    position: relative;
    background: #0da487;
    background: -webkit-gradient(linear, left top, right top, from(#0da487), to(#0e947a));
    background: linear-gradient(90deg, #0da487 0%, #0e947a 100%);
    border: none;
    z-index: 0
}

    .btn-2-animation::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        border-radius: 5px;
        background: #0da487;
        background: -webkit-gradient(linear, left top, right top, from(#0e947a), to(#0da487));
        background: linear-gradient(90deg, #0e947a 0%, #0da487 100%);
        -webkit-transition: all .3s ease;
        transition: all .3s ease
    }

.btn-category {
    padding: calc(6px + 2*(100vw - 320px)/1600) calc(16px + 11*(100vw - 320px)/1600);
    letter-spacing: .8px;
    font-size: calc(16px + 2*(100vw - 320px)/1600);
    font-weight: 700;
    border-radius: 50px
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none
}

.newsletter-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 11px
}

    .newsletter-form .form-control {
        background-color: rgba(0,0,0,0);
        padding: calc(8px + 4*(100vw - 320px)/1600)
    }

        .newsletter-form .form-control::-webkit-input-placeholder {
            color: #fff;
            font-size: calc(14px + 4*(100vw - 320px)/1600)
        }

        .newsletter-form .form-control::-moz-placeholder {
            color: #fff;
            font-size: calc(14px + 4*(100vw - 320px)/1600)
        }

        .newsletter-form .form-control:-ms-input-placeholder {
            color: #fff;
            font-size: calc(14px + 4*(100vw - 320px)/1600)
        }

        .newsletter-form .form-control::-ms-input-placeholder {
            color: #fff;
            font-size: calc(14px + 4*(100vw - 320px)/1600)
        }

        .newsletter-form .form-control::placeholder {
            color: #fff;
            font-size: calc(14px + 4*(100vw - 320px)/1600)
        }

.normal-form .form-control {
    border: none
}

    .normal-form .form-control:focus {
        background-color: #fff
    }

.theme-form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(14px + 4*(100vw - 320px)/1600);
    opacity: .95;
    top: -5px;
    left: 5px;
    height: 31px;
    background-color: #fff;
    white-space: nowrap;
    opacity: 1
}

.theme-form-floating > .form-control:not(:-ms-input-placeholder) ~ label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: calc(14px + 4*(100vw - 320px)/1600);
    opacity: .95;
    top: -5px;
    left: 5px;
    height: 31px;
    background-color: #fff;
    white-space: nowrap;
    opacity: 1
}

.theme-form-floating > .form-control:focus ~ label, .theme-form-floating > .form-control:not(:placeholder-shown) ~ label, .theme-form-floating > .form-select ~ label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: calc(14px + 4*(100vw - 320px)/1600);
    opacity: .95;
    top: -5px;
    left: 5px;
    height: 31px;
    background-color: #fff;
    white-space: nowrap;
    opacity: 1
}

[dir=rtl] .theme-form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
    right: 10px;
    left: unset
}

[dir=rtl] .theme-form-floating > .form-control:not(:-ms-input-placeholder) ~ label {
    right: 10px;
    left: unset
}

[dir=rtl] .theme-form-floating > .form-control:focus ~ label, [dir=rtl] .theme-form-floating > .form-control:not(:placeholder-shown) ~ label, [dir=rtl] .theme-form-floating > .form-select ~ label {
    right: 10px;
    left: unset
}

.theme-form-floating .form-control, .theme-form-floating .form-select {
    height: calc(51px + 3*(100vw - 320px)/1600);
    line-height: normal
}

.theme-form-floating > .form-control:not(:-moz-placeholder-shown) {
    padding-top: 17px;
    padding-bottom: 10px;
    font-size: calc(15px + 2*(100vw - 320px)/1600);
    font-weight: 500
}

.theme-form-floating > .form-control:not(:-ms-input-placeholder) {
    padding-top: 17px;
    padding-bottom: 10px;
    font-size: calc(15px + 2*(100vw - 320px)/1600);
    font-weight: 500
}

.theme-form-floating > .form-control:focus, .theme-form-floating > .form-control:not(:placeholder-shown) {
    padding-top: 17px;
    padding-bottom: 10px;
    font-size: calc(15px + 2*(100vw - 320px)/1600);
    font-weight: 500
}

.theme-form-floating > .form-select {
    padding-top: 12px;
    padding-bottom: 10px;
    font-size: calc(14px + 1*(100vw - 320px)/1600);
    font-weight: 500
}

    .theme-form-floating > .form-select:focus {
        border-color: var(--theme-color);
        outline: 0;
        -webkit-box-shadow: 0 0 0 4px rgba(0,0,0,0);
        box-shadow: 0 0 0 4px rgba(0,0,0,0)
    }

.theme-form-floating .form-control:focus {
    background-color: #fff;
    border: 1px solid #ced4da
}

.theme-form-floating label {
    font-size: calc(13px + 3*(100vw - 320px)/1600);
    color: #4a5568;
    border: none
}

.checkbox_animated {
    cursor: pointer;
    position: relative;
    margin-right: 16px;
    height: 100%
}

[dir=rtl] .checkbox_animated {
    margin-right: unset;
    margin-left: 16px
}

.checkbox_animated:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 6px;
    -webkit-transition: -webkit-transform .4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    transition: -webkit-transform .4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    transition: transform .4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    transition: transform .4s cubic-bezier(0.45, 1.8, 0.5, 0.75), -webkit-transform .4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
    -webkit-transform: rotate(-45deg) scale(0, 0);
    transform: rotate(-45deg) scale(0, 0);
    left: 4px;
    top: 4px;
    z-index: 1;
    border: 2px solid var(--theme-color);
    border-top-style: none;
    border-right-style: none
}

[dir=rtl] .checkbox_animated:before {
    left: unset;
    right: 4px
}

.checkbox_animated:after {
    content: "";
    position: absolute;
    width: 21px;
    height: 21px;
    top: -2px;
    left: 0;
    background-color: #fff;
    border: 2px solid #ececec;
    cursor: pointer
}

[dir=rtl] .checkbox_animated:after {
    left: unset;
    right: 0
}

.checkbox_animated:checked:before {
    -webkit-transform: rotate(-45deg) scale(1, 1);
    transform: rotate(-45deg) scale(1, 1)
}

.custom-form-check-2 {
    min-height: auto;
    margin-bottom: 0
}

.form-control {
    font-size: 14px;
    padding: calc(8px + 6*(100vw - 320px)/1600) calc(12px + 3*(100vw - 320px)/1600)
}

    .form-control.subscribe-input {
        border: none;
        border-radius: 0
    }

[dir=rtl] .form-control {
    text-align: right
}

.form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #000
}

.form-select {
    font-size: 14px
}

    .form-select.theme-form-select:focus {
        background-color: #fff;
        -webkit-box-shadow: none;
        box-shadow: none;
        color: #000
    }

.input-group .btn {
    z-index: 1
}

.label-flex {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .label-flex .discount {
        background-color: var(--theme-color);
        color: #fff;
        padding: 4px calc(7px + 3*(100vw - 320px)/1600);
        border-radius: 4px
    }

        .label-flex .discount.sm-discount label {
            font-size: 12px
        }

        .label-flex .discount label {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin: -2px 0
        }

    .label-flex .wishlist {
        font-size: calc(16px + 6*(100vw - 320px)/1600);
        color: #4a5568;
        margin-left: auto
    }

[dir=rtl] .label-flex .wishlist {
    margin-left: unset;
    margin-right: auto
}

.blur-up {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    transition: filter 400ms,-webkit-filter 400ms
}

    .blur-up.lazyloaded {
        -webkit-filter: blur(0);
        filter: blur(0)
    }

.theme-modal .modal-dialog .modal-content {
    border: none
}

    .theme-modal .modal-dialog .modal-content .modal-header {
        border-bottom: none;
        padding: calc(8px + 8*(100vw - 320px)/1600) calc(17px + -1*(100vw - 320px)/1600)
    }

        .theme-modal .modal-dialog .modal-content .modal-header .modal-title {
            font-weight: 600;
            font-size: 20px;
            width: 95%;
            margin-top: -4px
        }

@media(max-width: 575px) {
    .theme-modal .modal-dialog .modal-content .modal-header .modal-title {
        margin-top: 0
    }
}

.theme-modal .modal-dialog .modal-content .modal-header .btn-close {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: var(--theme-color);
    opacity: 1;
    background-image: none;
    border-radius: 4px;
    font-size: calc(15px + 2*(100vw - 320px)/1600);
    color: #fff;
    margin: 0;
    padding: 8px;
    z-index: 1
}

[dir=rtl] .theme-modal .modal-dialog .modal-content .modal-header .btn-close {
    right: unset;
    left: -15px
}

@media(max-width: 575px) {
    .theme-modal .modal-dialog .modal-content .modal-header .btn-close {
        right: 13px;
        top: 13px
    }

    [dir=rtl] .theme-modal .modal-dialog .modal-content .modal-header .btn-close {
        right: unset;
        left: 13px
    }
}

@media(max-width: 575px)and (max-width: 575px) {
    .theme-modal .modal-dialog .modal-content .modal-header .btn-close i {
        margin-top: -1px;
        display: block
    }
}

.theme-modal .modal-dialog .modal-content .modal-footer {
    border: none;
    padding: calc(8px + 8*(100vw - 320px)/1600) calc(17px + -1*(100vw - 320px)/1600);
    gap: 8px
}

    .theme-modal .modal-dialog .modal-content .modal-footer button {
        margin: 0
    }

.view-modal .modal-dialog .modal-content .modal-body {
    padding: calc(18px + 11*(100vw - 320px)/1600)
}

    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .title-name {
        font-weight: 600;
        line-height: 1.3;
        text-transform: uppercase;
        margin-bottom: calc(7px + -4*(100vw - 320px)/1600);
        font-size: calc(17px + 8*(100vw - 320px)/1600)
    }

    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .price {
        font-size: 20px;
        color: #4a5568
    }

    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .brand-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: calc(9px + 3*(100vw - 320px)/1600);
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: calc(13px + 6*(100vw - 320px)/1600);
        border-bottom: 1px dashed #ececec;
        padding-bottom: 14px
    }

[dir=rtl] .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .brand-list {
    padding-right: 0
}

.view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .brand-list li {
    width: 100%
}

    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .brand-list li .brand-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .brand-list li .brand-box h5 {
            width: 110px;
            font-size: 14px;
            color: #4a5568
        }

.view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .select-size {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 15px;
    margin-top: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: calc(16px + 5*(100vw - 320px)/1600)
}

    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .select-size h4 {
        font-size: calc(14px + 1*(100vw - 320px)/1600);
        white-space: nowrap
    }

    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .select-size .select-form-size {
        width: auto
    }

.view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .product-rating {
    border-bottom: 1px dashed #ececec;
    padding-bottom: 14px;
    margin-top: 14px
}

.view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .product-detail {
    margin-top: 12px
}

    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .product-detail h4 {
        font-weight: 600;
        margin-bottom: 7px
    }

    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .product-detail p {
        font-size: calc(14px + 1*(100vw - 320px)/1600);
        line-height: 1.4;
        margin: 0;
        color: #4a5568
    }

.view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .select-wight {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 17px
}

    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .select-wight .select-form-wight {
        width: auto
    }

@media(max-width: 480px) {
    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .select-wight .select-form-wight {
        width: 100%
    }
}

.view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .select-wight .stoke-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    height: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 6px
}

@media(max-width: 575px) {
    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .select-wight .stoke-box {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }
}

.view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .select-wight .stoke-box .feather {
    width: 19px;
    height: auto;
    color: #61b33e
}

.view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .select-wight .stoke-box h6 {
    font-size: 16px;
    letter-spacing: .9px;
    color: #4a5568
}

.view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .select-wight .select-form-wight:focus {
    border-color: #ececec;
    -webkit-box-shadow: none;
    box-shadow: none
}

.view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .modal-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 20px
}

    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .modal-button .add-cart-button {
        background-color: #222;
        color: #fff;
        font-weight: 600
    }

    .view-modal .modal-dialog .modal-content .modal-body .right-sidebar-modal .modal-button .view-button {
        margin-left: 15px
    }

.location-modal .modal-dialog .modal-content .modal-header {
    display: block;
    padding: calc(13px + 17*(100vw - 320px)/1600);
    padding-bottom: 0
}

    .location-modal .modal-dialog .modal-content .modal-header p {
        margin-bottom: 0;
        line-height: 1.6
    }

.location-modal .modal-dialog .modal-content .modal-body {
    padding: calc(13px + 17*(100vw - 320px)/1600) calc(13px + 17*(100vw - 320px)/1600)
}

    .location-modal .modal-dialog .modal-content .modal-body .location-list .search-input {
        position: relative
    }

        .location-modal .modal-dialog .modal-content .modal-body .location-list .search-input .form-control {
            padding-left: 45px
        }

[dir=rtl] .location-modal .modal-dialog .modal-content .modal-body .location-list .search-input .form-control {
    padding-left: unset;
    padding-right: 45px
}

.location-modal .modal-dialog .modal-content .modal-body .location-list .search-input i {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 15px;
    font-size: 17px;
    color: #4a5568
}

[dir=rtl] .location-modal .modal-dialog .modal-content .modal-body .location-list .search-input i {
    left: unset;
    right: 0
}

.location-modal .modal-dialog .modal-content .modal-body .location-list .disabled-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: calc(10px + 5*(100vw - 320px)/1600) calc(7px + 7*(100vw - 320px)/1600);
    border-bottom: 1px solid #ececec;
    margin-top: calc(12px + 8*(100vw - 320px)/1600)
}

    .location-modal .modal-dialog .modal-content .modal-body .location-list .disabled-box h6 {
        color: #4a5568;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

    .location-modal .modal-dialog .modal-content .modal-body .location-list .disabled-box span {
        margin-left: auto;
        margin-right: 5px;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        font-size: 10px;
        font-weight: 500;
        color: #9b9bb4;
        padding: 3px 10px;
        border-radius: 30px
    }

[dir=rtl] .location-modal .modal-dialog .modal-content .modal-body .location-list .disabled-box span {
    margin-right: auto;
    margin-left: unset
}

.location-modal .modal-dialog .modal-content .modal-body .location-list .location-select li {
    display: block
}

    .location-modal .modal-dialog .modal-content .modal-body .location-list .location-select li a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: calc(10px + 0*(100vw - 320px)/1600) calc(7px + 7*(100vw - 320px)/1600);
        position: relative;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        z-index: 0
    }

        .location-modal .modal-dialog .modal-content .modal-body .location-list .location-select li a::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: var(--theme-color);
            opacity: 0;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
            z-index: -1
        }

        .location-modal .modal-dialog .modal-content .modal-body .location-list .location-select li a:hover::after {
            opacity: .2
        }

        .location-modal .modal-dialog .modal-content .modal-body .location-list .location-select li a:hover h6 {
            color: var(--theme-color)
        }

        .location-modal .modal-dialog .modal-content .modal-body .location-list .location-select li a:hover span {
            border-color: rgba(0,0,0,0);
            background-color: var(--theme-color);
            color: #fff
        }

        .location-modal .modal-dialog .modal-content .modal-body .location-list .location-select li a h6 {
            color: #222;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

        .location-modal .modal-dialog .modal-content .modal-body .location-list .location-select li a span {
            margin-left: auto;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
            font-size: 10px;
            font-weight: 500;
            border: 1px solid #e2e2ec;
            color: #9b9bb4;
            padding: 3px 10px;
            border-radius: 30px
        }

[dir=rtl] .location-modal .modal-dialog .modal-content .modal-body .location-list .location-select li a span {
    margin-right: auto;
    margin-left: unset
}

.ratio_30 .bg-size:before {
    content: "";
    padding-top: 30%;
    display: block
}

.ratio_35 .bg-size:before {
    content: "";
    padding-top: 35%;
    display: block
}

.ratio_45 .bg-size:before {
    content: "";
    padding-top: 45.4%;
    display: block
}

.ratio_50 .bg-size:before {
    content: "";
    padding-top: 50%;
    display: block
}

.ratio_50_1 .bg-size:before {
    content: "";
    padding-top: 50%;
    display: block
}

@media(max-width: 1660px) {
    .ratio_50_1 .bg-size:before {
        padding-top: 57%
    }
}

@media(max-width: 1199px) {
    .ratio_50_1 .bg-size:before {
        padding-top: 80%
    }
}

@media(max-width: 991px) {
    .ratio_50_1 .bg-size:before {
        padding-top: 59%
    }
}

@media(max-width: 767px) {
    .ratio_50_1 .bg-size:before {
        padding-top: 68%
    }
}

@media(max-width: 575px) {
    .ratio_50_1 .bg-size:before {
        padding-top: 77%
    }
}

@media(max-width: 480px) {
    .ratio_50_1 .bg-size:before {
        padding-top: 84%
    }
}

.ratio_58 .bg-size:before {
    content: "";
    padding-top: 58%;
    display: block
}

.ratio_60 .bg-size:before {
    content: "";
    padding-top: 60%;
    display: block
}

.ratio_65 .bg-size:before {
    content: "";
    padding-top: 65%;
    display: block
}

.ratio_87 .bg-size:before {
    content: "";
    padding-top: 87%;
    display: block
}

.ratio_square .bg-size:before {
    padding-top: 100%;
    content: "";
    display: block
}

.ratio_110 .bg-size:before {
    padding-top: 110%;
    content: "";
    display: block
}

.ratio_125 .bg-size::before {
    content: "";
    padding-top: 125%;
    display: block
}

.ratio_148 .bg-size::before {
    content: "";
    padding-top: 148%;
    display: block
}

.ratio_156 .bg-size:before {
    content: "";
    padding-top: 156%;
    display: block
}

.ratio_medium .bg-size:before {
    content: "";
    padding-top: 134%;
    display: block
}

.ratio_180 .bg-size:before {
    content: "";
    padding-top: 180%;
    display: block
}

.ratio_209 .bg-size:before {
    content: "";
    padding-top: 209%;
    display: block
}

.ratio_148_1 .bg-size {
    content: "";
    padding-top: 148%;
    display: block
}

@media(max-width: 1199px) {
    .ratio_148_1 .bg-size {
        padding-top: 88%
    }
}

.b-bottom {
    background-position: bottom !important
}

.b-top {
    background-position: top !important
}

.b-left {
    background-position: left !important
}

.b-right {
    background-position: right !important
}

}

.no-arrow .slick-arrow {
    display: none !important
}

.no-space .slick-list {
    margin: 0 !important
}

    .no-space .slick-list .slick-slide > div, .no-space .slick-list .slick-slide > ul {
        margin: 0 !important
    }

[dir=rtl] .no-space .slick-list .slick-slide > div, [dir=rtl] .no-space .slick-list .slick-slide > ul {
    direction: rtl
}

.category-slider .slick-list {
    margin: 0
}

    .category-slider .slick-list .slick-slide {
        padding: 0 10px
    }

[dir=rtl] .category-slider .slick-list .slick-slide > div, [dir=rtl] .category-slider .slick-list .slick-slide > ul {
    direction: rtl
}

.category-slider.slick-dotted {
    margin-bottom: 0
}

.slick-slider .slick-list {
    margin: 0 -10px
}

@media(max-width: 575px) {
    .slick-slider .slick-list {
        margin: 0 -6px
    }
}

.slick-slider .slick-list .slick-slide > div, .slick-slider .slick-list .slick-slide > ul {
    margin: 0 10px
}

[dir=rtl] .slick-slider .slick-list .slick-slide > div, [dir=rtl] .slick-slider .slick-list .slick-slide > ul {
    direction: rtl
}

@media(max-width: 575px) {
    .slick-slider .slick-list .slick-slide > div, .slick-slider .slick-list .slick-slide > ul {
        margin: 0 6px
    }
}

.slick-slider.slick-dotted {
    margin-bottom: 0
}

.slick-top .slick-list .slick-track > div {
    margin: 3px 0
}

.arrow-slider .slick-prev, .arrow-slider .slick-next {
    width: calc(30px + 10*(100vw - 320px)/1600);
    height: calc(30px + 10*(100vw - 320px)/1600);
    background-color: #fff;
    -webkit-box-shadow: 0px 1px 4px rgba(34,34,34,.14);
    box-shadow: 0px 1px 4px rgba(34,34,34,.14);
    position: absolute;
    top: calc(-28px + -15*(100vw - 320px)/1600);
    border-radius: 5px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

    .arrow-slider .slick-prev::before, .arrow-slider .slick-next::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        color: var(--theme-color);
        font-size: calc(17px + 3*(100vw - 320px)/1600)
    }

    .arrow-slider .slick-prev:hover, .arrow-slider .slick-next:hover {
        background-color: var(--theme-color)
    }

        .arrow-slider .slick-prev:hover::before, .arrow-slider .slick-next:hover::before {
            color: #fff
        }

.arrow-slider .slick-prev {
    left: unset;
    right: 60px
}

[dir=rtl] .arrow-slider .slick-prev {
    right: unset;
    left: 0
}

.arrow-slider .slick-prev::before {
    content: ""
}

@media(max-width: 575px) {
    .arrow-slider .slick-prev {
        right: 45px
    }
}

.arrow-slider .slick-next {
    right: 5px
}

[dir=rtl] .arrow-slider .slick-next {
    right: unset;
    left: 50px
}

.arrow-slider .slick-next::before {
    content: ""
}

@media(max-width: 575px) {
    [dir=rtl] .arrow-slider .slick-next {
        left: 40px
    }
}

.img-slider img {
    display: initial
}

.slick-height .slick-list .slick-track .slick-slide {
    height: auto
}

.title {
    margin-bottom: calc(16px + 14*(100vw - 320px)/1600);
    display: inline-block;
    position: relative
}

    .title h2 {
        font-weight: 700;
        color: #222;
        position: relative
    }

    .title p {
        line-height: 1.5;
        margin: calc(5px + 5*(100vw - 320px)/1600) 0 0;
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        color: #4a5568
    }

    .title .product-tabs {
        border: none;
        position: absolute;
        top: 0;
        right: 0
    }

        .title .product-tabs .nav-item {
            position: relative
        }

            .title .product-tabs .nav-item .nav-link {
                border: none;
                border-radius: unset;
                color: #4a5568;
                position: relative;
                font-weight: 400;
                font-size: 16px
            }

                .title .product-tabs .nav-item .nav-link.active {
                    font-weight: 500;
                    color: var(--theme-color)
                }

                    .title .product-tabs .nav-item .nav-link.active::before {
                        content: "";
                        position: absolute;
                        width: 50px;
                        height: 2px;
                        bottom: 0;
                        left: 17px;
                        border-radius: 50px;
                        background-color: var(--theme-color)
                    }

                    .title .product-tabs .nav-item .nav-link.active::after {
                        content: "";
                        position: absolute;
                        width: 4px;
                        height: 2px;
                        bottom: 0;
                        left: 75px;
                        border-radius: 50px;
                        background-color: var(--theme-color)
                    }

            .title .product-tabs .nav-item + .nav-item {
                margin-left: 10px
            }

                .title .product-tabs .nav-item + .nav-item::before {
                    content: "";
                    position: absolute;
                    width: 13px;
                    height: 13px;
                    top: 9px;
                    left: -11px;
                    background-image: url( /assets/svg/bag.svg);
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center
                }

.title-border {
    border-bottom: 1px solid #ececec;
    padding-bottom: calc(14px + 6*(100vw - 320px)/1600);
    margin-bottom: calc(5px + 5*(100vw - 320px)/1600)
}

@media(min-width: 1464px) {
    .container {
        max-width: 1440px
    }
}

.col-custome-3 {
    width: 22%
}

@media(max-width: 1399px) {
    .col-custome-3 {
        width: 25%
    }
}

@media(max-width: 1199px) {
    .col-custome-3 {
        width: 30%
    }
}

@media(max-width: 991px) {
    .col-custome-3 {
        width: 0
    }
}

.col-custome-9 {
    width: 78%
}

@media(max-width: 1399px) {
    .col-custome-9 {
        width: 75%
    }
}

@media(max-width: 1199px) {
    .col-custome-9 {
        width: 70%
    }
}

@media(max-width: 991px) {
    .col-custome-9 {
        width: 100%
    }
}

.fw-300 {
    font-weight: 300
}

.w-60 {
    width: 60% !important
}

.section-small-space {
    padding: calc(18px + 24*(100vw - 320px)/1600) 0
}

.section-big-space {
    padding: calc(40px + 120*(100vw - 320px)/1600) 0
}

.section-lg-space {
    padding: calc(30px + 40*(100vw - 320px)/1600) 0
}

section, .section-t-space {
    padding-top: calc(30px + 20*(100vw - 320px)/1600)
}

.section-b-space {
    padding-bottom: calc(30px + 20*(100vw - 320px)/1600)
}

.container-fluid-lg {
    padding: 0 calc(12px + 148*(100vw - 320px)/1600)
}

.container-fluid-md {
    padding: 0 calc(12px + 38*(100vw - 320px)/1600)
}

.container-fluid-xs {
    padding: 0 calc(12px + 13*(100vw - 320px)/1600)
}

.section-small-space {
    padding: 30px 0
}

.p-top-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

[dir=rtl] .p-top-left {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.p-top-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.p-top-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.p-center-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

[dir=rtl] .p-center-left {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.p-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.p-center-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

[dir=rtl] .p-center-right {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.p-bottom-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

[dir=rtl] .p-bottom-left {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.p-bottom-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.p-bottom-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.p-sticky {
    position: sticky;
    top: 10px
}

.ls-expanded {
    letter-spacing: 12px;
    margin-right: -12px
}

.ls-resize-expanded {
    letter-spacing: calc(4px + 6*(100vw - 320px)/1600)
}

.g-8 {
    margin: -8px
}

    .g-8 > div {
        padding: 8px
    }

.icon-width {
    width: 25px;
    height: 25px
}

.rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media(max-width: 360px) {
    .rating {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

[dir=rtl] .rating {
    padding-left: unset;
    padding-right: 0
}

.rating li {
    line-height: 0
}

    .rating li + li {
        margin-left: 2px
    }

[dir=rtl] .rating li + li {
    margin-left: unset;
    margin-right: 2px
}

.rating li .feather {
    width: 14px;
    height: 14px;
    stroke: #ffb321
}

    .rating li .feather.fill {
        fill: #ffb321
    }

.product-rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .product-rating span {
        color: #4a5568;
        font-size: 12px;
        margin-left: 5px
    }

[dir=rtl] .product-rating span {
    margin-left: unset;
    margin-right: 5px
}

.mend-auto {
    margin-right: auto !important;
    text-align: left
}

.mstart-auto {
    margin-left: auto !important;
    text-align: left
}

.fw-500 {
    font-weight: 500
}

.text-theme {
    color: var(--theme-color)
}

.text-title {
    color: #222 !important
}

.text-content {
    color: #4a5568
}

.text-yellow {
    color: #ffb321 !important
}

.text-danger {
    color: var(--theme-color2) !important;
}

.bg-gray {
    background-color: #f8f8f8 !important
}

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

.bg-gradient-color {
    background: linear-gradient(149.8deg, #f8f8fb 17.21%, #f3f5f9 79.21%)
}

.orange-color {
    color: #ffbc5d !important
}

.text-exo {
    font-family: "Exo 2",sans-serif
}

.text-russo {
    font-family: "Russo One",sans-serif
}

.text-pacifico {
    font-family: "Pacifico",cursive
}

.text-kaushan {
    font-family: "Kaushan Script",cursive
}

.text-great {
    font-family: "Great Vibes",cursive
}

.text-qwitcher {
    font-family: "Qwitcher Grypen",cursive
}

.w-58 {
    width: 58% !important
}

.colorpick-eyedropper-input-trigger {
    display: none
}

.hover-effect:hover {
    opacity: 1;
    -webkit-animation: flash 1.5s;
    animation: flash 1.5s
}

body {
    font-family: "Public Sans",sans-serif;
    position: relative;
    font-size: 14px;
    color: #222;
    margin: 0;
    background-color: #fff;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    padding-right: 0 !important
}

    body ::-moz-selection {
        color: #fff;
        background-color: var(--theme-color)
    }

    body ::selection {
        color: #fff;
        background-color: var(--theme-color)
    }

.bg-overlay {
    width: 100vw;
    height: 100vh;
    background-color: #222;
    position: fixed;
    z-index: 9;
    top: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    transition: .5s
}

    .bg-overlay.show {
        visibility: visible;
        opacity: .5
    }

ul {
    padding-left: 0;
    margin-bottom: 0
}

li {
    display: inline-block;
    font-size: 14px
}

p {
    font-size: 14px;
    line-height: 18px
}

a {
    color: var(--theme-color);
    -webkit-transition: .5s ease;
    transition: .5s ease;
    text-decoration: none
}

    a:hover {
        text-decoration: none;
        -webkit-transition: .5s ease;
        transition: .5s ease
    }

    a:focus {
        outline: none
    }

button:focus {
    outline: none
}

.btn-close:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

:focus {
    outline: none
}

.form-control {
    background-color: #fff
}

    .form-control:focus {
        -webkit-box-shadow: none;
        box-shadow: none;
        border-color: var(--theme-color)
    }

h1 {
    font-size: calc(40px + 30*(100vw - 320px)/1600);
    font-weight: 600;
    line-height: 1.1;
    text-transform: capitalize;
    margin: 0
}

h2 {
    font-size: calc(22px + 6*(100vw - 320px)/1600);
    font-weight: 600;
    line-height: 1;
    text-transform: capitalize;
    margin: 0
}

h3 {
    font-size: calc(16px + 4*(100vw - 320px)/1600);
    font-weight: 500;
    line-height: 1.2;
    margin: 0
}

h4 {
    font-size: calc(17px + 1*(100vw - 320px)/1600);
    line-height: 1.2;
    margin: 0;
    font-weight: 400
}

h5 {
    font-size: calc(15px + 1*(100vw - 320px)/1600);
    line-height: 1.2;
    margin: 0;
    font-weight: 400
}

h6 {
    font-size: calc(13px + 1*(100vw - 320px)/1600);
    line-height: 1.2;
    margin: 0;
    font-weight: 400
}

span {
    display: inline-block
}

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

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

.banner-contain {
    border-radius: 5px;
    overflow: hidden;
    position: relative
}

[dir=rtl] .banner-contain .banner-details {
    text-align: left
}

.banner-contain .banner-details.banner-b-space {
    padding: calc(27px + 18*(100vw - 320px)/1600) calc(20px + 120*(100vw - 320px)/1600)
}

.banner-contain .banner-details .banner-box {
    position: absolute;
    top: 30px;
    left: 0;
    background-color: rgba(255,255,255,.5);
    padding: calc(8px + 4*(100vw - 320px)/1600) calc(30px + 9*(100vw - 320px)/1600) calc(8px + 4*(100vw - 320px)/1600) calc(8px + 4*(100vw - 320px)/1600);
    border-radius: 0px 60px 60px 0px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    -webkit-box-shadow: 0px 11px 10px rgba(74,85,104,.06);
    box-shadow: 0px 11px 10px rgba(74,85,104,.06)
}

    .banner-contain .banner-details .banner-box h5 {
        margin: calc(4px + 2*(100vw - 320px)/1600) 0;
        font-size: calc(14px + 4*(100vw - 320px)/1600);
        font-weight: 600
    }

.banner-contain .banner-details .banner-button {
    position: absolute;
    bottom: calc(8px + 8*(100vw - 320px)/1600);
    left: calc(14px + 8*(100vw - 320px)/1600);
    color: #fff;
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.banner-contain .banner-details h2 {
    font-size: calc(20px + 22*(100vw - 320px)/1600)
}

    .banner-contain .banner-details h2.banner-title {
        font-size: calc(31px + 19*(100vw - 320px)/1600);
        font-weight: 700
    }

.banner-contain .banner-details h3 {
    font-size: calc(20px + 10*(100vw - 320px)/1600);
    margin-top: -7px
}

.banner-contain .banner-details h4 {
    font-size: calc(20px + 4*(100vw - 320px)/1600);
    line-height: 1.6
}

.banner-contain .banner-details .coupon-code {
    padding: calc(7px + 3*(100vw - 320px)/1600) calc(9px + 6*(100vw - 320px)/1600);
    background-color: rgba(var(--theme-color-rgb), 0.4);
    border: 2px dashed rgba(255,255,255,.5);
    display: inline-block;
    font-weight: 500;
    margin-top: 13px
}

.banner-contain .banner-details .coupon-code-white {
    background-color: rgba(255,255,255,.2)
}

.banner-contain .banner-details .coupon-code.code-2 {
    background-color: rgba(153,105,31,.5)
}

.banner-contain .banner-details p {
    color: #4a5568;
    line-height: 1.5
}

[dir=rtl] .banner-contain .banner-details p {
    margin-right: auto
}

.banner-contain .banner-details p.banner-text {
    width: 62%
}

@media(max-width: 575px) {
    .banner-contain .banner-details p.banner-text {
        width: 80%
    }
}

@media(max-width: 480px) {
    .banner-contain .banner-details p.banner-text {
        width: 100%
    }
}

.banner-contain .banner-details .banner-timing {
    width: 100%;
    height: 210px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(181.97deg, rgba(0, 0, 0, 0.3) 1.66%, rgba(0, 0, 0, 0) 95.27%);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    text-align: center;
    color: #fff
}

    .banner-contain .banner-details .banner-timing .time {
        margin-top: 25px
    }

        .banner-contain .banner-details .banner-timing .time ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
            justify-content: space-evenly
        }

            .banner-contain .banner-details .banner-timing .time ul li .counter {
                width: 55px;
                height: 70px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                border: 1px dashed #fff
            }

                .banner-contain .banner-details .banner-timing .time ul li .counter h5 {
                    font-weight: 600;
                    margin-bottom: 4px
                }

.blog-box:hover .blog-box-image a {
    -webkit-transform: scale(1.12) rotate(3deg);
    transform: scale(1.12) rotate(3deg);
    overflow: hidden
}

.blog-box:hover .blog-detail h5 {
    color: var(--theme-color)
}

.blog-box .blog-box-image {
    overflow: hidden;
    border-radius: 5px
}

    .blog-box .blog-box-image .blog-image {
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

.blog-box .blog-detail {
    margin-top: 15px;
    display: block
}

    .blog-box .blog-detail.blog-contain {
        background-color: #ff4f4f
    }

    .blog-box .blog-detail h6 {
        color: #4a5568;
        margin-bottom: 3px;
        font-weight: 600
    }

    .blog-box .blog-detail h5 {
        color: #222;
        line-height: 1.5;
        font-weight: 600;
        font-size: calc(15px + 3*(100vw - 320px)/1600);
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

.blog-section .blog-box {
    padding-bottom: 1px;
    border-radius: 10px;
    border: 1px solid #ececec;
    overflow: hidden;
    position: relative
}

    .blog-section .blog-box:hover .blog-box-image a {
        -webkit-transform: scale(1.12) rotate(3deg);
        transform: scale(1.12) rotate(3deg);
        overflow: hidden
    }

    .blog-section .blog-box:hover .blog-detail label {
        color: #fff
    }

        .blog-section .blog-box:hover .blog-detail label::before {
            opacity: 1
        }

    .blog-section .blog-box .blog-box-image {
        overflow: hidden;
        border-radius: 0
    }

        .blog-section .blog-box .blog-box-image a {
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

    .blog-section .blog-box .blog-image {
        position: relative
    }

        .blog-section .blog-box .blog-image label {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background-color: var(--theme-color);
            color: #fff;
            border-radius: 5px;
            border: none;
            padding: 8px 10px;
            font-size: 12px;
            letter-spacing: .9px;
            -webkit-box-shadow: 3px 3px 6px rgba(0,0,0,.2);
            box-shadow: 3px 3px 6px rgba(0,0,0,.2)
        }

    .blog-section .blog-box .blog-detail {
        padding: calc(11px + 9*(100vw - 320px)/1600);
        margin-top: 0
    }

        .blog-section .blog-box .blog-detail h2 {
            font-size: calc(18px + 4*(100vw - 320px)/1600);
            line-height: 1.4
        }

        .blog-section .blog-box .blog-detail label {
            font-size: 12px;
            padding: 7px 11px;
            border-radius: 50px;
            color: var(--theme-color);
            margin-bottom: calc(4px + 8*(100vw - 320px)/1600);
            position: relative;
            overflow: hidden;
            z-index: 0;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

            .blog-section .blog-box .blog-detail label::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background-color: var(--theme-color);
                opacity: .1;
                z-index: -1;
                -webkit-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out
            }

        .blog-section .blog-box .blog-detail a {
            color: #222;
            display: block
        }

        .blog-section .blog-box .blog-detail h3 {
            line-height: 1.4;
            margin-bottom: 5px;
            font-weight: 600
        }

        .blog-section .blog-box .blog-detail h5 {
            font-size: 15px;
            margin-top: 10px;
            font-weight: 500;
            color: #4a5568
        }

        .blog-section .blog-box .blog-detail .blog-list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            margin-top: 15px;
            gap: calc(14px + 8*(100vw - 320px)/1600)
        }

            .blog-section .blog-box .blog-detail .blog-list span {
                color: #4a5568;
                margin-bottom: -5px;
                font-size: calc(13px + 1*(100vw - 320px)/1600)
            }

            .blog-section .blog-box .blog-detail .blog-list .blog-social-icon {
                position: relative
            }

                .blog-section .blog-box .blog-detail .blog-list .blog-social-icon .icon {
                    position: absolute;
                    top: 0;
                    right: 0;
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-align: center;
                    -ms-flex-align: center;
                    align-items: center;
                    background-color: #fff;
                    -webkit-transition: all .3s ease-in-out;
                    transition: all .3s ease-in-out;
                    opacity: 0
                }

                    .blog-section .blog-box .blog-detail .blog-list .blog-social-icon .icon li {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        width: 20px;
                        height: 20px;
                        -webkit-transition: all .3s ease-in-out;
                        transition: all .3s ease-in-out
                    }

                        .blog-section .blog-box .blog-detail .blog-list .blog-social-icon .icon li .fab {
                            font-size: 14px;
                            color: #4a5568
                        }

                .blog-section .blog-box .blog-detail .blog-list .blog-social-icon:hover .icon {
                    opacity: 1
                }

footer {
    background-color: #f8f8f8;
    position: relative;
    z-index: 0
}

    footer::after {
        content: "";
        position: absolute;
        width: 30%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(../images/vegetable/footer-shape.png);
        background-repeat: no-repeat;
        z-index: -1
    }

@media(max-width: 1199px) {
    footer::after {
        content: none
    }
}

footer:before {
    content: "";
    position: absolute;
    width: 30%;
    height: 100%;
    bottom: 0;
    right: 0;
    background-image: url(../images/vegetable/footer-shape-2.png);
    background-repeat: no-repeat;
    z-index: -1
}

@media(max-width: 1199px) {
    footer:before {
        content: none
    }
}

footer .main-footer {
}

@media(max-width: 767px) {
    footer .main-footer {
        border: none;
        padding-top: 0
    }
}

footer .main-footer .footer-theme .footer-theme-contain {
    margin-top: calc(13px + 7*(100vw - 320px)/1600)
}

    footer .main-footer .footer-theme .footer-theme-contain p {
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        color: #4a5568;
        line-height: 27px;
        margin-bottom: 0
    }

    footer .main-footer .footer-theme .footer-theme-contain ul.address {
        margin-top: calc(17px + 13*(100vw - 320px)/1600)
    }

        footer .main-footer .footer-theme .footer-theme-contain ul.address li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

            footer .main-footer .footer-theme .footer-theme-contain ul.address li .feather {
                width: 18px;
                height: 18px;
                stroke: #4a5568
            }

            footer .main-footer .footer-theme .footer-theme-contain ul.address li p {
                margin: 1px 0 0 10px;
                color: #4a5568
            }

[dir=rtl] footer .main-footer .footer-theme .footer-theme-contain ul.address li p {
    margin: 1px 10px 0 0
}

footer .main-footer .footer-theme .footer-theme-contain ul li {
    display: block;
    font-size: calc(14px + 2*(100vw - 320px)/1600)
}

    footer .main-footer .footer-theme .footer-theme-contain ul li a:hover {
        color: #4a5568
    }

    footer .main-footer .footer-theme .footer-theme-contain ul li + li {
        margin-top: calc(4px + 11*(100vw - 320px)/1600)
    }

footer .main-footer .footer-logo .theme-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media(max-width: 575px) {
    footer .main-footer .footer-logo .theme-logo {
        margin-bottom: 15px
    }
}

footer .main-footer .footer-logo .theme-logo a img {
    width: calc(250px + 40*(100vw - 320px)/1600);
}

footer .main-footer .footer-logo .theme-logo h4 {
    margin-left: 10px
}

footer .main-footer .footer-logo .footer-logo-contain {
    margin: calc(13px + 7*(100vw - 320px)/1600) 0
}

    footer .main-footer .footer-logo .footer-logo-contain p {
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        color: #4a5568;
        line-height: 27px;
        margin-bottom: 0;
        width: 88%
    }

@media(max-width: 360px) {
    footer .main-footer .footer-logo .footer-logo-contain p {
        width: 100%
    }
}

footer .main-footer .footer-logo .footer-logo-contain .address {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(8px + 7*(100vw - 320px)/1600);
    margin-top: calc(7px + 23*(100vw - 320px)/1600)
}

[dir=rtl] footer .main-footer .footer-logo .footer-logo-contain .address {
    padding-left: unset;
    padding-right: 0
}

footer .main-footer .footer-logo .footer-logo-contain .address li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%
}

    footer .main-footer .footer-logo .footer-logo-contain .address li:hover a {
        color: var(--theme-color)
    }

    footer .main-footer .footer-logo .footer-logo-contain .address li:hover .feather {
        stroke: var(--theme-color)
    }

    footer .main-footer .footer-logo .footer-logo-contain .address li .feather {
        width: 18px;
        height: 18px;
        stroke: #4a5568
    }

    footer .main-footer .footer-logo .footer-logo-contain .address li a {
        margin: 0 0 0 10px;
        color: #4a5568;
        line-height: 18px;
        font-size: calc(14px + 2*(100vw - 320px)/1600)
    }

[dir=rtl] footer .main-footer .footer-logo .footer-logo-contain .address li a {
    margin-right: 10px;
    margin-left: unset
}

footer .main-footer .footer-title h4 {
    font-size: calc(17px + 3*(100vw - 320px)/1600);
    font-weight: 600
}

@media(max-width: 575px) {
    footer .main-footer .footer-title h4 {
        font-weight: 500
    }
}

footer .main-footer .footer-contain {
    margin-top: calc(8px + 12*(100vw - 320px)/1600)
}

    footer .main-footer .footer-contain p {
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        color: #4a5568;
        line-height: 27px;
        margin-bottom: 0
    }

    footer .main-footer .footer-contain ul.address {
        margin-top: calc(17px + 13*(100vw - 320px)/1600)
    }

        footer .main-footer .footer-contain ul.address li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start
        }

            footer .main-footer .footer-contain ul.address li .feather {
                width: 18px;
                height: 18px;
                stroke: #4a5568
            }

            footer .main-footer .footer-contain ul.address li p, footer .main-footer .footer-contain ul.address li a {
                margin: 0 0 0 10px;
                color: #4a5568;
                line-height: 18px
            }

[dir=rtl] footer .main-footer .footer-contain ul.address li p, [dir=rtl] footer .main-footer .footer-contain ul.address li a {
    margin-right: 10px;
    margin-left: unset
}

footer .main-footer .footer-contain ul li {
    display: block;
    font-size: calc(14px + 2*(100vw - 320px)/1600)
}

    footer .main-footer .footer-contain ul li a {
        display: inline-block;
        position: relative
    }

        footer .main-footer .footer-contain ul li a::before {
            content: "";
            position: absolute;
            width: 0;
            height: 2px;
            left: 0;
            bottom: 0;
            background-color: var(--theme-color);
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

[dir=rtl] footer .main-footer .footer-contain ul li a::before {
    left: unset;
    right: 0
}

footer .main-footer .footer-contain ul li a::after {
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    left: -13px;
    background-color: var(--theme-color);
    border-radius: 100%;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

[dir=rtl] footer .main-footer .footer-contain ul li a::after {
    left: unset;
    right: -13px
}

footer .main-footer .footer-contain ul li a:hover {
    color: var(--theme-color);
    margin-left: 13px
}

[dir=rtl] footer .main-footer .footer-contain ul li a:hover {
    margin-left: unset;
    margin-right: 13px
}

footer .main-footer .footer-contain ul li a:hover::before {
    width: 100%
}

footer .main-footer .footer-contain ul li a:hover::after {
    opacity: 1
}

footer .main-footer .footer-contain ul li + li {
    margin-top: calc(4px + 11*(100vw - 320px)/1600)
}

footer .main-footer .social-app::before {
    content: none
}

footer .main-footer .social-app ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    footer .main-footer .social-app ul li {
        display: inline-block
    }

        footer .main-footer .social-app ul li::before {
            content: none !important
        }

        footer .main-footer .social-app ul li a {
            display: block
        }

            footer .main-footer .social-app ul li a img {
                width: calc(114px + 26*(100vw - 320px)/1600)
            }

footer .main-footer .footer-contact {
    margin-top: calc(13px + 7*(100vw - 320px)/1600)
}

[dir=rtl] footer .main-footer .footer-contact {
    padding-left: unset;
    padding-right: 0
}

footer .main-footer .footer-contact ul li {
    display: block;
    margin-bottom: calc(30px + 20*(100vw - 320px)/1600);
    position: relative
}

    footer .main-footer .footer-contact ul li:last-child {
        margin-bottom: 0
    }

        footer .main-footer .footer-contact ul li:last-child::before {
            content: none
        }

    footer .main-footer .footer-contact ul li.social-app ul li a {
        display: block
    }

        footer .main-footer .footer-contact ul li.social-app ul li a img {
            width: 139px
        }

    footer .main-footer .footer-contact ul li::before {
        content: "";
        position: absolute;
        bottom: -24px;
        right: 0;
        width: calc(100% - 33px);
        border-bottom: 1px dashed #c1c1c1
    }

[dir=rtl] footer .main-footer .footer-contact ul li::before {
    right: unset;
    left: 0
}

@media(max-width: 1460px) {
    footer .main-footer .footer-contact ul li::before {
        bottom: -20px
    }
}

@media(max-width: 991px) {
    footer .main-footer .footer-contact ul li::before {
        bottom: -18px
    }
}

@media(max-width: 767px) {
    footer .main-footer .footer-contact ul li::before {
        bottom: -16px
    }
}

@media(max-width: 360px) {
    footer .main-footer .footer-contact ul li::before {
        bottom: -13px
    }
}

footer .main-footer .footer-contact ul li .footer-number {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 12px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

    footer .main-footer .footer-contact ul li .footer-number .feather {
        width: 18px;
        height: 18px;
        stroke: #4a5568
    }

    footer .main-footer .footer-contact ul li .footer-number .contact-number h5 {
        margin-top: 6px;
        font-weight: 600;
        color: #222
    }

footer .sub-footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-top: 1px dashed #c1c1c1
}

@media(max-width: 991px) {
    footer .sub-footer {
        display: block;
        text-align: center
    }
}

@media(max-width: 767px) {
    footer .sub-footer {
        margin-bottom: 66px;
        margin-bottom: 0px;
    }
}

@media(max-width: 991px) {
    footer .sub-footer .payment {
        margin: 8px 0
    }
}

footer .sub-footer .social-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media(max-width: 991px) {
    footer .sub-footer .social-link {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

footer .sub-footer .social-link h6 {
    margin-right: 10px
}

[dir=rtl] footer .sub-footer .social-link h6 {
    margin-left: 10px;
    margin-right: unset
}

footer .sub-footer .social-link ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    footer .sub-footer .social-link ul li:hover i {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px)
    }

    footer .sub-footer .social-link ul li a {
        display: block
    }

        footer .sub-footer .social-link ul li a i {
            color: #4a5568;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

    footer .sub-footer .social-link ul li + li {
        margin-left: 8px
    }

[dir=rtl] footer .sub-footer .social-link ul li + li {
    margin-left: unset;
    margin-right: 8px
}

footer .sub-footer ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 6px
}

@media(max-width: 991px) {
    footer .sub-footer ul {
        display: block;
        text-align: center
    }
}

footer .sub-footer ul li {
    display: block
}

.footer-section-2 {
    background-color: #f8f8f8
}

    .footer-section-2::before, .footer-section-2::after {
        content: none
    }

    .footer-section-2 .download-image {
        margin-top: calc(20px + 10*(100vw - 320px)/1600)
    }

    .footer-section-2.footer-color-2 {
        background-color: #051616
    }

    .footer-section-2.footer-color-3 {
        background-color: #1d2328
    }

    .footer-section-2 .main-footer {
        padding-bottom: calc(18px + 32*(100vw - 320px)/1600);
        border-top: unset
    }

        .footer-section-2 .main-footer .foot-logo img {
            width: calc(120px + 40*(100vw - 320px)/1600)
        }

        .footer-section-2 .main-footer .information-text {
            margin-bottom: 0;
            margin-top: calc(5px + 15*(100vw - 320px)/1600);
            color: #4a5568;
            font-weight: 400;
            font-size: calc(14px + 2*(100vw - 320px)/1600);
            line-height: 1.7
        }

        .footer-section-2 .main-footer .information-text-2 {
            color: #bfbfbf;
            margin-top: calc(18px + 12*(100vw - 320px)/1600)
        }

        .footer-section-2 .main-footer .social-icon {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            gap: 6px;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-top: 10px;
            margin-bottom: 20px
        }

[dir=rtl] .footer-section-2 .main-footer .social-icon {
    padding-left: unset;
    padding-right: 0
}

.footer-section-2 .main-footer .social-icon li {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    z-index: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

    .footer-section-2 .main-footer .social-icon li.light-bg::after {
        background-color: #fff;
        opacity: .1;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

    .footer-section-2 .main-footer .social-icon li.light-bg:hover::after {
        opacity: .3
    }

    .footer-section-2 .main-footer .social-icon li::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: var(--theme-color);
        opacity: .06;
        border-radius: 50%;
        z-index: -1;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

    .footer-section-2 .main-footer .social-icon li:hover::after {
        opacity: 1
    }

    .footer-section-2 .main-footer .social-icon li:hover i {
        color: #fff
    }

    .footer-section-2 .main-footer .social-icon li a {
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        color: #4a5568
    }

        .footer-section-2 .main-footer .social-icon li a i {
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

        .footer-section-2 .main-footer .social-icon li a.footer-link-color {
            color: #fff
        }

.footer-section-2 .main-footer .download-app {
    margin-top: 20px
}

    .footer-section-2 .main-footer .download-app span {
        margin-bottom: 0;
        margin-top: 20px;
        color: #4a5568;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.5
    }

    .footer-section-2 .main-footer .download-app img {
        width: 110px;
        margin-left: 8px
    }

.footer-section-2 .main-footer .footer-title {
    margin-bottom: calc(13px + 23*(100vw - 320px)/1600);
    font-size: calc(18px + 4*(100vw - 320px)/1600);
    font-family: "Public Sans",sans-serif;
    font-weight: 600;
    position: relative
}

.footer-section-2 .main-footer .footer-list-light li a:hover {
    color: #fff
}

.footer-section-2 .main-footer .footer-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(7px + 9*(100vw - 320px)/1600)
}

[dir=rtl] .footer-section-2 .main-footer .footer-list {
    padding-right: 0
}

.footer-section-2 .main-footer .footer-list li {
    display: block;
    width: 100%
}

@media(max-width: 575px) {
    .footer-section-2 .main-footer .footer-list li:last-child {
        margin-bottom: 16px
    }
}

.footer-section-2 .main-footer .footer-list li a {
    color: #4a5568;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 16px
}

    .footer-section-2 .main-footer .footer-list li a i {
        margin-right: 10px
    }

[dir=rtl] .footer-section-2 .main-footer .footer-list li a i {
    margin-right: unset;
    margin-left: 10px
}

.footer-section-2 .main-footer .footer-list li a.light-text {
    color: #bfbfbf
}

.footer-section-2 .main-footer .footer-list li a:hover {
    color: #fff;
    padding-left: 14px
}

[dir=rtl] .footer-section-2 .main-footer .footer-list li a:hover {
    padding-left: unset;
    padding-right: 14px
}

.footer-section-2 .main-footer .footer-list li a:hover::before {
    left: 0;
    opacity: .7
}

[dir=rtl] .footer-section-2 .main-footer .footer-list li a:hover::before {
    left: unset;
    right: 0
}

.footer-section-2 .main-footer .footer-list li a:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: -20px;
    border-radius: 100%;
    opacity: 0;
    background-color: #fff;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

[dir=rtl] .footer-section-2 .main-footer .footer-list li a:before {
    left: unset;
    right: -20px
}

.footer-section-2 .main-footer .footer-list li a.footer-contain-2::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    width: unset;
    height: unset;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "";
    left: 0;
    opacity: 0;
    background: none;
    color: var(--theme-color)
}

.footer-section-2 .main-footer .footer-list li a.footer-contain-2:hover {
    padding-left: 6px;
    color: var(--theme-color)
}

    .footer-section-2 .main-footer .footer-list li a.footer-contain-2:hover::before {
        opacity: 1
    }

[dir=rtl] .footer-section-2 .main-footer .footer-address {
    padding-right: 0
}

.footer-section-2 .main-footer .footer-address li {
    margin-bottom: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .footer-section-2 .main-footer .footer-address li:last-child {
        margin-bottom: 0
    }

    .footer-section-2 .main-footer .footer-address li a {
        color: #4a5568;
        position: relative;
        font-size: 16px;
        display: block;
        width: 100%
    }

        .footer-section-2 .main-footer .footer-address li a.light-text {
            color: #bfbfbf
        }

        .footer-section-2 .main-footer .footer-address li a .inform-box {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

            .footer-section-2 .main-footer .footer-address li a .inform-box.flex-start-box {
                -webkit-box-align: start;
                -ms-flex-align: start;
                align-items: flex-start
            }

            .footer-section-2 .main-footer .footer-address li a .inform-box .feather {
                margin-right: 10px;
                width: 20px
            }

[dir=rtl] .footer-section-2 .main-footer .footer-address li a .inform-box .feather {
    margin-right: unset;
    margin-left: 10px
}

.footer-section-2 .main-footer .footer-address li a .inform-box p {
    margin: -3px 0 0;
    width: calc(100% + -36*(100vw - 320px)/1600);
    font-size: 16px;
    line-height: 30px
}

.footer-section-2 .sub-footer {
    border-top: 1px solid #ececec
}

.footer-section-2 .sub-footer-lite {
    border-top: 1px solid rgba(236,236,236,.2)
}

.footer-section-2 .sub-footer p {
    margin-bottom: 0;
    font-size: 15px;
    color: #4a5568;
    text-transform: capitalize
}

    .footer-section-2 .sub-footer p.light-text {
        color: #bfbfbf
    }

.footer-section-2 .sub-footer .payment-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

@media(max-width: 1199px) {
    .footer-section-2 .sub-footer .payment-box {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-top: 10px
    }
}

.footer-section-2 .sub-footer .payment-box li {
    margin: 0 5px
}

    .footer-section-2 .sub-footer .payment-box li img {
        width: 40px;
        margin-bottom: -6px;
        display: block
    }

.footer-sm {
    margin-left: 320px;
    background-color: #fff
}

[dir=rtl] .footer-sm {
    margin-left: unset;
    margin-right: 320px
}

@media(max-width: 1199px) {
    .footer-sm {
        margin-left: 0
    }

    [dir=rtl] .footer-sm {
        margin-left: unset;
        margin-right: 0
    }
}

.footer-sm:after, .footer-sm:before {
    display: none
}

.footer-sm .sub-footer {
    border-top: none;
    padding: 20px 0
}

.onhover-category-box {
    position: absolute;
    top: 0;
    left: 100%;
    background: #fff;
    -webkit-box-shadow: 0 0 8px #ddd;
    box-shadow: 0 0 8px #ddd;
    padding: 20px 25px;
    border-radius: 5px;
    width: 520px;
    height: 100%;
    overflow: auto;
    display: grid;
    grid-template-columns: auto auto;
    opacity: 0;
    visibility: hidden;
    margin-left: 14px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

[dir=rtl] .onhover-category-box {
    margin-left: unset;
    margin-right: 14px
}

@media(max-width: 1199px) {
    .onhover-category-box {
        grid-template-columns: auto;
        display: block;
        width: 100%
    }

        .onhover-category-box .list-2 {
            margin-top: 15px
        }
}

@media(max-width: 767px) {
    .onhover-category-box {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding: 12px 11px;
        margin-top: 7px;
        opacity: 1;
        visibility: visible;
        margin-left: 0
    }
}

.onhover-category-box .category-title-box {
    margin-bottom: calc(8px + 12*(100vw - 320px)/1600);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .onhover-category-box .category-title-box h5 {
        font-weight: 600
    }

.onhover-category-box ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(4px + 7*(100vw - 320px)/1600)
}

    .onhover-category-box ul li {
        position: relative
    }

        .onhover-category-box ul li::after {
            content: "";
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            left: 0;
            width: 5px;
            height: 5px;
            background-color: #4a5568;
            border-radius: 100%
        }

        .onhover-category-box ul li a {
            margin-left: 13px
        }

.mobile-menu {
    position: fixed;
    bottom: 0;
    padding: 10px;
    width: 100%;
    background-color: var(--theme-color2);
    z-index: 2;
    overflow: hidden;
    -webkit-box-shadow: 0 -3px 10px 0px rgba(0,0,0,.08);
    box-shadow: 0 -3px 10px 0px rgba(0,0,0,.08)
}

[dir=rtl] .mobile-menu {
    left: 0
}

.mobile-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 70%;
    margin: 0 auto
}

@media(max-width: 767px) {
    .mobile-menu ul {
        width: 80%
    }
}

@media(max-width: 480px) {
    .mobile-menu ul {
        width: 95%
    }
}

@media(max-width: 360px) {
    .mobile-menu ul {
        width: 100%
    }
}

[dir=rtl] .mobile-menu ul {
    padding: 0
}

.mobile-menu ul li {
    width: 100%;
    text-align: center
}

    .mobile-menu ul li.active {
        -webkit-transition: .3s ease;
        transition: .3s ease;
        position: relative
    }

        .mobile-menu ul li.active::before {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            bottom: -15px;
            left: 50%;
            -webkit-transform: translateX(-50%) rotate(45deg);
            transform: translateX(-50%) rotate(45deg);
            background-color: #fff;
            border-radius: 100%
        }

    .mobile-menu ul li a {
        display: block
    }

        .mobile-menu ul li a img {
            display: block;
            margin: 0px auto
        }

        .mobile-menu ul li a.active, .mobile-menu ul li a:hover {
            color: #222
        }

@media(max-width: 360px) {
    .mobile-menu ul li a {
        font-size: 13px
    }
}

.mobile-menu ul li a .icli {
    display: inline-block;
    margin: 0 auto;
    font-size: calc(20px + 2*(100vw - 320px)/1600);
    color: #fff
}

.mobile-menu ul li a span {
    display: block;
    color: #fff
}

.bg-effect {
    background-image: url("/images/bg-body.png");
    background-repeat: no-repeat;
    background-position: center
}

.newsletter-section .newsletter-box {
    border-radius: 10px;
    position: relative;
    overflow: hidden
}

.newsletter-section .newsletter-box-2:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("/images/vegetable/newsletter/1.jpg");
    background-image: url('/img/CTA/2.webp');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    z-index: -1
}

[dir=rtl] .newsletter-section .newsletter-box-2:after {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    -webkit-filter: FlipH;
    filter: FlipH
}

.newsletter-section .newsletter-box-3:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("/images/vegetable/newsletter/2.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    z-index: -1
}

[dir=rtl] .newsletter-section .newsletter-box-3:after {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    -webkit-filter: FlipH;
    filter: FlipH
}

.newsletter-section .newsletter-box .newsletter-contain .newsletter-detail h2 {
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px
}

.newsletter-section .newsletter-box .newsletter-contain .newsletter-detail h5 {
    font-weight: 600;
    color: #ffbc5d;
    margin-bottom: calc(14px + 6*(100vw - 320px)/1600);
    font-size: calc(16px + 2*(100vw - 320px)/1600)
}

.newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box {
    position: relative
}

    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box ::-webkit-input-placeholder {
        font-size: 14px;
        color: #4a5568
    }

    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box ::-moz-placeholder {
        font-size: 14px;
        color: #4a5568
    }

    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box :-ms-input-placeholder {
        font-size: 14px;
        color: #4a5568
    }

    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box ::-ms-input-placeholder {
        font-size: 14px;
        color: #4a5568
    }

    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box ::placeholder {
        font-size: 14px;
        color: #4a5568
    }

@media(max-width: 360px) {
    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box ::-webkit-input-placeholder {
        padding-left: 0
    }

    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box ::-moz-placeholder {
        padding-left: 0
    }

    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box :-ms-input-placeholder {
        padding-left: 0
    }

    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box ::-ms-input-placeholder {
        padding-left: 0
    }

    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box ::placeholder {
        padding-left: 0
    }
}

.newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box input {
    height: calc(41px + 11*(100vw - 320px)/1600);
    border-radius: 5px;
    border: none;
    padding-left: 45px;
    padding-right: 140px
}

@media(max-width: 575px) {
    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box input {
        padding-right: 42px
    }
}

[dir=rtl] .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box input {
    text-align: left
}

@media(max-width: 360px) {
    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box input {
        padding-left: 12px
    }
}

.newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box .arrow {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    padding: 8px;
    background-color: rgba(var(--theme-color-rgb), 0.1);
    font-size: 15px;
    left: 8px;
    -webkit-text-stroke: 1px var(--theme-color);
    color: rgba(0,0,0,0)
}

@media(max-width: 360px) {
    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box .arrow {
        display: none
    }
}

.newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box .sub-btn {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #ff4f4f;
    position: absolute;
    right: 3px;
    border-radius: 3px;
    border: none;
    padding: calc(10px + 2*(100vw - 320px)/1600) calc(8px + 13*(100vw - 320px)/1600);
    font-size: calc(14px + 1*(100vw - 320px)/1600);
    color: #fff;
    font-weight: 500;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box .sub-btn i {
        margin-left: 6px
    }

[dir=rtl] .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box .sub-btn i {
    margin-left: unset;
    margin-right: 6px
}

@media(max-width: 575px) {
    .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box .sub-btn i {
        margin-left: 0
    }

    [dir=rtl] .newsletter-section .newsletter-box .newsletter-contain .newsletter-detail .input-box .sub-btn i {
        margin-left: unset;
        margin-right: 0
    }
}

.newsletter-section-2 .newsletter-box {
    border-radius: 10px;
    overflow: hidden;
    position: relative
}

    .newsletter-section-2 .newsletter-box .newsletter-detail {
        width: 100%;
        height: 100%;
        padding: calc(20px + 110*(100vw - 320px)/1600);
        z-index: 1
    }

        .newsletter-section-2 .newsletter-box .newsletter-detail h2 {
            font-size: calc(18px + 18*(100vw - 320px)/1600);
            margin-bottom: 10px
        }

        .newsletter-section-2 .newsletter-box .newsletter-detail h4 {
            margin-bottom: 8px;
            font-size: calc(15px + 5*(100vw - 320px)/1600);
            line-height: 1.3;
            font-weight: 300
        }

        .newsletter-section-2 .newsletter-box .newsletter-detail .download-app {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap
        }

@media(max-width: 767px) {
    .newsletter-section-2 .newsletter-box .newsletter-detail .download-app {
        display: block
    }
}

.newsletter-section-2 .newsletter-box .newsletter-detail .download-app h3 {
    margin-right: 15px;
    font-weight: 400
}

[dir=rtl] .newsletter-section-2 .newsletter-box .newsletter-detail .download-app h3 {
    margin-right: unset;
    margin-left: 15px
}

@media(max-width: 767px) {
    .newsletter-section-2 .newsletter-box .newsletter-detail .download-app h3 {
        margin-bottom: 10px
    }
}

.newsletter-section-2 .newsletter-box .newsletter-detail .download-app .download-app-image {
    margin: 0 -3px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

    .newsletter-section-2 .newsletter-box .newsletter-detail .download-app .download-app-image li {
        margin: 0 3px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

.newsletter-section-2 .newsletter-box .shape-box {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    text-align: center
}

    .newsletter-section-2 .newsletter-box .shape-box:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url(../images/veg-3/shape/circle.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        -webkit-animation: rounded infinite 30s linear;
        animation: rounded infinite 30s linear;
        right: 0;
        top: 0;
        z-index: -1
    }

.add-to-cart-box {
    background-color: #f8f8f8;
    border-radius: 50px;
    position: relative;
    max-width: 250px
}

    .add-to-cart-box .btn-add-cart {
        padding: calc(8px + 2*(100vw - 320px)/1600) 0;
        width: 100%;
        font-size: calc(14px + 1*(100vw - 320px)/1600);
        margin-top: 10px;
        color: #4a5568;
        border-radius: 50px;
        font-weight: 500
    }

        .add-to-cart-box .btn-add-cart .add-icon {
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: calc(30px + 7*(100vw - 320px)/1600);
            height: calc(30px + 7*(100vw - 320px)/1600);
            background-color: #fff;
            border-radius: 100%;
            color: var(--theme-color);
            position: absolute;
            right: 4px
        }

            .add-to-cart-box .btn-add-cart .add-icon.bg-light-orange {
                background-color: #f9f8f6
            }

            .add-to-cart-box .btn-add-cart .add-icon.bg-light-gray {
                background-color: #f8f8f8
            }

@media(max-width: 480px) {
    .add-to-cart-box .btn-add-cart .add-icon {
        display: none
    }
}

.add-to-cart-box .btn-add-cart .add-icon i {
    font-size: 13px
}

.add-to-cart-box .qty-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    display: none
}

    .add-to-cart-box .qty-box.open {
        display: block
    }

    .add-to-cart-box .qty-box .input-group {
        background-color: #f8f8f8;
        border-radius: 50px;
        padding: 4px;
        text-align: center;
        z-index: 0
    }

        .add-to-cart-box .qty-box .input-group.theme-bg-white {
            background-color: #fff
        }

        .add-to-cart-box .qty-box .input-group button {
            width: calc(29px + 6*(100vw - 320px)/1600);
            height: calc(29px + 6*(100vw - 320px)/1600);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            border: none;
            padding: 0;
            background-color: #fff;
            z-index: 0;
            border-radius: 100% !important
        }

            .add-to-cart-box .qty-box .input-group button i {
                font-size: 13px;
                color: var(--theme-color);
                margin-top: 1px
            }

            .add-to-cart-box .qty-box .input-group button:focus {
                -webkit-box-shadow: none;
                box-shadow: none
            }

        .add-to-cart-box .qty-box .input-group input {
            height: auto;
            background-color: rgba(0,0,0,0);
            border: none;
            padding: 0;
            text-align: center;
            font-size: 14px;
            color: #4a5568
        }

.qty-box {
    margin-top: 10px;
    width: 100%;
    max-width: 250px
}

    .qty-box .input-group {
        background-color: #f8f8f8;
        border-radius: 7px;
        padding: 4px;
        text-align: center;
        z-index: 0
    }

        .qty-box .input-group.theme-bg-white {
            background-color: #fff
        }

        .qty-box .input-group button {
            width: calc(26px + 9*(100vw - 320px)/1600);
            height: calc(26px + 9*(100vw - 320px)/1600);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            border: none;
            padding: 0;
            background-color: #fff;
            z-index: 0;
            border-radius: 4px !important
        }

            .qty-box .input-group button i {
                font-size: 13px;
                color: var(--theme-color);
                margin-top: 1px
            }

            .qty-box .input-group button:focus {
                -webkit-box-shadow: none;
                box-shadow: none
            }

        .qty-box .input-group input {
            height: auto;
            background-color: rgba(0,0,0,0);
            border: none;
            padding: 0;
            text-align: center;
            font-size: 14px;
            color: #4a5568
        }

.category-menu {
    background-color: #f8f8f8;
    padding: calc(12px + 21*(100vw - 320px)/1600);
    border-radius: 5px
}

.category-menu-2 {
    background: linear-gradient(136.8deg, #f6f5f2 17.01%, #fdf7f0 93.97%)
}

.category-menu h3 {
    margin-bottom: 40px;
    font-weight: 600;
    position: relative;
    display: inline-block
}

    .category-menu h3::before {
        content: "";
        position: absolute;
        width: 70%;
        height: 2px;
        bottom: -8px;
        left: 0;
        background-color: var(--theme-color)
    }

[dir=rtl] .category-menu h3::before {
    left: unset;
    right: 0
}

.category-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 23px;
    border-bottom: 1px dashed rgba(74,85,104,.5)
}

    .category-menu ul.value-list {
        margin-top: 35px;
        border: none
    }

    .category-menu ul li {
        display: block;
        width: 100%
    }

        .category-menu ul li.pb-30 {
            margin-bottom: 30px
        }

        .category-menu ul li .category-list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
            gap: calc(10px + 6*(100vw - 320px)/1600);
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            color: #222
        }

            .category-menu ul li .category-list:hover h5 a {
                letter-spacing: .5px
            }

                .category-menu ul li .category-list:hover h5 a:before {
                    width: 70px
                }

            .category-menu ul li .category-list svg {
                width: 25px;
                height: 25px;
                stroke: #222
            }

            .category-menu ul li .category-list img {
                width: 25px;
                height: 25px;
                -o-object-fit: contain;
                object-fit: contain
            }

            .category-menu ul li .category-list h5 a {
                color: #222;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                overflow: hidden;
                position: relative;
                z-index: 0;
                -webkit-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out
            }

                .category-menu ul li .category-list h5 a:hover {
                    color: #222
                }

                .category-menu ul li .category-list h5 a::before {
                    content: "";
                    position: absolute;
                    width: 0;
                    height: 3px;
                    bottom: 0;
                    left: 0;
                    opacity: .5;
                    border-radius: 50px;
                    background-color: var(--theme-color);
                    z-index: -1;
                    -webkit-transition: all .3s ease-in-out;
                    transition: all .3s ease-in-out
                }

[dir=rtl] .category-menu ul li .category-list h5 a::before {
    left: unset;
    right: 0
}

.category-menu ul li .category-list i {
    margin-left: auto
}

.category-menu.menu-xl {
    position: sticky;
    top: 130px
}

    .category-menu.menu-xl ul {
        gap: 28px;
        border-bottom: none
    }

        .category-menu.menu-xl ul li .category-list img {
            width: 35px;
            height: 35px
        }

        .category-menu.menu-xl ul li .category-list h5 {
            font-size: 17px
        }

.middle-image {
    width: 100%;
    height: 100%
}

    .middle-image img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
        object-fit: contain
    }

.product-list-section.list-style > div {
    width: 100%
}

    .product-list-section.list-style > div .product-box-3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: calc(14px + 10*(100vw - 320px)/1600)
    }

        .product-list-section.list-style > div .product-box-3 .product-header {
            width: 180px
        }

@media(max-width: 767px) {
    .product-list-section.list-style > div .product-box-3 .product-header {
        width: 100%
    }
}

@media(max-width: 767px) {
    .product-list-section.list-style > div .product-box-3 {
        display: block
    }
}

.product-list-section.list-style > div .product-box-3 .product-footer {
    padding-left: 20px;
    width: calc(100% - 180px)
}

    .product-list-section.list-style > div .product-box-3 .product-footer .product-detail .span-name {
        display: none
    }

[dir=rtl] .product-list-section.list-style > div .product-box-3 .product-footer {
    padding-left: unset;
    padding-right: 20px
}

@media(max-width: 767px) {
    .product-list-section.list-style > div .product-box-3 .product-footer {
        padding: 0;
        width: 100%;
        margin-top: 20px
    }
}

.product-list-section.list-style > div .product-box-3 .product-footer .product-content {
    display: block;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.product-list-section.list-style > div .product-box-3 .product-footer .product-detail .qty-box {
    width: unset
}

.product-box-3 {
    padding: calc(7px + 7*(100vw - 320px)/1600);
    position: relative;
    background-color: #f8f8f8;
    border-radius: 5px;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out
}

    .product-box-3.theme-bg-white {
        background-color: #fff
    }

    .product-box-3:hover {
        -webkit-box-shadow: 0 0 8px rgba(34,34,34,.08);
        box-shadow: 0 0 8px rgba(34,34,34,.08)
    }

        .product-box-3:hover .product-header .product-image .product-option {
            bottom: 10px;
            opacity: 1
        }

        .product-box-3:hover .product-header .product-image img {
            -webkit-transform: scale(1.1);
            transform: scale(1.1)
        }

    .product-box-3 .product-header {
        position: relative
    }

        .product-box-3 .product-header .product-image {
            text-align: center;
            padding: 20px;
            display: block
        }

@media(max-width: 480px) {
    .product-box-3 .product-header .product-image {
        padding: 8px
    }
}

.product-box-3 .product-header .product-image img {
    width: 100%;
    height: calc(100px + 40*(100vw - 320px)/1600);
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.product-box-3 .product-header .product-image .product-option {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    bottom: -5px;
    background-color: #fff;
    width: 100%;
    padding: 10px 5px;
    border-radius: 7px;
    -webkit-box-shadow: 0 0 8px rgba(34,34,34,.12);
    box-shadow: 0 0 8px rgba(34,34,34,.12);
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    max-width: 230px
}

@media(max-width: 480px) {
    .product-box-3 .product-header .product-image .product-option {
        display: none
    }
}

.product-box-3 .product-header .product-image .product-option li {
    position: relative;
    width: 33.33%
}

    .product-box-3 .product-header .product-image .product-option li a {
        color: #222
    }

        .product-box-3 .product-header .product-image .product-option li a .feather {
            width: 17px;
            height: auto;
            color: #4a5568
        }

    .product-box-3 .product-header .product-image .product-option li + li:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #4a5568;
        opacity: .3
    }

[dir=rtl] .product-box-3 .product-header .product-image .product-option li + li:after {
    left: unset;
    right: 0
}

.product-box-3 .product-header .product-header-top {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

[dir=rtl] .product-box-3 .product-header .product-header-top {
    left: unset;
    right: 0
}

.product-box-3 .product-header .product-header-top .label-new {
    position: relative;
    border-radius: 4px;
    padding: 3px 8px;
    color: #fff
}

    .product-box-3 .product-header .product-header-top .label-new.bg-warning {
        background: -webkit-gradient(linear, right top, left top, color-stop(-14.53%, #ffbf65), color-stop(99.15%, #ffad39)) !important;
        background: linear-gradient(-90deg, #ffbf65 -14.53%, #ffad39 99.15%) !important
    }

    .product-box-3 .product-header .product-header-top .label-new.bg-theme {
        background: var(--theme-color2) !important
    }

    .product-box-3 .product-header .product-header-top .label-new label {
        font-size: 13px;
        margin-top: 1px;
        font-weight: 600
    }

.product-box-3 .product-header .product-header-top .wishlist-button {
    position: relative;
    padding: 6px;
    margin-left: auto;
    background-color: #fff;
    -webkit-box-shadow: 0 3px 3px rgba(34,34,34,.24);
    box-shadow: 0 3px 3px rgba(34,34,34,.24);
    border-radius: 100%;
    z-index: 0
}

[dir=rtl] .product-box-3 .product-header .product-header-top .wishlist-button {
    margin-left: unset;
    margin-right: auto
}

.product-box-3 .product-header .product-header-top .wishlist-button .feather {
    width: 15px;
    height: 15px;
    color: #4a5568
}

.product-box-3 .product-header .product-header-top .close-button {
    position: relative;
    padding: 0;
    z-index: 0
}

    .product-box-3 .product-header .product-header-top .close-button .feather {
        width: 20px;
        height: auto;
        color: #4a5568
    }

.product-box-3 .product-footer .product-detail .span-name {
    font-size: 13px;
    color: #50607c;
    margin-bottom: calc(4px + 4*(100vw - 320px)/1600)
}

.product-box-3 .product-footer .product-detail .product-content {
    display: none
}

.product-box-3 .product-footer .product-detail a {
    color: #222
}

    .product-box-3 .product-footer .product-detail a:hover {
        color: #222
    }

.product-box-3 .product-footer .product-detail .name {
    font-weight: 500;
    line-height: calc(21px + 3*(100vw - 320px)/1600);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden
}

.product-box-3 .product-footer .product-detail .unit {
    font-size: 13px;
    font-weight: 500;
    margin-top: calc(6px + 4*(100vw - 320px)/1600);
    color: #777
}

.product-box-3 .product-footer .price {
    margin-top: 6px;
    font-weight: 600
}

    .product-box-3 .product-footer .price del {
        margin-left: 4px;
        font-weight: 400;
        color: #777;
        font-size: calc(13px + 1*(100vw - 320px)/1600)
    }

    .product-box-3 .product-footer .price span {
        font-size: calc(15px + 1*(100vw - 320px)/1600)
    }

.product-section-3 .circle-box {
    position: relative
}

    .product-section-3 .circle-box .shape-circle {
        position: absolute;
        top: 0;
        left: 0
    }

        .product-section-3 .circle-box .shape-circle img {
            width: 100%;
            height: auto;
            margin: 0;
            -webkit-animation: rounded 15s linear infinite;
            animation: rounded 15s linear infinite
        }

    .product-section-3 .circle-box .shape-text {
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        position: absolute;
        color: #fff
    }

        .product-section-3 .circle-box .shape-text h6 {
            display: block;
            margin: 0;
            font-weight: 500
        }

.product-section-3 .product-title {
    padding: 16px;
    text-align: center;
    background-color: var(--theme-color);
    color: #fff;
    border-radius: 8px 8px 0 0;
    border: 2px solid rgba(0,0,0,0);
    background-size: contain;
    background-clip: border-box;
    background-position: 0 0;
    -webkit-animation: shape 15s linear infinite;
    animation: shape 15s linear infinite
}

    .product-section-3 .product-title.product-warning {
        background-color: rgba(0,0,0,0);
        color: #222;
        margin: 0;
        border: none
    }

.product-bg-image {
    background-image: url(../images/grocery/bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%
}

    .product-bg-image .product-box-4 {
        border: none;
        background-color: rgba(0,0,0,0)
    }

    .product-bg-image .product-box-3:hover {
        -webkit-box-shadow: none;
        box-shadow: none
    }

.review-box:hover .review-profile .review-image {
    border-radius: 6px
}

.review-box .review-contain {
    margin-bottom: 40px
}

    .review-box .review-contain h5 {
        font-size: 16px;
        line-height: 22px;
        font-weight: 600;
        margin-bottom: 15px
    }

    .review-box .review-contain p {
        color: #4a5568;
        line-height: 27px;
        margin-bottom: 0
    }

.review-box .review-profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .review-box .review-profile .review-image {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        overflow: hidden;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

    .review-box .review-profile .review-detail {
        padding-left: 12px
    }

[dir=rtl] .review-box .review-profile .review-detail {
    padding-left: unset;
    padding-right: 12px
}

.review-box .review-profile .review-detail h5 {
    font-size: 18px;
    margin-bottom: 7px;
    font-weight: 500;
    color: #222
}

.review-box .review-profile .review-detail h6 {
    font-size: 16px;
    font-weight: 500;
    color: #4a5568
}

.service-contain {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-bottom: calc(10px + 20*(100vw - 320px)/1600);
    border-bottom: 1px dashed #fff;
    margin-bottom: 25px;
}

@media(max-width: 767px) {
    .service-contain {
        display: none
    }
}

.service-contain .service-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

@media(max-width: 1366px) {
    .service-contain .service-box {
        width: 50%
    }
}

@media(max-width: 1366px) {
    .service-contain .service-box:nth-child(-n+2) {
        margin-bottom: 15px
    }
}

@media(max-width: 1366px) {
    .service-contain .service-box:nth-child(3)::before {
        display: none
    }
}

@media(max-width: 767px) {
    .service-contain .service-box::before {
        display: none
    }
}

.service-contain .service-box + .service-box::before {
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 1px;
    height: 50%;
    left: -104px;
    border: 1px dashed #c1c1c1
}

[dir=rtl] .service-contain .service-box + .service-box::before {
    left: unset;
    right: -104px
}

@media(max-width: 1660px) {
    .service-contain .service-box + .service-box::before {
        left: -70px
    }

    [dir=rtl] .service-contain .service-box + .service-box::before {
        left: unset;
        right: -70px
    }
}

@media(max-width: 1460px) {
    .service-contain .service-box + .service-box::before {
        left: -36px
    }

    [dir=rtl] .service-contain .service-box + .service-box::before {
        left: unset;
        right: -36px
    }
}

@media(max-width: 1366px) {
    .service-contain .service-box + .service-box::before {
        left: -31px
    }

    [dir=rtl] .service-contain .service-box + .service-box::before {
        left: unset;
        right: -31px
    }
}

.service-contain .service-box .service-image img {
    width: calc(35px + 5*(100vw - 320px)/1600);
    height: calc(35px + 5*(100vw - 320px)/1600);
    -o-object-fit: contain;
    object-fit: contain
}

.service-contain .service-box .service-detail {
    margin-left: 20px
}

[dir=rtl] .service-contain .service-box .service-detail {
    margin-left: unset;
    margin-right: 20px
}

.service-contain .service-box .service-detail h5 {
    font-weight: 500;
    color: #fff
}

.service-contain-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: calc(14px + 11*(100vw - 320px)/1600);
    border-radius: 5px;
    background-color: rgba(191,191,191,.2);
    height: 100%;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

    .service-contain-2:hover {
        background-color: var(--theme-color)
    }

        .service-contain-2:hover svg {
            fill: #fff
        }

        .service-contain-2:hover .service-detail h3, .service-contain-2:hover .service-detail h6 {
            color: #fff
        }

    .service-contain-2 svg {
        width: 42px;
        height: 42px;
        fill: var(--theme-color);
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

    .service-contain-2 .service-detail {
        margin-left: 25px;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

[dir=rtl] .service-contain-2 .service-detail {
    margin-left: unset;
    margin-right: 25px
}

.service-contain-2 .service-detail h3 {
    letter-spacing: .8px;
    margin-bottom: 5px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    font-weight: 600
}

.service-contain-2 .service-detail h6 {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.section-404 .image-404 {
    text-align: center
}

    .section-404 .image-404 img {
        width: 25%
    }

@media(max-width: 1460px) {
    .section-404 .image-404 img {
        width: 40%
    }
}

@media(max-width: 991px) {
    .section-404 .image-404 img {
        width: 50%
    }
}

@media(max-width: 575px) {
    .section-404 .image-404 img {
        width: 70%
    }
}

.section-404 .contain-404 {
    width: 50%;
    text-align: center;
    margin: calc(20px + 25*(100vw - 320px)/1600) auto 0;
    font-family: "Public Sans",sans-serif
}

@media(max-width: 1660px) {
    .section-404 .contain-404 {
        width: 60%
    }
}

@media(max-width: 1199px) {
    .section-404 .contain-404 {
        width: 80%
    }
}

@media(max-width: 767px) {
    .section-404 .contain-404 {
        width: 100%
    }
}

.section-404 .contain-404 h3 {
    font-size: calc(14px + 4*(100vw - 320px)/1600);
    line-height: 1.5;
    font-weight: 400
}

.section-404 .contain-404 button {
    margin-top: calc(16px + 8*(100vw - 320px)/1600)
}

.button-group {
    text-align: right;
    margin-top: calc(14px + 6*(100vw - 320px)/1600)
}

    .button-group.cart-button {
        margin-top: 0;
        padding: 0 calc(16px + 6*(100vw - 320px)/1600) calc(14px + 6*(100vw - 320px)/1600)
    }

[dir=rtl] .button-group.cart-button ul {
    padding-right: 0
}

.button-group.cart-button ul li {
    width: 100%
}

.button-group ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(7px + 9*(100vw - 320px)/1600)
}

[dir=rtl] .button-group ul {
    padding-right: 0
}

.button-group ul.button-group-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: calc(26px + 19*(100vw - 320px)/1600)
}

.button-group ul li button {
    width: 100%;
    font: inherit;
    letter-spacing: .04em;
    padding: calc(8px + 4*(100vw - 320px)/1600) calc(14px + 6*(100vw - 320px)/1600)
}

    .button-group ul li button.shopping-button {
        font-size: calc(13px + 1*(100vw - 320px)/1600);
        background-color: #ececec;
        color: #000
    }

        .button-group ul li button.shopping-button i {
            margin-right: 8px
        }

[dir=rtl] .button-group ul li button.shopping-button i {
    margin-right: unset;
    margin-left: 8px !important
}

.contact-box-section .left-sidebar-box .contact-image {
    text-align: center;
    margin-bottom: calc(25px + 39*(100vw - 320px)/1600)
}

@media(max-width: 1199px) {
    .contact-box-section .left-sidebar-box .contact-image {
        margin-bottom: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        height: 100%
    }
}

@media(max-width: 991px) {
    .contact-box-section .left-sidebar-box .contact-image {
        margin-bottom: calc(25px + 39*(100vw - 320px)/1600)
    }
}

.contact-box-section .left-sidebar-box .contact-image img {
    width: 60%
}

@media(max-width: 1199px) {
    .contact-box-section .left-sidebar-box .contact-image img {
        width: 77%
    }
}

@media(max-width: 991px) {
    .contact-box-section .left-sidebar-box .contact-image img {
        width: 60%;
        margin-bottom: calc(25px + 39*(100vw - 320px)/1600)
    }
}

.contact-box-section .left-sidebar-box .contact-title {
    margin-bottom: calc(20px + 12*(100vw - 320px)/1600)
}

    .contact-box-section .left-sidebar-box .contact-title h3 {
        position: relative;
        display: inline-block;
        font-size: calc(23px + 5*(100vw - 320px)/1600);
        font-weight: 600
    }

        .contact-box-section .left-sidebar-box .contact-title h3::after {
            content: "";
            position: absolute;
            width: 70%;
            height: 2px;
            bottom: -5px;
            left: 0;
            background: var(--theme-color2)
        }

[dir=rtl] .contact-box-section .left-sidebar-box .contact-title h3::after {
    left: unset;
    right: 0
}

.contact-box-section .left-sidebar-box .contact-detail .contact-detail-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(2px + 3*(100vw - 320px)/1600);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #f8f8f8;
    padding: calc(15px + 12*(100vw - 320px)/1600) calc(15px + 12*(100vw - 320px)/1600) calc(15px + 12*(100vw - 320px)/1600) calc(30px + 11*(100vw - 320px)/1600);
    position: relative;
    border-radius: 10px;
    margin-left: 22px
}

    .contact-box-section .left-sidebar-box .contact-detail .contact-detail-box .contact-icon {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        position: absolute;
        left: -21px;
        background-color: var(--theme-color);
        padding: 13px;
        border-radius: 7px;
        display: inherit;
        color: #fff
    }

    .contact-box-section .left-sidebar-box .contact-detail .contact-detail-box .contact-detail-title, .contact-box-section .left-sidebar-box .contact-detail .contact-detail-box .contact-detail-contain {
        width: 100%
    }

        .contact-box-section .left-sidebar-box .contact-detail .contact-detail-box .contact-detail-title h4 {
            font-weight: 600;
            font-size: calc(16px + 2*(100vw - 320px)/1600);
            margin-top: -2px
        }

        .contact-box-section .left-sidebar-box .contact-detail .contact-detail-box .contact-detail-contain p {
            margin: 0;
            font-size: calc(14px + 1*(100vw - 320px)/1600);
            line-height: 1.5;
            color: #4a5568;
            margin-bottom: -5px
        }

.contact-box-section .right-sidebar-box {
    padding: calc(21px + 39*(100vw - 320px)/1600);
    border-radius: 10px;
    background-color: #f8f8f8
}

    .contact-box-section .right-sidebar-box .custom-form label {
        color: #4a5568;
        display: block;
        font-size: 16px;
        margin-bottom: calc(3px + 5*(100vw - 320px)/1600)
    }

    .contact-box-section .right-sidebar-box .custom-form .custom-input {
        position: relative
    }

        .contact-box-section .right-sidebar-box .custom-form .custom-input .form-control {
            padding: calc(15px + 5*(100vw - 320px)/1600) calc(15px + 5*(100vw - 320px)/1600) calc(15px + 5*(100vw - 320px)/1600) calc(41px + 11*(100vw - 320px)/1600);
            border: none
        }

[dir=rtl] .contact-box-section .right-sidebar-box .custom-form .custom-input .form-control {
    padding: calc(15px + 5*(100vw - 320px)/1600) calc(41px + 11*(100vw - 320px)/1600) calc(15px + 5*(100vw - 320px)/1600) calc(15px + 5*(100vw - 320px)/1600)
}

.contact-box-section .right-sidebar-box .custom-form .custom-input .form-control:focus {
    background-color: #fff;
    border-color: rgba(0,0,0,0)
}

.contact-box-section .right-sidebar-box .custom-form .custom-input i {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 0 calc(14px + 6*(100vw - 320px)/1600);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: calc(14px + 4*(100vw - 320px)/1600);
    color: #4a5568
}

[dir=rtl] .contact-box-section .right-sidebar-box .custom-form .custom-input i {
    left: unset;
    right: 0
}

.contact-box-section .right-sidebar-box .custom-form .custom-textarea {
    position: relative
}

    .contact-box-section .right-sidebar-box .custom-form .custom-textarea .form-control {
        padding-left: 52px;
        border: none
    }

[dir=rtl] .contact-box-section .right-sidebar-box .custom-form .custom-textarea .form-control {
    padding-left: unset;
    padding-right: 52px
}

.contact-box-section .right-sidebar-box .custom-form .custom-textarea .form-control:focus {
    background-color: #fff;
    border-color: rgba(0,0,0,0)
}

.contact-box-section .right-sidebar-box .custom-form .custom-textarea i {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 18px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 18px;
    color: #4a5568
}

[dir=rtl] .contact-box-section .right-sidebar-box .custom-form .custom-textarea i {
    left: unset;
    right: 0
}

.map-section .map-box {
    margin-bottom: -6px;
    display: block
}

    .map-section .map-box iframe {
        width: 100%;
        height: 350px
    }

.log-in-section {
    overflow-x: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    z-index: 0
}

    .log-in-section::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(../images/inner-page/log-in-bg.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1
    }

    .log-in-section.otp-section {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .log-in-section .image-contain {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        height: 100%
    }

    .log-in-section .log-in-form .form-control {
        border: none
    }

    .log-in-section .inputs {
        margin: calc(-2px + -10*(100vw - 320px)/1600)
    }

        .log-in-section .inputs input {
            margin: calc(2px + 6*(100vw - 320px)/1600);
            border: none
        }

    .log-in-section .log-in-box {
        background-color: #f8f8f8;
        padding: calc(16px + 34*(100vw - 320px)/1600);
        border-radius: calc(8px + 4*(100vw - 320px)/1600)
    }

        .log-in-section .log-in-box .logo-name {
            margin-bottom: calc(20px + 10*(100vw - 320px)/1600);
            margin-top: -10px
        }

            .log-in-section .log-in-box .logo-name a {
                font-size: calc(28px + 7*(100vw - 320px)/1600);
                font-weight: bold;
                color: #222;
                font-family: "Public Sans",sans-serif;
                display: block
            }

                .log-in-section .log-in-box .logo-name a img {
                    width: calc(150px + 75*(100vw - 320px)/1600)
                }

        .log-in-section .log-in-box .log-in-title {
            margin-bottom: calc(12px + 8*(100vw - 320px)/1600)
        }

            .log-in-section .log-in-box .log-in-title h3 {
                margin-bottom: calc(1px + 5*(100vw - 320px)/1600);
                font-size: calc(18px + 3*(100vw - 320px)/1600)
            }

            .log-in-section .log-in-box .log-in-title h4, .log-in-section .log-in-box .log-in-title h5 {
                color: #4a5568;
                margin-top: 8px
            }

        .log-in-section .log-in-box .log-in-button {
            margin-top: 20px;
            padding: 1px 0
        }

            .log-in-section .log-in-box .log-in-button ul {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
                gap: 15px;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center
            }

[dir=rtl] .log-in-section .log-in-box .log-in-button ul {
    padding-right: 0
}

.log-in-section .log-in-box .log-in-button ul li {
    display: block;
    width: 100%
}

    .log-in-section .log-in-box .log-in-button ul li a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        color: #222;
        border-radius: 5px;
        padding: calc(10px + 6*(100vw - 320px)/1600) calc(18px + 12*(100vw - 320px)/1600);
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: calc(8px + 2*(100vw - 320px)/1600);
        background-color: #fff
    }

        .log-in-section .log-in-box .log-in-button ul li a img {
            width: calc(18px + 6*(100vw - 320px)/1600)
        }

.log-in-section .log-in-box .forgot-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media(max-width: 360px) {
    .log-in-section .log-in-box .forgot-box {
        display: block
    }
}

.log-in-section .log-in-box .remember-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .log-in-section .log-in-box .remember-box .check-box {
        display: block;
        margin-top: -6px
    }

    .log-in-section .log-in-box .remember-box label {
        font-size: 16px
    }

        .log-in-section .log-in-box .remember-box label span {
            font-weight: 500;
            color: var(--theme-color)
        }

.log-in-section .log-in-box .forgot-password {
    font-size: 16px;
    font-weight: 500;
    display: block
}

    .log-in-section .log-in-box .forgot-password:hover {
        color: var(--theme-color)
    }

.log-in-section .log-in-box .other-log-in {
    margin-top: 15px;
    text-align: center;
    position: relative
}

    .log-in-section .log-in-box .other-log-in::before {
        content: "";
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 100%;
        height: 1px;
        left: 0;
        background-color: #ddd;
        z-index: 0
    }

    .log-in-section .log-in-box .other-log-in h6 {
        color: #4a5568;
        position: relative;
        background-color: #f9f9f9;
        padding: 0 14px;
        display: inline-block;
        text-transform: uppercase
    }

.log-in-section .log-in-box .sign-up-box {
    margin-top: 20px;
    text-align: center
}

    .log-in-section .log-in-box .sign-up-box h4 {
        color: #4a5568;
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        margin-bottom: calc(0px + 3*(100vw - 320px)/1600)
    }

    .log-in-section .log-in-box .sign-up-box a {
        font-weight: 500;
        font-size: calc(15px + 2*(100vw - 320px)/1600);
        margin-bottom: -4px;
        display: block
    }

        .log-in-section .log-in-box .sign-up-box a:hover {
            color: var(--theme-color)
        }

.log-in-section .log-in-box .contact-title {
    margin-bottom: 30px
}

    .log-in-section .log-in-box .contact-title h2 {
        margin-bottom: 15px
    }

    .log-in-section .log-in-box .contact-title h5 {
        width: 53%;
        font-size: 18px;
        line-height: 1.3;
        color: #4a5568
    }

.faq-contain {
    margin-bottom: calc(30px + 20*(100vw - 320px)/1600)
}

    .faq-contain .faq-top-box {
        text-align: center;
        background-color: #f8f8f8;
        border-radius: 9px;
        padding: 28px 18px
    }

        .faq-contain .faq-top-box .faq-box-icon {
            width: 65px;
            height: 65px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            background-color: #fff;
            border-radius: 7px;
            margin: 0 auto 16px
        }

            .faq-contain .faq-top-box .faq-box-icon img {
                width: calc(36px + 9*(100vw - 320px)/1600);
                height: auto
            }

        .faq-contain .faq-top-box .faq-box-contain h3 {
            font-weight: 700
        }

        .faq-contain .faq-top-box .faq-box-contain p {
            margin: 17px 0 0;
            line-height: 1.6;
            color: #4a5568;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: -webkit-box;
            overflow: hidden;
            margin-bottom: -4px
        }

.faq-box-contain .faq-contain {
    margin-bottom: 0;
    position: sticky;
    top: 92px
}

@media(max-width: 1199px) {
    .faq-box-contain .faq-contain {
        margin-bottom: calc(30px + 20*(100vw - 320px)/1600)
    }
}

.faq-box-contain .faq-contain h2 {
    font-weight: 700;
    font-size: calc(28px + 28*(100vw - 320px)/1600);
    line-height: 1.4
}

.faq-box-contain .faq-contain p {
    margin: calc(8px + 7*(100vw - 320px)/1600) 0 0;
    font-size: calc(13px + 2*(100vw - 320px)/1600);
    line-height: 1.5;
    color: #4a5568
}

@media(max-width: 1199px) {
    .faq-box-contain .faq-contain p {
        width: 70%
    }
}

@media(max-width: 991px) {
    .faq-box-contain .faq-contain p {
        width: 90%
    }
}

@media(max-width: 767px) {
    .faq-box-contain .faq-contain p {
        width: 100%;
        text-align: justify
    }
}

.faq-box-contain .faq-accordion .accordion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(15px + 9*(100vw - 320px)/1600)
}

    .faq-box-contain .faq-accordion .accordion .accordion-item {
        width: 100%;
        border-radius: 7px;
        background-color: #f8f8f8;
        border: none;
        overflow: hidden
    }

        .faq-box-contain .faq-accordion .accordion .accordion-item .accordion-header .accordion-button {
            background-color: #f8f8f8;
            font-size: calc(16px + 4*(100vw - 320px)/1600);
            font-weight: 500;
            line-height: 1.5;
            padding: calc(12px + 4*(100vw - 320px)/1600) calc(12px + 8*(100vw - 320px)/1600)
        }

            .faq-box-contain .faq-accordion .accordion .accordion-item .accordion-header .accordion-button i {
                margin-left: auto;
                -webkit-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out
            }

[dir=rtl] .faq-box-contain .faq-accordion .accordion .accordion-item .accordion-header .accordion-button i {
    margin-left: unset;
    margin-right: auto
}

.faq-box-contain .faq-accordion .accordion .accordion-item .accordion-header .accordion-button::after {
    content: unset
}

.faq-box-contain .faq-accordion .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    font-weight: 700;
    color: var(--theme-color);
    color: #000;
    background-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none
}

    .faq-box-contain .faq-accordion .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) i {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

.faq-box-contain .faq-accordion .accordion .accordion-item .accordion-header .accordion-button:focus {
    border-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none
}

.faq-box-contain .faq-accordion .accordion .accordion-item .accordion-collapse .accordion-body {
    padding: 0 calc(12px + 4*(100vw - 320px)/1600) calc(12px + 8*(100vw - 320px)/1600)
}

    .faq-box-contain .faq-accordion .accordion .accordion-item .accordion-collapse .accordion-body p {
        font-size: calc(14px + 1*(100vw - 320px)/1600);
        line-height: 1.6;
        color: #4a5568;
        margin-bottom: calc(12px + 4*(100vw - 320px)/1600)
    }

        .faq-box-contain .faq-accordion .accordion .accordion-item .accordion-collapse .accordion-body p:last-child {
            margin-bottom: -4px
        }

.blog-section .left-sidebar-box {
    position: sticky;
    top: 20px
}

    .blog-section .left-sidebar-box .left-search-box .search-box {
        position: relative
    }

        .blog-section .left-sidebar-box .left-search-box .search-box::before {
            content: "";
            position: absolute;
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            right: 20px;
            color: #4a5568
        }

        .blog-section .left-sidebar-box .left-search-box .search-box::after {
            content: "";
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            width: 1px;
            height: 60%;
            right: 51px;
            opacity: .3;
            background-color: #4a5568
        }

        .blog-section .left-sidebar-box .left-search-box .search-box input {
            padding: 8px 68px 8px 20px;
            background-color: #f8f8f8;
            border: none;
            height: 53px;
            border-radius: 7px
        }

            .blog-section .left-sidebar-box .left-search-box .search-box input:focus {
                border-color: #ced4da
            }

    .blog-section .left-sidebar-box .left-accordion-box {
        margin-top: 20px
    }

        .blog-section .left-sidebar-box .left-accordion-box .accordion-item {
            border: none;
            padding: calc(18px + 7*(100vw - 320px)/1600);
            background-color: #f8f8f8
        }

            .blog-section .left-sidebar-box .left-accordion-box .accordion-item + .accordion-item {
                margin-top: 20px
            }

            .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-header .accordion-button {
                background-color: #f8f8f8;
                color: #222;
                font-weight: 700;
                padding: 0
            }

                .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-header .accordion-button::after {
                    width: unset;
                    height: unset;
                    font-family: "Font Awesome 6 Free";
                    font-weight: 900;
                    background-image: none;
                    content: ""
                }

[dir=rtl] .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-header .accordion-button::after {
    margin-left: unset;
    margin-right: auto
}

.blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-header .accordion-button:focus {
    border-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none
}

.blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    -webkit-box-shadow: none;
    box-shadow: none
}

.blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse {
    background-color: #f8f8f8
}

    .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body {
        padding: 0;
        margin-top: 20px
    }

        .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .recent-post-box .recent-box {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

            .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .recent-post-box .recent-box + .recent-box {
                margin-top: 20px
            }

            .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .recent-post-box .recent-box:hover .recent-image img {
                -webkit-transform: scale(1.1) rotate(4deg);
                transform: scale(1.1) rotate(4deg)
            }

            .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .recent-post-box .recent-box .recent-image {
                width: 110px;
                border-radius: 5px;
                overflow: hidden
            }

                .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .recent-post-box .recent-box .recent-image img {
                    width: 100%;
                    height: 100%;
                    -webkit-transition: all .3s ease-in-out;
                    transition: all .3s ease-in-out
                }

            .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .recent-post-box .recent-box .recent-detail {
                padding-left: 15px;
                width: calc(100% - 110px)
            }

[dir=rtl] .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .recent-post-box .recent-box .recent-detail {
    padding-left: unset;
    padding-right: 15px
}

.blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .recent-post-box .recent-box .recent-detail a {
    color: #222
}

    .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .recent-post-box .recent-box .recent-detail a:hover {
        color: #222
    }

    .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .recent-post-box .recent-box .recent-detail a h5 {
        font-weight: 600;
        line-height: 1.45;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

.blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .recent-post-box .recent-box .recent-detail h6 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 8px;
    color: #4a5568
}

    .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .recent-post-box .recent-box .recent-detail h6 .feather {
        width: 18px;
        height: 18px;
        stroke-width: 1
    }

.blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .category-list-box ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px
}

[dir=rtl] .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .category-list-box ul {
    padding-left: unset;
    padding-right: 0
}

.blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .category-list-box ul li {
    display: block;
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 0;
    overflow: hidden;
    width: 100%
}

    .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .category-list-box ul li:first-child {
        padding-top: 0
    }

    .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .category-list-box ul li a {
        display: block;
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        color: #222
    }

        .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .category-list-box ul li a .category-name {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between
        }

            .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .category-list-box ul li a .category-name h5 {
                color: #4a5568;
                font-weight: 600
            }

            .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .category-list-box ul li a .category-name h5, .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .category-list-box ul li a .category-name span {
                -webkit-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out
            }

            .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .category-list-box ul li a .category-name span {
                width: 22px;
                height: 22px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                font-size: 13px;
                color: #fff;
                background-color: var(--theme-color);
                padding: 4px 5px 3px;
                border-radius: 100%
            }

.blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .product-tags-box ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px
}

[dir=rtl] .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .product-tags-box ul {
    padding-left: unset;
    padding-right: 0
}

.blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .product-tags-box ul li {
    z-index: 0;
    padding: 4px 9px;
    border-radius: 3px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    overflow: hidden;
    position: relative;
    background-color: #fff
}

    .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .product-tags-box ul li::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        z-index: -1;
        top: 0;
        left: 0;
        background-color: var(--theme-color);
        opacity: 0
    }

    .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .product-tags-box ul li:hover {
        border-color: rgba(0,0,0,0)
    }

        .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .product-tags-box ul li:hover::after {
            opacity: 1
        }

        .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .product-tags-box ul li:hover a {
            color: #fff
        }

    .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .product-tags-box ul li a {
        font-size: calc(13px + 1*(100vw - 320px)/1600);
        color: #4a5568;
        text-transform: capitalize
    }

.blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .product-list-2 li + li {
    margin-top: 30px
}

    .blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .product-list-2 li + li::after {
        top: -16px;
        width: calc(100% - 80px - (12px + 11*(100vw - 320px)/1600))
    }

.blog-section .left-sidebar-box .left-accordion-box .accordion-item .accordion-collapse .accordion-body .product-list-2 li .offer-product .offer-detail a {
    color: #222
}

.blog-section .custom-border {
    border-bottom: 1px solid #ececec;
    padding-bottom: calc(20px + 30*(100vw - 320px)/1600);
    margin-bottom: calc(35px + 25*(100vw - 320px)/1600)
}

.blog-section .blog-box:hover .blog-image a {
    -webkit-transform: scale(1.1) rotate(4deg);
    transform: scale(1.1) rotate(4deg)
}

.blog-section .blog-box .blog-image {
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 0
}

    .blog-section .blog-box .blog-image a {
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

    .blog-section .blog-box .blog-image label {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: absolute;
        top: 0;
        bottom: unset;
        left: 0;
        border-radius: 0;
        background-color: #febc5c;
        color: #fff;
        padding: 10px 13px;
        text-transform: uppercase;
        font-size: 13px;
        font-weight: 600
    }

        .blog-section .blog-box .blog-image label i {
            width: 16px;
            height: 16px;
            -o-object-fit: contain;
            object-fit: contain;
            margin-right: 3px;
            color: #fff
        }

.blog-section .blog-box .blog-contain {
    padding: 0 20px 20px
}

.blog-section .blog-box .blog-contain-2 {
    padding: 0
}

.blog-section .blog-box .blog-contain .blog-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 15px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .blog-section .blog-box .blog-contain .blog-label .time, .blog-section .blog-box .blog-contain .blog-label .super {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #4a5568;
        text-transform: uppercase;
        font-size: 13px
    }

        .blog-section .blog-box .blog-contain .blog-label .time .feather, .blog-section .blog-box .blog-contain .blog-label .super .feather {
            width: 16px;
            height: 16px;
            -o-object-fit: contain;
            object-fit: contain;
            margin-right: 4px
        }

[dir=rtl] .blog-section .blog-box .blog-contain .blog-label .time .feather, [dir=rtl] .blog-section .blog-box .blog-contain .blog-label .super .feather {
    margin-right: unset;
    margin-left: 4px
}

.blog-section .blog-box .blog-contain .blog-label .time span, .blog-section .blog-box .blog-contain .blog-label .super span {
    margin-top: 1px
}

.blog-section .blog-box .blog-contain a {
    color: #222
}

    .blog-section .blog-box .blog-contain a:hover {
        color: #222
    }

    .blog-section .blog-box .blog-contain a h3 {
        margin: 10px 0 6px;
        font-weight: 600;
        line-height: 1.5;
        text-transform: capitalize;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        font-size: calc(16px + 2*(100vw - 320px)/1600);
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

.blog-section .blog-box .blog-contain p {
    line-height: 1.8;
    color: #4a5568;
    margin-bottom: 0
}

@media(max-width: 1366px) {
    .blog-section .blog-box .blog-contain p {
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }
}

.blog-section .blog-box .blog-contain .blog-button {
    border: none;
    background-color: rgba(var(--theme-color-rgb), 0.1);
    font-size: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-radius: 5px;
    padding: 10px 22px;
    color: var(--theme-color);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    margin-top: calc(8px + 14*(100vw - 320px)/1600);
    font-size: 14px
}

    .blog-section .blog-box .blog-contain .blog-button:hover {
        background-color: rgba(var(--theme-color-rgb), 1);
        color: #fff
    }

    .blog-section .blog-box .blog-contain .blog-button i {
        margin-left: 10px;
        margin-top: 1px
    }

[dir=rtl] .blog-section .blog-box .blog-contain .blog-button i {
    margin-left: unset;
    margin-right: 10px
}

.blog-section .blog-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media(max-width: 1199px) {
    .blog-section .blog-list {
        display: block
    }
}

@media(max-width: 991px) {
    .blog-section .blog-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

@media(max-width: 767px) {
    .blog-section .blog-list {
        display: block
    }
}

.blog-section .blog-list:hover {
    -webkit-box-shadow: 0 4px 9px rgba(34,34,34,.1);
    box-shadow: 0 4px 9px rgba(34,34,34,.1)
}

    .blog-section .blog-list:hover .blog-image img {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    .blog-section .blog-list:hover .blog-contain a h3 {
        color: var(--theme-color)
    }

    .blog-section .blog-list:hover .blog-contain .blog-button {
        background-color: var(--theme-color);
        color: #fff
    }

.blog-section .blog-list .blog-image {
    margin-bottom: -1px;
    width: 38%;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media(max-width: 1399px) {
    .blog-section .blog-list .blog-image {
        width: 45%
    }
}

@media(max-width: 1199px) {
    .blog-section .blog-list .blog-image {
        width: 100%
    }
}

@media(max-width: 991px) {
    .blog-section .blog-list .blog-image {
        width: 45%
    }
}

@media(max-width: 767px) {
    .blog-section .blog-list .blog-image {
        width: 100%;
        height: auto;
        margin-bottom: 8px;
        text-align: center
    }
}

.blog-section .blog-list .blog-image img {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media(max-width: 1199px) {
    .blog-section .blog-list .blog-image img {
        width: 100%
    }
}

@media(max-width: 991px) {
    .blog-section .blog-list .blog-image img {
        width: auto
    }
}

@media(max-width: 767px) {
    .blog-section .blog-list .blog-image img {
        width: 100%
    }
}

.blog-section .blog-list .blog-contain {
    padding: calc(10px + 15*(100vw - 320px)/1600);
    width: 62%
}

@media(max-width: 1399px) {
    .blog-section .blog-list .blog-contain {
        width: 55%
    }
}

@media(max-width: 1199px) {
    .blog-section .blog-list .blog-contain {
        width: 100%
    }
}

@media(max-width: 991px) {
    .blog-section .blog-list .blog-contain {
        width: 55%
    }
}

@media(max-width: 767px) {
    .blog-section .blog-list .blog-contain {
        width: 100%
    }
}

.blog-section .blog-detail-image {
    position: relative
}

    .blog-section .blog-detail-image .blog-image-contain {
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 55px 15px 40px;
        text-align: center;
        background: #fff;
        background: -webkit-gradient(linear, left bottom, left top, from(white), to(rgba(246, 246, 246, 0)));
        background: linear-gradient(0deg, white 0%, rgba(246, 246, 246, 0) 100%);
        color: #222
    }

@media(max-width: 480px) {
    .blog-section .blog-detail-image .blog-image-contain {
        position: relative
    }
}

.blog-section .blog-detail-image .blog-image-contain .contain-list li {
    text-transform: capitalize;
    position: relative
}

    .blog-section .blog-detail-image .blog-image-contain .contain-list li + li {
        margin-left: 30px
    }

[dir=rtl] .blog-section .blog-detail-image .blog-image-contain .contain-list li + li {
    margin-left: unset;
    margin-right: 30px
}

.blog-section .blog-detail-image .blog-image-contain .contain-list li + li::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 1px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #222;
    left: -24px
}

[dir=rtl] .blog-section .blog-detail-image .blog-image-contain .contain-list li + li::before {
    right: -24px;
    left: unset
}

.blog-section .blog-detail-image .blog-image-contain h2 {
    margin: calc(10px + 4*(100vw - 320px)/1600) 0;
    font-weight: 700;
    font-size: calc(22px + 12*(100vw - 320px)/1600)
}

.blog-section .blog-detail-image .blog-image-contain .contain-comment-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(10px + 13*(100vw - 320px)/1600);
    color: #777
}

    .blog-section .blog-detail-image .blog-image-contain .contain-comment-list li .user-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .blog-section .blog-detail-image .blog-image-contain .contain-comment-list li .user-list .feather {
            width: 18px;
            height: 18px;
            margin-right: 3px
        }

[dir=rtl] .blog-section .blog-detail-image .blog-image-contain .contain-comment-list li .user-list .feather {
    margin-right: unset;
    margin-left: 3px
}

.blog-section .blog-detail-contain p {
    color: #4a5568;
    font-size: calc(15px + 2*(100vw - 320px)/1600);
    line-height: calc(25px + 5*(100vw - 320px)/1600);
    margin-bottom: calc(12px + 8*(100vw - 320px)/1600)
}

    .blog-section .blog-detail-contain p .first {
        width: calc(38px + 12*(100vw - 320px)/1600);
        height: calc(38px + 12*(100vw - 320px)/1600);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        font-size: calc(55px + 15*(100vw - 320px)/1600);
        color: #4a5568;
        float: left;
        margin-right: calc(8px + 12*(100vw - 320px)/1600);
        margin-top: 8px
    }

.blog-section .blog-detail-contain .blog-details-quote {
    padding: calc(18px + 42*(100vw - 320px)/1600) calc(18px + 42*(100vw - 320px)/1600) calc(18px + 42*(100vw - 320px)/1600) calc(62px + 118*(100vw - 320px)/1600);
    border-radius: 10px;
    margin-bottom: calc(12px + 8*(100vw - 320px)/1600);
    background-color: #4a5568;
    position: relative;
    color: #fff
}

    .blog-section .blog-detail-contain .blog-details-quote h3 {
        font-size: calc(18px + 10*(100vw - 320px)/1600);
        line-height: calc(24px + 11*(100vw - 320px)/1600);
        margin-bottom: calc(8px + 12*(100vw - 320px)/1600)
    }

    .blog-section .blog-detail-contain .blog-details-quote h5 {
        letter-spacing: 3px;
        color: #ddd;
        text-transform: uppercase
    }

    .blog-section .blog-detail-contain .blog-details-quote::after {
        content: "";
        position: absolute;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: calc(38px + 32*(100vw - 320px)/1600);
        color: var(--theme-color);
        top: calc(-6px + 32*(100vw - 320px)/1600);
        left: calc(15px + 72*(100vw - 320px)/1600)
    }

.blog-section .leave-title {
    margin: 40px 0 9px
}

    .blog-section .leave-title h3 {
        position: relative;
        font-weight: 700;
        z-index: 0;
        color: #4a5568;
        font-size: 22px
    }

.blog-section .user-comment-box {
    margin-top: 24px
}

    .blog-section .user-comment-box ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

[dir=rtl] .blog-section .user-comment-box ul {
    padding-left: unset;
    padding-right: 0
}

.blog-section .user-comment-box ul li {
    padding: 0px 0 50px;
    width: 100%;
    position: relative
}

    .blog-section .user-comment-box ul li.li-padding {
        padding-left: calc(28px + 52*(100vw - 320px)/1600)
    }

@media(max-width: 480px) {
    .blog-section .user-comment-box ul li {
        padding: 0
    }
}

.blog-section .user-comment-box ul li .user-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

@media(max-width: 480px) {
    .blog-section .user-comment-box ul li .user-box {
        display: block
    }
}

.blog-section .user-comment-box ul li .user-box .reply-button {
    position: absolute;
    top: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

[dir=rtl] .blog-section .user-comment-box ul li .user-box .reply-button {
    right: unset;
    left: 0
}

.blog-section .user-comment-box ul li .user-box .reply-button i {
    margin: -3px 9px 0 0;
    color: #777
}

[dir=rtl] .blog-section .user-comment-box ul li .user-box .reply-button i {
    margin: -3px 0 0 9px
}

.blog-section .user-comment-box ul li .user-box .user-iamge {
    position: relative
}

    .blog-section .user-comment-box ul li .user-box .user-iamge img {
        width: 60px;
        height: 60px;
        -o-object-fit: cover;
        object-fit: cover;
        border-radius: 100%;
        overflow: hidden
    }

    .blog-section .user-comment-box ul li .user-box .user-iamge .user-name {
        position: absolute;
        top: 0;
        left: 80px;
        width: 220px
    }

[dir=rtl] .blog-section .user-comment-box ul li .user-box .user-iamge .user-name {
    right: 80px;
    left: unset
}

@media(max-width: 480px) {
    .blog-section .user-comment-box ul li .user-box .user-iamge .user-name {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }
}

.blog-section .user-comment-box ul li .user-box .user-iamge .user-name h5 {
    font-weight: 600
}

.blog-section .user-comment-box ul li .user-box .user-iamge .user-name h6 {
    color: #4a5568;
    margin-bottom: 6px
}

.blog-section .user-comment-box ul li .user-box .user-contain {
    width: calc(100% - 70px);
    padding-left: 20px
}

[dir=rtl] .blog-section .user-comment-box ul li .user-box .user-contain {
    padding-left: unset;
    padding-right: 20px
}

@media(max-width: 480px) {
    .blog-section .user-comment-box ul li .user-box .user-contain {
        width: 100%;
        padding: 0;
        margin-top: 14px
    }
}

.blog-section .user-comment-box ul li .user-box .user-contain p {
    font-size: calc(13px + 2*(100vw - 320px)/1600);
    line-height: 1.6;
    color: #4a5568;
    margin-bottom: 0;
    margin-top: 50px;
    width: 85%
}

@media(max-width: 575px) {
    .blog-section .user-comment-box ul li .user-box .user-contain p {
        width: 100%
    }
}

@media(max-width: 480px) {
    .blog-section .user-comment-box ul li .user-box .user-contain p {
        margin: 0 0 35px
    }
}

.blog-section .leave-box {
    padding: calc(18px + 12*(100vw - 320px)/1600);
    background-color: #f8f8f8;
    border-radius: 6px
}

    .blog-section .leave-box .leave-comment .comment-notes p {
        line-height: 1.6
    }

    .blog-section .leave-box .leave-comment .save-comment-box {
        margin: 20px 0 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .blog-section .leave-box .leave-comment .save-comment-box .form-check {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

            .blog-section .leave-box .leave-comment .save-comment-box .form-check input {
                margin-top: -5px
            }

@media(max-width: 659px) {
    .blog-section .leave-box .leave-comment .save-comment-box .form-check input {
        margin-top: -21px
    }
}

@media(max-width: 341px) {
    .blog-section .leave-box .leave-comment .save-comment-box .form-check input {
        margin-top: -44px
    }
}

.blog-section .leave-box .leave-comment .save-comment-box .form-check .form-check-label {
    font-size: 15px;
    font-weight: 400;
    color: #4a5568
}

.blog-section .leave-box .leave-comment .blog-input .form-control {
    border: none
}

    .blog-section .leave-box .leave-comment .blog-input .form-control:focus {
        background-color: #fff
    }

.review-title h4 {
    font-size: calc(16px + 2*(100vw - 320px)/1600);
    margin-bottom: calc(7px + 6*(100vw - 320px)/1600);
    color: #222;
    font-weight: 400
}

.review-title h2 {
    font-size: calc(26px + 14*(100vw - 320px)/1600);
    margin-bottom: calc(12px + 18*(100vw - 320px)/1600);
    width: 80%;
    line-height: 1.3;
    position: relative
}

@media(max-width: 480px) {
    .review-title h2 {
        width: 100%
    }
}

.review-title h2.center::before {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: var(--theme-color)
}

.about-us-title h4 {
    font-size: calc(16px + 5*(100vw - 320px)/1600);
    margin-bottom: calc(7px + 6*(100vw - 320px)/1600);
    color: var(--theme-color);
}

.about-us-title h2 {
    font-size: calc(23px + 9*(100vw - 320px)/1600);
    margin-bottom: calc(28px + 13*(100vw - 320px)/1600);
    line-height: 1.3;
    position: relative
}

    .about-us-title h2::before {
        content: "";
        position: absolute;
        width: calc(106px + 69*(100vw - 320px)/1600);
        height: 3px;
        bottom: calc(-7px + -1*(100vw - 320px)/1600);
        left: 0;
        background: #ffa53b
    }

    .about-us-title h2.center::before {
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }

.about-main-section .fresh-image {
    margin-top: 30px;
    border-radius: calc(12px + 38*(100vw - 320px)/1600) 0;
    overflow: hidden;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

    .about-main-section .fresh-image > div {
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        overflow: hidden
    }

    .about-main-section .fresh-image:hover > div {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

.about-main-section .fresh-image-2 {
    border-radius: 0 calc(12px + 38*(100vw - 320px)/1600);
    overflow: hidden;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

    .about-main-section .fresh-image-2 > div {
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        overflow: hidden
    }

    .about-main-section .fresh-image-2:hover > div {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

.about-main-section .fresh-contain {
    height: 100%
}

    .about-main-section .fresh-contain p {
        font-size: calc(14px + 1*(100vw - 320px)/1600);
        line-height: 1.7;
        color: #4a5568;
        margin-bottom: calc(11px + 9*(100vw - 320px)/1600)
    }

.about-main-section .delivery-list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(11px + 9*(100vw - 320px)/1600)
}

[dir=rtl] .about-main-section .delivery-list ul {
    padding-right: 0
}

.about-main-section .delivery-list ul li {
    width: 100%
}

    .about-main-section .delivery-list ul li .deliver-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        gap: calc(8px + 7*(100vw - 320px)/1600);
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        color: #4a5568
    }

        .about-main-section .delivery-list ul li .deliver-box .feather {
            width: 17px;
            height: auto;
            margin-top: 3px
        }

        .about-main-section .delivery-list ul li .deliver-box h6 {
            font-size: calc(15px + 2*(100vw - 320px)/1600);
            width: calc(100% - 17px)
        }

.about-main-section .delivery-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(15px + 15*(100vw - 320px)/1600);
    margin-top: 20px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .about-main-section .delivery-box li .delivery-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 12px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 0
    }

        .about-main-section .delivery-box li .delivery-box .delivery-icon img {
            width: 30px;
            height: auto
        }

.client-section {
    background-color: #f8f8f8
}

    .client-section .clint-contain {
        background: #fff;
        padding: calc(27px + 23*(100vw - 320px)/1600);
        border-radius: calc(18px + 12*(100vw - 320px)/1600);
        position: relative
    }

        .client-section .clint-contain:hover .client-icon img {
            -webkit-animation-name: bounce;
            animation-name: bounce;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both
        }

        .client-section .clint-contain:hover h2 {
            opacity: .09;
            margin-right: 9px
        }

        .client-section .clint-contain:hover h4 {
            color: var(--theme-color)
        }

        .client-section .clint-contain .client-icon {
            width: calc(60px + 20*(100vw - 320px)/1600);
            height: calc(60px + 20*(100vw - 320px)/1600);
            margin-bottom: 14px;
            margin-top: -11px
        }

            .client-section .clint-contain .client-icon img {
                width: 74%;
                height: 100%;
                -o-object-fit: contain;
                object-fit: contain
            }

        .client-section .clint-contain h2 {
            position: absolute;
            top: calc(14px + 10*(100vw - 320px)/1600);
            right: calc(24px + 10*(100vw - 320px)/1600);
            color: #4a5568;
            opacity: .05;
            font-size: calc(52px + 18*(100vw - 320px)/1600);
            font-weight: 800;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

[dir=rtl] .client-section .clint-contain h2 {
    right: unset;
    left: calc(24px + 10*(100vw - 320px)/1600)
}

.client-section .clint-contain h4 {
    font-size: calc(22px + 2*(100vw - 320px)/1600);
    margin-bottom: 7px;
    font-weight: 600;
    position: relative;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.client-section .clint-contain p {
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    color: #4a5568;
    margin: 0 auto;
    line-height: 1.7;
    margin-bottom: -5px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.client-section .client-box .client-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

    .client-section .client-box .client-list li {
        width: 460px;
        position: relative
    }

.team-section .team-box:hover .team-iamge img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-filter: grayscale(0);
    filter: grayscale(0)
}

.team-section .team-box:hover .team-iamge .team-media {
    opacity: 1;
    right: 10px
}

.team-section .team-box .team-iamge {
    width: 50%;
    height: auto;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    margin: 0 auto
}

    .team-section .team-box .team-iamge img {
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        -webkit-filter: grayscale(1);
        filter: grayscale(1)
    }

.team-section .team-box .team-name {
    text-align: center;
    margin-top: 20px
}

    .team-section .team-box .team-name h3 {
        font-size: calc(18px + 2*(100vw - 320px)/1600);
        letter-spacing: .7px;
        font-weight: 700
    }

    .team-section .team-box .team-name h5 {
        margin-top: 6px;
        letter-spacing: .5px;
        color: #4a5568
    }

    .team-section .team-box .team-name p {
        font-size: calc(14px + 1*(100vw - 320px)/1600);
        line-height: 1.6;
        color: #4a5568;
        margin: 9px auto 14px;
        width: 80%;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

@media(max-width: 360px) {
    .team-section .team-box .team-name p {
        width: 100%
    }
}

.team-section .team-box .team-name .team-media {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 14px;
    position: relative;
    margin-top: 15px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

    .team-section .team-box .team-name .team-media li a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        font-size: 16px;
        color: #fff;
        border-radius: 5px;
        background-color: #ededed
    }

        .team-section .team-box .team-name .team-media li a.fb-bg {
            color: #4267b2;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

            .team-section .team-box .team-name .team-media li a.fb-bg:hover {
                background-color: #4267b2;
                color: #fff
            }

        .team-section .team-box .team-name .team-media li a.twitter-bg {
            color: #00acee;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

            .team-section .team-box .team-name .team-media li a.twitter-bg:hover {
                background-color: #00acee;
                color: #fff
            }

        .team-section .team-box .team-name .team-media li a.pint-bg {
            color: #c8232c;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

            .team-section .team-box .team-name .team-media li a.pint-bg:hover {
                background-color: #c8232c;
                color: #fff
            }

        .team-section .team-box .team-name .team-media li a.insta-bg {
            color: #f56040;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

            .team-section .team-box .team-name .team-media li a.insta-bg:hover {
                background-color: #f56040;
                color: #fff
            }

.review-section {
    background-color: #f8f8f8
}

    .review-section .reviewer-box {
        background-color: #fff;
        padding: calc(18px + 16*(100vw - 320px)/1600);
        border-radius: 10px;
        z-index: 0;
        position: relative;
        overflow: hidden
    }

        .review-section .reviewer-box:hover i {
            color: var(--theme-color);
            font-size: 143px;
            opacity: .18;
            -webkit-transform: rotate(7deg);
            transform: rotate(7deg);
            bottom: -29px;
            right: -7px
        }

        .review-section .reviewer-box i {
            position: absolute;
            font-size: 106px;
            opacity: .05;
            z-index: -1;
            -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
            bottom: -30px;
            right: -8px;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

[dir=rtl] .review-section .reviewer-box i {
    -webkit-transform: rotate(-15deg) rotateY(183deg);
    transform: rotate(-15deg) rotateY(183deg);
    left: -8px;
    right: unset
}

.review-section .reviewer-box h3 {
    font-weight: 400;
    margin: 10px 0 13px;
    font-size: 20px;
    line-height: 1.5
}

.review-section .reviewer-box p {
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 23px;
    font-size: calc(14px + 1*(100vw - 320px)/1600)
}

.review-section .reviewer-box .reviewer-profile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(12px + 7*(100vw - 320px)/1600);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .review-section .reviewer-box .reviewer-profile .reviewer-image {
        width: calc(65px + 10*(100vw - 320px)/1600);
        height: auto;
        border-radius: 8px;
        overflow: hidden
    }

        .review-section .reviewer-box .reviewer-profile .reviewer-image img {
            width: 100%;
            height: 100%;
            -o-object-fit: contain;
            object-fit: contain
        }

    .review-section .reviewer-box .reviewer-profile .reviewer-name h4 {
        font-weight: 700;
        font-size: calc(16px + 2*(100vw - 320px)/1600);
        color: var(--theme-color)
    }

    .review-section .reviewer-box .reviewer-profile .reviewer-name h6 {
        color: #4a5568;
        margin-top: 6px
    }

.chart-padding {
    background-color: #fff;
    padding: 20px;
    border-radius: 6px
}

.chart-title {
    margin-bottom: 20px
}

    .chart-title h3 {
        font-size: 24px;
        font-weight: 600
    }

.dashboard-title {
    margin-bottom: 22px
}

    .dashboard-title h3 {
        font-size: 20px;
        line-height: 1.3;
        position: relative;
        font-weight: 600
    }

    .dashboard-title.dashboard-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

        .dashboard-title.dashboard-flex button {
            margin-left: auto
        }

.user-dashboard-section .dashboard-left-sidebar {
    background: #f8f8f8;
    -webkit-box-shadow: 0 0 8px rgba(34,34,34,.14);
    box-shadow: 0 0 8px rgba(34,34,34,.14);
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 107px;
    z-index: 0
}

@media(max-width: 991px) {
    .user-dashboard-section .dashboard-left-sidebar {
        width: 300px;
        height: 100vh;
        position: fixed;
        top: 0;
        left: -320px;
        border-radius: 0;
        z-index: 6;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

        .user-dashboard-section .dashboard-left-sidebar.show {
            left: 0
        }
}

.user-dashboard-section .dashboard-left-sidebar .close-button {
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    background: #f8f8f8;
    border-radius: 100%
}

    .user-dashboard-section .dashboard-left-sidebar .close-button .close-sidebar {
        border: none;
        font-size: 15px;
        background-color: rgba(0,0,0,0);
        color: #4a5568;
        padding: 2px 0 0
    }

.user-dashboard-section .dashboard-left-sidebar .profile-box {
    position: relative
}

    .user-dashboard-section .dashboard-left-sidebar .profile-box .cover-image {
        position: relative;
        overflow: hidden
    }

        .user-dashboard-section .dashboard-left-sidebar .profile-box .cover-image img {
            width: 100%;
            height: 150px;
            -o-object-fit: cover;
            object-fit: cover
        }

@media(max-width: 991px) {
    .user-dashboard-section .dashboard-left-sidebar .profile-box .cover-image img {
        height: 120px
    }
}

.user-dashboard-section .dashboard-left-sidebar .profile-box .cover-image:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #222;
    opacity: .15
}

.user-dashboard-section .dashboard-left-sidebar .profile-box .cover-image .cover-icon {
    width: 30px;
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
    background-color: #fff;
    border-radius: 100%;
    color: #4a5568
}

.user-dashboard-section .dashboard-left-sidebar .profile-box .profile-contain {
    padding: 0 15px
}

    .user-dashboard-section .dashboard-left-sidebar .profile-box .profile-contain .profile-image {
        margin: 0 auto;
        text-align: center;
        margin-top: -50px;
        z-index: 1;
        position: relative
    }

        .user-dashboard-section .dashboard-left-sidebar .profile-box .profile-contain .profile-image img {
            width: calc(93px + 15*(100vw - 320px)/1600);
            height: calc(93px + 15*(100vw - 320px)/1600);
            -o-object-fit: contain;
            object-fit: contain;
            background-color: #f8f8f8;
            border-radius: 100%;
            padding: 5px;
            border: 1px solid #ececec;
            -webkit-box-shadow: 2px 3px 8px rgba(34,34,34,.0032);
            box-shadow: 2px 3px 8px rgba(34,34,34,.0032)
        }

        .user-dashboard-section .dashboard-left-sidebar .profile-box .profile-contain .profile-image .cover-icon {
            width: 30px;
            height: 30px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            position: absolute;
            bottom: 0;
            left: 55%;
            z-index: 1;
            background-color: #fff;
            border-radius: 100%;
            color: #4a5568
        }

            .user-dashboard-section .dashboard-left-sidebar .profile-box .profile-contain .profile-image .cover-icon i {
                position: relative
            }

                .user-dashboard-section .dashboard-left-sidebar .profile-box .profile-contain .profile-image .cover-icon i input {
                    position: absolute;
                    top: 0;
                    right: 0;
                    left: 0;
                    opacity: 0;
                    width: 35px
                }

    .user-dashboard-section .dashboard-left-sidebar .profile-box .profile-contain .profile-name {
        margin-top: calc(10px + 3*(100vw - 320px)/1600);
        text-align: center;
        padding-bottom: calc(12px + 6*(100vw - 320px)/1600);
        border-bottom: 1px solid #ddd
    }

        .user-dashboard-section .dashboard-left-sidebar .profile-box .profile-contain .profile-name h3 {
            font-size: calc(18px + 4*(100vw - 320px)/1600);
            font-weight: 600;
            letter-spacing: .7px
        }

        .user-dashboard-section .dashboard-left-sidebar .profile-box .profile-contain .profile-name h6 {
            font-size: calc(14px + 1*(100vw - 320px)/1600);
            margin-top: 4px
        }

            .user-dashboard-section .dashboard-left-sidebar .profile-box .profile-contain .profile-name h6 span {
                margin: 0 8px
            }

.user-dashboard-section .dashboard-left-sidebar .user-nav-pills {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(2px + 5*(100vw - 320px)/1600);
    margin: calc(10px + 10*(100vw - 320px)/1600) 0 6px
}

    .user-dashboard-section .dashboard-left-sidebar .user-nav-pills .nav-item {
        width: 100%;
        display: block
    }

        .user-dashboard-section .dashboard-left-sidebar .user-nav-pills .nav-item .nav-link {
            font-size: calc(17px + 1*(100vw - 320px)/1600);
            position: relative;
            color: #4a5568;
            width: 100%;
            text-align: left;
            padding: calc(10px + 3*(100vw - 320px)/1600) calc(10px + 3*(100vw - 320px)/1600) calc(10px + 3*(100vw - 320px)/1600) calc(19px + 4*(100vw - 320px)/1600);
            font-weight: 500;
            z-index: 0;
            overflow: hidden;
            border-radius: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

            .user-dashboard-section .dashboard-left-sidebar .user-nav-pills .nav-item .nav-link.active, .user-dashboard-section .dashboard-left-sidebar .user-nav-pills .nav-item .nav-link .show > .nav-link {
                border-left: 3px solid var(--theme-color);
                font-weight: 600;
                background-color: rgba(0,0,0,0);
                color: var(--theme-color)
            }

                .user-dashboard-section .dashboard-left-sidebar .user-nav-pills .nav-item .nav-link.active::before, .user-dashboard-section .dashboard-left-sidebar .user-nav-pills .nav-item .nav-link .show > .nav-link::before {
                    width: 100%;
                    height: 100%;
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: var(--theme-color2);
                    z-index: -1;
                    opacity: .1
                }

            .user-dashboard-section .dashboard-left-sidebar .user-nav-pills .nav-item .nav-link .feather {
                width: calc(18px + 1*(100vw - 320px)/1600);
                height: auto;
                margin-right: 10px
            }

[dir=rtl] .user-dashboard-section .dashboard-left-sidebar .user-nav-pills .nav-item .nav-link .feather {
    margin-right: unset;
    margin-left: 10px
}

.user-dashboard-section .dashboard-right-sidebar {
    background-color: #f8f8f8;
    padding: calc(20px + 20*(100vw - 320px)/1600);
    border-radius: 8px;
    height: 100%
}

@media(max-width: 991px) {
    .user-dashboard-section .dashboard-right-sidebar {
        height: auto
    }
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-bg-box {
    padding: calc(12px + 8*(100vw - 320px)/1600);
    background-color: #fff;
    border-radius: 6px
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-bg-box + .dashboard-bg-box {
        margin-top: 24px
    }

.user-dashboard-section .dashboard-right-sidebar .dashboard-home .dashboard-user-name h6 {
    font-size: 16px;
    margin-bottom: 10px
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-home .dashboard-user-name p {
    margin: 0;
    font-size: calc(14px + 1*(100vw - 320px)/1600);
    line-height: 1.5;
    letter-spacing: .3px
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-home .total-box {
    margin: 30px 0
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-home .total-box .totle-contain {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        gap: 15px;
        background-color: #fff;
        padding: calc(16px + 9*(100vw - 320px)/1600);
        border-radius: 9px;
        -webkit-box-shadow: 0 0 8px rgba(34,34,34,.08);
        box-shadow: 0 0 8px rgba(34,34,34,.08);
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        position: relative;
        overflow: hidden
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-home .total-box .totle-contain:hover .img-1 {
            width: calc(84px + 12*(100vw - 320px)/1600);
            -webkit-transform: translateY(-50%) rotate(-7deg);
            transform: translateY(-50%) rotate(-7deg);
            opacity: .2;
            right: -19px
        }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-home .total-box .totle-contain img {
            width: calc(54px + 6*(100vw - 320px)/1600)
        }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-home .total-box .totle-contain .img-1 {
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            width: calc(78px + 12*(100vw - 320px)/1600);
            position: absolute;
            opacity: .12;
            right: -30px;
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
            -webkit-filter: grayscale(1);
            filter: grayscale(1)
        }

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-home .total-box .totle-contain .img-1 {
    right: unset;
    left: -30px
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-home .total-box .totle-contain .totle-detail h5 {
    margin-bottom: calc(3px + 4*(100vw - 320px)/1600);
    color: #4a5568;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    font-size: calc(14px + 2*(100vw - 320px)/1600)
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-home .total-box .totle-contain .totle-detail h3 {
    font-weight: 600
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-home .dashboard-contant-title {
    border-bottom: 1px solid #ddd;
    padding-bottom: calc(5px + 5*(100vw - 320px)/1600);
    margin-bottom: calc(10px + 5*(100vw - 320px)/1600)
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-home .dashboard-contant-title h4 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-home .dashboard-contant-title h4 a {
            font-size: calc(14px + 1*(100vw - 320px)/1600)
        }

            .user-dashboard-section .dashboard-right-sidebar .dashboard-home .dashboard-contant-title h4 a:hover {
                color: var(--theme-color)
            }

.user-dashboard-section .dashboard-right-sidebar .dashboard-home .dashboard-detail h6 {
    margin-bottom: calc(4px + 4*(100vw - 320px)/1600);
    line-height: 1.6
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-home .dashboard-detail a:hover {
    color: var(--theme-color)
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(14px + 16*(100vw - 320px)/1600)
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .order-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: calc(8px + 6*(100vw - 320px)/1600);
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .order-container .order-icon {
            position: relative;
            z-index: 0;
            color: var(--theme-color);
            padding: 9px;
            border-radius: 100%;
            overflow: hidden
        }

            .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .order-container .order-icon::before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                background-color: var(--theme-color);
                opacity: .1;
                z-index: -1
            }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .order-container .order-detail h4 {
            font-weight: 600;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            letter-spacing: .6px;
            font-size: calc(17px + 3*(100vw - 320px)/1600)
        }

            .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .order-container .order-detail h4 span {
                font-size: 12px;
                font-weight: 400;
                color: #fff;
                background: -webkit-gradient(linear, right top, left top, from(#ff6b6b), to(#ff4f4f));
                background: linear-gradient(-90deg, #ff6b6b 0%, #ff4f4f 100%);
                padding: 4px 6px;
                border-radius: 4px;
                margin-left: calc(9px + 11*(100vw - 320px)/1600);
                font-weight: 600
            }

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .order-container .order-detail h4 span {
    margin-left: unset;
    margin-right: calc(9px + 11*(100vw - 320px)/1600)
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .order-container .order-detail h4 span.success-bg {
    background: var(--theme-color2)
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .order-container .order-detail h6 {
    margin-top: 6px;
    font-size: calc(14px + 1*(100vw - 320px)/1600);
    letter-spacing: .6px;
    font-weight: 300;
    line-height: 1.5
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 20px;
    background-color: #f8f8f8;
    padding: calc(15px + 5*(100vw - 320px)/1600);
    margin-top: 30px;
    border-radius: 8px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media(max-width: 1199px) {
    .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail {
        display: block
    }
}

@media(max-width: 991px) {
    .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

@media(max-width: 767px) {
    .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail {
        display: block
    }
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail:hover .order-image img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail .order-image {
    display: block
}

@media(max-width: 1199px) {
    .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail .order-image {
        text-align: center;
        margin-bottom: calc(14px + 16*(100vw - 320px)/1600)
    }
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail .order-image img {
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail .order-wrap a {
    display: block;
    color: #222
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail .order-wrap a:hover {
        color: #222
    }

    .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail .order-wrap a h3 {
        font-weight: 600;
        margin-bottom: 6px
    }

.user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail .order-wrap p {
    line-height: 1.5;
    font-size: calc(14px + 1*(100vw - 320px)/1600)
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail .order-wrap .product-size {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(6px + 3*(100vw - 320px)/1600)
}

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail .order-wrap .product-size {
    padding-right: 0
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail .order-wrap .product-size li {
    width: 100%
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail .order-wrap .product-size li .size-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-order .order-contain .order-box .product-order-detail .order-wrap .product-size li .size-box h5 {
            font-weight: 600;
            margin-left: 8px;
            font-size: 14px
        }

.user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box {
    border-radius: 8px;
    padding: calc(12px + 12*(100vw - 320px)/1600);
    background-color: #fff;
    -webkit-box-shadow: 0 0 9px rgba(0,0,0,.07);
    box-shadow: 0 0 9px rgba(0,0,0,.07);
    position: relative;
    height: 100%;
    overflow: hidden
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .label {
            position: absolute;
            top: 0;
            right: 0;
            background-color: var(--theme-color);
            padding: 2px 8px;
            border-radius: 4px;
            color: #fff;
            font-size: 12px;
            letter-spacing: .8px
        }

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .label {
    right: unset;
    left: 0
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .form-check {
    margin-top: 3px
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .form-check .form-check-input {
        width: calc(15px + 2*(100vw - 320px)/1600);
        height: calc(15px + 2*(100vw - 320px)/1600);
        margin-top: 2px
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .form-check .form-check-input:checked {
            background-color: var(--theme-color);
            border-color: var(--theme-color)
        }

            .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .form-check .form-check-input:checked[type=radio] {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e")
            }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .form-check .form-check-input:focus {
            -webkit-box-shadow: none;
            box-shadow: none
        }

.user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .address-table table {
    margin-bottom: 0
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .address-table table tr:first-child td {
        padding-top: 0;
        font-weight: 600;
        font-size: calc(17px + 1*(100vw - 320px)/1600);
        color: #222
    }

    .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .address-table table tr td {
        border: none;
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        padding: 4px 0;
        color: #4a5568
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .address-table table tr td:first-child {
            min-width: 90px;
            padding-left: 8px
        }

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .address-table table tr td:first-child {
    padding-left: unset;
    padding-right: 8px
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .address-table table tr td:last-child p {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    margin-bottom: 0;
    line-height: 1.5
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .address-table table tr td h4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 12px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 500;
    color: #222
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box > div .address-table table tr td h4 span {
        background-color: var(--theme-color);
        padding: 4px 8px;
        border-radius: 4px;
        color: #fff;
        font-size: 12px;
        letter-spacing: .8px
    }

.user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box .button-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box .button-group button {
        background-color: #f8f8f8;
        font-weight: 600
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box .button-group button:hover {
            background-color: var(--theme-color);
            color: #fff
        }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box .button-group button .feather {
            width: calc(16px + 2*(100vw - 320px)/1600);
            height: auto;
            margin-right: calc(6px + 2*(100vw - 320px)/1600)
        }

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-address .address-box .button-group button .feather {
    margin-right: unset;
    margin-left: calc(6px + 2*(100vw - 320px)/1600)
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-address .add-address .address-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 100%;
    color: #222
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail {
    position: relative
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail:hover .edit-card {
        opacity: 1;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

    .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail.add-card {
        background-color: #f9f9f9;
        cursor: pointer;
        padding: 0
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail.add-card .card-details {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            min-height: 130px;
            background: #d2d2d2;
            color: #222;
            text-align: center
        }

            .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail.add-card .card-details h5 {
                margin-bottom: 0;
                text-transform: capitalize
            }

    .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details {
        height: 100%;
        color: #fff;
        padding: 30px 20px;
        border-radius: 5px;
        background-color: #4b77a0;
        background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.03) 2px, rgba(255, 255, 255, 0.04) 3px, rgba(255, 255, 255, 0.05) 4px),-webkit-linear-gradient(-245deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2) 70%, rgba(255, 255, 255, 0) 90%)
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details.card-visa {
            background-color: #777876
        }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details.dabit-card {
            background-color: #86b8cf
        }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .card-number {
            margin-bottom: 10px
        }

            .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .card-number h4 {
                color: #fff;
                font-size: calc(16px + 2*(100vw - 320px)/1600)
            }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .valid-detail {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-top: calc(10px + 10*(100vw - 320px)/1600)
        }

            .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .valid-detail .title {
                margin-bottom: 0
            }

                .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .valid-detail .title span {
                    display: block;
                    color: rgba(255,255,255,.7);
                    text-transform: uppercase;
                    font-size: 12px;
                    line-height: 1.3
                }

            .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .valid-detail .date h3 {
                margin-bottom: 0;
                color: #fff;
                margin-left: 15px;
                font-size: calc(16px + 2*(100vw - 320px)/1600);
                font-weight: normal
            }

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .valid-detail .date h3 {
    margin-left: 0;
    margin-right: 15px
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .valid-detail .primary {
    margin-left: auto
}

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .valid-detail .primary {
    margin-left: 0;
    margin-right: auto
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .valid-detail .primary span {
    font-size: calc(12px + 2*(100vw - 320px)/1600);
    padding: 0;
    font-weight: 400;
    text-transform: capitalize
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .name-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: calc(10px + 15*(100vw - 320px)/1600)
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .name-detail .name h5 {
        text-transform: uppercase;
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        margin-bottom: 0;
        color: #fff
    }

    .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .card-details .name-detail .card-img {
        width: auto
    }

.user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .edit-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    background-color: rgba(34,34,34,.8);
    border-radius: 5px;
    opacity: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

@media(max-width: 767px) {
    .user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .edit-card {
        display: none
    }
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-card .payment-card-detail .edit-card a {
    padding: 0 10px;
    text-transform: capitalize;
    color: #fff
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-card .edit-card-mobile {
    display: none
}

@media(max-width: 767px) {
    .user-dashboard-section .dashboard-right-sidebar .dashboard-card .edit-card-mobile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-top: 10px
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-card .edit-card-mobile a {
            padding: 0 10px;
            text-transform: capitalize;
            color: #222
        }
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .profile-name-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media(max-width: 575px) {
    .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .profile-name-detail {
        display: block
    }
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .profile-name-detail h3 {
    font-weight: 400;
    font-size: 16px;
    margin-right: 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .profile-name-detail h3 {
    margin-right: unset;
    margin-left: 10px
}

@media(max-width: 360px) {
    .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .profile-name-detail h3 {
        margin-right: 0
    }

    [dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .profile-name-detail h3 {
        margin-right: unset;
        margin-left: 0
    }
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .profile-name-detail h3 span {
    background: var(--theme-color2);
    color: #fff;
    padding: 3px 8px;
    margin-left: 10px;
    border-radius: 5px;
    font-size: 13px
}

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .profile-name-detail h3 span {
    margin-left: unset;
    margin-right: 10px
}

@media(max-width: 575px) {
    .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .profile-name-detail .profile-rating {
        margin-top: 3px
    }
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail a {
    margin-left: auto;
    padding: 8px 14px;
    position: relative;
    z-index: 0;
    border-radius: 5px;
    overflow: hidden;
    display: inline-block
}

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail a {
    margin-left: unset;
    margin-right: auto
}

@media(max-width: 575px) {
    .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail a {
        margin-top: 10px
    }
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail a::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--theme-color2);
    opacity: .08;
    z-index: -1
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail a:hover {
    color: var(--theme-color)
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .location-profile {
    margin-top: 20px;
    border-bottom: 1px solid #ececec;
    padding-bottom: 15px
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .location-profile ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: calc(10px + 16*(100vw - 320px)/1600);
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .location-profile ul {
    padding-right: 0
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .location-profile ul li .location-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 7px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #4a5568
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .location-profile ul li .location-box .feather {
        width: calc(18px + 2*(100vw - 320px)/1600);
        height: auto
    }

    .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .location-profile ul li .location-box h6 {
        font-size: calc(15px + 1*(100vw - 320px)/1600)
    }

.user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-detail .profile-description p {
    margin: 20px 0 0;
    color: #4a5568;
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    line-height: 1.6
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-about {
    margin-top: 20px
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-about .table {
        margin-bottom: 36px
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-about .table tbody tr td {
            vertical-align: middle;
            border: none;
            font-size: calc(14px + 2*(100vw - 320px)/1600);
            white-space: nowrap
        }

            .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-about .table tbody tr td:first-child {
                color: #4a5568
            }

            .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-about .table tbody tr td a {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center
            }

                .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-about .table tbody tr td a:hover {
                    color: var(--theme-color)
                }

                .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-about .table tbody tr td a span {
                    margin-left: calc(8px + 12*(100vw - 320px)/1600);
                    font-size: 14px;
                    padding: 5px 10px;
                    border-radius: 5px;
                    position: relative;
                    font-weight: 600;
                    overflow: hidden;
                    z-index: 0
                }

[dir=rtl] .user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-about .table tbody tr td a span {
    margin-left: unset;
    margin-right: calc(8px + 12*(100vw - 320px)/1600)
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-profile .profile-about .table tbody tr td a span::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--theme-color2);
    opacity: .08;
    z-index: -1
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box + .privacy-box {
    margin-top: 15px
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box h6 {
    font-size: calc(15px + 3*(100vw - 320px)/1600);
    margin-bottom: 6px;
    line-height: 1.5
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box p {
    margin: 0;
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    line-height: 1.6
}

.user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .switch {
    position: absolute;
    -webkit-clip-path: circle(0%);
    clip-path: circle(0%);
    opacity: 0
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .switch + label {
        width: 62px;
        height: 25px;
        position: relative;
        border-radius: 50px;
        cursor: pointer;
        background-color: rgba(14,153,126,.1490196078);
        border: 1px solid #ddd
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .switch + label:before, .user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .switch + label:after {
            display: inline-block;
            position: absolute
        }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .switch + label:before {
            width: 19px;
            height: 19px;
            content: "";
            border-radius: 100%;
            left: 2px;
            top: 2px;
            background: var(--theme-color2);
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

    .user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .switch:checked + label:before {
        left: 39px
    }

.user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .form-check-input {
    position: absolute;
    -webkit-clip-path: circle(0%);
    clip-path: circle(0%);
    opacity: 0
}

    .user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .form-check-input + label {
        width: 62px;
        height: 25px;
        position: relative;
        border-radius: 50px;
        cursor: pointer;
        background-color: rgba(var(--theme-color-rgb), 0.149);
        border: 1px solid rgba(var(--theme-color-rgb), 0.149)
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .form-check-input + label:before, .user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .form-check-input + label:after {
            display: inline-block;
            position: absolute
        }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .form-check-input + label:before {
            width: 19px;
            height: 19px;
            content: "";
            border-radius: 100%;
            left: 2px;
            top: 2px;
            background-color: var(--theme-color);
            -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out
        }

    .user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .form-check-input:checked + label {
        background-color: var(--theme-color)
    }

        .user-dashboard-section .dashboard-right-sidebar .dashboard-privacy .privacy-box .switch-radio .form-check-input:checked + label:before {
            left: 39px;
            background: #fff
        }

.order-detail .order-image {
    background-color: #f8f8f8;
    padding: 40px;
    border-radius: 8px;
    text-align: center
}

    .order-detail .order-image img {
        width: 360px;
        margin: 0 auto
    }

.order-detail .order-details-contain {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: calc(10px + 5*(100vw - 320px)/1600);
    background-color: #f8f8f8;
    padding: calc(14px + 6*(100vw - 320px)/1600);
    border-radius: 8px;
    height: 100%
}

    .order-detail .order-details-contain .order-tracking-icon .feather {
        width: 25px;
        height: auto;
        stroke-width: 1.4px
    }

    .order-detail .order-details-contain .order-details-name h2 {
        font-size: calc(20px + 4*(100vw - 320px)/1600)
    }

    .order-detail .order-details-contain .order-details-name h4 {
        line-height: 1.4;
        font-weight: 500;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden
    }

    .order-detail .order-details-contain .order-details-name h5 {
        margin-bottom: 7px
    }

    .order-detail .order-details-contain .order-details-name img {
        margin-top: calc(6px + 6*(100vw - 320px)/1600);
        width: calc(160px + 40*(100vw - 320px)/1600)
    }

.order-detail .progtrckr {
    margin: 15px 0 0;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

@media(max-width: 575px) {
    .order-detail .progtrckr {
        display: inline;
        margin: 30px 0;
        overflow: hidden
    }
}

.order-detail .progtrckr li {
    display: inline-block;
    text-align: center;
    margin: 10px 0;
    position: relative
}

@media(max-width: 575px) {
    .order-detail .progtrckr li {
        margin: 0;
        width: 50% !important
    }
}

.order-detail .progtrckr li h5 {
    margin-top: 20px;
    text-align: center;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 500
}

@media(max-width: 575px) {
    .order-detail .progtrckr li h5 {
        display: block;
        text-align: left;
        margin-top: 0
    }

    [dir=rtl] .order-detail .progtrckr li h5 {
        text-align: right
    }
}

.order-detail .progtrckr li:before {
    position: relative;
    top: -2px;
    float: left;
    left: 50% !important;
    line-height: 1;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important
}

@media(max-width: 575px) {
    .order-detail .progtrckr li:before {
        position: relative;
        top: 10px;
        float: left;
        left: -2px !important;
        line-height: 1;
        -webkit-transform: translate(-50%, -50%) !important;
        transform: translate(-50%, -50%) !important
    }

    [dir=rtl] .order-detail .progtrckr li:before {
        float: right;
        right: -32px !important;
        left: unset !important
    }
}

.order-detail .progtrckr li.progtrckr-todo {
    color: #4a5568;
    border-top: 4px solid #959595;
    width: 100% !important
}

@media(max-width: 575px) {
    .order-detail .progtrckr li.progtrckr-todo {
        position: relative;
        text-align: left;
        margin-left: 30px;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding-bottom: calc(20px + 20*(100vw - 320px)/1600);
        padding-left: 30px;
        border-top: unset;
        border-left: 4px solid #959595
    }

    [dir=rtl] .order-detail .progtrckr li.progtrckr-todo {
        border-left: none;
        border-right: 4px solid #4a5568;
        margin-left: 0;
        margin-right: 30px;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
        padding-left: 0;
        padding-right: 30px;
        text-align: right
    }
}

.order-detail .progtrckr li.progtrckr-todo:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding-top: 2px;
    content: "";
    color: #fff;
    background: #959595;
    line-height: 35px;
    border: none;
    border-radius: 35px;
    font-size: 16px
}

@media(max-width: 575px) {
    .order-detail .progtrckr li.progtrckr-todo:before {
        position: absolute;
        top: 10px;
        left: -17px;
        line-height: 1;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%)
    }

    [dir=rtl] .order-detail .progtrckr li.progtrckr-todo:before {
        left: unset;
        right: -17px
    }
}

.order-detail .progtrckr li.progtrckr-todo h6 {
    font-size: 13px;
    margin-top: 8px
}

.order-detail .progtrckr li.progtrckr-done {
    color: #222;
    border-top: 4px solid var(--theme-color);
    width: 100% !important
}

@media(max-width: 575px) {
    .order-detail .progtrckr li.progtrckr-done:first-of-type {
        padding-top: 5px
    }
}

@media(max-width: 575px) {
    .order-detail .progtrckr li.progtrckr-done {
        position: relative;
        text-align: left;
        margin-left: 30px;
        -webkit-box-align: self-start;
        -ms-flex-align: self-start;
        align-items: self-start;
        padding-bottom: calc(20px + 20*(100vw - 320px)/1600);
        border-top: unset;
        border-left: 4px solid var(--theme-color)
    }

    [dir=rtl] .order-detail .progtrckr li.progtrckr-done {
        margin-left: 0;
        margin-right: 30px;
        text-align: right;
        border-left: none;
        border-right: 4px solid var(--theme-color);
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end
    }
}

.order-detail .progtrckr li.progtrckr-done:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding-top: 2px;
    content: "";
    color: #fff;
    background-color: var(--theme-color);
    line-height: 35px;
    border: none;
    border-radius: 35px;
    font-size: 16px
}

.order-detail .progtrckr li.progtrckr-done h6 {
    font-size: 13px;
    margin-top: 8px;
    color: #4a5568
}

.order-tab-table {
    margin-bottom: 0
}

    .order-tab-table thead tr th {
        text-align: center;
        background-color: #e7e7e7;
        color: #222;
        padding: calc(10px + 4*(100vw - 320px)/1600) calc(12px + 8*(100vw - 320px)/1600);
        font-size: calc(17px + 3*(100vw - 320px)/1600);
        font-weight: 400
    }

    .order-tab-table tbody {
        border-top: none !important
    }

        .order-tab-table tbody tr td {
            font-weight: 300;
            text-align: center;
            padding: calc(10px + 4*(100vw - 320px)/1600) calc(12px + 8*(100vw - 320px)/1600);
            font-size: calc(15px + 2*(100vw - 320px)/1600);
            min-width: 160px;
            color: #777
        }

.order-table-section .order-navpills {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: calc(6px + 9*(100vw - 320px)/1600);
    overflow: auto hidden
}

    .order-table-section .order-navpills .nav-item .nav-link {
        font-size: calc(15px + 3*(100vw - 320px)/1600);
        padding: calc(11px + 3*(100vw - 320px)/1600) calc(17px + 7*(100vw - 320px)/1600);
        color: #4a5568;
        font-weight: 600;
        white-space: nowrap
    }

        .order-table-section .order-navpills .nav-item .nav-link.active {
            background: var(--theme-color2);
            color: #fff
        }

.order-table-section .order-tab {
    margin-top: 22px
}

    .order-table-section .order-tab .order-tab-table {
        margin-bottom: 0
    }

        .order-table-section .order-tab .order-tab-table thead tr th {
            text-align: center;
            background-color: #e7e7e7;
            color: #222;
            padding: calc(10px + 4*(100vw - 320px)/1600) calc(12px + 8*(100vw - 320px)/1600);
            font-size: calc(17px + 3*(100vw - 320px)/1600);
            font-weight: 400
        }

        .order-table-section .order-tab .order-tab-table tbody {
            border-top: none
        }

            .order-table-section .order-tab .order-tab-table tbody tr td {
                font-weight: 300;
                text-align: center;
                padding: calc(10px + 4*(100vw - 320px)/1600) calc(12px + 8*(100vw - 320px)/1600);
                font-size: calc(15px + 2*(100vw - 320px)/1600);
                min-width: 160px;
                color: #777
            }

.order-table table tbody tr td {
    vertical-align: middle
}

.order-success-2 tbody {
    border-top: none
}

.search-section .search-box {
    position: relative
}

    .search-section .search-box .input-group .form-control:focus {
        z-index: 0
    }

    .search-section .search-box .input-group button {
        z-index: 0
    }

.profile-tab ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(15px + 6*(100vw - 320px)/1600)
}

    .profile-tab ul li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%
    }

@media(max-width: 575px) {
    .profile-tab ul li {
        display: block
    }
}

.profile-tab ul li h5 {
    font-size: calc(14px + 2*(100vw - 320px)/1600)
}

    .profile-tab ul li h5:first-child {
        width: 220px
    }

    .profile-tab ul li h5:last-child {
        color: #4a5568
    }

@media(max-width: 575px) {
    .profile-tab ul li h5:last-child {
        margin-top: 8px
    }
}

.dashboard-privacy .privacy-box .custom-form-check-2 label {
    font-size: calc(15px + 3*(100vw - 320px)/1600)
}

.apexcharts-tooltip * {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.apexcharts-toolbar {
    z-index: 0
}

.custom-padding {
    padding-right: 10px
}

.custom-height {
    max-height: 190px;
    overflow-y: auto;
    height: 100%
}

    .custom-height::-webkit-scrollbar-track {
        border-radius: 10px;
        background-color: rgba(85,85,85,.14)
    }

    .custom-height::-webkit-scrollbar {
        width: 4px;
        background-color: #f5f5f5;
        border-radius: 50px
    }

    .custom-height::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: rgba(85,85,85,.5)
    }

.category-title h3 {
    display: inline-block;
    padding-bottom: 4px;
    margin-bottom: 18px;
    font-weight: 600;
    font-size: calc(16px + 2*(100vw - 320px)/1600);
    color: var(--theme-color)
}

.category-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(10px + 6*(100vw - 320px)/1600)
}

[dir=rtl] .category-list {
    padding-right: 0
}

.category-list li {
    display: block;
    width: 100%
}

    .category-list li .category-list-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .category-list li .category-list-box input {
            margin-top: -4px
        }

        .category-list li .category-list-box .form-check-label {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            width: 100%;
            margin-left: 8px
        }

            .category-list li .category-list-box .form-check-label .name {
                font-size: calc(15px + 2*(100vw - 320px)/1600);
                color: #222;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                overflow: hidden;
                width: 80%
            }

            .category-list li .category-list-box .form-check-label .number {
                color: #777;
                font-size: calc(14px + 1*(100vw - 320px)/1600)
            }

.irs {
    position: relative;
    display: block;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 55px
}

    .irs .irs-line {
        position: relative;
        display: block;
        overflow: hidden;
        outline: none !important;
        height: 10px;
        top: 33px;
        background-color: #f9f8f6;
        border-radius: 50px
    }

    .irs .irs-line-left {
        width: 11%;
        height: 8px;
        position: absolute;
        display: block;
        top: 0;
        left: 0
    }

    .irs .irs-line-mid {
        width: 82%;
        height: 8px;
        position: absolute;
        display: block;
        top: 0;
        left: 9%
    }

    .irs .irs-line-right {
        width: 11%;
        height: 8px;
        position: absolute;
        display: block;
        top: 0;
        right: 0
    }

    .irs .irs-bar {
        width: 0;
        height: 10px;
        position: absolute;
        display: block;
        left: 0;
        top: 33px;
        background-color: var(--theme-color)
    }

    .irs .irs-bar-edge {
        width: 14px;
        height: 10px;
        position: absolute;
        display: block;
        left: 0;
        top: 33px;
        border: 1px solid #428bca;
        border-right: 0;
        background: #428bca;
        background: -webkit-gradient(linear, left bottom, left top, from(#428bca), to(#7fc3e8));
        background: linear-gradient(to top, #428bca 0%, #7fc3e8 100%);
        border-radius: 16px 0 0 16px
    }

    .irs .irs-shadow {
        width: 0;
        height: 2px;
        position: absolute;
        display: none;
        left: 0;
        top: 38px;
        background: #222;
        opacity: .3;
        border-radius: 5px
    }

    .irs .irs-slider {
        width: 20px;
        height: 20px;
        position: absolute;
        display: block;
        z-index: 1;
        top: 28px;
        border: 3px solid #fff;
        background-color: var(--theme-color);
        border-radius: 100%;
        cursor: pointer
    }

        .irs .irs-slider .irs-slider.type_last {
            z-index: 2
        }

        .irs .irs-slider .irs-min {
            position: absolute;
            display: block;
            left: 0;
            cursor: default;
            color: #333;
            font-size: 12px;
            line-height: 1.333;
            text-shadow: none;
            top: 0;
            padding: 1px 5px;
            background: rgba(34,34,34,.1);
            border-radius: 3px
        }

    .irs .irs-max {
        position: absolute;
        display: block;
        right: 0;
        cursor: default;
        color: #777;
        font-size: 12px;
        line-height: 1.333;
        text-shadow: none;
        top: 0;
        padding: 3px 7px;
        background: rgba(34,34,34,.1);
        border-radius: 3px;
        font-weight: 500
    }

    .irs .irs-min {
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        cursor: default;
        color: #777;
        font-size: 12px;
        line-height: 1.333;
        text-shadow: none;
        padding: 3px 7px;
        background: rgba(34,34,34,.1);
        border-radius: 3px;
        font-weight: 500
    }

    .irs .irs-from {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        cursor: default;
        white-space: nowrap;
        color: #fff;
        font-size: 13px;
        line-height: 1.333;
        text-shadow: none;
        padding: 3px 7px;
        background-color: var(--theme-color);
        border-radius: 3px;
        font-weight: 600
    }

    .irs .irs-to {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        cursor: default;
        white-space: nowrap;
        color: #fff;
        font-size: 13px;
        line-height: 1.333;
        text-shadow: none;
        padding: 3px 7px;
        background-color: var(--theme-color);
        border-radius: 3px;
        font-weight: 600
    }

    .irs .irs-single {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        cursor: default;
        white-space: nowrap;
        color: #fff;
        font-size: 14px;
        line-height: 1.333;
        text-shadow: none;
        padding: 1px 5px;
        background: var(--theme-color);
        border-radius: 3px
    }

    .irs .irs-grid {
        width: 100%;
        height: 20px;
        position: absolute;
        display: none;
        bottom: 0;
        left: 0;
        height: 27px
    }

    .irs .irs-with-grid {
        height: 75px
    }

        .irs .irs-with-grid .irs-grid {
            display: block
        }

    .irs .irs-grid-pol {
        width: 1px;
        height: 8px;
        position: absolute;
        top: 0;
        left: 0;
        background: #222;
        opacity: .5;
        background: #428bca
    }

        .irs .irs-grid-pol.small {
            height: 4px;
            background: #999
        }

    .irs .irs-grid-text {
        position: absolute;
        bottom: 0;
        left: 0;
        white-space: nowrap;
        text-align: center;
        font-size: 9px;
        line-height: 9px;
        padding: 0 3px;
        color: #222;
        bottom: 5px;
        color: #99a4ac
    }

    .irs .irs-disable-mask {
        width: 102%;
        height: 100%;
        position: absolute;
        display: block;
        top: 0;
        left: -1%;
        cursor: default;
        z-index: 2
    }

    .irs .irs-disabled {
        opacity: .4
    }

    .irs .irs-hidden-input {
        position: absolute !important;
        display: block !important;
        top: 0 !important;
        left: 0 !important;
        width: 0 !important;
        height: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        outline: none !important;
        z-index: -9999 !important;
        background: none !important;
        border-style: solid !important;
        border-color: rgba(0,0,0,0) !important
    }

    .irs .lt-ie9 .irs-disable-mask {
        background: #222;
        filter: alpha(opacity=0);
        cursor: not-allowed
    }

    .irs .lt-ie9 .irs-shadow {
        filter: alpha(opacity=30)
    }

    .irs .lt-ie9 .irs-min {
        background: #ccc
    }

    .irs .lt-ie9 .irs-max {
        background: #ccc
    }

    .irs .lt-ie9 .irs-from {
        background: #999
    }

    .irs .lt-ie9 .irs-to {
        background: #999
    }

    .irs .lt-ie9 .irs-single {
        background: #999
    }

.js-range-slider {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    color: #222;
    width: 100%
}

.shop-section .left-box {
    position: sticky;
    top: 0;
    border-right: 1px solid #ddd
}

[dir=rtl] .shop-section .left-box {
    border-right: unset;
    border-left: 1px solid #ddd
}

@media(max-width: 991px) {
    .shop-section .left-box {
        width: 300px;
        height: 100%;
        border-right: unset;
        position: fixed;
        top: 0;
        left: -350px;
        background-color: #fff;
        z-index: 1041;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        overflow-x: scroll;
        overflow-y: auto;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

    [dir=rtl] .shop-section .left-box {
        border-right: unset;
        border-left: unset;
        left: unset;
        right: -350px
    }
}

.shop-section .left-box.right-box {
    border-right: unset;
    border-left: 1px solid #ddd
}

[dir=rtl] .shop-section .left-box.right-box {
    border-left: unset;
    border-right: 1px solid #ddd
}

@media(max-width: 991px) {
    .shop-section .left-box.right-box {
        border-left: unset;
        left: unset;
        right: -350px
    }

    [dir=rtl] .shop-section .left-box.right-box {
        left: -350px;
        right: unset
    }
}

.shop-section .left-box.right-box.show {
    left: unset;
    right: 0
}

[dir=rtl] .shop-section .left-box.right-box.show {
    right: unset;
    left: 0
}

.shop-section .left-box.show {
    left: 0
}

[dir=rtl] .shop-section .left-box.show {
    right: 0;
    left: unset
}

.shop-section .left-box .shop-left-sidebar {
    padding-right: calc(16px + 10*(100vw - 320px)/1600)
}

[dir=rtl] .shop-section .left-box .shop-left-sidebar {
    padding-right: unset;
    padding-left: calc(16px + 10*(100vw - 320px)/1600)
}

@media(max-width: 991px) {
    .shop-section .left-box .shop-left-sidebar {
        padding: calc(16px + 10*(100vw - 320px)/1600)
    }

    [dir=rtl] .shop-section .left-box .shop-left-sidebar {
        padding: calc(16px + 10*(100vw - 320px)/1600)
    }
}

.shop-section .left-box .shop-left-sidebar.shop-right-sidebar {
    padding-left: calc(16px + 10*(100vw - 320px)/1600);
    padding-right: unset
}

[dir=rtl] .shop-section .left-box .shop-left-sidebar.shop-right-sidebar {
    padding-left: unset;
    padding-right: calc(16px + 10*(100vw - 320px)/1600)
}

@media(max-width: 991px) {
    .shop-section .left-box .shop-left-sidebar.shop-right-sidebar {
        padding: calc(16px + 10*(100vw - 320px)/1600)
    }

    [dir=rtl] .shop-section .left-box .shop-left-sidebar.shop-right-sidebar {
        padding: calc(16px + 10*(100vw - 320px)/1600)
    }
}

.shop-section .left-box .shop-left-sidebar.shop-right-sidebar .back-button h3 i {
    margin-right: auto;
    margin-left: 0
}

[dir=rtl] .shop-section .left-box .shop-left-sidebar.shop-right-sidebar .back-button h3 i {
    margin-right: 0;
    margin-left: auto
}

.shop-section .left-box .shop-left-sidebar .back-button {
    display: none
}

@media(max-width: 991px) {
    .shop-section .left-box .shop-left-sidebar .back-button {
        display: block;
        margin-bottom: 26px
    }
}

.shop-section .left-box .shop-left-sidebar .back-button h3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 600
}

    .shop-section .left-box .shop-left-sidebar .back-button h3 i {
        margin-right: 10px
    }

[dir=rtl] .shop-section .left-box .shop-left-sidebar .back-button h3 i {
    margin-left: 10px;
    margin-right: unset
}

.shop-section .left-box .shop-left-sidebar .search-box {
    position: relative;
    margin-bottom: 30px
}

    .shop-section .left-box .shop-left-sidebar .search-box::after {
        content: "";
        position: absolute;
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 0;
        border-left: 1px solid #ddd;
        font-size: 15px;
        padding: 0 18px;
        height: 60%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #4a5568
    }

[dir=rtl] .shop-section .left-box .shop-left-sidebar .search-box::after {
    right: unset;
    left: 0;
    border-left: unset;
    border-right: 1px solid #ddd
}

.shop-section .left-box .shop-left-sidebar .filter-category {
    margin-bottom: 25px
}

    .shop-section .left-box .shop-left-sidebar .filter-category .filter-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 0;
        padding: 0 0 8px 0
    }

        .shop-section .left-box .shop-left-sidebar .filter-category .filter-title h2 {
            font-size: 18px;
            padding: 0 0 8px 0;
            font-weight: 600;
            border-bottom: 1px solid var(--theme-color)
        }

        .shop-section .left-box .shop-left-sidebar .filter-category .filter-title a {
            display: block
        }

            .shop-section .left-box .shop-left-sidebar .filter-category .filter-title a:hover {
                color: var(--theme-color)
            }

    .shop-section .left-box .shop-left-sidebar .filter-category ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: calc(10px + 5*(100vw - 320px)/1600);
        padding-top: 16px
    }

[dir=rtl] .shop-section .left-box .shop-left-sidebar .filter-category ul {
    padding-right: 0
}

.shop-section .left-box .shop-left-sidebar .filter-category ul li {
    padding: 9px 34px 9px 11px;
    background-color: #f9f8f6;
    position: relative;
    border-radius: 4px
}

    .shop-section .left-box .shop-left-sidebar .filter-category ul li:before {
        content: "";
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        right: 13px;
        color: #777;
        cursor: pointer
    }

    .shop-section .left-box .shop-left-sidebar .filter-category ul li a {
        color: #777
    }

.shop-section .left-box .shop-left-sidebar .custome-accordion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 25px
}

    .shop-section .left-box .shop-left-sidebar .custome-accordion .accordion-item {
        border: none;
        width: 100%
    }

        .shop-section .left-box .shop-left-sidebar .custome-accordion .accordion-item .accordion-header .accordion-button {
            font-size: 18px;
            padding: 0 0 8px 0;
            font-weight: 600;
            margin-bottom: 9px
        }

            .shop-section .left-box .shop-left-sidebar .custome-accordion .accordion-item .accordion-header .accordion-button.collapsed::before {
                content: "";
                -webkit-transform: rotate(180deg);
                transform: rotate(180deg)
            }

            .shop-section .left-box .shop-left-sidebar .custome-accordion .accordion-item .accordion-header .accordion-button:focus {
                border-color: unset;
                -webkit-box-shadow: none;
                box-shadow: none
            }

            .shop-section .left-box .shop-left-sidebar .custome-accordion .accordion-item .accordion-header .accordion-button::after {
                content: none
            }

            .shop-section .left-box .shop-left-sidebar .custome-accordion .accordion-item .accordion-header .accordion-button::before {
                content: "";
                position: absolute;
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                width: 26px;
                height: 26px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                top: 0;
                right: 5px;
                background-color: #f7f6f4;
                font-size: 15px;
                border-radius: 100%;
                -webkit-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out
            }

[dir=rtl] .shop-section .left-box .shop-left-sidebar .custome-accordion .accordion-item .accordion-header .accordion-button::before {
    right: unset;
    left: 5px
}

.shop-section .left-box .shop-left-sidebar .custome-accordion .accordion-item .accordion-header .accordion-button:not(.collapsed) {
    color: #222;
    background-color: rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none
}

.shop-section .left-box .shop-left-sidebar .custome-accordion .accordion-item .accordion-header .accordion-button span {
    position: relative
}

    .shop-section .left-box .shop-left-sidebar .custome-accordion .accordion-item .accordion-header .accordion-button span::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 1px;
        bottom: -8px;
        left: 0;
        background-color: var(--theme-color)
    }

.shop-section .left-box .shop-left-sidebar .custome-accordion .accordion-item .accordion-collapse .accordion-body {
    padding: 16px 0 0
}

.shop-section .left-box .shop-left-sidebar .left-title {
    margin-bottom: 20px;
    margin-top: 32px
}

    .shop-section .left-box .shop-left-sidebar .left-title h3 {
        font-weight: 700
    }

.shop-section .left-box .shop-left-sidebar .custom-nav-tab {
    gap: calc(11px + 9*(100vw - 320px)/1600)
}

    .shop-section .left-box .shop-left-sidebar .custom-nav-tab .nav-item {
        width: 100%;
        height: 60px;
        background-color: #f7f6f3;
        border-radius: 6px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden
    }

        .shop-section .left-box .shop-left-sidebar .custom-nav-tab .nav-item .nav-link {
            width: 100%;
            text-align: left;
            font-size: 18px;
            font-weight: 500;
            color: #222;
            border-radius: unset;
            position: relative;
            text-align: left
        }

[dir=rtl] .shop-section .left-box .shop-left-sidebar .custom-nav-tab .nav-item .nav-link {
    text-align: right
}

.shop-section .left-box .shop-left-sidebar .custom-nav-tab .nav-item .nav-link:hover(not) img {
    width: 75px;
    height: 75px;
    -webkit-transform: translateY(-50%) rotate(-4deg);
    transform: translateY(-50%) rotate(-4deg);
    right: -12px;
    opacity: .45
}

.shop-section .left-box .shop-left-sidebar .custom-nav-tab .nav-item .nav-link:hover img {
    width: 75px;
    height: 75px;
    -webkit-transform: translateY(-50%) rotate(-4deg);
    transform: translateY(-50%) rotate(-4deg);
    right: -12px;
    opacity: .29
}

.shop-section .left-box .shop-left-sidebar .custom-nav-tab .nav-item .nav-link.active {
    color: #fff;
    background: linear-gradient(90.56deg, var(--theme-color1) 8.46%, var(--theme-color) 62.97%);
    font-size: 19px;
    font-weight: 600
}

    .shop-section .left-box .shop-left-sidebar .custom-nav-tab .nav-item .nav-link.active img {
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 90px;
        height: 90px;
        position: absolute;
        right: -10px;
        -webkit-filter: invert(1);
        filter: invert(1);
        opacity: .4
    }

[dir=rtl] .shop-section .left-box .shop-left-sidebar .custom-nav-tab .nav-item .nav-link.active img {
    right: unset;
    left: -10px
}

.shop-section .left-box .shop-left-sidebar .custom-nav-tab .nav-item .nav-link img {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    position: absolute;
    right: -10px;
    opacity: .1;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

[dir=rtl] .shop-section .left-box .shop-left-sidebar .custom-nav-tab .nav-item .nav-link img {
    right: unset;
    left: -10px
}

.shop-section .show-button {
    margin-bottom: 14px
}

    .shop-section .show-button .filter-button {
        display: block;
        color: #fff
    }

        .shop-section .show-button .filter-button a {
            font-size: calc(14px + 2*(100vw - 320px)/1600);
            font-weight: 600;
            padding: calc(6px + 2*(100vw - 320px)/1600) calc(9px + 3*(100vw - 320px)/1600);
            background-color: var(--theme-color);
            border-radius: 5px;
            display: inline-block
        }

    .shop-section .show-button .filter-button-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 30px
    }

        .shop-section .show-button .filter-button-group .sort-by-button {
            color: #fff;
            margin-left: auto
        }

            .shop-section .show-button .filter-button-group .sort-by-button a {
                font-size: calc(14px + 2*(100vw - 320px)/1600);
                font-weight: 600;
                padding: calc(6px + 2*(100vw - 320px)/1600) calc(9px + 3*(100vw - 320px)/1600);
                background-color: var(--theme-color);
                border-radius: 5px;
                display: inline-block
            }

    .shop-section .show-button .filter-dropdown {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .shop-section .show-button .top-filter-menu-2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .shop-section .show-button .top-filter-menu-2 .sidebar-filter-menu a {
            border: none;
            background-color: #f6f5f2;
            font-size: calc(14px + 1*(100vw - 320px)/1600);
            padding: calc(9px + 1*(100vw - 320px)/1600) 15px;
            border-radius: 5px;
            color: #777
        }

        .shop-section .show-button .top-filter-menu-2 .category-dropdown {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

@media(max-width: 767px) {
    .shop-section .show-button .top-filter-menu-2 .category-dropdown h5 {
        display: none
    }
}

.shop-section .show-button .top-filter-menu-2 .category-dropdown .dropdown {
    margin-left: 10px
}

[dir=rtl] .shop-section .show-button .top-filter-menu-2 .category-dropdown .dropdown {
    margin-right: 10px;
    margin-left: unset
}

.shop-section .show-button .top-filter-menu-2 .category-dropdown .dropdown .dropdown-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: none;
    background-color: #f6f5f2;
    font-size: calc(14px + 1*(100vw - 320px)/1600);
    padding: calc(9px + 1*(100vw - 320px)/1600) 15px;
    border-radius: 5px;
    color: #777;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px
}

    .shop-section .show-button .top-filter-menu-2 .category-dropdown .dropdown .dropdown-toggle::after {
        content: none
    }

    .shop-section .show-button .top-filter-menu-2 .category-dropdown .dropdown .dropdown-toggle i {
        margin-top: 2px
    }

.shop-section .show-button .top-filter-menu-2 .category-dropdown .dropdown .dropdown-menu li {
    display: block
}

.shop-section .show-button .top-filter-menu-2 .grid-option {
    margin-left: auto
}

.shop-section .show-button .top-filter-menu-2 .grid-option-2 {
    margin-left: 0
}

@media(max-width: 767px) {
    .shop-section .show-button .top-filter-menu-2 .grid-option-2 {
        display: none
    }
}

.shop-section .show-button .top-filter-menu-2 .grid-option-2 ul li.active {
    background: var(--theme-color)
}

    .shop-section .show-button .top-filter-menu-2 .grid-option-2 ul li.active img {
        -webkit-filter: invert(1) brightness(100);
        filter: invert(1) brightness(100)
    }

.shop-section .show-button .top-filter-menu-2 .grid-option ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(5px + 7*(100vw - 320px)/1600);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

[dir=rtl] .shop-section .show-button .top-filter-menu-2 .grid-option ul {
    padding-right: 0
}

.shop-section .show-button .top-filter-menu-2 .grid-option ul li {
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: linear-gradient(149.8deg, #F6F5F2 17.21%, #FBFAF9 79.21%)
}

    .shop-section .show-button .top-filter-menu-2 .grid-option ul li a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        height: 100%
    }

.shop-section .show-button .top-filter-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media(max-width: 991px) {
    .shop-section .show-button .top-filter-menu {
        margin-top: 18px
    }
}

.shop-section .show-button .top-filter-menu .category-dropdown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media(max-width: 360px) {
    .shop-section .show-button .top-filter-menu .category-dropdown h5 {
        display: none
    }
}

.shop-section .show-button .top-filter-menu .category-dropdown .dropdown {
    margin-left: 10px
}

[dir=rtl] .shop-section .show-button .top-filter-menu .category-dropdown .dropdown {
    margin-left: unset;
    margin-right: 10px
}

@media(max-width: 360px) {
    .shop-section .show-button .top-filter-menu .category-dropdown .dropdown {
        margin-left: 0
    }
}

.shop-section .show-button .top-filter-menu .category-dropdown .dropdown .dropdown-toggle {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border: none;
    background-color: #f6f5f2;
    font-size: calc(14px + 1*(100vw - 320px)/1600);
    padding: calc(9px + 1*(100vw - 320px)/1600) 15px;
    border-radius: 5px;
    color: #777;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px
}

    .shop-section .show-button .top-filter-menu .category-dropdown .dropdown .dropdown-toggle::after {
        content: none
    }

    .shop-section .show-button .top-filter-menu .category-dropdown .dropdown .dropdown-toggle i {
        margin-top: 2px
    }

.shop-section .show-button .top-filter-menu .category-dropdown .dropdown .dropdown-menu li {
    display: block
}

    .shop-section .show-button .top-filter-menu .category-dropdown .dropdown .dropdown-menu li a:hover, .shop-section .show-button .top-filter-menu .category-dropdown .dropdown .dropdown-menu li a:focus {
        background-color: rgba(0,0,0,0)
    }

.shop-section .show-button .top-filter-menu .grid-option {
    margin-left: auto
}

[dir=rtl] .shop-section .show-button .top-filter-menu .grid-option {
    margin-left: unset;
    margin-right: auto
}

.shop-section .show-button .top-filter-menu .grid-option ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(5px + 5*(100vw - 320px)/1600);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

[dir=rtl] .shop-section .show-button .top-filter-menu .grid-option ul {
    padding-right: 0
}

.shop-section .show-button .top-filter-menu .grid-option ul li {
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: linear-gradient(149.8deg, #F6F5F2 17.21%, #FBFAF9 79.21%)
}

    .shop-section .show-button .top-filter-menu .grid-option ul li a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: 100%;
        height: 100%
    }

    .shop-section .show-button .top-filter-menu .grid-option ul li.active {
        background: var(--theme-color)
    }

        .shop-section .show-button .top-filter-menu .grid-option ul li.active img {
            -webkit-filter: invert(1) brightness(100);
            filter: invert(1) brightness(100)
        }

.shop-section .show-button .filter-category {
    margin-bottom: 25px
}

    .shop-section .show-button .filter-category ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: calc(6px + 9*(100vw - 320px)/1600);
        padding-top: 16px
    }

        .shop-section .show-button .filter-category ul li {
            padding: calc(6px + 3*(100vw - 320px)/1600) calc(28px + 6*(100vw - 320px)/1600) calc(6px + 3*(100vw - 320px)/1600) calc(7px + 4*(100vw - 320px)/1600);
            background-color: #f9f8f6;
            position: relative;
            border-radius: 4px
        }

            .shop-section .show-button .filter-category ul li:before {
                content: "";
                position: absolute;
                top: 50%;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                right: 13px;
                color: #777;
                cursor: pointer
            }

            .shop-section .show-button .filter-category ul li a {
                color: #777
            }

.shop-section .top-filter-category {
    width: 100%;
    height: 0;
    padding: 0 24px;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 9px rgba(34,34,34,.07);
    box-shadow: 0 2px 9px rgba(34,34,34,.07);
    border-radius: 6px;
    margin-bottom: 0;
    overflow: hidden;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

    .shop-section .top-filter-category.show {
        padding: 24px;
        height: auto;
        margin-bottom: 22px
    }

    .shop-section .top-filter-category > .row > div {
        border-right: 1px solid #ececec
    }

[dir=rtl] .shop-section .top-filter-category > .row > div {
    border-right: unset;
    border-left: 1px solid #ececec
}

.shop-section .top-filter-category > .row > div:last-child {
    border: none
}

@media(max-width: 1199px) {
    .shop-section .top-filter-category > .row > div:nth-child(4n-2) {
        border-right: none
    }

    [dir=rtl] .shop-section .top-filter-category > .row > div:nth-child(4n-2) {
        border-right: unset;
        border-left: none
    }
}

@media(max-width: 767px) {
    .shop-section .top-filter-category > .row > div {
        border: none
    }
}

.category-slider-section .category-contain .category-contain-image {
    background: linear-gradient(149.8deg, #F6F5F2 17.21%, #FBFAF9 79.21%);
    padding: 22px;
    border-radius: 8px
}

    .category-slider-section .category-contain .category-contain-image img {
        width: 150px;
        height: 150px;
        -o-object-fit: contain;
        object-fit: contain;
        margin: 0 auto
    }

.category-slider-section .category-contain .category-contain-name {
    margin-top: 12px;
    text-align: center
}

    .category-slider-section .category-contain .category-contain-name h5 {
        color: #4a5568;
        font-weight: 500
    }

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

.product-load-more .col-grid-box {
    display: none
}

.product-title {
    margin-top: 20px
}

    .product-title h4 {
        font-weight: 600;
        margin-bottom: calc(10px + 2*(100vw - 320px)/1600);
        letter-spacing: .4px;
        font-size: calc(15px + 1*(100vw - 320px)/1600)
    }

.hot-line-number {
    padding: calc(12px + 21*(100vw - 320px)/1600);
    background-color: #f8f8f8
}

    .hot-line-number h5 {
        font-weight: 600;
        margin-bottom: 4px
    }

    .hot-line-number h6 {
        color: #4a5568;
        margin-bottom: 17px
    }

    .hot-line-number h2 {
        font-weight: 600;
        font-size: 24px
    }

.product-category {
    gap: 25px;
    padding: calc(12px + 21*(100vw - 320px)/1600)
}

.sticky-bottom-cart {
    position: fixed;
    bottom: -160px;
    width: 100%;
    z-index: 9;
    background-color: #fff;
    padding: calc(11px + -5*(100vw - 320px)/1600) 0;
    -webkit-box-shadow: 0 0 3px 1px rgba(34,34,34,.06);
    box-shadow: 0 0 3px 1px rgba(34,34,34,.06);
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

    .sticky-bottom-cart .cart-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

@media(max-width: 575px) {
    .sticky-bottom-cart .cart-content {
        display: block
    }
}

.sticky-bottom-cart .product-image {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

@media(max-width: 575px) {
    .sticky-bottom-cart .product-image {
        display: none
    }
}

.sticky-bottom-cart .product-image img {
    width: 60px;
    height: 70px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: top;
    object-position: top
}

.sticky-bottom-cart .product-image .content {
    margin-left: 12px;
    color: #222;
    margin-top: 0
}

[dir=rtl] .sticky-bottom-cart .product-image .content {
    margin-left: 0;
    margin-right: 12px
}

@media(max-width: 991px) {
    .sticky-bottom-cart .product-image .content {
        display: none
    }
}

@media(max-width: 480px) {
    .sticky-bottom-cart .product-image .content {
        display: block
    }
}

.sticky-bottom-cart .product-image .content h5, .sticky-bottom-cart .product-image .content h6 {
    margin-bottom: 0
}

.sticky-bottom-cart .product-image .content h5 {
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize
}

.sticky-bottom-cart .product-image .content h6 {
    font-size: 15px;
    margin-top: 6px
}

    .sticky-bottom-cart .product-image .content h6 del {
        margin-left: 7px;
        color: #4a5568
    }

[dir=rtl] .sticky-bottom-cart .product-image .content h6 del {
    margin-left: unset;
    margin-right: 7px
}

.sticky-bottom-cart .product-image .content h6 span {
    color: var(--theme-color);
    margin-left: 5px
}

[dir=rtl] .sticky-bottom-cart .product-image .content h6 span {
    margin-left: 0;
    margin-right: 5px
}

.sticky-bottom-cart .selection-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 25px 0 auto
}

@media(max-width: 575px) {
    .sticky-bottom-cart .selection-section {
        display: none
    }
}

.sticky-bottom-cart .selection-section .form-control {
    background-color: #f8f8f8;
    border: 1px solid #f8f8f8;
    text-transform: capitalize
}

    .sticky-bottom-cart .selection-section .form-control:focus {
        -webkit-box-shadow: none;
        box-shadow: none
    }

.sticky-bottom-cart .selection-section .product-qty {
    height: 51px
}

    .sticky-bottom-cart .selection-section .product-qty .input-group button {
        height: 100%
    }

.sticky-bottom-cart .selection-section .form-group {
    width: 300px;
    margin-left: 10px;
    margin-right: 10px
}

@media(max-width: 1199px) {
    .sticky-bottom-cart .selection-section .form-group {
        width: 190px
    }
}

@media(max-width: 767px) {
    .sticky-bottom-cart .selection-section .form-group {
        margin-right: 0;
        width: unset
    }
}

@media(max-width: 575px) {
    .sticky-bottom-cart .add-btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.sticky-bottom-cart .add-btn a {
    padding: 12px 40px
}

@media(max-width: 575px) {
    .sticky-bottom-cart .add-btn a {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.sticky-bottom-cart .add-btn a.wishlist-btn {
    display: none;
    background-color: #f8f8f8;
    color: #222
}

    .sticky-bottom-cart .add-btn a.wishlist-btn:hover {
        background-color: var(--theme-color);
        border-color: var(--theme-color);
        color: #fff
    }

@media(max-width: 575px) {
    .sticky-bottom-cart .add-btn a.wishlist-btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

@media(max-width: 575px) {
    .sticky-bottom-cart .add-btn a + a {
        margin-left: 8px
    }

    [dir=rtl] .sticky-bottom-cart .add-btn a + a {
        margin-right: 8px;
        margin-left: unset
    }
}

.sticky-bottom-cart .add-btn a i {
    margin-right: 7px
}

[dir=rtl] .sticky-bottom-cart .add-btn a i {
    margin-right: unset;
    margin-left: 7px
}

.stickyCart {
    padding-bottom: 94px
}

    .stickyCart .theme-option-2 {
        bottom: calc(74px + 16*(100vw - 320px)/1600)
    }

@media(max-width: 575px) {
    .stickyCart {
        padding-bottom: 0
    }
}

.stickyCart .sticky-bottom-cart {
    bottom: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.stickyCart .recently-purchase.show {
    bottom: 110px
}

.stickyCart .tap-top {
    bottom: 110px
}

[dir=rtl] .slick-slider {
    direction: ltr
}

[dir=rtl] .slick-slide {
    float: left
}

[dir=rtl] ul {
    padding-right: 0
}

.custome-pagination {
    margin-top: calc(22px + 13*(100vw - 320px)/1600)
}

    .custome-pagination .pagination {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: calc(6px + 7*(100vw - 320px)/1600)
    }

        .custome-pagination .pagination .page-item {
            border-radius: 5px;
            overflow: hidden
        }

            .custome-pagination .pagination .page-item:not(:first-child) .page-link {
                margin: 0
            }

            .custome-pagination .pagination .page-item.active .page-link {
                background-color: var(--theme-color);
                border-color: var(--theme-color);
                color: #fff
            }

            .custome-pagination .pagination .page-item .page-link {
                color: #4a5568;
                border: 1px solid rgba(0,0,0,0)
            }

                .custome-pagination .pagination .page-item .page-link:hover {
                    border-radius: 5px;
                    border: 1px solid var(--theme-color);
                    background-color: unset
                }

                .custome-pagination .pagination .page-item .page-link:focus {
                    color: var(--theme-color);
                    background-color: #fff;
                    -webkit-box-shadow: none;
                    box-shadow: none
                }

.product-section .product-left-box {
    position: sticky;
    top: 0
}

.product-section .left-slider-image .sidebar-image {
    border-radius: 8px;
    overflow: hidden
}

    .product-section .left-slider-image .sidebar-image img {
        width: auto;
        height: auto;
        cursor: pointer;
        -o-object-fit: contain;
        object-fit: contain
    }

.product-section .right-box-contain {
    position: sticky;
    top: 10px;
    left: 0
}

@media(max-width: 767px) {
    .product-section .right-box-contain {
        text-align: center
    }
}

.product-section .right-box-contain .offer-top {
    font-weight: 500;
    padding: calc(8px + 2*(100vw - 320px)/1600) calc(12px + 4*(100vw - 320px)/1600);
    background-color: rgba(255,79,79,.1);
    border-radius: 5px;
    color: #ff4f4f;
    display: inline-block;
    margin-bottom: 20px
}

.product-section .right-box-contain .name {
    font-weight: 700;
    margin-bottom: calc(10px + 5*(100vw - 320px)/1600)
}

.product-section .right-box-contain .price-rating {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

@media(max-width: 1460px) {
    .product-section .right-box-contain .price-rating-2 {
        display: block
    }
}

@media(max-width: 1460px) {
    .product-section .right-box-contain .price-rating-2 .custom-rate {
        margin-top: 5px
    }
}

@media(max-width: 767px) {
    .product-section .right-box-contain .price-rating {
        display: block
    }
}

@media(max-width: 1460px) {
    .product-section .right-box-contain .price-rating-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }
}

@media(max-width: 480px) {
    .product-section .right-box-contain .price-rating-box {
        display: block
    }
}

@media(max-width: 1460px) {
    .product-section .right-box-contain .price-rating-box .custom-rate {
        margin-top: 0 !important
    }
}

@media(max-width: 480px) {
    .product-section .right-box-contain .price-rating-box .custom-rate {
        margin-top: 10px !important
    }
}

@media(max-width: 767px) {
    .product-section .right-box-contain .price-rating .custom-rate {
        margin-top: 10px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.product-section .right-box-contain .price-rating .price {
    font-weight: 600;
    font-size: calc(19px + 3*(100vw - 320px)/1600)
}

    .product-section .right-box-contain .price-rating .price del {
        font-weight: 400;
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        margin: 0 calc(0px + 2*(100vw - 320px)/1600)
    }

    .product-section .right-box-contain .price-rating .price span {
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        font-weight: 500
    }

.product-section .right-box-contain .price-rating .custom-rate ul li .feather {
    width: 16px;
    height: 16px
}

.product-section .right-box-contain .price-rating .custom-rate .review {
    font-size: 13px;
    margin-left: 12px
}

[dir=rtl] .product-section .right-box-contain .price-rating .custom-rate .review {
    margin-left: unset;
    margin-right: 12px
}

.product-section .right-box-contain .procuct-contain {
    border-bottom: 1px solid #ececec;
    padding-bottom: 16px
}

    .product-section .right-box-contain .procuct-contain p {
        color: #4a5568;
        line-height: 1.7;
        margin: calc(14px + 2*(100vw - 320px)/1600) 0 0;
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        width: 80%
    }

@media(max-width: 767px) {
    .product-section .right-box-contain .procuct-contain p {
        width: 100%
    }
}

.product-section .right-box-contain .product-packege .select-packege {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(5px + 8*(100vw - 320px)/1600)
}

@media(max-width: 767px) {
    .product-section .right-box-contain .product-packege .select-packege {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

[dir=rtl] .product-section .right-box-contain .product-packege .select-packege {
    padding-right: 0
}

.product-section .right-box-contain .product-packege .select-packege li a {
    padding: 6px 11px;
    border: 1px solid #ececec;
    border-radius: 4px;
    display: block;
    color: #4a5568;
    font-size: 14px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

    .product-section .right-box-contain .product-packege .select-packege li a.active {
        border: 1px solid var(--theme-color);
        background: var(--theme-color2);
        color: #fff
    }

.product-section .right-box-contain .note-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: calc(7px + 8*(100vw - 320px)/1600);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 20px
}

@media(max-width: 767px) {
    .product-section .right-box-contain .note-box {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.product-section .right-box-contain .note-box .compare-button {
    background-color: #f8f8f8
}

.product-section .right-box-contain .note-box .cart-button {
    -webkit-animation: shake 150ms 2 linear;
    animation: shake 150ms 2 linear
}

.product-section .right-box-contain .note-box .product-qty {
    width: auto;
    margin-top: 0
}

@media(max-width: 360px) {
    .product-section .right-box-contain .note-box .product-qty {
        width: 160px
    }
}

.product-section .right-box-contain .note-box .product-qty .input-group {
    background: linear-gradient(187.77deg, #fafafa 5.52%, #f8f8f8 94%)
}

.product-section .right-box-contain .buy-now-button {
    margin-top: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ececec
}

    .product-section .right-box-contain .buy-now-button button {
        background-color: #ff7272
    }

.product-section .right-box-contain .buy-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 11px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 20px;
    border-bottom: 1px solid #ececec;
    padding-bottom: 16px
}

    .product-section .right-box-contain .buy-box .team-box {
        padding: 0;
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .product-section .right-box-contain .buy-box .team-box input {
            margin-top: -7px;
            display: block
        }

        .product-section .right-box-contain .buy-box .team-box .form-check-label span {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center
        }

            .product-section .right-box-contain .buy-box .team-box .form-check-label span a {
                text-decoration: underline;
                margin-left: 3px;
                color: #222
            }

@media(max-width: 767px) {
    .product-section .right-box-contain .buy-box {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

.product-section .right-box-contain .buy-box a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(5px + 3*(100vw - 320px)/1600);
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #777
}

    .product-section .right-box-contain .buy-box a .feather {
        width: 17px;
        height: auto
    }

.product-section .right-box-contain .pickup-box {
    padding-bottom: 20px;
    border-bottom: 1px solid #ececec
}

    .product-section .right-box-contain .pickup-box .product-info {
        margin-top: 20px
    }

        .product-section .right-box-contain .pickup-box .product-info .product-info-list {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            gap: calc(8px + 9*(100vw - 320px)/1600);
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            text-align: left;
            display: inline-block;
            -webkit-column-count: 2;
            -moz-column-count: 2;
            column-count: 2;
            background-color: #f9f9f9;
            padding: 15px;
            border-radius: 12px;
            width: 80%
        }

@media(max-width: 480px) {
    .product-section .right-box-contain .pickup-box .product-info .product-info-list {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        padding: 15px
    }
}

.product-section .right-box-contain .pickup-box .product-info .product-info-list-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media(max-width: 1500px) {
    .product-section .right-box-contain .pickup-box .product-info .product-info-list-2 {
        width: 100%
    }
}

@media(max-width: 1450px) {
    .product-section .right-box-contain .pickup-box .product-info .product-info-list-2 {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        padding: 15px
    }
}

@media(max-width: 1199px) {
    .product-section .right-box-contain .pickup-box .product-info .product-info-list-2 {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        display: block;
        padding-bottom: 4px
    }

        .product-section .right-box-contain .pickup-box .product-info .product-info-list-2 li {
            margin-bottom: 8px
        }
}

@media(max-width: 480px) {
    .product-section .right-box-contain .pickup-box .product-info .product-info-list-2 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-bottom: 15px
    }

        .product-section .right-box-contain .pickup-box .product-info .product-info-list-2 li {
            margin-bottom: 0
        }
}

.product-section .right-box-contain .pickup-box .product-info .product-info-list-3 {
    width: 50%
}

    .product-section .right-box-contain .pickup-box .product-info .product-info-list-3 li {
        margin-bottom: 7px
    }

@media(max-width: 360px) {
    .product-section .right-box-contain .pickup-box .product-info .product-info-list-3 li {
        margin-bottom: 0
    }
}

@media(max-width: 1366px) {
    .product-section .right-box-contain .pickup-box .product-info .product-info-list-3 {
        width: 80%
    }
}

@media(max-width: 767px) {
    .product-section .right-box-contain .pickup-box .product-info .product-info-list-3 {
        width: 100%
    }
}

@media(max-width: 360px) {
    .product-section .right-box-contain .pickup-box .product-info .product-info-list-3 {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

.product-section .right-box-contain .pickup-box .product-info .product-info-list li {
    padding-left: 13px;
    width: 100%;
    font-size: calc(14px + 1*(100vw - 320px)/1600);
    position: relative;
    color: #777
}

@media(max-width: 575px) {
    .product-section .right-box-contain .pickup-box .product-info .product-info-list li {
        width: auto;
        margin-left: 18px
    }
}

@media(max-width: 480px) {
    .product-section .right-box-contain .pickup-box .product-info .product-info-list li {
        margin-left: unset;
        width: 100%;
        padding-left: unset
    }

        .product-section .right-box-contain .pickup-box .product-info .product-info-list li::after {
            content: none !important
        }
}

.product-section .right-box-contain .pickup-box .product-info .product-info-list li::after {
    content: "";
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    left: 0;
    background-color: #4a5568;
    border-radius: 100%
}

.product-section .right-box-contain .pickup-box .product-info .product-info-list li a {
    margin-left: 5px;
    color: #222;
    font-weight: 500
}

    .product-section .right-box-contain .pickup-box .product-info .product-info-list li a + a {
        margin-left: 0
    }

.product-section .right-box-contain .pickup-box .pickup-icon i {
    font-size: 20px;
    color: var(--theme-color)
}

.product-section .right-box-contain .pickup-box .pickup-detail h4 {
    width: 90%;
    font-weight: 400;
    margin-bottom: 5px;
    font-size: calc(14px + 2*(100vw - 320px)/1600);
    line-height: 1.6
}

@media(max-width: 767px) {
    .product-section .right-box-contain .pickup-box .pickup-detail h4 {
        width: 100%
    }
}

.product-section .right-box-contain .pickup-box .pickup-detail h6 {
    margin-top: 4px
}

.product-section .right-box-contain .pickup-box .pickup-detail a {
    margin-top: 0;
    color: var(--theme-color);
    display: inline-block
}

.product-section .right-box-contain .paymnet-option ul {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: calc(3px + 5*(100vw - 320px)/1600)
}

@media(max-width: 767px) {
    .product-section .right-box-contain .paymnet-option ul {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }
}

[dir=rtl] .product-section .right-box-contain .paymnet-option ul {
    padding-right: 0
}

.product-section .right-box-contain .share-option {
    padding-bottom: 20px
}

    .product-section .right-box-contain .share-option ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 20px
    }

        .product-section .right-box-contain .share-option ul li {
            display: block
        }

            .product-section .right-box-contain .share-option ul li a {
                display: block;
                text-align: center;
                font-size: 17px;
                color: #4a5568
            }

.product-section .product-main .slider-image img {
    width: 100%
}

.product-section .right-sidebar-box {
    position: sticky;
    top: 10px
}

    .product-section .right-sidebar-box .product-right-sidebar li + li {
        margin-top: 0
    }

        .product-section .right-sidebar-box .product-right-sidebar li + li::after {
            top: -14px;
            width: calc(100% - 103px)
        }

.product-section-box {
    margin-top: calc(12px + 36*(100vw - 320px)/1600)
}

    .product-section-box .custom-nav {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        border: none;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0;
        border-bottom: 1px solid #ececec
    }

        .product-section-box .custom-nav .nav-item .nav-link {
            color: #222;
            padding: calc(12px + 3*(100vw - 320px)/1600) calc(17px + 13*(100vw - 320px)/1600);
            font-size: calc(16px + 4*(100vw - 320px)/1600);
            letter-spacing: .6px;
            border: none;
            font-weight: 600;
            background-color: #f8f8f8;
            position: relative
        }

            .product-section-box .custom-nav .nav-item .nav-link::after {
                content: "";
                position: absolute;
                width: 0;
                height: 3px;
                top: 0;
                left: 0;
                background-color: rgba(0,0,0,0);
                -webkit-transition: all .3s ease-in-out;
                transition: all .3s ease-in-out
            }

[dir=rtl] .product-section-box .custom-nav .nav-item .nav-link::after {
    left: unset;
    right: 0
}

.product-section-box .custom-nav .nav-item .nav-link:focus, .product-section-box .custom-nav .nav-item .nav-link:hover, .product-section-box .custom-nav .nav-item .nav-link.active {
    background-color: #fff
}

    .product-section-box .custom-nav .nav-item .nav-link:focus::after, .product-section-box .custom-nav .nav-item .nav-link:hover::after, .product-section-box .custom-nav .nav-item .nav-link.active::after {
        width: 100%;
        background: #1aa488
    }

.product-section-box .offer-table {
    margin-bottom: 0;
    border: 1px solid #ececec;
    table-layout: fixed;
    display: inherit;
    border-radius: 6px
}

[dir=rtl] .product-section-box .offer-table {
    right: unset;
    left: 10px
}

.product-section-box .offer-table tbody tr th, .product-section-box .offer-table tbody tr td {
    padding: 12px 16px
}

.product-section-box .offer-table tbody tr th {
    width: 7%
}

.product-section-box .offer-table tbody tr td {
    vertical-align: middle
}

    .product-section-box .offer-table tbody tr td.offer-name {
        width: 20%
    }

.product-section-box .custom-tab {
    padding-top: calc(20px + 10*(100vw - 320px)/1600)
}

    .product-section-box .custom-tab .nav-desh {
        margin-bottom: calc(22px + 8*(100vw - 320px)/1600)
    }

        .product-section-box .custom-tab .nav-desh:last-of-type {
            margin-bottom: 0
        }

        .product-section-box .custom-tab .nav-desh .desh-title {
            margin-bottom: 8px
        }

            .product-section-box .custom-tab .nav-desh .desh-title h5 {
                font-weight: 700
            }

    .product-section-box .custom-tab .product-detail .detail-title h5 {
        font-weight: 600;
        color: #4a5568;
        font-size: 17px;
        margin-bottom: 10px
    }

    .product-section-box .custom-tab .product-detail .detail-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 4px
    }

        .product-section-box .custom-tab .product-detail .detail-list li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: start;
            -ms-flex-align: start;
            align-items: flex-start;
            color: #4a5568;
            width: 100%
        }

            .product-section-box .custom-tab .product-detail .detail-list li i {
                font-size: 6px;
                color: #4a5568;
                margin: 6px 6px 0 0
            }

    .product-section-box .custom-tab .tab-pane .product-description p {
        margin-bottom: calc(12px + 8*(100vw - 320px)/1600);
        color: #4a5568;
        line-height: 1.7;
        font-size: calc(14px + 1*(100vw - 320px)/1600)
    }

        .product-section-box .custom-tab .tab-pane .product-description p:last-child {
            margin-bottom: 0
        }

    .product-section-box .custom-tab .information-box ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 7px
    }

        .product-section-box .custom-tab .information-box ul li {
            color: #4a5568;
            width: 100%;
            display: list-item;
            list-style-type: circle;
            margin-left: 35px;
            font-size: calc(14px + 1*(100vw - 320px)/1600)
        }

    .product-section-box .custom-tab .review-box .review-title {
        margin-bottom: calc(10px + 8*(100vw - 320px)/1600)
    }

    .product-section-box .custom-tab .review-box .review-people .review-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 26px
    }

[dir=rtl] .product-section-box .custom-tab .review-box .review-people .review-list {
    padding-right: 0
}

.product-section-box .custom-tab .review-box .review-people .review-list li {
    display: block;
    width: 100%
}

    .product-section-box .custom-tab .review-box .review-people .review-list li .people-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        border-radius: 10px;
        padding: 20px 26px;
        background: #f8f8f8
    }

@media(max-width: 480px) {
    .product-section-box .custom-tab .review-box .review-people .review-list li .people-box {
        display: block
    }
}

.product-section-box .custom-tab .review-box .review-people .review-list li .people-box:hover .reply a {
    opacity: 1
}

.product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-image {
    width: 70px;
    height: 70px
}

@media(max-width: 480px) {
    .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-image {
        margin: 0 auto
    }
}

.product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-image img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media(max-width: 575px) {
    .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-image img {
        border-radius: 8px
    }
}

.product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-comment {
    padding-left: 15px;
    width: calc(100% - 70px)
}

    .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-comment .name {
        display: block;
        font-weight: 600;
        font-size: 15px
    }

        .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-comment .name:hover {
            color: var(--theme-color)
        }

[dir=rtl] .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-comment {
    padding-left: unset;
    padding-right: 15px
}

@media(max-width: 480px) {
    .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-comment {
        padding: 0;
        width: 100%;
        margin-top: 16px
    }
}

.product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-comment .date-time {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

    .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-comment .date-time h6 {
        font-size: 13px;
        color: #777;
        margin-top: 1px
    }

@media(max-width: 360px) {
    .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-comment .date-time {
        display: block
    }

        .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .people-comment .date-time .product-rating {
            margin-top: 8px
        }
}

.product-section-box .custom-tab .review-box .review-people .review-list li .people-box .reply {
    margin-top: 9px;
    line-height: 1.6;
    color: #4a5568;
    position: relative
}

    .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .reply p {
        width: 90%;
        margin: 0;
        line-height: 1.6
    }

@media(max-width: 480px) {
    .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .reply p {
        width: 100%
    }
}

.product-section-box .custom-tab .review-box .review-people .review-list li .people-box .reply a {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    font-weight: 600;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

[dir=rtl] .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .reply a {
    right: unset;
    left: 0
}

@media(max-width: 575px) {
    .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .reply a {
        opacity: 1
    }
}

@media(max-width: 480px) {
    .product-section-box .custom-tab .review-box .review-people .review-list li .people-box .reply a {
        position: relative;
        margin-left: 8px
    }
}

.product-section-box .custom-tab .review-box .rating-box {
    margin-top: 17px
}

    .product-section-box .custom-tab .review-box .rating-box ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: calc(13px + 7*(100vw - 320px)/1600);
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

[dir=rtl] .product-section-box .custom-tab .review-box .rating-box ul {
    padding-right: 0
}

.product-section-box .custom-tab .review-box .rating-box ul li {
    width: 100%
}

    .product-section-box .custom-tab .review-box .rating-box ul li .rating-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        gap: 14px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

        .product-section-box .custom-tab .review-box .rating-box ul li .rating-list h5 {
            white-space: nowrap
        }

        .product-section-box .custom-tab .review-box .rating-box ul li .rating-list .progress {
            width: 100%;
            border-radius: 3px
        }

            .product-section-box .custom-tab .review-box .rating-box ul li .rating-list .progress .progress-bar {
                background: var(--theme-color2)
            }

.product-section-box .custom-tab .info-table {
    border: 1px solid #ececec;
    margin-bottom: 0
}

    .product-section-box .custom-tab .info-table.table-striped tbody tr:nth-of-type(odd) td {
        background-color: #f8f8f8;
        color: #222
    }

    .product-section-box .custom-tab .info-table tbody tr th, .product-section-box .custom-tab .info-table tbody tr td {
        padding: calc(10px + 4*(100vw - 320px)/1600) calc(12px + 6*(100vw - 320px)/1600);
        font-size: calc(14px + 2*(100vw - 320px)/1600);
        white-space: nowrap
    }

    .product-section-box .custom-tab .info-table tbody tr td {
        border-left: 1px solid #ececec
    }

.custom-row .sidebar-col .category-menu {
    background-color: rgba(0,0,0,0)
}

    .custom-row .sidebar-col .category-menu .web-logo {
        display: block;
        margin-bottom: calc(34px + 6*(100vw - 320px)/1600)
    }

        .custom-row .sidebar-col .category-menu .web-logo img {
            width: calc(53% + 17*(100vw - 320px)/1600)
        }

    .custom-row .sidebar-col .category-menu ul {
        gap: calc(21px + 7*(100vw - 320px)/1600);
        border-bottom: none
    }

        .custom-row .sidebar-col .category-menu ul li .category-list img {
            width: calc(30px + 5*(100vw - 320px)/1600);
            height: calc(30px + 5*(100vw - 320px)/1600)
        }

        .custom-row .sidebar-col .category-menu ul li .category-list h5 {
            font-size: calc(15px + 2*(100vw - 320px)/1600)
        }

.product-list {
    border: 1px solid rgba(74,85,104,.3);
    border-radius: 5px;
    padding: calc(18px + 12*(100vw - 320px)/1600)
}

    .product-list li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 80px;
        position: relative
    }

        .product-list li + li {
            margin-top: 50px
        }

@media(max-width: 575px) {
    .product-list li + li {
        margin-top: 44px
    }
}

@media(max-width: 360px) {
    .product-list li + li {
        margin-top: 30px
    }
}

.product-list li + li:after {
    content: "";
    position: absolute;
    top: -28px;
    right: 0;
    border-bottom: 1px dashed rgba(74,85,104,.3);
    width: calc(100% - 103px)
}

[dir=rtl] .product-list li + li:after {
    right: unset;
    left: 0
}

.product-list li .offer-product {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .product-list li .offer-product:hover .offer-image {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    .product-list li .offer-product:hover .offer-detail a .name {
        color: var(--theme-color)
    }

    .product-list li .offer-product .offer-image {
        width: 80px
    }

@media(max-width: 1660px) {
    .product-list li .offer-product .offer-image {
        width: 90px
    }
}

.product-list li .offer-product .offer-image img {
    width: 80px;
    height: 80px;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

@media(max-width: 1660px) {
    .product-list li .offer-product .offer-image img {
        width: 90px;
        height: 70px
    }
}

@media(max-width: 575px) {
    .product-list li .offer-product .offer-image img {
        width: 70px;
        height: 70px
    }
}

.product-list li .offer-product .offer-detail {
    width: calc(100% - 80px);
    height: 80px;
    padding-left: calc(12px + 11*(100vw - 320px)/1600);
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

[dir=rtl] .product-list li .offer-product .offer-detail {
    padding-left: unset;
    padding-right: calc(12px + 11*(100vw - 320px)/1600)
}

.product-list li .offer-product .offer-detail a {
    display: block;
    color: #222
}

    .product-list li .offer-product .offer-detail a:hover {
        color: #222
    }

    .product-list li .offer-product .offer-detail a .name {
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        overflow: hidden;
        font-weight: 600;
        margin-top: -1px;
        -webkit-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out
    }

.product-list li .offer-product .offer-detail span {
    font-size: 14px;
    margin-top: 5px;
    color: #4a5568;
    font-weight: 400
}

.product-list li .offer-product .offer-detail .price {
    margin-top: 6px;
    font-weight: 600;
    margin-bottom: -2px
}