@charset "utf-8";
/* CSS Document */

/* runtime header height variable - default provides a sensible fallback */
:root {
    --site-header-height: 150px;
}

/******************************

COLOR PALETTE




[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Home
	3.1 Currency
	3.2 Language
	3.3 Account
	3.4 Main Navigation
	3.5 Hamburger Menu
	3.6 Logo
	3.7 Main Slider
4. Banner
5. New Arrivals
	5.1 New Arrivals Sorting
	5.2 New Arrivals Products Grid
6. Deal of the week
7. Best Sellers
	7.1 Slider Nav
8. Benefit
9. Blogs
10. Newsletter
11. Footer



******************************/

/***********
1. Fonts
***********/

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,900");

/*********************************
2. Body and some general stuff
*********************************/

/* Reset margins/padding and use modern global box-sizing */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


body {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 23px;
    font-weight: 400;
    background: #ffffff;
    color: #1e1e27;
}

div {
    display: block;
    position: relative;
}

ul {
    list-style: none;
    margin-bottom: 0px;
}

p {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    line-height: 1.7;
    font-weight: 500;
    color: #989898;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

p a {
    display: inline;
    position: relative;
    color: inherit;
    border-bottom: solid 2px #fde0db;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

a,
a:hover,
a:visited,
a:active,
a:link {
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

p a:active {
    position: relative;
    color: #ff6347;
}

p a:hover {
    color: #ff6347;
    background: #fde0db;
}

p a:hover::after {
    opacity: 0.2;
}

/* remove empty selection rules (cleanup) */
h2 {
    font-size: 40px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #282828;
    -webkit-font-smoothing: antialiased;
    -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

::-webkit-input-placeholder {
    font-size: 16px !important;
    font-weight: 500;
    color: #777777 !important;
}

:-moz-placeholder

/* older Firefox*/
    {
    font-size: 16px !important;
    font-weight: 500;
    color: #777777 !important;
}

::-moz-placeholder

/* Firefox 19+ */
    {
    font-size: 16px !important;
    font-weight: 500;
    color: #777777 !important;
}

:-ms-input-placeholder {
    font-size: 16px !important;
    font-weight: 500;
    color: #777777 !important;
}

::input-placeholder {
    font-size: 16px !important;
    font-weight: 500;
    color: #777777 !important;
}

.form-control {
    color: #db5246;
}

section {
    display: block;
    position: relative;
    box-sizing: border-box;
}

.clear {
    clear: both;
}

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}

.clearfix::after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

.float_left {
    float: left;
}

.float_right {
    float: right;
}

.trans_200 {
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

.trans_300 {
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.trans_400 {
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

.trans_500 {
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}

.fill_height {
    height: 100%;
}

.super_container {
    width: 100%;
    overflow: hidden;
}

/* Ensure main content accounts for fixed header height by default. The
   actual value will be updated at runtime using JS to match the rendered
   header size (handles responsive header heights). */
main {
    padding-top: var(--site-header-height);
}

/*********************************
3. Home
*********************************/

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    z-index: 10;
}

.top_nav {
    width: 100%;
    height: 50px;
    background: #1e1e27;
}

.top_nav_left {
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    color: #b5aec4;
    text-transform: uppercase;
}

/*********************************
3.1 Currency
*********************************/

.currency {
    display: inline-block;
    position: relative;
    min-width: 50px;
    border-right: solid 1px #33333b;
    padding-right: 20px;
    padding-left: 20px;
    text-align: center;
    background: #1e1e27;
}

.currency>a {
    display: block;
    color: #b5aec4;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
    text-transform: uppercase;
}

.currency>a>i {
    margin-left: 8px;
}

.currency:hover .currency_selection {
    visibility: visible;
    opacity: 1;
    top: 100%;
}

.currency_selection {
    display: block;
    position: absolute;
    right: 0;
    top: 120%;
    margin: 0;
    width: 100%;
    background: #ffffff;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: all 0.3s ease;
}

.currency_selection li {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 50px;
}

.currency_selection li a {
    display: block;
    color: #232530;
    border-bottom: solid 1px #dddddd;
    font-size: 13px;
    text-transform: uppercase;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: all 0.3s ease;
}

.currency_selection li a:hover {
    color: #b5aec4;
}

.currency_selection li:last-child a {
    border-bottom: none;
}

/*********************************
3.2 Language
*********************************/

.language {
    display: inline-block;
    position: relative;
    min-width: 50px;
    border-right: solid 1px #33333b;
    padding-right: 20px;
    padding-left: 20px;
    text-align: center;
    background: #1e1e27;
}

.language>a {
    display: block;
    color: #b5aec4;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
}

.language>a>i {
    margin-left: 8px;
}

.language:hover .language_selection {
    visibility: visible;
    opacity: 1;
    top: 100%;
}

.language_selection {
    display: block;
    position: absolute;
    right: 0;
    top: 120%;
    margin: 0;
    width: 100%;
    background: #ffffff;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: all 0.3s ease;
}

.language_selection li {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 50px;
}

.language_selection li a {
    display: block;
    color: #232530;
    border-bottom: solid 1px #dddddd;
    font-size: 13px;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: all 0.3s ease;
}

.language_selection li a:hover {
    color: #b5aec4;
}

.language_selection li:last-child a {
    border-bottom: none;
}

/*********************************
3.3 Account
*********************************/

.account {
    display: inline-block;
    position: relative;
    min-width: 50px;
    padding-left: 20px;
    text-align: center;
    background: #1e1e27;
}

.account>a {
    display: block;
    color: #b5aec4;
    font-weight: 400;
    height: 50px;
    line-height: 50px;
    font-size: 13px;
}

.account>a>i {
    margin-left: 8px;
}

.account:hover .account_selection {
    visibility: visible;
    opacity: 1;
    top: 100%;
}

.account_selection {
    display: block;
    position: absolute;
    right: 0;
    top: 120%;
    margin: 0;
    width: 100%;
    background: #ffffff;
    visibility: hidden;
    opacity: 0;
    z-index: 1;
    box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: all 0.3s ease;
}

.account_selection li {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 50px;
}

.account_selection li a {
    display: block;
    color: #232530;
    border-bottom: solid 1px #dddddd;
    font-size: 14px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.account_selection li a:hover {
    color: #b5aec4;
}

.account_selection li:last-child a {
    border-bottom: none;
}

.account_selection li a i {
    margin-right: 10px;
}

/*********************************
3.4 Main Navigation
*********************************/

.main_nav_container {
    width: 100%;
    background: #ffffff;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
}

.navbar {
    width: auto;
    height: 100px;
    float: right;
    padding-left: 0px;
    padding-right: 0px;
}

.navbar_menu li {
    display: inline-block;
}

.navbar_menu li a {
    display: block;
    color: #1e1e27;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 20px;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.navbar_menu li a:hover {
    color: #b5aec4;
}

.navbar_user {
    margin-left: 37px;
}

.navbar_user li {
    display: inline-block;
    text-align: center;
}

.navbar_user li a {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 40px;
    height: 40px;
    color: #1e1e27;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.navbar_user li a:hover {
    color: #b5aec4;
}

.checkout a {
    background: #eceff6;
    border-radius: 50%;
}

.checkout_items {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -9px;
    left: 22px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--theme-color);
    font-size: 12px;
    color: #ffffff;
}

/*********************************
3.5 Hamburger Menu
*********************************/

.hamburger_container {
    display: none;
    margin-left: 40px;
}

.hamburger_container i {
    font-size: 24px;
    color: #1e1e27;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.hamburger_container:hover i {
    color: #b5aec4;
}

.hamburger_menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 340px;
    max-width: 85vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    z-index: 1100;
    -webkit-transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: translateX(100%);
    box-shadow: -12px 0 30px rgba(20, 20, 30, 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.hamburger_menu.active {
    transform: translateX(0);
    right: 0 !important;
    transform: translateX(0) !important;
    display: block !important;
    z-index: 1101 !important;
}

.fs_menu_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9;
    background: rgba(0, 0, 0, 0.48);
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity 220ms ease;
    transition: opacity 220ms ease;
}

.fs_menu_overlay.active {
    opacity: 1;
    pointer-events: auto !important;
    z-index: 1100 !important;
}

/* Prevent background scroll when menu is open */
body.menu-open {
    overflow: hidden;
    touch-action: none;
}

.hamburger_close {
    position: absolute;
    top: 26px;
    right: 10px;
    padding: 10px;
    z-index: 1;
}

.hamburger_close i {
    font-size: 24px;
    color: #1e1e27;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.hamburger_close:hover i {
    color: #b5aec4;
}

.hamburger_menu_content {
    padding-top: 88px;
    width: 100%;
    height: 100%;
    padding-right: 20px;
    padding-left: 24px;
}

.hamburger_menu .menu_item a i {
    margin-right: 12px;
    font-size: 18px;
    color: rgba(30, 30, 39, 0.6);
    display: inline-block;
    min-width: 20px;
    text-align: left;
}

.hamburger_close {
    right: 16px;
    top: 18px;
    background: rgba(30, 30, 39, 0.04);
    border-radius: 6px;
}

.hamburger_close:focus,
.hamburger_close:hover {
    outline: none;
    background: rgba(30, 30, 39, 0.06);
}

.menu_item>a:focus {
    outline: none;
    background: rgba(108, 92, 231, 0.08);
}

.menu_item .badge {
    margin-left: 8px;
}

.menu_item {
    display: block;
    position: relative;
    border-bottom: 1px solid rgba(30, 30, 39, 0.06);
}

.menu_item>a {
    display: flex;
    align-items: center;
    color: #1e1e27;
    font-weight: 600;
    height: 60px;
    line-height: 1;
    font-size: 16px;
    text-transform: none;
    padding: 0 8px 0 8px;
}

.menu_item>a:hover {
    color: #6c5ce7;
    background: rgba(108, 92, 231, 0.06);
}

.menu_item>a>i {
    margin-right: 12px;
    color: #6c5ce7;
    min-width: 20px;
    text-align: left;
}

.menu_item.active .menu_selection {
    display: block;
    visibility: visible;
    opacity: 1;
}

.menu_selection {
    margin: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    z-index: 1;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.menu_selection li {
    padding-left: 10px;
    padding-right: 10px;
    line-height: 50px;
}

.menu_selection li a {
    display: block;
    color: #232530;
    border-bottom: solid 1px #dddddd;
    font-size: 13px;
    text-transform: uppercase;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: all 0.3s ease;
}

.menu_selection li a:hover {
    color: #b5aec4;
}

.menu_selection li:last-child a {
    border-bottom: none;
}

/*********************************
3.6 Logo
*********************************/

.logo_container {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 15px;
}

.logo_container a {
    font-size: 24px;
    color: #1e1e27;
    font-weight: 700;
    text-transform: uppercase;
}

.logo_container a span {
    color: var(--theme-color);
}

/*********************************
3.7 Main Slider
*********************************/

.main_slider {
    width: 100%;
    /* Responsive height: min 320px, up to 60vh, capped at 700px */
    height: clamp(320px, 60vh, 700px);
    min-height: 320px;
    max-height: 700px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    /* Background-image for the default homepage slider (moved from inline) */
    background-image: url('/assets/images/slider_1.jpg');
    /* No extra margin; site header offset is handled by main's padding using --site-header-height */
    margin: 0;
    display: flex;
    align-items: center;
}

.main_slider_content {
    width: 60%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

@media (max-width: 767.98px) {
    .main_slider_content {
        width: 100%;
        padding: 1rem;
    }
}

.main_slider_content h6 {
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 29px;
}

.main_slider_content h1 {
    font-weight: 400;
    line-height: 1;
}

.red_button {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: -webkit-inline-flex;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    height: 40px;
    background: var(--theme-color);
    border-radius: 3px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.red_button:hover {
    background: #fe7c7f !important;
}

.red_button a {
    display: block;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    line-height: 40px;
    width: 100%;
}

.shop_now_button {
    width: 140px;
    margin-top: 32px;
}

/*********************************
4. Banner
*********************************/

.banner {
    width: 100%;
    margin-top: 30px;
}

.banner_item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 265px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.banner_category {
    height: 50px;
    background: #ffffff;
    min-width: 180px;
    padding-left: 25px;
    padding-right: 25px;
}

.banner_category a {
    display: block;
    color: #1e1e27;
    text-transform: uppercase;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    line-height: 50px;
    width: 100%;
    -webkit-transition: color 0.3s ease;
    -moz-transition: color 0.3s ease;
    -ms-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease;
}

.banner_category a:hover {
    color: #b5aec4;
}

/*********************************
5. New Arrivals
*********************************/

.new_arrivals {
    width: 100%;
}

.new_arrivals_title {
    margin-top: 74px;
}

/*********************************
5.1 New Arrivals Sorting
*********************************/

.new_arrivals_sorting {
    display: inline-block;
    border-radius: 3px;
    margin-top: 59px;
    overflow: visible;
}

.grid_sorting_button {
    height: 40px;
    min-width: 102px;
    padding-left: 25px;
    padding-right: 25px;
    cursor: pointer;
    border: solid 1px #ebebeb;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    background: #ffffff;
    border-radius: 3px;
    margin: 0;
    float: left;
    margin-left: -1px;
}

.grid_sorting_button:first-child {
    margin-left: 0px;
}

.grid_sorting_button.active:hover {
    background: #fe7c7f !important;
}

.grid_sorting_button.active {
    color: #ffffff;
    background: var(--theme-color);
}

/*********************************
5.2 New Arrivals Products Grid
*********************************/

.product-grid {
    width: 100%;
    margin-top: 57px;
}

.product-item {
    width: 20%;
    height: 380px;
    cursor: pointer;
}

.product-item::after {
    display: block;
    position: absolute;
    top: 0;
    left: -1px;
    width: calc(100% + 1px);
    height: 100%;
    pointer-events: none;
    content: "";
    border: solid 2px rgba(235, 235, 235, 0);
    border-radius: 3px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.product-item:hover::after {
    box-shadow: 0 25px 29px rgba(63, 78, 100, 0.15);
    border: solid 2px rgba(235, 235, 235, 1);
}

.product {
    width: 100%;
    height: 340px;
    border-right: solid 1px #e9e9e9;
}

.product_image {
    width: 100%;
}

.product_image img {
    width: 100%;
}

.product_info {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
}

.product_name {
    margin-top: 27px;
}

.product_name a {
    color: #1e1e27;
    line-height: 20px;
}

.product_name:hover a {
    color: #b5aec4;
}

.discount .product_info .product_price {
    font-size: 14px;
}

.product_price {
    font-size: 16px;
    color: var(--theme-color);
    font-weight: 600;
}

.product_price span {
    font-size: 12px;
    margin-left: 10px;
    color: #b5aec4;
    text-decoration: line-through;
}

.product_bubble {
    position: absolute;
    top: 15px;
    width: 50px;
    height: 22px;
    border-radius: 3px;
    text-transform: uppercase;
}

.product_bubble span {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}

.product_bubble_right::after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: 6px;
    right: auto;
    top: auto;
    bottom: -6px;
    border: 6px solid;
}

.product_bubble_left::after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: 6px;
    bottom: -6px;
    border: 6px solid;
}

.product_bubble_red::after {
    border-color: transparent transparent transparent var(--theme-color);
}

.product_bubble_left::after {
    border-color: #51a042 #51a042 transparent transparent;
}

.product_bubble_red {
    background: var(--theme-color);
}

.product_bubble_green {
    background: #51a042;
}

.product_bubble_left {
    left: 15px;
}

.product_bubble_right {
    right: 15px;
}

.add_to_cart_button {
    width: 100%;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.add_to_cart_button a {
    font-size: 12px;
    font-weight: 600;
}

.product-item:hover .add_to_cart_button {
    visibility: visible;
    opacity: 1;
}

.favorite {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #b9b4c7;
    width: 17px;
    height: 17px;
    visibility: hidden;
    opacity: 0;
}

.favorite_left {
    left: 15px;
}

.favorite.active {
    visibility: visible;
    opacity: 1;
}

.product-item:hover .favorite {
    visibility: visible;
    opacity: 1;
}

.favorite.active::after {
    font-family: "FontAwesome";
    content: "\f004";
    color: var(--theme-color);
}

.favorite::after {
    font-family: "FontAwesome";
    content: "\f08a";
}

.favorite:hover::after {
    color: var(--theme-color);
}

/*********************************
6. Deal of the week
*********************************/

.deal_ofthe_week {
    width: 100%;
    margin-top: 41px;
    background: #f2f2f2;
}

.deal_ofthe_week_img {
    height: 540px;
}

.deal_ofthe_week_img img {
    height: 100%;
}

.deal_ofthe_week_content {
    height: 100%;
}

.section_title {
    display: inline-block;
    text-align: center;
}

.section_title h2 {
    display: inline-block;
}

.section_title::after {
    display: block;
    position: absolute;
    top: calc(100% + 13px);
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 60px;
    height: 5px;
    background: var(--theme-color);
    content: "";
}

.timer {
    margin-top: 66px;
}

.timer li {
    display: inline-block;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #ffffff;
    margin-right: 10px;
}

.timer li:last-child {
    margin-right: 0px;
}

.timer_num {
    font-size: 48px;
    font-weight: 600;
    color: var(--theme-color);
    margin-top: 10px;
}

.timer_unit {
    margin-top: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #51545f;
}

.deal_ofthe_week_button {
    width: 140px;
    background: #1e1e27;
    margin-top: 52px;
}

.deal_ofthe_week_button:hover {
    background: #2b2b34 !important;
}

/*********************************
7. Best Sellers
*********************************/

.product_slider_container {
    width: 100%;
    height: 340px;
    margin-top: 73px;
}

.product_slider_container::after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #ffffff;
    content: "";
    z-index: 1;
}

.product_slider {
    overflow: visible !important;
}

.product_slider_item .product-item {
    height: 340px;
}

.product_slider_item {
    width: 20%;
}

.product_slider_item .product-item {
    width: 100% !important;
}

/*********************************
7.1 Slider Nav
*********************************/

.product_slider_nav {
    position: absolute;
    width: 30px;
    height: 70px;
    background: #d3d3d6;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.product_slider_container:hover .product_slider_nav {
    visibility: visible;
    opacity: 1;
}

.product_slider_nav i {
    color: #ffffff;
    font-size: 12px;
}

.product_slider_nav_left {
    top: 50%;
    left: 0;
}

.product_slider_nav_right {
    top: 50%;
    right: 0;
}

/*********************************
8. Benefit
*********************************/

.benefit {
    margin-top: 74px;
}

.benefit_row {
    padding-left: 15px;
    padding-right: 15px;
}

.benefit_col {
    padding-left: 0px;
    padding-right: 0px;
}

.benefit_item {
    height: 100px;
    background: #f3f3f3;
    border-right: solid 1px #ffffff;
    padding-left: 25px;
}

.benefit_col:last-child .benefit_item {
    border-right: none;
}

.benefit_icon i {
    font-size: 30px;
    color: var(--theme-color);
}

.benefit_content {
    padding-left: 22px;
}

.benefit_content h6 {
    text-transform: uppercase;
    line-height: 18px;
    font-weight: 500;
    margin-bottom: 0px;
}

.benefit_content p {
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 0px;
    color: #51545f;
}

/*********************************
9. Blogs
*********************************/

.blogs {
    margin-top: 72px;
}

.blogs_container {
    margin-top: 53px;
}

.blog_item {
    height: 255px;
    width: 100%;
}

.blog_background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.blog_content {
    position: absolute;
    top: 30px;
    left: 30px;
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    background: rgba(255, 255, 255, 0.9);
    padding-left: 10px;
    padding-right: 10px;
    visibility: hidden;
    opacity: 0;
    transform-origin: center center;
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -ms-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.blog_item:hover .blog_content {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.blog_title {
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 0px;
}

.blog_meta {
    font-size: 12px;
    line-height: 30px;
    font-weight: 400;
    text-transform: uppercase;
    color: #51545f;
    margin-bottom: 0px;
    margin-top: 3px;
    letter-spacing: 1px;
}

.blog_more {
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: var(--theme-color);
    border-bottom: solid 1px var(--theme-color);
    margin-top: 12px;
}

.blog_more:hover {
    color: #fe7c7f;
}

/*********************************
10. Newsletter
*********************************/

.newsletter {
    width: 100%;
    background: #f2f2f2;
    margin-top: 81px;
}

.newsletter_text {
    height: 120px;
}

.newsletter_text h4 {
    margin-bottom: 0px;
    line-height: 24px;
}

.newsletter_text p {
    margin-bottom: 0px;
    line-height: 1.7;
    color: #51545f;
}

.newsletter_form {
    height: 120px;
}

#newsletter_email {
    width: 300px;
    height: 46px;
    background: #ffffff;
    border: none;
    padding-left: 20px;
}

#newsletter_email:focus {
    border: solid 1px #7f7f7f !important;
    box-shadow: none !important;
}

:focus {
    outline: none !important;
}

#newsletter_email::-webkit-input-placeholder {
    font-size: 14px !important;
    font-weight: 400;
    color: #b9b4c7 !important;
}

#newsletter_email:-moz-placeholder

/* older Firefox*/
    {
    font-size: 14px !important;
    font-weight: 400;
    color: #b9b4c7 !important;
}

#newsletter_email::-moz-placeholder

/* Firefox 19+ */
    {
    font-size: 14px !important;
    font-weight: 400;
    color: #b9b4c7 !important;
}

#newsletter_email:-ms-input-placeholder {
    font-size: 14px !important;
    font-weight: 400;
    color: #b9b4c7 !important;
}

#newsletter_email::input-placeholder {
    font-size: 14px !important;
    font-weight: 400;
    color: #b9b4c7 !important;
}

.newsletter_submit_btn {
    width: 160px;
    height: 46px;
    border: none;
    background: var(--theme-color);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
}

.newsletter_submit_btn:hover {
    background: #fe7c7f;
}

/*********************************
11. Footer
*********************************/

.footer_nav_container {
    height: 130px;
}

.cr {
    margin-right: 48px;
}

.footer_nav li {
    display: inline-block;
    margin-right: 45px;
}

.footer_nav li:last-child {
    margin-right: 0px;
}

.footer_nav li a,
.cr {
    font-size: 14px;
    color: #51545f;
    line-height: 30px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.footer_nav li a:hover,
.cr a,
.cr i {
    color: var(--theme-color);
}

.footer_social {
    height: 130px;
}

.footer_social ul li {
    display: inline-block;
    margin-right: 10px;
}

.footer_social ul li:last-child {
    margin-right: 0px;
}

.footer_social ul li a {
    color: #51545f;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    padding: 10px;
}

.footer_social ul li:last-child a {
    padding-right: 0px;
}

.footer_social ul li a:hover {
    color: var(--theme-color);
}

/* TikTok icon styling: layered cyan/magenta accents with main black glyph */
.tiktok-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.tiktok-icon .tiktok-cyan {
    fill: #25F4EE;
    transform: translate(-1.5px, -1px);
    opacity: 0.95;
}

.tiktok-icon .tiktok-magenta {
    fill: #FE2C55;
    transform: translate(1.5px, 1px);
    opacity: 0.95;
}

.tiktok-icon .tiktok-black {
    fill: #000000;
}

.footer_social ul li a:focus .tiktok-icon,
.footer_social ul li a:hover .tiktok-icon {
    transform: scale(1.08);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

.footer_social ul li a:focus {
    outline: none;
}

.footer_social ul li a:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.18);
    border-radius: 4px;
}

.go-to-cart {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 4px;
    text-decoration: none;
    color: #fff;
    background: #28a745;
    /* green to indicate success */
}

.go-to-cart:hover {
    opacity: 0.95;
}