:root {
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Roboto', sans-serif;

    --color-primary: #0d6b38;
    --color-primary-light: #169651;
    --color-primary-dark: #094d27;
    --color-secondary: #c8102e;
    --color-secondary-light: #e62644;
    --color-secondary-dark: #9c0b22;
    --color-gradient: linear-gradient(135deg, #0d6b38 0%, #c8102e 100%);
    --color-gradient2: linear-gradient(180deg, #c8102e 0%, #0d6b38 100%);
    --color-gradient3: linear-gradient(135deg, #0d6b38 0%, #169651 50%, #c8102e 100%);
    --color-golden: #c8102e;
    --color-light-gray: #d3d3d3;
    --color-dark: #0a0b0b;
    --color-light: #f8f9fa;
}

body {
    font-family: var(--font-primary), sans-serif;
    background-color: var(--color-light);
    color: var(--color-dark);
}

a {
    text-decoration: none !important;
}

.light-gray {
    border: 1px solid var(--color-light-gray);
}


/* Utility Classes */
.primary_color {
    color: var(--color-primary) !important;
}

.secondary_color {
    color: var(--color-secondary) !important;
}

.button1 {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--color-primary) !important;
    transition: all 0.3s ease;
}

.button1:hover {
    background-color: var(--color-primary-dark) !important;
    color: #ffffff !important;
    border-color: var(--color-primary-dark) !important;
}

.button2 {
    background-color: var(--color-secondary) !important;
    color: #ffffff !important;
    border: 1px solid var(--color-secondary) !important;
    transition: all 0.3s ease;
}

.button2:hover {
    background-color: var(--color-secondary-dark) !important;
    color: #ffffff !important;
    border-color: var(--color-secondary-dark) !important;
}

.tab-btn-style {
    color: var(--color-dark) !important ;
}

.tab-btn-style.active {
    background-color: var(--color-primary) !important;
    color: var(--color-light) !important;
    border: none !important;
}

.button-outline {
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    transition: all 0.3s ease;
}
.button-outline:hover {
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.button-outline-red {
    color: var(--color-secondary) !important;
    border: 1px solid var(--color-secondary) !important;
    transition: all 0.3s ease;
}
.button-outline-red:hover {
    border: 1px solid var(--color-secondary) !important;
    background-color: var(--color-secondary) !important;
    color: #ffffff !important;
}

.grey-text {
    color: var(--color-light-gray) !important;
}
.golden-text {
    color: var(--color-secondary) !important;
}

.gradient-bg-1 {
    color: var(--color-dark);
    background: linear-gradient(135deg, #e8f5ed, #fdebee);
}

.gradient-bg-2 {
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-light) !important;
}
.gradient-bg-2:hover {
    border: 1px solid var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
}

.gradient-bg-primary {
    background: var(--color-gradient);
}

.gradient-text {
    background: var(--color-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.primary-border-style {
    border: 4px solid var(--color-primary) !important;
}

.bg-gradient-custom {
    background: var(--color-gradient3);
}

.bg-light-primary {
    background: rgba(13, 107, 56, 0.12) !important;
}

.bg-light-secondary {
    background: rgba(200, 16, 46, 0.12) !important;
}


.sidebar-button.active {
    background-color: var(--color-primary) !important;
    color: var(--color-light) !important;
    border: none !important;
}

.sidebar-button:not(.active) {
    background-color: var(--color-light) !important;
    color: #000 !important;
    border: 1px solid var(--color-light-gray) !important;
}

.chat-user-link.active {
    background-color: var(--color-primary-light) !important;
    border: 0 solid var(--color-primary-light) !important;
    border-radius: 0.5rem !important;
}


.profile-section {
    display: none;
}
.profile-section.active {
    display: block;
}

.r-clip {
    background: var(--color-gradient2) !important;
    clip-path: polygon(
        0 0,
        15px 0,
        calc(100% - 15px) 0,
        100% 0,
        100% 70%,
        50% 100%,
        0 70%
    );
}

.glossy-input {
    background: #fff;
    backdrop-filter: blur(8px);
    border: 2px solid transparent;
    padding: 0.5rem 1.25rem;
}
.bg-glass {
    background: transparent;
    backdrop-filter: blur(10px);
}
.toggle-icon {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.2rem;
    color: #6c757d;
}