/* ========================================
   CUSTOM COLOR OVERRIDES
   ========================================
   
   Your New Colors:
   Primary: #304759 (Dark Blue-Grey)
   Secondary: #b0c03f (Lime Green)
   
   Original Colors (replaced):
   Primary Blue: #2b98f0
   Secondary Yellow: #f3e53d
   ======================================== */

/* CSS Variables */
:root {
  --primary: #304759;
  --secondary: #b0c03f;
}

/* ========================================
   PRIMARY COLOR (#304759)
   ======================================== */

/* Backgrounds */
.bg-primary,
.ftco-counter,
.services .icon,
.staff .text,
.time-open-wrap,
.testimony-wrap,
.ftco-intro .icon-video span,
.dbox .icon,
.block-7 .icon,
.aside-stretch-right,
.aside-stretch-right:after {
  background-color: #304759 !important;
}

/* Text Colors */

.contactForm .label,
.appointment .form-group label,
a,
a:hover,
a:focus,
.slider-text h1 span,
.blog-entry .text .desc span:last-child,
.block-21 .text .meta > div a,
.block-21 .text .heading a:hover,
.categories li.active a,
.sidelink li.active a,
.tagcloud a:hover {
  color: #304759 !important;
}

/* ========================================
   TOP BAR CONTACT INFO COLORS
   ======================================== */

/* Phone and email text color */
.wrap .phone,
.wrap .phone a,
.wrap .mailus {
  color: #fff !important; /* Your primary color */
}

/* Phone and email links hover state */
.wrap .phone a:hover,
.wrap .phone a:focus {
  color: #b0c03f !important; /* Your secondary color */
  text-decoration: none !important;
}

/* Borders */
.btn-primary,
.btn-primary:hover,
.btn.btn-primary.btn-outline-primary,
.block-27 ul li.active a,
.block-27 ul li.active span {
  border-color: #304759 !important;
}

/* Buttons */
.btn-primary {
  background-color: #304759 !important;
  border-color: #304759 !important;
  color: #304759 !important;
}

.btn-primary:hover {
  background-color: #fff !important;
  color: #304759 !important;
}

.btn.btn-primary.btn-outline-primary:hover {
  background-color: #304759 !important;
  color: #fff !important;
}

/* ========================================
   APPOINTMENT FORM BUTTON FIX
   ======================================== */

/* Make the appointment form button background transparent */
.appointment .form-group.py-md-4.py-2.px-4.px-md-0.d-flex.align-items-stretch.bg-primary {
  background-color: transparent !important;
}

/* Style the actual submit button */
.appointment .btn-primary {
  background-color: #304759 !important;
  border-color: #b0c03f !important;
  color: #b0c03f !important;
  width: 75%;
}

.appointment .btn-primary:hover {
  background-color: #fff !important;
  border-color: #b0c03f !important;
  color: #b0c03f !important;
}

/* Links */
.footer a,
.footer .block-21 .text .meta > div a {
  color: #fff !important;
}

/* Pricing Active State */
.block-7.active li span.fa {
  color: #304759 !important;
}

/* Staff Hover */
.staff .ftco-social li a {
  color: #304759 !important;
}

.staff:hover .ftco-social li a,
.staff:focus .ftco-social li a {
  background-color: #304759 !important;
  color: #fff !important;
}

/* Wrap Background */
.wrap {
  background-color: #243540 !important; /* Darker shade of primary */
}

.ftco-intro .overlay {
  background-color: #243540 !important;
}

/* Work Overlay */
.work:after {
  background-color: #304759 !important;
}


/* ========================================
   SECONDARY COLOR (#b0c03f)
   ======================================== */

/* Backgrounds */
.bg-secondary,
.btn-primary,
.staff .text:after,
.services .icon:after,
.time-open-wrap .desc h2,
.dbox .icon:after,
.testimony-wrap:after,
.footer .ftco-footer-social li a,
.footer .footer-heading:after,
.testimony-section .owl-dots .owl-dot.active {
  background-color: #b0c03f !important;
}

/* Text Colors */
.heading-section .subheading,
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover,
.services .icon span,
.services .btn-custom:hover,
.staff .text .position,
.time-open-wrap .desc h2,
.time-open-wrap .opening-hours h4,
.testimony-wrap .icon span,
.appointment .btn-primary:hover,
.pricing-text li span.fa {
  color: #b0c03f !important;
}

/* Borders */
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:before,
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover:before,
.ftco-navbar-light .navbar-nav > .nav-item.active > a:before {
  background-color: #b0c03f !important;
}

/* Navbar Secondary Color */
.ftco-navbar-light .navbar-brand span,
.social-media p a span {
  color: #b0c03f !important;
}

/* Button Secondary */
.btn-secondary {
  background-color: #b0c03f !important;
  border-color: #b0c03f !important;
}

.btn-secondary:hover {
  background-color: #fff !important;
  color: #304759 !important;
}

.btn.btn-secondary.btn-outline-secondary:hover {
  background-color: #b0c03f !important;
}

/* Counter Background */
.ftco-counter {
  background-color: #b0c03f !important;
}

/* Staff Hover States */
.staff:hover .text,
.staff:focus .text {
  background-color: #b0c03f !important;
}

.staff:hover .text:after,
.staff:focus .text:after {
  background-color: #304759 !important;
}

.staff .ftco-social li a {
  background-color: #b0c03f !important;
}

/* Services Icon */
.services .d-block:hover .icon span {
  color: #fff !important;
}

/* Video Icon */
.ftco-intro .icon-video {
  background-color: #b0c03f !important;
}

.ftco-intro .icon-video span {
  color: #304759 !important;
}

/* Pricing Hover */
.block-7:hover,
.block-7:focus,
.block-7.active {
  background-color: #b0c03f !important;
}

/* Testimony */
.testimony-wrap {
  background-color: #304759 !important;
}

.testimony-wrap:after {
  background-color: #b0c03f !important;
}


/* ========================================
   ADDITIONAL SPECIFIC OVERRIDES
   ======================================== */

/* Form controls focus */
.form-control:focus,
.form-control:active {
  border-color: #000000 !important;
}

/* Pagination active */
.block-27 ul li.active a,
.block-27 ul li.active span {
  background-color: #304759 !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Owl carousel navigation */
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
  color: #304759 !important;
}

/* Appointment form icons */
.appointment .form-group .icon span {
  color: rgba(0, 0, 0, 0.5) !important;
}

#ftco-navbar {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* ========================================
   NAVBAR & BRAND WHITE COLOR OVERRIDE (FINAL ATTEMPT)
   ======================================== */

/* 1. Target the NAVBAR ID and classes for WHITE background */
#ftco-navbar, 
.ftco_navbar.ftco-navbar-light {
    background-color: #ffffff !important; 
    /* Adding a subtle shadow often helps make a white bar stand out on a white/light background */
    box-shadow: 0 0 10px rgba(0,0,0,0.1) !important; 
}

/* 2. Target the main Navigation Link text color to DARK (Primary Color) */
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
    color: #304759 !important; /* Dark Blue-Grey */
}

/* 3. Target the Hover/Active states (Secondary Color) */
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover,
.ftco-navbar-light .navbar-nav > .nav-item.active > a {
    color: #b0c03f !important; /* Lime Green */
}

/* 4. Target the Brand/Logo (if it was text-based) */
.ftco-navbar-light .navbar-brand {
    color: #304759 !important; /* Dark Blue-Grey */
}

/* 5. Target the mobile menu icon/text to DARK */
.ftco-navbar-light .navbar-toggler,
.ftco-navbar-light .navbar-toggler span {
    color: #304759 !important; /* Dark Blue-Grey */
}

/* 6. Fix the underline border color for active/hover */
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:before,
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover:before,
.ftco-navbar-light .navbar-nav > .nav-item.active > a:before {
  background-color: #b0c03f !important;
}

/* ========================================
   REMOVE ACTIVE MENU ITEM UNDERLINE & COLOR
   ======================================== */

/* 1. Remove the active/hover underline background color */
.ftco-navbar-light .navbar-nav > .nav-item.active > a:before,
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover:before {
    background-color: transparent !important; /* Makes the underline invisible */
}

/* 2. Remove the active link text color (Set it back to the normal link color) */
.ftco-navbar-light .navbar-nav > .nav-item.active > a {
    color: #304759 !important; /* Set text back to your Primary/Dark text color */
}

/* 3. Ensure the hover state still works (keep the text color change on hover) */
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover {
    color: #b0c03f !important; /* Keeps Lime Green hover effect */
}

/* ========================================
   HOVER & FOCUS STATES
   ======================================== */

/* Ensure proper hover colors */
a:hover,
a:focus {
  color: #b0c03f !important;
}

.blog-entry .text .heading a:hover,
.blog-entry .text .heading a:focus,
.blog-entry .text .heading a:active {
  color: #304759 !important;
}

.services .btn-custom:hover {
  color: #b0c03f !important;
  border-color: #b0c03f !important;
}


/* ========================================
   USAGE INSTRUCTIONS
   ======================================== */

/*
HOW TO USE THIS FILE:

1. Save this file as "custom.css" in the same folder as your style.css

2. Add this line to your HTML <head> section AFTER the style.css link:
   <link rel="stylesheet" href="custom.css">

3. Your colors are already set:
   - Primary: #304759 (Dark Blue-Grey)
   - Secondary: #b0c03f (Lime Green)

4. Upload both your HTML and custom.css files to your hosting

5. Clear your browser cache (Ctrl+Shift+R or Cmd+Shift+R) to see changes

NOTES:
- The !important flags ensure these colors override the original CSS
- Test your site after uploading to ensure all elements look correct
- Keep a backup of this file
- If you want to change colors again in the future, simply replace:
  #304759 with a new primary color
  #b0c03f with a new secondary color
*/