/* css/header.css */


    html, body {
      height: auto !important ;
    }
    body {
        font-family: 'Poppins' !important;
        font-size: 22px;
    }
    /* Basic Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    #content {
      justify-content: center;
      display: flex;
    }
    /* Banner Container with White Overlay */
    .banner-container {
      position: relative;
      width: 100%;
      height: 200px;
	    background-size: cover; /* Keep this to ensure the image covers the container */

    }

    /* White Overlay using Pseudo-Element */
    .banner-container::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.8); /* White with 75% opacity */
      z-index: 1; /* Below the gradient */
      pointer-events: none; /* Allows clicks to pass through to underlying elements */
    }

    /* Gradient Overlay using Pseudo-Element */
    .banner-container::after {
      content: "";
      position: absolute;
      top: 0;
      left: 20%;
      width: 80%;
      height: 100%;
      background: linear-gradient(to right, transparent, #fff);
      z-index: 2; /* Above the white overlay */
      pointer-events: none; /* Allows clicks to pass through */
    }

    /* Top Bar Overlay */
    .top-bar {
      position: absolute; /* Overlays the banner */
      top: 0;
      left: 0;
      width: 100%;
      height: 35px;
      background-color: rgba(0, 0, 0, 0.6); /* Black with ~60% opacity */
      z-index: 4; /* Above the gradient and white overlay */

      display: flex;        /* Use Flexbox for layout */
      align-items: center;  /* Vertically center the content */
      justify-content: space-between; /* Space between left and right sections */

      color: #fff;
      padding: 0 20px; /* Increased padding for better spacing */
      overflow: hidden; /* Keeps the top-bar stable */
    }

    /* Left Section: Text Container */
    .top-bar-left {
      display: flex;
      align-items: center;
      flex: unset; /* Before 1 */
      overflow: hidden; /* Allows scrolling if text overflows */
      position: relative; /* For positioning child elements if needed */
	  max-width: 190px;
    }
	
	.top-bar-center {
    flex-grow: 1;
    max-width: 600px; /* Prevents overlap */
    overflow: hidden;
    text-align: center;
    position: relative; /* Ensures the text does not move outside */
}

    /* Scrolling Text */
    .scrolling-text {
      display: inline-block;
      white-space: nowrap; /* Prevent text wrapping */
      font-size: 16px;
      padding-right: 15px; /* Space before the divider */
      font-weight: 500; /* Slightly bold for better readability */
    }

    /* Divider */
    .divider {
      border-left: 0.5px solid #fff; /* Using border-left for better consistency */
      height: 30px;
      margin: 0 15px; /* Equal spacing on both sides */
      flex-shrink: 0;
    }

    /* Right Section: Links */
    .top-bar-right {
      display: flex;
      align-items: center;
    }

    .top-bar-right a {
      color: #fff;
      text-decoration: none;
      font-size: 14px;
      margin-left: 15px; /* Space between links */
      transition: text-decoration 0.3s, color 0.3s;
    }

    .top-bar-right a:first-child {
      margin-left: 0;
    }

    a.scrolling-link:hover,
    .top-bar-right a:hover {
      text-decoration: none;
      color: #fff9bb;
    }
    .mobile-text {
      display: none;
    }

    .site-branding,
    .navMenuConfirmLink {
        color: white;
        font-weight: bold;

    }
    .navbar {
        padding: 15px 10px !important;
    }

    .navMenuConfirmLink {
        display: none;
    }

    @media (max-width: 1340px) {
        .contact-info .label {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .navMenuConfirmLink {
            display: block;
            position: absolute;
            right: 10px;
        }
        .navbar {
          height: 45px;
        }
    }

    /* Media Query: Apply scrolling animation on smaller screens */
    @media only screen and (max-width: 990px) {
      .scrolling-text {
        display: inline-block;
        /* Apply animation */
        animation: scroll-text 15s linear infinite;
      }
      div.contact-box{
        display: none;
      }
      div.buttons,
      div.buttons a {
        display: block;
      }
    }

    @media only screen and (max-width: 540px) {
        .banner-container {
            height: 180px;
        }
        /* div.bottom-bar {
            padding: 8px;
            text-align: left;
            display: inline-block;
            height: 145px;
        } */
        div.bottom-bar-col1 {
            display: inline-block;
            max-width: none;
        }
        div.bottom-bar-col1,
        div.bottom-bar-col1 img {
            width: 190px !important;
            margin-top: 9px;
            vertical-align: top;
            display: inline-block;
        }
        div.bottom-bar-col2 {
            display: inline-block;
            max-width: 80%;
        }
        div.info-box {
            padding: 8px;
        }
        div.info-box {
            padding: 6px;
        }
        div.bottom-bar-col3 {
            display: none;
        }

        div.bottom-bar {
            padding: 8px;
            text-align: center;
            display: inline-block;
            height: 145px;
        }
        p.hours {
          margin-bottom: 0px;
        }
      }

     /* Media Query: Apply scrolling animation on smaller screens */
     @media only screen and (max-width: 1210px) {
        .headerConfirmLink {
            display: none;
        }
      }

      @media only screen and (max-width: 1040px) {
        div.contact-box {
            padding: 10px;
        }
      }

      .desktop-text {
        vertical-align: middle;
      }

    @media only screen and (max-width: 768px) {
        .top-bar-left {
          flex: unset;
          max-width: 160px;
        }
        .locationDropdown select {
          padding: 8px 5px;
          font-size: 15px;
        }
    }

    /* Media Query: on smaller screens, swap out the text */
    @media only screen and (max-width: 600px) {
        .top-bar {
            padding-left: 10px;
        }
        .desktop-text, 
        .divider {
            display: none;   /* Hide desktop text */
        }
        .mobile-text {
            display: none;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: left;
            vertical-align: middle;
        }
        .scrolling-text {
            animation: none; /* Disable scrolling on mobile text */
        }
        a.headerPaymentLink {
            font-size: 12px;
        }
    }

    /* Keyframes for scrolling text */
    @keyframes scroll-text {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
      }
    }

    /* Accessibility: Reduce motion preference */
    @media (prefers-reduced-motion: reduce) {
      .scrolling-text {
        animation: none;
      }
    }

    /* Optional: Scrollbar Styling for Overflow (if any) */
    .top-bar-left::-webkit-scrollbar {
      height: 5px;
    }

    .top-bar-left::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.5);
      border-radius: 2.5px;
    }

    /* Bottom Bar Overlay - New Section */
    .bottom-bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(240px - 35px);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    box-sizing: border-box;
    top: 15px;
}

    /* Columns within the Bottom Bar */
    .bottom-bar-col1,
    .bottom-bar-col2,
    .bottom-bar-col3 {
      display: flex;
      align-items: center;
    }

    /* Column 1: Logo */
    .bottom-bar-col1 {
      
      width: 310px;
    }

    .bottom-bar-col1 img {
      max-height: 140px; /* Ensures the logo fits within the column */
      height: auto;
      width: auto;
    }

    /* Column 2: Info Box */
    .bottom-bar-col2 {
      flex: 2; /* Adjust as needed */
      max-width: 30%; /* Approximately 30% of the banner */
      display: flex;
      justify-content: center; /* Center the info box within the column */
    }

    .info-box {
      background-color: #fff; /* White background */
      border-radius: 20px; /* Rounded corners */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
      padding: 0px 15px; /* Inner padding */
      min-width: 60%; /* Full width of the column */
      max-width: 300px; /* Optional: Limit the maximum width */
      box-sizing: border-box;
    }

    .info-box p {
      color: #000; /* Black text */
    }

    .info-box .address {
      font-size: 22px; /* "1128 Richards St" */
      font-weight: bold;
	  text-align: right;
    }

    .info-box .location {
      font-size: 12px; /* "Vancouver, BC V6B 3E6" */
      font-weight: 300;
      color: #555; /* Dark gray for thinner text */
	  text-align: right;
	  margin-top: -8px;
    }

    .info-box .fading-ruler {
      border: none;
      height: 1px;
      background: linear-gradient(to right, transparent, #000, transparent);
      margin: 10px 0;
    }

    .info-box .open-status {
      font-size: 14px; /* "We are open today" */
      color: darkgreen;
      font-weight: 500;
	  text-align: right;
    }

    .info-box .hours {
      font-size: 22px; /* "8:00 AM - 6:00 PM" */
      font-weight: bold;
	  text-align: right;
	  margin-top: -6px;
      color: darkgreen;
      white-space: nowrap;
    }

    /* Column 3: Contact Box */
    .bottom-bar-col3 {
      flex: 1; /* Adjust as needed */
      max-width: 40%; /* Approximately 40% of the banner */
      display: flex;
      flex-direction: column; /* Stack contact info and buttons vertically */
      align-items: center; /* Center content horizontally */
      justify-content: center; /* Center content vertically */
    }

    .contact-box {
      background-color: #fff; /* White background */
      border-radius: 20px; /* Rounded corners */
      padding: 5px 16px; /* Inner padding */
      width: 100%; /* Full width of the column */
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-start; /* Align contact info to the left */
      justify-content: flex-start; /* Align contact info to the top */
      height: 60%; /* Approximately 60% of the info box height */
    }

    .contact-info {
      width: 100%; /* Take full width of the contact box */
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .contact-info p {
      font-size: 22px;
      color: #000;
	  font-weight: 800;
    }

    .contact-info .label {
      font-weight: 300; /* Lighter text */
      color: #555; /* Dark gray */
	  font-size: 22px;
    }

    /* Buttons Container */
    .buttons {
      display: flex;
      gap: 10px; /* Space between buttons */
      margin-top: 10px;
      width: 100%; /* Ensure buttons take full width of contact-box */
      justify-content: center; /* Center buttons horizontally */
    }

    .buttons a {
      text-decoration: none;
      padding: 8px 20px;
      border-radius: 5px;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      transition: background-color 0.3s, color 0.3s;
      flex: 1; /* Ensure buttons take equal space */
      min-width: 120px; /* Optional: Set a minimum width */
      white-space: nowrap;
    }

    .buttons .view-locations {
      background-color: #f7f7f7; /* White background */
      color: #229efe; /* Green text */
    }


    .buttons .book-appointment {
      background-color: #1e8be8; /* Green background */
      color: #fff; /* White text */
    }

    .buttons .book-appointment:hover {
      background-color: #1e8be8; /* Darker green on hover */
    }
	
	.scrolling-link { text-decoration: none; color: #fff; }

    /* Responsive Adjustments for Bottom Bar */
    @media only screen and (max-width: 800px) {
      .bottom-bar {
        display: inline-block;
        padding: 0 20px;
        top: 35px;
      }

      .bottom-bar-col1,
      .bottom-bar-col2,
      .bottom-bar-col3 {
        display: inline-block;
        max-width: none;
      }

      div.buttons {
        display: none;
      }
    }

    @media only screen and (max-width: 600px) {
      /* Additional responsive styles if needed */
      .info-box {
        padding: 15px;
      }

      .info-box .address,
      .info-box .hours {
        font-size: 16px;
      }

      .info-box .location {
        font-size: 12px;
      }

      .info-box .open-status {
        font-size: 14px;
      }

      .contact-box {
        padding: 15px;
      }

      .contact-info p {
        font-size: 13px;
      }

      .buttons a {
        font-size: 13px;
        padding: 8px 16px;
      }
    }
	
    /* .wpb_content_element {
      margin-bottom: 0 !important;
    } */

  .mobileHeaderdivider {
      height: 8px;
      background-color: #1e8be8;
      display: none;
      font-size: 12px;
      text-align: center;
      color: white;
  }
  .mobileHeaderdividerLine {
      display: none;
  }
  @media (max-width: 600px) {
      .mobileHeaderdividerLine {
        display: block;
      }
      .mobileHeaderdivider {
          height: auto;
      }
  }
  @media (max-width: 768px) {
      .locationDropdown select option:first-child {
          display: none;
      }
      .mobileHeaderdivider {
        display: block;
      }
  }

  @media only screen and (max-width: 375px) {
      .info-box .address,
      .info-box .hours {
        font-size: 14px;
      }
      div.bottom-bar-col1, .bottom-bar div.bottom-bar-col1 img {
        width: 175px !important;
      }
      .menu-btn,
      .menu-button {
        padding: 10px;
      }
  }

.inner-top-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  padding: 50px 0;
  font-size: 30px;
  line-height: 1.2;
}