@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");

:root {
    --primary-color: #ef233c;
    --secondary-color: white;
    --hover-color: #f7c3c3;
    --background-color: white;
    --transition: all .4s cubic-bezier(.4,0,.3,1);
    --neutral-color-50: #f8fafc;
    --neutral-color-100: #f8fafc;
    --neutral-color-200: #e2e8f0;
    --neutral-color-300: #cbd5e1;
    --neutral-color-400: #94a3b8;
    --neutral-color-500: #64748b;
    --neutral-color-600: #475569;
    --neutral-color-700: #334155;
    --neutral-color-800: #1e293b;
    --neutral-color-900: #0f172a;
    --primary-color-50: #f2fcff;
    --primary-color-100: #d9f6ff;
    --primary-color-200: #c0f0ff;
    --primary-color-300: #99e7ff;
    --primary-color-400: #5ad7ff;
    --primary-color-500: #1d4ed8;
    --primary-color-600: #00ade4;
    --primary-color-700: #008cb9;
    --primary-color-800: #005672;
    --primary-color-900: #003647;
    --secondary-color-50: #fffaf2;
    --secondary-color-100: #fff0d9;
    --secondary-color-200: #ffe0b3;
    --secondary-color-300: #ffc266;
    --secondary-color-400: #ffad33;
    --secondary-color-500: #ff9900;
    --secondary-color-600: #c87800;
    --secondary-color-700: #a46200;
    --secondary-color-800: #804d00;
    --secondary-color-900: #492c00;
    --success-color-50: #ecfdf5;
    --success-color-100: #d1fae5;
    --success-color-200: #a7f3d0;
    --success-color-300: #6ee7b7;
    --success-color-400: #34d399;
    --success-color-500: #10b981;
    --success-color-600: #059669;
    --success-color-700: #047857;
    --success-color-800: #065f46;
    --success-color-900: #064e3b;
    --warning-color-50: #fffbeb;
    --warning-color-100: #fef3c7;
    --warning-color-200: #fde68a;
    --warning-color-300: #fcd34d;
    --warning-color-400: #fbbf24;
    --warning-color-500: #f59e0b;
    --warning-color-600: #d97706;
    --warning-color-700: #b45309;
    --warning-color-800: #92400e;
    --warning-color-900: #78350f;
    --danger-color-50: #fef2f2;
    --danger-color-100: #fee2e2;
    --danger-color-200: #fecaca;
    --danger-color-300: #fca5a5;
    --danger-color-400: #f87171;
    --danger-color-500: #ef4444;
    --danger-color-600: #dc2626;
    --danger-color-700: #b91c1c;
    --danger-color-800: #991b1b;
    --danger-color-900: #7f1d1d;
    --box-shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
    --box-shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1),
    0px 1px 2px rgba(16, 24, 40, 0.06);
    --box-shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),
    0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --box-shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.1),
    0px 4px 6px -2px rgba(16, 24, 40, 0.05);
    --blur-sm: blur(4px);
    --blur-md: blur(8px);
    --blur-lg: blur(12px);
    --blur-xl: blur(20px);
    --shade-0: #ffffff;
    --shade-100: #000000;
    --primary-font-family: "Rebond Grotesque";
    --secondary-font-family: "DM Sans", sans-serif;
    --body-color: #2c2d2a;
    --savanna-bg: #e9bf8b;
    --beach-bg: #e7dfcf;
    --glacier-bg: #b6d6c8;
    --coral-bg: #e86357;
    --arrow-fill: #333231;
    --body-font: "Montserrat", sans-serif;
    --italic-font: "EB Garamond", serif;
    --desktop-breakpoint: 1280px;
    --tablet-breakpoint: 834px;
    --mobile-breakpoint: 375px;
    --gutter-x: 1rem;
    --gutter-y: 1rem;
    --primary-transition: 0.3s ease-in-out;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    font-weight: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--primary-font-family);
}

body {
    font-family: var(--primary-font-family);
    background: #fdf8f5;
    color: var(--body-color);
}

html {
    scroll-behavior: smooth;
}

.no_data {
    color: #ffffff;
    padding: 20px;
    border-radius: 10px;
    background: #b6e3b2;
    border: 1px solid var(--background-color);
}

.ui-button {
    border-radius: 0 6px 6px 0;
}

.container {
    max-width: 80%;
    margin: 0 auto;
    border-radius: 4px;
    scroll-behavior: smooth;
    padding: 0 50px;
}

.overlay {
    backface-visibility: hidden;
    background-color: rgba(0, 0, 0, .6);
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    transition: opacity .3s ease 0s, visibility 0s ease .3s, transform .3s ease 0s;
    visibility: hidden;
    width: 100%;
    z-index: 999;
}

.overlay.visible {
    opacity: 1;
    transition: opacity .3s ease 0s, visibility 0s ease 0s, transform .3s ease 0s;
    visibility: visible;
}