/* Make nav links bold with a clean hover underline effect */
:root {
    --color-sun-yellow: #ffb300;
    --color-sunset-orange: #ff8c00;
    --color-jet-black: #000000;
    --color-cool-gray: #f5f5f5;
    --color-sky-blue: #00bfff;
}

.navigation li a {
    font-weight: 600;
    position: relative;
    display: inline-block;
    color: #000; /* Change if your text is white or themed */
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Create a smooth underline that animates on hover */
.navigation li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: #ffb300; /* Accent color */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

/* On hover, show the underline and change color slightly */
.navigation li a:hover {
    color: #ffb300;
}

.navigation li a:hover::after {
    transform: scaleX(1);
}

/* Header/Footer */
.boxcar-header {
    background: #fff;
    color: var(--color-jet-black);
    border-bottom: 2px solid var(--color-sun-yellow);
}
.header-inner {
    background: #fff;
}

/* Navigation */
.navigation li a {
    color: var(--color-jet-black);
}
.navigation li a:hover,
.navigation li a.active {
    color: var(--color-sunset-orange);
}
.navigation li a::after {
    background-color: var(--color-sunset-orange);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(
        90deg,
        var(--color-sun-yellow) 0%,
        var(--color-sunset-orange) 100%
    );
    color: #fff;
    border: none;
    transition: background 0.3s;
}
.btn-primary:hover {
    background: #e67600; /* darker orange */
}
.btn-secondary {
    background: var(--color-sky-blue);
    color: #fff;
    border: none;
    transition: background 0.3s;
}
.btn-secondary:hover {
    background: #0090c0; /* darker blue */
}

/* Backgrounds */
body,
.main-bg,
.section-bg {
    background: var(--color-cool-gray);
}

/* Text */
body,
p,
h1,
h2,
h3,
h4,
h5,
h6,
.text-dark {
    color: var(--color-jet-black);
}

/* Accent elements */
.accent {
    color: var(--color-sun-yellow);
}

/* Example gradient section */
.section-gradient {
    background: linear-gradient(
        90deg,
        var(--color-sun-yellow) 0%,
        var(--color-sunset-orange) 100%
    );
}