/* ============================
   Navbar Styles
============================ */
.username {
    color: #000;
    font-weight: 600;
    margin-right: 15px;
}
/* Username color when navbar scrolled */
.navbar.scrolled .username {
    color: #000; /* dark text on scroll */
}
/* Navbar wrapper */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: #fff;
    padding: 0 40px;
    display: flex;
    align-items: center;
    z-index: 1000;
}

    .navbar .nav-link {
        color: #000 !important; /* black text */
        font-weight: 600;
    }
    /* Default (top of page): black text */
    .phone-link,
    .navbar .bi-telephone-fill {
        color: #000 !important;
    }
/* Phone number & icon */
.phone-link,
.bi-telephone-fill {
    color: #000 !important;
    transition: color 0.3s ease;
}

    /* Hover for phone link */
    .phone-link:hover {
        border-bottom: 2px solid #66C3EF;
    }

.navbar.scrolled .phone-link,
.navbar.scrolled .bi-telephone-fill {
    color: #1d1d1d !important;
}
/* After scroll */
.navbar.scrolled {
    background: #fff !important;
}

    .navbar.scrolled .nav-link {
        color: #000 !important; /* black text */
    }
/* Navbar inner content */
.navbar-content {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between; /* logo left, links take remaining space */
    position: relative;
}

#navbar-logo {
    margin-top: -10px;
    transition: all 0.3s ease;
    height: 50px; /* default height */
}

.navbar.scrolled #navbar-logo {
    margin-top: -10px;
    height: 50px; /* smaller logo on scroll */
}


/* Nav links container */
.navbar-links {
    display: flex;
    gap: 25px; /* spacing between links */
    justify-content: center; /* keep links centered in their container */
    flex: 1; /* take up remaining space so links stay roughly center */
    margin-left: 20px; /* small gap from logo */
}

    /* Nav links style */
    .navbar-links a {
        color: var(--color-white);
        font-weight: bold;
        text-decoration: none;
        font-size: 16px;
        transition: color 0.3s ease;
    }

/* Hover effect */
/* Hover effect — underline with light blue */
.navbar .nav-link:hover {
    border-color: #66C3EF !important;
}

/* Scroll effects */
.navbar.scrolled {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

    .navbar.scrolled .navbar-links a {
        color: #3A4932; /* dark green links on scroll */
    }

/* Hamburger button hidden on large screens */
.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
}

    .hamburger span {
        display: block;
        height: 3px;
        background-color: var(--color-white);
        border-radius: 2px;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

    /* Hover effect */
    .hamburger:hover {
        transform: scale(1.5); /* slightly enlarge button */
    }

        .hamburger:hover span {
            background-color: var(--color-mediumgreen); /* change color on hover */
        }

/* Hamburger when scrolled (black/dark green) */
.navbar.scrolled .hamburger span {
    background-color: #3A4932; /* match your dark green nav text/logo color */
}
/* Navbar Logo */
.logo {
    margin-top: 20px;
    height: 90px;
}

.logo-footer {
    width: 150px;
}
/* =========================
   pfNavNoScroll Mobile Styles
========================= */

/* Breakpoint for tablets and phones */
@media (max-width: 992px) {

    /* Reduce navbar height */
    .navbar {
        padding: 0 15px;
        height: 120px;
    }

    #navbar-logo {
        height: 60px;
        margin-top: 0;
    }

    /* Center phone number on mobile */
    .contact-center {
        width: 100%;
        display: flex;
        justify-content: center; /* centers horizontally */
        align-items: center; /* centers vertically if needed */
        margin: 15px 0; /* spacing above/below */
    }

    .contact-center .phone-link {
        font-size: 18px; /* slightly larger for mobile */
        font-weight: bold;
        color: #000; /* visible on off-white navbar */
    }

    .contact-center i {
        font-size: 18px;
        color: #000; /* match text color */
    }
    /* Hamburger button */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 24px;
        padding: 5px;
        border-radius: 6px;
        color: #fff !important;
        border: 1px solid rgba(0,0,0,0.1);
        cursor: pointer;
        z-index: 1100;
        transition: background-color 0.3s ease, transform 0.3s ease;
    }

        .hamburger span {
            height: 3px;
            border-radius: 2px;
            background-color: #fff;
            transition: all 0.3s ease;
        }

        /* Hamburger active (cross) */
        .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
        }

        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }

        .hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -5px);
        }

    /* Navbar links in mobile dropdown */
    .navbar-collapse {
        position: absolute;
        top: 120px;
        left: 0;
        width: 100%;
        background-color: #F5F5F5; /* off-white background */
        padding: 20px;
        border-radius: 0 0 8px 8px;
        display: flex; /* flex container */
        flex-direction: column;
        align-items: flex-start; /* align items to the left */
    }

    .navbar-collapse .nav-item {
        margin: 10px 0;
        width: 100%; /* make nav item full width */
    }

    .navbar-collapse .nav-link {
        text-align: left; /* left-align text */
        width: 100%;      /* make link full width */
        display: block;   /* ensure it spans full width */
        padding-left: 0;  /* remove any left padding if present */
    }

    /* Hamburger hover */
    .hamburger:hover {
        transform: scale(1.2);
    }

    .hamburger:hover span {
        background-color: #66C3EF;
    }

    /* Scrolled navbar mobile adjustments */
    .navbar.scrolled .navbar-collapse {
        background-color: #fff;
    }

        .navbar.scrolled .navbar-collapse .nav-link {
            color: #3A4932 !important;
        }

    .navbar.scrolled .hamburger {
        background-color: #fff;
    }

        .navbar.scrolled .hamburger span {
            background-color: #3A4932;
        }
}

/* Extra small screens */
@media (max-width: 576px) {
    #navbar-logo {
        height: 50px;
    }

    .navbar-collapse .nav-link {
        font-size: 16px;
    }

    .hamburger {
        width: 25px;
        height: 20px;
    }

        .hamburger span {
            height: 2.5px;
        }
}