/* Custom CSS for Brown and Grey Theme */

:root {
    /* Define your custom color palette */
    --bs-brown-dark: #3E2723; /* A deep, rich brown */
    --bs-brown-medium: #5D4037; /* A slightly lighter brown */
    --bs-brown-light: #A1887F; /* A softer, muted brown */
    --bs-grey-dark: #424242;   /* Dark grey for text/elements */
    --bs-grey-medium: #616161; /* Medium grey */
    --bs-grey-light: #EEEEEE;  /* Light grey for backgrounds */
    --bs-white: #FFFFFF;

    /* Override Bootstrap primary/secondary for consistent theming */
    --bs-primary: var(--bs-brown-medium);
    --bs-primary-rgb: 93, 64, 55; /* RGB values for primary color */

    --bs-secondary: var(--bs-grey-medium);
    --bs-secondary-rgb: 97, 97, 97; /* RGB values for secondary color */
}

/* Custom background and text colors */
.bg-brown-dark { background-color: var(--bs-brown-dark) !important; }
.bg-grey-light { background-color: var(--bs-grey-light) !important; }
.text-brown-light { color: var(--bs-brown-light) !important; }
.text-grey-dark { color: var(--bs-grey-dark) !important; }

/* Further styling for specific elements if needed */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* A clean, modern font */
}

/* Style for the form container (card) */
.contact-form-card {
    max-width: 500px; /* Limit the width of the form for better readability */
    width: 100%; /* Ensure it's responsive */
}

/* Style for the form control (input/textarea) focus */
.form-control:focus {
    border-color: var(--bs-brown-light); /* Highlight with light brown on focus */
    box-shadow: 0 0 0 0.25rem rgba(161, 136, 127, 0.25); /* Subtle glow */
}

/* You can adjust button hover/active states if default Bootstrap isn't enough */
.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}
.btn-primary:hover {
    background-color: var(--bs-brown-dark); /* Darken on hover */
    border-color: var(--bs-brown-dark);
}