:root {
    --neybo-primary: #ff6b00;
    --neybo-secondary: #cbd5e1;
    --neybo-dark: #0b0c10;
    --neybo-dark-2: #1f2833;
    --neybo-light: #94a3b8;
    --neybo-white: #f8fafc;
    --neybo-border: #475569;
    --bs-body-bg: var(--neybo-dark);
    --bs-body-color: var(--neybo-light);
    --bs-primary: var(--neybo-primary);
    --bs-secondary: var(--neybo-secondary);
    --bs-font-sans-serif: 'Roboto', sans-serif;
    --bs-headings-font-family: 'Rajdhani', sans-serif;
}

.bg-dark-2 {
    background-color: var(--neybo-dark-2) !important;
}

body {
    background-color: var(--neybo-dark);
    color: var(--neybo-light);
    font-family: var(--bs-font-sans-serif);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--bs-headings-font-family);
    color: var(--neybo-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

a {
    color: var(--neybo-secondary);
    text-decoration: none;
    transition: all .3s ease;
}

a:hover {
    color: var(--neybo-primary);
    text-shadow: 0 0 8px rgba(255, 107, 0, .6);
}

.btn {
    border-radius: 0;
    font-family: var(--bs-headings-font-family);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    transition: all .3s ease;
}

.btn-primary {
    background-color: var(--neybo-primary);
    border: 1px solid var(--neybo-primary);
    color: #000;
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--neybo-primary);
    box-shadow: 0 0 15px rgba(255, 107, 0, .4);
}

.btn-outline-secondary {
    color: var(--neybo-secondary);
    border-color: var(--neybo-secondary);
}

.btn-outline-secondary:hover {
    background-color: var(--neybo-secondary);
    color: #000;
    box-shadow: 0 0 15px rgba(203, 213, 225, .4);
}

.card {
    background-color: var(--neybo-dark-2);
    border: 1px solid rgba(71, 85, 105, .4);
    border-radius: 0;
    transition: transform .3s ease, box-shadow .3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(255, 107, 0, .15);
    border-color: var(--neybo-primary);
}

.card-title {
    color: var(--neybo-white);
}

.card-text {
    color: var(--neybo-light);
}

.navbar {
    background-color: rgba(11, 12, 16, .95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(71, 85, 105, .5);
    z-index: 1030;
}

.navbar-brand {
    font-family: var(--bs-headings-font-family);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--neybo-primary) !important;
}

.nav-link {
    color: var(--neybo-light) !important;
    font-family: var(--bs-headings-font-family);
    text-transform: uppercase;
    font-weight: 500;
}

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

footer {
    background-color: var(--neybo-dark-2) !important;
    border-top: 1px solid rgba(71, 85, 105, .5);
}

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

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

.hover-shadow:hover {
    box-shadow: 0 .5rem 1rem rgba(255, 107, 0, .2) !important;
    transform: translateY(-2px);
}

.summary-truncate {
    word-break: break-word;
}

.main-image {
    max-height: 400px;
    object-fit: contain;
    border: 1px solid rgba(71, 85, 105, .5);
    background: var(--neybo-dark-2);
}

.clickable-thumbnail {
    cursor: pointer;
    height: 100px;
    width: 100%;
    object-fit: cover;
    transition: opacity .2s, border-color .2s;
    border: 1px solid transparent;
}

.clickable-thumbnail:hover {
    opacity: .8;
    border-color: var(--neybo-primary);
}

.display-5 {
    text-shadow: 0 0 20px rgba(0, 0, 0, .5);
}

.lead {
    font-weight: 300;
    letter-spacing: .5px;
}

.shadow-sm {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .5) !important;
}

.shadow {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5) !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .5) !important;
}

.img-thumbnail {
    background-color: var(--neybo-dark-2);
    border-color: var(--neybo-border);
}

.border-bottom {
    border-bottom-color: var(--neybo-border) !important;
}

.text-muted {
    color: var(--neybo-secondary) !important;
}

.form-control,
.form-select {
    background-color: var(--neybo-dark-2);
    border-color: var(--neybo-border);
    color: var(--neybo-light);
    font-size: 1.3rem;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--neybo-dark);
    border-color: var(--neybo-primary);
    color: var(--neybo-white);
    box-shadow: 0 0 0 .25rem rgba(255, 107, 0, .25);
}

.form-control::placeholder {
    color: #6c757d;
}

.form-text {
    color: var(--neybo-secondary);
    font-size: 1.1rem;
}

.form-label {
    font-size: 1.3rem;
}

.dropdown-menu {
    background-color: var(--neybo-dark-2);
    border-color: var(--neybo-border);
    z-index: 1050;
}

.dropdown-item {
    color: var(--neybo-light);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--neybo-dark);
    color: var(--neybo-primary);
}

.dropdown-divider {
    border-top-color: var(--neybo-border);
}

::selection {
    background: var(--neybo-primary);
    color: #000;
}

table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--neybo-light);
    border-collapse: collapse;
    border: 1px solid var(--neybo-border);
}

th,
td {
    padding: .75rem;
    vertical-align: top;
    border-top: 1px solid var(--neybo-border);
}

thead th {
    vertical-align: bottom;
    border-bottom: 2px solid var(--neybo-border);
    background-color: var(--neybo-dark-2);
    color: var(--neybo-primary);
    font-family: var(--bs-headings-font-family);
    text-transform: uppercase;
}

tbody tr:hover {
    background-color: rgba(255, 255, 255, 5%);
}

tbody+tbody {
    border-top: 2px solid var(--neybo-border);
}

.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 */
}

.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;
    }
}

/* Accordion Styling */
.accordion-item {
    background-color: var(--neybo-dark);
    border: 1px solid var(--neybo-border);
}

.accordion-button {
    background-color: var(--neybo-dark-2);
    color: var(--neybo-white);
    font-family: var(--bs-headings-font-family);
    font-weight: 700;
}

.accordion-button:not(.collapsed) {
    background-color: var(--neybo-primary);
    color: #000;
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0);
    /* Make the arrow black when active */
}

.accordion-button::after {
    filter: invert(1);
    /* Make the arrow white when collapsed */
}

.accordion-body {
    color: var(--neybo-white);
}