:root {
    --background-color-header: #003366; /* Dark blue*/
    --font-color-menu: #ffffff; /* White*/
    --background-color-button-hover: #004e87; /* Lighter dark blue*/
    --background-color-menu-hover: #003366;
}

/*====================================
    header css
=====================================*/

.logo .carefind-logo {
    background-image: url('/image/logo/CareFind_logo_with_strapline_REV.svg');
    background-size: contain; 
    background-repeat: no-repeat;
    height: 100px;
    width: 300px;
}

/*/*====================================
    mobile-menu css
=====================================*/
    .offcanvas-header {
        background-color: var(--background-color-header);
        border-bottom: 3px solid var(--background-color-header);
    }

h5#offcanvasNavbarLabel.offcanvas-title{
    color: var(--font-color-menu);       
}

button.btn-close.menu-button {
    filter: invert(1);
}

.offcanvas-body li.menu-link:hover {
    background-color: var(--background-color-menu-hover);
}

    .offcanvas-body li.menu-link:hover a.link-title {
        color: var(--font-color-menu);
    }

span.sp-link-title:hover {
    color: var(--font-color-menu);
}
    
/*====================================
    main-menu css
=====================================*/
.megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title {
    color: var(--font-color-menu);
    font-size: 18px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    font-weight: 500;
    white-space: nowrap;
    border: 3px solid transparent; /* Add a transparent border to start with */
    border-radius: 30px;
}

    .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.active {
        border: 3px solid var(--font-color-menu); /* Add a border when active */
        background-color: var(--background-color-button-hover);
        color: var(--font-color-menu);
    }

.megamenu-content .main-wrap ul.main-menu li.menu-link:hover a.link-title {
    background-color: var(--background-color-button-hover);
    color: var(--font-color-menu);
}

@media (max-width: 1199px) {
    .megamenu-content .main-wrap ul.main-menu {
        flex-direction: column;
    }

        .megamenu-content .main-wrap ul.main-menu li.menu-link {
            border-top: 1px solid var(--border-color);
        }

            .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title {
                display: none;
                color: var(--font-color-body);
                font-size: var(--font-size-body);
                padding: 10px 15px;
                text-transform: none;
                font-weight: 400;
            }

    .megamenu-content .megamenu-content .main-wrap ul.main-menu li.menu-link:first-child a.link-title {
        padding: 10px 15px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.link-title-lg {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--font-color-body); /* Set the default text color */
    }

        .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.link-title-lg:hover,
        .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.link-title-lg[aria-selected="true"] {
            color: var(--font-color-menu);
        }

        .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.link-title-lg[aria-expanded="false"] {
            color: var(--font-color-body);
        }

        .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.link-title-lg[aria-expanded="true"] {
            color: var(--font-color-menu);
        }

    .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title span.menu-arrow {
        margin-left: 0px;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link a.link-title.link-title-lg[aria-expanded="true"] span.menu-arrow i {
        -webkit-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link .menu-dropdown {
        position: unset;
        padding: 0px;
        -webkit-animation-name: unset;
        animation-name: unset;
        -webkit-animation-duration: unset;
        animation-duration: unset;
        -webkit-animation-fill-mode: unset;
        animation-fill-mode: unset;
        box-shadow: none;
    }

    .megamenu-content .main-wrap ul.main-menu li.menu-link:hover .menu-dropdown.collapse:not(.show) {
        display: none;
    }

}

/*====================================
    breadcrumb css
=====================================*/
.breadcrumb-area {
   /* padding-top: 12px;
    padding-bottom: 12px;   */
    border-top: 4px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
/**//*    background-color: var(--background-color-header);
*/}

ul.breadcrumb-list li a,
ul.breadcrumb-list li span {
/*    font-size: var(--font-size-body);
*//*    color: var(--font-color-menu);
*/}

    ul.breadcrumb-list li a:hover {
/*        color: var(--font-color-menu);
*/    }

ul.breadcrumb-list li::after {
    content: "/";
/*    color: var(--font-color-menu);
*/    margin: 0px 5px;
}

/*==============================
    Pagination
==============================*/
.page-link {
    color: var(--font-color-third);
}

.page-item.active .page-link {
    background-color: var(--font-color-third);
    border-color: var(--border-color);
}

/*====================================
    'icon' css
=====================================*/
.icon-blue {
    color: var(--font-color-third);
}

/*====================================
   search bar
=====================================*/
.search-button {
    background-color: var(--font-color-third);
    color: var(--extra-color);
}

    .search-button:hover {
        background-color: var(--font-color-third-hover);
        color: var(--extra-color);
    }

/*====================================
    btn-style css
=====================================*/
/* btn-style css  blue button */
.btn-style {
    color: var(--extra-color);
    font-size: var(--font-size-body);
    padding: 12px 30px;
    line-height: 1;
    background-color: var(--font-color-third);
    text-transform: uppercase;
    font-weight: 400;
    border-radius: 50px;
}

    .btn-style:hover {
        color: var(--extra-color);
        background-color: var(--font-color-header);
    }

@media only screen and (max-width: 767px) {
    .btn-style {
        padding: 10px 20px;
    }
}


/* btn-style css small blue button */
.btn-style-sm {
    color: var(--extra-color);
    font-size: var(--font-size-body);
    padding: 10px 10px;
    line-height: 1;
    background-color: var(--font-color-third);
    text-transform: uppercase;
    font-weight: 400;
    border-radius: 50px;
}

    .btn-style-sm:hover {
        color: var(--extra-color);
        background-color: var(--font-color-header);
    }

/* btn-style4 css */
.btn-style4 {
    color: var(--font-color-primary);
    font-size: var(--font-size-body);
    font-weight: 600;
    padding: 15px 30px;
    text-transform: uppercase;
    line-height: 1;
    background-color: #ffffff;
    transition: .5s;
    border-radius: 50px;
}

    .btn-style4:hover {
        color: var(--extra-color);
        background-color: var(--font-color-third);
    }

/*====================================
    footer css
=====================================*/
.footer-bottom-area ul li p{
    color: var(--font-color-menu);
}

.footer-bottom-area .richtext small {
    display: block;
    margin: 0 auto;
    text-align: center;
    color: var(--font-color-menu);
    padding-left: 3em;
    padding-right: 3em;
}

.footer-bottom-area {
    background-color: var(--background-color-header);
    padding-top: 30px;
    padding-bottom: 30px;
    border-top: 1px solid var(--border-color);
}