:root {
    --bs-primary: #fd7e14 !important; /* A vibrant orange */
    --bs-primary-rgb: 253, 126, 20 !important;
}

/* Your working accordion code */
.accordion-button:not(.collapsed) {
    background-color: var(--bs-primary) !important;
    color: #000 !important;
}

.accordion-button:not(.collapsed)::after {
    filter: none !important;
}

.link-orange {
    color: var(--bs-primary) !important;
}

.link-orange:hover {
    color: #fca751 !important;
}

.btn-primary {
    background-color: #fd7e14 !important;
    border-color: #fd7e14 !important;
}

.section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#start {
    position: relative;
    height: 100vh;
}

/* New CSS to style the hero image container and the image itself */
.hero-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* This hides any part of the image that overflows */
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* This makes the image fill the container while maintaining its aspect ratio */
    object-position: center; /* This centers the image within the container */
}

/* Ensure the text is visible on top of the image */
#start .container {
    position: relative; /* This is crucial. It brings the content to the front. */
    z-index: 2; /* Ensures it is layered above the image and overlay */
}

#start::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
    z-index: 1; /* This places the overlay between the image and the text */
}

#start h1,
#start p,
#start a.btn-primary {
    color: #fff !important; /* Ensures text is white and readable */
}

/* Adjust button styles if they become hard to see against the overlay */
#start {
    background-color: #007bff; /* Example: Bootstrap primary color */
    border-color: #007bff;
    color: #fff; /* Ensure text is white */
}

.image-stack {
    position: relative; /* This is crucial for absolute positioning of child elements */
    display: inline-block; /* Or block, depending on desired layout, but inline-block often works well for image containers */
    width: 100%; /* Ensure the container takes full width if desired */
}

.overlapping-image {
    position: absolute; /* Take the image out of the normal flow */
    bottom: -20px; /* Adjust this value to move it up or down */
    right: -20px; /* Adjust this value to move it left or right */
    width: 40%; /* Adjust the size of the overlapping image relative to its container */
    max-width: 150px; /* Optional: Set a max size for the overlapping image */
    z-index: 2; /* Ensures the overlapping image is on top of the main image */
}

/* You might want to adjust the shadow on the overlapping image if it's too much */
.overlapping-image.shadow-lg {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; /* Slightly lighter shadow */
}

/* Responsive adjustments for smaller screens if needed */
@media (max-width: 767.98px) { /* For screens smaller than 'md' breakpoint */
    .overlapping-image {
        bottom: -10px;
        right: -10px;
        width: 30%;
        max-width: 100px;
    }
}

.brand-text {
    font-family: 'Russo One', sans-serif;
}