/* Import Bebas Neue font */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* Default navigation menu text */
.theme-menu-name {
  font-family: 'Bebas Neue', sans-serif !important;
  color: #fdfdfd !important; /* white default text */
  font-size: 20px !important; /* larger font size */
  font-weight: normal !important; /* Bebas Neue is bold by default */
  letter-spacing: 1px; /* optional for better spacing */
  transition: color 0.3s ease; /* smooth hover effect */
}

/* Hover color for menu items */
.theme-menu-name:hover {
  color: #58b848 !important; /* green on hover */
}

/* Active or current page menu item */
.theme-menu-selected .theme-menu-name {
  color: #58b848 !important;
  font-weight: 600 !important;
}

/* Optional: make text slightly smaller on mobile */
@media (max-width: 768px) {
  .theme-menu-name {
    font-size: 18px !important;
  }
}
/* DESKTOP/TABLET: keep headline on one line + center it */
@media (min-width: 992px) {
  /* The heading element itself */
  h1.zpheading,
  h2.zpheading,
  .zphero-banner-style-02 .zpheading,
  .zpheading-style-none.zpheading-align-center {
    white-space: nowrap !important;      /* no wrapping */
    word-break: keep-all !important;     /* don't break words */
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    text-align: center !important;       /* center text */
    margin: 0 auto !important;
    letter-spacing: 0.5px;               /* optional: tighter fit */
  }

  /* Make sure the banner's row/container centers its children */
  .zphero-banner-style-02 .zprow-container,
  .zphero-banner-style-02 .theme-content-container,
  .zphero-banner-style-02 .zpcontainer {
    display: flex !important;
    justify-content: center !important;  /* center horizontally */
    align-items: center !important;      /* keep vertical alignment tidy */
    text-align: center !important;
  }

  /* Ensure inner span/font doesn't introduce wrapping */
  .zpheading span,
  .zpheading font {
    white-space: nowrap !important;
    display: inline !important;
  }
}

/* MOBILE: allow wrapping so it doesn't overflow */
@media (max-width: 991px) {
  h1.zpheading,
  h2.zpheading {
    white-space: normal !important;
    word-break: normal !important;
    text-align: center !important;
  }
}

<div style="text-align:center;">
  <span style="color:#165128; font-size:22px;">★ ★ ★ ★ ★</span>
</div>

/* Mobile: scale down all footer logos (Croc logo + social icons) */
@media (max-width: 768px) {

  /* Case 1: class is on the <img> itself */
  img.footer-social-icon {
    width: 32px !important;
    max-width: 32px !important;
    height: auto !important;
  }

  /* Case 2: class is on a wrapper div around the image */
  .footer-social-icon img {
    width: 32px !important;
    max-width: 32px !important;
    height: auto !important;
  }

  /* Safety: if Zoho turns the image element itself into a block with that class */
  .footer-social-icon {
    max-width: 32px !important;
  }
}
/* HEADER BACKGROUND */
.zsite-header, header {
    background-color: #155128 !important;
}
/* FOOTER BACKGROUND */
.zsite-footer, footer {
    background-color: #155128 !important;
}