/* Navbar Styles */
.main .header1 {
  background: #f3c009;
  color: rgb(66, 65, 65);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  height: 80px;
}

.logo img {
  height: 50px;
}

/* Desktop Navbar - visible by default on larger screens */
.navbar {
  display: flex;
  justify-content: flex-end;  /* Align menu to the right */
  align-items: center;
  flex-grow: 1;
}

.navbar .fix {
  display: flex;
  justify-content: flex-end;  /* Align items to the right */
  align-items: center;
}

.navbar .a1 {
  margin: 0 15px;
  text-decoration: none;
  color: #808080;  /* Grey text color */
  font-size: 1.2rem;  /* Increased font size */
  transition: color 0.3s ease; /* Smooth transition for hover effect */
}

/* Hover effect */
.navbar .a1:hover {
  color: #f1f1f1;  /* Light color on hover */
}

/* Mobile Navbar - hidden by default */
.mobile-nav {
  display: none;  /* Hide mobile menu by default */
}

/* Show mobile navbar and menu button on smaller screens */
@media (max-width: 768px) {
  .navbar {
    display: none; /* Hide desktop navbar on smaller screens */
  }

  .mobile-nav {
    display: block; /* Show mobile navbar */
  }

  .menu-items {
    display: none; /* Hide menu items by default */
    position: absolute;
    top: 80px; /* Adjust based on navbar height */
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    text-align: center;
    padding: 20px 0;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }

  .menu-items.active {
    display: block;
    transform: translateX(0); /* Show menu items when active */
  }

  .menu-items a {
    display: block;
    color: #808080;  /* Grey text color */
    font-size: 1.4rem;
    text-decoration: none;  /* Remove underline */
    padding: 15px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .menu-items a:hover {
    background-color: #f1f1f1;  /* Light background on hover */
    color: black;  /* Dark text color on hover */
  }

  /* Hamburger button for mobile */
  .mobile-nav #menuBtn {
    display: block;
    background: none;
    border: none;
    font-size: 30px;
    color: rgb(78, 76, 76);
    cursor: pointer;
  }

  /* Hide regular navbar links on small screens */
  .navbar .fix {
    display: none;
  }
}
/* Show the menu items when the 'active' class is added */
.mobile-nav .menu-items.active {
  display: block;
  transform: translateX(0); /* Slide in the menu */
}
.site-footer{
  background-color: #f3c009;
}
/* Responsive Design */
@media (max-width: 991px) {
  .site-footer [class^=col-] {
    margin-bottom: 30px;
  }

  .site-footer .social-icons {
    text-align: center;
  }

  .main .header1 {
    padding: 15px 20px;
  }

  .a1 {
    font-size: 1.3rem; /* Slightly larger font size for smaller screens */
  }
}

@media (max-width: 480px) {
  .main .header1 {
    padding: 10px 15px;
    height: 70px; /* Adjust height for small screens */
  }

  .a1 {
    font-size: 1.4rem;  /* Slightly increase font size */
    margin: 0 10px;
  }
  .navbar .menu-item.highlight {
    background-color: #fff; /* Ensure Booking remains highlighted */
    color: #f3c009;
  }
}
.navbar .menu-item.highlight {
  background-color: #2f2e2e; /* White background */
  color: #f7f6f3; /* Yellow text */
  font-weight: bold; /* Make text bold */
  border: 2px solid #f3c009; /* Yellow border */
  padding: 8px 13px; /* Adjust padding for border */
  border-radius: 25px;
}