.section {
    background-color: white;
    padding: 0;
    margin: 0;
}

.has-bg-img-banner { 
    background: url('../Images/BannerText.jpg') center center; 
}

.has-bg-blue-color {
    background-color:#05364B;
    color:white; 
}

.has-bg-teal-color {
    background-color:#1A7984;
    color:white;
}

.has-fg-teal-color {
    color:#1A7984;
}

.has-light-green-color {
    background-color: #BDD73C;
    color:white;
}

#pageTitle {
    padding-top: 50px;
    padding-bottom: 100px;
}

h1 {
    color: #1A7984;
}

h2 {
    color: #1A7984;
    font-weight:bold;
}

a {
    color: #1A7984;
}

a:hover {
    color: #1A7984;
}

.largeTeal {
    font-weight: bold;
    font-size: 4em;
    color: #1A7984;
}

.smallTeal {
    font-weight: bold;
    font-size: 2em;
    color: #1A7984;
}

.imgLazy {
    display: flex;
    justify-content: center;
}
/* ========================================================
   RESPONSIVE FOOTER STYLES
   ======================================================== */
.site-footer {
    width: 100% !important;
    text-align: center !important;
    color: #ffffff !important;
    box-sizing: border-box !important;
}

.footer-content {
    margin: 0 auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Location and navigation link styling */
.footer-locations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 8px;
    line-height: 1.6;
}

    .footer-locations .aMenu {
        color: #ffffff !important;
        text-decoration: none;
        font-size: 0.95rem;
    }

        .footer-locations .aMenu:hover {
            text-decoration: underline;
        }

/* Contact information block (Phone & Email) */
.footer-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 1.05rem;
}

.footer-contact-link {
    color: #ffffff !important;
    text-decoration: none !important;
    word-break: break-word;
}

    .footer-contact-link:hover {
        text-decoration: underline !important;
    }

/* Divider pipes */
.footer-sep {
    color: #ffffff;
    opacity: 0.7;
    user-select: none;
}

/* Copyright line */
.footer-copy {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #ffffff !important;
    opacity: 0.9;
}

.footer-policy-link {
    color: #ffffff !important;
    text-decoration: underline;
}

/* Mobile Screen Adjustments */
@media screen and (max-width: 768px) {
   

    .footer-locations {
        gap: 6px 8px;
        font-size: 0.85rem;
    }

    .footer-contact {
        flex-direction: column !important; /* Stacks phone and email vertically */
        gap: 4px !important;
    }

        .footer-contact .contact-sep {
            display: none !important; /* Hides the pipe between phone & email */
        }

    .footer-copy {
        flex-direction: column !important;
        gap: 4px !important;
    }

        .footer-copy .footer-sep {
            display: none !important;
        }
}
:root {
    --primary-color: #008181;
    --nav-link-color: #000000;
    --nav-bg: #ffffff;
    --nav-shadow: 0 3px 0 0 whitesmoke;
    --dropdown-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
}

/* ========================================================
   BASE NAVIGATION & TYPOGRAPHY
   ======================================================== */
#mainNavBar {
    box-shadow: var(--nav-shadow);
}

.is-size-Menu {
    font-size: 1.4rem;
}

.is-size-Submenu {
    font-size: 1.2rem;
}

.dropdownItem {
    font-weight: bold;
    text-decoration: none;
    color: var(--primary-color);
}

    .dropdownItem:hover {
        text-decoration: none;
        color: var(--primary-color);
    }

.navLink {
    color: var(--nav-link-color);
}

    .navLink:hover,
    #phoneNumber:hover {
        text-decoration: underline !important;
    }

#phoneNumber {
    color: var(--primary-color) !important;
    margin-left: 30px !important;
    font-weight: 700 !important;
}
/* ========================================================
   1. HEADER NAVBAR ONLY (Teal)
   ======================================================== */
.navbar-brand #phoneNumber,
.navbar-brand a[href^="tel:"] {
    color: var(--primary-color) !important; /* Teal */
}

    /* Header hover */
    .navbar-brand #phoneNumber:hover,
    .navbar-brand a[href^="tel:"]:hover {
        text-decoration: underline !important;
        text-decoration-color: var(--primary-color) !important;
    }
/* ========================================================
   2. FOOTER ONLY (White, excluding .addressPhoneNumber)
   ======================================================== */
footer a[href^="tel:"]:not(.addressPhoneNumber),
.footer a[href^="tel:"]:not(.addressPhoneNumber),
#footer a[href^="tel:"]:not(.addressPhoneNumber) {
    color: #ffffff !important;
    position: static !important; /* Ensures it never overlaps text */
    transform: none !important;
}

    /* Footer hover */
    footer a[href^="tel:"]:not(.addressPhoneNumber):hover,
    .footer a[href^="tel:"]:not(.addressPhoneNumber):hover,
    #footer a[href^="tel:"]:not(.addressPhoneNumber):hover {
        color: #ffffff !important;
        text-decoration: underline !important;
        text-decoration-color: #ffffff !important;
    }
#imgLogo,
.logo-desktop,
.logo-mobile,
.site-logo {
    max-height: 48px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.landingbanner {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-height: 442px;
}

/* ========================================================
   DROPDOWN & SUBMENU STYLING (FIXED)
   ======================================================== */
.navbar-dropdown .has-dropdown {
    position: relative !important;
}

    /* 1. Ensure the nested submenu stays hidden by default */
    .navbar-dropdown .has-dropdown .navbar-dropdown {
        position: absolute !important;
        top: 0 !important;
        left: 100% !important;
        margin-top: -0.5rem !important;
        display: none !important;
    }

    /* 2. Show the nested submenu ONLY when hovering the parent item */
    .navbar-dropdown .has-dropdown:hover > .navbar-dropdown {
        display: block !important;
    }

/* Arrow styling */
.navbar-dropdown .navbar-link:not(.is-arrowless)::after {
    border: 3px solid #485fc7 !important;
    border-radius: 1px !important;
    border-right: 0 !important;
    border-top: 0 !important;
    transform: rotate(-135deg) !important;
    margin-top: -0.375em !important;
    right: 1.125em !important;
}

/* ========================================================
   TABLET & TOUCH (≤ 1088px)
   ======================================================== */
@media screen and (max-width: 1088px) {
    html,
    body,
    form,
    #form1,
    main,
    #main-content,
    .hero,
    .container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .navbar,
    .navbar-brand {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
        box-sizing: border-box;
    }

        .navbar-brand .navbar-burger {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
            height: 3.25rem;
            width: 3.25rem;
        }

    .navbar-menu {
        display: none;
        -webkit-overflow-scrolling: touch;
        max-height: calc(100vh - 5.25rem);
        overflow: auto;
    }

        .navbar-menu.is-active {
            display: block;
            position: absolute;
            width: 100%;
            left: 0;
            top: 100%;
            background-color: var(--nav-bg);
            box-shadow: var(--dropdown-shadow);
        }

    #imgLogo,
    .logo-desktop,
    .logo-mobile,
    .site-logo {
        max-height: 38px;
    }

    /* Exact true horizontal & vertical center */
    .navbar-brand #phoneNumber,
    .navbar-brand a[href^="tel:"] {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        text-align: center !important;
        white-space: nowrap !important;
        z-index: 1 !important;
        color: var(--primary-color) !important;
    }

    /* Reset footer phone links so they stay in normal flow */
    footer a[href^="tel:"],
    .footer a[href^="tel:"],
    #footer a[href^="tel:"] {
        position: static !important;
        transform: none !important;
        display: inline-block !important;
        margin: 0.5rem 0 !important;
        color: #ffffff !important; /* or your footer text color */
    }
    #imgHermes,
    #imgWhitbread,
    #imgAhdb,
    #imgBirmingham {
        width: 100%;
    }
    

    /* Ensure the navbar wrapper spans edge-to-edge without extra vertical padding */
    .navbar-brand {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 0 !important; /* lets the burger touch the far right */
        align-items: stretch !important;
        min-height: 52px;
        position: relative !important;
        display: flex !important;
        justify-content: space-between !important;
    }
    
    /* Hamburger Container */
    .navbar-burger {
        background-color: #ededed !important; /* Matches the solid light grey box */
        color: var(--primary-color) !important;
        height: auto !important;
        min-height: 100% !important;
        width: 3.25rem !important;
        margin-left: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }

        /* Hamburger 3 Horizontal Lines */
        .navbar-burger span {
            background-color: var(--primary-color) !important; /* Teal lines */
            height: 2px !important;
            width: 18px !important;
            left: calc(50% - 9px) !important;
            color: var(--primary-color) !important;
        }
    /* Reset the parent item relative positioning */
    .navbar-dropdown .has-dropdown {
        position: static !important;
        width: 100% !important;
    }

        /* Force the nested dropdown to stack beneath the item instead of fly out to the right */
        .navbar-dropdown .has-dropdown .navbar-dropdown {
            position: static !important;
            top: auto !important;
            left: auto !important;
            margin-top: 0 !important;
            padding-left: 1.5rem !important; /* Indents the submenu items neatly */
            box-shadow: none !important;
            border: none !important;
            width: 100% !important;
            background-color: transparent !important;
        }

    /* Optional: Rotate arrow pointing down instead of right on mobile */
    .navbar-dropdown .navbar-link:not(.is-arrowless)::after {
        transform: rotate(-45deg) !important; /* Points arrow down */
        margin-top: -0.55em !important;
        right: 1.125em !important;
    }

       
}

/* ========================================================
   MOBILE PHONES (≤ 480px)
   ======================================================== */
@media screen and (max-width: 480px) {
    #phoneNumber {
        font-size: clamp(1.1rem, 5vw, 1.4rem) !important;
        margin-left: 0;
    }

}

a {
    display: inline-block;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.bounce:hover {
    transform: translateY(-10px);
}

.aMenu {
    color: white !important;
    text-decoration: none !important;
}

.aMenu:hover {
    color: white !important;
    text-decoration: underline !important;
}

#copyrightPrivacy {
    color: white !important;
}

#copyrightPrivacy a {
    color: white !important;
}

#copyrightPrivacy:hover a {
    color: white !important;
}

.address {
    color: white !important;
}

/* Desktop */
@media screen and (max-width:1500px) {
}

/* Desktop */
@media screen and (max-width:1280px) {
}

/* Desktop */
@media screen and (max-width:1024px) {
}

/* IPad Pro 11 inch */
@media screen and (max-width:834px) {
}

/* IPad Air */
@media screen and (max-width:820px) {
}

/* IPad */
@media screen and (max-width:810px) {
}

/* iPhone 12/13 */
@media screen and (max-width:428px) {
}

/* iPhone 11 Pro */
@media screen and (max-width:414px) {
}

/* iPhone 12/13 Galaxy Note/S20 Ultra */
@media screen and (max-width:412px) {
}

/* Galaxy S20+ */
@media screen and (max-width:384px) {
}

/* iPhone 11/12/13/SE */
@media screen and (max-width:375px) {
}

/* Galaxy S10/S20 */
@media screen and (max-width:360px) {
}

/* IPad Pro 12.9 inch */
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}

/* IPad Mini */
@media only screen and (min-device-width: 768px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
}

#divTop {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #0BB0B0; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
}

#divTop:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

@media screen and (max-width:428px) {
    #divTop {
        bottom: 5px;
        right: 5px;
        padding: 5px;
    }
}

