.logo-area img {
  height: 92px;
  width: auto;
  display: block;
}

.main-nav {
    /* center the nav horizontally while keeping the logo left */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    display: flex;
    justify-content: center;
    width: auto;
}

.main-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 28px;
}

/* Mobile nav toggle (hamburger) */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #0b2324;
    font-size: 1.1em;
    cursor: pointer;
    margin-left: auto; /* push toggle to the right */
}

/* When screen is small, revert nav to document flow below logo */
@media (max-width: 900px) {
    header { padding: 12px 0; }
    /* header container becomes a simple flex row: logo left, toggle right */
    .main-header-container { padding: 0 16px; display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; }
    .main-nav { position: static; transform: none; width: auto; margin-top: 0; flex: 0 0 auto; order: 2; min-width: 0; }
    /* hide the inline menu on small screens, show when opened */
    .main-nav ul { display: none; }
    .nav-toggle { display: inline-flex; z-index: 10002; order: 3; margin-left: auto; }
    .logo-area { order: 1; }
    /* make toggle visually distinct on mobile */
    .nav-toggle { background: rgba(27 186 15); padding: 6px; border-radius: 8px; }

    /* mobile-open overlay (full screen) */
    .main-nav.mobile-open {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(11,35,36,0.66);
        z-index: 10000;
        padding: 20px;
        pointer-events: auto;
    }
    .main-nav.mobile-open ul {
        display: flex !important;
        flex-direction: column;
        gap: 18px;
        background: #fff;
        padding: 18px 22px;
        border-radius: 10px;
        box-shadow: 0 30px 80px rgba(2,8,12,0.32);
        min-width: 240px;
        max-width: 96%;
        text-align: center;
    }
    .main-nav.mobile-open ul li a { color: #0b2324; font-size: 1.05em; }
    /* ensure the toggle looks good when overlay is visible */
    .nav-toggle { color: #0b2324; }
}

.main-nav a {
    color: #0b2324;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.05em;
    transition: color 0.2s;
}

.main-nav a:hover {
    color: var(--brand-green);
}

/* Header layout tweaks for small widths: logo left, toggle right */

@media (max-width: 900px) {
    .main-header-container { display:flex; align-items:center; gap:12px; }
    .logo-area { flex: 0 0 auto; }
    .nav-toggle { display: inline-flex; margin-left: 12px; }
    /* keep nav overlay behavior as defined when opened */
}

/* Further mobile typography and spacing reductions */
@media (max-width: 720px) {
    .hero-left h1 { font-size: 1.9em; }
    .hero-desc { font-size: 0.98em; }
    .hero-cta-btn { padding: 10px 18px; font-size: 0.95em; }
    .services-heading, .featured-heading, .about-heading { font-size: 2.1em; }
    .service-card { padding: 18px 14px; }
    .featured-product-card { padding: 12px; }
    .main-nav.mobile-open ul li a { font-size: 1em; padding: 10px 6px; }
}

@media (max-width: 420px) {
    .hero-left h1 { font-size: 2.6em; }
    .hero-desc { font-size: 0.95em; }
    .top-bar-left span, .top-bar-right span { font-size: 0.87em; font-weight: 600; }
}

/* Tweak header items to sit on one row (logo left, toggle right) for narrow screens */
@media (max-width: 900px) {
    .main-header-container { align-items: center; display:flex; }
    .logo-area { flex: 0 0 auto; }
    .logo-area img { height: 65px !important; width: auto !important; display: block; }
    .nav-toggle { margin-left: 12px; order: 3; margin-left: auto; }
    /* ensure the nav element doesn't force a new line */
    .main-nav { order: 2; display: block; }
}