/* CSS fix for index.html to center main menu nav list and logo on large screens */
@media (min-width: 1300px) {
  /* Override container max-width to allow full width */
  .container {
    max-width: 100% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  /* Add left and right padding to body */
  body {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  /* Center main menu nav wrapper */
  .main-menu-two__wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Center main menu two wrapper inner specifically */
  .main-header-two .main-menu-two__wrapper-inner {
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Center main menu two left container */
  .main-header-two .main-menu-two__left {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center main menu two main menu box */
  .main-header-two .main-menu-two__main-menu-box {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Remove left margin on main menu list */
  .main-header-two .main-menu__list {
    margin-left: 0 !important;
  }

  /* Center logo and nav list horizontally */
  .main-menu-two__wrapper-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 50px !important;
  }

  /* Center main menu two left container */
  .main-menu-two__left {
    margin: 0 auto !important;
  }

  /* Center main menu two main menu box */
  .main-menu-two__main-menu-box {
    margin: 0 auto !important;
  }

  /* Center logo */
  .main-menu-two__logo {
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 50px !important;
  }

  /* Center nav list */
  .main-menu__list {
    display: flex !important;
    justify-content: center !important;
    gap: 40px !important;
    margin: 0 !important;
    margin-left: 0 !important;
  }

  /* Add left padding to top bar left elements */
  .main-menu__top-left {
    padding-left: 30px !important;
  }

  /* Add left padding to top bar right elements */
  .main-menu__top-right {
    padding-right: 30px !important;
    align-items: center !important;
  }
}

/* Fix for in-between mobile and tablet: force 2 rows layout */
@media (min-width: 600px) and (max-width: 900px) {
  .main-menu__top-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .top-header-left,
  .top-header-right {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
  }
  
  .top-header-left > div,
  .top-header-right > div {
    flex-shrink: 0 !important;
  }
  
  .top-header-social {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  
  .main-menu__top-left {
    padding-left: 15px !important;
  }
  
  .main-menu__top-right {
    padding-right: 15px !important;
  }
}

/* Extra small mobile view: max width 500px, add padding left and right to top menu elements */
@media (max-width: 500px) {
  .main-menu__top {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .main-menu__top > .container {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

/* Very small screens: max width 480px, remove padding/margin on top header left and right elements */
@media (max-width: 580px) {
  .main-menu__top-left {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .main-menu__top-right {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }
  /* Hide email address on small mobile screens */
  .main-menu__top-left a[href^="mailto:"] {
    display: none !important;
  }
  /* Hide phone number and social icons on very small mobile screens */
  @media (max-width: 580px) {
    .top-header-left > div:first-child {
      display: none !important;
    }
    .top-header-social {
      display: none !important;
    }
  }

/* Mobile view: max width 767px, reduce container padding inside top header */
@media (max-width: 767px) {
  .main-menu__top > .container {
    padding-left: 0 !important;
    padding-right: 5px !important;
  }
}
}

/* Tablet view: center align topheader elements */
@media (min-width: 600px) and (max-width: 1195px) {
  .main-menu__top-inner {
    justify-content: center !important;
    align-items: center;
  }
  
  .top-header-left,
  .top-header-right {
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
  }
  
  .top-header-left > div {
    flex-wrap: wrap;
    justify-content: center !important;
  }
  
  .top-header-social {
    margin-left: 0 !important;
    display: flex !important;
    gap: 10px !important;
  }
  
  /* Center logo and hamburger container */
  .main-menu-two__left {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  /* Move hamburger button to right */
  .main-menu-two__main-menu-box {
    margin-left: auto !important;
    padding-right: 50px !important;
  }
}