@font-face {
    font-family: 'CustomFont';
    /* You can choose any name for the font */
    src: url('/css/fonts/RobotoCondensed-Bold.ttf') format('truetype');
    font-weight: normal;
    /* You can set this depending on the weight of the font */
    font-style: normal;
    /* Set the style of the font if needed (e.g., italic) */
}

body {
    font-family: 'CustomFont', sans-serif;
    /* Apply the custom font to the body */
}

.hero {
    position: relative;
}

.navbar-nav .nav-link {
    font-weight: 500;
}

.navbar-nav .nav-link:hover {
    color: #141105 !important;
    /* Golden accent */
}

.carousel-item {
    aspect-ratio: 16 / 9;
    /* Adjust to your desired ratio */
    overflow: hidden;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    /* Full viewport height */
    object-fit: cover;
}

.carousel img {
    display: block;
    /* Remove inline spacing */
    margin: 0;
    padding: 0;
}

.carousel {
    z-index: 1;
    /* Ensure carousel is below navbar */
}

.navbar {
    z-index: 1050;
    /* Default Bootstrap value for fixed navbars */
}

footer {
    position: relative;
    z-index: 1;
    /* Ensure it appears above other elements */
}

footer.container {
    margin: 0 auto;
    max-width: 100%;
}

html,
body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    /* Pushes the footer to the bottom */
}

.footer {
    background: #1D1F21;
    /* Your footer color */
    padding: 20px 0;
    text-align: center;
}

.carousel-caption {
  bottom: 2rem;
  background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black background */
  padding: 1rem;
  border-radius: 0.5rem;
}
.carousel-caption h5, .carousel-caption p {
  color: #fff;
}

.custom-caption {
  top: 30%;                 /* Adjust vertical placement */
  left: 65%;
  bottom: auto;             /* Cancel Bootstrap’s bottom positioning */
  transform: translateY(-50%);
  width: 10%;
  border-radius: 0.5rem;
  color: white;
}