/* your_custom_styles.css */

/* General Body Styles */
body {
    font-family: sans-serif; /* Choose a suitable font */
    color: #333;
    background-color: #f8f9fa; /* Light grey background */
}

/* Navigation Bar */
.navbar-light .navbar-brand {
    color: #daa520; /* Gold color for the brand */
    font-weight: bold;
}

.navbar-light .navbar-nav .nav-link {
    color: #6c757d; /* Dark grey for nav links */
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #b8860b; /* Darker gold on hover */
}

/* Hero Section */
.jumbotron.bg-primary {
    background-color: #f0e68c !important; /* Light gold background */
    color: #333 !important;
}

.btn-warning {
    background-color: #ffd700; /* Bright gold button */
    border-color: #ffd700;
    color: #333;
}

.btn-warning:hover {
    background-color: #e6c000;
    border-color: #e6c000;
}

.btn-outline-light {
    border-color: #d3d3d3; /* Light silver border */
    color: #333;
}

.btn-outline-light:hover {
    background-color: #d3d3d3;
    color: #333;
    border-color: #d3d3d3;
}

/* About Us Section */
#about {
    background-color: #fff;
}

/* Benefits Section */
.bg-light {
    background-color: #f0f0f0 !important; /* Slightly darker light grey */
}

.card {
    border: 1px solid #ddd;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-title {
    color: #daa520; /* Gold for card titles */
}

/* Features Section */
#features {
    background-color: #fff;
}

#features .media i {
    color: #daa520; /* Gold for feature icons */
}

/* Real-time Price Display Section */
.bg-info {
    background-color: #c0c0c0 !important; /* Silver background */
    color: #333 !important;
}

#prices h4 {
    color: #808080; /* Darker silver for headings */
}

/* Call to Action Section */
.bg-light.text-center {
    background-color: #f8f8f8 !important;
}

/* Footer */
.bg-light.text-center.py-3 {
    background-color: #e0e0e0 !important; /* Light silver background */
}

/* Subtle Gold/Silver Accents (Optional) */
/* Example: A subtle gold border on sections */
/* section {
    border-bottom: 2px solid #eee8aa; /* Light goldenrod yellow */
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
} */

/* Example: Silver text for secondary elements */
/* small {
    color: #a9a9a9; /* Dark gray */
} */

/* You can add more specific styling for different elements as needed */