/* :root {
    --primary-color: #956b10;
    --secondary-color: #F1D9A8;
    --accent-color: #E0A526;

    --heading-color: #624f09;
    --text-color: #5A4636;

    --light-bg: #FBF5EA;
    --white: #FFFFFF;

    --button-color: #f9b908;
    --button-hover: #d3900b;

    --border-color: #EADFCB;

    --gradient: linear-gradient(135deg, #C2571A 0%, #E0A526 60%, #F1D9A8 100%);

    --hero-overlay: linear-gradient(135deg,
            color-mix(in srgb, var(--heading-color) 88%, transparent) 0%,
            color-mix(in srgb, var(--primary-color) 60%, transparent) 55%,
            color-mix(in srgb, var(--heading-color) 90%, transparent) 100%);

    --shadow-sm: 0 2px 10px rgba(43, 26, 15, 0.08);
    --shadow-md: 0 8px 25px rgba(43, 26, 15, 0.12);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
} */


:root {

    --primary-color: #8B1E1E;
    --secondary-color: #EFE3C7;
    --accent-color: #D4A017;

    --heading-color: #3A1414;
    --text-color: #4A3B2E;

    --light-bg: #FBF6EC;
    --white: #FFFFFF;

    --button-color: #8B1E1E;
    --button-hover: linear-gradient(135deg,
            var(--primary-color) 0%,
            var(--heading-color) 50%,
            var(--primary-color) 100%);

    --border-color: #E7D9BA;

    --gradient: linear-gradient(135deg, #8B1E1E 0%, #D4A017 60%, #EFE3C7 100%);

    --hero-overlay: linear-gradient(135deg,
            color-mix(in srgb, var(--heading-color) 88%, transparent) 0%,
            color-mix(in srgb, var(--primary-color) 60%, transparent) 55%,
            color-mix(in srgb, var(--heading-color) 90%, transparent) 100%);

    --shadow-sm: 0 2px 10px rgba(58, 20, 20, 0.08);
    --shadow-md: 0 8px 25px rgba(58, 20, 20, 0.12);

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
}

.animated-button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--button-color) !important;
}

.animated-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background: var(--button-hover);
    background-size: 200% 200%;

    opacity: 0;
    transition: opacity 0.35s ease;
}

.animated-button:hover::before {
    opacity: 1;
    animation: buttonGradient 1.5s ease infinite;
}

.animated-button {
    color: var(--white) !important;
}

.animated-button i,
.animated-button {
    color: var(--white) !important;
}

@keyframes buttonGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

#mobileMenuBtn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}