/* Fix for menu display on desktop and mobile */

/* Responsive logo sizing */
.logo-area img,
.mobile-menu-logo img {
  display: block;
  height: auto;
  max-height: 100px;
  max-width: 280px;
  width: auto;
  object-fit: contain;
}

.footer-wrapper-left-one .logo img {
  display: block;
  height: auto;
  max-height: 180px;
  max-width: 260px;
  width: auto;
  object-fit: contain;
}
.footer-wrapper-left-one .logo img.footer-logo-white {
  filter: brightness(0) invert(1);
}

@media only screen and (max-width: 991px) {
  .header-two-wrapper .logo-area img {
    max-height: 110px;
  }
  /* Mobile drawer logo should be larger than header logo */
  .mobile-menu-logo img {
    max-height: 130px;
    max-width: 300px;
  }

  .footer-wrapper-left-one .logo img {
    max-height: 150px;
  }
}

@media only screen and (max-width: 767px) {
  .header-two-wrapper .logo-area img {
    max-height: 102px;
  }
  /* Mobile drawer logo should be larger than header logo */
  .mobile-menu-logo img {
    max-height: 128px;
    max-width: 300px;
  }

  .footer-wrapper-left-one .logo img {
    max-height: 130px;
  }
}

@media only screen and (max-width: 480px) {
  .header-two-wrapper .logo-area img {
    max-height: 92px;
  }
  /* Mobile drawer logo should be larger than header logo */
  .mobile-menu-logo img {
    max-height: 116px;
    max-width: 280px;
  }

  .footer-wrapper-left-one .logo img {
    max-height: 110px;
  }
}

/* Show normal navbar on screens larger than 768px */
@media only screen and (min-width: 768px) {
  .nav-area {
    display: block !important;
  }
  
  .mainmenu {
    display: flex !important;
  }
  
  .mobile-menu-toggle {
    display: none !important;
  }
}

/* Add spacing between navbar links for medium screens */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .mainmenu li {
    margin-right: 15px !important;
  }
  
  .mainmenu li:last-child {
    margin-right: 0 !important;
  }
  
  .mainmenu li a {
    padding: 0 5px !important;
    font-size: 14px !important;
  }
}

/* Show mobile menu on screens smaller than 768px */
@media only screen and (max-width: 767px) {
  .mobile-menu-toggle {
    display: block !important;
  }
  
  .mainmenu {
    display: none !important;
  }
}