/* ======================================
   🎨 Global Color Variables
   ====================================== */
:root {
    --primary: #dfa31f; /* Gold */
    --primary-light: #173252; /* Deep navy blue */
    --accent: #e7d188; /* Soft gold accent */
    --accent-light: #173252; /* Navy accent */
    --white: #ffffff; /* Pure white */
    --secondary: #f8f9fa; /* Light background gray */
    --text: #ffffff; /* Default text (white) */
    --text-light: #dfa31f; /* Highlighted gold text */
    --border: #dee2e6; /* Neutral border gray */
    --success: #28a745; /* Success green */
}

/* ======================================
   🧩 Font and Basic Styling
   ====================================== */
@font-face {
    font-family: 'FeelingPassionate';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/FeelingPassionateRegular-gxp34.woff) format('woff')
}

/* ======================================
   🧭 Navigation / Active State
   ====================================== */
.active {
    background-color: var(--primary) !important;
}

/* ======================================
   🖋️ Typography and Color Utilities
   ====================================== */
.rlc-new-color {
    color: var(--primary);
}

.rlc-title {
    font-family: 'FeelingPassionate', sans-serif !important;
    font-size: 20px;
    color: var(--primary);
}

.rlc-text-white {
    color: var(--text);
}

    .rlc-text-white:hover {
        color: var(--white);
    }

.rlc-color {
    color: var(--primary);
}

/* ======================================
   🎨 Background and Content Colors
   ====================================== */
.rlc-background {
    background: var(--primary-light);
}

.rlc-content-bg {
    background: var(--primary);
}

.rlc-content-color {
    color: var(--primary-light);
}

/* ======================================
   🔘 Buttons
   ====================================== */
.btn-rlc {
    background-color: var(--primary);
    color: var(--primary-light);
    border: none;
    border-radius: 8px;
    font-weight: 200;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 6px rgba(23, 50, 82, 0.2);
}

    .btn-rlc:hover {
        background-color: var(--primary);
        color: var(--white);
        transform: translateY(-2px);
        box-shadow: 0 6px 10px rgba(23, 50, 82, 0.3);
        outline: none;
    }

.rlc-btn-search {
    box-shadow: none;
}

    .rlc-btn-search:hover {
        box-shadow: none;
    }

/* ======================================
   ➕ Floating Add Button
   ====================================== */
.floating-box {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 70px;
    z-index: 999;
}

    .floating-box .btn-add {
        z-index: 999;
        outline: none;
        position: fixed;
        bottom: 15px;
        right: 15px;
        width: 60px;
        height: 60px;
        border-radius: 100px;
        box-shadow: 0px 1px 1px #838383;
        transition: .3s ease all;
        background-color: var(--primary);
        color: var(--white);
        font-size: 20px;
    }

        .floating-box .btn-add:hover {
            width: 65px;
            height: 65px;
            transition: .3s ease all;
            background-color: var(--accent);
        }