/* Color Variables */
:root {
    --primary: #1E3A8A; /* Dark Blue */
    --secondary: #F3F4F6; /* Light Gray */
    --accent: #EF4444; /* Red */
    --text-dark: #1F2937; /* Dark Gray */
    --text-white: #FFFFFF; /* White */
}

/* General Styles */
body {
    background-color: var(--secondary);
    color: var(--text-dark);
    font-family: 'Rubik', sans-serif;
}

h1, h4 {
    font-family: 'Oswald', sans-serif;
}

/* Topbar and Footer */
.bg-primary {
    background-color: var(--primary) !important;
    color: var(--text-white);
}

.bg-primary a, .bg-primary p, .bg-primary h4, .bg-primary h6 {
    color: var(--text-white);
}

/* Navbar */
.navbar.bg-primary .nav-link {
    color: var(--text-white) !important;
}

.navbar.bg-primary .nav-link:hover, .navbar.bg-primary .nav-link.active {
    color: var(--accent) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Search Section */
.bg-white {
    background-color: var(--text-white) !important;
}

.search-select, .search-input {
    height: 50px !important;
    border-color: var(--primary) !important;
    color: var(--text-dark) !important;
}

.btn-accent {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-white);
    height: 50px;
}

.btn-accent:hover {
    background-color: #DC2626; /* Darker red on hover */
    border-color: #DC2626;
}

/* About Section */
.bg-secondary {
    background-color: var(--secondary) !important;
}

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

.feature-box {
    height: 150px;
}

.feature-box.bg-white {
    color: var(--text-dark);
}

.feature-box.bg-primary {
    color: var(--text-white);
}

.feature-icon {
    width: 100px;
    height: 100px;
    background-color: var(--accent);
}

/* Vendor Section */
.vendor-carousel .bg-secondary {
    background-color: var(--secondary) !important;
}

/* Footer */
.footer .bg-primary {
    margin-top: 90px;
}

.footer a.btn-accent i {
    color: var(--text-white);
}

/* Back to Top */
.back-to-top {
    background-color: var(--accent);
    border-color: var(--accent);
}

.back-to-top i {
    color: var(--text-white);
}