/* 1. Global Reset & Box Model */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Includes padding & border in total width/height */
}

/* 2. Body Settings (Defaults for the entire page) */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333333;             /* Dark charcoal text for readability */
  background-color: #f9f9f9;  /* Off-white background */
  padding: 20px;
}

/* 3. Typography */
h1, h2, h3 {
  color: #111111;
  margin-bottom: 15px;
  font-weight: 600;
}

h1 { font-size: 2.0rem; }
h2 { font-size: 1.5rem; }

/* header columns */
.main-header {
   display: flex; /* Aligns child elements side-by-side */
   justify-content: space-between; /* Pushes columns to far left and far right */
   text-align: left;
   padding: 10px;
   background-color: #e6e6e6;
   vertical-align: text-top;
   border-radius: 15px;
 }

.header-left { width: 70%; }
.header-right { width: 30%; }

/* Optional responsive mobile layout */
@media (max-width: 600px) {
  .main-header {
    flex-direction: column; /* Stacks columns vertically on mobile screens */
    gap: 10px;
  }
}

img {
  object-fit: contain;
  width: 99%;
  height: 99%;
  border-radius: 25px;
}

p {
  margin-bottom: 20px;
  font-size: 1rem;
}

p.services { border: 1px solid #111; background-color: #f4f4f4; border-radius: 12px; padding: 5px; }
p.locations { border: 1px solid #111; background-color: #e6e6e6; border-radius: 12px; padding: 5px; }

/* 4. Links */
a {
  color: #0066cc;
  text-decoration: none;      /* Removes default underline */
}

a:hover {
  text-decoration: underline; /* Adds underline back on hover */
}

/* 5. Layout Container */
.main-container {
  margin: 0 auto;             /* Centers the container on the screen */
  background: #f9f9f9;        /* White background for content card */
  padding: 20px;
}

/* 6. Utility Class (Reusable style) */
.text-center {
  text-align: center;
}