/* Ensure the navbar is correctly positioned and styled */

.modal-content {
        padding: 10px;
    }

    .modal-header .modal-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .modal-header .modal-title img {
        max-width: 86px;
        max-height: 86px;
        margin-right: 20px;
    }

    .modal-body {
        text-align: center;
    }

    .modal-body video {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }


.business-directory {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 10px;
            max-height: 500px;
            overflow-y: auto;
            margin-bottom: 20px;
            text-align: left;
            font-size: 12px;
        }

        .category {
            margin-top: 1rem;
            font-weight: bold;
            font-size: 1.2em;
        }

        .business {
            margin-left: 1rem;
        }

        .business a {
            text-decoration: none;
            color: #000;
        }

        .business a:hover {
            color: #007bff;
        }
.year-label {
font-size: 0.8rem; /* Smaller font size for the year */
color: #666; /* Light grey color, change as needed */
margin-left: 10px; /* Space between city name and year */
}
.city-image {
height: 40px; /* Set image height */
width: auto; /* Maintain aspect ratio */
margin-right: 10px; /* Space between image and text */
}

.no-video {
    background-color: #f8d7da;
}

.navbar {
      min-height: 70px; /* Adjust the height of the navbar */
      background-color: #f8f9fa; /* Light background for the navbar, change as needed */
      padding: 10px 0; /* Top and bottom padding */
  }

  .navbar-brand {
      padding: 0 15px; /* Ensures adequate padding around the brand/logo */
  }

  .navbar-line {
      height: 3px; /* Height of the blue line */
      width: 80%; /* Line width as 80% of its container width */
      margin: 0 auto; /* Centers the line horizontally */
      background: linear-gradient(to right,
                                  rgba(56, 163, 165, 0), /* Transparent on the left edge */
                                  rgba(56, 163, 165, 1) 10%, /* Transition to dark blue */
                                  rgba(56, 163, 165, 1) 90%, /* Hold dark blue till here */
                                  rgba(56, 163, 165, 0)); /* Transition back to transparent on the right edge */
  }
  .search-container {
    visibility: hidden;
  }
/* Adjust dropdown styling */
.dropdown-menu {
  display: none;
  width: auto; /* Adjusted to auto to allow for full expansion */
  padding: 0;
  background-color: white;
  position: absolute;
  left: 0;

  border: 1px solid #ccc; /* Optional border for clarity */
}

/* Show dropdown on hover and ensure it spans correctly */
.nav-item:hover .dropdown-menu {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px; /* Adds gaps between columns */
}

/* Style each dropdown item */
.dropdown-item {
  padding: 8px 15px;
  white-space: nowrap; /* Ensures text does not wrap */
  background-color: white; /* Background color for each item */
  border: none; /* Removes any borders */
}

/* Ensure background spans correctly across all items */
.nav-item:hover .dropdown-menu::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white; /* Ensures full coverage */
  z-index: -1; /* Keeps background behind content */
}

@media (min-width: 992px) {
  .dropdown-menu {
      grid-template-columns: repeat(4, 1fr); /* Maintain four columns on large screens */
  }
}
html, body {
    height: 100%; /* Set the minimum height of the html and body to be the full viewport */
    margin: 0;
    padding: 0;
}

.content {
    min-height: calc(100%); /* Adjust 60px to the total height of your footer */
    /* Ensure that the content area takes at least the height minus the footer height */
}

footer {
    height: 50px; /* Set a fixed height for your footer */
    background-color: #f0f0f0;
    padding: 5px 0;
    text-align: center;
    font-size: 12px;
    position: relative; /* Ensures footer is at the bottom */
    margin-top: -50px; /* Negative margin equal to the footer height to ensure it stays at the bottom */
}

.footer-line {
    height: 2px;
    width: 80%;
    margin: 0 auto 10px;
    background: linear-gradient(to right, rgba(56, 163, 165, 0), rgba(56, 163, 165, 1) 10%, rgba(56, 163, 165, 1) 90%, rgba(56, 163, 165, 0));
}

.footer-content {
    padding: 5px 0;
}
.iframe-container {
  position: relative;
      display: flex;
      justify-content: center;
      /* align-items: center; */
      height: 426px;
      padding: 10px;

    }
    iframe {
        width: 1100px;
        height: 426px;
        border: none;
        /* box-shadow: 0 4px 8px rgba(0,0,0,0.1);  Optional: adds subtle shadow */
    }
    @media (max-width: 1200px) { /* For smaller devices */
        iframe {
            width: 90%; /* Responsive width */
            height: auto; /* Maintain aspect ratio */
            max-height: 550px; /* Maximum height */
        }
    }
  .card-link {
    text-decoration: none; /* Removes underline from links */
    color: inherit; /* Inherits text color from parent */
    display: block; /* Makes the link block-level to contain the card */
}

.card-link:hover .card {
    background-color: #f8f9fa; /* Slightly changes the shade on hover */
    cursor: pointer; /* Changes the cursor to indicate clickable area */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: adds shadow for depth */
}

.card {
    transition: background-color 0.3s, box-shadow 0.3s; /* Smooth transition for background and shadow */
}
.recent-cities .dropdown-menu {
    display: none;
    grid-template-columns: none !important; /* Overrides any grid settings */
    width: auto; /* Resets any width settings to default */
}

.recent-cities:hover .dropdown-menu {
    display: block; /* Only display on hover */
}
.nav-item .dropdown-menu {
    display: none; /* Ensures dropdowns are not displayed by default */
}