@font-face {
    font-family: 'Mulish';
    src: url(../fonts/mulish/Mulish-Regular.ttf);
}

@font-face {
    font-family: 'Marcellus';
    src: url(../fonts/marcellus/Marcellus-Regular.ttf);
}
/* ===== CSS VARIABLES ===== */
:root {
    --gold: #C9A96E;
    --gold-light: #E8D5A3;
    --gold-dark: #9A7240;
    --black: #010302;
    --dark: #111111;
    --dark2: #1A1A1A;
    --dark3: #222222;
    --grey: #555555;
    --grey-lt: #888888;
    --white: #FFFFFF;
    --cream: #FAF7F2;
    --cream2: #F0EBE1;
    --black-soft: #111111;
    --cream: #f5f0e8;
    --cream-dim: rgba(245, 240, 232, 0.6);
    --gold: #c9a96e;
    --gold-light: #dfc28e;
    --gold-dim: rgba(201, 169, 110, 0.15);
    --gold-dim2: rgba(201, 169, 110, 0.08);
    --white: #ffffff;
    --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    /* Nav sizes */

    --font-display: 'Marcellus';
    --font-body: 'Mulish', sans-serif;
    --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --shadow-gold: 0 0 40px rgba(201, 169, 110, 0.15);
}

/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    background: var(--black);
    color: var(--cream);
    overflow-x: hidden;
    line-height: 1.7;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover{
    text-decoration: none;
    color: var(--dark);
}
ul {
    list-style: none;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: var(--gold-dark);
    border-radius: 4px;
}



h1,
h2,
h3 {
    color: var(--primaryTextColor);
    font-family: var(--font-display);
}

h4,
h5,
h6,
p {
    color: var(--secondaryTextColor);
    font-family: var(--font-body);
}

#sectionOurProduct .container-fluid{
    padding: 4% 0px 0px 0px;
    margin: 0px;
}

.paggination h5 {
    font-size: 14px;
    font-family: var(--fontFamilyMulish);
    font-weight: bold;
}

.paggination a {
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    color: var(--themeColor);
}

#hiddenSection{
    height: 0px;
}
@media (max-width: 600px) {
  #hiddenSection{
    height: 40px; 
}
/*Common Section*/