/*Any pictures used are through permission of Bill Chordis. Picture of family at picnic table are relatives and have given consent to use photo*/

:root {
  --bs-heading-color: #fff;
}

body {
  margin: 0;
  font-family: "Poppins", "Rubik", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.bg-black {
  background-color: #000000;
}

.menu-items {
  padding: 6pt 0;
}

.double-border {
  border: 10px solid #ffc72c; /* Yellow border */
  outline: 10px solid #da291c; /* Orange outline */
  border-radius: 10px;
}

.card {
  border: 10px solid #ffc72c; /* Yellow border */
  outline: 10px solid #da291c; /* Orange outline */
  border-radius: 10px;
}

.navbar {
  background-color: #ca0933 !important;
  border-bottom: 2px solid #ffc72c;
  outline: 2px solid #da291c;
}
.navbar-nav .nav-link {
  color: white !important;
}

.navbar-brand {
  color: #fff;
}

.menuPics {
  border-radius: 10px;
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-box img {
  max-width: 100%; /* Ensures the image never exceeds its container's width */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Prevents spacing issues below the image */
  border-radius: 10px;
  border: 5px solid #ffc72c; /* Yellow border */
  outline: 5px solid #da291c; /* Orange outline */
}

#contactPic {
  border: 3px solid #ffc72c; /* Yellow border */
  outline: 3px solid #da291c;
  border-radius: 10px;
}

a {
  color: #ffc72c;
}

/* Hide hero chippy 2 by default */
#heroChippy2 {
  display: none;
}

#home {
  scroll-margin-top: 350px; /* Adjust this value if needed */
}

.text-border {
  display: inline-block;
  border: 3px solid #ffc72c; /* Yellow border */
  outline: 3px solid #da291c; /* Orange outline */
  border-radius: 10px;
  padding: 5px; /* You might want to adjust padding with the thicker borders */
}

#testimonials {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

.carousel-testimonial {
  height: 370px; /* Adjust the height as needed */
}
.card {
  height: 100%;
  margin: 0 auto; /* Center the card horizontally */
}

.card-body {
  background-image: url();
}
.circular-placeholder {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: #e9ecef; /* Light gray background */
  overflow: hidden; /* Hide image overflow */
  display: flex;
  align-items: center;
  justify-content: center;
}
.circular-placeholder img {
  max-width: 100%;
  max-height: 100%;
}

#about {
  scroll-margin-top: 40px; /* Adjust this value if needed */
}

.businessLinkFooter {
  color: #767676;
}

#menu {
  scroll-margin-top: 150px; /* Adjust this value if needed */
}

.yellowtext {
  color: #ffc72c;
}

/*new hero carousel to try*/
.carousel-fade .carousel-item {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.carousel-fade .carousel-item.active {
  opacity: 1;
}

.hero-slideshow {
  position: relative;
  height: 100vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slideshow .carousel-item img {
  max-width: 1200px; /* Set the image width to its actual size */
  height: auto; /* Let the height adjust automatically to maintain aspect ratio */
  display: block; /* Prevent extra space below the image */
  margin: 0 auto; /* Center the image horizontally */
  filter: brightness(0.5);
}

.custom-caption {
  position: absolute;
  bottom: 20px; /* Adjust position as needed */
  left: 50%;
  transform: translateX(-50%); /* Center horizontally */

  padding: 20px;
  color: white;
  width: 80%;
  text-align: center; /* Example: center text */
}

/*topnav*/
.top-bar {
  display: flex;
  justify-content: space-evenly;

  align-items: center;
  padding: 10px 20px;
  background-color: #000000;
  position: sticky;
  top: 0; /* Stick to the top edge */
  z-index: 10; /* Ensure it's above other elements */
}

.container {
  min-height: 70px; /* Adjust the value as needed */
}

.hero-large {
  border-radius: 10px;
  border: 5px solid #ffc72c; /* Yellow border */
  outline: 5px solid #da291c; /* Orange outline */
}

#streamBanner .carousel-item img {
  display: block; /* Make the image a block-level element */
  margin-left: auto;
  margin-right: auto;
  max-width: 100%; /* Ensure the image doesn't overflow its container */
  height: auto; /* Maintain aspect ratio */
  border: 5px solid #ffc72c; /* Yellow border */
  outline: 5px solid #da291c; /* Orange outline */
  border-radius: 10px;
}

#aboutContact1,
#aboutContact2,
#aboutH3 {
  color: #ffc72c;
}

#aboutParagraph {
  color: #da291c;
}

.circular-placeholder {
  background-color: #000000;
}

.days,
#aboutH3 {
  color: #ffc72c;
}

.hours,
#contactLocation,
#footEstablished {
  color: #ed7269;
}

.red-marker {
  color: #ff0000; /* Set the color to red */
}

.footLink {
  color: #767676;
}

.carouselWidth {
  width: 18rem;
}

#new {
  color: #da291c;
}

#sauces {
  color: #fff;
}

.menuItemsOrng {
  color: #da781c;
}

.fireText {
  font-size: 2rem;
  background: linear-gradient(90deg, red, orange, yellow, red);
  background-size: 400%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: flames 4s linear infinite;
}

@keyframes flames {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.azure-luminous-text {
  /* Set the font size and weight for the text */
  font-family: sans-serif;

  font-weight: bold;

  /* Create the linear gradient. It goes from the bottom (`to top`)
     and transitions from blue to white. */
  background: linear-gradient(
    to top,
    #007bff,
    white
  ); /* #007bff is a shade of blue */

  /* Clip the background to the text itself. This is the key property. */
  -webkit-background-clip: text;
  background-clip: text;

  /* Make the text color transparent so the gradient shows through. */
  -webkit-text-fill-color: transparent;
  color: transparent;

  /* Add a subtle bottom-right shadow with a lighter color */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/*NEON LLBO*/
/* This is the container for the images.
           It must be relative so the absolute children are positioned correctly. */
.image-container {
  position: relative;

  max-width: 100%; /* Ensures the container is responsive */
  margin: 0 auto;
}

/* Basic styling for the main hero image */
.hero-large {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* --- Neon Text Styles --- */
.neon-text {
  font-family: sans-serif;
  font-weight: bold;
  color: #fff; /* Base color of the neon tube */
  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0ff,
    /* Cyan glow */ 0 0 82px #0ff, 0 0 92px #0ff, 0 0 102px #0ff, 0 0 151px #0ff;

  /*
   * Added the 'slideIn' animation.
   * It runs for 1 second, uses an ease-out timing function, and stays in its final position.
   * The 'flicker' animation is kept for the glowing effect.
   */
  animation: flicker 1.5s infinite alternate, slideIn 1s ease-out forwards;

  /* Initial state to ensure the text starts off-screen and invisible */
  transform: translateX(-100%);
  opacity: 0;
  text-decoration: none;
}

/* Keyframes for the pulsing animation */
@keyframes flicker {
  0%,
  100% {
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0ff,
      0 0 82px #0ff, 0 0 92px #0ff, 0 0 102px #0ff, 0 0 151px #0ff;
  }
  50% {
    text-shadow: none; /* Make the text shadow briefly disappear */
  }
}

/*
 * New keyframes for the slide-in animation.
 * It moves the element from a position off the left side of the screen
 * to its natural position while fading in.
 */
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/*NEON sign ends*/

a {
  text-decoration: none !important;
}

/*@MEDIA starts*/
/* this is to make aboutContact2 smaller on smaller screens*/
@media (max-width: 420px) {
  #aboutContact1,
  #aboutContact2 {
    font-size: 1rem; /* Adjust font size for smaller screens */
  }
}
/*END of aboutContact2*/

/*To make navName responsive start*/
#navName {
  display: none;
}

#navName2 {
  display: none;
}

#navName3 {
  display: block;
}

@media (min-width: 500px) {
  #navName {
    display: none;
  }

  #navName2 {
    display: block;
  }

  #navName3 {
    display: none;
  }
}

@media (min-width: 1210px) {
  #navName {
    display: block;
  }

  #navName2 {
    display: none;
  }

  #navName3 {
    display: none;
  }
}
/*To make navName responsive end*/
#footEmail {
  /* Default font size for all screen sizes */
  font-size: 1rem;
}

@media (min-width: 768px) and (max-width: 992px) {
  #footEmail {
    font-size: 0.75rem;
  }
  #aboutContact2 {
    font-size: 1.1rem;
  }
}

@media screen and (max-width: 992px) {
  #menu,
  #about,
  #testimonials,
  #contact {
    scroll-margin-top: 310px; /* Adjust this value if needed */
  }
}

@media (max-width: 698px) {
  .sticky-wrapper.sticky-top .top-bar a {
    font-size: small; /* Or specify a font size in pixels, e.g., font-size: 10px; */
    font-weight: 200;
  }
}

@media screen and (max-width: 400px) {
  .sticky-wrapper.sticky-top .top-bar a {
    font-size: x-small;
    font-weight: 200;
  }
}