/* ==============================
   🧱 Global Variables & Colors
   ============================== */
:root {
    --color-green: #1d9942;
    --color-yellow: #e2d392;
    --color-white: #ffffff;
    --color-black: #1e1e1e;
    --color-gray: #f5f5f5;

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

    --transition: all 0.3s ease;
}

/* ==============================
   🧰 Helper Classes
   ============================== */

/* Text Colors */
.text-green {
    color: var(--color-green) !important;
}

.text-yellow {
    color: var(--color-yellow) !important;
}

/* Background Colors */
.bg-green {
    background-color: var(--color-green) !important;
}

.bg-yellow {
    background-color: var(--color-yellow) !important;
}

/* Borders */
.border-green {
    border: 2px solid var(--color-green);
}

/* Rounded */
.rounded-sm {
    border-radius: var(--radius-sm);
}
.rounded-md {
    border-radius: var(--radius-md);
}
.rounded-lg {
    border-radius: var(--radius-lg);
}

/* Hover Transitions */
.transition {
    transition: var(--transition);
}

.hover-up:hover {
    transform: translateY(-3px);
    transition: var(--transition);
}

/* Shadows */
.shadow-soft {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.shadow-strong {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 10px 22px;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}

.btn-green {
    background-color: var(--color-green);
    color: var(--color-white);
}
.btn-green:hover {
    background-color: #168536;
}

.btn-yellow {
    background-color: var(--color-yellow);
    color: var(--color-black);
}
.btn-yellow:hover {
    opacity: 0.9;
}

/* ==============================
   ✨ Utility Layout Helpers
   ============================== */

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* Mobile Menu */
.mobile-menu {
    display: none;
}
.mobile-menu.active {
    display: block;
}