.quiz-bg {
    background: #fff !important;
}
.quiz-question-text {
    color: #000 !important;
}
.carousel-indicators {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.2rem;
    margin-left: auto;
    margin-right: auto;
    z-index: 2;
}


.carousel-indicators [data-bs-target] {
    background-color: var(--brown-light) !important;
    border: 2px solid var(--brown) !important;
}
.carousel-indicators .active {
    background-color: var(--brown) !important;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: var(--brown-light);
    border-radius: 50%;
    border: 2px solid var(--brown);
}


:root {
    --brown: #3e2c1a;
    --brown-light: #6d5845;
    --gold: #bfa06a;
    --grey: #23201c;
    --beige: #e6e0d4;
    --black: #181512;
    --bs-body-bg: var(--grey);
    --bs-font-sans-serif: 'Open Sans', Arial, sans-serif;
    --text-main: var(--beige);
    --text-accent: var(--gold);
    --card-bg: var(--grey);
    --card-border: var(--brown-light);
    --navbar-bg: var(--brown);
    --navbar-border: var(--brown-light);
    --btn-bg: var(--brown-light);
    --btn-hover: var(--brown);
    --btn-text: #fff;
    --btn-hover-text: var(--gold);
    --carousel-caption-bg: rgba(34, 28, 23, 0.85);
    --carousel-caption-text: var(--beige);
}

body {
    background: var(--grey);
    color: var(--text-main);
    font-family: var(--bs-font-sans-serif);
}


.navbar, .navbar-dark.bg-dark {
    background: var(--navbar-bg) !important;
    border-bottom: 3px solid var(--navbar-border);
}
.navbar-brand, .nav-link {
    color: var(--text-main) !important;
    font-family: 'Roboto Slab', serif;
    letter-spacing: 1px;
}
.nav-link.active {
    color: var(--text-accent) !important;
    font-weight: bold;
    text-decoration: underline wavy var(--text-accent) 2px;
}
    h1, h2, h3, h4, h5 {
        font-family: 'Roboto Slab', serif;
        letter-spacing: 1px;
    }
    .navbar-brand {
        font-family: 'Roboto Slab', serif;
        font-weight: bold;
        letter-spacing: 2px;
    }
    .card {
        background: var(--card-bg);
        border: 2px solid var(--card-border);
        color: var(--text-main);
        border-radius: 14px;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .card:hover {
        transform: translateY(-8px) scale(1.03);
        box-shadow: 0 8px 32px #0003;
    }
    .card-img-top {
        height: 220px;
        object-fit: cover;
    }
    .card-title {
        color: var(--text-accent);
        font-family: 'Roboto Slab', serif;
    }
    .card-text {
        color: var(--text-main);
    }
    header.bg-primary {
        background: #7c5c36;
    }
    header.bg-warning {
        background: #bfa06a;
        color: #3e2c1a !important;
    }
    header.bg-success {
        background: #5a3e1b;
    }
    footer {
        font-size: 1rem;
        letter-spacing: 1px;
    }
    .btn-dark {
        background: var(--btn-bg);
        border: none;
        color: var(--btn-text);
        font-family: 'Roboto Slab', serif;
        font-weight: bold;
        letter-spacing: 1px;
        transition: background 0.2s, color 0.2s;
    }
    .btn-dark:hover, .btn-dark:focus {
        background: var(--btn-hover);
        color: var(--btn-hover-text);
    }
        .carousel-caption {
            background: var(--carousel-caption-bg);
            border-radius: 12px;
            color: var(--carousel-caption-text);
        }
    @media (max-width: 767px) {
        .card-img-top {
            height: 160px;
        }
        header {
            padding: 2rem 1rem;
        }
    }
section img {
    border: 4px solid var(--gold);
}


.strap-section-img {
    width: 320px;
    height: 240px;
    object-fit: cover;
    object-position: center;
    max-width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 2px 12px #0002;
}
section h2 {
    color: var(--brown);
    font-family: 'Roboto Slab', serif;
    font-size: 2rem;
}
ul.fs-5 li {
    margin-bottom: 0.5em;
}


footer {
    background: var(--brown);
    color: #fff;
    letter-spacing: 1px;
}


@media (max-width: 767px) {
    header h1 {
        font-size: 2rem;
    }
    .navbar-brand {
        font-size: 1.5rem;
    }
}