/* Regular font */
@font-face {
  font-family: 'JannaLT';
  src: url('/fonts/janna-lt-regular-webfont.woff2') format('woff2'),
  url('/fonts/janna-lt-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* Bold font */
@font-face {
  font-family: 'JannaLT';
  src: url('/fonts/janna-lt-bold-webfont.woff2') format('woff2'),
  url('/fonts/janna-lt-bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}


body, html {
  height: 100%;
  font-family: 'JannaLT', sans-serif;
}

.navbar-container {
  margin: 0; /* Remove space around the navbar */
  padding: 0; /* Ensure no padding */
}

.custom-navbar {
  background-color: rgb(251, 245, 227) !important; /* Custom background */
  position: relative; /* Stays in flow */
  z-index: 2; /* Stays above the banner */
  padding-top: 10px;
}

.banner-background {
  background-image: url('/img/banner_background.jpg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  #padding-bottom: 250px;
  padding-top: 400px;
  position: relative;
  z-index: -1;
}

.banner-title {
  color: white; /* Title color */
  font-size: 3rem; /* Adjust as needed for size */
  text-align: center; /* Center the text */
  position: absolute; /* Position relative to the parent */
  top: 50%; /* Vertically center */
  left: 50%; /* Horizontally center */
  transform: translate(-50%, -50%); /* Adjust for true centering */
  z-index: 1; /* Ensure it's above the background */
  font-weight: bold; /* Optional for emphasis */
}

.banner-curve {
  background-image: url('/img/curve.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -3px;
  height: 271px;
  position: absolute;
  width: 100%;
}

.logo {
  width: 100%; /* Adjusts to container width */
  max-width: 400px; /* Ensures it doesn't exceed 400px */
  height: auto; /* Maintains aspect ratio */
}

/* Default: Align the container-fluid to the bottom */
.custom-navbar .container-fluid {
  display: flex;
  align-items: flex-end; /* Align the items to the bottom */
}

/* When navbar is collapsed (hamburger icon shown), reset alignment */
@media (max-width: 991px) {
  .custom-navbar .container-fluid {
    align-items: center; /* Align items to the center for collapsed view */
  }
}

@media (max-width: 930px) {
  .banner-title {
    font-size: 2rem;

  }
}

@media (max-width: 767px) {

  .banner-background {
    background-position: top;
  }
}


@media (max-width: 600px) {
  .navbar-brand {
    margin: 0 auto;
  }

  .banner-title {
    top: 40%;

  }
}