@charset "utf-8";
/* CSS Document */

html, 
html * {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
}

/* Container layout - FIXED TO TOP */
.navbar {
  display: flex;
  justify-content: space-between; 
  align-items: center;            
  background-color: #333333;
  padding: 10px 30px;
  
  /* Sticky/Fixed rules */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* Keeps navbar layered on top of page content */
}

/* IMPORTANT: Add padding to your body so content doesn't hide under the fixed navbar */
body {
  padding-top: 60px; /* Adjust this to match your navbar's total height */
}

/* Logo styling */
.logo img {
  height: 40px;                   
  display: block;
}

/* Navigation links container */
.nav-links {
  display: flex;                  
  list-style-type: none;
  margin: 0;
  padding: 0;
  align-items: center; /* Ensures the text links align perfectly with the button height */
  gap: 20px;                      
}

/* Individual link items */
.nav-links a {
  color: #ffffff;
  text-decoration: none;
  font-size: 1rem;
  padding: 8px 12px;
  transition: all 0.2s;
}

/* Hover effect for normal links */
.nav-links a:not(.cta-btn):hover {
  background-color: #555555;
  border-radius: 4px;
}

/* 2. CALL TO ACTION BUTTON STYLING */
.nav-links .cta-btn {
  background-color: #0066cc; /* Brand color */
  color: #ffffff;
  padding: 8px 20px;
  border-radius: 20px;       /* Pill shape */
  font-weight: bold;
}

/* Hover effect for the button */
.nav-links .cta-btn:hover {
  background-color: #004499; /* Darker shade on hover */
  transform: translateY(-1px); /* Slight lift effect */
}

.hero {
	background-image: url("images/mobile-vet-columbia-md.png");
	background-size: cover;
	padding: 50px 20px 350px 20px;
	color: black;
	text-align: center;
}

.hero-clarksville {
	background-image: url("images/In-home-pet-euthanasia-Clarksville-MD.png");
	background-size: cover;
	padding: 50px 20px 350px 20px;
	color: black;
	text-align: center;
}

h1 {
	font-size: 35px;
	text-transform: uppercase;
	font-weight: 200;
}

h2 {
	font-size: 25px;
	font-weight: 200;
	text-transform: uppercase;
	
}

p {
	font-size: 15px;
	font-weight: 200;
	padding: 2
}

.sub_section {
	/*background-image: url("images/IMG_0688.JPEG");
	 background-position: center;
  background-repeat: no-repeat;
	background-size: cover; */
	padding: 25px 50px 25px 50px;
}

/* TARGETS THE BUTTON IN ITS NATURAL STATE */
.cta-button {
  display: inline-flex;       
  flex-direction: column;    
  align-items: center;       
  text-align: center;
  
  /* Sizing and Shape */
  background-color: #007791 !important; /* Forces the primary medical teal color to load */
  color: #ffffff !important;            /* Forces the text to stay white */
  padding: 16px 32px;        
  border-radius: 30px;       
  text-decoration: none;     
  font-weight: bold;
  
  /* Layout spacing */
  margin-top: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); 
  transition: all 0.2s ease; 
}

/* Styles the phone number line inside the button */
.cta-button .phone-display {
  display: block;
  font-size: 1.2rem;         
  margin-top: 4px;           
  color: #e0f7fa !important; /* Lighter teal tint for perfect hierarchy */
}

/* INTERACTIVE HOVER STATE */
.cta-button:hover {
  background-color: #005662 !important; /* Smoothly switches to dark teal on hover */
  color: #ffffff !important;
  transform: translateY(-2px); 
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* INTERACTIVE PRESS/TAP STATE */
.cta-button:active {
  transform: translateY(0);   
}

.faq-section{
	background-color: beige;
	padding: 25px 50px 25px 50px;
}

/* Container section padding */
.service-locations {
  padding: 40px 20px;
  text-align: center;
}

/* THE GRID SYSTEM 
.location-grid {
  display: grid;
  /* Automatically fits as many 250px columns as will fit the screen width */
 /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px; /* Perfect spacing between all the boxes */
 /* max-width: 1000px;
  margin: 25px auto 0 auto;
}*/

.location-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  max-width: 1000px;
  margin: 25px auto 0 auto;
}

.location-grid > * {
  flex: 1 1 250px;
}


/* TEXT LINK CARDS - Making them look like professional, tappable boxes */
.location-card {
  display: block;
  background-color: #ffffff;
  color: #007791; /* Matches your vet care medical teal theme */
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  transition: all 0.2s ease;
}

/* Interactive Hover States */
.location-card:hover {
  background-color: #007791;
  color: #ffffff; /* Inverts the text to white on hover */
  border-color: #007791;
  transform: translateY(-2px); /* Subtle click-me lift */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}


.footer_class {
	padding: 30px 30px 30px 30px;
}

/* ==========================================================================
   Global Page Framework & Reset
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #3e3530; /* Dark warm charcoal */
    background-color: #faf8f5; /* Warm off-white/cream background */
    padding: 20px;
}

/* ==========================================================================
   Header and Global Navigation Links
   ========================================================================== */
header {
    max-width: 600px;
    margin: 40px auto 20px auto;
    text-align: center;
}

header nav {
    margin-bottom: 20px;
}

header nav a {
    color: #6b5b52; /* Soft clay brown */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s ease-in-out;
}

header nav a:hover {
    color: #4a403a;
    text-decoration: underline;
}

header h1 {
    font-size: 2.25rem;
    color: #4a403a; /* Deep taupe brown */
    margin-bottom: 10px;
    font-weight: 700;
}

header p {
    color: #70655e;
    font-size: 1.1rem;
    max-width: 500px;
    margin: 0 auto;
}

/* ==========================================================================
   Form Container Layout
   ========================================================================== */
main {
   width: 100%;
    margin: 0 auto 60px auto;
	
	/* Active Centering Engine */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center vertically if container has height */
    align-items: center; /* Center horizontally */
    
    /* Forces the layout to consider the full screen viewport height */
    min-height: 80vh; 
}

.form-container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #ebdcd0; /* Light warm border */
    box-shadow: 0 4px 15px rgba(107, 91, 82, 0.05); /* Very subtle warm shadow */
	 max-width: 600px;
	width: 100%;
}

.form-container h2 {
    font-size: 1.4rem;
    color: #4a403a;
    margin-bottom: 25px;
    border-bottom: 2px solid #f2ede8;
    padding-bottom: 10px;
}

/* ==========================================================================
   Form Fields and Input Elements
   ========================================================================== */
.form-group {
    margin-bottom: 22px;
}

label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #4a403a;
    font-size: 0.95rem;
}

/* Targeted styling for all input containers */
input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #dcd3cb;
    border-radius: 6px;
    background-color: #fff;
    font-size: 1rem;
    color: #3e3530;
    font-family: inherit;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Placeholder styling for an empathetic feel */
input::placeholder,
textarea::placeholder {
    color: #a89f98;
}

/* Active focus state when a user types in a field */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #a39084;
    box-shadow: 0 0 0 4px rgba(163, 144, 132, 0.15); /* Soft outer glow */
}

/* Ensure dropdown select fields align smoothly */
select {
    cursor: pointer;
    appearance: none; /* Removes browser default arrows */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://w3.org' viewBox='0 0 24 24' fill='none' stroke='%236b5b52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Custom spacing restrictions for message field */
textarea {
    resize: vertical;
    min-height: 120px;
}

/* ==========================================================================
   High-Converting Call-to-Action Submit Button
   ========================================================================== */
.submit-button {
    background-color: #6b5b52; /* Direct brand primary action color */
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(107, 91, 82, 0.1);
    transition: background-color 0.15s ease-in-out, transform 0.1s ease-in-out;
    margin-top: 10px;
}

.submit-button:hover {
    background-color: #54463e; /* Darker tone on interaction */
}

.submit-button:active {
    transform: scale(0.99); /* Slight compression click effect */
}

/* ==========================================================================
   Global Footer Section
   ========================================================================== */
footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px 0;
    font-size: 0.9rem;
    color: #948981;
}

/* ==========================================================================
   Responsive Adaptations for Small Mobile Screens
   ========================================================================== */
@media (max-width: 480px) {
    body {
        padding: 10px;
    }
    
    header h1 {
        font-size: 1.8rem;
    }
    
    .form-container {
        padding: 20px;
        border-radius: 8px;
    }
}


/* Container for the bottom section */
.neighbor-footer-section {
  text-align: center;
  padding: 40px 20px;
  background-color: #f9fbfb; /* Very soft light teal background tint */
  border-top: 1px solid #e0e8ea;
  margin-top: 50px; /* Pushes the section down away from your main content */
}

.neighbor-footer-section h3 {
  color: #1a1a1a;
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.neighbor-footer-section p {
  color: #555555;
  margin-bottom: 25px;
}

/* THE HORIZONTAL CARD ROW */
.neighbor-card-row {
  display: flex;
  flex-direction: column; /* Stacks vertically on small phones */
  justify-content: center;
  gap: 15px;
  max-width: 900px;
  margin: 0 auto;
}

/* Individual Mini Link Cards */
.neighbor-card-row .mini-card {
  flex: 1; /* Makes all horizontal cards identical in width */
  display: block;
  background-color: #ffffff;
  color: #007791; /* Matches your vet care medical teal */
  text-decoration: none;
  font-weight: bold;
  padding: 15px 20px;
  border: 1px solid #e0e8ea;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
  transition: all 0.2s ease-in-out;
}

/* Interactive Hover State */
.neighbor-card-row .mini-card:hover {
  background-color: #007791;
  color: #ffffff; /* Inverts text to white */
  border-color: #007791;
  transform: translateY(-2px); /* Click-me floating lift */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Tablet & Desktop Layout - Snaps side-by-side */
@media (min-width: 600px) {
  .neighbor-card-row {
    flex-direction: row; /* Arranges cards horizontally side-by-side */
  }
}

/* ==========================================
   SILO CONTENT CLASS (Services List Section)
   ========================================== */
.silo-content {
  padding: 40px 20px;
  background-color: #ffffff;
  margin-bottom: 20px;
}

.silo-content h2 {
  color: #1a1a1a;
  font-size: 1.8rem;
  margin-bottom: 15px;
  border-bottom: 2px solid #e0f7fa; /* Light teal accent under title */
  padding-bottom: 8px;
}

.silo-content p {
  font-size: 1.05rem;
  color: #333333;
  margin-bottom: 20px;
}

/* Styled bullet points for clear, scannable services */
.silo-content ul {
  list-style-type: none; /* Removes boring standard bullets */
  padding: 0;
  margin: 0;
}

.silo-content li {
  font-size: 1.05rem;
  position: relative;
  padding-left: 30px; /* Leaves room for custom indicator */
  margin-bottom: 15px;
  color: #444444;
}

/* Creates a clean, professional medical teal bullet point indicator */
.silo-content li::before {
  content: "•"; 
  position: absolute;
  left: 10px;
  top: -2px;
  color: #007791; /* Matches your vet care theme */
  font-size: 1.6rem;
}


/* ==========================================
   SILO GEO CLASS (Google Maps & Validation Section)
   ========================================== */
.silo-geo {
  padding: 40px 20px;
  background-color: #f4f9fa; /* Subtle cool background tint */
  border-radius: 8px;
  margin-bottom: 40px;
}

.silo-geo h2 {
  color: #1a1a1a;
  font-size: 1.7rem;
  margin-bottom: 15px;
}

.silo-geo p {
  font-size: 1.05rem;
  color: #444444;
  margin-bottom: 20px;
}

/* Callout block for target zip codes to draw search engine attention */
.silo-geo .zip-codes {
  background-color: #ffffff;
  border: 1px dashed #007791;
  padding: 15px 20px;
  border-radius: 6px;
  font-size: 1rem;
  color: #005662;
  display: inline-block; /* Keeps it tight around text */
}


/* ==========================================
   SILO BOOKING CLASS (Bottom Call to Action Box)
   ========================================== */
.silo-booking {
  text-align: center;
  padding: 50px 30px;
  background: linear-gradient(135deg, #007791 0%, #005662 100%); /* Deep rich medical teal gradient */
  color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

.silo-booking h2 {
  color: #ffffff;
  font-size: 2rem;
  margin-bottom: 12px;
}

.silo-booking p {
  color: #e0f7fa; /* Light teal tinted text for premium readability */
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto 25px auto;
}

/* Secondary Button - Request an Appointment Online */
.silo-booking .secondary-btn {
  display: inline-block;
  background-color: #ffffff;
  color: #007791;
  font-weight: bold;
  font-size: 1.1rem;
  text-decoration: none;
  padding: 14px 35px;
  border-radius: 30px; /* Sleek capsule pill shape */
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  transition: all 0.2s ease-in-out;
}

/* Interactive hover shift for the secondary button */
.silo-booking .secondary-btn:hover {
  background-color: #e0f7fa;
  transform: translateY(-2px); /* Click-me floating lift */
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

.silo-booking .secondary-btn:active {
  transform: translateY(0); /* Drops flat when pressed */
}

/* Master Footer Container */
.main-footer {
  background-color: #222222; /* Dark, professional contrast background */
  color: #dddddd;
  padding: 50px 20px 20px 20px;
  font-size: 0.95rem;
  margin-top: 60px; /* Pushes footer away from page content */
}

/* 3-Column Desktop Grid Layout */
.footer-container {
  display: flex;
  flex-direction: column; /* Columns stack vertically on mobile */
  gap: 40px;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-col {
  flex: 1;
}

.footer-col h3 {
  color: #ffffff;
  font-size: 1.15rem;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-col p {
  line-height: 1.6;
  margin-bottom: 10px;
}

/* Local SEO text link styling inside the footer copy */
.footer-col a {
  color: #e0f7fa;
  text-decoration: underline;
}

.footer-col a:hover {
  color: #ffffff;
}

/* Urgent Alert Note */
.footer-urgent {
  color: #ffb3b3; /* Soft attention-grabbing red tint */
  font-weight: bold;
  font-size: 0.9rem;
}

/* Column Link Lists */
.footer-links {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: #cccccc;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #007791; /* Highlights with your core medical teal on hover */
  text-decoration: underline;
}

/* Copyright Bottom Bar Layout */
.footer-bottom {
  text-align: center;
  border-top: 1px solid #333333;
  margin-top: 40px;
  padding-top: 20px;
  font-size: 0.85rem;
  color: #888888;
}

/* Desktop Responsiveness - Snaps columns side-by-side */
@media (min-width: 768px) {
  .footer-container {
    flex-direction: row; /* Aligns columns horizontally */
    justify-content: space-between;
  }
}

.simple-hero {
margin-top: 10px !important; /* Resets the margin because the menu is no longer floating on top */
    padding: 10px;
}

.hero-image {
  width: 100%;       /* Makes the image expand to fill the container width */
  height: auto;      /* Keeps the image proportions perfectly accurate */
  border-radius: 8px; /* Optional: gives your photo nice, softly rounded corners */
  margin-bottom: 20px; /* Creates a clean gap between the image and the text below it */
}

/* ===================================================
   MOBILE RESPONSIVE NAVIGATION FIX (For All Phones)
   =================================================== */
@media (max-width: 767px) {
  /* Forces the navigation bar layout to wrap content safely */
  .navbar {
     position: relative !important; /* Unfixes the menu so it stays at the top of the page content */
    top: auto;
    left: auto;
    width: 100%;
    display: flex;
    flex-direction: column; 
    align-items: center;
    padding: 15px;
    gap: 15px;
  }

  /* Unhides the links and forces them to wrap into a clean menu */
  .nav-links {
    display: flex;
    flex-direction: row;    /* Lays them out side-by-side */
    flex-wrap: wrap;        /* Safely drops links to a new line if they run out of room */
    justify-content: center;
    align-items: center;
    gap: 12px;              /* Perfect finger-tapping spacing */
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  /* Adjusts the text size so everything fits on a small display screen */
  .nav-links a {
    font-size: 0.95rem;
    padding: 6px 10px;
    display: inline-block;
  }

  /* Ensures your emergency call button stands out sharply on a phone screen */
  .nav-links .cta-btn {
    font-size: 0.95rem;
    padding: 8px 16px;
    margin-top: 0;
  }
	
	/* NEW MOBILE LAYOUT FIX: Pushes the top content down below the floating menu */
  .hero-clarksville {
 margin-top: 10px !important; /* Resets the margin because the menu is no longer floating on top */
    padding: 10px;
}