*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Brand */
    --brown: #594a42;
    --yellow: #FEF337;
    --logo: #594a42;
    --green: rgba(11, 114, 65, 1);

    /* Base surfaces */
    --base-primary: #ffffff;
    --base-secondary: #ffffff;
    --base-tertiary: #ddddd1;
    --base-content-primary: #e8f0d9;
    --base-content-secondary: #e9e9df;

    /* Header & Footer */
    --header-surface: #ffffff;
    --header-surface-dark: #112335;
    --header-stroke: #ede9e7;
    --header-bar: #112335;
    --footer-surface: #112335;

    /* Text */
    --text-primary: #594a42;
    --text-secondary: #434343;
    --text-error: #ff0000;
    --text-success: #008a4b;
    --text-blue: #112335;

    /* Button */
    --btn-primary: #594a42;
    --btn-primary-hover: #c27a541a;
    --btn-stroke: #d4cbc694;

    /* Form */
    --form-stroke-focus: #ec9a4180;
    --form-stroke-error: #ff0000;

    /* Status */
    --error: #ff0000;
    --warning: #ff6600;
    --success: #008a4b;

    /* Stroke / Border */
    --border: #ede9e7;
    --border-dark: #00000033;

    /* Opacity scales */
    --brown-10: #594a421a;
    --brown-20: #594a4233;
    --brown-40: #594a4266;
    --brown-60: #594a4299;
    --brown-80: #594a42cc;
    --yellow-10: #ec9a411a;
    --yellow-20: #ec9a4133;
    --yellow-40: #ec9a4166;
    --yellow-60: #ec9a4199;
    --yellow-80: #ec9a41cc;

    /* Radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-xxl: 16px;
    --radius-xxxl: 24px;
    --radius-2xl: 32px;
    --radius-full: 999px;

    /* Spacing */
    --space-xxs: 2px;
    --space-xs: 4px;
    --space-s: 8px;
    --space-sm: 12px;
    --space-ms: 16px;
    --space-md: 20px;
    --space-ld: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Stroke widths */
    --stroke-xxs: 0.5px;
    --stroke-xs: 1px;
    --stroke-s: 1.5px;
    --stroke-sm: 2px;
    --stroke-ms: 2.5px;
    --stroke-md: 3px;
    --stroke-ld: 4px;

    /* Layout */
    --px: 120px;

    --warning-100: rgba(255, 102, 0, 1);
    --warning-90: rgba(255, 102, 0, 0.9);
    --warning-80: rgba(255, 102, 0, 0.8);
    --warning-70: rgba(255, 102, 0, 0.7);
    --warning-60: rgba(255, 102, 0, 0.6);
    --warning-50: rgba(255, 102, 0, 0.5);
    --warning-40: rgba(255, 102, 0, 0.4);
    --warning-30: rgba(255, 102, 0, 0.3);
    --warning-20: rgba(255, 102, 0, 0.2);
    --warning-10: rgba(255, 102, 0, 0.1);
    --warning-5: rgba(255, 102, 0, 0.05);
    --warning-4: rgba(255, 102, 0, 0.04);
    --warning-3: rgba(255, 102, 0, 0.03);
    --warning-2: rgba(255, 102, 0, 0.02);
    --warning-1: rgba(255, 102, 0, 0.01);

    --error-100: rgba(255, 0, 0, 1);
    --error-90: rgba(255, 0, 0, 0.9);
    --error-80: rgba(255, 0, 0, 0.8);
    --error-70: rgba(255, 0, 0, 0.7);
    --error-60: rgba(255, 0, 0, 0.6);
    --error-50: rgba(255, 0, 0, 0.5);
    --error-40: rgba(255, 0, 0, 0.4);
    --error-30: rgba(255, 0, 0, 0.3);
    --error-20: rgba(255, 0, 0, 0.2);
    --error-10: rgba(255, 0, 0, 0.1);
    --error-5: rgba(255, 0, 0, 0.05);
    --error-4: rgba(255, 0, 0, 0.04);
    --error-3: rgba(255, 0, 0, 0.03);
    --error-2: rgba(255, 0, 0, 0.02);
    --error-1: rgba(255, 0, 0, 0.01);

    --dark-blue-100: rgba(17, 35, 53, 1);
    --dark-blue-90: rgba(17, 35, 53, 0.9);
    --dark-blue-80: rgba(17, 35, 53, 0.8);
    --dark-blue-70: rgba(17, 35, 53, 0.7);
    --dark-blue-60: rgba(17, 35, 53, 0.6);
    --dark-blue-50: rgba(17, 35, 53, 0.5);
    --dark-blue-40: rgba(17, 35, 53, 0.4);
    --dark-blue-30: rgba(17, 35, 53, 0.3);
    --dark-blue-20: rgba(17, 35, 53, 0.2);
    --dark-blue-10: rgba(17, 35, 53, 0.1);
    --dark-blue-5: rgba(17, 35, 53, 0.05);
    --dark-blue-4: rgba(17, 35, 53, 0.04);
    --dark-blue-3: rgba(17, 35, 53, 0.03);
    --dark-blue-2: rgba(17, 35, 53, 0.02);
    --dark-blue-1: rgba(17, 35, 53, 0.01);

    --green-100: rgba(0, 138, 75, 1);
    --green-90: rgba(0, 138, 75, 0.9);
    --green-80: rgba(0, 138, 75, 0.8);
    --green-70: rgba(0, 138, 75, 0.7);
    --green-60: rgba(0, 138, 75, 0.6);
    --green-50: rgba(0, 138, 75, 0.5);
    --green-40: rgba(0, 138, 75, 0.4);
    --green-30: rgba(0, 138, 75, 0.3);
    --green-20: rgba(0, 138, 75, 0.2);
    --green-10: rgba(0, 138, 75, 0.1);
    --green-5: rgba(0, 138, 75, 0.05);
    --green-4: rgba(0, 138, 75, 0.04);
    --green-3: rgba(0, 138, 75, 0.03);
    --green-2: rgba(0, 138, 75, 0.02);
    --green-1: rgba(0, 138, 75, 0.01);

    --black-100: rgba(0, 0, 0, 1);
    --black-90: rgba(0, 0, 0, 0.9);
    --black-80: rgba(0, 0, 0, 0.8);
    --black-70: rgba(0, 0, 0, 0.7);
    --black-60: rgba(0, 0, 0, 0.6);
    --black-50: rgba(0, 0, 0, 0.5);
    --black-40: rgba(0, 0, 0, 0.4);
    --black-30: rgba(0, 0, 0, 0.3);
    --black-20: rgba(0, 0, 0, 0.2);
    --black-10: rgba(0, 0, 0, 0.1);
    --black-5: rgba(0, 0, 0, 0.05);
    --black-4: rgba(0, 0, 0, 0.04);
    --black-3: rgba(0, 0, 0, 0.03);
    --black-2: rgba(0, 0, 0, 0.02);
    --black-1: rgba(0, 0, 0, 0.01);

    --white-100: rgba(255, 255, 255, 1);
    --white-90: rgba(255, 255, 255, 0.9);
    --white-80: rgba(255, 255, 255, 0.8);
    --white-70: rgba(255, 255, 255, 0.7);
    --white-60: rgba(255, 255, 255, 0.6);
    --white-50: rgba(255, 255, 255, 0.5);
    --white-40: rgba(255, 255, 255, 0.4);
    --white-30: rgba(255, 255, 255, 0.3);
    --white-20: rgba(255, 255, 255, 0.2);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-5: rgba(255, 255, 255, 0.05);
    --white-4: rgba(255, 255, 255, 0.04);
    --white-3: rgba(255, 255, 255, 0.03);
    --white-2: rgba(255, 255, 255, 0.02);
    --white-1: rgba(255, 255, 255, 0.01);

}



@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Nunito'; src: url('../font/nunito/static/Nunito-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; }

body { font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif; color: #222; background: #fff; line-height: 1.5; scroll-behavior: smooth; }
i.fa-solid, i.fas  { font-family: "Font Awesome 6 Free"}
i.fa-brands{ font-family: "Font Awesome 6 Brands"}

.container {
    max-width: 1620px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-sm);
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* ===== BUTTON COMPONENTS ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 18px;
    height: 44px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-decoration: none;
}

/* Dark / filled */
.btn-dark {
    background: #111;
    color: #fff;
    border: none;
}
.btn-dark:hover { background: #333; }

/* Outline */
.btn-outline {
    background: #fff;
    color: #333;
    border: 1.5px solid #ddd;
}
.btn-outline:hover { border-color: #111; color: #111; }

/* Primary (brand color) */
.btn-primary {
    background: var(--btn-primary, #594a42);
    color: #fff;
    border: none;
}
.btn-primary:hover { background: var(--btn-primary-hover, #c27a541a); color: #111; }

/* Ghost / text-like */
.btn-ghost {
    background: transparent;
    color: #333;
    border: 1.5px solid transparent;
}
.btn-ghost:hover { border-color: #ddd; background: #f5f5f5; }

/* Icon-only square button */
.btn-icon {
    padding: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    border: 1.5px solid #ddd;
    color: #333;
    font-size: 18px;
}
.btn-icon:hover { border-color: #111; color: #111; }

/* Size modifiers */
.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 15px; font-weight: 700; }

/* Full width */
.btn-block { width: 100%; }

/* line clamp global classes */
.line-clamp-5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
}
.line-clamp-4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}
.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}