.backdrop,#overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 4;
    width: 1000%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none
}

.backtop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    width: 48px;
    height: 48px;
    font-size: 15px;
    color: var(--white);
    line-height: 48px;
    text-align: center;
    display: none;
    border-radius: 50%;
    background: var(--primary);
    -webkit-box-shadow: 0px 0px 15px 3px rgba(254, 148, 71, 0.5);
    box-shadow: 0px 0px 15px 3px rgba(254, 148, 71, 0.5);
    -webkit-animation: mahmud 2s infinite;
    animation: mahmud 2s infinite;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.backtop:hover {
    color: var(--white)
}

@-webkit-keyframes mahmud {
    0% {
        margin-bottom: 0px
    }

    50% {
        margin-bottom: 15px
    }
}

@keyframes mahmud {
    0% {
        margin-bottom: 0px
    }

    50% {
        margin-bottom: 15px
    }
}

@media (max-width: 575px) {
    .backtop {
        width: 42px;
        height: 42px;
        line-height: 42px;
        font-size: 14px
    }
}

@media (max-width: 991px) {
    .backtop {
        bottom: 55px
    }
}

/* Keyframes for linear determinate loader */
@keyframes linear-load {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}
  
/* Keyframes for circular loader spin */

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
  
/* Linear determinate loader */
.page-loading::before {
    content: " ";
    display: block;
    position: fixed;
    z-index: 10;
    height: 4px;
    top: 0;
    left: 0;
    background-color: var(--primary);
    animation: linear-load 3s linear forwards;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
}

/* Circular loader */
.page-loading::after {
    content: " ";
    display: block;
    position: fixed;
    z-index: 10;
    width: 30px;
    height: 30px;
    border-top: 3px solid var(--primary);
    border-right: 3px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    border-radius: 50%;
    top: 10px; /* Just below the linear loader */
    right: 10px; /* Positioned on the right side */
    animation: rotation 1s linear infinite;
}

.btn {
    border: none;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 14px 32px;
    border-radius: 6px;
    border: 2px solid var(--primary)
}

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

.btn i {
    margin-right: 5px
}

.btn-inline {
    color: var(--white);
    background: var(--primary)
}

.btn-inline:hover {
    color: var(--primary);
    background: var(--white)
}

.btn-outline {
    color: var(--primary);
    background: var(--white)
}

.btn-outline:hover {
    color: var(--white);
    background: var(--primary)
}

@media (max-width: 767px) {
    .btn {
        padding: 10px 32px;
        font-size: 14px;
    }
}

@media only screen and (max-width: 450px) {
    .btn {
        padding: 10px 15px;
    }
}

/* view more & less */

.data_more_less_inner {
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
}
.action_less {
    display: none;
}
.less_active .action_less {
    display: inline-block;
}
.less_active .action_more {
    display: none;
}
.data_more_less:not(.less_active):not(.action_disabled) .data_more_less_inner:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); height: 80px;
}
.data_more_less.action_disabled .more_less_action {
    display: none;
}
.action_more.more_less_action.btn,
.action_less.more_less_action.btn {
    position: relative;
    top: -15px;
}

.menu-badge {
    font-size: 10px;
    padding: 0px 5px;
    margin-left: 5px;
    line-height: 18px;
    border-radius: 3px;
    letter-spacing: 0.3px;
    display: inline-block;
    text-transform: uppercase;
    color: var(--white);
    background: var(--red);
    text-shadow: var(--primary-tshadow)
}

.dropdown-arrow {
    position: relative;
    padding-right: 18px !important
}

.dropdown-arrow:hover::before {
    color: var(--primary)
}

.dropdown-arrow::before {
    position: absolute;
    content: "\ea99";
    top: 50%;
    right: 0px;
    font-size: 15px;
    line-height: 15px;
    color: var(--text);
    font-family: IcoFont;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.dropdown-link {
    position: relative;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.dropdown-link:hover {
    color: var(--primary);
    background: var(--chalk)
}

.dropdown-link:hover::before {
    color: var(--primary)
}

.dropdown-link::before {
    position: absolute;
    top: 50%;
    right: 18px;
    content: "\f054";
    font-size: 10px;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    z-index: 1;
}

.dropdown-link.active {
    color: var(--primary);
}

.dropdown-link.active::before {
    color: var(--primary);
    -webkit-transform: translateY(-50%) rotate(90deg);
    transform: translateY(-50%) rotate(90deg);
}

@media only screen and (max-width: 1199px) {
    .category-item .dropdown-link::before {
        color: var(--white);
        display: flex;
        justify-content: center;
        width: 25px;
        
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        transition: all linear .3s;
        -webkit-transition: all linear .3s;
        -moz-transition: all linear .3s;
        -ms-transition: all linear .3s;
        -o-transition: all linear .3s;
        z-index: 1;
    }

    .category-item .dropdown-link::after {
        background: var(--primary);
        content: "";
        display: flex;
        position: absolute;
        top: 26%;
        right: 18px;
        width: 25px;
        height: 25px;
    }

    .sublinks .dropdown-link::before,
    .sublinks .dropdown-link::after{
        content: none;
    }

    .category-item .dropdown-link.active {
        color: var(--white)
    }
    
    .category-item .dropdown-link.active::before {
        color: var(--white);
    }

    .category-item .dropdown-link:hover::before {
        color: var(--white);
    }
}

.dropdown-list {
    display: none;
    padding: 0px 20px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.dropdown-list li a {
    width: 100%;
    font-size: 15px;
    line-height: 18px;
    border-radius: 8px;
    padding: 10px 15px 10px 35px;
    color: var(--text);
    background: var(--white);
    position: relative;
    white-space: nowrap;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.dropdown-list li a:hover {
    color: var(--primary);
    background: var(--chalk);
}

.dropdown-list li a::before {
    position: absolute;
    top: 50%;
    left: 15px;
    content: "\f068";
    font-size: 10px;
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.dropdown:hover .dropdown-position-list {
    visibility: visible;
    opacity: 1;
    top: 70px;
}

.dropdown-position-list {
    position: absolute;
    top: 100px;
    left: 0px;
    z-index: 2;
    width: 200px;
    height: auto;
    visibility: hidden;
    opacity: 0;
    padding: 10px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.dropdown-position-list::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: -7px;
    left: 12px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: var(--white);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border)
}

.dropdown-position-list li a {
    width: 100%;
    font-size: 15px;
    line-height: 18px;
    border-radius: 8px;
    padding: 8px 15px;
    color: var(--text);
    background: var(--white);
    white-space: nowrap;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.dropdown-position-list li a:hover {
    color: var(--primary);
    background: var(--chalk)
}

.dropdown-megamenu {
    position: static
}

.dropdown-megamenu:hover .megamenu {
    visibility: visible;
    opacity: 1;
    top: 199px
}

.megamenu {
    position: absolute;
    top: 230px;
    left: 50%;
    z-index: 2;
    width: 1180px;
    border-radius: 8px;
    padding: 30px;
    background: var(--white);
    border: 1px solid var(--border);
    -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.megamenu-scroll {
    height: 380px;
    overflow-y: scroll
}

.megamenu-wrap {
    margin-bottom: 30px
}

.megamenu-title {
    padding-bottom: 18px;
    margin-bottom: 20px;
    position: relative;
    text-transform: capitalize;
    border-bottom: 1px solid var(--border)
}

.megamenu-title::before {
    position: absolute;
    content: "";
    bottom: -2px;
    left: 0px;
    width: 50px;
    height: 2px;
    background: var(--primary)
}

.megamenu-list {
    border-left: 1px solid var(--border)
}

.megamenu-list li a {
    width: 100%;
    border-radius: 5px;
    padding: 5px 0px 5px 25px;
    color: var(--text);
    white-space: nowrap;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.megamenu-list li a:hover {
    color: var(--primary);
    background: var(--chalk)
}

.megamenu-promo a img {
    width: 100%;
    border-radius: 3px
}

@media (max-width: 1199px) {
    .megamenu {
        width: 100%
    }
}

.flex-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.nav-tabs {
    border: none;
    padding: 20px;
    padding-right: 0;
    border-radius: 8px;
    margin-bottom: 25px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: var(--white)
}

.nav-tabs li {
    padding: 0px 25px;
    border-right: 1px solid var(--border)
}

.nav-tabs li:first-child {
    padding-left: 0px;
}

.nav-tabs li:last-child {
    padding-right: 0px;
    border: none
}

.tab-link {
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.tab-link:hover {
    color: var(--primary)
}

.tab-link i {
    font-size: 18px;
    margin-right: 3px
}

.tab-link.active {
    color: var(--primary)
}

.tab-pane {
    display: none;
    padding: 0px
}

.tab-pane.active {
    display: block
}

@media only screen and (max-width: 1199px) {
    .nav-tabs li {
        padding: 0 15px;
    }

    .tab-link {
        font-size: 14px;
    }
}

@media (max-width: 575px) {
    .nav-tabs {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .nav-tabs li {
        padding: 5px;
        border: none;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .nav-tabs {
        padding: 25px 0 25px 10px;
    }

    .nav-tabs li {
        padding: 0px 6px;
    }

    .tab-link {
        font-size: 13px;
    }
}

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

.page-item {
    margin-left: 10px
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 50%
}

.page-item .active {
    color: var(--white);
    background: var(--primary)
}

.page-link {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    font-weight: 400;
    border: none;
    padding: 0px;
    color: var(--text);
    background: var(--white)
}

.page-link:hover {
    color: var(--white);
    background: var(--primary)
}

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

@media (max-width: 991px) {
    .page-link {
        width: 35px;
        height: 35px;
        line-height: 35px
    }
}

@media (max-width: 767px) {
    .page-item {
        margin: 0px 3px
    }
}

.slider-arrow:hover .right-arrow,
.slider-arrow:hover .left-arrow {
    visibility: visible;
    opacity: 1
}

.right-arrow,
.left-arrow {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 20px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    border-radius: 50%;
    color: var(--primary);
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    visibility: hidden;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.right-arrow:hover,
.left-arrow:hover {
    color: var(--white);
    background: var(--primary)
}

.right-arrow {
    right: -10px
}

.left-arrow {
    left: -10px
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

    .right-arrow,
    .left-arrow {
        font-size: 18px;
    }
}

.slider-dots ul {
    position: absolute;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.slider-dots ul li {
    width: 9px;
    height: 9px;
    margin: 0px 5px;
    border-radius: 30px;
    cursor: pointer;
    display: inline-block;
    background: var(--primary);
    -webkit-box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.15);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.slider-dots ul li button {
    display: none
}

.slider-dots ul li.slick-active {
    width: 25px;
    background: var(--primary);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

@media (max-width: 575px) {
    .slider-dots ul {
        bottom: 10px
    }

    .slider-dots ul li {
        margin: 0px 6px
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .slider-dots ul {
        bottom: 20px
    }

    .slider-dots ul li {
        margin: 0px 6px
    }
}

.slick-dots li {
    display: inline-block;
}

.slick-dots li button{
    width: 8px;
    height: 8px;
    margin: 5px 6px;
    border: .1rem solid #333;
    background: 0 0;
    display: block;
    -webkit-backface-visibility: visible;
    transition: all .3s ease;
    border-radius: 30px;
    text-indent: -99999px;
}

.slick-dots li.slick-active button {
    width: 18px;
    border-color: #333;
    background-color: #333;
}

.productAdd,
.detail-productAdd {
    width: 100%;
    font-size: 15px;
    padding: 6px 0px;
    border-radius: 6px;
    text-align: center;
    text-transform: capitalize;
    color: var(--heading);
    background: var(--border);
    text-shadow: var(-primary-tshadow);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.productAdd i,
.detail-productAdd i {
    font-size: 14px;
    margin-right: 5px
}

.productAction {
    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;
    /* display: none */
}

.productAction button i,
.productAction a i {
    width: 35px;
    height: 35px;
    font-size: 14px;
    line-height: 32px;
    border-radius: 6px;
    text-align: center;
    display: inline-block;
    color: var(--primary);
    text-shadow: var(--primary-tshadow);
    cursor: pointer;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    border: 2px solid var(--primary);
}
.productAction button i:hover,
.productAction a i:hover {
    color: var(--white);
    background: var(--primary)
}

.productAction input {
    width: 100%;
    font-size: 15px;
    margin: 0px 5px;
    padding: 6px 0px;
    border-radius: 6px;
    text-align: center;
    /* color: var(--white);
    background: var(--primary); */
    background: var(--chalk);
    text-shadow: var(--primary-tshadow)
}



.table-list {
    width: 100%
}

thead tr {
    background: var(--primary)
}

thead tr th {
    font-size: 17px;
    font-weight: 500;
    white-space: nowrap;
    text-align: center;
    text-transform: capitalize;
    padding: 12px 20px;
    color: var(--white);
    border-right: 1px solid var(--border);
}

thead tr th:first-child {
    border-radius: 0px 0px 0px 6px;
}

thead tr th:last-child {
    border-right: none;
    border-radius: 0px 0px 6px;
}

tbody tr {
    border-bottom: 1px solid var(--border);
}

tbody tr td {
    padding: 12px 20px;
    text-align: center;
    border-right: 1px solid var(--border);
}

tbody tr td:last-child {
    border-right: none;
}

.table-name {
    text-transform: capitalize;
}

.table-image img {
    width: auto;
    height: 100px;
}

.table-price h6 {
    white-space: nowrap;
}

.table-price h6 small {
    font-size: 13px;
    margin-left: 3px;
    color: var(--gray);
    font-family: sans-serif;
}

.table-desc p {
    width: 150px;
    font-size: 15px;
    text-align: left;
}

.table-desc p a {
    text-transform: capitalize;
}

.table-desc p a:hover {
    text-decoration: underline;
}

.table-vendor a {
    font-weight: 500;
    color: var(--heading);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.table-vendor a:hover {
    color: var(--primary);
}

.table-status h6 {
    text-transform: capitalize;
}

.table-status .stock-in {
    color: var(--purple);
}

.table-status .stock-out {
    color: var(--orange);
}

.table-shop {
    width: 180px;
}

.table-shop .productAdd {
    color: var(--white);
    background: var(--primary);
}

.table-shop .pb-action-plus i,
.table-shop .pb-action-minus i {
    background: var(--white);
}

.table-action a i {
    width: 35px;
    height: 35px;
    font-size: 16px;
    line-height: 35px;
    text-align: center;
    display: inline-block;
    border-radius: 5px;
    margin: 3px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.table-action .view i {
    color: var(--green);
    background: var(--white);
}

.table-action .view i:hover {
    color: var(--white);
    background: var(--green);
}

.table-action .wish i {
    color: var(--green);
    background: var(--white);
}

.table-action .wish.active i {
    color: var(--white);
    background: var(--green);
}

.table-action .trash i {
    color: var(--red);
    background: var(--white);
}

.table-action .trash i:hover {
    color: var(--white);
    background: var(--red);
}

@media (max-width: 1199px) {
    .table-scroll {
        overflow-x: scroll;
    }
}

.modal-dialog {
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
}

.modal-content {
    border: none;
    background: none;
    border-radius: 0px;
}

.modal-close {
    position: absolute;
    top: -15px;
    right: -15px;
    z-index: 1;
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    background: var(--white);
    -webkit-box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.2);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.modal-close:hover {
    color: var(--white);
    background: var(--primary);
}

.modal-form {
    /* width: 400px; */
    padding: 30px;
    border-radius: 8px;
    background: var(--white);
}

@media (max-width: 400px) {

    .modal-form,
    .modal-dialog {
        width: 100%;
        max-width: inherit;
    }
}

@media (max-width: 1100px) {
    .modal-dialog {
        margin: 80px auto 50px;
    }

    .modal-close {
        right: 50%;
        top: -45px;
        -webkit-transform: translateX(50%);
        transform: translateX(50%);
    }
}

.order-track {
    margin-bottom: 25px;
}

.order-track-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;
    padding: 25px 25px;
    border-radius: 8px;
    background: var(--chalk);
}

.order-track-item {
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1;
}

.order-track-item::before {
    position: absolute;
    content: "";
    top: 20px;
    left: 0px;
    width: 100%;
    height: 5px;
    z-index: -1;
    background: var(--white);
}

.order-track-item:first-child::before {
    border-radius: 50px 0px 0px 50px;
}

.order-track-item:last-child::before {
    border-radius: 0px 50px 50px 0px;
}

.order-track-item i {
    width: 45px;
    height: 45px;
    font-size: 20px;
    line-height: 42px;
    border-radius: 50%;
    margin-bottom: 10px;
    text-align: center;
    display: inline-block;
    color: var(--primary);
    background: var(--white);
    border: 2px dotted var(--primary);
}

.order-track-item span {
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    color: var(--heading);
    text-transform: capitalize;
}

.order-track-item.active::before {
    background: var(--primary);
}

.order-track-item.active i {
    color: var(--white);
    background: var(--primary);
}

.order-track-item.active span {
    color: var(--primary);
}

@media (max-width: 575px) {
    .order-track {
        overflow-x: scroll;
    }

    .order-track-list {
        width: 575px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .order-track-item span {
        white-space: inherit;
    }
}

.nav-pills .nav-link {
    font-weight: 400;
    list-style: decimal;
}

.nav-pills .nav-link.active {
    color: var(--primary);
    background: transparent;
}

@media (max-width: 991px) {
    .nav {
        margin-bottom: 30px;
    }
}

.countdown {
    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;
}

.countdown-time {
    padding: 0px 30px;
    position: relative;
    color: var(--heading);
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.countdown-time::before {
    position: absolute;
    content: ":";
    top: 28%;
    right: -3px;
    font-size: 25px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--heading);
}

.countdown-time:last-child::before {
    display: none
}

.countdown-time span {
    display: block;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    color: var(--primary);
}

.countdown-time small {
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
}

@media (max-width: 575px) {
    .countdown-time {
        padding: 0px 12px;
    }

    .countdown-time:first-child {
        padding-left: 0px;
    }

    .countdown-time:last-child {
        padding-right: 0px;
    }

    .countdown-time span {
        font-size: 35px;
    }

    .countdown-time small {
        font-size: 16px;
    }
}

.suggest-card {
    position: relative;
}

.suggest-card::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.suggest-card:hover::before {
    background: rgba(17, 151, 68, 0.9);
}

.suggest-slider li {
    margin: 0px 10px;
}

.suggest-card img {
    width: 100%;
    border-radius: 8px;
}

.suggest-card h5 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: var(--white);
    font-weight: 400;
    text-transform: capitalize;
    text-shadow: var(--primary-tshadow);
}

.suggest-card h5 span {
    display: block;
    font-size: 15px;
    font-weight: 300;
}

@media (max-width: 400px) {
    .suggest-card h5 {
        font-size: 16px;
        line-height: 24px;
    }

    .suggest-card h5 span {
        font: 14px;
    }
}

.productCard {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    /* margin-bottom: 25px; */
    padding: 15px 18px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--white);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.productCard:hover {
    border-color: var(--primary);
    -webkit-box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1)
}

.productCard:hover .productWidget {
    opacity: 1;
    bottom: 15px;
}

.productCard:hover .productAdd {
    color: var(--white);
    background: var(--primary);
}
e
.productMedia {
    position: relative;
    text-align: center;
}

.productMedia .product-label {
    text-align: left;
}

.productLabel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    top: 0px;
    left: 0px;
}

.label-text {
    font-size: 14px;
    padding: 5px 8px;
    line-height: 13px;
    border-radius: 3px;
    margin-bottom: 5px;
    color: var(--white);
    text-align: center;
    text-transform: capitalize;
}

.label-text.off {
    background: var(--red);
}

.label-text.new {
    /* background: var(--primary); */
    background: #FF9F00;
}

.label-text.sale {
    background: var(--orange);
}

.label-text.feat {
    background: var(--purple);
}

.label-text.rate {
    background: var(--yellow);
}

.label-text.order {
    background: var(--blue);
}

.productWish {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 18px;
    color: var(--gray-chalk);
}

.productWish.active {
    color: var(--primary);
}

.productImage img {
    width: 100%;
}

.productWidget {
    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: 0px;
    left: 0px;
    width: 100%;
    opacity: 0;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.productWidget a {
    width: 40px;
    height: 40px;
    font-size: 15px;
    margin: 0px 6px;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    color: var(--white);
    background: var(--primary);
    text-shadow: var(-primary-tshadow);
    -webkit-box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
}

.productContent {
    padding-top: 12px;
    text-align: center;
    border-top: 1px solid var(--border);
}

.productRating {
    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-bottom: 3px;
}

.productRating i,
.productRating a {
    font-size: 14px;
    margin: 0px 2px;
    color: var(--gray);
}

.productRating a {
    white-space: nowrap;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.productRating a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.productRating .active {
    color: var(--yellow);
}

.product-title {
    margin-bottom: 3px;
    text-transform: capitalize;
}

.product-title a {
    color: var(--sub-heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.product-title a:hover {
    color: var(--primary);
}

.productPrice {
    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;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    margin-bottom: 13px;
}

.productPrice del {
    color: var(--sub-heading);
    margin-right: 8px;
}

.productPrice span {
    color: var(--primary);
    white-space: nowrap;
}

.productPrice span small {
    font-weight: 400;
}

.productDisable {
    position: relative;
}

.productDisable:hover {
    border-color: var(--border);
    -webkit-box-shadow: none;
    box-shadow: none;
}

.productDisable:hover .productAdd {
    color: var(--heading);
    background: var(--border)
}

.productDisable .productWidget {
    visibility: hidden;
}

.productDisable::before {
    position: absolute;
    content: "Out of Stock";
    top: 40%;
    left: 50%;
    z-index: 2;
    width: 100%;
    font-size: 15px;
    font-weight: 400;
    padding: 15px 0px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: var(--primary-tshadow);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: var(--white);
    background: rgba(224, 152, 22, 0.9);
}

.productDisable::after {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
}

@media (max-width: 767px) {
    
}

@media (max-width: 575px) {
    .productCard {
        padding: 8px;
        margin-bottom: 0;
    }

    .product-title {
        font-size: 15px;
        line-height: 22px;
    }
}

.feature-card {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 25px;
    padding: 18px 18px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--white);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.feature-card:hover {
    border-color: var(--primary);
    -webkit-box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1)
}

.feature-card:hover .feature-widget {
    opacity: 1;
    bottom: 15px;
}

.feature-card:hover .feature-add {
    color: var(--white);
    background: var(--primary);
}

.feature-media {
    position: relative;
}

.feature-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    top: 0px;
    left: 0px;
}

.feature-wish {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 18px;
    color: var(--gray-chalk);
}

.feature-wish.active {
    color: var(--primary);
}

.feature-image img {
    width: 220px;
}

.feature-widget {
    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: 0px;
    left: 0px;
    width: 100%;
    opacity: 0;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.feature-widget a {
    width: 40px;
    height: 40px;
    font-size: 15px;
    margin: 0px 6px;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    color: var(--white);
    background: var(--primary);
    text-shadow: var(-primary-tshadow);
    -webkit-box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
}

.feature-content {
    width: 100%;
    padding-left: 25px;
    margin-left: 25px;
    border-left: 1px solid var(--border);
}

.feature-rating {
    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-bottom: 3px;
}

.feature-rating i,
.feature-rating a {
    font-size: 12px;
    margin: 0px 2px;
    color: var(--gray);
}

.feature-rating a {
    white-space: nowrap;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.feature-rating a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.feature-rating .active {
    color: var(--yellow);
}

@media only screen and (max-width: 1199px) {
    .feature-rating {
        display: inline-block;
        margin-bottom: 5px;
    }
}

.feature-name {
    margin-bottom: 3px;
    text-transform: capitalize;
}

.feature-name a {
    color: var(--sub-heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.feature-name a:hover {
    color: var(--primary);
}

.feature-price {
    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;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    margin-bottom: 10px;
}

.feature-price del {
    color: var(--red);
    margin-right: 8px;
}

.feature-price span {
    color: var(--primary);
    white-space: nowrap;
}

.feature-price span small {
    font-weight: 400;
}

.feature-desc {
    font-size: 15px;
    line-height: 25px;
    margin-bottom: 15px;
}

@media (max-width: 575px) {
    .feature-card {
        padding: 8px;
        margin-bottom: 15px;
    }

    .feature-image img {
        width: 100%;
    }

    .feature-name {
        font-size: 15px;
        line-height: 22px;
    }
}

@media (max-width: 450px) {
    .feature-card {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .feature-content {
        padding-left: 12px;
        margin-left: 12px;
    }

    .feature-desc {
        display: none;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .feature-image img {
        width: 190px;
    }
}

.product-standard {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 25px;
    padding: 15px 15px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.product-standard:hover {
    border-color: var(--primary);
    -webkit-box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1);
}

.product-standard:hover .standard-widget {
    opacity: 1;
    bottom: 15px;
}

.product-standard:hover .standard-add {
    color: var(--white);
    background: var(--primary);
}

.standard-media {
    position: relative;
}

.standard-label-group {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 1;
}

.standard-label {
    font-size: 14px;
    padding: 5px 8px;
    line-height: 13px;
    border-radius: 3px;
    text-transform: capitalize;
    color: var(--white);
}

.standard-label.off {
    background: var(--red);
}

.standard-label.new {
    background: var(--green);
}

.standard-label.sale {
    background: var(--orange);
}

.standard-label.feat {
    background: var(--purple);
}

.standard-label.rate {
    background: var(--yellow);
}

.standard-image img {
    width: 220px;
}

.standard-widget {
    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: 0px;
    left: 0px;
    width: 100%;
    opacity: 0;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.standard-widget a {
    width: 40px;
    height: 40px;
    font-size: 15px;
    margin: 0px 6px;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    color: var(--white);
    background: var(--primary);
    text-shadow: var(-primary-tshadow);
    -webkit-box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 7px 12px 0px rgba(0, 0, 0, 0.12);
}

.standard-content {
    width: 100%;
    margin-left: 30px;
    padding-left: 30px;
    border-left: 1px solid var(--border);
}

.standard-name {
    margin-bottom: 5px;
    text-transform: capitalize;
}

.standard-name a {
    color: var(--sub-heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.standard-name a:hover {
    color: var(--primary);
}

.standard-price {
    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;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    margin-bottom: 5px;
}

.standard-price del {
    color: var(--red);
    margin-right: 12px;
}

.standard-price span {
    color: var(--primary);
    white-space: nowrap;
}

.standard-price span small {
    font-weight: 400;
}

.standard-rating {
    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-bottom: 10px;
}

.standard-rating i,
.standard-rating a {
    font-size: 14px;
    margin-right: 3px;
    color: var(--gray);
}

.standard-rating a {
    white-space: nowrap;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.standard-rating a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.standard-rating .active {
    color: var(--yellow);
}

.standard-desc {
    margin-bottom: 20px;
}

.standard-action-group {
    display: -ms-grid;
    display: grid;
    grid-gap: 15px;
    -ms-grid-columns: (minmax(180px, 1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.standard-action-group .productAdd,
.standard-action-group .pb-action-input {
    padding: 10px 0px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primary);
}

.standard-action-group .productAdd {
    font-size: 14px;
    font-weight: 500;
}

.standard-wish {
    padding: 10px 0px;
    border-radius: 8px;
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.standard-wish i {
    font-size: 16px;
    margin-right: 6px;
}

.standard-wish span {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.standard-wish {
    color: var(--primary);
    background: var(--border);
}

.standard-wish.active {
    color: var(--white);
    background: var(--primary);
}

.standard-action {
    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;
    display: none;
}

.standard-action button i,
.standard-action a i {
    width: 35px;
    height: 35px;
    font-size: 15px;
    line-height: 35px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    color: var(--text);
    background: var(--border);
    text-shadow: var(--primary-tshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.standard-action button i:hover,
.standard-action a i:hover {
    color: var(--white);
    background: var(--primary);
}

.standard-action input {
    width: 100%;
    height: 45px;
    margin: 0px 8px;
    font-size: 15px;
    line-height: 14px;
    border-radius: 5px;
    letter-spacing: 0.3px;
    text-align: center;
    color: var(--white);
    background: var(--primary);
    text-shadow: var(--primary-tshadow);
}

@media (max-width: 575px) {
    .product-standard {
        padding: 10px 10px;
    }

    .standard-image img {
        width: 130px;
    }

    .standard-content {
        margin-left: 10px;
        padding-left: 10px;
    }

    .standard-name {
        font-size: 16px;
        margin-bottom: 3px;
    }

    .standard-price {
        font-size: 15px;
        margin-bottom: 3px;
    }

    .standard-rating {
        margin-bottom: 6px;
    }

    .standard-desc {
        display: none;
    }

    .standard-action-group {
        grid-gap: 10px;
        -ms-grid-columns: (minmax(140px, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .productAdd,
    .standard-wish {
        padding: 8px 0px;
    }

    .productAdd i,
    .standard-wish i {
        display: none;
    }

    .standard-action input {
        height: 38px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .standard-image img {
        width: 150px;
    }

    .standard-content {
        margin-left: 10px;
        padding-left: 10px;
    }

    .standard-name {
        font-size: 18px;
    }

    .standard-price {
        font-size: 16px;
    }

    .standard-desc {
        display: none;
    }

    .standard-action-group {
        grid-gap: 10px;
        -ms-grid-columns: (minmax(140px, 1fr))[auto-fit];
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .productAdd,
    .standard-wish {
        padding: 8px 0px;
    }

    .productAdd i,
    .standard-wish i {
        display: none;
    }

    .standard-action input {
        height: 38px;
    }
}


.category-wrap:hover .category-overlay {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.category-media {
    position: relative;
    margin-bottom: 15px;
}

.category-media img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.category-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    -webkit-transform: scale(0);
    transform: scale(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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.category-overlay a i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    text-align: center;
    color: var(--white);
    background: var(--primary);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.category-overlay a i:hover {
    color: var(--primary);
    background: var(--white);
}

.category-meta {
    padding: 0px 10px;
}

.category-meta h4 {
    text-transform: capitalize;
    margin-bottom: 3px;
}

@media (max-width: 575px) {
    .category-wrap {
        width: 150px;
    }
}

@media (max-width: 1199px) {
    .category-meta {
        padding: 0px 5px;
    }

    .category-meta h4 {
        font-size: 17px;
        margin-bottom: 0px;
    }

    .category-meta p {
        font-size: 15px;
    }
}

.brand-wrap {
    text-align: center;
    padding-top: 15px;
}

.brand-wrap:hover .brand-media::before {
    border-color: var(--primary);
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.brand-wrap:hover .brand-overlay {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.brand-media {
    display: inline-block;
    position: relative;
    margin-bottom: 15px;
    z-index: 1;
}

.brand-media::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 175px;
    height: 175px;
    border-radius: 50%;
    background: var(--white);
    border: 2px dashed var(--border);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: rotate360 1.2s linear infinite;
    animation: rotate360 1.2s linear infinite;
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

.brand-media img {
    width: 150px;
    height: 150px;
    border-radius: 50%
}

@-webkit-keyframes rotate360 {
    to {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

@keyframes rotate360 {
    to {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
        transform: translate(-50%, -50%) rotate(360deg)
    }
}

.brand-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    -webkit-transform: scale(0);
    transform: scale(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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.brand-overlay a i {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    text-align: center;
    color: var(--white);
    background: var(--primary);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.brand-overlay a i:hover {
    color: var(--primary);
    background: var(--white)
}

.brand-meta h4 {
    text-transform: capitalize;
    margin-bottom: 6px
}

.brand-meta ul {
    margin-bottom: 3px
}

.brand-meta ul li {
    font-size: 13px;
    margin: 0px 1px;
    color: var(--gray);
    display: inline-block
}

.brand-meta ul .active {
    color: var(--yellow)
}

.brand-meta ul .total {
    color: var(--heading)
}

@media (max-width: 575px) {
    .brand-wrap {
        width: 200px
    }
}

.choose-card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.choose-card:hover i {
    color: var(--white);
    background: var(--primary)
}

.choose-icon i {
    width: 75px;
    height: 75px;
    font-size: 40px;
    line-height: 75px;
    border-radius: 50%;
    margin-right: 30px;
    text-align: center;
    display: inline-block;
    color: var(--primary);
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.choose-text h4 {
    margin-bottom: 10px;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-card {
    margin-bottom: 30px
}

.blog-card:hover .blog-img img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.blog-media {
    position: relative
}

.blog-calender {
    position: absolute;
    top: 20px;
    right: 20px;
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 55px;
    height: 55px;
    border-radius: 6px;
    color: var(--white);
    background: rgba(0, 0, 0, 0.6)
}

.blog-calender span {
    line-height: 20px
}

.blog-date {
    font-size: 20px;
    font-weight: 500
}

.blog-month {
    font-size: 14px;
    letter-spacing: 0.3px;
    text-transform: uppercase
}

.blog-img {
    overflow: hidden;
    border-radius: 8px
}

.blog-img img {
    width: 100%;
    border-radius: 8px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-content {
    padding: 15px 15px 0px
}

.blog-meta {
    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;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 15px
}

.blog-meta li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 30px
}

.blog-meta li:last-child {
    margin: 0px
}

.blog-meta li i {
    color: var(--primary);
    margin-right: 8px;
    font-size: 14px
}

.blog-meta li a,
.blog-meta li span {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    text-transform: uppercase
}

.blog-meta li a {
    color: var(--text);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-meta li a:hover {
    color: var(--primary)
}

.blog-title {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 15px
}

.blog-title a {
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-title a:hover {
    color: var(--primary)
}

.blog-desc {
    font-size: 17px;
    line-height: 28px;
    color: var(--gray);
    margin-bottom: 25px
}

.blog-btn {
    font-size: 15px;
    font-weight: 500;
    color: var(--primary);
    text-transform: uppercase;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-btn i {
    font-size: 17px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-btn:hover {
    color: var(--primary);
    text-decoration: underline
}

.blog-btn:hover i {
    margin-left: 5px
}

@media (max-width: 575px) {
    .blog-meta li {
        margin-right: 25px
    }

    .blog-content {
        padding: 15px 8px 0px
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .blog-content {
        padding: 15px 12px 0px
    }
}

.offer-card {
    margin-bottom: 30px
}

.offer-card a {
    width: 100%
}

.offer-card a img {
    width: 100%;
    border-radius: 8px
}

.offer-div {
    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;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 10px 15px;
    margin: 0px 15px;
    border-radius: 0px 0px 8px 8px;
    background: var(--white)
}

.offer-div h5 {
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase
}

.offer-div button,
.offer-div span {
    font-size: 15px;
    font-weight: 500;
    color: var(--primary);
    text-transform: capitalize
}

@media (min-width: 351px) and (max-width: 575px) {
    .offer-card {
        width: 320px;
        margin: 0px auto 30px
    }
}

.account-card {
    margin-bottom: 30px;
    border-radius: 8px;
    padding: 30px;
    background: var(--white)
}

@media only screen and (max-width: 420px) {
    .account-card {
        padding: 20px;
    }
}

.account-title {
    padding: 18px 0px;
    margin-bottom: 25px;
    position: relative;
    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;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid var(--border)
}

.account-title::before {
    position: absolute;
    content: "";
    bottom: -2px;
    left: 0px;
    width: 50px;
    height: 2px;
    background: var(--primary)
}

.account-title h4 {
    text-transform: capitalize
}

.account-title button,
.account-title a {
    border: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    letter-spacing: 0.3px;
    padding: 5px 15px;
    white-space: nowrap;
    text-transform: capitalize;
    color: var(--primary);
    background: var(--primary-chalk);
    text-shadow: var(--primary-tshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.account-title button:hover,
.account-title a:hover {
    color: var(--white);
    background: var(--primary)
}

@media (max-width: 991px) {
    .account-orders .account-card {
        margin-bottom: 30px;
    }
}

@media (max-width: 575px) {
    .account-card {
        /* padding: 0px 15px 15px */
    }
}

@media (max-width: 399.98px) {
    .account-card, .account-card .mypayment-container {
        padding: 20px
    }
    
}

.profile-card {
    /* padding: 25px; */
    border-radius: 8px;
    margin-bottom: 25px;
    background: var(--chalk);
    /* border: 1px solid var(--border); */
    position: relative;
    cursor: pointer
}

.profile-card.address {
    flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
}

.profile-card.address {
    display: flex;
    position: relative;
}

.profile-card.address input[type=radio] {
    position: absolute;
    top: 0;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.profile-card.address label {
    /* width: 190px; */
    width: 100%;
    border: 1px solid var(--border);
    padding: 25px;
    display: block;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    border-radius: 8px;
    /* margin-right: 15px; */
    /* text-align: center; */
    color: #666;
    font-size: 16px;
    font-weight: 400;
    /* margin-bottom: 5px; */
}

.profile-card.address input:checked + label, .profile-card.address input:checked + label {
    background: var(--primary-chalk);
    border-color: var(--primary);
}


.profile-card:hover ul {
    visibility: visible;
    opacity: 1
}

.profile-card h6 {
    color: var(--text);
    margin-bottom: 8px;
    text-transform: capitalize;
}

.profile-card p {
    text-transform: capitalize;
}

.profile-card ul {
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    top: 50%;
    right: 15px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.profile-card ul li {
    margin: 5px 0px
}

.profile-card ul li button {
    width: 30px;
    height: 32px;
    line-height: 32px;
    border-radius: 6px;
    text-align: center;
    display: inline-block;
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.profile-card ul .edit {
    color: var(--primary)
}

.profile-card ul .edit:hover {
    color: var(--white);
    background: var(--primary)
}

.profile-card ul .trash {
    color: var(--red)
}

.profile-card ul .trash:hover {
    color: var(--white);
    background: var(--red)
}

.profile-card.active {
    background: var(--primary-chalk);
    border-color: var(--primary)
}

.address-addedit .modal-dialog {
   width: 600px; 
}

@media (max-width: 767px) {
    .address-addedit .modal-dialog {
        width: 95%;
    }
}

.address-addedit .nice-select {
    width: 100%;
    background-color: var(--chalk);
}

.nice-select .list {
  max-height: 165px;
  overflow-y: scroll !important;
}

.payment-card {
    padding: 25px;
    border-radius: 6px;
    margin-bottom: 25px;
    background: var(--chalk);
    border: 1px solid var(--border);
    position: relative;
    cursor: pointer
}

.payment-card:hover button {
    visibility: visible;
    opacity: 1
}

.payment-card img {
    margin-bottom: 18px
}

.payment-card h4 {
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 5px;
    text-transform: capitalize
}

.payment-card p {
    color: var(--heading);
    margin-bottom: 5px
}

.payment-card p span {
    font-size: 20px;
    margin-right: 15px;
    letter-spacing: 2px
}

.payment-card p sup {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px
}

.payment-card h5 {
    font-size: 14px;
    line-height: 22px;
    text-transform: capitalize
}

.payment-card button {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 0;
    visibility: hidden;
    width: 30px;
    height: 32px;
    line-height: 32px;
    border-radius: 6px;
    text-align: center;
    display: inline-block;
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.payment-card .trash {
    color: var(--red)
}

.payment-card .trash:hover {
    color: var(--white);
    background: var(--red)
}

.payment-card.active {
    background: var(--primary-chalk);
    border-color: var(--primary)
}

@media (max-width: 575px) {
    .payment-card p span {
        margin-right: 8px
    }
}

.paymethod-tabs {
    width: 450px;
}

.paymethod-tabs ul.nav-pills {
    padding: 0 15px;
}

.paymenttab-content {
    padding: 30px;
    border-radius: 8px;
    background: var(--white);
}

.contact-card {
    text-align: center;
    border-radius: 8px;
    margin: 0px 2.5px 30px;
    padding: 60px 15px 55px;
    background: var(--white);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.contact-card:hover {
    background: var(--primary)
}

.contact-card:hover i {
    color: var(--primary);
    background: var(--white)
}

.contact-card:hover h4,
.contact-card:hover p,
.contact-card:hover a {
    color: var(--white)
}

.contact-card i {
    width: 50px;
    height: 50px;
    font-size: 22px;
    line-height: 50px;
    border-radius: 50%;
    margin-bottom: 15px;
    text-align: center;
    display: inline-block;
    color: var(--white);
    background: var(--primary);
    text-shadow: var(--primary-tshadow);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.contact-card h4 {
    margin-bottom: 18px;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.contact-card p {
    width: 250px;
    font-size: 18px;
    line-height: 30px;
    margin: 0 auto;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.contact-card p a {
    font-size: 18px;
    line-height: 30px;
    display: block;
    color: var(--text);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.contact-card.active {
    background: var(--primary)
}

.contact-card.active i {
    color: var(--primary);
    background: var(--white)
}

.contact-card.active h4,
.contact-card.active p,
.contact-card.active a {
    color: var(--white)
}

.branch-card {
    margin: 0px 2.5px 30px;
    position: relative
}

.branch-card:hover::before {
    background: rgba(17, 151, 68, 0.85)
}

.branch-card:hover .branch-overlay {
    top: 50%
}

.branch-card:hover .branch-overlay p {
    opacity: 1
}

.branch-card::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.branch-card img {
    width: 100%;
    border-radius: 8px
}

.branch-overlay {
    position: absolute;
    top: 60%;
    left: 0px;
    width: 100%;
    padding: 0px 15px;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.branch-overlay h3 {
    color: var(--white);
    letter-spacing: 0.3px;
    margin-bottom: 8px;
    text-transform: capitalize;
    text-shadow: var(--primary-tshadow)
}

.branch-overlay p {
    width: 200px;
    margin: 0 auto;
    letter-spacing: 0.3px;
    color: var(--white);
    opacity: 0;
    text-transform: capitalize;
    text-shadow: var(--primary-tshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.team-media {
    overflow: hidden;
    position: relative;
    border-radius: 8px
}

.team-media:hover img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.team-media:hover .team-overlay {
    top: 0px;
    opacity: 1
}

.team-media:hover .team-overlay a {
    padding-top: 0px
}

.team-media img {
    width: 100%;
    border-radius: 8px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.team-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    opacity: 0;
    background: rgba(0, 0, 0, 0.3);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.team-overlay a {
    width: 36px;
    height: 36px;
    font-size: 15px;
    line-height: 36px;
    margin: 0px 5px;
    padding-top: 30px;
    text-align: center;
    border-radius: 50%;
    color: var(--text);
    background: var(--white);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.team-meta {
    text-align: center
}

.team-meta h5 {
    text-transform: capitalize
}

.team-meta h5 a {
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.team-meta h5 a:hover {
    color: var(--primary)
}

.team-meta p {
    font-size: 15px;
    text-transform: capitalize
}

@media (max-width: 575px) {
    .team-card {
        width: 290px;
        margin: 0px auto 50px
    }
}

.header-top {
    padding: 8px 0px;
    background: var(--chalk)
}

.header-top-welcome p {
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.3px
}

.header-top-nselect {
    margin-top: 3px;
    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
}

.header-nselect {
    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;
    border-right: 1px solid var(--gray-chalk);
}

.header-nselect:last-child {
    border: none
}

.header-nselect i {
    font-size: 16px;
    margin-right: 8px;
    color: var(--text);
}

.header-nselect .nice-select {
    height: 20px;
    line-height: initial;
    background-color: transparent;
    border: none;
    padding: 0 12px 0 0;
}

.header-nselect .nice-select::after {
    border-right-color: var(--text);
    border-bottom-color: var(--text);
    right: 0;
}

.header-nselect .nice-select .current {
    color: var(--text);
    text-transform: capitalize;
    font-size: 15px;
}

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

.header_toplist li {
    margin-left: 35px
}

.header_toplist li a {
    font-size: 14px;
    color: var(--text);
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header_toplist li a:hover {
    color: var(--orange-chalk)
}

@media (max-width: 767px) {

    .header-top-welcome,
    .header_toplist {
        display: none
    }

    .header-top-nselect {
        width: 270px;
        margin: 0px auto
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .header-top-welcome {
        text-align: center;
        margin-bottom: 10px
    }
}

.header-part {
    background: var(--white);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header-part.active {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 3;
    background: var(--white);
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header-part.active .header-content {
    padding: 15px 0px
}

.header-part.active .header_widget:hover i {
    background: var(--primary);
    color: var(--white)
}

.header-part.active .header_widget sup {
    border-color: var(--white)
}

.header-part.active .form-header {
    background: var(--white);
    border-color: var(--primary)
}

.header-content {
    padding: 18px 0px;
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header-logo {
    margin-right: 50px
}

.header-logo img {
    width: auto;
    height: 45px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

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

.header_widget_group .header_widget {
    margin-left: 20px;
    padding: 0 0 0 10px;
}

.header_widget_group .header-widget:first-child {
    margin-left: 0px
}

.header_widget {
    position: relative;
    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
}

.header-widget:hover i {
    color: var(--white);
    background: var(--primary);
    text-shadow: var(--primary-tshadow)
}

.header-widget:hover span {
    color: var(--primary)
}

.header_widget img {
    width: 40px;
    height: 40px;
    border-radius: 50%
}

button.header_widget {
    border: none;
}

button.header_widget:after {
    content: none;
}

.dropdown .dropdown-menu.show {
    position: absolute;
    top: 50px !important;
    left: 20px !important;
    z-index: 2;
    width: 200px;
    height: auto;
    padding: 10px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    -webkit-box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 15px 35px 0px rgba(0, 0, 0, 0.1);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.dropdown .dropdown-menu::before {
    position: absolute;
    content: "";
    z-index: -1;
    top: -7px;
    left: 12px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: var(--white);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

@media (min-width: 768px) {
    .animate {
        animation-duration: 0.3s;
        -webkit-animation-duration: 0.3s;
        animation-fill-mode: both;
        -webkit-animation-fill-mode: both;
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(1rem);
        opacity: 0;
    }

    100% {
        transform: translateY(0rem);
        opacity: 1;
    }

    0% {
        transform: translateY(1rem);
        opacity: 0;
    }
}

@-webkit-keyframes slideIn {
    0% {
        -webkit-transform: transform;
        -webkit-opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        -webkit-opacity: 1;
    }

    0% {
        -webkit-transform: translateY(1rem);
        -webkit-opacity: 0;
    }
}

.slideIn {
    -webkit-animation-name: slideIn;
    animation-name: slideIn;
}

.header_widget i {
    width: 40px;
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    color: var(--text);
    background: var(--chalk);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header_widget span {
    font-size: 15px;
    font-weight: 400;
    margin-left: 8px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-align: left;
    text-transform: capitalize;
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header_widget span small {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    font-family: sans-serif;
    display: block
}

.header_widget sup {
    position: absolute;
    top: -12px;
    left: 20px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    color: var(--white);
    background: var(--primary);
    border: 2px solid var(--white);
    text-shadow: var(--primary-tshadow)
}

.headerCart span {
    font-size: 12px;
    margin-left: 15px;
    line-height: 20px;
    text-transform: uppercase
}

.form-header {
    width: 100%;
    margin: 0px 10px 0 0;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    background: var(--chalk);
    border: 2px solid var(--chalk);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.form-header:focus-within {
    background: var(--white);
    border-color: var(--primary)
}

.form-header input {
    width: 100%;
    height: 45px;
    font-size: 15px;
    padding-left: 15px
}

.form-header button i {
    width: 45px;
    height: 45px;
    font-size: 15px;
    line-height: 45px;
    text-align: center;
    border-radius: 8px;
    color: var(--text);
    display: inline-block;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.form-header button i:hover {
    color: var(--primary)
}

.header-media-group {
    display: none;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.header-media-group a img {
    width: auto;
    height: 45px
}

.header-user img,
.header-src img {
    width: 40px;
    height: 40px;
    border-radius: 50%
}

.header-user i,
.header-src i {
    width: 40px;
    height: 40px;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    color: var(--text);
    background: var(--chalk);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.header-user i:hover,
.header-src i:hover {
    color: var(--white);
    background: var(--primary)
}

@media (max-width: 991px) {
    .header-content {
        padding: 10px 0px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .header-media-group {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .header_widget_group,
    .category-menu,
    .header-widget,
    .header-logo {
        display: none
    }

    .form_header {
        width: 100%;
    }

    .form-header {
        display: none;
        margin: 10px 0px 0px
    }

    .form-header.active,
    .form-header.active .category-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}


@media (min-width: 992px) and (max-width: 1199px) {
    .header_widget span {
        display: none;
    }
}

/* Category Menu */

.category-menu {
    position: relative;
    border-right: 1px solid #e7e7e7;
    margin: 0;
    height: auto;
    width: 100%;
    max-width: 215px;
}

.category-menu .dropdown-trigger {
    background-color: #f5f5f5;
    border-radius: 0;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    line-height: 1;
    padding: 16px 42px;
    display: block;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    font-size: 1rem;
    font-weight: 500;
    text-align: left;
    max-height: 60px
}

.category-menu .dropdown-trigger,
.category-menu .dropdown-trigger:hover {
    background-color: #f5f5f5;
    color: #333e48;
}

.category-menu .dropdown-trigger:hover{
    color: var(--primary);
}

.category-menu .dropdown-trigger i {
    margin-right: 5px
}

.category-menu .dropdown-arrow::before {
    right: 15px;
}

.category-menu .category-dropdown {
    top: calc(100% + 22px);
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
    z-index: 9999;
    position: relative;
}

.header-part.active .category-menu .category-dropdown {
    top: 64px;
}

.category-menu .category-dropdown::before {
    position: absolute;
    content: "";
    top: -12px;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-left: 2px solid;
    border-top: 2px solid
}

.category-menu .category-dropdown:before {
    border-color: #f5f5f5;
}

.category-menu .category-dropdown ul.vertical {
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 25%);
    display: inline-block;
    position: relative;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    width: 100%;
}

.category-menu .category-dropdown .vertical ul {
    background-color: #ffffff;
}

.category-menu .category-dropdown .vertical li>ul.visible {
    display: block;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 10px 0;
    height: 100%;
}

.vertical li>* {
    display: block;
    position: relative;
}

.category-menu .category-dropdown ul li {
    display: block;
    white-space: nowrap;
    word-break: keep-all;
}

.category-menu .category-dropdown .vertical li a {
    color: #232323;
    padding: 10px 28px 10px 20px;
    text-transform: capitalize;
}

.category-menu .category-dropdown .vertical li>a:first-child {
    transition: background-color 0.2s;
}

.category-menu .category-dropdown .vertical li.active>span:after {
    display: block;
    position: absolute;

    width: 8px;
    height: 8px;
    right: 15px;
    bottom: 0px;
    top: 0px;
    margin: auto 0px;

    transform: rotate(45deg);
    border-width: 1px;
    border-color: black;
    border-style: solid solid none none;

    content: "";
}

.category-menu .category-dropdown .vertical li a:hover,
.category-menu .category-dropdown .vertical li a:focus,
.category-menu .category-dropdown .vertical li a:active,
.category-menu .category-dropdown .vertical li.active>a {
    color: var(--primary);
}

.category-menu .category-dropdown .vertical li:hover>a:first-child,
.category-menu .category-dropdown .vertical li.active>a:first-child {
    color: var(--primary);
    background: var(--chalk);
}


.vertical li>ul {
    display: none;
    position: absolute;
    min-width: 100%;
    top: 0px;
    left: 100%;
    margin-left: 1px;
}

/* menu animation */
.category-menu .category-dropdown .vertical li>ul {
    opacity: 1;
    transform: scale(1) translateY(0px);
    transform-origin: left top;
}

.category-menu .category-dropdown .vertical li>ul.animating {
    opacity: 0 !important;
    transform: scale(0.96) translateX(-16px);
}

.category-menu .category-dropdown .vertical li>ul.animating {
    z-index: -1 !important;
}

.category-menu .category-dropdown .vertical.alignRight li>ul.animating {
    transform: scale(0.96) translateX(16px);
}

.close-btn {
    padding: 20px;
    font-size: 18px;
    color: #232323;
    font-weight: 500;
    text-transform: uppercase;
    border-bottom: 1px solid #ced4da;
    cursor: pointer;
    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;
}

.close-btn i {
    font-size: 14px;
}

@media (min-width: 1200px) {
    .category-menu {
        position: relative;
    }

    .category-menu .category-dropdown {
        top: 68px;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        z-index: 8;
        background-color: #fff;
        -webkit-transition: all linear 0.3s;
        transition: all linear 0.3s;
        min-width: 250px;
        -webkit-box-shadow: 3.346px 3.716px 22.5px rgb(0 0 0 / 7%);
        box-shadow: 3.346px 3.716px 22.5px rgb(0 0 0 / 7%);
    }

    .category-menu:hover .category-dropdown {

        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        visibility: visible;
    }
}

@media (min-width: 1200px) {}

@media (min-width: 1366px) {}

.category-menu .category-dropdown .title-category h6 {
    font-size: 14px;
}

@media only screen and (max-width: 1199px) {

    .category-menu {
        width: 280px;
    }

    .category-menu .category-dropdown {
        position: fixed;
        background-color: #fff;
        width: 300px;
        border-radius: 0;
        border: 1px solid #ddd;
        top: 0;
        height: 100vh;
        left: -320px;
        z-index: 99;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
        /* overflow: scroll; */
        padding: 0 !important;

        box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);
        -webkit-box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    }

    .header-part.active .category-menu .category-dropdown {
        top: 0;
    }

    .category-menu .category-dropdown.open {
        left: 0;
    }

    .category-menu .dropdown-trigger {
        font-weight: 400;
        padding: 18px;
        font-size: 0.813rem;
    }

    .category-menu .dropdown-arrow::before {
        right: 7px;
    }

    .category-menu .category-dropdown ul.vertical{
        border: none;
        box-shadow: none;
    }

    .category-menu .category-dropdown .vertical li>ul.visible {
        border-top: 1px solid #ddd;
        padding: 0 15px;
        height: auto;
    }

    .category-menu .category-dropdown ul li {
        /* position: relative; */
        letter-spacing: 0.8px;
        /* line-height: 1; */
        border-bottom: 1px solid #ddd;
    }

    .category-menu .category-dropdown ul li:last-child{
        border-bottom: none;
    }

    .category-menu .category-dropdown .vertical li.hasSubmenu>span::after {
        display: block;
        position: absolute;
        width: 8px;
        height: 8px;
        right: 15px;
        bottom: 0px;
        top: 0px;
        margin: auto 0px;
        transform: rotate(45deg);
        border-width: 1px;
        border-color: black;
        border-style: solid solid none none;
        content: "";
    }

    .category-menu .category-dropdown .vertical ul.visible li.hasSubmenu>span::before {
        content: '';
        border-left: 1px solid #ddd;
        position: absolute;
        right: 0px;
        display: block;
        z-index: 1;
        width: 33px;
        height: 25px;
        top: 11px;
}

    .category-menu .category-dropdown>ul>li>a {
        font-weight: 500;
        font-size: 14px;
        text-transform: uppercase;
    }


}

@media (max-width: 991px) {
    .category-menu .category-dropdown {
        overflow: inherit;
    }



    .category-menu .dropdown-arrow::before {
        content: none;
    }

    .category-menu {
        width: 235px;
    }


}

@media (max-width: 767px) {
    .category-menu {
        width: 230px;
    }

    .category-menu .dropdown-trigger {
        font-size: 13px;
        padding: 12px;
    }

    .category-menu .dropdown-trigger i {
        display: none;
    }
}

/* @media (max-width: 417px){
    .category-menu{
        width: 335px;
    }
} */


.isOverlayActive .nav-cover {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 10000;
    background-color: #222;
    opacity: .5;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.navbar-part {
    background: var(--white)
}

.navbar-content {
    border-top: 1px solid var(--border);
    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
}

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

.navbar-item {
    margin-right: 30px
}

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

.navbar-link {
    padding: 22px 0px;
    font-weight: 500;
    color: var(--text);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.navbar-link:hover {
    color: var(--primary)
}

.navbar-focus-list {
    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
}

.navbar-focus-list li {
    margin-left: 30px
}

.navbar-focus-list li:first-child {
    margin-left: 0px
}

.navbar-focus-list li a {
    font-weight: 500;
    color: var(--text);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.navbar-focus-list li a:hover {
    color: var(--primary)
}

.navbar-focus-list li a i {
    font-size: 18px;
    margin-right: 5px
}

.navbar-info-group {
    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
}

.navbar-info {
    margin-right: 30px;
    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
}

.navbar-info:last-child {
    margin-right: 0px
}

.navbar-info i {
    font-size: 30px;
    margin-right: 15px;
    color: var(--primary)
}

.navbar-info p small {
    font-size: 14px;
    line-height: 16px;
    display: block;
    text-align: left;
    text-transform: capitalize
}

.navbar-info p span {
    font-size: 15px;
    font-weight: 500
}

@media (max-width: 991px) {
    .navbar-part {
        display: none
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .navbar-list li {
        margin-right: 18px
    }

    .navbar-link {
        font-size: 15px
    }

    .navbar-info {
        margin-right: 15px
    }

    .navbar-info p span {
        font-size: 14px
    }

    .navbar-info i {
        margin-right: 10px
    }
}

.nav-sidebar {
    position: fixed;
    top: 0px;
    left: -320px;
    width: 280px;
    height: 100vh;
    padding: 0px;
    z-index: 5;
    background: var(--white);
    -webkit-box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.nav-sidebar.active {
    left: 0px
}

.nav-header {
    padding: 15px 0px;
    position: relative;
    text-align: center;
    border-bottom: 1px solid var(--border)
}

.nav-header a img {
    width: auto;
    height: 40px
}

.nav-close {
    position: absolute;
    top: 50%;
    right: -18px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.nav-close i {
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    color: var(--text);
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.nav-close i:hover {
    color: var(--white);
    background: var(--primary)
}

.nav-content {
    padding: 0px 18px;
    overflow-y: scroll;
    max-height: calc(100vh - 100px)
}

.nav-btn {
    width: 100%;
    padding: 50px 0px;
    margin-bottom: 20px;
    text-align: center;
    background: var(--chalk)
}

.nav-btn .btn {
    font-size: 14px;
    padding: 12px 28px;
    letter-spacing: 0.3px
}

.nav-btn .btn i {
    font-size: 14px
}

.nav-profile {
    width: 100%;
    text-align: center;
    padding: 18px 0px 0px
}

.nav-user {
    margin-bottom: 10px;
    border-radius: 50%;
    border: 2px solid var(--primary)
}

.nav-user img {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border: 2px solid var(--white)
}

.nav-name {
    margin-bottom: 18px;
    text-transform: capitalize
}

.nav-name a {
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.nav-name a:hover {
    color: var(--primary)
}

.nav-select-group {
    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;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border)
}

.nav-select {
    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-right: 18px;
    padding-right: 18px;
    line-height: 20px;
    border-right: 1px solid var(--gray-chalk)
}

.nav-select:last-child {
    padding: 0px;
    margin: 0px;
    border: none
}

.nav-select i {
    margin-right: 5px
}

.nav-list {
    width: 100%
}

.nav-list li {
    width: 100%
}

.nav-link {
    width: 100%;
    font-weight: 500;
    padding: 12px 15px;
    border-radius: 8px;
    color: var(--text);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.nav-link:hover {
    color: var(--primary);
    background: var(--chalk)
}

.nav-link::before {
    right: 15px
}

.nav-link i {
    font-size: 20px;
    margin-right: 12px
}

.nav-link.active {
    color: var(--primary);
    background: var(--primary-chalk)
}

.nav-info-group {
    padding: 20px 0px;
    margin-top: 15px;
    margin-bottom: 25px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border)
}

.nav-info {
    margin-bottom: 20px;
    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
}

.nav-info:last-child {
    margin-bottom: 0px
}

.nav-info i {
    font-size: 30px;
    margin-right: 15px;
    color: var(--primary)
}

.nav-info p small {
    font-size: 14px;
    line-height: 18px;
    display: block;
    text-align: left;
    text-transform: capitalize
}

.nav-info p span {
    font-size: 16px;
    font-weight: 500
}

.nav-footer {
    text-align: center
}

.nav-footer p {
    font-size: 14px;
    color: var(--gray)
}

.nav-footer p a {
    color: var(--primary)
}

.cart-sidebar {
    position: fixed;
    top: 0px;
    right: -450px;
    width: 400px;
    height: 100vh;
    z-index: 5;
    background: var(--white);
    -webkit-box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.cart-sidebar.active {
    right: 0px
}

.cart-header {
    padding: 18px 25px;
    text-align: center;
    position: relative;
    border-bottom: 1px solid var(--border)
}

.cart-total {
    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
}

.cart-total i {
    font-size: 20px;
    margin-right: 8px;
    color: var(--primary)
}

.cart-total span {
    font-weight: 500;
    color: var(--primary);
    text-transform: capitalize
}

.cart-close,
.back-category {
    position: absolute;
    top: 50%;
    left: -18px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.cart-close i,
.back-category i {
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    color: var(--text);
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.cart-close i:hover {
    color: var(--white);
    background: var(--primary)
}

.close-btn {
    position: relative;
}

.back-category {
    right: -18px;
    left: inherit;
}

.cart-list {
    height: 100%;
    padding: 0px 15px;
    max-height: calc(100vh - 210px);
    overflow-y: scroll
}

.cart-item {
    padding: 15px 0px;
    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;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: center;
    border-bottom: 1px solid var(--border)
}

.cart-item:hover .cart-media button {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.cart-item:last-child {
    border-bottom: none
}

.cart-media {
    position: relative;
    margin-right: 25px
}

.cart-media a img {
    width: 100px;
    border-radius: 8px
}

.cart-media button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.cart-media button i {
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 32px;
    text-align: center;
    border-radius: 5px;
    display: inline-block;
    color: var(--red);
    background: rgba(255, 255, 255, 0.9);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.cart-media button i:hover {
    color: var(--white);
    background: var(--red)
}

.cart-info-group {
    width: 100%
}

.cart-info {
    margin-bottom: 13px
}

.cart-info h6 {
    font-weight: 400;
    text-transform: capitalize
}

.cart-info h6 a {
    color: var(--heading)
}

.cart-info p {
    font-size: 14px
}

.cart-action-group {
    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;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.cart-action-group .productAction {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.cart-action-group .productAction button i {
    width: 30px;
    height: 30px;
    font-size: 12px;
    line-height: 30px;
    border-radius: 5px
}

.cart-action-group .productAction input {
    width: 45px;
    height: 30px;
    font-size: 14px;
    border-radius: 5px;
    color: var(--primary);
    background: var(--chalk)
}

.cart-action-group h6 {
    font-weight: 500;
    color: var(--primary)
}

.cart-footer {
    padding: 20px 15px 0px;
    text-align: center;
    -webkit-box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.08);
    box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.08)
}

.cart-detail {
    font-weight: 500;
    margin-bottom: 20px;
    color: var(--primary);
    text-shadow: var(--primary-tshadow)
}

.cart-detail:hover {
    text-decoration: underline
}

.coupon-form {
    padding: 3px;
    border-radius: 8px;
    margin-bottom: 18px;
    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 solid var(--border);
    -webkit-box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.1);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
    display: none
}

.coupon-form:focus-within {
    border-color: var(--primary)
}

.coupon-form input {
    width: 100%;
    height: 38px;
    padding: 0px 15px
}

.coupon-form button span {
    width: 100px;
    height: 38px;
    font-size: 14px;
    line-height: 38px;
    border-radius: 8px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primary)
}

.cart-checkout-btn {
    padding: 10px 0px;
    border-radius: 8px;
    background: var(--primary);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.cart-checkout-btn:hover {
    background: var(--heading)
}

.checkout-label {
    width: 100%;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: capitalize;
    color: var(--white)
}

.checkout-price {
    padding: 0px 25px;
    letter-spacing: 0.3px;
    color: var(--white);
    border-left: 1px solid var(--border)
}

@media (max-width: 450px) {
    .cart-sidebar {
        right: 0px;
        width: 100%;
        height: 100vh;
        -webkit-transform: scale(0);
        transform: scale(0);
        margin: 80px 0px 0px;
        border-radius: 15px 15px 0px 0px;
        transition: all linear .3s;
        -webkit-transition: all linear .3s;
        -moz-transition: all linear .3s;
        -ms-transition: all linear .3s;
        -o-transition: all linear .3s
    }

    .cart-sidebar.active {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: top;
        transform-origin: top
    }

    .cart-close {
        left: 50%;
        top: -45px;
        bottom: inherit;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        border-radius: 50px 50px 0px 0px;
        -webkit-box-shadow: 0px -8px 10px 0px rgba(0, 0, 0, 0.15);
        box-shadow: 0px -8px 10px 0px rgba(0, 0, 0, 0.15)
    }

    .cart-list {
        max-height: calc(100vh - 290px)
    }

    .cart-media a img {
        width: 80px
    }
}

.category-sidebar {
    position: fixed;
    top: 0px;
    left: -320px;
    width: 280px;
    height: 100vh;
    z-index: 5;
    background: var(--white);
    -webkit-box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.15);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.category-sidebar.active {
    left: 0px
}

.category-header {
    padding: 15px 18px;
    position: relative;
    border-bottom: 1px solid var(--border);
    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
}

.category-title {
    color: var(--primary);
    text-transform: capitalize;
    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
}

.category-title i {
    margin-right: 8px
}

.category-close {
    position: absolute;
    top: 50%;
    right: -18px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.category-close i {
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    color: var(--text);
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.category-close i:hover {
    color: var(--white);
    background: var(--primary)
}

.category-list {
    width: 100%;
    padding: 0px 15px;
    overflow-y: scroll;
    height: calc(100vh - 130px);
}

.category-item {
    width: 100%;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.category-link {
    font-size: 16px;
    font-weight: 400;
    padding: 12px 15px;
    color: var(--text);
    text-transform: capitalize;
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.category-link i {
    font-size: 25px;
    margin-right: 15px;
    display: inline-block
}

@media only screen and (max-width: 1199px) {
    .category-list .category-item > ul.category-list {
        overflow: inherit;
        height: auto;
    }

    .category-list .category-item > ul.category-list > li:last-child {
        border-bottom: none;
    }
}

.mobile-menu {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 3;
    background: var(--white);
    border-radius: 10px 10px 0px 0px;
    -webkit-box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.1);
    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;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    display: none
}

.mobile-menu a,
.mobile-menu button {
    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;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 80px;
    padding: 8px 0px;
    border-radius: 8px;
    position: relative
}

.mobile-menu a:hover,
.mobile-menu button:hover {
    background: var(--chalk)
}

.mobile-menu a:hover i,
.mobile-menu button:hover i {
    color: var(--primary)
}

.mobile-menu a:hover span,
.mobile-menu button:hover span {
    color: var(--primary)
}

.mobile-menu a i,
.mobile-menu button i {
    font-size: 15px;
    margin-bottom: 5px;
    color: var(--text);
    text-shadow: 2px 3px 8px rgba(0, 0, 0, 0.1)
}

.mobile-menu a span,
.mobile-menu button span {
    font-size: 10px;
    line-height: 12px;
    color: var(--text);
    text-transform: uppercase
}

.mobile-menu a sup,
.mobile-menu button sup {
    position: absolute;
    top: -5px;
    left: 75%;
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    color: var(--white);
    background: var(--primary);
    border: 2px solid var(--primary-chalk);
    text-shadow: var(--primary-tshadow)
}

.mobile-menu a .fas fa-shopping-basket,
.mobile-menu button .fas fa-shopping-basket {
    font-size: 18px
}

@media (max-width: 991px) {
    .mobile-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

/*--------------------------------------------------------------
# Index Slider
---------------------------------------------------------------*/

.pb-home-grid-slider {
    margin-bottom: 20px
}

.pb-home-grid-slider img {
    width: 100%;
    border-radius: 8px
}

.pb-banner-wrap {
    /* border-radius: 5px;
    padding: 42px 60px;
    background: var(--white); */
    position: relative;
    z-index: 1
}

.pb-banner-wrap::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.06;
    z-index: -1;
    border-radius: 5px;
    /* background: url(../images/banner-shape.png); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.bg1 {
    background: #c8ffca
}

.bg2 {
    background: #c8e6ff
}

.bg3 {
    background: #fbffc8
}

.pb-banner-content h2 {
    font-size: 38px;
    margin-bottom: 40px
}

.pb-banner-image img {
    width: 100%
}

.pb-banner-promo a img {
    width: 100%;
    border-radius: 5px
}



@media (max-width: 575px) {
    .pb-banner-wrap {
        padding: 30px 30px
    }

    .pb-banner-content {
        margin-bottom: 15px
    }

    .pb-banner-content h2 {
        font-size: 34px;
        line-height: 44px
    }
}

@media (max-width: 767px) {
    .pb-banner-promo {
        margin-bottom: 25px
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .pb-banner-content {
        margin-bottom: 25px
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .pb-banner-content h2 {
        font-size: 30px;
        line-height: 40px
    }
}

@media (max-width: 991px) {
    .pb-banner-group {
        display: flex;
        gap: 15px;
    }
}

@media (max-width: 450px) {
    .pb-banner-group {
        display: inline-block;
    }
}

.pb-banner-campaign {
    display: block;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.banner-section .pb-banner-campaign:last-child {
    margin-bottom: 0;
}

.banner-section .pb-banner-campaign img {
    width: 100%;
    /* min-height: 285px; */
}

.pb-banner-slider~[class^=col-] .pb-banner-campaign img {
    border-radius: 6px;
}

.pb-banner-campaign::before,
.pb-banner-promo::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .5);
    -webkit-transition: -webkit-transform .8s;
    transition: -webkit-transform .8s;
    -o-transition: transform .8s;
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s;
    -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -200%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -200%, 0);
}

.pb-banner-campaign:hover::before,
.pb-banner-promo:hover::before {
    -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0);
}



/************************************************************************************************
 MODULE DEALS
*************************************************************************************************/
.module h3.modtitle {
    font-size: 24px;
    color: #222;
    font-weight: 500;
    text-transform: capitalize;
    border-bottom: 2px solid #eee;
    display: inline-block;
    width: 100%;
    position: relative;
    margin-top: 0;
    margin-bottom: 30px;
    padding-bottom: 10px;
    text-align: left;
}

.module h3.modtitle span {
    font-size: 24px;
    color: #222;
    font-weight: 500;
    text-transform: capitalize;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .module h3.modtitle span {
        font-size: 18px;
    }
}

.deals-wrap {
    position: relative;
    border: 2px solid var(--orange);
    border-radius: 5px;
    padding: 20px 30px;
    margin-top: 10px;
    width: 100%;
}

.deals-wrap .item-left[class*="col-"] {
    width: 100%;
}

.deals-wrap .item .fig-img {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 3px;
}

.deals-wrap .item .fig-img .label-product label {
    text-align: center;
    border-radius: 12px;
    color: #fff;
    display: block;
    font-size: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    height: 23px;
    line-height: 23px;
    position: absolute;
    top: 10px;
    right: 10px;
    text-transform: uppercase;
    z-index: 2;
    padding: 0 12px;
    margin-bottom: 5px;
}

.deals-wrap .item .fig-img .button-group {
    padding: 0;
    position: absolute;
    z-index: 99;
    left: 10px;
    bottom: 35px;
}

.deals-wrap .item .fig-img .button-group .btn-button {
    border: none;
    display: block;
    margin-top: 5px;
    padding: 0;
    background-color: var(--primary);
    border-radius: 3px;
    color: #fff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    transform: all 0.3s ease 0s;
    position: relative;
    transition: all 0.3s ease-in-out 0s;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    -ms-opacity: 0;
    -o-opacity: 0;
    opacity: 0;
    -webkit-transform: translate(-50px, 0px);
    -moz-transform: translate(-50px, 0px);
    -ms-transform: translate(-50px, 0px);
    -o-transform: translate(-50px, 0px);
    transform: translate(-50px, 0px);
    text-shadow: var(-primary-tshadow);
    -webkit-box-shadow: 0px 7px 12px 0px rgb(0 0 0 / 12%);
    box-shadow: 0px 7px 12px 0px rgb(0 0 0 / 12%);
}

.deals-wrap .item .fig-img .button-group .btn-button:hover {
    background-color: var(--primary);
    width: auto;
}

.deals-wrap .item .fig-img .button-group .btn-button.addToCart {
    transition-delay: 0.1s;
}

.deals-wrap .item:hover .product-thumb .fig-img .button-group .btn-button {
    -webkit-transform: translate(0px, 0px);
    -moz-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    -o-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    -ms-opacity: 1;
    -o-opacity: 1;
    opacity: 1;
}

.deals-wrap .item .fig-img .button-group .btn-button i,
.deals-wrap .item .fig-img .button-group .btn-button:before {
    font-size: 12px;
    color: #fff;
    height: 30px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    position: absolute;
    left: 0px;
}

.deals-wrap .item .fig-img .button-group .btn-button span {
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 300;
    height: auto;
    opacity: 0;
    position: static;
    transition: all 0.3s ease 0s;
    width: auto;
}

.deals-wrap .item .fig-img .button-group .btn-button:hover span {
    opacity: 1;
    padding: 0 10px 0 28px;
}

.deals-wrap .item figcaption {
    text-align: center;
    padding: 0;
}

.deals-wrap .item figcaption h4 {
    margin-top: 20px;
    margin-bottom: 10px;
}

.deals-wrap .item figcaption .item-available {
    display: inline-block;
    width: 100%;
    margin: 10px 0;
}

.deals-wrap .item figcaption .item-available p {
    color: #444;
    margin-bottom: 0;
    font-size: 16px;
}

.deals-wrap .item figcaption .item-available .a1 {
    text-align: left;
}

.deals-wrap .item figcaption .item-available b {
    font-weight: 400;
    color: #1c1c1c;
}

.deals-wrap .item figcaption .item-available .a2 {
    text-align: right;
}

.deals-wrap .item figcaption .available {
    background-color: #eee;
    height: 10px;
    width: 100%;
    display: inline-block;
    border-radius: 7px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.deals-wrap .item figcaption .available .color_width {
    background: var(--orange);
    position: absolute;
    height: 100%;
    left: 0;
    border-radius: 7px;
}

.deals-wrap .item .item-time-w {
    clear: both;
    margin-top: 15px;
}

.deals-wrap .item .item-time-w .countdown-time {
    background-color: transparent;
    line-height: 100%;
    float: none;
    display: inline-block;
    text-align: center;
    width: auto;
    position: relative;
    padding: 0 15px;
}

.deals-wrap .item .item-time-w .countdown-time:last-child:after {
    display: none;
}

.deals-wrap .item .item-time-w .countdown-time span {
    border: none;
    font-size: 24px;
    color: #222;
    font-weight: 400;
    position: relative;
    width: 60px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    background-color: #eee;
    border-radius: 3px;
}

.deals-wrap .item .item-time-w .countdown-time small {
    color: #222;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-block;
    margin-top: 5px;
}

@media only screen and (max-width: 991px) {
    .deals-wrap {
        margin-bottom: 50px;
    }
}

.modcontent.slick-slider .right-arrow,
.modcontent.slick-slider .left-arrow,
.newItem.slick-slider .right-arrow,
.newItem.slick-slider .left-arrow {
    opacity: 1;
    visibility: visible;
    top: -59px;
    right: 1px;
    transform: translateY(-80%);
    box-shadow: none;
    width: 30px;
    height: 30px;
    line-height: 30px;
}

.modcontent.slick-slider .left-arrow,
.newItem.slick-slider .left-arrow {
    right: 40px;
    left: inherit;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {

    .modcontent.slick-slider .right-arrow,
    .modcontent.slick-slider .left-arrow,
    .newItem.slick-slider .right-arrow,
    .newItem.slick-slider .left-arrow {
        width: 25px;
        height: 25px;
        line-height: 27px;
    }
}



/************************************************************************************************
   MODULE LISTING TABS
*************************************************************************************************/
.deals-list-w {
    display: inline-block;
    margin-bottom: 30px;
    width: 100%;
}

.deals-list-w .float-end {
    padding: 20px;
}

.deals-list-w .float-end .btn {
    color: var(--heading);
    padding: 0;
    border: none;
}

.deals-list-w .float-end .btn:hover {
    color: var(--primary);
    background-color: transparent;
}

@media only screen and (max-width: 1199px) {
    .deals-list-w .float-end .btn {
        font-size: 14px;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .deals-list-w .float-end .btn {
        font-size: 13px;
    }

    .deals-list-w .float-end {
        padding: 25px 10px 25px 0px;
    }
}

@media screen and (max-width: 767px) {
    .deals-list-w {
        margin-top: 30px;
    }
}


/* End Index Slider */


/************************************************************************************************
   MODULE Three Col Grid Item Slider
*************************************************************************************************/
.extra-layout {
    position: relative;
}

.extra-layout h3.modtitle {
    font-size: 24px;
    color: #222;
    font-weight: 500;
    text-transform: capitalize;
    border-bottom: 2px solid #eee;
    display: inline-block;
    width: 100%;
    position: relative;
    margin-top: 0;
    margin-bottom: 30px;
    padding-bottom: 10px;
    text-align: left;
}

.extra-layout h3.modtitle span {
    font-size: 24px;
    color: #222;
    font-weight: 500;
    text-transform: capitalize;
}

.extra-layout h3.modtitle:after {
    position: absolute;
    content: "";
    width: 70px;
    height: 2px;
    background-color: var(--primary);
    bottom: -2px;
    left: 0;
}

.newItem .item .product-layout {
    border-bottom: 1px solid #eaeaea;
}

.newItem .item .product-layout:last-child {
    border-bottom: none;
}

.newItem .item .product-layout {
    margin-bottom: 10px;
}

.newItem .item .product-layout:last-child {
    margin-bottom: 0;
}

.newItem .item .product-layout .product-item-container .left-block {
    padding: 10px;
    text-align: center;
}

.newItem .item .product-layout .product-item-container .right-block {
    /* padding: 10px 5px; */
    padding: 8px;
}

.newItem .item .product-layout .product-item-container .right-block .productPrice {
    margin-bottom: 0;
}

.newItem.slick-slider .right-arrow,
.newItem.slick-slider .left-arrow {
    transform: translateY(-47%);
}

.col-style .newItem {
    border: 1px solid #ebebeb;
    border-radius: 5px;
    padding: 20px 20px 20px 20px;
}

.product-item-container .right-block {
    display: inline-block;
    text-align: center;
    width: 100%;
}

@media only screen and (min-width:767px) and (max-width:991px) {
    .extra-layout h3.modtitle span {
        font-size: 18px;
    }

    .modcontent.slick-slider .right-arrow, 
    .modcontent.slick-slider .left-arrow, 
    .newItem.slick-slider .right-arrow, 
    .newItem.slick-slider .left-arrow  {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 18px;
    }
    
}

@media (max-width: 767px) {
    .col-style .newItem {
        margin-bottom: 30px;
    }

    .col-style:last-child .newItem {
        margin-bottom: 0;
    }
}


/************************************************************************************************
   Promo Section Part
*************************************************************************************************/
.pb-banner-promo {
    display: block;
    position: relative;
    overflow: hidden;
}

.promo-section .pb-banner-promo img {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 0.35s ease 0s;
    -o-transition: opacity 0.35s ease 0s;
    transition: opacity 0.35s ease 0s;
}

.promo-section .pb-banner-promo a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    background: #000;
    vertical-align: top;
}

.promo-section .pb-banner-promo a:hover img {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.promo-section .pb-banner-promo a:before,
.promo-section .pb-banner-promo a:after {
    bottom: 20px;
    content: "";
    left: 20px;
    opacity: 0;
    position: absolute;
    right: 20px;
    top: 20px;
    -webkit-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
    -o-transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
    transition: opacity 0.35s ease 0s, transform 0.35s ease 0s;
    z-index: 1;
}

.promo-section .pb-banner-promo a:before {
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    -o-transform: scale(0, 1);
    transform: scale(0, 1);
}

.promo-section .pb-banner-promo a:after {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: scale(1, 0);
    -ms-transform: scale(1, 0);
    -o-transform: scale(1, 0);
    transform: scale(1, 0);
}

.promo-section .pb-banner-promo a:hover:before,
.promo-section .pb-banner-promo a:hover:after {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

/************************************************************************************************
   Featured Categories
*************************************************************************************************/
.card-2 {
    position: relative;
    background: #F4F6FA;
    text-align: center;
    border: 1px solid #F4F6FA;
    border-radius: 10px;
    padding: 20px 0px 18px 0px;
    margin-bottom: 20px;
    min-height: 180px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.card-2:hover {
    background: #fff;
    border: 1px solid #e3cfbc;
    -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.featuredCategories .card-2 {
    margin-right: 12px;
    margin-left: 12px;
}

.card-2 h6 a {
    color: #483f3f;
}

.card-2:hover a {
    color: var(--primary);
}

.card-2 figure {
    text-align: center;
    margin-bottom: 10px;
}

.img-hover-scale img {
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    transition: transform .5s, -webkit-transform .5s;
}

.card-2 figure img {
    border-radius: 10px;
    display: inline-block;
    max-width: 80px;
}


.product-view {
    max-width: 1000px;
    border-radius: 8px;
    background: var(--white)
}

.view-gallery {
    margin: 30px;
    position: relative
}

.view-label-group {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.view-label {
    font-size: 15px;
    padding: 6px 10px;
    margin-bottom: 6px;
    line-height: 13px;
    border-radius: 3px;
    text-align: center;
    text-transform: capitalize;
    color: var(--white)
}

.view-label:last-child {
    margin-bottom: 0px
}

.view-label.off {
    background: var(--red)
}

.view-label.new {
    background: var(--green)
}

.view-label.sale {
    background: var(--orange)
}

.view-label.feat {
    background: var(--purple)
}

.view-label.rate {
    background: var(--yellow)
}

.view-details {
    margin: 30px
}

.view-name {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 5px;
    text-transform: capitalize
}

.view-name a {
    color: var(--heading)
}

.view-name a:hover {
    color: var(--primary)
}

.view-meta {
    margin-bottom: 12px;
    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
}

.view-meta p {
    font-size: 13px;
    margin-right: 20px;
    text-transform: uppercase;
    color: var(--placeholder)
}

.view-meta span,
.view-meta a {
    margin-left: 5px;
    color: var(--placeholder)
}

.view-meta a:hover {
    text-decoration: underline;
    color: var(--primary)
}

.view-rating {
    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-bottom: 15px
}

.view-rating i,
.view-rating a {
    font-size: 15px;
    margin-right: 3px;
    color: var(--gray)
}

.view-rating a {
    margin-left: 8px;
    white-space: nowrap;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.view-rating a:hover {
    color: var(--primary);
    text-decoration: underline
}

.view-rating .active {
    color: var(--yellow)
}

.view-price {
    margin-bottom: 20px
}

.view-price del {
    color: var(--red);
    margin-right: 25px
}

.view-price span {
    color: var(--primary)
}

.view-price span small {
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize
}

.view-desc {
    margin-bottom: 25px
}

.view-list-group {
    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;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 25px
}

.view-list-group:last-child {
    margin-bottom: 0px
}

.view-list-title {
    font-weight: 500;
    margin-right: 15px;
    color: var(--heading);
    text-transform: capitalize
}

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

.view-tag-list li {
    margin-right: 8px
}

.view-tag-list li a {
    font-size: 14px;
    line-height: 12px;
    padding: 8px 10px;
    border-radius: 5px;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    color: var(--text);
    background: var(--chalk);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.view-tag-list li a:hover {
    color: var(--white);
    background: var(--primary)
}

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

.view-share-list li {
    margin-right: 8px
}

.view-share-list li a {
    width: 35px;
    height: 35px;
    font-size: 16px;
    line-height: 35px;
    border-radius: 50%;
    text-align: center;
    color: var(--text);
    background: var(--chalk);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.view-share-list li a:hover {
    color: var(--white);
    background: var(--primary)
}

.view-add-group {
    margin: 45px 0px 15px
}

.view-add-group .productAdd,
.view-add-group .action-input {
    height: 46px;
    line-height: 46px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primary);
    margin-bottom: 15px;
}

.view-action-group {
    display: -ms-grid;
    display: grid;
    grid-gap: 15px;
    -ms-grid-columns: (minmax(200px, 1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    position: relative
}

.view-action-group a {
    padding: 10px 0px;
    border-radius: 8px;
    color: var(--text);
    background: var(--border);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.view-action-group a i {
    font-size: 16px;
    margin-right: 8px
}

.view-action-group a span {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase
}

.view-wish.active {
    color: var(--white);
    background: var(--primary)
}

.preview-slider {
    margin-bottom: 20px
}

.preview-slider li img {
    width: 100%;
    border-radius: 8px
}

.thumb-slider li {
    margin: 0px 10px;
    cursor: pointer
}

.thumb-slider li img {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--border)
}

.thumb-slider .slick-center img {
    border: 1px solid var(--primary)
}

@media (max-width: 500px) {

    .view-gallery,
    .view-details {
        margin: 25px
    }

    .view-list-group {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .view-list-title {
        margin: 0px 0px 10px
    }
}

@media (max-width: 767px) {
    .product-view {
        max-width: 480px
    }
}

.news-part {
    background-size: cover !important;
    padding: 70px 0px;
    position: relative;
    z-index: 1
}

.news-part::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(linear, left top, right top, from(rgba(6, 23, 56, 0.8)), to(rgba(255, 50, 77, 0.8)));
    /* background: linear-gradient(to right, rgba(6, 23, 56, 0.8), rgba(232, 127, 59, 0.8)); */
    background: linear-gradient(to right, rgba(6, 23, 56, 0.8), rgba(255, 50, 77, 0.8));
    z-index: -1;
}

.news-text h2 {
    font-size: 35px;
    color: var(--white);
    margin-bottom: 5px
}

.news-text p {
    font-size: 18px;
    font-weight: 300;
    color: var(--white)
}

.news-form {
    width: 100%;
    padding: 6px;
    border-radius: 8px;
    background: var(--white);
    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
}

.news-form input {
    width: 100%;
    height: 50px;
    padding: 0px 20px;
    line-height: 50px
}

.news-form button span {
    width: 180px;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 0px;
    border-radius: 8px;
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primary)
}

.news-form button span i {
    margin-right: 5px
}

@media (max-width: 575px) {
    .news-form {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media (max-width: 767px) {
    .news-text {
        margin-bottom: 30px
    }
}

@media (max-width: 991px) {
    .news-part {
        padding: 50px 30px 60px
    }

    .news-part .container-fluid {
        padding: 0px
    }
}

.intro-part {
    padding: 80px 0px;
    background: var(--intro-bg)
}

.intro-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.intro-wrap:hover .intro-icon i {
    color: var(--white);
    background: var(--primary)
}

.intro-icon {
    margin-right: 20px
}

.intro-icon i {
    width: 50px;
    height: 50px;
    font-size: 18px;
    line-height: 43px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
    color: var(--primary);
    background: var(--white);
    border: 3px double var(--primary);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.intro-content h5 {
    font-size: 17px;
    margin-bottom: 8px;
    text-transform: capitalize
}

.intro-content p {
    font-size: 15px;
    line-height: 22px
}

@media (max-width: 767px) {
    .intro-part {
        padding: 60px 0px 30px
    }

    .intro-wrap {
        margin-bottom: 30px
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .intro-part {
        padding: 80px 0px 50px
    }

    .intro-wrap {
        margin-bottom: 30px
    }
}

.footer-part {
    background-color: var(--thm-body);
    padding-top: 55px
}

.small-container {
    max-width: 850px;
    margin: 0 auto;
}

.footer-part .footer-logo {
    text-align: center;
	display: inline-block;
	margin-bottom: 0;
}

.footer-part .footer-logo figure {
	margin-bottom: 0;
}

.footer-part .footer-logo img.img-fluid {
    display: inline-block;
	width: 110px;
}

.footer-part .links-menu {
    position: relative;
    margin: 20px 0px;
}

.footer-part .links-menu li {
    display: inline-block;
    padding: 20px 0px;
    margin: 0px 15px;
}

.footer-part .links-menu li a {
    font-size: 16px;
    line-height: 30px;
    font-weight: 600;
    color: #121111;
}

.footer-part .links-menu li a:hover {
    color: var(--primary);
}

@media (max-width:575px) {
    .footer-part .links-menu li {
        padding: 5px 0px;
        margin: 0;
        width: 100%;
    }
}






















.footer-widget {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 100%;
    grid-template-columns: 100%
}

.footer-logo {
    margin-bottom: 25px
}

.footer-logo img {
    width: 180px
}

.footer-desc {
    margin-bottom: 30px
}

.footer-social li {
    display: inline-block;
    margin-right: 7px
}

.footer-social li:last-child {
    margin-right: 0px
}

.footer-social li a {
    width: 40px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    color: var(--primary);
    background: var(--white);
    text-shadow: var(--primary-tshadow);
    -webkit-box-shadow: var(--primary-bshadow);
    box-shadow: var(--primary-bshadow);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.footer-social li a:hover {
    color: var(--white);
    background: var(--primary)
}

.footer-title {
    margin-bottom: 25px;
    letter-spacing: -0.3px;
    text-transform: capitalize
}

.footer-widget.contact {
    margin-left: 30px
}

.footer-contact li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 18px
}

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

.footer-contact li i {
    font-size: 30px;
    margin-right: 15px;
    color: var(--primary)
}

.footer-contact li p span {
    display: block
}

.footer-links {
    display: -ms-grid;
    display: grid;
    grid-gap: 50px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr
}

.footer-links ul li {
    margin-bottom: 15px
}

.footer-links ul li:last-child {
    margin-bottom: 0px
}

.footer-links ul li a {
    color: var(--text);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.footer-links ul li a:hover {
    color: var(--primary);
    text-decoration: underline
}

.footer-app {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr
}

.footer-app a img {
    width: 100%
}

.footer-bottom {
    margin-top: 30px;
    padding: 20px 35px 15px;
    border-radius: 8px 8px 0px 0px;
    background: var(--primary);
    border-top: 1px solid var(--border);
    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
}

.footer-copytext {
    font-size: 15px;
    color: var(--white)
}

.footer-copytext a {
    color: var(--primary-chalk)
}

.footer-copytext a:hover {
    text-decoration: underline
}

.developby, .developby:hover {
    color: var(--white);
}

.footer-card a {
    margin-left: 10px
}

.footer-card a img {
    width: 50px;
    border-radius: 3px
}

@media (max-width: 768px) {
    .footer-part .container-fluid {
        padding: 0px 25px
    }

    .footer-widget.contact {
        margin-left: 0px
    }
}

@media (max-width: 1199px) {
    .footer-part {
        padding-top: 50px
    }

    .footer-widget {
        margin-bottom: 40px
    }

    .footer-bottom {
        margin-top: 10px
    }
}

@media (max-width: 991px) {
    .footer-bottom {
        padding: 25px 15px 75px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center
    }

    .footer-copytext {
        margin-bottom: 10px
    }

    .developby {
        margin-top: 10px;
    }

    .footer-card a {
        margin: 0px 3px
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .footer-bottom {
        padding: 25px 30px 75px
    }
}

.blog-widget {
    margin-bottom: 30px;
    margin-left: 5px;
    border-radius: 8px;
    padding: 18px 25px 25px;
    background: var(--white)
}

.blog-widget:last-child {
    margin-bottom: 0px
}

.blog-widget-title {
    padding-bottom: 16px;
    margin-bottom: 20px;
    position: relative;
    text-transform: capitalize;
    border-bottom: 1px solid var(--border)
}

.blog-widget-title::before {
    position: absolute;
    content: "";
    bottom: -2px;
    left: 0px;
    width: 50px;
    height: 2px;
    background: var(--primary)
}

.blog-widget-form {
    position: relative
}

.blog-widget-form input {
    width: 100%;
    height: 45px;
    padding: 0px 15px 0px 60px;
    border-radius: 8px;
    background: var(--chalk);
    border: 1px solid var(--border);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-form input:focus-within {
    border-color: var(--primary)
}

.blog-widget-form button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: var(--white);
    background: var(--primary);
    border-radius: 8px 0px 0px 8px
}

.blog-widget-feed li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border)
}

.blog-widget-feed li:last-child {
    margin: 0px;
    padding: 0px;
    border: none
}

.blog-widget-media img {
    width: 100px;
    border-radius: 8px;
    margin-right: 20px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-text {
    font-size: 17px;
    line-height: 24px
}

.blog-widget-text a {
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-text a:hover {
    color: var(--primary)
}

.blog-widget-text span {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase
}

.blog-widget-category li {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border)
}

.blog-widget-category li:last-child {
    margin: 0px;
    padding: 0px;
    border: none
}

.blog-widget-category li:hover a {
    color: var(--primary)
}

.blog-widget-category li:hover a span {
    background: var(--primary)
}

.blog-widget-category li a {
    width: 100%;
    font-size: 17px;
    color: var(--text);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-category li a span {
    font-size: 14px;
    float: right;
    width: 30px;
    height: 30px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    color: var(--white);
    background: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-tag li {
    display: inline-block;
    margin: 0px 8px 12px 0px
}

.blog-widget-tag li a {
    font-size: 14px;
    padding: 5px 12px;
    border-radius: 3px;
    color: var(--text);
    background: var(--chalk);
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-tag li a:hover {
    color: var(--white);
    background: var(--primary)
}

.blog-widget-social li {
    display: inline-block;
    margin-right: 10px
}

.blog-widget-social li a {
    width: 45px;
    height: 45px;
    font-size: 18px;
    line-height: 45px;
    text-align: center;
    border-radius: 3px;
    color: var(--white);
    background: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.blog-widget-social li a:hover {
    background: var(--primary)
}

@media (max-width: 575px) {
    .blog-widget-social li {
        margin-right: 5px
    }

    .blog-widget-social li a {
        width: 40px;
        height: 40px;
        font-size: 16px;
        line-height: 40px
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .blog-widget-media img {
        width: 95px
    }

    .blog-widget-social li {
        margin-right: 5px
    }

    .blog-widget-social li a {
        width: 40px;
        height: 40px;
        font-size: 16px;
        line-height: 40px
    }
}

@media (max-width: 991px) {
    .blog-widget {
        margin-left: 0px
    }
}

/* custom accordion */
.custom-accordion a.collapsed i.accor-down-icon:before {
    content: "\f107";
}



/*PRODUCT DETAILS*/

.detail-gallery .product-image-slider {
    background-color: #fff;
    margin-bottom: 30px;
    border-radius: 15px;
    border: 1px solid #ececec;
    overflow: hidden;
}

.detail-gallery .product-image-slider figure {
    margin-bottom: 0;
}

.detail-gallery .product-image-slider img {
    opacity: 1;
    border-radius: 16px;
    background-color: #ffffff;
}

.detail-gallery .product-image-slider.slider-nav-thumbnails {
    background: none;
    border-radius: 0;
}

.detail-gallery .product-image-slider button.slick-arrow {
    background: none;
    border: 0;
    padding: 0;
    font-size: 14px;
}

.detail-gallery .product-image-slider button.slick-arrow i {
    color: #adadad;
}

.detail-gallery {
    position: relative;
}

.zoomContainer,
.zoomWindow {
    z-index: 9999;
}

.slick-slider-pagination {
    display: none;
}

.slick-slider-pagination > div {
    display: inline-block;
    padding: 0 7px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    background-color: rgba(0,0,0,.4);
    border-radius: 10px;
}

@media only screen and (max-width: 1024px) {
    .zoomContainer {
        display: none;
    }
}

@media (max-width: 991px) {
    /* .detail-gallery .product-image-slider {
        display: none;
    } */
    .slick-slider-pagination {
        display: block;
        position: absolute;
        bottom: 15px;
        left: 0;
        right: 0;
        text-align: center;
    }
    .slider-nav-thumbnails button {
        display: none !important;
    }

    .slider-nav-thumbnails {
        display: none;
        margin-bottom: 25px;
    }
}


.pb-social-tigger {
    position: relative;
    margin: 1% auto;
    height: 50px;
    width: 50px;
}

.detail-gallery .pb-social-tigger {
    position: absolute;
    left: -135px;
    top: 45%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
}

.pb-social-tigger li {
    height: 100%;
}

.pb-social-tigger li a {
    width: 50px;
    height: 50px;
    line-height: 50px;
    background-color: var(--primary);
    text-align: center;
    color: #FFFFFF;
    font-size: 1em;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    opacity: 0;
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    visibility: hidden;
}

.pb-social-tigger.active li a {
    opacity: 1;
    visibility: visible;
}

.pb-social-tigger li a.pb-google-plus {
    background-color: #DD4B39;
}

.pb-social-tigger li a.pb-facebook {
    background-color: #3B5999;
}

.pb-social-tigger li a.pb-twitter {
    background-color: #55ACEE;
}

.pb-social-tigger li a.pb-instagram {
    background-color: #E4405F;
}

.pb-social-tigger li a.tigger-icon {
    opacity: 1;
    -webkit-transform: translate(0%, 0%) !important;
    -ms-transform: translate(0%, 0%) !important;
    transform: translate(0%, 0%) !important;
    visibility: visible;
}

.pb-social-tigger li:nth-child(1) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.6s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.6s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.6s;
}

.pb-social-tigger.active li:nth-child(1) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.6s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.6s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.6s;
    -webkit-transform: translate(0, -80px);
    -ms-transform: translate(0, -80px);
    transform: translate(0, -80px);
}

.pb-social-tigger li:nth-child(2) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.9s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.9s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.9s;
}

.pb-social-tigger.active li:nth-child(2) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.9s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.9s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 0.9s;
    -webkit-transform: translate(70px, -40px);
    -ms-transform: translate(70px, -40px);
    transform: translate(70px, -40px);
}

.pb-social-tigger li:nth-child(3) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;
}

.pb-social-tigger.active li:nth-child(3) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.2s;
    -webkit-transform: translate(70px, 40px);
    -ms-transform: translate(70px, 40px);
    transform: translate(70px, 40px);
}

.pb-social-tigger li:nth-child(4) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.5s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.5s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.5s;
}

.pb-social-tigger.active li:nth-child(4) a {
    -webkit-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.5s;
    -o-transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.5s;
    transition: all 0.6s cubic-bezier(0.87, -0.41, 0.19, 1.44) 1.5s;
    -webkit-transform: translate(0, 80px);
    -ms-transform: translate(0, 80px);
    transform: translate(0, 80px);
}


.details-label-group {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.details-label {
    font-size: 14px;
    padding: 6px 10px;
    margin-bottom: 6px;
    line-height: 13px;
    border-radius: 3px;
    text-transform: capitalize;
    text-align: center;
    color: var(--white);
}

.details-label.new {
    background: var(--green);
}

.details-label.off {
    background: var(--red);
}

.detail-gallery .zoom-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    font-size: 22px;
    opacity: 0.6;
}

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

.slider-nav-thumbnails .slick-slide {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

.slider-nav-thumbnails .slick-slide img {
    border-radius: 17px;
}

.slider-nav-thumbnails .slick-slide.slick-current::before {
    border-bottom: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -5px;
    position: absolute;
    top: -6px;
    width: 0;
}

.slider-nav-thumbnails .slick-slide.slick-current img {
    border: 2px solid #a2d2c9;
}

.slider-nav-thumbnails div.slick-slide {
    margin: 0 10px;
}

.slider-nav-thumbnails button {
    opacity: 0;
}

.slider-nav-thumbnails button.slick-arrow {
    margin: 0;
    border: 0;
    background: #F2F3F4;
    border-radius: 40px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    z-index: 9;
    color: #7E7E7E;
}

.slider-nav-thumbnails button.slick-arrow:hover {
    color: #fff;
    background-color: var(--primary);
}

.slider-nav-thumbnails button.slick-arrow.slick-prev {
    left: -20px;
}

.slider-nav-thumbnails button.slick-arrow.slick-next {
    right: -20px;
}

.slider-nav-thumbnails:hover button {
    opacity: 1;
}

.slider-nav-thumbnails .slick-prev,
.slider-nav-thumbnails .slick-next {
    font-size: 12px;
    position: absolute;
    top: 50%;
    line-height: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* Product Detail Right */
.details-content {
    padding: 35px 35px;
    border-radius: 8px;
    background: var(--white);
}

.details-name {
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 5px;
    text-transform: capitalize;
}

.details-name a {
    color: var(--heading);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.details-meta {
    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;
}

.details-meta p {
    font-size: 15px;
    margin-right: 20px;
    white-space: nowrap;
    color: var(--placeholder);
}

.details-meta span,
.details-meta a {
    color: var(--placeholder);
}

.details-meta a:hover {
    text-decoration: underline;
    color: var(--primary);
}

.details-icons-wrapper {
    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;
}

.details-rating {
    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-bottom: 15px;
}

.details-rating i,
.details-rating a {
    font-size: 15px;
    margin-right: 3px;
    color: var(--gray);
}

.details-rating .active {
    color: var(--yellow);
}

.details-rating a {
    margin-left: 8px;
    white-space: nowrap;
    text-transform: capitalize;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.details-rating a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.details-icons-wrapper .details-action-group .details-wish {
    display: inherit;
    padding: 0 15px;
}

.details-icons-wrapper .details-action-group {
    -ms-grid-columns: (minmax(35px, 1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
    display: flex;
}

.details-icons-wrapper .details-action-group .details-wish {
    background: none;
    border: 1px solid var(--border);
}

.details-icons-wrapper .details-action-group .details-wish i {
    font-size: 16px;
    margin-right: 0;
}

/* Share Button */
.details-icons-wrapper .details-action-group label {
    position: relative;
    width: 80px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    background: none;
    border: 1px solid var(--border);
    text-transform: uppercase;
    display: block;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.details-icons-wrapper .details-action-group label::before {
    content: 'Cancel';
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    font-size: 13px;
    left: 0;
    top: 0;
    opacity: 0;
}

#check {
    display: none;
}

#check:checked~label::before {
    opacity: 1;
}

.details-icons-wrapper .media-icons {
    position: absolute;
    left: 50%;
    top: -70px;
    transform: translateX(-30%);
    background: var(--chalk);
    height: 110%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 4px;
    padding: 4px 10px;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

#check:checked~.media-icons {
    opacity: 1;
    pointer-events: auto;
    top: -45px;
}

.details-icons-wrapper .media-icons::before {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    left: 50%;
    background: var(--chalk);
    bottom: -9px;
    transform: translateX(-50%) rotate(45deg);
    z-index: -1;
}

.details-icons-wrapper .media-icons a {
    display: inline-block;
    background-color: transparent;
    padding: 0;
    margin-right: 15px;
    transition: all 0.3s ease;
}

.details-icons-wrapper .media-icons a:last-child {
    margin-right: 0;
}

.details-icons-wrapper .media-icons a i {
    margin-right: 0;
}

.details-icons-wrapper .media-icons a:hover {
    transform: translateY(-2px);
}

.details-icons-wrapper .media-icons a:nth-child(1):hover {
    color: #426782;
}

.details-icons-wrapper .media-icons a:nth-child(2):hover {
    color: #1da1f2;
}

.details-icons-wrapper .media-icons a:nth-child(3):hover {
    color: #e1306c;
}

.details-icons-wrapper .media-icons a:nth-child(4):hover {
    color: #ff0000;
}


.details-price del, 
.cart-pro-price del {
    color: #A8A1A5;
    margin-right: 10px;
    font-size: 16px;
    font-weight: 400;
}

@media only screen and (max-width:767px) {
    .details-price del, 
    .cart-pro-price del {
        display: block;
    }
}

.details-price span, 
.cart-pro-price span {
    color: var(--heading);
    font-size: 20px;
    white-space: nowrap;
}

.details-desc {
    margin-bottom: 25px;
}

.details-list-group {
    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;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 25px;
}

.details-list-group.attr-size div > label {
    
    margin-right:7px;
    color:var(--text);
    line-height: 32px;
    text-align: center;
    cursor: pointer;
}

.details-list-group.attr-size div > label span {
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 0 10px;
}

.details-list-group.attr-size div > label input {
    position:absolute;
    top:-20px;
}

.details-list-group.attr-size  input:checked + span {
    background-color: var(--primary);
    border-color: var(--primary);
    color:#F7F7F7;
}


.details-list-title {
    font-weight: 500;
    margin-right: 15px;
    color: var(--heading);
    text-transform: capitalize;
}

.details-tag-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;
}

.details-tag-list li {
    margin-right: 8px;
}

.details-tag-list li a {
    font-size: 14px;
    line-height: 12px;
    padding: 8px 10px;
    border-radius: 5px;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    color: var(--text);
    background: var(--chalk);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.attr-color,
.attr-size {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.list-filter {
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-filter li {
    display: inline-block;
}

.list-filter li a {
    color: #555;
    display: block;
    min-width: 30px;
    text-align: center;
    position: relative;
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
}

.color-filter.list-filter a span {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 40px;
}

.color-filter.list-filter a span.product-color-white {
    border: 1px solid #ddd;
}

.color-filter.list-filter li.active a::before {
    content: "";
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position: absolute;
    right: 3px;
    top: -3px;
    background: #4cd964;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
}

.size-filter.list-filter li a {
    color: #7E7E7E;
    height: 32px;
    line-height: 32px;
    min-width: 40px;
    text-align: center;
    border-radius: 5px;
    padding: 0 9px;
    background: #fff;
}

.size-filter.list-filter li a:hover,
.size-filter.list-filter li.active a {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

.details-add-group {
    margin: 25px 0px 15px;
}

.detail-product-group .productAction {
    width: 140px;
}

.details-add-group .productAdd,
.details-add-group .detail-productAdd,
.details-add-group .pb-action-input {
    padding: 10px 0px;
    color: var(--white);
    background: var(--primary);
    text-transform: uppercase;
}

.details-action-group {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    -ms-grid-columns: (minmax(123px, 1fr))[auto-fit];
    grid-template-columns: repeat(auto-fit, minmax(127px, 1fr));
    position: relative;
}

.details-action-group.addToCart {
    width: 50%;
    margin: 30px auto 0 auto;
}

.details-add-group .detail-productAdd {
    font-size: 13px;
}

.details-action-group a,
.details-action-group label {
    padding: 10px 0px;
    border-radius: 6px;
    color: var(--text);
    background: var(--chalk);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.details-action-group a i {
    font-size: 13px;
    margin-right: 8px;
}

.details-action-group a span {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.details-action-group a:hover {
    color: var(--primary);
}

.details-action-group.details-add-group a i {
    margin-right: 0;
}


/* Drawer */
.detail-product-info .drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80%;
    background-color: var(--white);
    z-index: 1001;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
    overflow: auto;
    padding: 30px;
    color: #434343;
    transform: translateY(100%);
}

.detail-product-info .drawer.open {
    padding-top: 0;
    transform: translateY(0);
}

.detail-product-info .backdrop,
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
    display: block;
}

.detail-product-info .backdrop.visible,
#overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.detail-product-info .close_drawer_button {
    float: right;
    cursor: pointer;
    color: #434343;
    font-size: 20px;
}

.detail-product-info .toggleDrawer {
    cursor: pointer;
    color: #434343;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    padding: 10px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #f8f0f0;
}

.detail-product-info .toggleDrawer i {
    color: #434343;
    font-size: 18px;
}

.detail-product-info .card {
    border: none;
    border-radius: 0;
}

.detail-product-info .card .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    padding: 20px 0;
    background: #fff;
    width: 100%;
    left: 0;
    right: 0;
}

.detail-product-info .card .card-header .h5 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 0;
}

.detail-product-info .card .card-body {
    font-size: 16px;
    padding: 0;
}


/* Delivery Seller */
.module-shopwidget {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.delivery-seller {
    display: inline-block;
    vertical-align: top;
}

.seller-container {
    background-color: #ffffff;
    font-size: 12px;
    color: #212121;
}

.seller-name-retail {
    padding: 0 16px 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.seller-name-retail .seller-name-wrapper {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.seller-name-title {
    color: var(--placeholder);
    font-size: 15px;
    margin-bottom: 0;
    line-height: 1;
}

.seller-name-detail {
    font-size: 15px;
}

.link-theme-black:active,
.link_theme-black:focus,
.link-theme-black:hover,
.link-theme-black:visited {
    color: #424242;
    text-decoration: none;
}

.seller-name-detail .seller-badge {
    display: block;
    margin-top: 4px;
    max-height: 16px;
}

.seller-info-pc {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #eff0f5;
}

.seller-info-pc .info-content {
    padding: 8px 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-left: 1px solid #eff0f5;
    font-size: 14px;
    text-align: left;
    display: table-cell;
    width: 33.3333333333%;
    vertical-align: top;
    position: relative;
    cursor: pointer;
}

.seller-info-pc .info-content:first-child {
    border-left: none;
    padding-left: 16px;
}

.seller-info-pc .info-content .seller-info-title {
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 14px;
    height: 28px;
    overflow: hidden;
    color: #757575;
}

.seller-info-pc .info-content .seller-info-value {
    font-size: 26px;
    line-height: 30px;
}

.seller-info-pc .info-content .seller-info-value.rating-neutral,
.seller-info-pc .info-content .seller-info-value.rating-positive {
    color: #212121;
}

.seller-info-pc .info-content .seller-info-value.gray-text {
    font-size: 12px;
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 30px;
}

.seller-link {
    padding: 15px 0 0;
    text-align: center;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    border-top: 1px solid #eff0f5;
    text-transform: capitalize;
}

@media (max-width: 991px) {
    .module-shopwidget {
        margin-top: 25px;
    }
}

.delivery {
    font-size: 14px;
    color: #212121;
}

.delivery-header {
    display: table;
    padding: 20px 16px 2px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.delivery-header-title {
    display: table-cell;
    font-size: 12px;
    color: #757575;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
    width: 300px;
}

.delivery-header-tooltip {
    display: table-cell;
    text-align: right;
}

.delivery-tooltip-icon {
    color: #757575;
    cursor: pointer;
}

.delivery_header {
    margin-bottom: 8px;
    border-bottom: 1px solid #eff0f5;
}

.delivery-location,
.delivery-option .delivery-option-item {
    padding: 10px 16px;
}

.delivery-location .location-current {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.location-body {
    display: table;
    width: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.location-icon.flexicon {
    display: table-cell;
    vertical-align: middle;

}

.flexicon {
    position: relative;
    width: 26px;
}

.flexicon:before {
    background-image: url(../images/collection.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 26px;
    height: 30px;
    position: absolute;
    content: "";
    display: block;
    top: 0;
    left: 0;
}

.delivery-location .location-address {
    background-position: 0 0;
    word-break: break-word;
    line-height: 1.15;
    padding-left: 10px;
}

.location-link-change {
    font-size: 13px;
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    text-transform: uppercase;
    white-space: nowrap;
    padding-left: 10px;
}

.delivery-content {
    position: relative;
    padding-bottom: 4px;
}

.delivery-option-item__body {
    display: table;
    border-collapse: collapse;
    width: 100%;
}

.delivery-option-item__info {
    display: table-cell;
    vertical-align: middle;
    padding-left: 10px;
}

.delivery-option-item__icon.homeDelivery::before {
    background-position: -30px 0;
}

.delivery-option-item__icon.fast-delivery::before {
    background-position: -71px 0;
}

.delivery-option-item__icon.cash-on-delivery::before {
    background-position: -112px 0;
}

.delivery-option-item__icon.daysReturn::before {
    background-position: 0 -30px;
}

.delivery-option-item__icon.warranty::before {
    background-position: -35px -30px;
}

.delivery-option-item__title {
    line-height: 14px;
}

.delivery-option-item__subtitle,
.delivery-option-item__time {
    color: #9e9e9e;
    font-size: 12px;
    line-height: 12px;
    margin-top: 5px;
}

.delivery-option-item__icon {
    position: relative;
    display: table-cell;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.delivery-option-item__shipping-fee {
    font-weight: 500;
    padding-left: 5px;
    display: table-cell;
    text-align: right;
    white-space: nowrap;
}

.warranty {
    font-size: 14px;
    color: #212121;
}

.warranty-option-item {
    padding: 10px 16px;
}

.product-more-infor li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 10px;
    position: relative;
}

.product-more-infor li span {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 165px;
    flex: 0 0 165px;
    display: inline-block;
}

.product-more-infor li ::before {
    position: absolute;
    left: -14px;
    top: 9px;
    content: "";
    height: 6px;
    width: 6px;
    border-radius: 100%;
    background-color: #9b9b9b;
}

/* Review Section */
.product-details-frame {
    padding: 50px;
    border-radius: 8px;
    margin-bottom: 30px;
    background: var(--white);
}

.comments-area h4 {
    margin-bottom: 35px;
    color: #2a2a2a;
    font-size: 18px;
}

.comments-area .comment-list {
    padding-bottom: 48px;
}

.comments-area .comment-list:last-child {
    margin-bottom: 0px;
}

.comments-area .comment-list .single-comment {
    margin: 0 0 15px 0;
    border: 1px solid #f2f2f2;
    border-radius: 15px;
    padding: 20px;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.comments-area .comment-list .single-comment:last-child {
    margin-bottom: 0;
}

.comments-area .comment-list .single-comment:not(:last-child) {
    border-bottom: 1px solid #ececec;
}

.comments-area .comment-list .single-comment:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.comments-area .thumb {
    margin-right: 20px;
}

.comments-area .thumb figure {
    border-radius: 50%;
    border: 2px solid var(--primary);
    width: 50px;
    height: 50px;
}

.comments-area .thumb img {
    width: 65px;
    border-radius: 50%;
    border: 2px solid var(--white);
}

.comments-area .comment-list .single-comment .reply {
    opacity: 0;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}

.comments-area .comment-list .single-comment:hover .reply {
    opacity: 1;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}


/* Rating Review */
.product-rate {
    background-image: url("../images/rating-stars.png");
    background-position: 0 -12px;
    background-repeat: repeat-x;
    height: 12px;
    width: 60px;
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
}

.product-rate.review-rating {
    float: right;
}

.product-rating {
    height: 12px;
    background-repeat: repeat-x;
    background-image: url("../images/rating-stars.png");
    background-position: 0 0;
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: var(--primary);
    transition: width .6s ease;
}

.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #FFFFFF;
    border-radius: .25rem;
}

.progress+.progress {
    margin-top: 1rem;
}

.progress span {
    line-height: 16px;
    background: var(--body);
    padding-right: 10px;
    width: 45px;
}


.shop-filter {
    padding: 20px 30px;
    border-radius: 8px;
    margin-bottom: 25px;
    background: var(--white);
    border: 1px solid var(--border);
    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
}

.shop-filter .nice-select {
    border-radius: 6px;
    background: var(--chalk);
    padding: 8px 35px 8px 20px;
    border: 1px solid var(--border)
}

.shop-filter .nice-select::after {
    right: 20px
}

.shop-filter .nice-select .current {
    font-size: 15px
}

.shop-filter .nice-select .list {
    top: 45px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.shop-filter ul {
    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
}

.shop-filter ul li {
    margin: 0px 5px
}

.shop-filter ul li a {
    width: 40px;
    height: 40px;
    font-size: 16px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    color: var(--text);
    background: var(--chalk)
}

.shop-filter ul li .active {
    color: var(--white);
    background: var(--primary)
}

.shop-filter p {
    font-size: 15px;
    text-transform: capitalize
}

@media (max-width: 767px) {
    .shop-filter {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .shop-filter .nice-select {
        margin-bottom: 15px
    }

    .shop-filter ul {
        margin-bottom: 15px
    }
}

.shopPromo_widget {
    margin-bottom: 25px;
    border-radius: 8px;
    text-align: center;
    overflow: hidden
}

.shopPromo_widget img {
    width: 100%;
    border-radius: 8px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.shopPromo_widget img:hover {
    -webkit-transform: scale(1.05);
    transform: scale(1.05)
}

.shopWidget {
    padding: 20px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    background: var(--white);
    border: 1px solid var(--white)
}

.shopWidget:last-child {
    margin-bottom: 0px
}

.shop_widget_title {
    position: relative;
    padding-bottom: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}

.shop_widget_title::after {
    content: "";
    width: 80px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--primary);
}

.widget-category ul li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 48px;
    border-radius: 5px;
    border: 1px solid #F2F3F4;
    padding: 9px 18px;
    margin: 0 0 15px 0;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
}

.widget-category ul li:hover {
    border: 1px solid var(--orange-light);
    -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
}

.widget-category ul li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    line-height: 1.5;
    color: #483f3f;
    font-size: 14px;
}

.widget-category ul li a img {
    max-width: 30px;
    margin-right: 15px;
}

.widget-category .count {
    display: inline-block;
    background-color: var(--orange-light);
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 20px;
    margin-left: 5px;
    font-size: 12px;
    color: #483f3f;
}

.shop-widget-btn {
    width: 100%;
    font-size: 15px;
    padding: 8px 0px;
    border-radius: 8px;
    color: var(--heading);
    background: var(--border);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.shop-widget-btn:hover {
    color: var(--white);
    background: var(--primary)
}

.shop-widget-btn i {
    margin-right: 8px;
    margin-top: -1px
}

.shop-widget-btn span {
    text-transform: capitalize
}

.shop-widget-group {
    display: -ms-grid;
    display: grid;
    grid-gap: 10px;
    /* -ms-grid-columns: (1fr)[2]; */
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    margin: 15px 0px;
}

.shop-widget-group input {
    width: 100%;
    height: 45px;
    border-radius: 5px;
    background: var(--chalk);
    text-align: center
}

.shopWidget_list {
    margin: 18px 0px 20px
}

.custom-accordion .collapse ul.shopWidget_list {
    padding-top: 20px;
    margin-top: 0;

    max-height: calc(100% - 219px);
    overflow-y: auto;
    scrollbar-width: thin;
    -webkit-scrollbar-width: thin;
}


.shopWidget_list li {
    margin-bottom: 12px;
    color: var(--gray);
    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;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.shopWidget_list li:hover {
    color: var(--primary)
}

.shopWidget_list li:last-child {
    margin-bottom: 0px
}

.shopWidget-content {
    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
}

.shopWidget-content input {
    width: 15px;
    height: 15px;
    margin-right: 12px;
    cursor: pointer
}

.shopWidget-content label {
    cursor: pointer;
    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;
    text-transform: capitalize
}

.shopWidget-content label i {
    font-size: 15px;
    margin-left: 8px;
    color: var(--gray)
}

.shopWidget-content label i:first-child {
    margin-left: 0px
}

.shopWidget-content label i.active {
    color: var(--yellow)
}

.shopWidget_number {
    font-size: 15px
}

.shop-widget-search {
    width: 100%;
    height: 40px;
    padding: 0px 15px;
    border-radius: 5px;
    background: var(--chalk);
    border: 1px solid var(--border);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.shop-widget-search:focus-within {
    border-color: var(--primary)
}

.shop-widget-scroll {
    height: 279px;
    overflow-y: scroll;
    padding-right: 7px
}

/* .single-banner {
    background-size: cover !important;
    padding: 100px 0px;
    text-align: center;
    position: relative;
    z-index: 1
}

.single-banner::before {
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, right top, left top, from(rgba(6, 23, 56, 0.6)), to(rgba(232, 127, 59, 0.6)));
    background: linear-gradient(to left, rgba(6, 23, 56, 0.6), rgba(232, 127, 59, 0.6));
    z-index: -1
}

.single-banner h2 {
    font-size: 38px;
    margin-bottom: 15px;
    color: var(--white);
    text-transform: uppercase
}

@media (max-width: 767px) {
    .single-banner {
        padding: 60px 0px
    }

    .single-banner h2 {
        font-size: 32px;
        margin-bottom: 12px
    }
} */

.single-banner {
    background: #f3f3f3 !important;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    width: 100%;
    border-bottom: solid 1px #eeeeee;
    margin-bottom: 0px;
    margin: 0px auto;
    display: block !important;
}


/* range slider */
.range .price-filter {
    display: block;
    margin-top: 20px;
}

.range #slider-range {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    height: 4px;
    border-radius: 0px;
    background: var(--primary);
    color: var(--primary);
}

.range .price-filter-inner .caption,
.range .price-filter-inner .caption strong {
    font-size: 14px;
    font-weight: normal;
}

/* sort by Product */
.shop-product-fillter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 30px;
}

.shop-product-fillter.style-2 {
    padding-bottom: 20px;
    border-bottom: 1px solid #ececec;
}

.shop-product-fillter .sort-by-product-area {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.shop-product-fillter .sort-by-product-area .sort-by-cover {
    position: relative;
    margin-right: 1rem;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fff;
    border: 1px solid #f7f8f9;
    color: #777;
    padding: 9px 16px;
    border-radius: 10px;
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
    cursor: pointer;
    border: 1px solid #ececec;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .nice-select {
    border: none;
    padding-left: 0;
    height: inherit;
    line-height: normal;
    position: static;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap:hover {
    -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by i {
    margin-right: 10px;
    font-size: 14px;
    color: #ababab;
    position: relative;
    top: 1px;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by span {
    font-size: 13px;
    font-weight: 500;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by-dropdown-wrap span,
.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .btn {
    font-size: 13px;
    font-weight: 500;
    color: #7E7E7E;
}

.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .sort-by-dropdown-wrap span i,
.shop-product-fillter .sort-by-product-area .sort-by-product-wrap .btn i {
    font-size: 15px;
    color: #7E7E7E;
    margin-left: 10px;
    position: relative;
    top: 2px;
}

.sort-by-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 99;
    right: 0;
    padding: 16px 0 21px;
    background: #fff;
    border: 0;
    border-radius: 5px;
    visibility: hidden;
    opacity: 0;
    min-width: 100%;
    -webkit-box-shadow: 0 -3px 23px rgba(0, 0, 0, 0.06);
    box-shadow: 0 -3px 23px rgba(0, 0, 0, 0.06);
    color: #7E7E7E;
    font-weight: 500;
}

.sort-by-dropdown.show {
    opacity: 1;
    visibility: visible;
}

.sort-by-dropdown ul li {
    display: block;
}

.sort-by-dropdown ul li a {
    font-weight: 500;
    font-size: 13px;
    padding: 5px 30px;
    display: block;
    position: relative;
    color: #7E7E7E;
}

.sort-by-dropdown ul li a.active::before {
    content: "\f00c";
    position: absolute;
    top: 5px;
    left: 10px;
    font-size: 12px;
    color: var(--primary);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.sort-by-dropdown ul li a.active:hover::before {
    color: #fff;
}

.sort-by-dropdown ul li a:hover {
    background-color: var(--primary);
    color: #ffffff;
}

@media only screen and (max-width: 575px) {
    .shop-product-fillter {
        display: block;
    }

    .shop-product-fillter .sort-by-product-area {
        width: 100%;
    }

    .shop-product-fillter .sort-by-product-area .sort-by-cover {
        text-align: center;
        margin-right: 14px;
    }

    .shop-product-fillter .sort-by-product-area .sort-by-cover:last-child {
        margin-right: 0;
    }

    .shop-product-fillter .sort-by-product-area .filters .sort-by-product-wrap{
        padding: 0;
    }
    .shop-product-fillter .sort-by-product-area .filters .sort-by-product-wrap .btn{
        border: none;
        padding: 9px 10px;
        cursor: pointer;
    }

    .shop-product-fillter .filters .sort-by-product-area .sort-by-product-wrap .btn i {
        color: #ffffff;
        margin-right: 0;
        margin-left: 0;
    }

    .shop-product-fillter .filterCollectionFullwidth {
        margin-top: 15px;
    }

    .shop-product-fillter .filterCollectionFullwidth .btn span{
        color: #ffffff;
        font-family: "Font Awesome 5 Free";
        font-size: 14px;
    }

    .shop-product-fillter .filterCollectionFullwidth .btn span::before{
        content: "\f0b0";
        
        
    }

}

.offcanvas-bottom {
    visibility: visible !important;
    opacity: 1;
    border: none;
    position: relative;
    display: inline-block;
    transform: translateY(0px);
    height: auto;
    background-color: transparent;
    z-index: 1;
}

.offcanvas-header{
    display: none;
}

/* .offcanvas-body{
    padding: 0;
} */

.offcanvas-backdrop .overlay-widget {
    background: #000;
    z-index: 1;
    display: block;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: .7;
}

@media only screen and (max-width: 991px){
    /* .offcanvas-backdrop aside.sidebar-filter{
        display: block !important;
    }
    .offcanvas {
        background-color: #ffffff;
    } */
    .offcanvas-header{
        display: flex;
    } 

    .offcanvas {
        position: fixed;
        bottom: 0;
        z-index: 1050;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        background-color: #fff;
        background-clip: padding-box;
        outline: 0;
        transition: transform .3s ease-in-out;
    }
    
    /* .offcanvas-bottom {
        height: 100vh;
    } */

    

    .offcanvas-bottom {
        height: 100vh;
        max-height: 100%;
        border-top: 1px solid rgba(0,0,0,.2);
        transform: translateY(100%);
    }

    /* .offcanvas-body{
        padding: 1rem;
    } */

    .offcanvas-backdrop aside.sidebar-filter{
        display: block !important;
    }
}

.bottom-paginate {
    padding-top: 25px;
    border-top: 1px solid var(--border);
    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
}

.page-info {
    font-weight: 400;
    color: var(--text)
}

@media (max-width: 575px) {
    .bottom-paginate {
        margin-bottom: 30px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .page-info {
        margin-bottom: 15px
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .bottom-paginate {
        margin-bottom: 30px
    }
}

/* Summary cart */
.form-button button {
    width: 100%;
    height: 45px;
    font-size: 14px;
    font-weight: 500;
    line-height: 15px;
    border-radius: 8px;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primary);
}

.form-button button:hover {
    color: #ffffff;
}

.shopping-cart-header-section {
    border-left: none;
    padding: 10px;
    padding-left: 0;
}

.shopping-cart-header-section span {
    color: var(--primary);
}

.shopping-cart-header-section a {
    color: var(--text);
}

.shopping-summery .account-card .input-group-control .input-group-btn button i {
    background-color: var(--primary);
    color: #ffffff;
}


.shopping-summery .account-card .table-scroll {
    margin-bottom: 30px;
}

.shopping-summery .account-card .table-scroll:last-child {
    margin-bottom: 0;
}

.shopping-summery .account-card .table-scroll .productAction button i {
    width: 25px;
    height: 25px;
    line-height: 25px;
}

.shopping-summery tbody tr td {
    padding: 12px 15px;
}

.account-card .table-scroll .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.account-card .table-scroll .form-button button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


.apply-coupon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.apply-coupon input {
    height: 51px;
    border-radius: 10px 0 0 10px;
    background-image: url("../images/coupon.png");
    background-position: 20px center;
    background-repeat: no-repeat;
    padding-left: 50px;
    margin-bottom: 25px;
}

.apply-coupon button {
    min-width: 150px;
    height: 51px;
    color: #ffffff;
    border-radius: 0 10px 10px 0;
    background-color: var(--primary);
}

.intercom .apply-coupon input {
    width: 260px;
    margin-left: auto;
}

@media only screen and (max-width:767px) {
    .intercom .apply-coupon input {
        width: 100%;
    }
}

.checkout-check {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 25px;
    margin-top: 50px;
}

.checkout-check input {
    width: 15px;
    height: 15px;
    margin-right: 10px;
    margin-top: 4px;
    cursor: pointer;
}

.checkout-check label {
    line-height: 22px;
}

.checkout-check label a {
    color: var(--primary);
}

@media (max-width:991px) {
    .checkout-check {
        margin-top: 20px;
    }
}

/* no-cart page css */

.empty-cart #cart-animation {
    max-width: 200px;
    height: 200px;
    margin: 0 auto;
    padding: 20px;
}

.empty-cart .emptycart-container {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.empty-cart .emptycart-heading {
    color: var(--primary);
    font-size: 24px;
    font-weight: 600;
    margin: 0px;
}

.empty-cart .emptycart-content {
    color: #333;
    font-size: 16px;
    margin: 4px 0px 30px;
    font-weight: 500;
}

.empty-cart .emptycart-shooping-btn {  
    padding: 8px 20px;
    color: var(--white);
    background: var(--primary);
    border: 1px solid var(--primary);
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
}
.empty-cart .heading-sec h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #151515; 
}
.empty-cart .heading-sec {
    position: relative;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: solid 1px #f2f2f2;
}
.empty-cart .heading-sec::after {
    content: '';
    width: 180px;
    height: 2px;
    background: var(--primary);
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
}
@media (max-width: 820px) {
    .empty-cart .emptycart-shooping-btn {
        align-items: center;
        justify-content: center;
        display: inline-block;
        margin: 0 auto;
    }
    .empty-cart .emptycart-container {
        display: block;
        text-align: center;
    }
    .empty-cart .emptycart-heading {
        text-align: center;
    }
    .empty-cart .emptycart-content {
        text-align: center;
    }
}

@media (max-width: 480px) {
    .empty-cart .emptycart-heading {
        font-size: 20px;
    }
    .empty-cart .emptycart-content {
        font-size: 14px;
    }
}

/* cart page css */
.cart-area,
.item-area {
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.cart-area:last-child,
.item-area:last-child {
    border-bottom: none;
    padding-bottom: 0px;
}

.cart-area .cart-details:not(:last-child) {
    /* margin: 0 0 2rem 0; */
    border-bottom: 1px solid #d4d4d4;
    /* padding: 0 0 3rem 0; */
}

.cart-area .cart-details:last-child {
    margin: 0;
    border: none;
    padding: 0;
}

.cart-area .cart-details .cart-item,
.item-area .item-details .card-item {
    padding: 13px 0px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-area .cart-details .cart-item span.cart-head,
.item-area .item-details .card-item span.item-head {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
}

.cart-area .cart-details .cart-item span.c-items {
    border-bottom: 1px solid #000;
    margin-bottom: 3px;
}

.cart-area .cart-details .cart-all-pro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

/* .cart-area .cart-details .cart-all-pro:not(:last-child) {
    border-bottom: 1px solid #efefef;
    padding-bottom: 20px;
    padding-top: 20px;
} */

.cart-area .cart-details .cart-all-pro {
    border-bottom: 1px solid #efefef;
    padding-bottom: 20px;
    padding-top: 20px;
}

.cart-area .cart-details .cart-all-pro:last-child {
    border-bottom: none;
}

.cart-area .cart-details .cart-all-pro .custome-checkbox {
    width: 3%;
}

.item-area .item-details .item-all-pro {
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(var(--light-border), 1);
    margin-bottom: 25px;
}

.item-area .item-details .item-all-pro:last-child {
    border: none;
    padding-bottom: 0;
}

.cart-area .cart-details .cart-all-pro .cart-pro {
    width: 50%;
    display: flex;
    align-items: center;
    gap: 20px;
}

.cart-area .cart-details .cart-all-pro .cart-pro .cart-pro-image img {
    -o-object-fit: cover;
    object-fit: cover;
    /* width: calc(-13.2px + 6.5vw); */
}

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details {
    width: calc(100% - 130px);
}

/* .item-area .item-details .item-all-pro .item-pro .item-pro-image {
    margin-right: 0;
    gap: 10px;
} */

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details h4,
.item-area .item-details .item-all-pro .item-pro .card-details h4 {
    font-size: 16px;
    line-height: 1.2;
}

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details span.pro-size {
    margin-top: 10px;
    display: block;
    line-height: 1;
}

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details span.pro-size span.size {
    font-weight: 600;
}

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details span.pro-shop {
    margin-top: 10px;
    display: block;
    line-height: 1;
}

.cart-area .cart-details .cart-all-pro .cart-pro .pro-details span.cart-pro-price {
    margin-top: 10px;
    display: block;
    line-height: 1;
}

.cart-area .cart-details .cart-all-pro .qty-item {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-area .cart-details .cart-all-pro .qty-item .productAction input {
    width: 50px;
}

.cart-area .cart-details .cart-all-pro .qty-item .center a.pro-remove,
.item-area .item-details .item-all-pro .del-item .center a.item-remove {
    color: var(--primary);
    margin-top: 15px;
    text-decoration: underline;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-area .item-details .item-all-pro .del-item .center a.item-remove {
    margin-top: 0;
}

@media only screen and (max-width: 767px) {

    .mypayment-container .row>[class*="col-md"],
    .mypayment-container .row>[class^="col-md"] {
        width: 50%;
    }
}

.cart-area .cart-details .cart-all-pro .all-pro-price {
    width: 20%;
    text-align: right;
    display: flex;
    justify-content: end;
}

.cart-area .cart-details .cart-all-pro .all-pro-price.myOrders {
    width: 50%;
}

.cart-area .cart-details .cart-all-pro .all-pro-price span {
    font-weight: 500;
}

@media (max-width: 991px) {
    .cart-area .cart-details .cart-all-pro .custome-checkbox {
        width: 5%;
    }

    .cart-area .cart-details .cart-all-pro .qty-item {
        width: 60%;
    }

    .cart-area .cart-details .cart-all-pro .all-pro-price {
        width: 40%;
    }

    .order-content .cart-area .cart-details .cart-all-pro .qty-item {
        width: 50%;
    }

    .order-content .cart-area .cart-details .cart-all-pro .all-pro-price {
        width: 50%;
    }

    .cart-area .cart-details .cart-all-pro .qty-item .center {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .cart-area .cart-details .cart-all-pro .qty-item .plus-minus {
        margin-top: 0px;
    }

    .cart-area .cart-details .cart-all-pro .qty-item .center a.pro-remove {
        margin-top: 0px;
    }

    .shopping-summery .cart-action {
        margin-bottom: 30px;
    }

    .shopping-summery .cart-action .btn {
        padding: 14px 20px;
    }

}

@media (max-width: 991px) {
    .cart-area .cart-details .cart-all-pro .cart-pro .cart-pro-image img {
        -o-object-fit: cover;
        object-fit: cover;
        width: calc(-13.2px + 8.5vw);
    }
    .cart-area .cart-details .cart-all-pro .cart-pro {
        width: 100%;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(var(--light-border), 1);

    }

    .cart-area .cart-details .cart-all-pro .all-pro-price.myOrders {
        width: 100%;
        justify-content: center;
    }

    .cart-area .cart-details .cart-all-pro .all-pro-price span {
        float: none !important;
    }
}

@media (max-width: 767px) {
    .cart-area .cart-details .cart-item span.cart-head {
        font-size: 14px;
        font-weight: 600;
    }

    .cart-area .cart-details .cart-all-pro .custome-checkbox {
        width: 7%;
    }

    .cart-area .cart-details .cart-all-pro .cart-pro .cart-pro-image {
        
    }

    .cart-area .cart-details .cart-all-pro .cart-pro .cart-pro-image a img {
        width: calc(-13.2px + 18.5vw);
    }

    .cart-area .cart-details .cart-all-pro .cart-pro .pro-details {
        width: 70%;
    }

    .cart-area .cart-details .cart-all-pro .cart-pro .pro-details h4 {
        font-size: 14px;
    }

    .cart-area .cart-details .cart-all-pro .cart-pro .pro-details span.pro-shop {
        font-size: 13px;
    }

    .cart-area .cart-details .cart-all-pro .cart-pro .pro-details span.cart-pro-price {
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    .cart-area .cart-details .cart-all-pro .cart-pro .cart-pro-image a img {
        width: calc(-13.2px + 25.5vw);
    }
}

@media (max-width: 360px) {
    .shopping-summery .cart-action .btn {
        padding: 14px 10px;
    }
}

.cart-total {
    position: sticky;
    top: 0px;
    display: inline-block;
    width: 100%;
}

.cart-total .cart-price {
    padding-top: 15px;
    padding-bottom: 14px;
    margin-bottom: 26px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-totals .cart-total span {
    color: #222;
    font-weight: 400;
}

.cart-total .cart-price span.total,
.cart-total .cart-shipping span.total {
    font-weight: 600;
}

.cart-total .cart-shipping {
    padding-top: 15px;
    padding-bottom: 14px;
    margin-bottom: 26px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-totals .cart-total .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cart-totals .cart-total .form-button button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    line-height: 1.2;
    align-items: center;
}

.cart-totals .cart-total .btn i {
    font-size: 14px;
    color: #ffffff;
}

.cart-total .shop-total {
    margin-top: 26px;
    padding: 14px 0px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-total .shop-total span.total-amount {
    font-weight: 600;
    color: var(--primary);
}

.cart-total a.check-link {
    color: var(--primary);
    margin-top: 25px;
    text-decoration: underline;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* .coupon-code-btn .intercom {
    -webkit-box-align: center;
    align-items: center;
    background: var(--primary);
    border-radius: 2rem;
    bottom: 100px;
    box-shadow: rgba(27, 39, 51, 0.04) 0px 2px 4px, rgba(27, 39, 51, 0.08) 0px 8px 12px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: flex;
    flex-flow: wrap;
    font-size: 0.875rem;
    -webkit-box-pack: center;
    justify-content: center;
    line-height: 1.5rem;
    gap: 0.5rem;
    padding: 8px 20px;
    position: fixed;
    right: 20px;
    text-decoration: none;
    z-index: 1;
} */

/* order complete page css */
.order-area .order-price ul.total-order {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-area .order-price ul.total-order li:last-child {
    text-align: right;
}

.order-area .order-price ul.total-order li span.order-no {
    display: block;
    font-weight: 600;
}

.order-area .order-price ul.total-order li span.order-date {
    color: #bbbbbb;
    margin-top: 5px;
}

.order-area .order-price ul.total-order li span.total-price {
    display: block;
    text-align: right;
    font-weight: 600;
}

.order-area .order-price ul.total-order li span.amount {
    margin-top: 5px;
    text-align: right;
    font-weight: 600;
}

.order-area .order-details {
    text-align: center;
}

.order-area .order-details span.order-i {
    font-size: 30px;
    line-height: 1;
}

.order-area .order-details span.order-s {
    display: block;
    margin-top: 8px;
}

.order-area .order-details a.tracking-link {
    margin-top: 24px;
}

.order-area .order-details a.tracking-link:hover {
    background-color: transparent;
    color: #000;
}

.order-area .order-delivery {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.order-area .order-delivery ul.delivery-payment {
    display: flex;
    flex-wrap: wrap;
    margin: -30px 0px 0px -30px;
}

.order-area .order-delivery ul.delivery-payment li {
    width: calc(50% - 30px);
    margin: 30px 0px 0px 30px;
    border-right: 1px solid #eee;
}

.order-area .order-delivery ul.delivery-payment li:last-child {
    border-right: none;
}

.order-area .order-delivery ul.delivery-payment li h5 {
    font-size: 16px;
}

.order-area .order-delivery ul.delivery-payment li p {
    margin-top: 6px;
}

.order-area .order-delivery ul.delivery-payment li.delivery p {
    font-weight: 600;
}

.order-area .order-delivery ul.delivery-payment li.pay p {
    color: #bbb;
}

.order-area .order-delivery ul.delivery-payment li span.order-span {
    display: block;
    margin-top: 9px;
}

.order-area .order-delivery ul.delivery-payment li span.order-span:first-of-type {
    margin-top: 7px;
}

.order-area .order-delivery ul.delivery-payment li span.p-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-area .order-delivery ul.delivery-payment li span.p-label span.o-price {
    font-weight: 600;
}


/* Step Wizard */
#multi-step-track-container {
    margin-top: 2rem;
}
ul.track-stepper {
    counter-reset: section;
    margin-bottom: 3rem;
}
ul.track-stepper .track-stepper-circle {
    position: relative;
}
ul.track-stepper .track-stepper-circle span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

ul.track-stepper .track-stepper-list .track-stepper-circle span svg path {
    /* fill: #6c757d; */
}
ul.track-stepper .track-stepper-active .track-stepper-circle span svg path,
ul.track-stepper .track-stepper-completed .track-stepper-circle span svg path {
    fill: var(--white);
}
.track-stepper-horizontal {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
ul.track-stepper > li:not(:last-of-type) {
    margin-bottom: 0.625rem;
    -webkit-transition: margin-bottom 0.4s;
    -o-transition: margin-bottom 0.4s;
    transition: margin-bottom 0.4s;
}
.track-stepper-horizontal > li:not(:last-of-type) {
    margin-bottom: 0 !important;
}
.track-stepper-horizontal li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.track-stepper-horizontal li:not(:last-child):after {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1px;
    content: "";
    top: 32%;
}
.track-stepper-horizontal li:after {
    background-color: #dee2e6;
}
.track-stepper-horizontal li.track-stepper-completed:after {
    background-color: var(--green);
}
.track-stepper-horizontal li:last-child {
    flex: unset;
}
ul.track-stepper li a .track-stepper-circle {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin-right: 0;
    line-height: 1.7rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.38);
    border-radius: 50%;
}
.track-stepper .track-stepper-active .track-stepper-circle {
    background-color: var(--primary) !important;
    color: #fff;
}
.track-stepper .track-stepper-active .label {
    color: var(--primary) !important;
}
.track-stepper .track-stepper-active .track-stepper-circle:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
}
.track-stepper .track-stepper-unfinished .track-stepper-circle {
    background-color: #f8f7ff;
}
.track-stepper .track-stepper-completed .track-stepper-circle {
    background-color: var(--green) !important;
    color: #fff;
}
.track-stepper .track-stepper-completed .label {
    color: var(--green) !important;
}
.track-stepper .track-stepper-completed .track-stepper-circle:hover {
    background-color: var(--green) !important;
    color: #fff !important;
}
.track-stepper .track-stepper-active span.text-muted {
    color: #fff !important;
}
.track-stepper .track-stepper-completed span.text-muted {
    color: #fff !important;
}
.track-stepper .label {
    font-size: 1rem;
    margin-top: 0.5rem;
}
.track-stepper a {
    cursor: default;
}

/* End Step Wizard */

.disputeModal .modal-dialog {
    max-width: 680px;
}

@media (max-width: 767px) {
    .disputeModal .modal-dialog {
        max-width: 100%;
    }
}

.disputeModal .modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
}

@media (min-width: 768px) {
    .disputeModal .modal-content {
        -webkit-box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
        box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
    }
}

/* Customer Login / Signup */

.userForm-logo {
    text-align: center;
    margin-bottom: 25px;
    z-index: 1;
}

.userForm-logo img {
    width: 200px
}

.userForm-card {
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 20px;
    background: var(--white);
    border: 1px solid var(--border)
}

.userForm-title {
    text-align: center;
    margin-bottom: 30px
}

.userForm-title h2 {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 5px;
    color: var(--primary)
}

.userForm-title p {
    text-transform: capitalize
}

.userForm-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.userForm-social {
    width: 100%
}

.userForm-social li {
    margin-bottom: 20px
}

.userForm-social li a {
    width: 100%;
    font-size: 15px;
    padding: 10px 0px;
    border-radius: 8px;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: capitalize;
    color: var(--white);
    background: var(--primary)
}

.userForm-social li a i {
    font-size: 16px;
    margin-right: 10px
}

.userForm-social li:last-child {
    margin-bottom: 0px
}

.userForm-social .facebook {
    background: var(--facebook)
}

.userForm-social .twitter {
    background: var(--twitter)
}

.userForm-social .google {
    background: var(--google)
}

.userForm-social .instagram {
    background: var(--instagram)
}

.userForm-divider {
    width: 1px;
    height: 240px;
    margin: 0px 50px;
    background: var(--border);
    position: relative;
    z-index: 1
}

.register-form .userForm-divider {
    height: 294px;
}

.userForm-divider p {
    width: 40px;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    margin: 0 auto;
    font-style: italic;
    line-height: 38px;
    border-radius: 50%;
    text-align: center;
    color: var(--gray);
    background: var(--white);
    border: 1px solid var(--border);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.userForm {
    width: 100%
}

.userForm .form-group,
#vendorForm .form-group {
    margin-bottom: 20px
}

/* .userForm .form-group.form-floating:last-child,
#vendorForm .form-group.form-floating:last-child {
    margin-bottom: 0;
} */

.form-button {
    text-align: center
}

.form-button button {
    line-height: 45px;
}

.form-button p {
    font-size: 15px;
    margin-top: 12px;
    text-transform: capitalize
}

.form-button p a {
    font-weight: 500;
    margin-left: 5px;
    color: var(--primary)
}

.form-button p a:hover {
    text-decoration: underline
}

.userForm-remind {
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    background: var(--white);
    border: 1px solid var(--border)
}

.userForm-remind p {
    font-size: 15px;
    text-transform: capitalize
}

.userForm-remind p a {
    font-weight: 500;
    margin-left: 5px;
    color: var(--primary)
}

.userForm-remind p a:hover {
    text-decoration: underline
}

.userForm-footer {
    text-align: center;
    margin-top: 25px;
    margin-bottom: 40px
}

.userForm-footer p {
    font-size: 14px;
    color: var(--gray)
}

.userForm-footer p a {
    color: var(--primary);
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s
}

.userForm-footer p a:hover {
    text-decoration: underline
}

.field-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--text);
}

@media (max-width: 575px) {
    .userForm-card {
        padding: 20px
    }
}

@media (max-width: 767px) {
    .userForm-group {
        display: inherit
    }

    .userForm-divider,
    .register-form .userForm-divider {
        width: 100%;
        height: 1px;
        margin: 50px 0px
    }
}

.back-top-home {
    position: relative;
    z-index: 1;
}

@media only screen and (max-width: 767px) {
    .back-top-home {
        margin-bottom: 30px;
        text-align: center;
    }
}

@media only screen and (max-width: 575px) {
    .back-top-home {
        margin-bottom: 20px;
    }
}

/* User dashboard */





/* Vendor Index */

.section-vbanner {
    background-image: url('../images/vbanner.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    color: white;
    height: 450px;
}

.section-vbanner .intro-text {
    padding-top: 100px;
    padding-bottom: 50px;
    color: #39404a;
    width: 46%;
}

.section-vbanner .intro-text .intro-lead-in {
    font-size: 3rem;
    letter-spacing: 1px;
    font-weight: 300;
    margin-bottom: 25px;
    line-height: 1.1;
}

.section-vbanner .intro-text .intro-heading {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .section-vbanner .intro-text {
        padding-top: 150px;
        padding-bottom: 100px;
    }

    .section-vbanner .intro-text .intro-lead-in {
        font-size: 3.6rem;
        letter-spacing: 1px;
        font-weight: 300;
        line-height: 40px;
        margin-bottom: 25px;
    }

    .section-vbanner .intro-text .intro-heading {
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 700;
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
}


.service-heading {
    margin: 15px 0;
    text-transform: none;
}

.timeline {
    list-style: none;
    padding: 0;
    position: relative;
}

.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: "";
    width: 2px;
    background-color: #f1f1f1;
    left: 40px;
    margin-left: -1.5px;
}

.timeline>li {
    margin-bottom: 50px;
    position: relative;
    min-height: 50px;
}

.timeline>li:before,
.timeline>li:after {
    content: " ";
    display: table;
}

.timeline>li:after {
    clear: both;
}

.timeline>li .timeline-panel {
    width: 100%;
    float: right;
    padding: 0 20px 0 100px;
    position: relative;
    text-align: left;
}

.timeline>li .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}

.timeline>li .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}

.timeline>li .timeline-image {
    left: 0;
    margin-left: 0;
    width: 80px;
    height: 80px;
    position: absolute;
    z-index: 100;
    background-color: var(--green);
    color: white;
    border-radius: 100%;
    border: 7px solid #f1f1f1;
    text-align: center;
}

.timeline>li .timeline-image h4 {
    font-size: 10px;
    margin-top: 12px;
    line-height: 14px;
}

.timeline>li.timeline-inverted>.timeline-panel {
    float: right;
    text-align: left;
    padding: 0 20px 0 100px;
}

.timeline>li.timeline-inverted>.timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}

.timeline>li.timeline-inverted>.timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}

.timeline>li:last-child {
    margin-bottom: 0;
}

.timeline .timeline-heading h4 {
    margin-top: 0;
    color: inherit;
}

.timeline .timeline-heading h4.subheading {
    text-transform: none;
}

.timeline .timeline-body>p,
.timeline .timeline-body>ul {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .timeline:before {
        left: 50%;
    }

    .timeline>li {
        margin-bottom: 100px;
        min-height: 100px;
    }

    .timeline>li .timeline-panel {
        width: 41%;
        float: left;
        padding: 0 20px 20px 30px;
        text-align: right;
    }

    .timeline>li .timeline-image {
        width: 100px;
        height: 100px;
        left: 50%;
        margin-left: -50px;
    }

    .timeline>li .timeline-image h4 {
        font-size: 13px;
        margin-top: 16px;
        line-height: 18px;
    }

    .timeline>li.timeline-inverted>.timeline-panel {
        float: right;
        text-align: left;
        padding: 0 30px 20px 20px;
    }
}

@media (min-width: 992px) {
    .timeline>li {
        min-height: 150px;
    }

    .timeline>li .timeline-panel {
        padding: 0 20px 20px;
    }

    .timeline>li .timeline-image {
        width: 150px;
        height: 150px;
        margin-left: -75px;
    }

    .timeline>li .timeline-image h4 {
        font-size: 18px;
        margin-top: 30px;
        line-height: 26px;
    }

    .timeline>li.timeline-inverted>.timeline-panel {
        padding: 0 20px 20px;
    }
}

@media (min-width: 1200px) {
    .timeline>li {
        min-height: 170px;
    }

    .timeline>li .timeline-panel {
        padding: 0 20px 20px 100px;
    }

    .timeline>li .timeline-image {
        width: 170px;
        height: 170px;
        margin-left: -85px;
    }

    .timeline>li .timeline-image h4 {
        margin-top: 40px;
    }

    .timeline>li.timeline-inverted>.timeline-panel {
        padding: 0 100px 20px 20px;
    }
}

/* faq */

.faqHeader {
    font-size: 27px;
    margin: 20px;
    font-weight: 400;
}

.form-login-body {
    
    height: 100vh;
    height: 100%;
}

.form-login-body::before {
    content: '';
    background-color: rgba(0, 0, 0, 0.2);
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    /* z-index: -1; */
}

.form-login-body::after {
    content: '';
    background-color: rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    /* z-index: -1; */
}

@media only screen and (max-width:575px) {
    .form-login-body {
        height: 100%;
    }
}

@media only screen and (max-width:575px) {
    .form-login-body {
        padding-top: 20px;
    }
}


/* Track Modal Overlay */

.modalbar {
    opacity: 0;
    padding: 50px;
    position: absolute;
    top: 50%;
    overflow: unset;
    z-index: 1100;
    -webkit-transition: opacity 600ms linear 600ms;
    -moz-transition: opacity 600ms linear 600ms;
    -ms-transition: opacity 600ms linear 600ms;
    -o-transition: opacity 600ms linear 600ms;
    transition: opacity 600ms linear 600ms;
}

@media (max-width: 575px) {
    .modalbar {
        width: 100% !important;
    }

    .btn-proceed.flat,
    .btn-cancel.flat {
        padding: 10px 30px;
    }
}

.modal_info {
    background: #FCF9F2;
    padding: 40px 20px;
}

.modal_info h1 {
    display: block;
    font-size: 25px;
    line-height: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    padding-bottom: 15px;
}

.modal_info span::before {
    content: none;
}

.confirm-icon {
    color: #3BB77E;
    margin-right: 8px;
}

.modal_info p {
    margin-bottom: 20px;
}

.confirm-buttons {
    text-align: right;
}

.modal_overlay {
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    left: 0;
    opacity: 0;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 900;
    -webkit-transition: opacity 200ms linear;
    -moz-transition: opacity 200ms linear;
    -ms-transition: opacity 200ms linear;
    -o-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
}

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

.conceal {
    visibility: visible;
}

.btn_container {
    height: 100%;
    text-align: center;
}

.btn_container:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 0;
}

.confirm {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    white-space: normal;
    text-align: center;
    padding: .425rem 1rem;
    z-index: 1000;
    -webkit-transition: opacity 100ms linear;
    -moz-transition: opacity 100ms linear;
    -ms-transition: opacity 100ms linear;
    -o-transition: opacity 100ms linear;
    transition: opacity 100ms linear;
}

a.confirm.load {
    opacity: 0;
}

button.modal_close {
    background: #363D4E;
    border: none;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    color: #FFFFFF;
    cursor: pointer;
    outline: none;
    width: 52px;
    height: 52px;
    position: absolute;
    right: 30px;
    top: 30px;
    -webkit-transition: -webkit-transform 600ms;
    -moz-transition: -moz-transform 600ms;
    -ms-transition: -ms-transform 600ms;
    -o-transition: -o-transform 600ms;
    transition: transform 600ms;
}

button.modal_close:hover {
    background: #3E465A;
    -webkit-transform: rotate(360deg) scale(1.10);
    -moz-transform: rotate(360deg) scale(1.10);
    -ms-transform: rotate(360deg) scale(1.10);
    -o-transform: rotate(360deg) scale(1.10);
    transform: rotate(360deg) scale(1.10);
    -webkit-transition: -webkit-transform 600ms;
    -moz-transition: -moz-transform 600ms;
    -ms-transition: -ms-transform 600ms;
    -o-transition: -o-transform 600ms;
    transition: transform 600ms;
}

button.modal_close span,
button.modal_close span:before,
button.modal_close span:after {
    background: #FFFFFF;
    content: '';
    cursor: pointer;
    display: block;
    height: 2px;
    position: absolute;
    width: 20px;
}

button.modal_close span:first-child {
    background: none;
    bottom: 0;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
}

button.modal_close span:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

button.modal_close span:after {
    -webkit-transform: translateY(-2px) rotate(-45deg);
    -moz-transform: translateY(-2px) rotate(-45deg);
    -ms-transform: translateY(-2px) rotate(-45deg);
    -o-transform: translateY(-2px) rotate(-45deg);
    transform: translateY(-2px) rotate(-45deg);
    top: 2px;
}




/*--------------------------------------------------------------
# User Dashboard
---------------------------------------------------------------*/

.category-option {
    position: sticky;
    top: 100px;
    z-index: 1
}

.back-btn {
    display: none;
}

.sidebar-static {
    width: 100%;
    max-width: 22rem;
    background-color: rgb(255, 255, 255);
    padding: 1.875rem;
    position: relative;
}

.sidebar-static .accordion .accordion-item {
    background: none;
    border: none;
    border-radius: 0;
}

.sidebar-static .accordion .accordion-item .accordion-button::after {
    transform: rotate(-90deg);
}

.sidebar-static .accordion .accordion-item .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

.sidebar-static .accordion .accordion-item .side-active a {
    color: var(--primary-rgb);
}

.link-arrow .accordion-button::after {
    content: none;
}

.file-upload {
    display: none;
}

.image-thumbnail-preview {
    border: 1px solid #dee2e6;
    width: 90px;
    height: 90px;
}

.account-card .nav-link-style span {
    font-size: 18px;
    position: absolute;
    right: 15px;
}

@media only screen and (max-device-width: 991px) {
    .user-setting{
        display: none;
    }

    .back-btn {
        display: block;
    }
    .sidebar-static{
        max-width: 100%;
    }
}

/* User Profile Right Content */
.feature-box {
    color: #7b858a;
    font-size: 1.5rem;
    line-height: 2;
    margin-bottom: 4rem;
}

.dashboard-content .feature-box {
    color: #7b858a;
    font-size: 1.5rem;
    line-height: 2;
    padding-top: 2rem;
    margin-bottom: 2rem;
    border: 2px solid #e7e7e7;
}

.dashboard-content .feature-box i {
    margin-bottom: 0.5rem;
    color: #d3d3d4;
    font-size: 4rem;
    display: inline-block;
    transition: transform 0.35s;
}

.dashboard-content .feature-box:hover i {
    transform: scale(1.15);
    transition: transform 0.35s
}

.feature-box-content {
    color: #7b858a;
    font-size: 1.5rem;
    line-height: 1.9;
    padding-left: 10px;
    padding-right: 10px;
}

.feature-box h3 {
    margin-bottom: .8745rem;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: 0;
}

@media only screen and (max-width: 991px) {
    .feature-box h3{
        font-size: 1rem;
    }
}

.account-sub-title {
    margin-top: 0.6rem;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    letter-spacing: -0.01em;
}

.account-sub-title i {
    font-size: 3rem;
    color: #d3d3d4;
}

.account-content {
    margin-top: 2.1rem;
}

@media only screen and (max-width: 991px) {
    .account-content {
        margin-top: 0;
    }
}

.account-content .form-group p {
    font-size: 0.875rem;
    margin-top: 3px;
}

.table.table-downloads,
.table.table-order {
    margin-bottom: 1px;
    font-size: 14px;
}

.download-table-container p {
    margin-bottom: 2.1rem;
}

.order-table-container .tab-descrip .cart-area .cart-item {
    justify-content: inherit;
}

.change-password {
    padding: 2rem 2.2rem 1rem;
    border: 2px solid #e7e7e7;
}

.change-password h3 {
    font-size: 1.2rem;
    font-family: "Open Sans", sans-serif;
}

.account-content .form-footer button i {
    font-size: 17px;
    line-height: 20px;
    margin-right: 2px;
}

.box-head {
    margin-bottom: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media only screen and (max-width: 767px) {
    .box-head {
        margin-bottom: 0;
    }
}

.save-details-box .save-details {
    border: 1px solid #eff2f7;
    padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border-radius: 5px;
    background-color: #eff2f7;
    position: relative;
}

.save-details-box .save-details .save-name {
    position: relative;
    margin-bottom: 20px;
}

.save-details-box .save-details .save-address p {
    line-height: 1.4;
    letter-spacing: 1px;
    margin: 0 0 calc(2px + (5 - 2) * ((100vw - 320px) / (1920 - 320)));
}

.save-details-box .save-details .mobile p.mobile {
    margin: 20px 0 6px;
    padding-bottom: 6px;
    line-height: 1.4;
}

.save-details-box .save-details .button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: -5px;
}

.save-details-box .save-details .button a {
    width: 100%;
    margin: 5px;
    background-color: #fff;
    color: #212529;
    border: none;
}

/* .account-content label {
    margin-bottom: 0.7rem;
    color: #777;
    font-family: "Open Sans",sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
} */

.save-details .nav-tabs {
    background: none;
    flex-wrap: inherit;
    padding: 0;
}

.size-filter.list-filter li {
    border: 1px solid var(--border);
    border-radius: 5px;
    margin-right: 10px;
}

.size-filter.list-filter li a:hover {
    background-color: transparent;
    color: #7E7E7E;
}

.size-filter.list-filter li.active a:hover {
    background-color: var(--primary);
    color: #ffffff;
}

.size-filter.list-filter li.office.active a {
    background-color: var(--red);
    border-color: var(--red);
}

.size-filter.list-filter li.home.active a {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Order Detail */

.mini-card {
    padding: 27px 30px 30px 30px;
    border-radius: 20px;
    border: 1px solid var(--primary);
}

.order-info-wrapper {
    padding: 25px;
}

.order-info-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
}

.order-info-list ul li,
.order-info-list ul span {
    list-style: none;
    padding: 15px 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.order-info-list ul span{
    padding-bottom: 0;
}

.order-info-list ul li:not(:last-child) {
    border-bottom: 1px solid #E0E2E3;
}

.order-info-list ul li span {
    font-size: 15px;
    color: var(--black);
    font-weight: 500;
}

/* My Review */

/* .myreview-container .myreviews-groupheader-right {
    width: 33.33333333%;
    padding: 0 15px;
} */

.myreview-container,
.mypayment-container {
    padding: 30px;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
}

@media only screen and (max-width: 420px) {
    .myreview-container,
    .mypayment-container {
        padding: 15px;
    }
}

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

@media only screen and (max-width: 767px) {
    .myreview-container .myreview-item {
        /* display: none; */
    }
}


.item-block-review {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(var(--light-border), 1);
    padding: 20px 0;
}

.myreview-container .item-all-pro .item-pro {
    margin-top: 1rem;
    margin-bottom: 0.625rem;
    gap: 20px;
}

.myreview-container .item-all-pro .item-block-review .item-pro {
    align-items: start;
    display: flex;
    gap: 15px;
    width: 100%;
}

.myreview-container .item-all-pro .item-block-review .item-pro .item-pro-image img {
    -o-object-fit: cover;
    object-fit: cover;
    width: 60px;
    /* width: calc(-13.2px + 3.5vw); */
    
}

.myreview-container .item-all-pro .item-block-review .item-pro .card-details {
    width: calc(100% - 126px);
}

@media (max-width: 640px) {
    .myreview-container .item-all-pro .item-block-review .item-pro {
        display: inline-block;
    }
    .myreview-container .item-all-pro .item-block-review .item-pro .item-pro-image img {
        margin-bottom: 10px;
    }
    .myreview-container .item-all-pro .item-block-review .item-pro .card-details {
        width: 100%;
    }
}

.myreview-container .item-all-pro .item-pro .form-field {
    margin: 10px 0;
}

.item-area .myreview-container .item-all-pro {
    margin-bottom: 0;
}

.myreview-container .item-block-reviewRating {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 15px 10px 0px;
}

@media (max-width:640px) {
    .product-rate.review-rating {
        display: flex !important;
        align-items: center;
        margin: 0 auto;
    }
}

.profile-uploader {
    display: table;
    vertical-align: middle;
    margin-top: 30px;
}

.title-header-content {
    height: 100%;
}

#imageUpload {
    display: none;
}

#profileImage {
    cursor: pointer;
}

#profile-container {
    width: 100px;
    height: 100px;
    overflow: hidden;
    /* -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%; */
}

.profile-uploader span {
    display: table-cell;
    font-size: 22px;
    font-weight: 700;
    vertical-align: middle;
    text-align: center;
    text-transform: capitalize;
    width: 100%;
}

#profile-container img {
    width: 100px;
    height: 100px;
}

.submit-review-container .btn-submit {
    width: 220px;
    /* height: 48px; */
}

/* Rating Button */

:root {
    --gl-star-color: #fdd835;
    --gl-star-size: 24px;
    --gl-tooltip-color: #fff;
}

@media screen and (min-width: 35em) {
    .gl-star-rating .gl-star-rating--stars>span {
        --gl-star-size: 30px;
    }

    .gl-star-rating .gl-star-rating--stars[aria-label]::after {
        --gl-tooltip-padding: .75em 1em;
    }
}

@media screen and (min-width: 42em) {
    .gl-star-rating .gl-star-rating--stars>span {
        --gl-star-size: 36px;
    }
}

@media screen and (min-width: 50em) {
    .gl-star-rating .gl-star-rating--stars>span {
        --gl-star-size: 42px;
    }
}

.gl-star-rating .gl-emote-bg {
    transition: fill 0.15s ease-in-out;
}

.gl-star-rating [data-value]:not(.gl-active) .gl-emote-bg {
    fill: #DCDCE6;
}

.gl-star-rating .gl-emote {
    transform: scale(.9);
    transition: transform 0.25s ease-in-out;
}

.gl-star-rating .gl-selected .gl-emote {
    transform: scale(1.1);
}

.star-rating + .nice-select {
    display: none;
}