:root {
  --theme-color: #217066;
  --theme-hover: #1a5a54;
}

.top-navbar {
  background-color: var(--theme-color);
  padding: 8px;
}
.last-navbar {
  background-color: var(--theme-color);
  padding: 8px;
}
.navbar a {
  color: black;
  text-decoration: none;
  margin-right: 20px;
}

.navbar a:hover {
  text-decoration: underline;
  color: var(--theme-hover);
}

.navbar-nav .nav-link {
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover {
  font-weight: bold;
  transform: scale(1.1);
  color: var(--theme-hover);
}

/* Show main dropdown on hover */
.nav-item:hover > .dropdown-menu {
  display: block;
}

/* Nested submenu hover support */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  display: none;
  position: absolute;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  position: absolute;
}

/* Desktop (keep existing hover behavior) */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  position: absolute;
  display: none;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* Mobile override (vertical dropdown under parent) */
@media (max-width: 991.98px) {
  .dropdown-submenu > .dropdown-menu {
      position: relative !important;
      left: 0 !important;
      top: 0 !important;
      display: none;
      margin-left: 0 !important;
  }

  .dropdown-submenu > .dropdown-menu.show {
      display: block;
  }
}

/* For large screens, force dropdown to open on the left */
@media (min-width: 992px) {
    .dropdown-submenu > .dropdown-menu {
        left: auto !important; /* Reset default right alignment */
        right: 100%; /* Align to the left of the parent */
    }

    .dropdown-submenu:hover > .dropdown-menu {
        display: block; /* Ensure it shows on hover */
    }
}

@media (max-width: 576px) {
  .top-navbar span,
  .top-navbar a {
      margin-right: 0.5rem !important; /* reduce spacing */
  }
}

@media (max-width: 991.98px) {
  .navbar .btn {
      font-size: 0.85rem;
      padding: 0.25rem 0.5rem;
  }

  .navbar .btn i {
      margin-right: 0 !important;
  }
}

.logo-img {
  width: 30px;
  height: 40px;
  object-fit: contain;
}

.brand-title {
  color: #217066;
  font-size: 1.2rem;
}

.brand-title span {
  color: #217066;
}

.brand-tagline {
  font-size: 1rem;
  color: #6c757d;
  text-align: center;
}

/* Responsive logo and text size */
@media (max-width: 768px) {
  .logo-img {
      width: 24px;
      height: 32px;
  }

  .brand-title {
      font-size: 1rem;
  }

  .brand-tagline {
      font-size: 0.9rem;
  }
}

/* Fixed: Ensure logo + buttons stay on one line without wrapping */
#logo-btn-container {
  display: flex;
  flex-wrap: nowrap; /* no wrapping */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem; /* Add spacing between elements */
}

/* Logo + brand text container */
#logo-btn-container > a {
  display: flex;
  flex-shrink: 1; /* allow shrinking */
  min-width: 0; /* allow shrinking inside flex */
  align-items: center;
  margin-right: 0;
}

/* Brand text container inside logo link */
#logo-btn-container > a > div {
  flex-shrink: 1;
  min-width: 0;
}

/* Prevent brand title from wrapping */
.brand-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Prevent brand tagline from wrapping */
.brand-tagline {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Buttons container */
#btn-group {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0; /* do not shrink buttons */
}

/* Buttons */
#btn-group a {
  white-space: nowrap; /* keep button content on one line */
}

/* Default for large screens */
#logo-btn-container {
  flex-wrap: nowrap;
}

#logo-btn-container > a {
  margin-right: auto; /* pushes buttons to the right */
}

/* Small screens - show icons only beside logo */
@media (max-width: 991.98px) {
  #logo-btn-container {
      flex-wrap: nowrap;
      align-items: center;
  }

  #logo-btn-container > a {
      margin-right: 0;
  }

  #btn-group a {
      padding-left: 0.5rem !important;
      padding-right: 0.5rem !important;
      font-size: 1.2rem; /* slightly bigger icons */
  }

  /* Hide text on small screens, show only icons */
  #btn-group .btn-text {
      display: none !important;
  }

  /* Optional: reduce horizontal space between icon buttons */
  #btn-group {
      gap: 0.5rem;
  }
}

/* Ensure navbar container doesn't wrap */
.navbar .container {
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping for main navbar items */
    align-items: center; /* Align items vertically */
    justify-content: space-between; /* Space between logo and toggler */
}

/* Adjust logo, buttons, and toggler for smaller screens */
@media (max-width: 991.98px) {
    .navbar .container {
        flex-wrap: nowrap; /* Keep everything on one line */
    }

    #logo-btn-container {
        flex: 1 1 auto; /* Allow logo and buttons to shrink */
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo-img {
        width: 24px; /* Reduce logo size */
        height: 32px;
    }

    .brand-title {
        font-size: 1rem; /* Reduce brand title size */
    }

    .brand-tagline {
        font-size: 0.85rem; /* Reduce tagline size */
    }

    #btn-group a {
        font-size: 0.8rem; /* Reduce button font size */
        padding: 0.25rem 0.5rem; /* Adjust button padding */
    }

    #btn-group {
        gap: 0.3rem; /* Reduce gap between buttons */
    }

    .navbar-toggler {
        margin-left: auto; /* Push toggler to the right */
        flex-shrink: 0; /* Prevent shrinking */
    }

    .navbar-collapse {
        position: relative; /* Ensure it stays below the navbar */
        width: 100%; /* Take full width of the navbar */
        margin-top: 0.5rem; /* Add spacing below the navbar */
        background-color: #f8f9fa; /* Optional: Add a background color */
        z-index: 1; /* Ensure it appears above other elements */
    }

    .navbar-collapse.show {
        display: block; /* Ensure it displays as a block element */
        width: 100%; /* Take full width */
    }

    .navbar-nav {
        flex-direction: column; /* Stack menu items vertically */
        align-items: flex-start; /* Align items to the left */
        width: 100%; /* Take full width */
    }

    .nav-item {
        width: 100%; /* Ensure each item takes full width */
    }

    .nav-link {
        padding: 0.5rem 1rem; /* Adjust padding for better spacing */
        text-align: left; /* Align text to the left */
    }
}

/* Further adjustments for very small screens */
@media (max-width: 576px) {
    .navbar .container {
        padding: 0 10px; /* Reduce padding */
    }

    .logo-img {
        width: 20px; /* Further reduce logo size */
        height: 28px;
    }

    .brand-title {
        font-size: 0.9rem; /* Further reduce brand title size */
    }

    .brand-tagline {
        font-size: 0.75rem; /* Further reduce tagline size */
    }

    #btn-group a {
        font-size: 0.75rem; /* Further reduce button font size */
        padding: 0.2rem 0.4rem; /* Adjust button padding */
    }

    #btn-group {
        gap: 0.2rem; /* Further reduce gap between buttons */
    }
}

/* Ensure the collapsible menu opens below the navbar */
@media (max-width: 991.98px) {
    .navbar-collapse {
        position: relative; /* Ensure it stays below the navbar */
        width: 100%; /* Take full width of the navbar */
        margin-top: 0.5rem; /* Add spacing below the navbar */
        background-color: #f8f9fa; /* Optional: Add a background color */
        z-index: 1; /* Ensure it appears above other elements */
    }

    .navbar-collapse.show {
        display: block; /* Ensure it displays as a block element */
        width: 100%; /* Take full width */
    }

    .navbar-nav {
        flex-direction: column; /* Stack the menu items vertically */
        align-items: flex-start; /* Align items to the left */
        width: 100%; /* Take full width */
    }

    .nav-item {
        width: 100%; /* Ensure each item takes full width */
    }

    .nav-link {
        padding: 0.5rem 1rem; /* Adjust padding for better spacing */
        text-align: left; /* Align text to the left */
    }
}

/* Hover effect for WhatsApp button */
#btn-group a.btn-success:hover {
    background-color: #3c8d3c; /* Darker green for WhatsApp hover */
    color: white; /* Ensure text remains visible */
    text-decoration: none; /* Remove underline on hover */
}

/* Hover effect for Call Now button */
#btn-group a.btn-outline-success:hover {
    background-color: #d4f4d4; /* Light green for Call Now hover */
    color: #217066; /* Match the theme color for text */
    border-color: #d4f4d4; /* Match the background color for border */
    text-decoration: none; /* Remove underline on hover */
}

/* Adjust WhatsApp and Call Now buttons for very small screens */
@media (max-width: 380px) {
    #btn-group {
        gap: 0.3rem; /* Reduce the gap between buttons */
    }

    #btn-group a {
        flex-shrink: 0; /* Prevent buttons from shrinking */
        padding: 0.3rem 0.6rem; /* Reduce padding for smaller buttons */
        font-size: 0.75rem; /* Reduce font size */
        border-radius: 50px; /* Ensure buttons remain rounded */
    }

    #btn-group a i {
        font-size: 1rem; /* Adjust icon size */
        margin-right: 0; /* Remove extra spacing for icons */
    }

    .btn-text {
        display: none; /* Hide text on very small screens to save space */
    }

    /* Adjust elements for very small screens */
    #logo-btn-container {
        flex-wrap: nowrap; /* Prevent wrapping */
        gap: 0.3rem; /* Reduce gap between elements */
    }

    .logo-img {
        width: 20px; /* Reduce logo size */
        height: 28px;
    }

    .brand-title {
        font-size: 0.7rem; /* Reduce company name font size */
    }
    .brand-tagline {
      font-size: 0.7rem; /* Further reduce tagline size */
  }

    #btn-group {
        display: flex;
        gap: 0.2rem; /* Reduce gap between buttons */
    }

    #btn-group a {
        flex-shrink: 0; /* Prevent buttons from shrinking */
        padding: 0.3rem 0.6rem; /* Reduce padding for smaller buttons */
        font-size: 0.75rem; /* Reduce font size */
        border-radius: 50px; /* Ensure buttons remain rounded */
    }

    #btn-group a i {
        font-size: 1rem; /* Adjust icon size */
        margin-right: 0; /* Remove extra spacing for icons */
    }

    .btn-text {
        display: none; /* Hide text on very small screens to save space */
    }

    .navbar-toggler {
        flex-shrink: 0; /* Prevent toggler from shrinking */
        margin-left: auto; /* Push toggler to the far right */
        size: 1.5rem; /* Adjust size of the toggler icon */
    }
}


@media (max-width: 380px) {
  .top-navbar {
    background-color: var(--theme-color);
   
  } 

  .custom-responsive-text-top {
    font-size: 0.5rem; /* or smaller until it fits in one line */

  }
}
.custom-responsive-text {
  font-size: 1rem;
  color: white;
}


@media (max-width: 576px) {
  .top-navbar {
    background-color: var(--theme-color);
   
  } 

  .custom-responsive-text-top {
    font-size: 0.6rem; /* or smaller until it fits in one line */

  }
}
.custom-responsive-text {
  font-size: 1rem;
  color: white;
}

@media (max-width: 576px) {
  .custom-responsive-text {
    font-size: 0.5rem; /* or smaller until it fits in one line */

  }
}

@media (max-width: 380px) {
  .custom-responsive-text {
    font-size: 0.5rem; /* or smaller until it fits in one line */
   
  }
}