#on-location {
    background-size: cover;
    background-position: bottom;
    background-image: url('../img/on-location/preparing-lunch-on-location.jpg');
}

#on-location .hero-fill {
    opacity: 0.8;
}

.lead-banner img {
  margin-top: 40px;
}

#on-location-carousel {
  margin-top: 0;
}

#on-location-carousel .carousel-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
  }
  
  #on-location-carousel .carousel-control {
    background: none;
    border: none;
    color: #8D8D8D; /* Customize as needed */
    font-size: 24px; /* Customize as needed */
    padding: 10px;
    cursor: pointer;
    border: 1px solid #8D8D8D;
    border-radius: 100%;
    width: 50px;
    height: 50px;

  }
  
  #on-location-carousel .carousel-text {
    margin: 0 20px; /* Adjust spacing */
    font-size: 1em; /* Customize as needed */
    padding: 0;
    color: #8D8D8D;
    text-transform: capitalize;
    display: none;

  }

  #on-location-carousel .card.selected .carousel-text {
    display: block;
    animation: fadeIn 0.5s ease-in-out;

  }

  #on-location-carousel .card-desc {
    font-size: 1.3em; /* Customize as needed */
  }

  .text-image-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
  }

  .text-image-container.flip {
    flex-direction: row-reverse;
  }
  
  .text-content {
    width: 50%; /* Fixed width for the text side */
    max-width: 600px; /* Ensures the text doesn't stretch too wide */
    padding-right: 25px; /* Adds space between text and image */
    margin: 0 auto;
  }

  
  
  .image-content {
    width: 50%; /* Fixed width for the image side */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  
  
  .image-content img {
    max-width: 100%; /* Ensures the image fits within its container */
    height: auto; /* Maintains aspect ratio */
    border-radius: 8px; /* Optional: adds rounded corners */
  }
  
  @media (max-width: 768px) {
    .text-image-container {
      flex-direction: column; /* Stacks elements on smaller screens */
      align-items: center;
    }

    .text-image-container.flip {
      flex-direction: column-reverse;
    }

    .text-image-container.flip .image-content {
      margin-bottom: 25px;
    }


  
    .text-content,
    .image-content {
      width: 100%; /* Full width on mobile */
      text-align: center; /* Centers the text */
      padding: 0; /* Removes padding */
    }
  
    .text-content {
      margin-bottom: 20px; /* Adds spacing between text and image */
    }
  }
  
  .section {
    padding-bottom: 40px;
  }