:root {

    --bg:
        #061116;

    --bg-dark:
        #020a0e;

    --bg-light:
        #0a1d23;

    --gold:
        #c99a4b;

    --gold-light:
        #e2b96b;

    --gold-dark:
        #9a6d2c;

    --cream:
        #eee8dc;

    --text:
        #c4c0b7;

    --muted:
        #888b87;

    --border:
        rgba(201,154,75,.35);

}


* {
    box-sizing:
        border-box;
}


html {
    scroll-behavior:
        smooth;
}


body {

    margin:
        0;

    background:
        #061116;

    color:
        var(--cream);

    font-family:
        'Montserrat',
        sans-serif;

    font-size:
        13px;

}


/* =====================================================
   TEXTURE
===================================================== */

body::before {

    content:
        "";

    position:
        fixed;

    inset:
        0;

    z-index:
        9999;

    pointer-events:
        none;

    opacity:
        .035;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

}


/* =====================================================
   TOPBAR
===================================================== */

.topbar {

    height:
        31px;

    background:
        #02090d;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    color:
        var(--gold-light);

    font-size:
        10px;

    letter-spacing:
        .4px;

}


.topbar-content {

    height:
        31px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        22px;

}


.topbar i {

    margin-right:
        6px;

}


.top-divider {

    width:
        1px;

    height:
        12px;

    background:
        rgba(201,154,75,.45);

}


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

.site-header {

    height:
        80px;

    background:
        rgba(2,12,17,.97);

    border-bottom:
        1px solid rgba(201,154,75,.18);

    position:
        relative;

    z-index:
        100;

}


.header-inner {

    height:
        80px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


/* LOGO */

.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    color:
        var(--gold-light);

    text-decoration:
        none;

}


.logo-symbol {

    width:
        51px;

    height:
        51px;

    border:
        1px solid var(--gold);

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        36px;

    position:
        relative;

}


.logo-symbol::after {

    content:
        "";

    position:
        absolute;

    inset:
        4px;

    border:
        1px solid rgba(201,154,75,.45);

    border-radius:
        50%;

}


.logo-symbol span {

    position:
        relative;

    z-index:
        2;

}


.logo-text {

    display:
        flex;

    flex-direction:
        column;

}


.logo-text strong {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        23px;

    letter-spacing:
        2px;

    font-weight:
        500;

}


.logo-text small {

    font-size:
        7px;

    letter-spacing:
        2px;

    color:
        #8d8a83;

    margin-top:
        -2px;

}


/* MENU */

.main-menu {

    display:
        flex;

    align-items:
        center;

    gap:
        36px;

}


.main-menu a {

    height:
        80px;

    display:
        flex;

    align-items:
        center;

    color:
        #ddd8cf;

    text-decoration:
        none;

    font-size:
        11px;

    position:
        relative;

    transition:
        .3s;

}


.main-menu a:hover,
.main-menu a.active {

    color:
        var(--gold-light);

}


.main-menu a.active::after {

    content:
        "";

    position:
        absolute;

    bottom:
        18px;

    left:
        0;

    right:
        0;

    height:
        1px;

    background:
        var(--gold);

}


/* ACTIONS */

.header-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        4px;

}


.header-actions button {

    width:
        39px;

    height:
        39px;

    border:
        0;

    background:
        transparent;

    color:
        var(--gold-light);

    font-size:
        20px;

    cursor:
        pointer;

    position:
        relative;

}


.header-actions button:hover {

    color:
        #fff;

}


.cart-button span {

    position:
        absolute;

    top:
        1px;

    right:
        1px;

    width:
        17px;

    height:
        17px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--gold);

    color:
        #111;

    font-size:
        8px;

}


.mobile-button {

    display:
        none;

}


/* =====================================================
   HERO
===================================================== */

.hero {

    height:
        395px;

    position:
        relative;

    overflow:
        hidden;

    border-bottom:
        1px solid rgba(201,154,75,.2);

}


.hero-background {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(2,12,16,.98) 0%,
            rgba(2,12,16,.88) 35%,
            rgba(2,12,16,.3) 70%,
            rgba(2,12,16,.45) 100%
        ),
        url("../images/hero-stone.jpg")
        center/cover
        no-repeat;

}


.hero-background::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 70% 45%,
            transparent 0,
            rgba(0,0,0,.25) 55%,
            rgba(0,0,0,.45) 100%
        );

}


.hero-content {

    position:
        relative;

    z-index:
        2;

    height:
        395px;

    width:
        50%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

}


.hero-mark {

    width:
        84px;

    height:
        84px;

    border:
        1px solid var(--gold);

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--gold-light);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        62px;

    box-shadow:
        0 0 35px rgba(201,154,75,.08);

}


.hero-brand {

    font-family:
        'Cormorant Garamond',
        serif;

    color:
        var(--gold-light);

    font-size:
        47px;

    letter-spacing:
        6px;

    line-height:
        .9;

    margin-top:
        4px;

}


.hero-subtitle {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        19px;

    letter-spacing:
        5px;

    color:
        var(--cream);

    margin-top:
        7px;

}


.hero-line {

    width:
        190px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        5px 0 8px;

    color:
        var(--gold);

}


.hero-line::before,
.hero-line::after {

    content:
        "";

    flex:
        1;

    height:
        1px;

    background:
        var(--gold);

}


.hero-line span {

    font-size:
        11px;

}


.hero-content p {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        17px;

    line-height:
        1.35;

    color:
        #dedbd4;

    margin:
        0 0 17px;

}


/* GOLD BUTTON */

.gold-button {

    height:
        38px;

    padding:
        0 22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        25px;

    border:
        1px solid var(--gold);

    color:
        var(--gold-light);

    text-decoration:
        none;

    font-size:
        10px;

    transition:
        .3s;

}


.gold-button:hover {

    background:
        var(--gold);

    color:
        #071116;

}


.gold-button i {

    font-size:
        15px;

}


/* HERO ARROWS */

.hero-arrow {

    position:
        absolute;

    top:
        50%;

    transform:
        translateY(-50%);

    width:
        32px;

    height:
        32px;

    border:
        1px solid var(--gold);

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--gold-light);

    z-index:
        3;

}


.hero-prev {

    left:
        18px;

}


.hero-next {

    right:
        18px;

}


/* =====================================================
   FEATURES
===================================================== */

.features {

    background:
        #031116;

    border-bottom:
        1px solid rgba(201,154,75,.15);

}


.feature {

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        12px 18px;

    border-right:
        1px solid rgba(201,154,75,.18);

}


.feature-icon {

    width:
        40px;

    color:
        var(--gold);

    font-size:
        29px;

}


.feature h4 {

    margin:
        0 0 4px;

    color:
        var(--cream);

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        .5px;

}


.feature p {

    margin:
        0;

    color:
        #969893;

    font-size:
        8px;

    line-height:
        1.5;

}


/* =====================================================
   SECTION
===================================================== */

.collections,
.products {

    background:
        radial-gradient(
            ellipse at center,
            #09242b 0%,
            #06181e 55%,
            #041116 100%
        );

}


.collections {

    padding:
        30px 0 25px;

}


.products {

    padding:
        10px 0 35px;

}


.section-heading {

    text-align:
        center;

    margin-bottom:
        22px;

}


.section-heading h2 {

    font-family:
        'Cormorant Garamond',
        serif;

    color:
        var(--gold-light);

    font-size:
        24px;

    font-weight:
        600;

    letter-spacing:
        2px;

    margin:
        0;

}


.section-heading p {

    color:
        #888c87;

    font-size:
        9px;

    margin:
        6px 0 0;

}


.heading-line {

    width:
        100px;

    height:
        1px;

    background:
        var(--gold);

    margin:
        8px auto 0;

    position:
        relative;

}


.heading-line span {

    position:
        absolute;

    left:
        50%;

    top:
        -8px;

    transform:
        translateX(-50%);

    padding:
        0 8px;

    background:
        #071b21;

    color:
        var(--gold);

    font-size:
        9px;

}


/* =====================================================
   COLLECTION CARDS
===================================================== */

.collection-card {

    display:
        block;

    position:
        relative;

    height:
        205px;

    overflow:
        hidden;

    border:
        1px solid rgba(201,154,75,.38);

    text-decoration:
        none;

    background:
        #06161c;

}


.collection-image {

    position:
        absolute;

    inset:
        0;

}


.collection-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        .6s;

}


.collection-card:hover img {

    transform:
        scale(1.06);

}


.collection-card::after {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            0deg,
            rgba(2,10,13,.95),
            rgba(2,10,13,.1) 65%
        );

}


.collection-overlay {

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        2;

    padding:
        18px;

    text-align:
        center;

}


.collection-icon {

    color:
        var(--gold);

    font-size:
        25px;

    margin-bottom:
        4px;

}


.collection-overlay h3 {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        16px;

    letter-spacing:
        1px;

    color:
        var(--gold-light);

    margin:
        0 0 5px;

}


.collection-overlay span {

    color:
        #c6c3bc;

    font-size:
        8px;

}


.collection-overlay span i {

    margin-left:
        5px;

}


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

.product-card {

    border:
        1px solid rgba(201,154,75,.35);

    background:
        rgba(3,16,21,.9);

    transition:
        .35s;

}


.product-card:hover {

    border-color:
        var(--gold);

    transform:
        translateY(-3px);

}


.product-image {

    height:
        205px;

    position:
        relative;

    overflow:
        hidden;

}


.product-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        .5s;

}


.product-card:hover
.product-image img {

    transform:
        scale(1.05);

}


.favorite {

    position:
        absolute;

    right:
        10px;

    top:
        9px;

    width:
        29px;

    height:
        29px;

    border:
        0;

    background:
        rgba(1,10,13,.55);

    color:
        var(--gold-light);

    border-radius:
        50%;

}


.favorite.active {

    color:
        #d59c45;

}


.product-label {

    position:
        absolute;

    left:
        10px;

    top:
        10px;

    background:
        var(--gold);

    color:
        #111;

    padding:
        5px 8px;

    font-size:
        7px;

    letter-spacing:
        .5px;

}


.product-content {

    text-align:
        center;

    padding:
        10px;

}


.product-category {

    color:
        var(--gold);

    font-size:
        7px;

    letter-spacing:
        1px;

}


.product-content h3 {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        17px;

    color:
        var(--cream);

    letter-spacing:
        1px;

    margin:
        2px 0;

}


.product-content p {

    font-size:
        8px;

    color:
        #8e918c;

    margin:
        0 0 5px;

}


.product-price {

    font-family:
        'Cormorant Garamond',
        serif;

    color:
        var(--gold-light);

    font-size:
        17px;

    margin-bottom:
        8px;

}


.product-bottom {

    display:
        flex;

    justify-content:
        center;

    gap:
        5px;

}


.quantity {

    display:
        flex;

    height:
        29px;

    border:
        1px solid var(--gold);

}


.quantity button {

    width:
        25px;

    border:
        0;

    background:
        transparent;

    color:
        var(--gold-light);

}


.quantity span {

    width:
        22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        9px;

}


.add-cart {

    border:
        1px solid var(--gold);

    background:
        linear-gradient(
            135deg,
            #b77d2d,
            #d5a24f
        );

    color:
        #16100a;

    height:
        29px;

    padding:
        0 11px;

    font-size:
        8px;

}


.add-cart.added {

    background:
        #dfb565;

}


.all-products {

    text-align:
        center;

    margin-top:
        23px;

}


.outline-button {

    height:
        33px;

    padding:
        0 22px;

    border:
        1px solid var(--gold);

    display:
        inline-flex;

    align-items:
        center;

    gap:
        20px;

    color:
        var(--gold-light);

    text-decoration:
        none;

    font-size:
        9px;

}


.outline-button:hover {

    background:
        var(--gold);

    color:
        #071116;

}


/* =====================================================
   STORY
===================================================== */

.brand-story {

    min-height:
        260px;

    position:
        relative;

    overflow:
        hidden;

    border-top:
        1px solid rgba(201,154,75,.18);

    border-bottom:
        1px solid rgba(201,154,75,.18);

}


.story-background {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(2,11,15,.97) 0%,
            rgba(2,11,15,.86) 40%,
            rgba(2,11,15,.2) 100%
        ),
        url("../images/story-stone.jpg")
        center/cover
        no-repeat;

}


.story-content {

    position:
        relative;

    z-index:
        2;

    padding:
        40px 0;

    max-width:
        420px;

}


.story-small {

    color:
        var(--gold);

    font-size:
        9px;

    letter-spacing:
        3px;

}


.story-content h2 {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        38px;

    font-weight:
        500;

    line-height:
        .9;

    color:
        var(--gold-light);

    margin:
        5px 0 10px;

    letter-spacing:
        2px;

}


.story-line {

    width:
        90px;

    height:
        1px;

    background:
        var(--gold);

    margin-bottom:
        12px;

}


.story-content p {

    color:
        #b4b2ab;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        15px;

    line-height:
        1.35;

    margin:
        0 0 7px;

}


/* =====================================================
   NEWSLETTER
===================================================== */

.newsletter {

    background:
        #031016;

    border-bottom:
        1px solid rgba(255,255,255,.05);

}


.newsletter-inner {

    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

}


.newsletter-icon {

    font-size:
        28px;

    color:
        var(--gold);

}


.newsletter-text {

    flex:
        1;

}


.newsletter-text h3 {

    margin:
        0 0 3px;

    font-size:
        9px;

    font-weight:
        500;

    letter-spacing:
        .5px;

}


.newsletter-text p {

    margin:
        0;

    color:
        #858985;

    font-size:
        8px;

}


.newsletter-form {

    display:
        flex;

    width:
        310px;

    height:
        31px;

}


.newsletter-form input {

    flex:
        1;

    border:
        1px solid rgba(201,154,75,.4);

    background:
        #07181e;

    color:
        #fff;

    padding:
        0 10px;

    outline:
        none;

    font-size:
        8px;

}


.newsletter-form button {

    width:
        80px;

    border:
        0;

    background:
        linear-gradient(
            135deg,
            #b77c2b,
            #d6a24e
        );

    color:
        #15100b;

    font-size:
        8px;

}

/* =====================================================
   PREMIUM FOOTER TYPOGRAPHY
===================================================== */

.footer {
    background:
        linear-gradient(
            180deg,
            #031116 0%,
            #020c11 100%
        );

    padding-top: 48px;
}


/* ---------------------------------------------
   FOOTER BRAND
--------------------------------------------- */

.footer-logo {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.footer-symbol {
    width: 50px;
    height: 50px;

    border: 1px solid var(--gold);
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--gold-light);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size: 32px;

    line-height: 1;

    position: relative;
}

.footer-symbol::after {
    content: "";

    position: absolute;

    inset: 4px;

    border: 1px solid
        rgba(201,154,75,.35);

    border-radius: 50%;
}


.footer-logo > div:last-child {
    display: flex;
    flex-direction: column;
}


.footer-logo strong {
    font-family:
        'Cormorant Garamond',
        serif;

    font-size: 23px;

    font-weight: 500;

    letter-spacing: 2px;

    line-height: 1;

    color:
        var(--gold-light);
}


.footer-logo small {
    display: block;

    margin-top: 5px;

    font-family:
        'Montserrat',
        sans-serif;

    font-size: 7px;

    font-weight: 500;

    letter-spacing: 2.5px;

    color:
        #858a87;

    line-height: 1;
}


/* ---------------------------------------------
   BRAND DESCRIPTION
--------------------------------------------- */

.footer > .container > .row > .col-lg-3:first-child > p {
    max-width: 255px;

    margin:
        0 0 18px;

    color:
        #aaa9a2;

    font-family:
        'Montserrat',
        sans-serif;

    font-size: 11px;

    font-weight: 300;

    line-height: 1.8;

    letter-spacing: .1px;
}


/* ---------------------------------------------
   FOOTER COLUMN HEADINGS
--------------------------------------------- */

.footer h4 {
    position: relative;

    color:
        var(--gold-light);

    font-family:
        'Cormorant Garamond',
        serif;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 1.2px;

    line-height: 1;

    margin:
        4px 0 19px;

    padding-bottom: 10px;
}


.footer h4::after {
    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 32px;

    height: 1px;

    background:
        var(--gold);
}


/* ---------------------------------------------
   FOOTER LINKS
--------------------------------------------- */

.footer ul {
    padding: 0;
    margin: 0;

    list-style: none;
}


.footer li {
    margin-bottom: 10px;
}


.footer li a {
    position: relative;

    display: inline-block;

    color:
        #aaa9a3;

    text-decoration: none;

    font-family:
        'Montserrat',
        sans-serif;

    font-size: 10px;

    font-weight: 400;

    line-height: 1.5;

    letter-spacing: .1px;

    transition:
        color .25s ease,
        padding-left .25s ease;
}


.footer li a::before {
    content: "›";

    position: absolute;

    left: -12px;

    top: 0;

    color:
        var(--gold);

    opacity: 0;

    transition:
        opacity .25s ease,
        left .25s ease;
}


.footer li a:hover {
    color:
        var(--gold-light);

    padding-left: 5px;
}


.footer li a:hover::before {
    left: -8px;
    opacity: 1;
}


/* ---------------------------------------------
   CONTACT
--------------------------------------------- */

.contact {
    margin-top: 2px;
}


.contact > div {
    display: flex;

    align-items: flex-start;

    gap: 11px;

    color:
        #aaa9a3;

    font-family:
        'Montserrat',
        sans-serif;

    font-size: 10px;

    font-weight: 400;

    line-height: 1.5;

    margin-bottom: 14px;
}


.contact i {
    width: 17px;

    flex-shrink: 0;

    color:
        var(--gold);

    font-size: 15px;

    margin-top: 1px;
}


/* ---------------------------------------------
   SOCIAL ICONS
--------------------------------------------- */

.socials {
    display: flex;

    align-items: center;

    gap: 10px;
}


.socials a {
    width: 31px;
    height: 31px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid
        rgba(201,154,75,.35);

    border-radius: 50%;

    color:
        var(--gold);

    text-decoration: none;

    font-size: 13px;

    transition:
        all .3s ease;
}


.socials a:hover {
    background:
        var(--gold);

    border-color:
        var(--gold);

    color:
        #071116;

    transform:
        translateY(-2px);
}


/* ---------------------------------------------
   FOOTER BOTTOM
--------------------------------------------- */

.footer-bottom {
    margin-top: 40px;

    border-top:
        1px solid
        rgba(255,255,255,.07);
}


.footer-bottom .container {
    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.footer-bottom .container > div:first-child {
    color:
        #777b78;

    font-family:
        'Montserrat',
        sans-serif;

    font-size: 9px;

    font-weight: 400;

    letter-spacing: .2px;
}


.payments {
    display: flex;

    align-items: center;

    gap: 20px;

    color:
        #777b78;

    font-family:
        'Montserrat',
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .5px;
}


.payments span {
    letter-spacing: -4px;
}


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

@media (max-width: 991px) {

    .footer {
        padding-top: 40px;
    }

    .footer h4 {
        margin-top: 15px;
    }

}


@media (max-width: 767px) {

    .footer {
        padding-top: 35px;
    }

    .footer-logo {
        margin-bottom: 15px;
    }

    .footer-logo strong {
        font-size: 21px;
    }

    .footer > .container > .row > .col-lg-3:first-child > p {
        max-width: 300px;

        font-size: 10px;

        line-height: 1.7;
    }

    .footer h4 {
        font-size: 15px;

        margin-top: 20px;

        margin-bottom: 17px;
    }

    .footer li a {
        font-size: 10px;
    }

    .contact > div {
        font-size: 10px;
    }

    .footer-bottom {
        margin-top: 30px;
    }

    .footer-bottom .container {
        min-height: auto;

        padding-top: 15px;
        padding-bottom: 15px;

        flex-direction: column;

        gap: 12px;

        text-align: center;
    }

}
/* =====================================================
   BACK TOP
===================================================== */

.back-top {

    position:
        fixed;

    right:
        25px;

    bottom:
        20px;

    width:
        34px;

    height:
        34px;

    border:
        1px solid var(--gold);

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--gold-light);

    background:
        #06161d;

    text-decoration:
        none;

    opacity:
        0;

    visibility:
        hidden;

    transition:
        .3s;

    z-index:
        500;

}


.back-top.show {

    opacity:
        1;

    visibility:
        visible;

}


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

.mobile-menu {

    width:
        290px !important;

    background:
        #031219;

}


.mobile-logo {

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        25px;

    letter-spacing:
        2px;

    color:
        var(--gold-light);

}


.mobile-menu a {

    display:
        block;

    color:
        #ddd9d0;

    text-decoration:
        none;

    padding:
        14px 0;

    border-bottom:
        1px solid rgba(255,255,255,.07);

    font-size:
        11px;

}


.mobile-menu a i {

    color:
        var(--gold);

    margin-right:
        8px;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:991px) {

    .main-menu {
        display:
            none;
    }

    .mobile-button {
        display:
            block;
    }

    .hero-content {
        width:
            60%;
    }

    .feature {
        border-bottom:
            1px solid rgba(201,154,75,.15);
    }

}


@media(max-width:767px) {

    .topbar-content span:nth-of-type(3),
    .topbar-content .top-divider:nth-of-type(2) {
        display:
            none;
    }


    .site-header,
    .header-inner {
        height:
            68px;
    }


    .logo-text {
        display:
            none;
    }


    .header-actions button:nth-child(2),
    .header-actions button:nth-child(3) {
        display:
            none;
    }


    .hero {

        height:
            430px;

    }


    .hero-background {

        background:
            linear-gradient(
                90deg,
                rgba(2,12,16,.93),
                rgba(2,12,16,.62)
            ),
            url("../images/hero-stone.jpg")
            center/cover;

    }


    .hero-content {

        width:
            100%;

        height:
            430px;

    }


    .hero-brand {

        font-size:
            37px;

        letter-spacing:
            4px;

    }


    .hero-subtitle {

        font-size:
            15px;

    }


    .hero-content p {

        font-size:
            15px;

    }


    .collection-card {

        height:
            220px;

    }


    .product-image {

        height:
            250px;

    }


    .newsletter-inner {

        padding:
            14px 0;

        flex-wrap:
            wrap;

    }


    .newsletter-text {

        width:
            calc(100% - 55px);

        flex:
            none;

    }


    .newsletter-form {

        width:
            100%;

    }


    .footer-bottom .container {

        flex-direction:
            column;

        gap:
            8px;

        padding:
            10px 0;

    }

}


@media(max-width:400px) {

    .hero-brand {

        font-size:
            31px;

    }


    .hero-mark {

        width:
            70px;

        height:
            70px;

        font-size:
            52px;

    }

}