body { background-color: #fafafa}
a, a:visited { color:black; }
h1 { font-size: 20px; margin:50px 0px 30px 0px; }
h2 { font-size: 19px; margin:45px 0px 27px 0px; }
h3 { font-size: 18px; margin:40px 0px 25px 0px; }
h4 { font-size: 17px; margin:35px 9px 23px 9px;}
textarea { resize: vertical; }
.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; background-color: white; cursor: pointer;}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }
.autocomplete-group { padding: 2px 5px; }
.autocomplete-group strong { display: block; border-bottom: 1px solid #000; }
/* custom-styles.css */

/* 1. FONT & COLOR PALETTE DEFINITIONS
-------------------------------------------------- */
:root {
    /* Primary Font Family */
    --bs-font-sans-serif: 'Roboto', sans-serif; /* Body font */
    --heading-font-family: 'Poppins', sans-serif; /* Heading font */

    /* Custom Color Palette (Overrides Bootstrap's theme colors) */
    --bs-primary: #0077b6;      /* A richer blue */
    --bs-primary-rgb: 0, 119, 182;
    --bs-secondary: #6c757d;    /* Bootstrap default, or choose your own */
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success: #2a9d8f;      /* A nice teal green */
    --bs-success-rgb: 42, 157, 143;
    --bs-info: #00b4d8;         /* A brighter cyan */
    --bs-info-rgb: 0, 180, 216;
    --bs-warning: #e76f51;      /* A warm orange */
    --bs-warning-rgb: 231, 111, 81;
    --bs-danger: #d62828;       /* A strong red */
    --bs-danger-rgb: 214, 40, 40;
    --bs-light: #f8f9fa;        /* Bootstrap default, very light gray */
    --bs-light-rgb: 248, 249, 250;
    --bs-dark: #212529;         /* Bootstrap default, dark gray */
    --bs-dark-rgb: 33, 37, 41;

    /* Custom Accent Colors (if needed for non-Bootstrap elements or specific highlights) */
    --custom-accent-1: #90e0ef; /* Light blue accent */
    --custom-accent-2: #ffc300; /* Gold accent */

    /* Body settings */
    --bs-body-color: #333; /* Darker text for better readability */
    --bs-body-bg: #fdfdfd; /* Slightly off-white background */
    --bs-link-decoration: none; /* Remove underline from links by default */
}

/* 2. GLOBAL STYLES & TYPOGRAPHY
-------------------------------------------------- */
body {
    font-family: var(--bs-font-sans-serif);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--heading-font-family);
    font-weight: 600; /* Bolder headings */
    margin-bottom: 0.75rem;
    color: var(--bs-dark);
}

h1, .h1 { font-weight: 700; letter-spacing: -0.5px; }
h2, .h2 { font-weight: 600; }
h3, .h3 { font-weight: 500; }

p {
    margin-bottom: 1.25rem;
}

a {
    color: var(--bs-primary);
    transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
a:hover {
    color: color-mix(in srgb, var(--bs-primary) 80%, black); /* Darken primary on hover */
    opacity: 0.85;
}

/* Subtly styled blockquotes */
.blockquote {
    border-left: 4px solid var(--bs-primary);
    padding-left: 1rem;
    font-style: italic;
    color: var(--bs-secondary);
}
.blockquote-footer {
    color: var(--bs-secondary);
}

/* 3. FORM STYLING
-------------------------------------------------- */
.form-control,
.form-select {
    border-radius: 0.375rem; /* Slightly more rounded corners (Bootstrap default is 0.375rem) */
    border: 1px solid #ced4da;
    padding: 0.6rem 0.9rem; /* Slightly more padding */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-size: 0.95rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); /* Use primary color for focus */
}

.form-label {
    font-weight: 500; /* Slightly bolder labels */
    margin-bottom: 0.3rem;
    color: #495057;
}

/* Custom checkbox and radio styling */
.form-check-input {
    border-radius: 0.2em; /* Slightly less round for checkboxes */
}
.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.form-check-input[type="radio"] {
    border-radius: 50%;
}

/* Input groups */
.input-group-text {
    background-color: var(--bs-light);
    border: 1px solid #ced4da;
    font-weight: 500;
}

/* Floating labels - ensure they work well with custom padding */
.form-floating > .form-control,
.form-floating > .form-select {
    padding: 1rem 0.9rem; /* Adjust if label overlaps */
}
.form-floating > label {
    padding: 0.6rem 0.9rem;
}

/* 4. BUTTON STYLING
-------------------------------------------------- */
.btn {
    font-family: var(--heading-font-family); /* Use heading font for buttons */
    font-weight: 500;
    padding: 0.6rem 1.2rem; /* A bit more padding */
    border-radius: 0.375rem; /* Consistent rounding */
    text-transform: none; /* Or 'uppercase' if you prefer */
    letter-spacing: 0.5px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.btn:hover {
    transform: translateY(-2px); /* Subtle lift on hover */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.btn:active, .btn:focus {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Primary button */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-primary:hover {
    background-color: color-mix(in srgb, var(--bs-primary) 85%, black);
    border-color: color-mix(in srgb, var(--bs-primary) 85%, black);
}

/* Outline button enhancement */
.btn-outline-primary {
    border-width: 1px; /* Make border slightly thinner if desired */
}
.btn-outline-primary:hover {
    color: #fff; /* Ensure text is white on hover for primary outline */
}

/* Larger/Smaller buttons */
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1.1rem; }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }

/* 5. CARD STYLING
-------------------------------------------------- */
.card {
    border: 1px solid #e9ecef; /* Lighter border */
    border-radius: 0.5rem; /* Slightly more rounded */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Softer, more diffused shadow */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.card-header {
    background-color: var(--bs-light);
    border-bottom: 1px solid #e9ecef;
    font-family: var(--heading-font-family);
    font-weight: 600;
    padding: 0.75rem 1.25rem; /* Bootstrap default, adjust if needed */
}

.card-title {
    margin-bottom: 0.5rem; /* Closer to content */
}

.card-footer {
    background-color: var(--bs-light);
    border-top: 1px solid #e9ecef;
}

/* 6. NAVBAR STYLING
-------------------------------------------------- */
.navbar {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Subtle shadow for depth */
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.navbar-brand {
    font-family: var(--heading-font-family);
    font-weight: 700;
    font-size: 1.5rem; /* Slightly larger */
}

.navbar-nav .nav-link {
    font-family: var(--heading-font-family);
    font-weight: 500;
    padding-right: 0.8rem;
    padding-left: 0.8rem;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--bs-primary); /* Use primary color for active/hover */
}

/* Example: If using .navbar-dark with a custom dark background */
.navbar-dark {
    background-color: var(--bs-dark) !important; /* Or your custom dark color */
}
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--bs-info); /* Brighter color for dark background */
}


/* 7. ALERT STYLING
-------------------------------------------------- */
.alert {
    border-width: 0; /* Remove default border if using prominent background */
    border-left-width: 5px; /* Add a thicker left border */
    border-radius: 0.375rem; /* Consistent rounding */
    padding: 1rem 1.25rem; /* Bootstrap default, adjust if needed */
    box-shadow: 0 2px 5px rgba(0,0,0,0.07);
}
/* Make alert headings stand out a bit more */
.alert-heading {
    font-family: var(--heading-font-family);
    font-weight: 600;
}

/* Example: Primary alert color matching */
.alert-primary {
    border-left-color: var(--bs-primary);
    background-color: color-mix(in srgb, var(--bs-primary) 15%, white); /* Lighter shade of primary */
    color: color-mix(in srgb, var(--bs-primary) 80%, black); /* Darker text for readability */
}
.alert-primary .alert-link {
    color: color-mix(in srgb, var(--bs-primary) 70%, black);
    font-weight: bold;
}
/* You can create similar overrides for .alert-success, .alert-danger etc. */


/* 8. BADGES & PILLS
-------------------------------------------------- */
.badge {
    font-family: var(--heading-font-family);
    font-weight: 500;
    padding: 0.4em 0.7em; /* Slightly larger padding */
    font-size: 0.8em; /* Adjust size */
}
/* Make pill badges truly pill-shaped if they aren't enough */
.rounded-pill {
    border-radius: 50rem !important; /* Ensure it's very rounded */
}

/* 9. MODAL STYLING
-------------------------------------------------- */
.modal-content {
    border-radius: 0.5rem; /* More rounded modal */
    border: none;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.modal-header {
    border-bottom: 1px solid #dee2e6;
    background-color: var(--bs-light); /* Light header background */
}
.modal-header .btn-close {
    transition: transform 0.2s ease;
}
.modal-header .btn-close:hover {
    transform: scale(1.1);
}
.modal-title {
    font-family: var(--heading-font-family);
    font-weight: 600;
}


/* 10. MISC. UTILITY & CREATIVE TOUCHES
-------------------------------------------------- */
/* Add a subtle text shadow for headings on light backgrounds if desired */
/*
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6,
h1, h2, h3 {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}
*/

/* Custom subtle gradient for backgrounds (use sparingly) */
.bg-custom-gradient-primary {
    background: linear-gradient(135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 70%, var(--bs-info)) 100%);
    color: #fff; /* Ensure text is readable */
}
.bg-custom-gradient-primary h1,
.bg-custom-gradient-primary h2,
.bg-custom-gradient-primary h3,
.bg-custom-gradient-primary p {
    color: #fff;
}

/* Enhanced dividers */
hr {
    opacity: 0.15; /* Make them a bit more subtle or pronounced */
    border-top-width: 1px;
}
.hr-fancy { /* Custom class for a fancier HR */
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(var(--bs-dark-rgb), 0.5), rgba(0, 0, 0, 0));
    margin: 2rem 0;
}

/* Custom scrollbar (use with caution, can affect UX if not done well) */
/*
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bs-light);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: var(--bs-secondary);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary);
}
*/

/* Image filter example - for a cool hover effect on images wrapped in a link */
a .img-fluid:hover, /* Or any image selector */
a .card-img-top:hover {
    /* filter: grayscale(50%) brightness(1.1); */
    opacity: 0.9;
    transform: scale(1.03);
    transition: opacity 0.3s ease, transform 0.3s ease;
}