/* Custom Font */
@font-face {
     font-family: "ZoomiesCustom";
     src: url("/backend/Zoomies-Regular.woff2") format("woff2");
}

/* html body */
html,
body {
     margin: 0;
     padding: 0;
     width: 100%;
     overflow-x: hidden;
}

* {
     box-sizing: border-box;
}

/* Root */
:root {
     /* Global Colors */
     --zoomies-primary: #0097f5;
     --zoomies-secondary: #f68a1e;
     --text: #1a1a1b;
     --accent-main: #c26510;
     --accent-alt: #007bca;
     --bg-main: #f4f7f9;
     --bg-alt: #e4e6eb;
     --white: #ffffff;
     --shadow-main: #1a2a3a;
     --shadow-alt: #452100;

     /* Global Fonts */
     --font-accent: "ZoomiesCustom", cursive;
     --font-primary: "Permanent Marker", sans-serif;
     --font-secondary: "Patrick Hand", serif;
     --font-text: "Urbanist", serif;
}

/* Headers & Text */
h1 {
     font-family: var(--font-primary);
     color: var(--zoomies-secondary);
     font-size: 60px;
     letter-spacing: 1.5px;
     font-weight: 200;
     margin-bottom: 0;
     margin-top: 10px;
     text-shadow: 3px 3px 4px var(--shadow-main);
}
h2 {
     font-family: var(--font-secondary);
     color: var(--zoomies-primary);
     font-size: 55px;
     font-weight: 600;
     margin: 5px;
     text-shadow: 2px 2px 4px var(--shadow-alt);
}
h3 {
     font-family: var(--font-secondary);
     color: var(--zoomies-secondary);
     font-size: 50px;
     line-height: 1.1em;
     font-weight: 600;
     margin: 10px;
     text-shadow: 3px 3px 4px var(--shadow-main);
}
h4 {
     font-family: var(--font-accent);
     color: var(--zoomies-primary);
     font-size: 45px;
     margin: 10px;
     text-shadow: 2px 2px 5px var(--shadow-alt);
}
h5 {
     font-family: var(--font-accent);
     color: var(--zoomies-secondary);
     font-size: 38px;
     letter-spacing: 0.04em;
     margin: 10px;
     text-shadow: 2px 2px 3px var(--shadow-main);
}
h6 {
     font-family: var(--font-accent);
     color: var(--text);
     font-size: 32px;
     letter-spacing: 0.04em;
     word-spacing: 0.08em;
     text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
p {
     font-family: var(--font-text);
     color: var(--text);
     font-size: 18px;
     line-height: 1.5em;
}
li {
     font-family: var(--font-text);
     color: var(--text);
     font-size: 18px;
     line-height: 1.2em;
}
a {
     color: var(--zoomies-primary);
     text-decoration: none;
     font-weight: bold;
}
a:hover {
     color: var(--accent-alt);
     text-decoration: underline;
}

body {
     background-color: var(--bg-main);
}

/* Layout */
.site-header {
     background: linear-gradient(
          to bottom,
          var(--zoomies-secondary),
          var(--bg-main)
     );
     padding: 40px 20px;
     width: 100%;
}
.header-content {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 30px;
     max-width: 1200px;
     margin: 0 auto;
}
.header-logo {
     max-height: 140px;
     width: auto;
}
.header-titles {
     text-align: center;
}
.title {
     font-family: var(--font-primary);
     color: var(--zoomies-primary);
     font-size: 72px;
     line-height: 0.9em;
     letter-spacing: 1.5px;
     font-weight: 400;
     margin-top: 10px;
     text-shadow: 3px 3px 4px var(--shadow-main);
     margin-bottom: 15px;
}
.subtitle {
     font-family: var(--font-accent);
     color: var(--text);
     font-size: 45px;
     letter-spacing: 0.04em;
     word-spacing: 0.08em;
     text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
     margin: 0;
}
.container {
     display: flex;
     align-items: flex-start;
     max-width: 100%;
     margin: 0 auto;
     padding: 20px 60px;
     gap: 10px;
}
.content-area {
     flex-grow: 1;
     text-align: center;
     margin: 0 40px;
}

/* Navigation Menu */
.side-nav {
     width: 180px;
     flex-shrink: 0;
     border: 4px solid var(--zoomies-secondary);
     border-radius: 20px;
     padding-left: 15px;
     background-color: var(--bg-alt);
}
.side-nav ul {
     list-style-type: none;
     padding-left: 0;
     text-shadow: 1px 1px 1px var(--shadow-main);
}
.side-nav ul ul {
     padding-left: 20px;
     font-size: 30px;
}
.side-nav li {
     margin-bottom: 10px;
     font-family: var(--font-secondary);
     color: var(--zoomies-primary);
     font-size: 22px;
}
.side-nav a:hover {
     color: var(--shadow-alt);
     padding-left: 5px;
     transition: 0.3s;
}
.blog-search {
     width: 100%;
     margin: 1rem 0 0 0;
}

.blog-search input {
     width: 100%;
     padding: 6px 8px;
     font-size: 0.9rem;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
}
.nav-tools {
     padding: 0 1rem;
     margin-top: 1rem;
}

/* Hide mobile nav on desktop */
.mobile-nav {
     display: none;
}

/* Desktop nav stays as-is */
.desktop-nav {
     display: block;
}

/* MOBILE BREAKPOINT */
@media (max-width: 768px) {
     /* Hide desktop sidebar */
     .desktop-nav {
          display: none;
     }

     /* Show mobile nav */
     .mobile-nav {
          display: block;
          padding: 10px 20px;
     }

     .hamburger {
          font-size: 2.2rem;
          background: none;
          border: none;
          cursor: pointer;
          color: var(--zoomies-primary);
          text-shadow: 1px 1px 1px var(--shadow-main);
     }

     .mobile-menu {
          background: var(--bg-alt);
          border: 4px solid var(--zoomies-secondary);
          border-radius: 20px;
          padding: 20px;
          margin-top: 10px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
     }

     .mobile-menu.hidden {
          display: none;
     }

     .mobile-menu ul {
          list-style: none;
          padding: 0;
          margin: 0;
     }

     .mobile-menu li {
          margin-bottom: 15px;
          font-family: var(--font-secondary);
          font-size: 22px;
          color: var(--zoomies-primary);
          text-shadow: 1px 1px 1px var(--shadow-main);
     }

     .mobile-menu a {
          text-decoration: none;
          color: var(--zoomies-primary);
     }

     .mobile-menu a:hover {
          color: var(--shadow-alt);
          padding-left: 5px;
          transition: 0.3s;
     }

     .mobile-section {
          font-size: 26px;
          margin-top: 10px;
          margin-bottom: 5px;
          font-weight: bold;
     }

     .mobile-submenu {
          padding-left: 20px;
     }
}

/* Landing Page */
.hero-section {
     text-align: left;
     margin: 0 10px 10px 0;
     overflow: hidden;
     border: 4px solid #000000;
     border-radius: 20px;
     background-color: var(--bg-alt);
     padding: 5px 25px 10px 35px;
     box-sizing: border-box;
}
.hero-section p {
     margin: 30px;
}
.hero-section h2 {
     text-align: center;
     margin-bottom: 5px;
}
.dog-hero-img {
     float: right;
     width: 100%;
     max-width: 360px;
     height: auto;
     margin: 0 10px 5px 15px;
}
.team-section {
     width: 100%;
}
.team-container {
     display: flex;
     align-items: center;
     gap: 40px;
     padding: 40px;
     margin-top: -10px;
}
.team-text {
     flex: 1;
     text-align: center;
     margin: 0 40px 0 20px;
}
.team-gallery {
     flex: 1;
     display: flex;
     gap: 35px;
     padding: 30px;
}
.gallery-img {
     width: 50%;
     height: auto;
     border: 6px solid var(--zoomies-primary);
     border-radius: 15px;
     object-fit: cover;
}

/* Footer */
.site-footer {
     background: linear-gradient(
          to bottom,
          var(--bg-main),
          var(--zoomies-primary)
     );
     color: var(--white);
     padding: 40px 20px;
     text-align: center;
     margin-top: 20px;
}
.footer-icons {
     display: flex;
     justify-content: center;
     gap: 30px;
     margin-bottom: 20px;
}
.footer-link img {
     width: 60px;
     height: 60px;
     transition: transform 0.3s ease;
}
.footer-link img:hover {
     transform: scale(1.1);
}
.footer-text {
     font-family: var(--font-text);
     font-size: 16px;
     max-width: 800px;
     margin: 0 auto;
     line-height: 1.6em;
     color: var(--white);
}

/* Meet the Team Page */
.intro {
     margin-top: 0px;
     margin-bottom: 20px;
     text-align: center;
     display: block;
}

/* Why Choose Us Section */
.why-choose-us {
     background: var(--bg-alt);
     border: 2px solid var(--zoomies-secondary);
     border-radius: 25px;
     padding: 20px 30px;
     margin: 40px auto;
     text-align: right;
     box-shadow: 4px 4px 8px var(--shadow-main);
}
.why-choose-us h3 {
     margin-top: 0;
     margin-bottom: 20px;
     text-shadow: 2px 2px 4px var(--shadow-alt);
}
.why-choose-us p {
     margin: 0 auto 20px auto;
     line-height: 1.5em;
}

.team-area {
     display: flex;
     flex-direction: column;
     gap: 80px;
     margin: 0 90px;
}

/* Captions centered above the row */
.member-captions-left {
     text-align: left;
     margin-bottom: 20px;
}
.member-captions-right {
     text-align: right;
     margin-bottom: 20px;
}

.member-caption-1 {
     font-family: var(--font-primary);
     color: var(--zoomies-primary);
     font-size: 28px;
     margin: 0;
}

.member-caption-2 {
     font-family: var(--font-text);
     color: var(--zoomies-primary);
     text-transform: uppercase;
     font-weight: 600;
     margin: 0;
}

/* Two-column layout */
.member-row {
     display: flex;
     align-items: flex-start;
     gap: 40px;
}

/* Reverse layout for alternating members */
.team-member.reverse .member-row {
     flex-direction: row-reverse;
}

/* Image */
.member-image-wrap {
     width: 300px;
     border: 8px solid #000;
     border-radius: 30px;
     overflow: hidden;
     flex-shrink: 0;
}

.member-img {
     width: 100%;
     display: block;
}

/* Text block */
.member-text-left {
     flex: 1;
     text-align: left;
}
.member-text-right {
     flex: 1;
     text-align: right;
}

.member-text-left p,
.member-text-right p {
     margin-bottom: 15px;
     line-height: 1.6;
}

/* Paw icon aligned with top of text */
.paw-icon-left,
.paw-icon-right {
     width: 30px;
     margin-bottom: 10px;
     display: inline-block; /* <-- THIS is the key */
}

/* Responsive */
@media (max-width: 900px) {
     .member-row {
          flex-direction: column;
          text-align: center;
     }

     .team-member.reverse .member-row {
          flex-direction: column;
     }

     .member-text {
          text-align: center;
     }

     .paw-icon {
          margin-left: auto;
          margin-right: auto;
     }
}

/* Gradient Boxes */
.orange-gradient-box {
     background: linear-gradient(
          180deg,
          var(--zoomies-secondary) 0%,
          var(--accent-main) 100%
     );
     color: var(--white);
     padding: 20px;
     margin: 40px auto;
     max-width: 40%;
     text-align: center;
}
.orange-gradient-box h3 {
     color: var(--white);
     margin-bottom: 10px;
     margin-top: 10px;
}
.orange-gradient-box p {
     color: var(--white);
     margin-bottom: 15px;
     line-height: 1.3em;
}
.blue-gradient-box {
     background: linear-gradient(
          180deg,
          var(--zoomies-primary) 0%,
          var(--accent-alt) 100%
     );
     color: var(--white);
     padding: 25px;
     border-radius: 25px;
     margin: 40px auto;
     max-width: 450px;
     text-align: center;
}
.blue-gradient-box h3 {
     color: var(--white);
     margin-bottom: 10px;
     margin-top: 10px;
}
.blue-gradient-box p {
     color: var(--white);
     margin-bottom: 15px;
     line-height: 1.3em;
}

/* Pack Gallery */
.pack-gallery {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     align-items: flex-start;
     gap: 35px;
     margin-top: 40px;
}
.gallery-item {
     position: relative;
     width: 300px;
     height: 300px;
     overflow: hidden;
     border-radius: 25px;
     line-height: 0;
}
.gallery-item .gallery-img {
     width: 100%;
     height: 100%;
     display: block;
     transition: transform 0.5s ease;
     border: none;
}
.gallery-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.7);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     opacity: 0;
     transition: opacity 0.3s ease;
     border-radius: 25px;
     padding: 15px;
     box-sizing: border-box;
}

.overlay-text p {
     color: var(--white);
     text-align: center;
     font-size: 14px;
     line-height: 1.4em;
     margin: 0;
}
.overlay-name {
     text-transform: uppercase;
     font-family: var(--font-accent);
     font-weight: 700;
     margin-bottom: 15px;
     color: var(--white);
     font-size: 34px;
}
.gallery-item:hover .gallery-overlay {
     opacity: 1;
}
.gallery-item:hover .gallery-img {
     transform: scale(1.1);
}

/* Review Page */
.reviews-grid {
     column-count: 3;
     column-gap: 30px;
     margin: 10px 60px;
}
.review-card {
     border: 4px solid var(--zoomies-secondary);
     border-radius: 20px;
     padding: 30px;
     background-color: var(--bg-main);
     display: block;
     break-inside: avoid;
     margin-bottom: 30px;
}
.stars {
     text-align: center;
     margin-bottom: 15px;
}
.stars img {
     width: 120px;
     height: auto;
}
.review-text {
     text-align: center;
     font-family: var(--font-text);
     font-style: italic;
     line-height: 1.5em;
     margin-bottom: 20px;
}
.reviewer-name {
     text-align: right;
     color: var(--zoomies-primary);
     font-family: var(--font-primary);
     font-size: 24px;
     margin: 0;
     text-shadow: none;
}
.cta-section {
     text-align: center;
}
@media (max-width: 1000px) {
     .reviews-grid {
          column-count: 2;
     }
}
@media (max-width: 600px) {
     .reviews-grid {
          column-count: 1;
     }
}

/* Contact Us Page */
.contact-form-container {
     max-width: 800px;
     margin: 60px auto;
     border: 6px solid var(--zoomies-secondary);
     border-radius: 30px;
     padding: 40px;
     background-color: var(--white);
}
.contact-form-container h3 {
     text-align: center;
     margin-bottom: 25px;
}
.form-row {
     column-count: 2;
     column-gap: 15px;
}
.field-label {
     text-align: left;
     margin-bottom: 8px;
     font-weight: bold;
     color: var(--text);
     font-family: var(--font-secondary);
     font-size: 20px;
     display: block;
}
.zoomies-form input,
.zoomies-form textarea {
     width: 100%;
     padding: 12px;
     margin-bottom: 25px;
     border: 2px solid var(--bg-alt);
     border-radius: 10px;
     font-family: var(--font-text);
     font-size: 16px;
     box-sizing: border-box;
}
.zoomies-form ::placeholder {
     color: rgba(26, 26, 27, 0.4);
}
.button-container {
     text-align: center;
}
.form-submit-btn {
     background-color: var(--zoomies-primary);
     color: var(--white);
     font-family: var(--font-primary);
     font-size: 24px;
     padding: 10px 40px;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition:
          transform 0.3s ease,
          background-color 0.3s ease;
}
.form-submit-btn:hover {
     background-color: var(--accent-alt);
     transform: scale(1.05);
}

/* Services Pages */
.steps-container {
     background-color: var(--bg-alt);
     border: 2px solid var(--zoomies-primary);
     border-radius: 20px;
     padding: 30px 40px;
     margin: 20px auto;
     max-width: 80%;
     text-align: left;
}
.steps-container h3 {
     margin-top: 0;
     margin-bottom: 20px;
     text-align: center;
}
.step-list {
     list-style-position: outside;
     padding-left: 30px;
     margin: 0;
}
.step-list li {
     font-family: var(--font-text);
     font-size: 18px;
     margin-bottom: 10px;
     padding-left: 10px;
}
.step-list li::marker {
     font-family: var(--font-accent);
     color: var(--zoomies-secondary);
     font-weight: bold;
     font-size: 22px;
}

.packages-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
     gap: 15px;
     margin-top: 20px;
     max-width: 90%;
     margin-left: auto;
     margin-right: auto;
}
.package-card {
     background-color: var(--white);
     border: 3px solid var(--zoomies-secondary);
     border-radius: 20px;
     padding: 10px;
     text-align: center;
     display: flex;
     flex-direction: column;
     justify-content: center;
     transition: transform 0.3s ease;
}
.package-name {
     margin-top: 0;
     margin-bottom: 0px;
     color: var(--zoomies-primary);
     font-family: var(--font-accent);
     font-size: 32px;
     text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.package-price {
     font-size: 16px;
     margin-top: 0;
     margin-bottom: 0px;
}
.package-info {
     font-size: 16px;
     font-style: italic;
     margin-top: 0;
     margin-bottom: 0px;
}
.package-time {
     font-size: 16px;
     font-weight: bold;
     margin-top: 0;
     margin-bottom: 0px;
}

.ao-container {
     background-color: var(--bg-alt);
     border: 2px solid var(--zoomies-primary);
     border-radius: 35px;
     padding: 10px;
     max-width: 70%;
     margin-top: 40px;
     margin-left: auto;
     margin-right: auto;
}
.ao-container h3 {
     color: var(--zoomies-secondary);
     margin-top: 0;
     margin-bottom: 5px;
     text-align: center;
}
.ao-grid {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 15px;
}
.ao-options {
     text-align: center;
}
.ao-title {
     font-family: var(--font-accent);
     font-size: 25px;
     margin-bottom: 2px;
}
.ao-price {
     font-size: 16px;
     font-weight: bold;
     margin-top: 0px;
     margin-bottom: 0px;
}
.ao-about {
     font-size: 16px;
     margin-top: 0px;
     margin-bottom: 10px;
     font-style: italic;
}

.book-button {
     background-color: var(--white);
     color: var(--accent-main);
     font-family: var(--font-primary);
     font-size: 24px;
     padding: 10px 40px;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     transition:
          transform 0.3s ease,
          background-color 0.3s ease;
     display: inline-block;
     text-decoration: none;
}
.book-button:hover {
     background-color: var(--bg-alt);
     transform: scale(1.05);
}

.bottom-flex {
     display: flex;
     justify-content: center;
     align-items: flex-start;
     gap: 30px;
     margin-top: 50px;
     max-width: 90%;
     margin-left: auto;
     margin-right: auto;
}
/* Ensure both boxes behave nicely side-by-side */
.bottom-flex > * {
     flex: 1 1 0;
}

.blue-cta,
.details-links {
     padding: 25px 30px;
     border-radius: 25px;
}
/* Call to Action */
.blue-cta {
     background: linear-gradient(
          180deg,
          var(--zoomies-primary) 0%,
          var(--accent-alt) 100%
     );
     color: var(--white);
     text-align: center;
}
.blue-cta h3 {
     color: var(--white);
     margin-bottom: 10px;
     margin-top: 10px;
}
.blue-cta p {
     color: var(--white);
     margin-bottom: 15px;
     line-height: 1.3em;
}
/* Want More Details? */
.details-links {
     background-color: var(--bg-alt);
     border: 2px solid var(--zoomies-secondary);
     text-align: center;
}
.details-links h4 {
     margin-top: 0;
     margin-bottom: 10px;
     color: var(--zoomies-primary);
     font-family: var(--font-accent);
     font-size: 45px;
     text-shadow: 1px 1px 2px var(--shadow-main);
}
.details-links ul {
     list-style: none;
     padding: 0;
     margin: 0;
}
.details-links li {
     margin: 8px 0;
}
.details-links a {
     color: var(--zoomies-secondary);
     font-family: var(--font-primary);
     font-size: 22px;
     text-decoration: none;
     transition: color 0.2s ease;
     text-shadow: 1px 1px 1px var(--shadow-alt);
}
.details-links a:hover {
     color: var(--zoomies-primary);
     text-decoration: underline;
     text-shadow: 1px 1px 1px var(--shadow-main);
}
/* Responsive: stack vertically on smaller screens */
@media (max-width: 900px) {
     .bottom-flex {
          flex-direction: column;
          max-width: 100%;
     }
}

/* Blog Landing Page */
.blog-filter-container {
     text-align: center;
     margin: 20px 0 40px 0;
}

/* Dropdown Category Filter */
.filter-dropdown {
     position: relative;
     display: inline-block;
}
.filter-btn {
     background-color: var(--zoomies-secondary);
     color: var(--white);
     padding: 10px 18px;
     font-family: var(--font-primary);
     font-size: 20px;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     margin: 5px;
}
.dropdown-content {
     display: none;
     position: absolute;
     background-color: var(--white);
     min-width: 220px;
     box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
     border-radius: 15px;
     z-index: 1;
     overflow: hidden;
     left: 50%;
     transform: translateX(-50%);
}
.dropdown-content a {
     color: var(--text);
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     font-family: var(--font-text);
     text-align: left;
     transition: background 0.3s;
}
.dropdown-content a.sub-cat::before {
     content: "— ";
     color: var(--zoomies-secondary);
     font-weight: bold;
}
.dropdown-content a.sub-cat {
     padding-left: 35px;
     font-size: 15px;
     opacity: 0.8;
     position: relative;
}

/* Hover Effects in Dropdown */
.dropdown-content a:hover {
     background-color: var(--bg-alt);
     color: var(--zoomies-primary);
}
.filter-dropdown:hover .dropdown-content {
     display: block;
}
.filter-dropdown:hover .filter-btn {
     background-color: var(--accent-main);
}

/* Blog Grid */
.blog-main-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 35px;
     margin: 50px;
}
.blog-main-grid img {
     width: 100%;
     height: auto;
     object-fit: cover;
     border-radius: 20px;
     display: block;
}

/* Force all featured images to the same width */
.featured-image-wrap {
     width: 100%;
     aspect-ratio: 1 / 1; /* Keeps them at a consistent 600x400 ratio */
     overflow: hidden; /* Crops any overflow if the image is too tall */
     border-radius: 8px; /* Optional: gives a polished, rounded look */
}

.featured-image-wrap img {
     width: 100%; /* Scales the image to the full width of the container */
     height: 100%; /* Scales the image to the full height of the container */
     object-fit: cover; /* Magic trick: centers and crops without stretching */
     display: block;
}

.post-content {
     max-width: 1000px;
     margin: 0 auto;
     padding: 20px;
     text-align: left;
}

.content-area h1 {
     text-align: center;
     width: 100%;
}
.blog-sub {
     font-family: var(--font-accent);
     color: var(--text);
     font-size: 38px;
     letter-spacing: 0.04em;
     word-spacing: 0.08em;
     font-weight: 500;
     text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
     text-align: center;
}

.post-meta {
     margin-bottom: 30px; /* Adds breathing room before the article starts */
     font-style: italic; /* Optional: gives the date/author a distinct look */
     text-align: center;
}
.post-image-right {
     float: right;
     margin: 0 0 0 25px;
     max-width: 40%;
     height: auto;
     border-radius: 15px;
     vertical-align: top;
}
.post-content::after {
     content: "";
     clear: both;
     display: table;
}

.post-content h6 {
     font-family: var(--font-accent);
     color: var(--text);
     font-size: 28px; /* Slightly smaller helps it feel like a "sub-title" */
     line-height: 1em; /* This is the magic fix for vertical gaps */
     letter-spacing: 0.02em; /* Resetting this prevents the "stretched" look */
     word-spacing: 0.5em; /* Resetting this keeps words together */
     margin-top: 5px; /* Manually control the gap from the name above */
     margin-bottom: 5px; /* Manually control the gap to the text below */
     text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}
.post-content h5 {
     margin-top: 5px;
     margin-bottom: 5px;
}
.post-image-left {
     float: left;
     margin: 0 25px 0 0;
     max-width: 40%;
     height: auto;
     border-radius: 15px;
     vertical-align: top;
}

.form-boxes {
     border: 4px solid var(--zoomies-primary);
     border-radius: 20px;
     padding: 10px;
     background-color: var(--bg-main);
     text-align: center;
     margin-top: 10px;
     margin-bottom: 10px;
}

/* Service Guides */
/* Guide Navigation Dropdown */
.guide-nav-container {
     text-align: center;
     margin: 20px 0 40px 0;
}
.guide-dropdown {
     position: relative;
     display: inline-block;
}
.guide-btn {
     background-color: var(--zoomies-primary); /* Zoomies blue */
     color: var(--white);
     padding: 10px 22px;
     font-family: var(--font-primary);
     font-size: 18px;
     border: none;
     border-radius: 50px; /* round like the blog filter */
     cursor: pointer;
}
.guide-dropdown-content {
     display: none;
     position: absolute;
     background-color: var(--white);
     min-width: 220px;
     box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
     border-radius: 15px;
     z-index: 1;
     overflow: hidden;
     left: 50%;
     transform: translateX(-50%);
}
.guide-dropdown-content a {
     color: var(--text);
     padding: 12px 16px;
     text-decoration: none;
     display: block;
     font-family: var(--font-text);
     text-align: left;
     transition: background 0.3s;
}
.guide-dropdown-content a:hover {
     background-color: var(--bg-alt);
     color: var(--zoomies-primary);
}
.guide-dropdown:hover .guide-dropdown-content {
     display: block;
}
.guide-dropdown:hover .guide-btn {
     background-color: var(
          --accent-alt
     ); /* same hover behavior as blog filter */
}
/* Disable the current guide link */
.current-guide {
     pointer-events: none; /* makes it unclickable */
     color: var(--zoomies-primary);
     font-weight: bold;
     opacity: 0.6;
     cursor: default;
}
/* Optional: subtle background so it feels selected */
.current-guide:hover {
     background: none; /* prevents hover highlight */
}

@media (max-width: 900px) {
     .blog-main-grid {
          grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
     }
}
@media (max-width: 600px) {
     .post-image-right {
          float: none;
          max-width: 100%;
          margin: 0 0 20px 0;
     }
     .post-image-left {
          float: none;
          max-width: 100%;
          margin: 0 0 20px 0;
     }
     .blog-main-grid {
          grid-template-columns: 1fr;
     }
}
@media (max-width: 768px) {
     .team-area {
          flex-direction: column;
          gap: 40px;
     }
     .header-content,
     .container,
     .team-container,
     .ao-grid,
     .reviews-grid,
     .packages-grid {
          flex-direction: column; /* Stacks the side-nav and content-area */
          align-items: center;
          text-align: center;
          padding: 20px;
          width: 100%;
          display: flex; /* Ensures they act as flex columns */
     }
     .side-nav {
          width: 100%; /* Makes the menu full width on top */
          margin-bottom: 30px;
     }
     .content-area {
          width: 100%;
     }
}
@media (max-width: 480px) {
     h1 {
          font-size: 38px;
     } /* Shrinks the 'Zoomies' title */
     h2 {
          font-size: 36px;
     }
     h3 {
          font-size: 30px;
     }

     .header-logo {
          max-height: 100px; /* Shrinks the scissors logo */
     }
}