/* Custom styles and variables */
:root {
    --maroon-50: #fdf2f2;
    --maroon-100: #fbe6e6;
    --maroon-200: #f7d1d1;
    --maroon-300: #f0abab;
    --maroon-400: #e37979;
    --maroon-500: #d14d4d;
    --maroon-600: #b24d4d;
    --maroon-700: #973c3c;
    --maroon-800: #7a2e2e;
    --maroon-900: #652b2b;
    --maroon-950: #3a1313;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

.font-outfit {
    font-family: 'Outfit', sans-serif;
}

.navbar-transparent {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    /* optional but looks modern */
}

.font-manrope {
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.font-inter {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.hero {
    background-image: url('/images/hero.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

}

.bg-brand {
    background-color: #B54746;
}

.color-brand {
    color: #B54746;
}

.bg-brand-light {
    background-color: #B5474633;
    /* 20% opacity */
}