:root{
    --bs-blue:#0d6efd;
    --bs-indigo:#6610f2;
    --bs-purple:#6f42c1;
    --bs-pink:#d63384;
    --bs-red:#dc3545;
    --bs-orange:#fd7e14;
    --bs-yellow:#ffc107;
    --bs-green:#28a745;
    --bs-teal:#20c997;
    --bs-cyan:#17a2b8;
    --bs-white:#fff;
    --bs-gray:#6c757d;
    --bs-gray-dark:#343a40;
    --bs-primary:#0d6efd;
    --bs-secondary:#6c757d;
    --bs-success:#28a745;
    --bs-info:#17a2b8;
    --bs-warning:#ffc107;
    --bs-danger:#dc3545;
    --bs-light:#f8f9fa;
    --bs-dark:#343a40;
    --bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --brand:#58468C;
    --text: #555;
    --chalk: #f5f5f5;
    --body: #f5f6f7;
}
body {
    color: var(--text);
    background: var(--body);
}
a{
    text-decoration: none;
    color: var(--text);
}
hr{
    background-color: var(--brand);
    height: 2px;
    width: 60px;
}
ul, ol {
    padding: 0;
    list-style: none;
}
.card {
    padding:3px !important;
}
.card a{
    overflow:hidden;
}
.card img{
    -webkit-transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
    -o-transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
    transition: all 1.5s cubic-bezier(0, 0, 0.2, 1);
}

.card:hover img {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translateZ(0);
    transform: scale3d(1.1, 1.1, 1.1) translateZ(0);
}
*:focus {
    outline: none;
}
textarea:focus, input:focus{
    outline: none;
}

/* Hearder */
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
header .logo img{
    width: 100%;
    max-width: 100%;
}
.header-cart{
    width: 15%;
    position: relative;
}
.header-cart .header-cart-icon{
    padding: 10px;
    width: 38px;
    height: 38px;
    background-color: var(--chalk);
    color: var(--text);
}
.header-cart sup{
    background-color: var(--brand);
    padding: 5px;
    right: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: absolute;
    top: -12px;
    left: 20px;
    width: 24px;
    height: 24px;
    font-size: 12px;
    line-height: 20px;
    border-radius: 50%;
    text-align: center;
}
/* Navbar */



body.light .navbar-part {
    background: var(--brand)
}

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

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

header .nav-item {
    margin-right: 20px;

}

.nav-item:last-child {
    margin-right: 0
}
.nav-content a.nav-link {
    font-size: 14px;
    padding: 10px 15px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .nav-link {
    padding: 10px 0px;
    padding-left: 0px !important;
    font-size: 14px;
    font-weight: 400;
    color: var(--bs-white);
    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:focus, .nav-link:hover {
    color: var(--bs-light)
}
/*  */
.search-button,
.search-button:hover{
    background-color: var(--brand);
    color: var(--bs-light);
}

.card .btn{
    padding: 2px !important;
    border:1px solid var(--brand) !important;
}
.card .btn:hover{
    background-color: var(--bs-light);
    border:1px solid var(--brand) !important;
    color: var(--brand);
}
/*  */
.category-section .row .product-card{
    padding-right: .4rem;
    padding-left: .4rem;
}
.product-price .new-price{
    color:var(--bs-danger);
}

.product-card .card-title{
    height: 45px;
    font-size: 14px;
    font-weight: 400 !Important;
    overflow: hidden;
}
.category-card .card-title{
    font-size: 14px;
    font-weight: 400 !important;
    overflow: hidden;
}
.category-card .card{
    background:var(--brand) ;
}


.product-price .old-price{
    color:var(--bs-gray);
    font-size: 14px;
    font-weight: 500;
}
.order-now{
    background-color: var(--brand);
}

/* Footer */
footer{
    background-color: #ECEFF1;
}
.footer-top{
    background-color: var(--brand);
}
.footer-bottom{
    background-color: var(--brand);
}
.product-section .product-price{
    font-size: 20px;
}



@media (max-width: 767px) {
    header .logo{
        text-align: center;
    }
    header .logo img{
        max-width: 200px;
        width: 50%;
    }
    .header-slider .row .col-12{
        padding:0px;
    }
    .header-cart .header-cart-icon{
        padding: 5px;
        width: 25px;
        height: 25px;
    }
    .header-cart sup{
        width: 18px;
        height: 18px;
    }
    .header-user{
        background:white;
        border: none;
        border-radius: 50%;
        display: flex !important;
        justify-content: center;
        align-items: center;
        padding: 10px;
        width: 38px;
        height: 38px;
        background-color: var(--chalk);
        color: var(--text);
    }
    .header-user svg{
        font-size: 16px;
        text-align: center;
        display: inline-block;
        color: var(--text);
        background: var(--chalk);
        transition: all linear .3s;
        -webkit-transition: all linear .3s;
    }
    .nav-link,.dropdown-arrow::before,.nav-link:hover,.dropdown-arrow:hover::before{
        color: var(--text);
    width: 100%;
    }

    .mobile-serach{
        padding: 10px 15px !important;
    }
    footer hr{
        margin: 0px auto;
    }
    .search {
        font-size: 12px !important;
    }
}

.search {
    font-size: 14px;
}

.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(--bs-primary);
    background:var(--chalk)
}
.dropdown-link:hover::before{
    color:var(--bs-primary)
}
.dropdown-link.active{
    color:var(--bs-primary)
}
.dropdown-link.active::before{
    color:var(--bs-primary);
    -webkit-transform:translateY(-50%) rotate(90deg);
    transform:translateY(-50%) rotate(90deg)
}
.dropdown-list{
    display:none;
    padding:0 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{
    display: block;
    width:100%;
    font-size:15px;
    line-height:18px;
    border-radius:8px;
    padding:10px 15px;
    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(--bs-primary);
    background:var(--chalk)
}
.dropdown:hover .dropdown-position-list{
    visibility:visible;
    opacity:1;
    top:45px
}
.dropdown-position-list{
    position:absolute;
    top:60px;
    left:0;
    z-index:2;
    width:200px;
    height:auto;
    visibility:hidden;
    opacity:0;
    padding:5px;
    border-radius:5px;
    background:var(--white);
    border:1px solid var(--border);
    -webkit-box-shadow:0 15px 35px 0 rgba(0,0,0,0.1);
    box-shadow:0 15px 35px 0 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 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(--bs-primary);
    background:var(--chalk)
}

.nav-sidebar {
    position: fixed;
    top: 0;
    left: -320px;
    width: 280px;
    height: 100vh;
    padding: 0;
    z-index: 5;
    background: var(--bs-white);
    -webkit-box-shadow: 15px 0 25px 0 rgba(0,0,0,0.15);
    box-shadow: 15px 0 25px 0 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: 0
}

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

.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 svg {
    width: 35px !important;
    height: 35px;
    font-size: 10px;
    line-height: 35px;
    border-radius: 50%;
    padding: 8px;
    text-align: center;
    display: inline-block;
    color: var(--bs-text);
    background: var(--bs-white);
    text-shadow: var(--bs-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 svg:hover {
    color: var(--white);
    background: var(--bs-primary)
}

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

.dropdown:hover .dropdown-position-list{
    visibility:visible;
    opacity:1;
    top:45px
}
.dropdown-position-list{
    position:absolute;
    top:60px;
    left:0;
    z-index:2;
    width:200px;
    height:auto;
    visibility:hidden;
    opacity:0;
    padding:5px;
    border-radius:5px;
    background:var(--bs-white);
    border:1px solid var(--border);
    -webkit-box-shadow:0 15px 35px 0 rgba(0,0,0,0.1);
    box-shadow:0 15px 35px 0 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 li a{
    display: block;
    width:100%;
    font-size:15px;
    line-height:18px;
    border-radius:8px;
    padding:8px 15px;
    color:var(--text);
    background:var(--bs-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(--bs-primary);
    background:var(--chalk)
}

/*  */
.nav-tabs .nav-link:hover{
    color: var(--bs-nav-tabs-link-active-color);
}

.productGallery .swiper-slide {
    cursor: pointer;
}

nav .pagination{
    justify-content: center;
    flex-wrap: wrap;
}
nav .pagination li a{
    color:var(--brand);
}
nav .pagination li.page-item.active{
    --bs-pagination-active-bg:var(--brand);
    --bs-pagination-active-border-color:var(--brand);
}
.orderNow {
    color:var(--bs-white);
    background:var(--brand)
}

.form-control+.text-danger {
    display: none;
}
.form-control.has-error+.text-danger {
    display: block;
}
.form-control:focus-within {
    background: var(--chalk);
    border-color: var(--bs-primary);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: 0;
}
.billing-info-wrap .form-control {
    width: 100%;
    color: var(--text);
    background: var(--chalk);
    border: 1px solid var(--border);
    margin-bottom: 10px;
    font-size: 14px;
    padding: 15px;
}

.table>:not(caption)>*>*{
    font-size: 14px;
}

/*  */