/* Super Blank */

/* Spacing for mobile menu */
.ast-mobile-header-content {
	padding: 8px 0 16px 0;
}

/* No border on X close button */
.ast-mobile-popup-drawer.active .menu-toggle-close:focus {
	border-width: 0;
}

/* X close button position */
.ast-mobile-popup-inner .ast-mobile-popup-header button#menu-toggle-close {
	padding: 34px;
}

/* Nested mobile arrows */
button.ast-menu-toggle {
	box-shadow: none;
}

.ast-menu-toggle:focus {
	outline: 0;
}

.ast-header-break-point .main-navigation li.menu-item-has-children ul.sub-menu li.menu-item a.menu-link span.ast-icon.icon-arrow {
	display: none;
}

.ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item > .ast-menu-toggle {
	/* Cannot avoid !important because Elementor already unsets the color with !important by itself */
	color: var(--ast-global-color-3) !important;
}
.main-navigation a {
    padding: 0 20px !important;
    letter-spacing: 0.5px;
} 
/* Book Appointment Button */
.menu-button > a {
    background-color: #007B83 !important;
    color: white !important;
    border-radius: 25px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: background-color 0.3s ease !important;
}

.menu-button > a:hover {
    background-color: #005F66 !important;
    color: white !important;
}

/* Menu spacing */
.main-navigation a {
    padding: 0 18px !important;
    letter-spacing: 0.4px !important;
}
```

3. Click **"Publish"**

---

### What This Will Look Like
Your menu will go from this:
```
Home  About  Our Services  Blog  Contact  Book Appointment
```
To this:
```
Home    About    Our Services    Blog    Contact    [ Book Appointment ]
@media only screen and (max-width: 768px) {
    .menu-toggle {
        font-size: 28px !important;
        padding: 10px !important;
    }
}
@media only screen and (max-width: 768px) {
    .elementor-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}
/* Mobile menu - make items clearly readable */
@media only screen and (max-width: 768px) {

    /* Menu background - clean white */
    .main-navigation .menu,
    .main-navigation ul,
    #site-navigation,
    .ast-mobile-menu-buttons,
    .navigation-accessibility {
        background-color: #ffffff !important;
    }

    /* Menu item text - dark and clear */
    .main-navigation a,
    .ast-header-navigation a,
    .menu-item a {
        color: #1A1A2E !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        padding: 12px 20px !important;
        display: block !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* Hover effect */
    .main-navigation a:hover,
    .menu-item a:hover {
        color: #007B83 !important;
        background-color: #f8f8f8 !important;
    }

    /* Book Appointment button in mobile menu */
    .menu-button > a {
        background-color: #007B83 !important;
        color: white !important;
        border-radius: 25px !important;
        margin: 10px 20px !important;
        text-align: center !important;
    }

    /* Hamburger icon colour */
    .menu-toggle,
    button.menu-toggle {
        color: #1A1A2E !important;
        background: transparent !important;
        font-size: 26px !important;
    }
}
/* Fix hamburger icon visibility */
@media only screen and (max-width: 768px) {
    button.menu-toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        color: #1A1A2E !important;
        background: transparent !important;
        border: none !important;
        font-size: 26px !important;
        padding: 10px !important;
        cursor: pointer !important;
    }

    .ast-mobile-header-wrap button.menu-toggle {
        display: flex !important;
        align-items: center !important;
    }
}
/* Hamburger icon - force dark colour */
.ast-mobile-header-wrap .menu-toggle,
.ast-mobile-header-wrap .menu-toggle span,
.ast-mobile-header-wrap button.menu-toggle,
header .menu-toggle,
header button.menu-toggle,
.site-header .menu-toggle {
    color: #1A1A2E !important;
    fill: #1A1A2E !important;
    border-color: #1A1A2E !important;
}

/* The three lines of hamburger */
.ast-mobile-header-wrap .menu-toggle .mobile-menu-wrap,
.menu-toggle .ast-mobile-menu-trigger-minimal,
.menu-toggle .ast-mobile-menu-trigger-fill {
    color: #1A1A2E !important;
    background: #1A1A2E !important;
}

/* Astra specific hamburger bars */
.ast-mobile-menu-trigger-minimal span,
.ast-mobile-menu-trigger-fill span {
    background-color: #1A1A2E !important;
}