@import "./font.css";


/*
 Global Css
*/
:root {
    --FontsBlack: FontsBlack;
    --FontsBlackItalic: FontsBlackItalic;
    --FontsBold: FontsBold;
    --FontsBoldItalic: FontsBoldItalic;
    --FontsMedium: FontsMedium;
    --FontsMediumItalic: FontsMediumItalic;
    --Regular: Regular;
    --RegularItalic: RegularItalic;
    --FontsLight: FontsLight;
    --FontsLightItalic: FontsLightItalic;
    --FontsThin: FontsThin;
    --FontsThinItalic: FontsThinItalic;
    --white: #FFFFFF;
    --black: #333333;
    --gary: #666666;
    --light-gary: #c3bfbf;
    --main-gradient: linear-gradient(to right, #f8735d, #f66a56, #f4614e, #f15747, #ef4d40);
    --main-color: #EF4D40;
    --main-color-hover: #c62f24;
    --hover-gradient: linear-gradient(to right, #d05039, #d24b37, #c74534, #cd4233, #c62f24);
    --body-color: #f5f5f6;
    --link-green: #70cd0c;
    --link-green-hover: #4a8f00;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.bg-container {
    background: var(--body-color);
    padding: 25px 0;
}

footer.bg-container {
    padding: 25px 0 0;
}

.main-content {}

body,
a,
p,
span,
div,
li,
strong,
small,
button,
input,
label {
    font-family: var(--Regular);
    font-size: 16px;
    line-height: 1.2rem;
    color: var(--black);
    font-smooth: initial;
    margin: 0;
}

ul,
ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a,
button {
    text-decoration: none;
    outline: none;
}

/* .container{
    max-width: 1200px !important;
} */

/* .right-touch-form .form-group,
.subscribe-form .form-group,
footer,
.product-details .form-group {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
} */
.form-group {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

/**
 *
 * Top header
 *
 */

.welcome-message {
    color: var(--gary);
    font-family: var(--Regular);
    font-size: 14px;
}

.top-header-dropdown-wrapper {
    display: flex;
    align-items: center;
}

.top-header-dropdown-wrapper li span {
    font-size: 14px;
    font-family: var(--Regular);
    cursor: pointer;
}

.top-header-dropdown-wrapper li:hover>span,
.top-header-dropdown-wrapper li:hover>a {
    color: var(--main-color);
}

.top-header-dropdown-wrapper li a {
    font-size: 14px;
    font-family: var(--Regular);
}

.top-header-dropdown-wrapper li:not(:first-child) {
    margin-left: 15px;
}

.main-header.mobile .modal-body {
    overflow: hidden !important;
}

#sidebar-left-category .modal-body {
    overflow: hidden !important;
}

/**
 *
 * Main header
 */
.shadow--bottom {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    padding-bottom: 20px;
}

.site_logo img {
    width: 100%;
    max-width: 60px;
}

.main-header.mobile {
    display: none;
}

/* MODAL FADE LEFT RIGHT BOTTOM */
/*Left*/
.modal.left.fade .modal-dialog {
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
    -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
    -o-transition: opacity 0.3s linear, left 0.3s ease-out;
    transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.show .modal-dialog {
    left: 0;
}

.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 100vw;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    -o-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}

.modal.left .modal-dialog {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
}

.modal-fullscreen {
    width: 90vw !important;
    max-width: none;
    height: 100%;
    margin: 0;
}

#sidebar-left-category .modal-fullscreen {
    width: 90vw !important;
}

#sidebar-left-category .modal-body {
    overflow-y: auto !important;
}


.modal.left .modal-content,
.modal.right .modal-content {
    min-height: 100vh;
    border: 0;
}

.hut--btn-close {
    background: var(--main-color);
    border: 0 !important;
    outline: none !important;
    padding: 10px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: 15px;
    right: -20px;
}

.hut--btn-close i {
    color: var(--white) !important;
    font-size: 20px;
}

.bottom--mobile-menu {
    display: none;
    position: fixed;
    background: var(--white);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 100%;
    min-height: 10px;
    bottom: 0;
    left: 0;
    z-index: 999;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    padding: 10px 20px;
}

.category-menu-bar button i,
.user-menu button i {
    font-size: 20px;
    color: var(--black);
}

.category-menu-bar button:hover i,
.user-menu button:hover i {
    color: var(--main-color);
}

.home-menu a {
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.4);
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    background: var(--white);
    margin-top: -80px;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}

.home-menu a:hover {
    background: var(--main-color);
    color: var(--white);
}

.home-menu a:hover i {
    color: var(--white);
}

.home-menu a i {
    font-size: 20px;
}

.toggle--btn {
    font-size: 25px;
    color: var(--black);
    border: none !important;
    outline: none !important;
    padding: 10px;
    background: transparent;
}

.dropdown-toggle::after {
    display: none !important;
}

.drop--icon {
    font-size: 12px;
}

.top-header.mobile {
    display: none !important;
}

/**
 *
 * Search form
 */

.search-nav-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    padding-left: 25px;
}

.search-nav-wrapper li span {
    color: var(--gary);
    font-family: var(--Regular);
    font-size: 14px;
}

.search-nav-wrapper li:not(:last-child) {
    margin-right: 20px;
}

.search-nav-wrapper li.search span {
    color: var(--main-color);
}

.search-nav-wrapper li:hover span {
    color: var(--main-color);
}

.search-input-box {
    display: flex;
    position: absolute;
    width: 100%;
    border: 1px solid var(--gary);
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    left: 0;
    top: 30px;
    z-index: 0;
}

.search-form-angle {
    background: rgb(255, 255, 255);
    z-index: 1;
    height: 15px;
    position: relative;
    display: inline-block;
    margin-left: 20px;
}

.search-form-angle i {
    font-size: 20px;
    width: 17px;
    margin-left: -2px;
    margin-top: -2px;
}

.search-input-box input {
    border: none;
    outline: none;
    padding: 12px 20px;
    background: transparent;
    width: 80%;
}

.search-input-box button {
    border: none;
    outline: none;
    padding: 12px 20px;
    background: transparent;
    width: 20%;
    background: var(--main-gradient);
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    color: var(--white);
    font-family: var(--FontsLight);
    font-size: 14px;
    border-left: 1px solid var(--gary);
}

/**
  *
  * Icon box
  */

.icon-box {
    display: flex;
    align-items: center;
}

.icon-box .icon img {
    width: 100%;
    max-width: 30px;
}

.icon-box-content {
    display: flex;
    flex-direction: column;
}

.icon-box-content a {
    font-size: 14px;
    font-family: var(--Regular);
    color: var(--black);
    padding-top: 2px;
}

.icon-box-content a:hover {
    color: var(--main-color);
}

.user--nav-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.user--nav-menu li:not(:last-child) {
    padding-right: 10px;
}

.user--nav-menu li a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user--nav-menu li a img {
    width: 100%;
    max-width: 23px;
}

.user--nav-menu li a span {
    color: var(--black);
    font-family: var(--FontsLight);
    font-size: 13px;
}

.user--nav-menu li a:hover span {
    color: var(--main-color);
}

.user--nav-menu li a:hover span.top--indicator {
    color: var(--white);
}

.cart-indicator {
    position: relative;
}

.cart-indicator .top--indicator {
    width: 20px;
    height: 20px;
    background-color: var(--main-color);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    position: absolute;
    top: -8px;
    right: -15px;
}

.cart-indicator .top--indicator:hover {
    color: var(--white) !important;
}

/**
 *
 * Categories side nav
 */

.categories-header {
    padding-bottom: 15px;
}

.categories-header h4 {
    font-size: 18px;
    font-family: var(--Regular);
    color: var(--main-color);
}

.categories-nav {
    max-width: 100%;
}

.categories-nav li {
    position: relative;
}

/**
 *
 * Sub menu
 */
.categories-sub-menu {
    background: var(--white);
    position: absolute;
    opacity: 0;
    visibility: hidden;
    z-index: 99;
    top: 15px;
    left: 102%;
    min-width: 700px;
    padding: 20px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
}

.categories-sub-menu ul {
    margin-bottom: 15px;
}

.sub--cat-title {
    font-size: 18px;
    margin-bottom: 12px;
    font-family: var(--FontsBold);
}

.categories-nav>li:hover>.categories-sub-menu {
    opacity: 1;
    visibility: visible;
}

.categories-sub-menu>li:hover>.categories-sub-menu {
    opacity: 1;
    visibility: visible;
}

.categories-nav li a {
    font-size: 14px;
    color: var(--gary);
    font-family: var(--Regular);
    padding: 6px 0;
    display: block;
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transition: transform 0.4s ease;
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -ms-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    padding-right: 8px;
    line-height: 1.2rem;
}

.categories-nav li a:hover {
    color: var(--main-color);
    transform: translateX(3px);
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -ms-transform: translateX(3px);
    -o-transform: translateX(3px);
}

.categories-nav li.has-sub-menu>a::after {
    content: '';
    border: solid var(--gary);
    border-width: 0 2px 2px 0;
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-block;
    padding: 2px;
    transform: rotate(45deg) translateY(-50%);
    -webkit-transform: rotate(45deg) translateY(-50%);
    -moz-transform: rotate(45deg) translateY(-50%);
    -ms-transform: rotate(45deg) translateY(-50%);
    -o-transform: rotate(45deg) translateY(-50%);
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
}

.categories-nav li.has-sub-menu a:hover::after {
    transform: rotate(-45deg);
    border-color: var(--main-color);
}

.more-categories a {
    font-size: 14px;
    color: rgb(0, 81, 221);
    font-family: var(--Regular);
    padding: 6px 0;
    display: block;
    transform: translateX(0);
    padding-right: 8px;
    line-height: 1.2rem;
}

.more-categories a::after {
    content: '';
    border: solid rgb(0, 81, 221);
    border-width: 0 2px 2px 0;
    position: absolute;
    right: 0;
    top: 50%;
    display: inline-block;
    padding: 2px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
}

.more-categories a:hover {
    color: var(--main-color);
}

.more-categories a:hover::after {
    border-color: var(--main-color);
}

/**
 *
 * Product you may like section
 */
.product-like-header h2 {
    color: var(--black);
    font-family: var(--Regular);
    font-size: 18px;
}

.product-like-grid {
    padding: 40px 10px;
}

.product-like-item {
    display: flex;
    align-items: center;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    padding: 8px;
}

.product-like-item:not(:last-child) {
    margin-bottom: 10px;
}

.product-like-item .like-content {
    display: flex;
    flex-direction: column;
    width: 60%;
}

.like-product-img {
    width: 40%;
}

.like-product-img img {
    max-width: 120px;
    width: 100%;
}

.product-like-item .like-content h2,
.product-like-item .like-content a,
.notfied-text,
.request-btn a {
    font-size: 13px;
    font-family: var(--Regular);
}

.notfied-text {
    padding: 0px 10px;
    padding-bottom: 15px;
}

.product-like-item .like-content a {
    margin-top: 20px;
    background: var(--main-gradient);
    color: var(--white);
    padding: 6px 8px;
    display: inline-block;
    max-width: 70%;
    text-align: center;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.request-btn a {
    margin-top: 20px;
    background: var(--main-gradient);
    color: var(--white);
    padding: 15px 8px;
    display: inline-block;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

/**
 *
 * Homepage category slider
 */

.home-cat-slider-grid .item a {
    height: 250px !important;
    display: flex;
    align-items: center;
}

.cat-item-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 150px;
    padding: 10px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}

.cat-item-content img {
    max-width: 100px;
    width: 100px;
    height: 120px;
    object-fit: contain;
}

.cat-item-content h2 {
    text-align: center;
    font-size: 13px;
    color: var(--black);
    font-family: var(--Regular);
}

.home-cat-slider {
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.home-slider-shadow {
    box-shadow: 0px 15px 10px -15px rgb(111, 111, 111);
    margin-bottom: 4px;
}

/**
  *
  * Homepage category grid
  */
/* .category-item-grid{
    padding-left: 10px;
 } */
.category-grid-left {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 300px;
    padding: 15px;
}

.category-grid-left h3 {
    font-size: 20px;
    font-family: var(--Regular);
    color: var(--white);
    text-transform: uppercase;
    line-height: 1.4rem;
}

.category-grid-left a {
    color: var(--white);
    font-size: 14px;
    font-family: var(--Regular);
    width: 100px;
    text-align: center;
    padding: 6px 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.background--white {
    background: var(--white);
}

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

.gradient-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--main-gradient);
    border-radius: 5px;
    z-index: -2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.gradient-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--hover-gradient);
    transition: all .3s;
    border-radius: 5px;
    z-index: -1;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.gradient-btn:hover::before {
    width: 100%;
}

.category-grid-item {
    padding: 10px 10px;
    position: relative;
    height: 148px;
    display: flex;
    background: var(--white);
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: 0.4s linear;
    -webkit-transition: 0.4s linear;
    -moz-transition: 0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linear;
}

.category-grid-item:hover {
    box-shadow: 0 0 10px 5px rgba(134, 134, 134, 0.18);
}

.grid-item-content h3 {
    font-size: 15px;
    color: var(--black);
    font-family: var(--Regular);
}

.grid-item-content p {
    font-size: 14px;
    color: var(--gary);
    font-family: var(--Regular);
}

.grid-item-img {
    display: flex;
    justify-content: flex-end;
    padding: 15px 0 10px 0;
    height: 80px;
}

.grid-item-img img {
    display: inline-block;
    max-width: 100px;
    width: 100%;
    object-fit: contain;
}

/**
   *
   * Get in touch
   */

.get-in-touch-wrap {
    min-height: 400px;
    background-position: top left !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    position: relative;
    z-index: 1;
    padding: 40px 25px;
}

.get-in-touch-wrap::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #3B3B3B, #3B3B3B, #4b4b4b, #C0C0C0, #C0C0C0);
    ;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: -1
}

.touch-heading {
    font-size: 48px;
    font-family: var(--Regular);
    color: var(--white);
    line-height: 1.1em;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.touch-heading-slug {
    font-size: 60px;
    font-family: var(--Regular);
    color: var(--white);
    line-height: 1.1em;
    margin-bottom: 15px;
    text-align: center;
}

.touch-sub {
    font-size: 14px;
    font-family: var(--FontsLight);
    color: var(--white);
    margin-bottom: 30px;
}

.left-content-touch {
    padding-right: 0px;
}
.left-content-touch-slug {
    padding-right: 0px;
    padding-top: 100px;
}

.touch-sub-min {
    font-size: 14px;
    font-family: var(--FontsLight);
    color: var(--white);
    max-width: 45%;
    line-height: 1.4em;
    margin-bottom: 30px;
}

a.learn-more {
    color: var(--white);
    font-size: 14px;
    font-family: var(--Regular);
    width: 130px;
    text-align: center;
    padding: 6px 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    display: inline-block;
}

.get-question {
    font-size: 20px;
    font-family: var(--Regular);
    color: var(--white);
    margin-bottom: 20px;
}

.touch-submit {
    color: var(--white);
    font-size: 14px;
    font-family: var(--Regular);
    width: 100%;
    text-align: center;
    padding: 10px 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    display: block;
    outline: none;
}

.touch-submit:hover {
    color: var(--white);
}

#get-touch input,
#get-touch textarea,
#get-touch select,
#get-touch label {
    font-size: 14px;
    color: var(--gary);
    font-family: var(--Regular);
}

.right-touch-form {
    padding-left: 60px;
}

.category-item-grid.g-1 {
    --bs-gutter-y: 0.1rem !important;
    --bs-gutter-x: 0.07rem !important;
}

/**
 *
 * Weekly deals
 */

.deals-timer {
    min-height: 220px;
    background-position: center;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    padding: 40px 30px;
}

.weekly-title {
    font-size: 20px;
    font-family: var(--FontsBold);
    color: var(--black);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.up-to {
    font-size: 20px;
    font-family: var(--Regular);
    color: var(--white);
    margin-bottom: 15px;
    text-transform: uppercase;
}

.off-title {
    font-size: 52px;
    font-family: var(--FontsBold);
    color: var(--white);
    line-height: 1.1em;
}

.deals-end-title {
    font-size: 18px;
    font-family: var(--Regular);
    color: var(--white);
    margin: 5px 0;
}

.view-more {
    background: var(--white);
    color: var(--main-color);
    text-align: center;
    width: 170px;
    text-transform: capitalize;
    font-size: 14px;
    font-family: var(--Regular);
    margin-top: 10px;
    transition: 0.4s ease;
    -webkit-transition: 0.4s ease;
    -moz-transition: 0.4s ease;
    -ms-transition: 0.4s ease;
    -o-transition: 0.4s ease;
}

.view-more:hover {
    background: var(--main-color);
    color: var(--white);
}

.countdownHolder {
    width: 100% !important;
    text-align: left !important;
    font-family: var(--FontsBold) !important;
    margin: 0 !important;
}

#countdown {
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}

.speacial-product-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 312px;
    padding: 30px 0 20px 0;
    background: var(--white);
}

.speacial-product-item .discount-image {
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 25px;
}

.speacial-product-item .discount-image img {
    width: 100%;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transition: transform 0.5s ease-in-out;
    -webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -ms-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
}

.speacial-product-item .discount-image:hover img {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
}

.price-section .speacial-price {
    display: inline-block;
    background: #EE3F30;
    color: var(--black);
    margin-right: 5px;
    font-size: 14px;
    font-family: var(--Regular);
    padding: 2px 8px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.price-section .speacial-price {
    display: inline-block;
    background: #EE3F30;
    color: var(--white);
    margin-right: 5px;
    font-size: 14px;
    font-family: var(--Regular);
    padding: 2px 8px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

/* Search Product list */

.product-item {
    background: var(--white);
    padding: 10px;
}

/**
 *
 * Recommend product
 */

.recommend-product-item {
    background: var(--white);
    padding: 10px;
}

.product--img {
    max-height: 200px;
    height: 200px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product--img img {
    max-width: 150px;
    padding: 10px 5px;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transition: transform 0.5s ease-in-out;
    -webkit-transition: transform 0.5s ease-in-out;
    -moz-transition: transform 0.5s ease-in-out;
    -ms-transition: transform 0.5s ease-in-out;
    -o-transition: transform 0.5s ease-in-out;
}

.hover--line {
    position: absolute;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transition: transform 0.5s linear;
    -webkit-transition: transform 0.5s linear;
    -moz-transition: transform 0.5s linear;
    -ms-transition: transform 0.5s linear;
    -o-transition: transform 0.5s linear;
}

.hover--line.anim-line-1 {
    width: 100%;
    height: 1px;
    background: var(--main-color);
    top: 10px;
    left: 0px;
}

.hover--line.anim-line-2 {
    width: 1px;
    height: 100%;
    background: var(--main-color);
    top: 5px;
    right: 5px;
    bottom: 5px;
}

.hover--line.anim-line-3 {
    width: 100%;
    height: 1px;
    background: var(--main-color);
    bottom: 5px;
    left: 0px;
}

.hover--line.anim-line-4 {
    width: 1px;
    height: 100%;
    background: var(--main-color);
    top: 5px;
    left: 5px;
    bottom: 5px;
}

.product--img:hover .hover--line {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

.product--img:hover img {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
}

.product--title {
    padding: 10px 0;
    margin-bottom: 10px;
}

.product--title h2 {
    font-size: 14px;
    font-family: var(--Regular);
    color: var(--black);
}

.product--title h2:hover {
    color: var(--main-color);
}

.product--meta h4,
.product--meta p {
    font-size: 14px;
    font-family: var(--Regular);
    color: var(--black);
}

/**
 *
 * Division grid
 */
.division--img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    margin-bottom: 10px;
}

.division--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.division--title a {
    font-size: 14px;
    font-family: var(--Regular);
    text-align: center;
    display: block;
}

.division--title a:hover {
    color: var(--main-color);
}

.division--grid>.col {
    display: flex;
    align-items: center;
    flex-direction: column;
}

/**
 *
 * Product details
 */
.supplier--image-box {
    display: flex;
    align-items: center;
}

.supplier--logo {
    width: 20%;
    background: rgb(231, 231, 231);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    margin-right: 20px;
}

.supplier--logo img {
    max-width: 100px;
}

.supplier--name {
    font-size: 18px;
    font-family: var(--Regular);
}

.gold-badge h4 {
    font-size: 14px;
    font-family: var(--Regular);
    margin-left: 5px;
}

.supplier--contact p {
    max-width: 50%;
    margin-right: 10px;
}

.products--drop--title h4 {
    font-size: 18px;
    color: var(--main-color);
    font-family: var(--Regular);
}

.dropdown-item.drop--product {
    display: flex !important;
    align-items: center !important;
}

.dropdown--product--grid li:not(:last-child) .dropdown-item.drop--product {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.dropdown-item.drop--product img {
    max-width: 50px;
    margin-right: 10px;
}

.drop-prod-content h2 {
    font-size: 15px;
    font-family: var(--Regular);
    color: var(--black);
}

.drop-prod-content p {
    font-size: 12px;
    font-family: var(--Regular);
    color: var(--gary);
}

.product--smll-menu li a {
    font-size: 14px !important;
    color: var(--black);
    font-family: var(--Regular);
}

.breadcumb ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.breadcumb ul li a {
    font-size: 14px;
    color: var(--black);
    text-transform: capitalize;

}

.breadcumb ul li.active a {
    color: var(--main-color);
}

.breadcumb ul li:not(:last-child) {
    padding-right: 5px;
}

.fotorama__stage {
    background: var(--white);
    border: 2px solid rgba(0, 0, 0, 0.2);
    margin-bottom: 20px !important;
}

.fotorama__stage__shaft {
    padding: 20px !important;
}

.compare,
.share a {
    color: #0066C9;
    font-size: 14px;
    font-family: var(--Regular);
}

.share a {
    border: 2px solid rgba(0, 0, 0, 0.2);
    padding: 4px 8px;
}

.product-title {
    font-size: 18px;
    font-family: var(--Regular);
    color: var(--black);
    line-height: 1.3em;
}

.range-box ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 15px;
}

.range-box ul li {
    background: #F4F4F4;
    padding: 8px;
    margin: 2px;
    min-width: 120px;
}

.range-box ul li span {
    font-size: 10px;
    font-family: var(--Regular);
}

.range-box ul li h4 {
    font-size: 14px;
    font-family: var(--FontsBold);
}

.color--item {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: inline-block;
    background: #fff;
    cursor: pointer;
}

.orange {
    background: orange;
}

.blue {
    background: blue;
}

.red {
    background: red;
}

.green {
    background: green;
}

.black {
    background: black;
}

.product--desc table td {
    width: 40%;
}

.product--desc table th {
    width: 60%;
}

.product--desc table td,
.product--desc table th {
    font-size: 14px;
    font-family: var(--Regular);
    color: var(--black)
}

.cart--btn {
    background: var(--main-gradient);
    color: var(--white);
    font-size: 14px;
    font-family: var(--Regular);
    padding: 12px 8px;
    display: block;
    text-align: center;
}

.cart--btn:hover {
    color: var(--white);
}

.cart--btn i {
    font-size: 22px;
    color: var(--white);
    margin-right: 5px;
}

.contact--btn {
    background: #0091FF;
    color: var(--white);
    font-size: 14px;
    font-family: var(--Regular);
    padding: 12px 8px;
    display: block;
    text-align: center;
    width: 100%;
}

.contact--btn:hover {
    color: var(--white);
}

.message--btn {
    color: #0091FF;
    font-size: 12px;
    font-family: var(--Regular);
    padding: 12px 2px;
    text-align: center;
    text-decoration: underline;
    display: flex;
    align-items: center;
}

.message--btn img {
    margin-right: 5px;
}

.basic-info-title,
.also-like-title {
    font-size: 18px;
    font-weight: var(--Regular);
    color: var(--black);
    margin-bottom: 20px;
    text-transform: capitalize;
}

.product--more--details th,
.product--more--details td {
    width: 50%;
    font-size: 14px;
    font-family: var(--Regular);
    vertical-align: middle;
    padding: 4px 12px;
    text-transform: capitalize;
}

.product--more--details th {
    background: #F0F1F2;
}

.like--product {
    height: 98.75%;
}

.like--product--item {
    display: flex;
    align-items: center;
    padding: 8px 0;
}

.like--product--item:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.like--product-img {
    width: 40%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 3px;
    margin-right: 4px;
}

.like--product-img img {
    width: 100%;
    object-fit: contain;
}

.like-product-title,
.like-product-price,
.like-product-price span {
    font-size: 14px;
    font-family: var(--Regular);
    color: var(--gary);
}

.like-product-price {
    color: var(--main-color);
}

#product--more--desc .nav-item {
    width: 50%;
    background: transparent !important;
    border: none !important;
}

#product--more--desc .nav-item button {
    width: 100%;
    background: #f9f9f9;
    border: none !important;
    border-top: 7px solid transparent;
    padding-top: 12px;
    padding-bottom: 12px;
    outline: none !important;
    height: 100%;
    font-size: 18px;
    color: var(--black);
    font-family: var(--Regular);
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
}

td {
    vertical-align: middle;
}

#product--more--desc--content {
    padding: 40px 30px;
}

#product--more--desc .nav-item button.nav-link.active {
    background: #ffffff;
    border-top: 7px solid var(--main-color) !important;
    color: var(--main-color);
}

/**
 *
 * Footer
 */
footer {
    background-color: var(--body-color);
}

.top-subscribe-footer--container {
    z-index: 10 !important;
    position: relative;
    margin-bottom: -30px;
}

.top-subscribe-footer {
    background: #2E2927;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    padding: 30px 0;
}

.subscribe--grid p {
    width: 100%;
    color: var(--white);
    font-size: 20px;
    font-family: var(--Regular);
    margin-right: 10px;
    line-height: 1.2em;
}

.subscribe--grid form {
    width: 50%;
}

.subscribe-form input {
    font-size: 14px;
    font-family: var(--FontsLight);
}

.subscribe-form button {
    font-size: 14px;
    font-family: var(--FontsLight);
    color: var(--white);
}

.subscribe-form button:hover {
    color: var(--white);
}

.footer--social {
    background: #393230;
    padding-top: 60px;
    padding-bottom: 30px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 0 !important;
}

.social--icon {
    margin-left: 20px;
}

.social--icon span {
    background: var(--main-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}

.social--icon span.facebook {
    background: #1877F2;
}

.social--icon span.linkedin {
    background: #0A66C2;
}

.social--icon span.twitter {
    background: #1DA1F2;
}

.social--icon span.youtube {
    background: #CD201F;
}

.footer-bottom {
    background: #2E2927;
}

.footer--div--title h2 {
    font-size: 16px;
    font-family: var(--FontsBold);
    margin-bottom: 10px;
    color: var(--white);
}

.footer--link ul li a {
    font-size: 14px;
    font-family: var(--Regular);
    color: #ffffff98;
    padding: 5px 0;
    display: block;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.footer--link ul li a:hover {
    color: var(--main-color);
}

.footer-bottom--container {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 30px 0;
}

.footer--copyright {
    text-align: center;
    color: #C9C9C9;
    font-size: 12px;
    font-family: var(--FontsThin);
}

.footer--copyright-buyer {
    text-align: center;
    color: #C9C9C9;
    font-size: 14px;
    /* font-family: var(--FontsThin); */
}

/**
 *
 * Sign in page
 */
.signin-form--container {
    background: #F5F5F5;
}

.signin-form {
    padding: 50px 40px;
}

.signin-form form input {
    border: none;
    outline: none !important;
    background: var(--white);
    font-size: 14px;
    font-family: var(--Regular);
    padding: 12px 15px;
    color: var(--black)
}

.signin-form form input[type='checkbox'] {
    padding: 0px;
    margin-right: 5px !important;
}

.signin-form form input:focus {
    outline: none !important;
    border: none !important;
}

.signin-form form input::placeholder {
    color: var(--gary);
    font-size: 14px;
    font-family: var(--Regular);
}

.signin-form form label {
    margin-bottom: 8px;
    font-size: 14px;
    font-family: var(--Regular);
    color: var(--black)
}

.signin-form form label.required {
    padding-left: 15px;
    position: relative;
}

.signin-form form label.required::before {
    content: "*";
    position: absolute;
    color: red;
    font-size: 14px;
    left: 0;
}


/**
 *
 * Sign-up page : start
 */
.asterisk {
    color: red;
}

.signup-wrapper {
    background-color: var(--body-color);
}

.signup-form--container {
    background: var(--body-color);
}

.signup-form--container .card-body {
    background: #F5F5F5;
}

.signup-form--container .title-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    background-color: var(--white);
    height: 15vh;
}

.signup-form--container .title-main h1 {
    font-size: 32px;
    margin-bottom: 20px;
}

.signup-form--container .title-main h2 {
    font-size: 20px;
}

.signup-form--container .title-main a {
    color: blue;
}

.signup-form--container .title-main p {
    /* font-size: 32px; */
}

.signup-form--container .sub-title {
    /* margin-top: 60px; */
    margin-bottom: 20px;
}

.signup-form--container .sub-title.business-information {
    margin-top: 60px;
    /* margin-bottom: 20px; */
}

.signup-form {
    padding: 50px 40px;
}

.signup-form input {
    border: none;
    outline: none !important;
    background: var(--white);
    font-size: 14px;
    font-family: var(--Regular);
    padding: 12px 15px;
    color: var(--black);
    /* margin-top: 10px; */
}

.signup-form input[type='checkbox'] {
    padding: 0px;
    margin-right: 5px !important;
    /* margin-top: 0; */
}

.signup-form input[type='radio'] {
    padding: 0px;
    cursor: pointer;
    /* margin-top: 0; */
}

.signup-form .radio {
    display: flex;
    justify-content: start;
}

.signup-form .radio-group label {
    padding: 0px;
    cursor: pointer;
    margin-right: 5px !important;
    padding-left: 10px;
}

.signup-form .radio-container {
    display: flex;
    justify-content: space-between;
    padding: 0 50px;
}

.signup-form .radio-container .radio-group {
    padding-right: 50px;
}

.signup-form input:focus {
    outline: none !important;
    border: none !important;
}

.signup-form input::placeholder {
    color: var(--gary);
    font-size: 14px;
    font-family: var(--Regular);
}

.signup-form label {
    margin-bottom: 8px;
    font-size: 14px;
    font-family: var(--Regular);
    color: var(--black)
}

.signup-form label.required {
    padding-left: 15px;
    position: relative;
}

.signup-form label.required::before {
    content: "*";
    position: absolute;
    color: red;
    font-size: 14px;
    left: 0;
}

.signup-form--container .agree_terms {
    padding: 20px 10px;
}

.signup-form--container .agree_terms label {
    font-size: 12px !important;
}

.add_more {
    cursor: pointer;
}

.add_more i {
    background-color: var(--main-color);
    color: var(--white);
    margin-right: 5px;
}

.add_more span {
    color: var(--main-color);
}

.signup-form--container #mainProducts input {
    margin-bottom: 10px;
}

/* Sign-up page : end */



/**
 *
 * Custom checkbox
 */

/* The container */
/* The container */
.container--label {
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.container--label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    background-color: #ccc;
}


/* When the checkbox is checked, add a blue background */
.container--label input:checked~.checkmark {
    background-color: var(--main-color);
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container--label input:checked~.checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container--label .checkmark:after {
    left: 5px;
    top: -3px;
    width: 7px;
    height: 15px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.external-link {
    text-decoration: none;
    color: #0091FF;
    font-size: 12px;
    font-family: var(--Regular);
}

.b2b {
    padding-top: 60px;
    padding-bottom: 60px;
}

.b2b-title {
    font-size: 35px;
    font-family: var(--Regular);
    color: var(--black);
    text-align: center;
    line-height: 1.5em;
    margin-bottom: 15px;
}

.b2b-title span {
    font-size: 35px;
    font-family: var(--Regular);
    color: var(--main-color);
    text-align: center;
    display: block;
    margin-top: 10px;
}

.signin-icons {
    margin-top: 15px;
}

.signin-icons .social--icon {
    margin-left: 0 !important;
}

.signin-icons .social--icon a:first-child span {
    margin-left: 0 !important;
}

.signin-with {
    margin-top: 40px;
}

.signin-with .signin-with-title {
    font-size: 16px;
    font-family: var(--Regular);
    color: var(--black);
}

.google-plus {
    background: #DD4B39;
}

.dropdown-list-item {
    cursor: pointer !important;
}

a.dropdown-item {
    text-align: left !important;
    display: block !important;
}

.dropdown-menu li {
    margin-left: 0 !important;
}


/* Common CSS */
a {
    cursor: pointer;
}

/* category rows */
.category-row {
    /* background-color: white; */
}

.hot-products-title {
    float: left;
    padding: 0 21px;
}

.hot-products-parent {
    margin: auto;
}

.hot-products {
    /* display: grid; */
    /* grid-template-columns: repeat(auto-fill, minmax(100px, 2fr)); */
    /* grid-gap: 1rem; */
    /* position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%); */
}

.hot-product-item {
    margin-right: 5px;
}

.category-row .request-btn a {
    margin: 0;
}

.category-row .categories-header {
    padding: 0;
}

.category-row .category--dropdown {
    margin: auto;
}


/* Search page side-bar */
.search-sidebar {
    background-color: var(--white);
    padding: 0 30px;
}

.search-sidebar .sidebar-title {
    font-weight: bold;
    padding: 10px 0;
    font-size: 16px;
}

.search-sidebar .categories ul {
    padding-left: 5px;
}

.search-sidebar .categories ul li {
    padding-left: 5px;
}

.search-sidebar li {
    font-weight: 500;
    font-size: 14px;
}

.search-sidebar .amount {
    color: var(--gary);
    font-weight: lighter;
    font-size: 12px;
}

.cat-breadcrumbs {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

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

.search-result {
    padding: 20px 0;
}

.search-result-breadcrumbs {
    padding: 5px 0;
}

.search-result-desc {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

.search-result-cat-legends {
    display: flex;
    padding: 5px 0;
    /* width: 100%; */
    white-space: nowrap;
    overflow-x: scroll;
}

.cat-legend {
    background-color: var(--white);
    padding: 8px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.pointer {
    cursor: pointer;
}

.search-result-filter {
    background-color: var(--white);
    display: grid;
    grid-template-columns: 15% 15% 15% 15% 30% 10%;
}

.search-result-filter .form-group {
    margin: 0 !important;
    padding: 5px 0;
}

.search-result-filter select {
    border: none;
}




.search-result-filter .price-range {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.search-result-filter .price-range input {
    width: 100px;
    height: 25px;
    font-size: 10px;
    margin: 0 5px;
}

.search-result-filter .free-shipping {
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-result-filter .free-shipping input {
    margin-right: 5px;
}

.search-result-filter .fast-shipping {
    display: flex;
    align-items: center;
    justify-content: center;

}

.search-result-filter .fast-shipping input {
    margin-right: 5px;
}

.search-result-filter .view-style {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.search-result-filter .view-style .icons i {
    padding: 2px;
}

.search-result-filter .left-border {
    border-left: 1px solid var(--light-gary);
}


/* Buyers Profile buying-leads */
.buying-leads-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 250px;
}

.buying-leads-header i {
    font-size: 25px;
}

.buying-leads-header img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

.buying-leads-header .request-btn a {
    margin-top: 0;
    padding: 10px 10px;
}

.buying-leads-body {
    display: grid;
    grid-template-columns: 10% 90%;
}

.buying-leads-sidebar {
    height: 100vh;
    background-color: var(--body-color);

    -webkit-box-shadow: 8px 0px 30px -36px rgb(0 0 0 / 75%);
    -moz-box-shadow: 8px 0px 30px -36px rgb(0 0 0 / 75%);
    box-shadow: 8px 0px 30px -36px rgb(0 0 0 / 75%);
}

.mobile-buyer .buying-leads-body {
    grid-template-columns: auto;
}

.mobile-buyer .buying-leads-sidebar {
    height: auto;
}

.mobile-buyer .modal-content {
    width: 60%;
}

.mobile-buyer .modal-body {
    padding: 0;
}

.buying-leads-sidebar i {
    font-size: 24px;
    margin-bottom: 5px;
}

.buying-leads-sidebar .menu-item {
    cursor: pointer;
}

.buying-leads-sidebar .menu-item:hover {
    border-left: 2px solid var(--main-color);
    background-color: #e9eaec;
}

.buying-leads-sidebar .active {
    border-left: 2px solid var(--main-color);
    background-color: #e9eaec;
}

.buying-leads-content {
    /* width: 90%; */
    padding: 25px 0px;
}

.buying-leads-sidebar .menu-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.chat-table {
    border-collapse: separate;
    border-spacing: 0 2px;
}

.chat-table thead tr {
    border: none;
    border-style: none;
}

.chat-item {
    background-color: var(--white);
    height: 100px;
}

.chat-item .chat-suppliers-link a {
    color: #0091FF;
}

.chat-item .chat-inquiry a {
    color: var(--main-color);
}

.chat-item .chat-now {
    color: var(--main-color);
}

.chat-item .product_image {
    height: 100px;
    width: 100px;
}

.bulk-actions i {
    font-size: 18px;
    padding: 0 0 0 10px;
}

.bulk-actions input {
    /* margin-right: 5px; */
}

.bulk-actions .la-trash {
    background-color: var(--white);
    padding: 10px;
    border-radius: 50px;
    box-shadow: 3px 2px 9px -7px #888888;
    cursor: pointer;
}

.bulk-actions .la-trash:hover {
    background-color: #ffb8b8;
    color: red;
    /* border:1px solid var(--main-color); */
    box-sizing: border-box;
}
 .la-trash {
    background-color: var(--white);
    padding: 10px;
    border-radius: 50px;
    box-shadow: 3px 2px 9px -7px #888888;
    cursor: pointer;
}

 .la-trash:hover {
    background-color: #ffb8b8;
    color: red;
    /* border:1px solid var(--main-color); */
    box-sizing: border-box;
}

.bulk-actions {
    width: 300px;
    display: flex;
    align-items: center;
}

.bulk-actions .la-trash:focus {
    box-shadow: none;
}


/* My-account - start */
.my-account {
    min-height: 80vh;
    width: 60%;
    padding-top: 5vh;
}

.user-info-container {
    margin-bottom: 5vh;
}

.user-info-container .card-body {
    height: 150px;
    display: flex;
    align-items: center;
}

.user-info-container li {
    padding: 5px 0;
    cursor: pointer;
}

.user-photo .card-body {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.user-photo img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

.user-photo .upload-txt {
    position: absolute;
    bottom: 10px;
    background-color: #ffd4d1;
    color: var(--main-color);
    border-radius: 50px;
    padding: 0 10px;
}

.user-information .card-body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.user-information i {
    font-size: 33px;
}

.user-information .verified {
    position: absolute;
    top: 10px;
    right: 10px;
    margin-bottom: 20px;
}

.user-information .verify-badge {
    color: orange;
}


.profile-details .card-body {
    height: 200px;
}

.profile-details li {
    padding: 5px 0;
    cursor: pointer;
}

.profile-details .card-title {
    /* font-size: 16px; */
    font-weight: bold;
    margin: 20px 0;
}

.my-account .label {
    color: var(--light-gary);
}

.my-account .link {
    color: blue;
}

/* My-account - end */


/* =================== Seller  Part */
.seller.dashboard {
    /* width: 90%; */
    padding: 40px;
}

.seller.dashboard .card {
    justify-content: center;
}

.dashboard .profile img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
}

.dashboard .profile .name {
    font-size: 16px;
    margin-bottom: 5px;
}

.dashboard .profile .verified {
    /* position: absolute;
    top: 10px;
    right: 10px; */
    margin-bottom: 20px;
}

.dashboard .profile .verify-badge {
    color: orange;
}

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

/* .dashboard .profile .card-body .row{
    align-items: center;
} */
.profile .details {
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
}

.seller.dashboard .section-title {
    margin-top: 5vh;
}

.dashboard .section-title h3 {
    color: var(--black);
    padding: 15px 0px;
    font-size: 16px;
    font-weight: bold;
}

.dashboard .shortcuts .card {
    height: 100px;
}

.dashboard .shortcuts i {
    font-size: 60px;
    color: var(--main-color);
}

.dashboard .shortcuts .dollar {
    border: 1px solid;
    border-radius: 50%;
}

.dashboard .shortcuts p {
    font-size: 12px;
}

.dashboard .shortcuts .card-body div {
    align-items: center;
}


.dashboard .banner {
    background: linear-gradient(to left, #462B29, #F7735D);
    padding: 52px 51px;
    border-radius: 10px;
    margin: 50px 10px;
}

.dashboard .banner p {
    color: var(--white);
}

.dashboard .banner h2 {
    color: var(--white);
}

.dashboard .banner h2 {
    font-size: 40px;
    margin-bottom: 10px;
    line-height: 3rem;
}

.dashboard .banner .request-btn a {
    margin: 0;
}

.dashboard .banner .request-btn {
    padding: 15px 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Member Profile - Start */
.member-profile .hero-banner {
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.member-profile .edit-member {
    margin-top: -10vh;
    margin-left: 15vw;
    margin-right: 15vw;
    margin-bottom: 10vh;
    padding: 20px 0px;
}

.member-profile .action-buttons {
    margin-top: 20px;
    display: flex;
    /* width: 30vw; */
    justify-content: space-between;
    gap: 20px;
}

.member-profile .btn {
    width: 50%;
}

.member-profile .btn-edit a {
    background: black !important;
}

.member-profile .btn-cancel {}

.member-profile .gradient-btn {
    z-index: 0;
}

.member-profile .request-btn a {
    margin-top: 0;

}

.member-profile .edit-member .title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 3vh;
}

.member-profile .edit-member li {
    padding: 6px 0;
}

.member-profile .edit-member li a {
    color: var(--link-green);
    /* font-weight: bold; */
}

.member-profile .edit-member li a:hover {
    color: var(--link-green-hover);
    /* font-weight: bold; */
}

.member-profile .edit-member .key {
    font-size: 1rem;
    font-weight: bold;
    color: var(--black);
}

.member-profile .edit-member .value {
    font-size: 1rem;
    color: var(--gary);
}

/* --- member - profile - edit */
.modal-close-btn {
    background-color: #ffffff;
    box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
    position: absolute;
    right: -6px;
    top: -6px;
    z-index: 10000;
    /* padding: 10px; */
    opacity: .9;
    border-radius: 50%;
}

.modal-close-btn:hover {
    opacity: 1;
}

.form .modal-dialog-scrollable .modal-content {
    overflow: unset;
}

.form .request-btn {
    display: flex;
    width: 30%;
    gap: 1rem;
}

.form .request-btn .btn-action {
    font-size: 13px;
    font-family: var(--Regular);
}

.form .request-btn .btn-action {
    margin-top: 20px;
    background: var(--main-gradient);
    color: var(--white);
    padding: 15px 8px;
    display: inline-block;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

.form .request-btn .btn-cancel {
    background: transparent;
    color: var(--main-color);
    border: 1px solid var(--main-color);
}

.form .request-btn .btn-cancel:hover {
    background: var(--main-color);
    color: var(--white);
    border: 1px solid var(--main-color);
}



/* company-information: start */
.plus {
    display: flex;
    justify-content: center;
    align-items: center;
}

.plus input {
    color: var(--main-color);
    font-size: 30px;
    border: 1px solid var(--light-gary);
    margin-top: 0.8rem;
    width: 50%;
}

.plus input:hover {
    background-color: var(--main-color);
    color: var(--white);
}

.company-information .registered_areas {
    margin-top: 5rem;
    margin-bottom: 2rem;
}

.company-information .registered_areas h5 {
    margin-bottom: 2rem;
    font-size: 18px;
}

/* company-information: end */


/* Privacy Settings modal : start */
.privacy-settings .ps-title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-top: 20px;
}
.privacy-settings .form-check-label{
    font-size: 14px;
    color: var(--gary);
    cursor: pointer;
}
.privacy-settings .form-check{
    margin-left: 10px;
}
/* Privacy Settings modal : end */

.modal.form input {
    font-size: 20px;
}

.modal.form .form-check-input {
    margin-top: 0;
}

.modal.form .form-check-inline {
    margin-top: 1rem;
}

.modal.form select {
    font-size: 20px;
}

.modal.form .modal-title {
    font-size: 30px;
    font-weight: bold;
}

.modal.form .modal-subtitle {
    font-weight: normal;
}



/* Member Profile - end */








































/* Cart-section : start */

.cart-section {
    padding: 4vh 8vw;
}

.cart-section h1 {
    font-weight: 100;
    font-size: 2em;
    margin: 0.67em 0;
}

.cart-section .product-image {
    float: left;
    width: 15%;
}

.cart-section .product-image .product--img {
    max-height: 150px;
    height: 150px;
    width: 150px;
}

.cart-section .product-details {
    float: left;
    width: 37%;
}

.cart-section .product-price {
    float: left;
    width: 12%;
}

.cart-section .product-quantity {
    float: left;
}

.cart-section .product-removal {
    float: left;
}

.cart-section .product-line-price {
    float: left;
    width: 12%;
    text-align: right;
}

/* This is used as the traditional .clearfix class */
.group:before,
.shopping-cart:before,
.column-labels:before,
.product:before,
.totals-item:before,
.group:after,
.shopping-cart:after,
.column-labels:after,
.product:after,
.totals-item:after {
    content: '';
    display: table;
}

.group:after,
.shopping-cart:after,
.column-labels:after,
.product:after,
.totals-item:after {
    clear: both;
}

.group,
.shopping-cart,
.column-labels,
.product,
.totals-item {
    zoom: 1;
}

/* Apply clearfix in a few places */
/* Apply dollar signs */
.product .product-price:before,
.product .product-line-price:before,
.totals-value:before {
    content: '৳';
}


.cart-section label {
    color: #aaa;
}

.cart-section .shopping-cart {
    margin-top: -45px;
}

/* Column headers */
.cart-section .column-labels label {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.cart-section .column-labels .product-image,
.cart-section .column-labels .product-details,
.cart-section .column-labels .product-removal {
    text-indent: -9999px;
}

/* Product entries */
.cart-section .product {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.cart-section .product .product-image {
    text-align: center;
}

.cart-section .product .product-image img {
    width: 100px;
}

.cart-section .product .product-details .product-title {
    margin-right: 20px;
    display: flex;
    justify-content: center;
    font-weight: bold;
}

.cart-section .product .product-details .product-description {
    margin: 5px 20px 5px 0;
    line-height: 1.4em;
}

.cart-section .product .product-quantity input {
    /* width: 40px; */
    width: 50%;
    font-size: 18px;
    text-align: center;
}

.cart-section .product .remove-product {
    border: 0;
    padding: 4px 8px;
    background-color: #c66;
    color: #fff;
    font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
    font-size: 12px;
    border-radius: 3px;
}

.cart-section .product .remove-product:hover {
    background-color: #a44;
}

/* Totals section */
.cart-section .totals .totals-item {
    float: right;
    clear: both;
    width: 100%;
    margin-bottom: 10px;
}

.cart-section .totals .totals-item label {
    float: left;
    clear: both;
    width: 79%;
    text-align: right;
}

.cart-section .totals .totals-item .totals-value {
    float: right;
    width: 21%;
    text-align: right;
}

.cart-section .totals .totals-item-total {
    font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
}

.cart-section .checkout {
    float: right;
    border: 0;
    margin-top: 20px;
    padding: 14px 25px;
    background-color: var(--main-color);
    color: #fff;
    font-size: 25px;
    border-radius: 3px;
}

.cart-section .checkout:hover {
    background-color: var(--main-color-hover);
}

/* Make adjustments for tablet */
@media screen and (max-width: 650px) {
    .cart-section .shopping-cart {
        margin: 0;
        padding-top: 20px;
        border-top: 1px solid #eee;
    }

    .cart-section .column-labels {
        display: none;
    }

    .cart-section .product-image {
        float: right;
        width: auto;
    }

    .cart-section .product-image img {
        margin: 0 0 10px 10px;
    }

    .cart-section .product-details {
        float: none;
        margin-bottom: 10px;
        width: auto;
    }

    .cart-section .product-price {
        clear: both;
        width: 70px;
    }

    .cart-section .product-quantity {
        width: 100px;
    }

    .cart-section .product-quantity input {
        margin-left: 20px;
    }

    .cart-section .product-quantity:before {
        content: 'x';
    }

    .cart-section .product-removal {
        width: auto;
    }

    .cart-section .product-line-price {
        float: right;
        width: 70px;
    }
}

/* Make more adjustments for phone */
@media screen and (max-width: 350px) {
    .cart-section .product-removal {
        float: right;
    }

    .cart-section .product-line-price {
        float: right;
        clear: left;
        width: auto;
        margin-top: 10px;
    }

    .cart-section .product .product-line-price:before {
        content: 'Item Total: ৳';
    }

    .cart-section .totals .totals-item label {
        width: 60%;
    }

    .cart-section .totals .totals-item .totals-value {
        width: 40%;
    }
}

/* Cart-section : end */











































/* checkout-section : start */
/* * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*/

.checkout-section {
    height: auto;
    width: 80%;
    margin: 0px auto;
    padding: 50px 0px 0px;
    color: #4E5150;
}

.checkout-section .header {
    height: 5%;
    margin-bottom: 30px;
}

.checkout-section .header>h3 {
    font-size: 25px;
    color: #4E5150;
    font-weight: 500;
}

.checkout-section .checkout-content {
    height: 85%;
    display: flex;
    column-gap: 100px;
}

.checkout-section .checkout-content .checkout-form {
    width: 50%;
}

.checkout-section .checkout-content .checkout-form form h6 {
    font-size: 12px;
    font-weight: 500;
}

.checkout-section .checkout-content .checkout-form form .form-control {
    margin: 10px 0px;
    position: relative;
    background-color: transparent;
}

.checkout-section .checkout-content .checkout-form form .form-control label:not([for=checkout-checkbox]) {
    display: block;
    font-size: 10px;
    font-weight: 500;
    margin-bottom: 2px;
}

.checkout-section .checkout-content .checkout-form form .form-control input:not([type=checkbox]) {
    width: 100%;
    padding: 10px 10px 10px 40px;
    border-radius: 10px;
    outline: none;
    border: 0.2px solid #4e515085;
    font-size: 12px;
    font-weight: 700;
}

.checkout-section .checkout-content .checkout-form form .form-control input:not([type=checkbox])::placeholder {
    font-size: 10px;
    font-weight: 500;
}

.checkout-section .checkout-content .checkout-form form .form-control label[for=checkout-checkbox] {
    font-size: 9px;
    font-weight: 500;
    line-height: 10px;
}

.checkout-section .checkout-content .checkout-form form .form-control>div {
    position: relative;
}

.checkout-section .checkout-content .checkout-form form .form-control>div span.fa {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(15px, -50%);
}

.checkout-section .checkout-content .checkout-form form .form-group {
    display: flex;
    column-gap: 25px;
}

.checkout-section .checkout-content .checkout-form form .checkbox-control {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.checkout-section .checkout-content .checkout-form form .form-control-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.checkout-section .checkout-content .checkout-form form .form-control-btn button {
    padding: 10px 25px;
    font-size: 16px;
    color: var(--white);
    background: var(--main-color);
    border: 0;
    border-radius: 7px;
    letter-spacing: 0.5px;
    font-weight: 200;
    cursor: pointer;
}
.checkout-section .checkout-content .checkout-form form .form-control-btn button:hover {
    background: var(--main-color-hover);
}

.checkout-section .checkout-content .checkout-details {
    width: 40%;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner {
    background: #F2F2F2;
    border-radius: 10px;
    padding: 20px;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-lists {
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    margin-bottom: 40px;
    max-height: 50vh;
    padding: 10px 16px;
    overflow-y: scroll;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-lists .card {
    width: 100%;
    display: flex;
    column-gap: 30px;
    flex-direction: row;
    padding: 18px 3px;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-lists .card .card-image {
    width: 35%;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-lists .card .card-image img {
    width: 100%;
    object-fit: fill;
    border-radius: 10px;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-lists .card .card-details {
    display: flex;
    flex-direction: column;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-lists .card .card-details .card-name {
    font-size: 12px;
    font-weight: 500;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-lists .card .card-details .card-price {
    font-size: 10px;
    font-weight: 500;
    color: #F2994A;
    margin-top: 5px;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-lists .card .card-details .card-price span {
    color: #4E5150;
    text-decoration: line-through;
    margin-left: 10px;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-lists .card .card-details .card-wheel {
    margin-top: 17px;
    border: 0.2px solid #4e515085;
    width: 90px;
    padding: 8px 8px;
    border-radius: 10px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-lists .card .card-details .card-wheel button {
    background: #E0E0E0;
    color: #828282;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 500;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-shipping,
.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-total {
    display: flex;
    font-size: 16px;
    padding: 5px 0px;
    border-top: 1px solid #BDBDBD;
    justify-content: space-between;
}

.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-shipping p,
.checkout-section .checkout-content .checkout-details .checkout-details-inner .checkout-total p {
    font-size: 10px;
    font-weight: 500;
}



@media screen and (max-width: 1024px) {
    .checkout-section  {
        width: 80%;
    }

    .checkout-section .checkout-content {
        column-gap: 70px;
    }
}

@media screen and (max-width: 768px) {
    .checkout-section {
        width: 92%;
    }

    .checkout-section .checkout-content {
        flex-direction: column-reverse;
        height: auto;
        margin-bottom: 50px;
    }

    .checkout-section .checkout-content .checkout-form {
        width: 100%;
        margin-top: 35px;
    }

    .checkout-section .checkout-content .checkout-details {
        width: 100%;
    }

}

/* checkout-section : end */
































/* add-product :start */
.product-form{
    padding: 3%;
}
.product-form h1{
    font-size: larger;
}
.product-form form .title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
.product-form form{
    background-color: #fff;
    padding: 2%;
    border-radius: 10px;
}
.product-form form label{
    margin-bottom: 5px;
}
.btn-save{
    background-color: var(--main-color);
    color: var(--white);
    font-size: large;
}
.btn-save:hover{
    background-color: var(--main-color-hover);
    color: var(--white);
}
/* add-product :end */

ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #eee;
}
ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}
ul.breadcrumb li a {
    color: #EF4D40;
    text-decoration: none;
}
ul.breadcrumb li a:hover {
    color: #c62f24;
    text-decoration: underline;
}