:root{
    --primary:#ff3f6c;
    --primary-hover:#e6355f;
    --secondary:#ff6b35;

    --dark:#282c3f;
    --text:#3e4152;
    --text-light:#696b79;

    --bg:#f8f9fb;
    --white:#ffffff;

    --border:#eaeaec;
    --success:#03a685;

    --shadow:0 4px 20px rgba(0,0,0,.08);
}

/* ==========================
   BODY
========================== */

body{
    background:var(--bg);
    color:var(--text);
}

/* ==========================
   HEADER
========================== */

.topnavbar{
    background:#fff !important;
    border-bottom:1px solid var(--border);
    box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.BG{
    background:#fff !important;
}

/* ==========================
   FOOTER
========================== */

.footer{
    background:#282c3f !important;
}

.footer h3{
    color:#fff !important;
}

.footer a{
    color:#c2c2c2 !important;
}

.footer a:hover{
    color:#ff3f6c !important;
}

/* ==========================
   SEARCH
========================== */

.search-container .input-group .form-select,
input#search_box{
    border:1px solid var(--border) !important;
    background:#f5f5f6 !important;
    color:var(--text);
    border-radius:8px;
}

input#search_box:focus{
    border-color:var(--primary) !important;
}

/* ==========================
   BUTTONS
========================== */

.theme-button,
.apply-btn,
.Place-btn,
.card-btn,
.view-cart-btn,
.checkout-btn,
.apply-button button,
.addToCart,
.scroll-button{
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    ) !important;

    color:#fff !important;
    border:none !important;
    border-radius:8px;
    transition:.3s;
}

.theme-button:hover,
.apply-btn:hover,
.Place-btn:hover,
.card-btn:hover,
.view-cart-btn:hover,
.checkout-btn:hover,
.apply-button button:hover,
.addToCart:hover{
    transform:translateY(-2px);
    background:linear-gradient(
        135deg,
        var(--primary-hover),
        #ff5722
    ) !important;
}

/* ==========================
   OUTLINE BUTTONS
========================== */

.theme-button-outline,
.outline-button{
    border:1px solid var(--primary) !important;
    color:var(--primary) !important;
    background:#fff !important;
}

.theme-button-outline:hover,
.outline-button:hover{
    background:var(--primary) !important;
    color:#fff !important;
}

/* ==========================
   PRODUCT CARDS
========================== */

.category-item,
.dashboard-item,
.product-card{
    background:#fff;
    border:1px solid var(--border) !important;
    transition:.3s;
}

.category-item:hover,
.dashboard-item:hover,
.product-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow);
    border-color:#ddd !important;
}

/* ==========================
   CART
========================== */

.cart-count{
    background:var(--primary);
    color:#fff;
    font-weight:600;
}

/* ==========================
   FILTERS
========================== */

.filter-container,
.rangeprice,
.metric,
.dashboard-item,
.filter-tag{
    border:1px solid var(--border) !important;
    background:#fff;
    border-radius:10px;
}

.filter-tab.active{
    background:var(--primary) !important;
    color:#fff !important;
}

.filter-tag{
    color:var(--primary) !important;
}

/* ==========================
   LINKS
========================== */

a{
    color:var(--text);
}

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

.left-side .active{
    color:var(--primary) !important;
}

/* ==========================
   PAGINATION
========================== */

.pagination-item-top{
    border:1px solid var(--border);
    color:var(--text);
}

.pagination-item-top.active{
    background:var(--primary) !important;
    color:#fff !important;
    border-color:var(--primary) !important;
}

/* ==========================
   TABLES
========================== */

.product-table thead,
.order-summary-table th,
.item-details-table th{
    background:#f5f5f6 !important;
    color:var(--dark) !important;
}

/* ==========================
   FORM FIELDS
========================== */

.main-chekout input,
.main-chekout select,
.main-chekout textarea{
    border:1px solid var(--border) !important;
    background:#fff;
    color:var(--text);
    border-radius:8px;
}

.main-chekout input:focus,
.main-chekout select:focus,
.main-chekout textarea:focus{
    border-color:var(--primary) !important;
}

/* ==========================
   PROFILE
========================== */

.profile-picture{
    border:3px solid var(--primary) !important;
}

/* ==========================
   MOBILE
========================== */

@media(max-width:768px){

    .mobilemenusection{
        background:#fff;
    }

    .mobilemenusection a{
        color:var(--text) !important;
    }
}
.svgContainer i {
     color: black; 
    font-size: 1.5em;
}