/* ==========================================================================
   Passing Paws — main stylesheet
   Every page links to this one file, so a change here updates the whole site.
   ========================================================================== */

/* --- 1. Colours & fonts --------------------------------------------------
   "Custom properties" (variables). Change a colour here and it changes
   everywhere it's used, e.g. color: var(--accent);                        */
:root {
  --bg: #f1ebe2;          /* warm linen page background */
  --surface: #faf6ef;     /* cards & header — soft cream, not pure white */
  --text: #3a3532;        /* main text */
  --muted: #6b625b;       /* secondary text */
  --accent: #5f8566;      /* sage green (matches the leaves) — buttons, links */
  --accent-dark: #466a4d;
  --accent-darker: #34513a; /* hover colour for links that are already dark green */
  --speed: 0.2s;            /* how fast hover colours fade (matches the buttons) */
  --soft: #e6e9dd;        /* pale sage for highlighted sections */
  --border: #e0d6c9;

  --font-heading: "Lora", Georgia, serif;
  --font-body: "Nunito Sans", system-ui, sans-serif;

  --radius: 14px;
  --max-width: 1080px;
}

/* --- 2. Basics ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }
h3 { font-size: 1.3rem; }
h1, h2 { font-weight: 700; }       /* bolder main headings */
h2 { color: var(--accent-dark); }  /* section headings in deep green */

/* Ordinary text links: darken and lose the underline on hover */
a {
  color: var(--accent-dark);
  text-underline-offset: 3px;
  transition: color var(--speed), background var(--speed), border-color var(--speed), opacity var(--speed);
}
a:hover { color: var(--accent-darker); text-decoration-color: transparent; }

/* Phone numbers: no underline until hovered, then it fades in (same speed
   as the phone number on the home banner). Buttons are left as they are. */
main a[href^="tel:"]:not(.btn):not(.banner-sub),
.site-footer a[href^="tel:"] {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color var(--speed), text-decoration-color var(--speed);
}
main a[href^="tel:"]:not(.btn):not(.banner-sub):hover,
.site-footer a[href^="tel:"]:hover {
  text-decoration-color: currentColor;
}

/* Keyboard users (Tab key) get a clear outline on whatever is selected */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* .container keeps content centred and not too wide on big screens */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

section { padding: 64px 0; }
.section-soft { background: var(--soft); }
.center { text-align: center; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 680px; margin: 0 auto 1.5em; }
.lead-wide { max-width: 820px; } /* same width as the Julie & Mell photos below */

/* --- 3. Header & navigation --------------------------------------------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;   /* stays at the top when you scroll */
  top: 0;
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
}
.brand img {
  height: 64px;
  width: auto;
  flex-shrink: 0; /* never squash the logo when space is tight */
  transition: opacity var(--speed);
}
.brand:hover { color: var(--accent-dark); }
.brand:hover img { opacity: 0.75; }

.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text);
}
.nav-links a:hover { background: var(--soft); color: var(--accent-dark); }
/* The page you're on gets aria-current="page" in the HTML */
.nav-links a[aria-current="page"] { background: var(--soft); color: var(--accent-dark); font-weight: 700; }

/* Hamburger button — hidden on big screens, shown on phones (see section 8) */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
  transition: background var(--speed);
}
.nav-toggle:hover { background: var(--soft); }

/* --- 4. Buttons ---------------------------------------------------------- */
.btn {
  /* inline-flex + centring keeps the label in the exact middle, even when
     the button is stretched to match a neighbour or the text wraps */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  padding: 12px 24px;
  border: 2px solid transparent; /* same size as the outline buttons */
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  transition: background var(--speed), border-color var(--speed), color var(--speed);
}
.btn:hover { background: var(--accent-dark); color: #fff; }
.btn-outline { background: transparent; color: var(--accent-dark); border: 2px solid var(--accent); }
.btn-outline:hover { background: var(--soft); border-color: var(--accent-dark); color: var(--accent-dark); }
.nowrap { white-space: nowrap; } /* keeps phone numbers in one piece */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* --- 5. Hero (big intro at top of page) ---------------------------------- */
.hero { padding: 80px 0 64px; text-align: center; }
/* Small grey "where we work" line tucked right under the main title */
.hero h1:has(+ .area) { margin-bottom: 0.1em; }
.hero .area {
  margin: 0 0 1.2em;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero .tagline { font-family: var(--font-heading); font-style: italic; font-size: 1.3rem; color: var(--muted); margin-bottom: 1.5em; }

.stat { margin-top: 36px; }
.lead + .stat { margin: 0 0 32px; } /* above the portraits: space below instead */
.stat strong { font-family: var(--font-heading); font-size: 1.8rem; color: var(--accent-dark); display: block; line-height: 1.2; }

/* --- 6. Cards & grids ---------------------------------------------------- */
/* A grid that fits as many 260px+ columns as the screen allows */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
/* Cards have no box behind them — content sits straight on the page */
.card { padding: 12px; }
.card img.round {
  width: 140px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 16px;
}
.card.center p { margin-bottom: 0; }

/* Big portraits for Julie & Mell */
.card img.portrait {
  width: min(100%, 280px);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 20px;
  border: 6px solid var(--bg);
  box-shadow: 0 6px 24px rgba(58, 53, 50, 0.15);
}
.team-grid { max-width: 820px; margin: 0 auto; }

/* Section with the leafy beige background from the old site */
.section-leaves {
  background: #ece4dc url("../images/leaves.png") center / cover no-repeat;
}

/* --- Photo banners --------------------------------------------------------
   Each page sets its own photo with  style="background-image: url(...)"
   in the HTML. A see-through dark layer (::before) sits on top of the photo
   so the white banner lettering is readable.                               */
.banner {
  display: flex;
  position: relative;
  min-height: clamp(260px, 42vw, 520px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: #6b625b;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(40, 32, 26, 0.35);
}
/* Colour-matching: each photo gets its own adjustment so they all end up
   with the same soft, warm, muted tone.
     saturate(): colour strength   0 = black & white, 1 = original
     sepia():    warm brown tint   0 = none, 1 = full sepia
     brightness(): 1 = original, lower = darker                           */
.banner::before {
  -webkit-backdrop-filter: var(--tone, none);
  backdrop-filter: var(--tone, none);
}
/* All four are nudged towards one soft, warm-neutral tone. */
.banner-faqs     { --tone: sepia(0.1) saturate(0.55); }  /* calm the vivid sunset (dog photo) */
.banner-services { --tone: sepia(0.15) saturate(1.1); }  /* warm the white backdrop slightly */
.banner-home     { --tone: sepia(0.25) saturate(1.2); }  /* warm the cool grey (cat photo) */
.banner-contact  { --tone: saturate(0.8) brightness(0.97); } /* soften the strong orange */

/* Contact photo: a flipped copy of the beach-dog photo, with extra beach
   added on the right and the grain gently smoothed.
   Zoomed in slightly and pinned to the right edge so the dog sits on the
   left, clear of the centred text.                                       */
.banner-contact { background-size: 113% auto; background-position: 100% 45%; }

/* Cat photo (now on the home page): the cat sits low and to the right, so aim the crop there */
.banner-home { background-position: 85% 85%; }

/* The big white lettering (real text, same style as the old banner images) */
.banner-text { position: relative; text-align: center; color: #fff; }
.banner-title,
.banner-sub {
  font-family: var(--font-heading); /* Lora — same as the logo text */
  font-weight: 700;                 /* bold, so it holds up over photos */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
}
.banner-title {
  margin: 0;
  font-size: clamp(2.2rem, 7.5vw, 5rem);
  line-height: 1.1;
}
.banner-sub {
  display: block;
  line-height: 1.1; /* same tight line spacing as the two-line banners */
  font-size: clamp(1.4rem, 4.5vw, 3rem);
  color: #fff;
  text-decoration: none;
}
/* Phone number on the home banner: pale sage + underline on hover */
a.banner-sub {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  transition: color var(--speed), text-decoration-color var(--speed);
}
a.banner-sub:hover { color: #dfe9d8; text-decoration-color: #dfe9d8; }

/* The banner already shows the page name, so the page's real heading
   (class="banner-dup") is hidden from view — but it's still there for
   Google and screen readers. */
.hero h1.banner-dup {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.banner + .hero { padding-top: 56px; }
/* FAQs, Services, Contact: the intro under the banner is just one short
   line, so give it much less space than the home page intro. */
.banner + .hero:has(.banner-dup) { padding: 40px 0 36px; }
.hero:has(.banner-dup) .lead:last-child { margin-bottom: 0; }

/* --- 7. FAQ (uses <details> so it opens/closes with no JavaScript) ------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  padding: 0 22px;
  transition: border-color var(--speed), background var(--speed);
}
/* Hovering a question tints its box and darkens the text */
.faq details:hover { border-color: var(--accent); background: #fbf9f4; }
.faq summary { transition: color var(--speed); }
.faq summary:hover { color: var(--accent-dark); }
.faq summary {
  cursor: pointer;
  padding: 18px 0;
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details.is-closing summary::after { content: "+"; } /* flip the sign as soon as it starts closing */
.faq details p { margin-top: 0; }

/* --- Contact page ------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr; /* phones on the left, wider form on the right */
  gap: 56px;
  align-items: start;
}
.notice { font-weight: 700; }

/* Contact form: after sending */
[hidden] { display: none !important; } /* make sure hidden things stay hidden */
.form-thanks {
  padding: 28px;
  border-radius: var(--radius);
  background: var(--soft);
  border-left: 5px solid var(--accent);
}
.form-thanks:focus { outline: none; }
.form-thanks h2 { margin-top: 0; }
.form-thanks p { margin-bottom: 0; font-size: 1.1rem; }
.form-error { color: #9b3b2f; font-weight: 700; }
.contact-form .btn:disabled { opacity: 0.7; cursor: wait; }

/* Service area: words on the left, map on the right */
.area-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: center;
}
.map {
  width: 100%;
  height: 340px;
  border: 0;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.phone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.phone span { font-family: var(--font-heading); font-size: 1.3rem; }
.phone .btn { min-width: 12em; } /* both phone buttons the same width */

.contact-form label { display: block; font-weight: 700; margin: 16px 0 6px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #cfc4b5;
  border-radius: 10px;
  background: rgba(250, 246, 239, 0.9);
  font: inherit;
  color: inherit;
  transition: border-color var(--speed);
}
.contact-form input:hover,
.contact-form textarea:hover { border-color: var(--accent); }
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.contact-form button { margin-top: 24px; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.optional { font-weight: 400; color: var(--muted); }
.hidden-field { display: none; }

/* --- Quote --------------------------------------------------------------- */
.quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.35rem;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.quote cite { display: block; margin-top: 12px; font-size: 1rem; font-style: normal; color: var(--muted); }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: #3a3532;
  color: #e9e4de;
  padding: 40px 0;
  font-size: 0.95rem;
}
.site-footer a { color: #fff; }
.site-footer a:hover { color: #c9d8c4; } /* soft sage on the dark footer */
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; }
.footer-inner ul { list-style: none; margin: 0; padding: 0; }
/* Desktop: three columns, with the phone numbers exactly in the middle
   of the page (the outer two columns always get equal widths). */
@media (min-width: 721px) {
  .footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .footer-inner > :last-child { justify-self: end; }
}

/* --- 8. Phones & small screens ------------------------------------------
   Everything inside this block only applies when the screen is ≤ 720px wide */
@media (max-width: 720px) {
  section { padding: 48px 0; }
  .hero { padding: 56px 0 48px; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none;                 /* hidden until the button is pressed */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 8px 20px 16px;
  }
  .nav-links.open { display: flex; } /* script.js adds the "open" class */
  .contact-layout, .form-row { grid-template-columns: 1fr; } /* stack columns */
  .contact-layout { gap: 32px; }
  .area-layout { grid-template-columns: 1fr; gap: 20px; }
  .map { height: 280px; }
  /* phones: fill the taller banner, and slide the photo so the dog's whole
     head shows on the left without reaching the centred text */
  .banner-contact { background-size: cover; background-position: 85% 45%; }

  /* Header: keep the name on one line and the Menu button compact */
  .brand { font-size: 1.1rem; letter-spacing: 0.06em; white-space: nowrap; gap: 8px; }
  .brand img { height: 50px; width: auto; }
  .nav-toggle { white-space: nowrap; flex-shrink: 0; padding: 6px 12px; }


  /* Call + "Our services" side by side, sharing the width equally.
     Longer labels wrap onto two lines inside the button. */
  .btn-row { flex-wrap: nowrap; }
  .btn-row .btn { flex: 1; padding: 10px 14px; }

  /* Julie & Mell side by side instead of one per screen */
  .team-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .team-grid .card { padding: 0; }
  .card img.portrait { border-width: 4px; margin-bottom: 12px; }

  /* Services as rows: round photo on the left, title + text on the right */
  .service-list { gap: 28px; }
  .service-list .card {
    display: grid;
    grid-template-columns: 92px 1fr;
    column-gap: 16px;
    align-items: start;
    text-align: left;
    padding: 0;
  }
  .service-list .card img.round { width: 92px; margin: 0; grid-row: span 2; }
  .service-list .card h3 { margin: 0 0 0.3em; font-size: 1.2rem; }
  .service-list .card p { font-size: 0.98rem; }

  /* Less empty space around the short intro under the banners */
  .banner + .hero { padding-top: 36px; padding-bottom: 32px; }
  .hero .lead:last-child { margin-bottom: 0; }
  .banner + .hero:has(.banner-dup) { padding: 28px 0 24px; }
}

/* --- Call bar (phones only) ----------------------------------------------
   Two call buttons fixed to the bottom of the screen, so a phone number is
   always one tap away. Hidden on bigger screens.                          */
.call-bar { display: none; }
@media (max-width: 720px) {
  .call-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--accent-dark);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
    padding-bottom: env(safe-area-inset-bottom); /* clear the iPhone home bar */
  }
  .call-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--speed);
  }
  .call-bar a + a { border-left: 1px solid rgba(255, 255, 255, 0.25); }
  .call-bar a:hover,
  .call-bar a:active { background: var(--accent-darker); color: #fff; }
  /* Leave room at the bottom so the bar never covers the footer */
  body { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
}

/* --- Banner photos ---------------------------------------------------------
   Each banner has a web-sized photo for big screens and a smaller one for
   phones (the full-size originals are kept in the images folder).
   The second url() is a tiny blurred preview shown while the photo loads. */
.banner-home     { background-image: url("../images/banner-cat.jpg"), url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA0JCgsKCA0LCwsPDg0QFCEVFBISFCgdHhghMCoyMS8qLi00O0tANDhHOS0uQllCR05QVFVUMz9dY1xSYktTVFH/2wBDAQ4PDxQRFCcVFSdRNi42UVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVH/wAARCAAWACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDUhXkcDoO1aMMeew/KqUHUfQVp2+OKYDjBkdB+VU7m2UDLbQPfFbIK7KxNeuo4IVifhZeC2M4FAGVcWCyYYbSD0I6UVk2800UzFJiI93GDx+VFK4WOhgDHB46CtGEMO4oopgWQXx1FZ+o6eL4qXblegJOKKKQHKzWzQSsu4HD7Rj+dFFFAz//Z"); }
.banner-faqs     { background-image: url("../images/banner-dog.jpg"), url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA0JCgsKCA0LCwsPDg0QFCEVFBISFCgdHhghMCoyMS8qLi00O0tANDhHOS0uQllCR05QVFVUMz9dY1xSYktTVFH/2wBDAQ4PDxQRFCcVFSdRNi42UVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVH/wAARCAATACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCvDrd/ExIun5Azuwf51u2Xi23VRDepD52OG3Bc/hiuK85R2H51VvnjnjXCLvXnd/SuZXubaHrtvqdnLErpExJ9MEfnU9vrWlzTCGK5VpCcEAdPx6V45a3lzDbmKO4kSM9VViBzVzTbiSIl0PIHGKJOcSlGMj1a/wBHgvYAsZVOc5xnNFcHF4gvbd0MU7K3fuKKxtB6uJVprRM52NFMOSMkiorqNFhYgYOaKK2T1MiCPpV20A8lz3zRRVVNiolkgbV96KKKxRZ//9k="); }
.banner-services { background-image: url("../images/banner-services.jpg"), url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA0JCgsKCA0LCwsPDg0QFCEVFBISFCgdHhghMCoyMS8qLi00O0tANDhHOS0uQllCR05QVFVUMz9dY1xSYktTVFH/2wBDAQ4PDxQRFCcVFSdRNi42UVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVH/wAARCAAYACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDJhs9Q1K3uFs0E0jARySHAEY4wB74qlFoMiWl3cXl3CqxuY1Rc5Zl7dOnb8K6HTLpNKifTbm3YXETedIshAEg45B6HoKzJ3vZBc3OwPaTTElFHJPt71hqjbcw7+Hy7G3VYD5kjD5sfe+n+e1emWMs8mk2bT4Eg2g8DPBxzWRrOhlbzSJIIpX2FWZW4O0c9PbmuguVKNGgRgDLnp6mqiKRdvl3YOB+VFNvZlUgZoqiTlPEukyapdQyW3zXERAfeRswff1/xrIgtJbC7ZBbSW/lkGdyMJt9QfrRRSew1ud89/CNsnmISq7QT6VXuNajCkeYhoopiKMeuAWdxcYVxHLsX8qKKKdhH/9k="); }
.banner-contact  { background-image: url("../images/banner-contact.jpg"), url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA0JCgsKCA0LCwsPDg0QFCEVFBISFCgdHhghMCoyMS8qLi00O0tANDhHOS0uQllCR05QVFVUMz9dY1xSYktTVFH/2wBDAQ4PDxQRFCcVFSdRNi42UVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVH/wAARCAAUACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDRhvgFGJIjwO9T+fO8XmBcoeh7H9KxtNudOfJiiZ5VAJMv9BUt42+RrqSQttA4ZsD2FcXsNOY6va62JprmQnt+GDVZ5ZgDhTj6A1QuJi8hO0fMeiEEVA5ZQcq/5VahYTZdaVwwPOf9zNFZbMmeXcfgaK05TMuxhYhvjRVLYzgVHq88mY4Q2Fxu47miitZbEx3MxmIGePyqFpWHYflRRWZYhmbjpRRRVEH/2Q=="); }
@media (max-width: 720px) {
  .banner-home     { background-image: url("../images/banner-cat-phone.jpg"), url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA0JCgsKCA0LCwsPDg0QFCEVFBISFCgdHhghMCoyMS8qLi00O0tANDhHOS0uQllCR05QVFVUMz9dY1xSYktTVFH/2wBDAQ4PDxQRFCcVFSdRNi42UVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVH/wAARCAAWACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDUhXkcDoO1aMMeew/KqUHUfQVp2+OKYDjBkdB+VU7m2UDLbQPfFbIK7KxNeuo4IVifhZeC2M4FAGVcWCyYYbSD0I6UVk2800UzFJiI93GDx+VFK4WOhgDHB46CtGEMO4oopgWQXx1FZ+o6eL4qXblegJOKKKQHKzWzQSsu4HD7Rj+dFFFAz//Z"); }
  .banner-faqs     { background-image: url("../images/banner-dog-phone.jpg"), url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA0JCgsKCA0LCwsPDg0QFCEVFBISFCgdHhghMCoyMS8qLi00O0tANDhHOS0uQllCR05QVFVUMz9dY1xSYktTVFH/2wBDAQ4PDxQRFCcVFSdRNi42UVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVH/wAARCAATACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCvDrd/ExIun5Azuwf51u2Xi23VRDepD52OG3Bc/hiuK85R2H51VvnjnjXCLvXnd/SuZXubaHrtvqdnLErpExJ9MEfnU9vrWlzTCGK5VpCcEAdPx6V45a3lzDbmKO4kSM9VViBzVzTbiSIl0PIHGKJOcSlGMj1a/wBHgvYAsZVOc5xnNFcHF4gvbd0MU7K3fuKKxtB6uJVprRM52NFMOSMkiorqNFhYgYOaKK2T1MiCPpV20A8lz3zRRVVNiolkgbV96KKKxRZ//9k="); }
  .banner-services { background-image: url("../images/banner-services-phone.jpg"), url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA0JCgsKCA0LCwsPDg0QFCEVFBISFCgdHhghMCoyMS8qLi00O0tANDhHOS0uQllCR05QVFVUMz9dY1xSYktTVFH/2wBDAQ4PDxQRFCcVFSdRNi42UVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVH/wAARCAAYACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDJhs9Q1K3uFs0E0jARySHAEY4wB74qlFoMiWl3cXl3CqxuY1Rc5Zl7dOnb8K6HTLpNKifTbm3YXETedIshAEg45B6HoKzJ3vZBc3OwPaTTElFHJPt71hqjbcw7+Hy7G3VYD5kjD5sfe+n+e1emWMs8mk2bT4Eg2g8DPBxzWRrOhlbzSJIIpX2FWZW4O0c9PbmuguVKNGgRgDLnp6mqiKRdvl3YOB+VFNvZlUgZoqiTlPEukyapdQyW3zXERAfeRswff1/xrIgtJbC7ZBbSW/lkGdyMJt9QfrRRSew1ud89/CNsnmISq7QT6VXuNajCkeYhoopiKMeuAWdxcYVxHLsX8qKKKdhH/9k="); }
  .banner-contact  { background-image: url("../images/banner-contact-phone.jpg"), url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAA0JCgsKCA0LCwsPDg0QFCEVFBISFCgdHhghMCoyMS8qLi00O0tANDhHOS0uQllCR05QVFVUMz9dY1xSYktTVFH/2wBDAQ4PDxQRFCcVFSdRNi42UVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVH/wAARCAAUACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDRhvgFGJIjwO9T+fO8XmBcoeh7H9KxtNudOfJiiZ5VAJMv9BUt42+RrqSQttA4ZsD2FcXsNOY6va62JprmQnt+GDVZ5ZgDhTj6A1QuJi8hO0fMeiEEVA5ZQcq/5VahYTZdaVwwPOf9zNFZbMmeXcfgaK05TMuxhYhvjRVLYzgVHq88mY4Q2Fxu47miitZbEx3MxmIGePyqFpWHYflRRWZYhmbjpRRRVEH/2Q=="); }
}