/* Community Ray — header responsive overrides */

body.mobile-menu-opened {
  overflow: hidden;
}

@media (max-width: 1199px) {
  .header-layout1 .navbar > .container-fluid {
    padding-left: 15px;
    padding-right: 60px;
  }

  .header-layout1 .navbar-brand img.logo {
    max-width: 140px;
    width: auto;
    height: auto;
  }

  .header-layout1 .navbar .navbar-toggler {
    display: block;
    z-index: 1001;
  }

  .header-layout1 .navbar-mobile-panel {
    display: flex;
    flex-direction: column;
    width: min(280px, 85vw);
    height: 100%;
    overflow-y: auto;
    background-color: #ffffff;
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transition-delay: 0.15s;
  }

  .header-layout1 .navbar-collapse.menu-opened .navbar-mobile-panel {
    opacity: 1;
    transform: translateX(0);
  }

  .header-layout1 .navbar .navbar-collapse .navbar-nav {
    width: 100% !important;
    padding-bottom: 0;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }

  .navbar-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 20px 20px 28px;
    border-top: 1px solid #eee;
    margin-top: auto;
  }

  .navbar-mobile-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .navbar-mobile-actions .action__btn-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

@media (min-width: 1200px) {
  .header-layout1 .navbar .navbar-collapse {
    display: flex !important;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
  }

  .header-layout1 .navbar .navbar-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }

  .header-layout1 .navbar .nav__item {
    margin-right: 6px;
  }

  .header-layout1 .navbar .nav__item .nav__item-link {
    font-size: 14px;
    padding-right: 10px;
    white-space: nowrap;
  }

  .navbar-mobile-actions {
    display: none !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .header-layout1 .navbar-actions .btn {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 13px;
  }

  .header-layout1 .navbar-actions .btn span {
    white-space: nowrap;
  }
}