:root{
/* background colors */
--bg-white: #ffffff;
--bg-white-alpha-40: #ffffff66;
--bg-black-alpha-20: #00000033;
--bg-black-alpha-40: #00000066;
--bg-lite-color: #eeeeee;
--bg-dark-color: #26a59e;
--bg-hover-color-primary: #155956;
--bg-dark-color-alpha-5: #6247fa0d;
--bg-accent-color: #ffe5e5;
--bg-color-secondary: #dd6c0f;
--bg-color-secondary-alpha-5: #f948510d;
--bg-hover-color-secondary: #5d5da9;
--bg-card-color-1-alpha-20: #ffc40033;
--bg-card-color-2-alpha-20: #49420933;
--bg-card-color-3-alpha-20: #00ff8033;
--bg-card-color-4-alpha-20: #e5ff0033;
--bg-card-color-5-alpha-20: #00a2ff33;
--bg-card-color-5-alpha-70: #00578ab3;
--bg-rating-color-alpha-10: #ffcc001a;
--bg-image-background-color: #d9d9d9;

/* text color */
--text-white: #ffffff;
--text-title--main-color: #152432;
--text-accent-color: #ef8f39;
--text-body-color: #5d6165;
--text-subtitle-color: #26a59e;
--text-highlight-color: #ffcc00;

/* border color */
--border-color-1: #b3b3b3;

/**
* BOX SHADOW
*/

--shadow-1: 0 2px 10px #1524321a;
--shadow-2: 0 5px 10px #6247fa40;
--shadow-3: 0 5px 10px #d43a4240;
--shadow-4: 0 30px 50px #d43a424d;
--shadow-5: 0 5px 5px #0000004d;
}