/*
 * Directory Goo — Homepage Header V1
 * Presentation-only responsive enhancement
 * CMS/backend/search/authentication logic remains unchanged
 */

/* =========================================================
   HOMEPAGE HEADER BASE
   ========================================================= */

.main-nav.nav-1 {
    background: linear-gradient(
        135deg,
        rgba(23, 153, 50, 0.98) 0%,
        rgba(30, 175, 56, 0.98) 55%,
        rgba(27, 163, 52, 0.98) 100%
    ) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 4px 20px rgba(5, 48, 18, 0.08);
}

.main-nav.nav-1 > .container-lg {
    position: relative;
}

/* =========================================================
   LOGO
   ========================================================= */

.main-nav.nav-1 .website-logo {
    background: #fff !important;
    border-radius: 0 0 12px 12px !important;
    box-shadow: 0 8px 22px rgba(7, 55, 20, 0.15);
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.main-nav.nav-1 .website-logo:hover {
    box-shadow: 0 10px 28px rgba(7, 55, 20, 0.2);
}

/* =========================================================
   DESKTOP SEARCH
   ========================================================= */

.main-nav.nav-1 .search-bar {
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.13);
}

.main-nav.nav-1 .search-bar .search-icon {
    min-width: 58px;
    border: 0 !important;
    border-radius: 8px 0 0 8px !important;
    background: #0876d1 !important;
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.main-nav.nav-1 .search-bar .search-icon:hover {
    background: #0568bb !important;
}

.main-nav.nav-1 .search-bar .search-icon:focus {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55) !important;
}

.main-nav.nav-1 .search-bar .search-icon img {
    width: 20px !important;
    height: 20px;
    object-fit: contain;
}

.main-nav.nav-1 .search-bar .form-control {
    min-height: 46px;
    border: 0 !important;
    border-left: 1px solid #e7ebee !important;
    background: rgba(255, 255, 255, 0.99);
    box-shadow: none !important;
    font-size: 14px;
}

.main-nav.nav-1 .search-bar .form-control:focus {
    background: #fff;
    box-shadow: inset 0 0 0 2px rgba(8, 118, 209, 0.18) !important;
}

.main-nav.nav-1 .search-bar .input-field1 {
    min-width: 210px;
}

.main-nav.nav-1 .search-bar .input-field2 {
    min-width: 245px;
    border-radius: 0 8px 8px 0 !important;
}

.main-nav.nav-1 .search-bar .input-field-img {
    z-index: 2;
}

/* =========================================================
   SIGN IN / ADD BUSINESS
   ========================================================= */

.main-nav.nav-1 .bussiness-btn {
    min-height: 39px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 7px !important;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.main-nav.nav-1 #opensign1.bussiness-btn {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.92) !important;
    color: #fff !important;
}

.main-nav.nav-1 #opensign1.bussiness-btn:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

.main-nav.nav-1 a.bussiness-btn {
    background: #fff !important;
    border: 2px solid #fff !important;
    color: #168f31 !important;
    box-shadow: 0 4px 12px rgba(4, 73, 20, 0.12);
}

.main-nav.nav-1 a.bussiness-btn:hover {
    background: #f3fff5 !important;
    color: #117b29 !important;
    box-shadow: 0 6px 16px rgba(4, 73, 20, 0.18);
}

.main-nav.nav-1 .bussiness-btn:active {
    transform: translateY(1px);
}

/* =========================================================
   CMS CATEGORY / HEADER LINKS
   ========================================================= */

.main-nav.nav-1 .header-dropdown {
    position: relative;
}

.main-nav.nav-1 .header-dropdown .drop-btn,
.main-nav.nav-1 .link-hover {
    position: relative;
    font-weight: 500;
    text-decoration: none !important;
    transition:
        opacity 0.2s ease,
        color 0.2s ease;
}

.main-nav.nav-1 .header-dropdown .drop-btn:hover,
.main-nav.nav-1 .link-hover:hover {
    opacity: 0.88;
    border-bottom: 0 !important;
}

.main-nav.nav-1 .header-dropdown .drop-btn::after,
.main-nav.nav-1 .link-hover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    transition: width 0.2s ease;
}

.main-nav.nav-1 .header-dropdown .drop-btn:hover::after,
.main-nav.nav-1 .link-hover:hover::after {
    width: 100%;
}

/* =========================================================
   DESKTOP DROPDOWN MENU
   ========================================================= */

.main-nav.nav-1 .drops-container {
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.14));
}

.main-nav.nav-1 .header-dropdwon-menu {
    width: 220px !important;
    max-height: 300px !important;
    border: 1px solid #eef1f3;
    border-radius: 9px !important;
    background: #fff;
    box-shadow: 0 10px 28px rgba(17, 31, 38, 0.13);
}

/* =========================================================
   SCROLLED HEADER
   ========================================================= */

.main-nav.nav-1.header-scroll {
    background: rgba(24, 157, 50, 0.98) !important;
    box-shadow: 0 6px 22px rgba(7, 56, 20, 0.16);
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1200px) {

    .main-nav.nav-1 > .container-lg {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .main-nav.nav-1 .search-bar .input-field1 {
        min-width: 225px;
    }

    .main-nav.nav-1 .search-bar .input-field2 {
        min-width: 270px;
    }

    .main-nav.nav-1 .bussiness-btn {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* =========================================================
   TABLET / SMALL LAPTOP
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199.98px) {

    .main-nav.nav-1 .website-logo {
        box-shadow: 0 6px 18px rgba(7, 55, 20, 0.13);
    }

    .main-nav.nav-1 .search-bar {
        border-radius: 8px;
    }

    .main-nav.nav-1 .search-bar .search-icon {
        min-width: 48px;
    }

    .main-nav.nav-1 .search-bar .form-control {
        min-height: 43px;
        font-size: 13px;
    }

    .main-nav.nav-1 .search-bar .input-field1 {
        min-width: 165px;
    }

    .main-nav.nav-1 .search-bar .input-field2 {
        min-width: 195px;
    }

    .main-nav.nav-1 .bussiness-btn {
        min-height: 37px;
        font-size: 12px !important;
    }
}

/* =========================================================
   MOBILE / TABLET SEARCH ROW
   ========================================================= */

@media (max-width: 991.98px) {

    .main-nav.nav-1 .navbar-collapse .search-bar {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .search-icon {
        flex: 0 0 46px;
        width: 46px !important;
        min-width: 46px;
        max-width: 46px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar > .position-relative {
        flex: 1 1 50%;
        min-width: 0;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar > .col-5 {
        flex: 1 1 50%;
        width: auto !important;
        min-width: 0;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .form-control {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        font-size: 13px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .input-field1,
    .main-nav.nav-1 .navbar-collapse .search-bar .input-field2 {
        min-width: 0;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .main-nav.nav-1 {
        box-shadow: 0 4px 16px rgba(5, 48, 18, 0.13);
    }

    .main-nav.nav-1 > .container-lg {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .main-nav.nav-1 .hamburger {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin-right: 4px !important;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 7px;
        font-size: 17px;
        background: rgba(255, 255, 255, 0.08);
    }

    .main-nav.nav-1 .website-logo {
        border-radius: 0 0 9px 9px !important;
        box-shadow: 0 5px 14px rgba(7, 55, 20, 0.12);
    }

    .main-nav.nav-1 .bussiness-btn {
        min-height: 34px;
        padding: 6px 9px !important;
        border-radius: 6px !important;
        font-size: 11px !important;
    }

    .main-nav.nav-1 #opensign1.bussiness-btn {
        margin-right: 5px !important;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar {
        margin-top: 3px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .search-icon {
        flex-basis: 42px;
        width: 42px !important;
        min-width: 42px;
        max-width: 42px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .search-icon img {
        width: 17px !important;
        height: 17px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .form-control {
        min-height: 40px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-size: 12px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .input-field1 {
        padding-left: 25px !important;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .input-field2 {
        padding-left: 9px !important;
        padding-right: 7px !important;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .input-field-img {
        left: 6px !important;
        width: 14px !important;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.2px) {

    .main-nav.nav-1 .hamburger {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .main-nav.nav-1 .website-logo {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .main-nav.nav-1 .bussiness-btn {
        min-height: 32px;
        padding: 5px 7px !important;
        font-size: 10.5px !important;
    }

    /*
     * Existing React mobile menu is fixed.
     * Preserve its application behavior while polishing presentation.
     */
    .main-nav.nav-1 .slider-for-DropDown {
        background: #fff;
        color: #111827;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    }

    .main-nav.nav-1 .slider-for-DropDown .accordion-item {
        border-bottom: 1px solid #edf0f2 !important;
    }

    .main-nav.nav-1 .slider-for-DropDown .accordion-button {
        min-height: 46px;
        border-bottom: 1px solid #edf0f2 !important;
        font-weight: 600;
    }
}

/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .main-nav.nav-1 *,
    .main-nav.nav-1 *::before,
    .main-nav.nav-1 *::after {
        transition-duration: 0.01ms !important;
    }
}

/* =========================================================
   Directory Goo Header V2 Responsive Polish
   Keeps Header V1 architecture and CMS behavior intact
   ========================================================= */

/* ---------- Desktop refinement ---------- */

@media (min-width: 1200px) {

    .main-nav.nav-1 > .container-lg {
        column-gap: 18px;
    }

    .main-nav.nav-1 .website-logo {
        flex: 0 0 auto;
    }

    .main-nav.nav-1 .navbar-collapse {
        align-items: flex-start;
    }

    .main-nav.nav-1 .search-bar {
        margin-top: 0 !important;
    }

    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        margin-top: 2px;
        align-items: center;
    }

    .main-nav.nav-1 .header-dropdown,
    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute > div {
        margin-top: 0 !important;
    }

    .main-nav.nav-1 .header-dropdown .drop-btn,
    .main-nav.nav-1 .link-hover {
        font-size: 14px;
        line-height: 1.2;
    }
}

/* ---------- Tablet: treat 768–991 as compact header ---------- */

@media (min-width: 768px) and (max-width: 991.98px) {

    .main-nav.nav-1 > .container-lg {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .main-nav.nav-1 .website-logo {
        width: 190px !important;
        padding: 7px 8px 2px !important;
    }

    .main-nav.nav-1 .website-logo img {
        width: 100%;
        height: auto;
    }

    .main-nav.nav-1 .bussiness-btn {
        min-height: 39px;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .main-nav.nav-1 .navbar-collapse.mt-1.justify-content-center {
        width: 100%;
        margin-top: 4px !important;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar {
        max-width: 720px;
        min-height: 46px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .search-icon {
        flex-basis: 50px;
        width: 50px !important;
        min-width: 50px;
        max-width: 50px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .form-control {
        min-height: 46px;
        font-size: 14px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .input-field1 {
        padding-left: 30px !important;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .input-field-img {
        left: 8px !important;
        width: 16px !important;
    }

    .main-nav.nav-1 .navbar-collapse .d-flex.position-absolute {
        position: relative !important;
        width: 100%;
        justify-content: center;
        gap: 3px 6px;
        margin-top: 2px;
        padding-bottom: 3px;
    }

    .main-nav.nav-1 .navbar-collapse .header-dropdown,
    .main-nav.nav-1 .navbar-collapse .d-flex.position-absolute > div {
        margin-top: 2px !important;
    }

    .main-nav.nav-1 .navbar-collapse .header-dropdown .drop-btn,
    .main-nav.nav-1 .navbar-collapse .link-hover {
        font-size: 12px;
        line-height: 1.25;
    }
}

/* ---------- Mobile 421–767 ---------- */

@media (min-width: 421px) and (max-width: 767.98px) {

    .main-nav.nav-1 > .container-lg {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .main-nav.nav-1 .hamburger {
        width: 36px;
        height: 36px;
        font-size: 17px;
    }

    .main-nav.nav-1 .website-logo {
        width: 145px !important;
        padding: 6px 6px 2px !important;
    }

    .main-nav.nav-1 .bussiness-btn {
        min-height: 35px;
        padding: 7px 9px !important;
        font-size: 11px !important;
    }

    .main-nav.nav-1 .navbar-collapse.mt-1.justify-content-center {
        margin-top: 3px !important;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar {
        min-height: 42px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .search-icon {
        flex-basis: 44px;
        width: 44px !important;
        min-width: 44px;
        max-width: 44px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .form-control {
        min-height: 42px;
        font-size: 12.5px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .input-field1 {
        padding-left: 27px !important;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .input-field-img {
        left: 7px !important;
        width: 15px !important;
    }
}

/* ---------- Small mobile <= 420 ---------- */

@media (max-width: 420px) {

    .main-nav.nav-1 > .container-lg {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .main-nav.nav-1 .hamburger {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    .main-nav.nav-1 .website-logo {
        width: 128px !important;
        padding: 5px 5px 2px !important;
    }

    .main-nav.nav-1 .bussiness-btn {
        min-height: 33px;
        padding: 6px 7px !important;
        font-size: 10.5px !important;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar {
        min-height: 40px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .search-icon {
        flex-basis: 40px;
        width: 40px !important;
        min-width: 40px;
        max-width: 40px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .form-control {
        min-height: 40px;
        font-size: 11.5px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .input-field1 {
        padding-left: 24px !important;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .input-field-img {
        left: 6px !important;
        width: 14px !important;
    }
}

/* =========================================================
   Directory Goo Header V3 — Mobile Top Row Polish
   Mobile only. Desktop/tablet unchanged.
   ========================================================= */

@media (max-width: 575.2px) {

    .main-nav.nav-1 > .container-lg {
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .main-nav.nav-1 .hamburger {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px;
        margin-right: 5px !important;
        font-size: 16px !important;
    }

    .main-nav.nav-1 .website-logo {
        width: 138px !important;
        flex: 0 0 138px;
        padding: 5px 6px 2px !important;
    }

    .main-nav.nav-1 .website-logo img {
        width: 100%;
        height: auto;
    }

    .main-nav.nav-1 .bussiness-btn {
        min-height: 34px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .main-nav.nav-1 #opensign1.bussiness-btn {
        margin-right: 5px !important;
    }

    .main-nav.nav-1 .navbar-collapse.mt-1.justify-content-center {
        margin-top: 4px !important;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar {
        min-height: 41px;
        border-radius: 7px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .search-icon {
        flex-basis: 42px;
        width: 42px !important;
        min-width: 42px;
        max-width: 42px;
    }

    .main-nav.nav-1 .navbar-collapse .search-bar .form-control {
        min-height: 41px;
        font-size: 12px;
    }
}

@media (max-width: 460px) {

    .main-nav.nav-1 .website-logo {
        width: 132px !important;
        flex-basis: 132px;
    }

    .main-nav.nav-1 .bussiness-btn {
        padding-left: 7px !important;
        padding-right: 7px !important;
        font-size: 10.5px !important;
    }
}

@media (max-width: 390px) {

    .main-nav.nav-1 .website-logo {
        width: 120px !important;
        flex-basis: 120px;
    }

    .main-nav.nav-1 .hamburger {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
    }

    .main-nav.nav-1 .bussiness-btn {
        min-height: 32px !important;
        padding: 5px 6px !important;
        font-size: 10px !important;
    }
}

/* =========================================================
   Directory Goo Header V4 — Desktop Navigation Alignment
   Desktop only. Tablet/mobile unchanged.
   ========================================================= */

@media (min-width: 992px) {

    /* Give the desktop header enough room for its navigation row */
    .main-nav.nav-1 {
        padding-bottom: 10px !important;
    }

    /*
     * Existing React navigation is positioned beneath the search row.
     * Pull it slightly upward so it sits fully inside the green header.
     */
    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        margin-top: -1px !important;
        padding-bottom: 5px !important;
        align-items: center !important;
    }

    .main-nav.nav-1 .header-dropdown .drop-btn,
    .main-nav.nav-1 .link-hover {
        line-height: 1.25 !important;
    }
}

/* =========================================================
   Directory Goo Header V5 — Desktop Nav Final Position
   ========================================================= */

@media (min-width: 992px) {

    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        transform: translateY(-8px) !important;
        margin-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* =========================================================
   Directory Goo Header V6 — Desktop Nav Final Micro-Adjustment
   ========================================================= */

@media (min-width: 992px) {

    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        transform: translateY(-12px) !important;
    }
}

/* =========================================================
   Directory Goo Header V7 — Desktop Nav Corrected Position
   ========================================================= */

@media (min-width: 992px) {

    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        transform: translateY(-4px) !important;
        margin-top: 0 !important;
        padding-bottom: 4px !important;
    }
}

/* =========================================================
   Directory Goo Header V8 — Desktop Search/Nav Separation
   Approved layout:
   Search row on top
   Navigation centered directly below search
   Desktop only
   ========================================================= */

@media (min-width: 992px) {

    /*
     * Provide enough vertical room for:
     * 1. Search fields
     * 2. Navigation row underneath
     */
    .main-nav.nav-1 {
        padding-bottom: 16px !important;
    }

    /*
     * Keep the search/navigation container as the positioning
     * reference without changing React markup.
     */
    .main-nav.nav-1 .navbar-collapse {
        position: relative !important;
    }

    /*
     * Move the existing React menu BELOW the search bar.
     * V5/V6/V7 previously pulled this row upward.
     */
    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        transform: translateY(7px) !important;

        margin-top: 0 !important;
        padding-bottom: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap;
    }

    /*
     * Maintain clean compact navigation spacing.
     */
    .main-nav.nav-1 .header-dropdown,
    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute > div {
        margin-top: 0 !important;
    }

    .main-nav.nav-1 .header-dropdown .drop-btn,
    .main-nav.nav-1 .link-hover {
        line-height: 1.2 !important;
    }
}


/* =========================================================
   Directory Goo Header V8.1 — True Desktop Two-Row Header
   Row 1: Logo + Search + Account actions
   Row 2: Existing React navigation
   Desktop only
   ========================================================= */

@media (min-width: 992px) {

    /* Create real vertical space for the second navigation row */
    .main-nav.nav-1 {
        padding-bottom: 34px !important;
    }

    /*
     * Existing navbar-collapse contains the search and navigation.
     * Keep it as the positioning reference.
     */
    .main-nav.nav-1 .navbar-collapse {
        position: relative !important;
        overflow: visible !important;
    }

    /*
     * Existing React desktop navigation.
     * Override Bootstrap/legacy absolute coordinates and place it
     * directly beneath the search row.
     */
    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        top: 100% !important;
        bottom: auto !important;

        left: 50% !important;
        right: auto !important;

        transform: translate(-50%, 4px) !important;

        width: max-content !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;
        z-index: 20;
    }

    /* Remove Bootstrap mt-2 from the menu children */
    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute > div,
    .main-nav.nav-1 .header-dropdown {
        margin-top: 0 !important;
    }

    .main-nav.nav-1 .header-dropdown .drop-btn,
    .main-nav.nav-1 .link-hover {
        line-height: 1.25 !important;
    }
}


/* =========================================================
   Directory Goo Header V8.2 — Final Desktop Spacing Polish
   ========================================================= */

@media (min-width: 992px) {

    .main-nav.nav-1 {
        padding-bottom: 38px !important;
    }

    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        transform: translate(-50%, 9px) !important;
    }
}


/* =========================================================
   Directory Goo Header V8.3
   Center navigation beneath combined search area
   Desktop only
   ========================================================= */

@media (min-width: 992px) {
    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        transform: translate(calc(-50% - 60px), 9px) !important;
    }
}


/* =========================================================
   Directory Goo Header V8.4 — Approved Desktop UI
   - Preserve original logo position
   - Refine logo presentation
   - Improve search/location UI
   - Navigation centered beneath search area
   - Desktop only
   ========================================================= */

@media (min-width: 1200px) {

    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    .main-nav.nav-1 {
        padding-bottom: 38px !important;
    }

    .main-nav.nav-1 > .container-lg {
        align-items: flex-start !important;
    }


    /* -----------------------------------------------------
       LOGO
       Keep its existing physical position.
       Improve only its presentation.
       ----------------------------------------------------- */

    .main-nav.nav-1 .website-logo {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
    }

    .main-nav.nav-1 .website-logo img {
        display: block !important;
        max-width: 100% !important;
        object-fit: contain !important;

        background: #fff !important;
        border-radius: 8px !important;

        padding: 4px 8px !important;

        box-shadow:
            0 2px 5px rgba(0,0,0,.08),
            0 6px 15px rgba(0,0,0,.06) !important;
    }


    /* -----------------------------------------------------
       SEARCH AREA
       One clean unified search control.
       ----------------------------------------------------- */

    .main-nav.nav-1 .search-bar {
        min-height: 44px !important;

        background: #fff !important;

        border: 1px solid rgba(0,0,0,.08) !important;
        border-radius: 8px !important;

        overflow: hidden !important;

        box-shadow:
            0 2px 5px rgba(0,0,0,.07),
            0 5px 12px rgba(0,0,0,.04) !important;
    }


    /* Search inputs */
    .main-nav.nav-1 .search-bar input {
        height: 44px !important;

        background: #fff !important;

        border-top: 0 !important;
        border-bottom: 0 !important;

        font-size: 14px !important;
        line-height: 44px !important;

        box-shadow: none !important;
        outline: none !important;
    }

    .main-nav.nav-1 .search-bar input::placeholder {
        color: #9aa0a6 !important;
        opacity: 1 !important;
    }

    .main-nav.nav-1 .search-bar input:focus {
        background: #fff !important;
        box-shadow: none !important;
    }


    /* Refine icons inside the search area */
    .main-nav.nav-1 .search-bar .fa-solid,
    .main-nav.nav-1 .search-bar .fa-regular,
    .main-nav.nav-1 .search-bar svg {
        vertical-align: middle !important;
    }


    /* -----------------------------------------------------
       NAVIGATION ROW

       V8.3 = -60px
       Approved position = slightly toward Business/Services
       ----------------------------------------------------- */

    .main-nav.nav-1 .navbar-collapse {
        position: relative !important;
        overflow: visible !important;
    }

    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        top: 100% !important;
        bottom: auto !important;

        left: 50% !important;
        right: auto !important;

        /*
         * -45px gives us the middle position:
         * slightly right of V8.3, but not as far as earlier tests.
         */
        transform: translate(calc(-50% - 45px), 9px) !important;

        width: max-content !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;
        z-index: 20 !important;
    }

    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute > div,
    .main-nav.nav-1 .header-dropdown {
        margin-top: 0 !important;
    }

    .main-nav.nav-1 .header-dropdown .drop-btn,
    .main-nav.nav-1 .link-hover {
        font-size: 14px !important;
        line-height: 1.25 !important;
        font-weight: 500 !important;
    }

}


/* =========================================================
   Directory Goo Header V8.5
   Approved Desktop Search UI
   Uses existing React markup and existing search action
   ========================================================= */

@media (min-width: 1200px) {

    /* =====================================================
       SEARCH BAR
       ===================================================== */

    .main-nav.nav-1 .search-bar {
        display: flex !important;
        align-items: stretch !important;

        height: 46px !important;
        min-height: 46px !important;

        padding: 0 !important;

        background: #fff !important;

        border: 1px solid rgba(0,0,0,.10) !important;
        border-radius: 8px !important;

        overflow: visible !important;

        box-shadow: 0 3px 10px rgba(0,0,0,.08) !important;
    }


    /* -----------------------------------------------------
       LOCATION FIELD
       ----------------------------------------------------- */

    .main-nav.nav-1 .search-bar >
    .position-relative.d-flex.align-items-center {
        order: 1 !important;

        position: relative !important;

        flex: 1 1 50% !important;

        height: 44px !important;
        min-width: 0 !important;

        background: #fff !important;

        border-radius: 7px 0 0 7px !important;

        overflow: hidden !important;
    }


    /* Blue location block */
    .main-nav.nav-1 .search-bar >
    .position-relative.d-flex.align-items-center::before {
        content: "" !important;

        position: absolute !important;

        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;

        width: 52px !important;

        background: #1683d8 !important;

        z-index: 1 !important;
    }


    /* Existing location icon */
    .main-nav.nav-1 .search-bar .input-field-img {
        position: absolute !important;

        left: 17px !important;
        top: 50% !important;

        width: 18px !important;
        height: 18px !important;

        transform: translateY(-50%) !important;

        z-index: 3 !important;

        filter: brightness(0) invert(1) !important;
    }


    .main-nav.nav-1 .search-bar .input-field1 {
        width: 100% !important;
        height: 44px !important;

        padding-left: 68px !important;
        padding-right: 14px !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: #fff !important;

        box-shadow: none !important;
    }


    /* -----------------------------------------------------
       BUSINESS / SERVICES FIELD
       ----------------------------------------------------- */

    .main-nav.nav-1 .search-bar > div:last-child {
        order: 2 !important;

        position: relative !important;

        flex: 1 1 50% !important;

        height: 44px !important;
        min-width: 0 !important;

        background: #fff !important;

        border-left: 1px solid #e1e5e9 !important;
    }


    /* Briefcase icon */
    .main-nav.nav-1 .search-bar > div:last-child::before {
        content: "\f0b1" !important;

        position: absolute !important;

        left: 18px !important;
        top: 50% !important;

        transform: translateY(-50%) !important;

        font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
        font-weight: 900 !important;

        font-size: 16px !important;

        color: #1683d8 !important;

        z-index: 2 !important;
    }


    .main-nav.nav-1 .search-bar .input-field2 {
        width: 100% !important;
        height: 44px !important;

        padding-left: 48px !important;
        padding-right: 14px !important;

        border: 0 !important;
        border-radius: 0 !important;

        background: #fff !important;

        box-shadow: none !important;
    }


    /* -----------------------------------------------------
       EXISTING SEARCH BUTTON
       Move it to the right and preserve its click action
       ----------------------------------------------------- */

    .main-nav.nav-1 .search-bar .search-icon {
        order: 3 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;

        flex: 0 0 118px !important;

        height: 46px !important;

        margin: -1px -1px -1px 0 !important;
        padding: 0 18px !important;

        background: #129b3c !important;
        color: #fff !important;

        border: 1px solid rgba(255,255,255,.75) !important;
        border-radius: 0 8px 8px 0 !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        box-shadow: none !important;
    }


    .main-nav.nav-1 .search-bar .search-icon::after {
        content: "Search" !important;
        color: #fff !important;
    }


    .main-nav.nav-1 .search-bar .search-icon img {
        width: 17px !important;
        height: 17px !important;

        object-fit: contain !important;

        filter: brightness(0) invert(1) !important;
    }


    .main-nav.nav-1 .search-bar .search-icon:hover {
        background: #0d8934 !important;
    }


    /* -----------------------------------------------------
       INPUT TYPOGRAPHY
       ----------------------------------------------------- */

    .main-nav.nav-1 .search-bar input {
        font-size: 14px !important;
        color: #333 !important;

        outline: none !important;
    }

    .main-nav.nav-1 .search-bar input::placeholder {
        color: #9a9ea4 !important;
        opacity: 1 !important;
    }


    /* =====================================================
       LOGO POLISH — preserve current position
       ===================================================== */

    .main-nav.nav-1 .website-logo img {
        background: #fff !important;

        border-radius: 8px !important;

        padding: 5px 9px !important;

        box-shadow:
            0 2px 5px rgba(0,0,0,.08),
            0 6px 14px rgba(0,0,0,.05) !important;
    }


    /* =====================================================
       APPROVED NAV POSITION
       Slightly toward Business/Services
       ===================================================== */

    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        transform: translate(calc(-50% - 45px), 9px) !important;
    }

}


/* =========================================================
   Directory Goo Header V8.6
   Align navigation beneath Location + Business/Services
   Desktop only
   ========================================================= */

@media (min-width: 1200px) {
    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        transform: translate(calc(-50% - 105px), 9px) !important;
    }
}


/* =========================================================
   Directory Goo Header V8.7
   Approved Header Geometry Polish
   - Exact nav centering beneath search
   - Improved real Directory Goo logo presentation
   - Preserve search functionality
   ========================================================= */

@media (min-width: 992px) {

    /* -----------------------------------------------------
       LOGO
       Align with 46px search row
       ----------------------------------------------------- */

    .main-nav.nav-1 .website-logo {
        padding-top: 0 !important;
        margin-top: 32px !important;
        margin-bottom: 0 !important;
    }

    .main-nav.nav-1 .website-logo img {
        display: block !important;

        width: 174px !important;
        height: 46px !important;

        padding: 6px 10px !important;

        object-fit: contain !important;

        background: #fff !important;
        border: 1px solid rgba(0,0,0,.08) !important;
        border-radius: 8px !important;

        box-shadow:
            0 3px 8px rgba(0,0,0,.08),
            0 7px 16px rgba(0,0,0,.05) !important;
    }


    /* -----------------------------------------------------
       SEARCH
       Keep approved V8.5 UI
       ----------------------------------------------------- */

    .main-nav.nav-1 .search-bar {
        border-radius: 8px !important;

        box-shadow:
            0 3px 8px rgba(0,0,0,.08),
            0 7px 16px rgba(0,0,0,.04) !important;
    }


    /* -----------------------------------------------------
       NAVIGATION
       Search:
         x      = 236
         width  = 521
         center = 496.5

       Nav width = 553
       Correct nav x = 220

       Current nav was 53px too far right.
       ----------------------------------------------------- */

    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        transform: translate(calc(-50% - 98px), 9px) !important;
    }

}


/* =========================================================
   Directory Goo Header V8.8
   Desktop Logo Polish Only
   Preserve V8.7 search + navigation
   ========================================================= */

@media (min-width: 992px) {

    /* Only the header's first/desktop logo */
    .main-nav.nav-1 .website-logo:first-of-type {
        width: 180px !important;
        height: 46px !important;
        min-width: 180px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 10px !important;
        margin-top: 32px !important;
        margin-bottom: 0 !important;

        background: #fff !important;
        border: 1px solid rgba(0,0,0,.08) !important;
        border-radius: 9px !important;

        box-shadow:
            0 3px 8px rgba(0,0,0,.08),
            0 7px 16px rgba(0,0,0,.05) !important;

        overflow: hidden !important;
    }

    .main-nav.nav-1 .website-logo:first-of-type img {
        display: block !important;

        width: 160px !important;
        height: auto !important;
        max-width: 160px !important;

        padding: 0 !important;
        margin: 0 !important;

        object-fit: contain !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   Directory Goo Header V8.9
   Match Header Logo Presentation to Footer Logo
   Logo only — preserve search/navigation/buttons
   ========================================================= */

@media (min-width: 992px) {

    /* Header logo wrapper — remove V8.8 white card */
    .main-nav.nav-1 .website-logo:first-of-type {
        width: 190px !important;
        height: 46px !important;
        min-width: 190px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        padding: 0 !important;
        margin-top: 32px !important;
        margin-bottom: 0 !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        overflow: visible !important;
    }

    /* Same natural logo presentation used in footer */
    .main-nav.nav-1 .website-logo:first-of-type img {
        display: block !important;

        width: 190px !important;
        height: auto !important;
        max-width: 190px !important;

        padding: 0 !important;
        margin: 0 !important;

        object-fit: contain !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   DIRECTORY GOO HEADER V9.0
   Professional white transparent logo
   Header + Footer
   ========================================================= */

/* HEADER LOGO */
.main-nav.nav-1 .website-logo:first-of-type {
    background-image: url('/static/media/directorygoo-logo-white.png') !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
}

.main-nav.nav-1 .website-logo:first-of-type img {
    opacity: 0 !important;
}

/* FOOTER LOGO */
footer .website-logo {
    background-image: url('/static/media/directorygoo-logo-white.png') !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 180px auto !important;
}

footer .website-logo img {
    opacity: 0 !important;
}

/* DESKTOP */
@media (min-width: 992px) {
    .main-nav.nav-1 .website-logo:first-of-type {
        width: 190px !important;
        min-width: 190px !important;
        height: 46px !important;
    }
}

/* TABLET */
@media (min-width: 768px) and (max-width: 991px) {
    .main-nav.nav-1 .website-logo:first-of-type {
        background-size: contain !important;
    }
}

/* MOBILE */
@media (max-width: 767px) {
    .main-nav.nav-1 .website-logo:first-of-type {
        background-size: contain !important;
        background-position: left center !important;
    }
}

/* =========================================================
   DIRECTORY GOO HEADER V9.1
   Larger white logo V3
   ========================================================= */

/* HEADER */
.main-nav.nav-1 .website-logo:first-of-type {
    position: relative !important;
    background-image: none !important;
    overflow: visible !important;
}

.main-nav.nav-1 .website-logo:first-of-type::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 205px !important;
    height: 68px !important;
    background: url('/static/media/directorygoo-logo-white-v3.png') no-repeat left center !important;
    background-size: contain !important;
    pointer-events: none !important;
}

.main-nav.nav-1 .website-logo:first-of-type img {
    opacity: 0 !important;
}

/* FOOTER */
footer .website-logo {
    position: relative !important;
    background-image: none !important;
    overflow: visible !important;
}

footer .website-logo::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 200px !important;
    height: 67px !important;
    background: url('/static/media/directorygoo-logo-white-v3.png') no-repeat left center !important;
    background-size: contain !important;
    pointer-events: none !important;
}

footer .website-logo img {
    opacity: 0 !important;
}

/* TABLET */
@media (min-width:768px) and (max-width:991px) {
    .main-nav.nav-1 .website-logo:first-of-type::before {
        width:190px !important;
        height:63px !important;
    }
}

/* MOBILE */
@media (max-width:767px) {
    .main-nav.nav-1 .website-logo:first-of-type::before {
        width:165px !important;
        height:55px !important;
    }

    footer .website-logo::before {
        width:175px !important;
        height:58px !important;
    }
}

/* =========================================================
   DIRECTORY GOO HEADER V9.2
   Larger desktop logo only
   ========================================================= */

@media (min-width: 992px) {
    .main-nav.nav-1 .website-logo:first-of-type::before {
        width: 235px !important;
        height: 78px !important;
        left: -5px !important;
    }
}

/* =========================================================
   DIRECTORY GOO HEADER V9.3
   Mobile + Tablet logo clipping fix
   Desktop V9.2 preserved
   ========================================================= */

/* TABLET */
@media (min-width:768px) and (max-width:991px) {
    .main-nav.nav-1 .website-logo:first-of-type::before {
        top: 0 !important;
        transform: none !important;
        width: 180px !important;
        height: 42px !important;
        left: 0 !important;
        background-size: 180px auto !important;
        background-position: left center !important;
    }
}

/* MOBILE */
@media (max-width:767px) {
    .main-nav.nav-1 .website-logo:first-of-type::before {
        top: 0 !important;
        transform: none !important;
        width: 165px !important;
        height: 37px !important;
        left: 0 !important;
        background-size: 165px auto !important;
        background-position: left center !important;
    }
}

/* =========================================================
   DIRECTORY GOO HEADER V9.4
   Single responsive logo - remove mobile/tablet duplication
   Desktop V9.2 preserved
   ========================================================= */

/* TABLET + MOBILE ONLY */
@media (max-width: 991px) {

    /* Disable pseudo logo */
    .main-nav.nav-1 .website-logo:first-of-type::before {
        content: none !important;
        display: none !important;
        background: none !important;
    }

    /* Use ONE logo directly on wrapper */
    .main-nav.nav-1 .website-logo:first-of-type {
        background-image:
            url('/static/media/directorygoo-logo-white-v3.png') !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: contain !important;
        overflow: hidden !important;
    }

    /* Hide original embedded React logo */
    .main-nav.nav-1 .website-logo:first-of-type img {
        opacity: 0 !important;
        visibility: hidden !important;
    }
}

/* TABLET */
@media (min-width: 768px) and (max-width: 991px) {
    .main-nav.nav-1 .website-logo:first-of-type {
        width: 180px !important;
        min-width: 180px !important;
        height: 42px !important;
    }
}

/* MOBILE */
@media (max-width: 767px) {
    .main-nav.nav-1 .website-logo:first-of-type {
        width: 132px !important;
        min-width: 132px !important;
        height: 37px !important;
        background-size: 125px auto !important;
    }
}

/* =========================================================
   DIRECTORY GOO HEADER V9.5
   Remove inherited white background behind responsive logo
   Desktop V9.2 preserved
   ========================================================= */

@media (max-width: 991px) {
    .main-nav.nav-1 .website-logo:first-of-type {
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
}

/* =========================================================
   DIRECTORY GOO HEADER V9.6
   Final responsive logo sizing
   Desktop V9.2 preserved
   ========================================================= */

/* TABLET */
@media (min-width:768px) and (max-width:991px) {
    .main-nav.nav-1 .website-logo:first-of-type {
        width:200px !important;
        min-width:200px !important;
        height:42px !important;
        background-size:200px auto !important;
        background-position:left center !important;
    }
}

/* MOBILE */
@media (max-width:767px) {
    .main-nav.nav-1 .website-logo:first-of-type {
        width:145px !important;
        min-width:145px !important;
        height:37px !important;
        background-size:145px auto !important;
        background-position:left center !important;
    }
}

/* =========================================================
   DIRECTORY GOO V9.7
   Footer logo transparency fix
   Header V9.6 preserved
   ========================================================= */

footer .website-logo {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

footer .website-logo img {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* =========================================================
   DIRECTORY GOO V9.8
   Clean footer logo
   Header V9.6 preserved
   ========================================================= */

/* Remove old footer pseudo-logo */
footer .website-logo::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Use one transparent logo directly on footer wrapper */
footer .website-logo {
    width: 200px !important;
    height: 67px !important;
    min-width: 200px !important;

    background-image:
        url('/static/media/directorygoo-logo-white-v3.png') !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 200px auto !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Hide original embedded React logo */
footer .website-logo img {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* TABLET */
@media (min-width:768px) and (max-width:991px) {
    footer .website-logo {
        width: 180px !important;
        min-width: 180px !important;
        height: 60px !important;
        background-size: 180px auto !important;
    }
}

/* MOBILE */
@media (max-width:767px) {
    footer .website-logo {
        width: 165px !important;
        min-width: 165px !important;
        height: 55px !important;
        background-size: 165px auto !important;
    }
}

/* =========================================================
   DIRECTORY GOO V10.0
   Tablet combined search-bar alignment
   Desktop + mobile header preserved
   ========================================================= */

@media (min-width:768px) and (max-width:991px) {

    /* Keep the complete search control together */
    .main-nav.nav-1 .search-bar {
        display:flex !important;
        flex-wrap:nowrap !important;
        align-items:stretch !important;
        width:720px !important;
        max-width:calc(100vw - 100px) !important;
        height:46px !important;
        gap:0 !important;
        margin-left:auto !important;
        margin-right:auto !important;
        overflow:visible !important;
    }

    /* Blue search/location block */
    .main-nav.nav-1 .search-bar > button {
        flex:0 0 50px !important;
        width:50px !important;
        height:46px !important;
        margin:0 !important;
        border-radius:8px 0 0 8px !important;
    }

    /* Location section */
    .main-nav.nav-1 .search-bar > div.position-relative {
        flex:0 0 245px !important;
        width:245px !important;
        margin:0 !important;
    }

    .main-nav.nav-1 .search-bar .input-field1 {
        width:100% !important;
        height:46px !important;
        margin:0 !important;
        border-radius:0 !important;
    }

    /* Business / Services section */
    .main-nav.nav-1 .search-bar > div:not(.position-relative) {
        flex:1 1 auto !important;
        min-width:0 !important;
        margin:0 !important;
    }

    .main-nav.nav-1 .search-bar .input-field2 {
        width:100% !important;
        height:46px !important;
        margin:0 !important;
        border-radius:0 8px 8px 0 !important;
    }
}

/* =========================================================
   DIRECTORY GOO V10.1
   Tablet header vertical-spacing polish
   ========================================================= */

@media (min-width:768px) and (max-width:991px) {

    /* Give logo/buttons row slightly more breathing room */
    .main-nav.nav-1 .search-bar {
        position: relative !important;
        top: 5px !important;
    }

    /* Keep navigation aligned beneath search */
    .main-nav.nav-1 .d-none.d-lg-flex.position-absolute {
        top: 5px !important;
    }
}