body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; line-height: 1.6; color: #333; }
.container { width: 90%; max-width: 1200px; margin: auto; overflow: visible; }
header { background: #589199; color: #fff; padding-top: 30px; min-height: 70px; border-bottom: #e67e22 3px solid; }
header h1 { float: left; margin: 0; }
header h1 a { color: inherit; text-decoration: none; font-size: inherit; text-transform: none; }
header nav { float: right; margin-top: 10px; }
header ul { margin: 0; padding: 0; list-style: none; }
header li { display: inline; margin-left: 20px; }
header a { color: #fff; text-decoration: none; text-transform: uppercase; font-size: 16px; }

.banner { width: 100%; overflow: hidden; }
.banner img { width: 100%; height: auto; max-height: 270px; display: block; object-fit: cover; }

.gallery-section { padding: 50px 0; background: #f9f9f9; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); gap: 20px; justify-content: center; }
.gallery-item { background: #fff; border-radius: 8px; overflow: hidden; }
.gallery-item img { width: 100%; height: auto; display: block; object-fit: cover; }

.hero { background: #ecf0f1; padding: 20px 0; text-align: center; }
.btn { display: inline-block; background: #e67e22; color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 5px; margin-top: 10px; }

#services { padding: 20px 0; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card { background: #f4f4f4; padding: 10px; text-align: center; border-radius: 8px; display: block; color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.service-card .service-img { width: 50%; max-width: 200px; height: auto; display: block; margin: 0 auto 10px; border-radius: 8px; object-fit: cover; }
.service-action { text-align: center; margin-top: 10px; }
.about { padding: 50px 0; background: #f9f9f9; }
.about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; text-align: center; justify-content: center; }
.about-card { background: #fff; padding: 20px; border-radius: 8px; text-align: center; justify-content: center; }
.about-card img { width: 100%; height: auto; border-radius: 8px; object-fit: cover; }
.about-card p { margin: 10px 0 0; font-size: 0.95rem; color: #666; }

.groomer-img { float: left; margin-right: 15px; margin-bottom: 10px; width: 350px; max-width: 100%; height: auto; border-radius: 8px; }

footer { background: #589199; color: #fff; text-align: center; padding: 30px 0; margin-top: 20px; }
footer a { color: #1caade; }

.services-page { padding: 20px 0; }
.service-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; grid-auto-rows: auto; }
.service-detail { background: #f4f4f4; padding: 20px; border-radius: 8px; text-align: center; }
.service-detail-img { width: 100%; height: 300px; max-height: 300px; display: block; margin: 0 0 15px; border-radius: 8px; object-fit: cover; }

.contact-page { padding: 20px 0; }
.contact-content { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-top: 30px; }
.contact-form { background: #f4f4f4; padding: 30px; border-radius: 8px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: #333; }
.form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-family: inherit; font-size: 1rem; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #e67e22; box-shadow: 0 0 5px rgba(230, 126, 34, 0.3); }
.contact-info { background: #f9f9f9; padding: 20px; border-radius: 8px; height: fit-content; }
.contact-info h3 { margin-top: 0; color: #589199; }
.contact-info p { margin: 15px 0; line-height: 1.6; }
.contact-info a { color: #1caade; text-decoration: none; }

section a { color: #1caade; }

nav a {
  text-decoration: none; /* Remove default underlines from all links */
  padding-bottom: 5px;
}

.active {
  border-bottom: 3px solid #e67e22; /* Adds a colored bar under the text */
  color: #e67e22;
}

@media(max-width: 768px) {
    header h1, header nav { float: none; text-align: center; }
    header li { display: block; margin: 20px 0; }
    .service-grid, .about-gallery, .gallery-grid, .service-list { grid-template-columns: 1fr; }
    .service-detail-img { height: auto; }
    .groomer-img { float: none; display: block; margin: 0 auto 15px; width: 70%; height: auto; }
    .container { width: 95%; }
    .contact-content { grid-template-columns: 1fr; }
}