/*
 * Custom Stylesheet
 *
 * This file contains any custom CSS rules beyond the Tailwind classes.
 * It's also where the custom color palette is defined.
 */

:root {
    --color-primary: #5F464B;
    --color-secondary: #8E4A49;
    --color-accent: #7DAA92;
    --color-highlight-1: #80FFEC;
    --color-highlight-2: #C2FBEF;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--color-primary);
}

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

.accent-text {
    color: var(--color-accent);
}

.highlight-bg {
    background-color: var(--color-highlight-2);
}

.highlight-1-text {
    color: var(--color-highlight-1);
}

.btn-primary {
    background-color: var(--color-accent);
    color: white;
}

.btn-secondary {
    border: 2px solid var(--color-accent);
    color: var(--color-accent);
}

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

a:hover {color:black;}
a{color:black;}