/* Container Styling */
 .custom-logo-container {
    display: flex;
    justify-content: flex-start;
    /* Align the logo to the left */
    align-items: center;
    /* Center the logo vertically */
    width: 100%;
    /* Full width of the container */
    padding: 10px 15px;
    /* Add padding for spacing */
  }

  /* Logo Link Styling */
  .custom-logo-link {
    display: block;
  }

  /* Responsive Logo Styling */
  .custom-responsive-logo {
    width: auto;
    /* Allow the logo to adjust based on its content */
    height: auto;
    /* Maintain aspect ratio */
    max-width: 250px;
    /* Set default maximum width for the logo */
    transition: all 0.3s ease-in-out;
    /* Smooth scaling effect */
  }

  /* For larger screens (laptops and desktops) */
  @media (min-width: 1024px) {
    .custom-responsive-logo {
      max-width: 250px;
      /* Larger logo size for desktops */
    }
  }

  /* For tablets */
  @media (min-width: 768px) and (max-width: 1023px) {
    .custom-responsive-logo {
      max-width: 150px;
      /* Medium logo size for tablets */
    }
  }

  /* For mobile devices */
  @media (max-width: 767px) {
    .custom-logo-container {
      justify-content: flex-start;
      /* Ensure logo remains on the left */
      padding: 10px;
      /* Adjust padding for smaller screens */
    }

    .custom-responsive-logo {
      max-width: 100px;
      /* Smaller logo size for mobile screens */
    }
  }

  /* Footer Logo Container Styling */
  .footer-logo-container {
    max-width: 200px;
    /* Default container width */
    margin: 0 auto;
    /* Center the container */
    display: flex;
    /* Flexbox for centering content */
    justify-content: center;
    /* Horizontal centering */
    align-items: center;
    /* Vertical centering */
  }

  /* Footer Logo Styling */
  .footer-logo-img {
    max-width: 100%;
    /* Ensures the logo fits within its container */
    height: auto;
    /* Maintains the aspect ratio */
    max-height: 120px;
    /* Set a maximum height for the logo */
    display: block;
  }

  /* Larger Screens (Desktops) */
  @media (min-width: 1024px) {
    .footer-logo-container {
      max-width: 250px;
      /* Wider container for desktops */
    }

    .footer-logo-img {
      max-width: 150px;
      /* Larger logo size for desktop */
      max-height: 150px;
    }
  }

  /* Medium Screens (Tablets) */
  @media (min-width: 768px) and (max-width: 1023px) {
    .footer-logo-container {
      max-width: 220px;
      /* Moderate size for tablets */
    }

    .footer-logo-img {
      max-width: 120px;
      /* Adjust logo size */
      max-height: 120px;
    }
  }

  /* Small Screens (Mobile) */
  @media (max-width: 767px) {
    .footer-logo-container {
      max-width: 180px;
      /* Narrower container for mobile */
    }

    .footer-logo-img {
      max-width: 100px;
      /* Smaller logo size for mobile */
      max-height: 100px;
    }
  }
  /* Default: Hide the mobile-only menu item */
.mobile-only {
display: none !important;
}

/* Show the mobile-only menu item on screens narrower than 768px (adjust as needed) */
@media (max-width: 768px) {
.mobile-only {
  display: block;
}
}