/*
|--------------------------------------------------------------------------
| Serenity K9s Theme Variables
|--------------------------------------------------------------------------
*/

:root {

    --serenity-blue: #00238c;

    --serenity-blue-hover: #222222;

    --serenity-light: #eaf3ff;

    --serenity-soft: #edf4ff;

    --serenity-white: #ffffff;

    --serenity-text: #222222;

}


/*
|--------------------------------------------------------------------------
| Global Text
|--------------------------------------------------------------------------
*/

body {
    color: var(--serenity-text);
}


/*
 * Bold text should inherit whatever color its parent uses.
 *
 * This means bold paragraph text follows Text Color,
 * while bold text inside buttons can remain white.
 */

strong,
b {
    color: inherit !important;
}


p,
li {
    color: inherit;
}


input,
select,
textarea {
    color: var(--serenity-text);
}


/*
|--------------------------------------------------------------------------
| Navigation
|--------------------------------------------------------------------------
*/

.serenity-menu-button span {
    background: var(--serenity-blue) !important;
}


.serenity-menu-dropdown a {
    color: var(--serenity-blue) !important;
}


.serenity-menu-dropdown a:hover {
    background: var(--serenity-soft) !important;
}


/*
|--------------------------------------------------------------------------
| Primary Headings & Brand Text
|--------------------------------------------------------------------------
*/

.home-section h2,
.program-card h3,
.why-card h3,
.review-name,
.review-stars,

.services-page h1,
.package-kicker,
.package-heading h2,
.package-price,
.package-price-label,
.package-card h3,

.gallery-page h1,
.gallery-card-content h2,

.faq-page h1,
.faq-question,

.contact-page h1,
.contact-page h2,
.contact-page h3,
.contact-icon i,
.form-note i,

.booking-heading h1,
.booking-option h2,
.form-header h2,
.form-section h3,

.policies-heading h1,
.policy-section h2 {

    color: var(--serenity-blue) !important;

}


/*
|--------------------------------------------------------------------------
| Main Page Backgrounds
|--------------------------------------------------------------------------
*/

body,
.home-hero,
.section-blue,
.services-page,
.gallery-page,
.contact-page,
.booking-page,
.policies-page,
.about-logo,
.spotlight .image {

    background-color: var(--serenity-light) !important;

}


/*
|--------------------------------------------------------------------------
| Card / Content Backgrounds
|--------------------------------------------------------------------------
*/

.section-white,
.why-card,
.program-card,
.review-card,
.gallery-card,
.faq-item,
.contact-card,
.form-card,
.next-steps,
.service-area-section,
.booking-option,
.booking-form-container,
.package-details,
.policies-card,
.home-cta,
footer {

    background-color: var(--serenity-white) !important;

}


/*
|--------------------------------------------------------------------------
| Soft Accent Backgrounds
|--------------------------------------------------------------------------
*/

.why-icon,
.service-icon,
.contact-icon,
.booking-icon,
.booking-notice,
.test-confirmation,
.policy-note {

    background-color: var(--serenity-soft) !important;

}


/*
|--------------------------------------------------------------------------
| Primary Buttons
|--------------------------------------------------------------------------
*/

.home-hero .button,
.program-card .button,
.gallery-action .button,
.home-cta .button,
.contact-form input[type="submit"],
.submit-booking,
.back-booking a,
.package-actions .button {

    background-color: var(--serenity-blue) !important;

    border-color: var(--serenity-blue) !important;

    color: #ffffff !important;

}


.home-hero .button:hover,
.program-card .button:hover,
.gallery-action .button:hover,
.home-cta .button:hover,
.contact-form input[type="submit"]:hover,
.submit-booking:hover,
.back-booking a:hover,
.package-actions .button:hover {

    background-color: var(--serenity-blue-hover) !important;

    border-color: var(--serenity-blue-hover) !important;

    color: #ffffff !important;

}


/*
|--------------------------------------------------------------------------
| Program Navigation Tabs
|--------------------------------------------------------------------------
*/

.program-type-button,
.package-tab {

    color: var(--serenity-blue) !important;

}


.program-type-button:hover,
.program-type-button.active,
.package-tab:hover,
.package-tab.active {

    background-color: var(--serenity-blue) !important;

    border-color: var(--serenity-blue) !important;

    color: #ffffff !important;

}


/*
|--------------------------------------------------------------------------
| Program Feature Lists
|--------------------------------------------------------------------------
*/

.package-features li {

    color: var(--serenity-text) !important;

}


.package-features li::before {

    color: var(--serenity-blue) !important;

}


/*
|--------------------------------------------------------------------------
| Package Headings & Pricing
|--------------------------------------------------------------------------
*/

.package-summary {

    color: var(--serenity-text) !important;

}


.package-heading .package-price,
.package-heading .package-price-label {

    color: var(--serenity-blue) !important;

}


/*
|--------------------------------------------------------------------------
| Boarding / Daycare Pricing Tables
|--------------------------------------------------------------------------
*/

/*
 * Header background = Soft Accent
 * Header wording = Primary Color
 */

.package-table thead th {

    background-color: var(--serenity-soft) !important;

    color: var(--serenity-blue) !important;

}


/*
 * Normal rates and stay lengths = Text Color
 */

.package-table tbody td {

    color: var(--serenity-text) !important;

}


/*
 * Discounted rates and savings = Primary Color
 */

.package-table tbody td.package-rate,
.package-table tbody td.package-savings {

    color: var(--serenity-blue) !important;

}


/*
|--------------------------------------------------------------------------
| VIP Membership
|--------------------------------------------------------------------------
*/

.membership-list li {

    background-color: var(--serenity-soft) !important;

    color: var(--serenity-text) !important;

}


.membership-list li::before {

    color: var(--serenity-blue) !important;

}


/*
|--------------------------------------------------------------------------
| Package Notes
|--------------------------------------------------------------------------
*/

.package-note {

    background-color: var(--serenity-soft) !important;

    border-left-color: var(--serenity-blue) !important;

    color: var(--serenity-text) !important;

}


.package-note::before {

    color: var(--serenity-blue) !important;

}


/*
|--------------------------------------------------------------------------
| FAQ
|--------------------------------------------------------------------------
*/

.faq-cta {

    background-color: var(--serenity-blue) !important;

    color: #ffffff !important;

}


.faq-cta h2,
.faq-cta p {

    color: #ffffff !important;

}


.faq-cta .button {

    background-color: var(--serenity-blue-hover) !important;

    border-color: var(--serenity-blue) !important;

    color: #ffffff !important;

}


.faq-question:hover {

    background-color: var(--serenity-soft) !important;

}


/*
|--------------------------------------------------------------------------
| Contact Page
|--------------------------------------------------------------------------
*/

.contact-card:hover {

    background-color: var(--serenity-soft) !important;

}


.form-note {

    background-color: var(--serenity-soft) !important;

    border-left-color: var(--serenity-blue) !important;

}


.form-note i {

    color: var(--serenity-blue) !important;

}


/*
|--------------------------------------------------------------------------
| Booking Page
|--------------------------------------------------------------------------
*/

.booking-option.active {

    border-color: var(--serenity-blue) !important;

}


.booking-option h2,
.form-header h2,
.form-section h3 {

    color: var(--serenity-blue) !important;

}


.booking-notice {

    background-color: var(--serenity-soft) !important;

}


.test-confirmation {

    background-color: var(--serenity-soft) !important;

    color: var(--serenity-blue) !important;

}


/*
|--------------------------------------------------------------------------
| Policies
|--------------------------------------------------------------------------
*/

.policies-heading p,
.policy-section p {

    color: var(--serenity-text) !important;

}


.policy-note {

    background-color: var(--serenity-soft) !important;

    border-left-color: var(--serenity-blue) !important;

    color: var(--serenity-text) !important;

}


/*
|--------------------------------------------------------------------------
| Gallery
|--------------------------------------------------------------------------
*/

.video-badge {

    background-color: var(--serenity-blue) !important;

    color: #ffffff !important;

}


/*
|--------------------------------------------------------------------------
| Testimonials
|--------------------------------------------------------------------------
*/

.review-stars,
.review-name {

    color: var(--serenity-blue) !important;

}


.testimonial-swiper .swiper-pagination-bullet-active {

    background-color: var(--serenity-blue) !important;

}


/*
|--------------------------------------------------------------------------
| Miscellaneous Brand Accents
|--------------------------------------------------------------------------
*/

.scroll-cue {

    color: var(--serenity-blue) !important;

}


.step-number {

    background-color: var(--serenity-blue) !important;

    color: #ffffff !important;

}


/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

a:not(.button):not(.contact-card) {

    border-bottom-color: var(--serenity-blue);

}


/*
|--------------------------------------------------------------------------
| End Serenity Theme
|--------------------------------------------------------------------------
*/