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

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

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



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

/*******
0. Color
********/
:root {
    --light: #F9F9F9;
    --blue: #3C91E6;
    --light-blue: #CFE8FF;
    --grey: #eee;
    --dark-grey: #AAAAAA;
    --dark: #342E37;
	--black: #0b0b0b;
    --red: #DB504A;
    --yellow: #FFCE26;
    --light-yellow: #FFF2C6;
    --orange: #FD7238;
    --light-orange: #FFE0D3;

    /* Classic Gold Variations */
    --gold-light: linear-gradient(135deg, #F9E154 0%, #FFF2A8 50%, #F9E154 100%);
    --gold-dark: linear-gradient(135deg, #8B6914 0%, #B8860B 50%, #8B6914 100%);
    --gold-mid: linear-gradient(135deg, #C5A059 0%, #FDE876 50%, #C5A059 100%);

    /* Multi-tone Golds */
    --gold-royal: linear-gradient(135deg, #8B6914 0%, #C5A059 25%, #FDE876 50%, #FFF8B0 75%, #D4AF37 100%);
    --gold: linear-gradient(70deg, #8B6914 0%,#C5A059 10%,#E5C665 20%,#FDE876 35%,#FFF8B0 50%,#FDE876 65%,#D4AF37 80%,#B8860B 100%);
  
    /* Special Effects */
    --gold-metallic: linear-gradient(135deg, #8B6914 0%, #B8860B 15%, #DAA520 30%, #F0C040 45%, #FFDF00 60%, #FFF8DC 75%, #FFDF00 85%, #DAA520 100%);
    --gold-bronze: linear-gradient(135deg, #6B4C1A 0%, #8B6914 25%, #B8860B 50%, #DAA520 75%, #B8860B 100%);
}

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

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

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

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 23px;
    font-weight: 400;
    background: var(--light);
    color: var(--gold-light);
}

div {
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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, .01) 0 0 1px;
    text-shadow: rgba(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, .01) 0 0 1px;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}

p a:active {
    position: relative;
    color: var(--gold-dark);
}

p a:hover {
    color: var(--gold-light);
    background: #fde0db;
}

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

::selection {
    background: #fde0db;
    color: var(--gold-light);
}

p::selection {
    background: #fde0db;
}

h1 {
    font-size: 72px;
}

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, .01) 0 0 1px;
    text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {}

::-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;
}

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

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

.top_nav {
    width: 100%;
    height: 50px;
    background: var(--gold-royal);
}

.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;
    vertical-align: middle;
    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;
    vertical-align: middle;
    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;
    vertical-align: middle;
    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:black;
    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: #C5A059;
}

.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: var(--gold-dark);
    -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: var(--gold-mid);
}

.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(--gold-dark);
    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: #C5A059;
}

.hamburger_menu {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.95);
    z-index: 10;
    -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_menu.active {
    right: 0;
}

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

.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: #C5A059;
}

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

.menu_item {
    display: block;
    position: relative;
    border-bottom: solid 1px #b5aec4;
    vertical-align: middle;
}

.menu_item>a {
    display: block;
    color: #1e1e27;
    font-weight: 500;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-transform: uppercase;
}

.menu_item>a:hover {
    color: #C5A059;
}

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

.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 {
    display: inline-block;
    font-size: 0;
    /* Removes any extra spacing */
    line-height: 0;
    /* Removes any extra line height */
}

.logo_container img {
    max-height: 50px;
    /* Adjust based on your logo size */
    width: auto;
    height: auto;
    vertical-align: middle;
}

.logo_container a:hover img {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

@media (max-width: 767px) {
    .logo_container img {
        max-height: 40px;
        /* Smaller logo on mobile */
    }
}



.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(--gold-mid);
	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: var(--gold-light) !important;
}
.red_button a
{
	display: block;
	color: var(--black);
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 500;
	text-align: center;
	line-height: 40px;
	width: 100%;
}
.shop_now_button
{
	width: 140px;
	margin-top: 32px;
}


/*********************************
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(--gold-light);
}

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


/*********************************
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


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

#newsletter_email::-moz-placeholder


    {
    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(--gold-royal);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
}

.newsletter_submit_btn:hover {
    background: var(--gold-mid);
}
*/
/*********************************
11. Footer
*********************************/
.footer {
    background: #f2f2f2;
}
.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: #C5A059;
}

.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: #C5A059;
}