/*
:root {
    --primary-color: #007BFF;
    --secondary-color: #0056b3;
    --text-color: #333333;
    --background-color: #FFFFFF;
    --light-gray: #f4f4f4;
    --font-family: 'Inter', sans-serif;
    --breakpoint-desktop: 992px;
}
*/



:root {
    /* nice green primary and orangy-like yellow as secondary */
    --primary-color: #27AE60;
    --secondary-color: #D68910;
    --text-color: #333333;
    --background-color: #FFFFFF;
    --light-gray: #F2FBF6;

    --font-family: 'Inter', sans-serif;
    --breakpoint-desktop: 992px;
}
    

/*
:root {
    /* readable yellow as primary, green as secondary 
    --primary-color: #F39C12;
    --secondary-color: #16A085;
    --text-color: #2c3e50;
    --background-color: #FFFFFF;
    --light-gray: #ECF0F1;
    --font-family: 'Inter', sans-serif;
    --breakpoint-desktop: 992px;
}
*/

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}


body {
    font-family: var(--font-family);
    color: var(--text-color);
    background-color: var(--light-gray);
}

body.nav-open {
    overflow: hidden;
    height: 100vh;
}



.container {
    max-width: 68.75rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1rem, 5vw, 2rem);
    padding-right: clamp(1rem, 5vw, 2rem);
}
@media (min-width: 1400px) {
    .container {
        max-width: 82.5rem;
    }
}


h1, h2, h3 {
    line-height: 1.2;
    margin-bottom: 1rem;
}

/* ============================================ */
/*                HEADER & NAV                  */
/* ============================================ */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--background-color);
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: 900;
    transition: transform 0.3s ease-in-out;
}

.header--hidden {
    transform: translateY(-100%);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}


.header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;

    opacity: 1;
    transition: opacity 0.2s ease;
}

.header-logo:hover {
    opacity: 0.8;
}

.header-logo img {
    height: 4rem;
    max-width: none;
    width: auto;
    display: block;
    flex-shrink: 0;
}


#hamburger-btn {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}




#hamburger-btn span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

.nav-open #hamburger-btn span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-open #hamburger-btn span:nth-child(2) {
    opacity: 0;
}

.nav-open #hamburger-btn span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

#main-nav {
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    bottom: 0;
    background-color: var(--background-color);
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.nav-open #main-nav {
    transform: translateX(0);
}

#main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#main-nav > ul > li {
    border-bottom: 1px solid var(--light-gray);
}

#main-nav li a {
    display: block;
    padding: 1rem 1.5rem;
    font-size: 1.2rem;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
}

/* === MOBILE ACCORDION & SUBMENU STYLES === */
#main-nav li.has-submenu {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#main-nav li.has-submenu > a {
    flex-grow: 1;
}

.submenu-toggle {
    display: block;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem;
    border-left: 1px solid var(--light-gray);
}

.toggle-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
}
.toggle-icon::before,
.toggle-icon::after {
    content: '';
    position: absolute;
    background-color: var(--primary-color);
    transition: transform 0.3s ease;
    left: 0;
    width: 100%;
    height: 2px;
    top: 50%;
    margin-top: -1px;
}
.toggle-icon::after {
    transform: rotate(90deg);
}
.has-submenu.is-open .toggle-icon::after {
    transform: rotate(0deg);
}

.mega-menu {
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.5s ease-out, visibility 0.5s ease-out;
    padding: 0 !important;
    background-color: #f8f9fa;
}

.has-submenu.is-open > .mega-menu {
    max-height: 1500px;
    visibility: visible;
}

.mega-menu-grid {
    padding: 0 !important;
}

.mega-menu-item {
    border-bottom: 1px solid #e0e0e0;
}
.category-link {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    padding: 1rem 1.5rem !important;
    color: var(--primary-color) !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}
.category-link::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: bold;
    transition: transform 0.3s ease;
}
.mega-menu-item.is-open > .category-link::after {
    content: '−';
}

.content-panel {
    max-height: 0;
    overflow: hidden;
    background: #fff;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    padding: 0 1.5rem;
}

.mega-menu-item.is-open .content-panel {
    max-height: 500px;
    padding: 1rem 1.5rem;
}

.all-services-link {
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: var(--secondary-color) !important;
    margin-bottom: 1rem;
    padding: 0.5rem 0 !important;
    border-bottom: 1px solid #eee;
}

.content-panel ul {
    list-style: none;
    padding: 0 !important;
    margin: 0;
}

.content-panel li a {
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: #333 !important;
    padding: 0.5rem 0 !important;
    padding-left: 1rem !important;
}

/* ============================================ */
/*         DESKTOP NAV & MEGA MENU STYLES       */
/* ============================================ */
@media (min-width: 768px) {

    header .container {
    justify-content: space-between;
}

header .container::after {
    content: '';
    width: 264px;  /* exact same value as logo width */
}

#hamburger-btn,
.submenu-toggle {
    display: none;
}

/* Center navigation links */
#main-nav {
    position: static;
    transform: none;
    height: auto;
    background: none;
    overflow: visible;
    flex-grow: 1; /* Allow nav to take available space */
    display: flex;
    justify-content: center; /* Center the ul inside */
}

#main-nav > ul {
    display: flex;
    gap: 1rem;
    align-items: center;
}

#main-nav > ul > li {
    border-bottom: none;
}

#main-nav li.has-submenu {
    position: relative;
    display: block; /* Revert from flex */
}

#main-nav li a {
    padding: 0.5rem 1rem;
    font-size: 1.3rem;
    position: relative;
}

#main-nav li > a:not(.category-link)::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

#main-nav li:hover > a:not(.category-link)::after {
    width: 100%;
}

/* Mega Menu Styling */
.mega-menu {
    position: absolute;
    top: calc(100% + 35px);
    left: 50%;
    transform: translateX(-50%);
    width: 1000px; /* Wider for two columns */
    max-width: 95vw;
    background-color: var(--background-color);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    padding: 1.5rem !important;
    opacity: 0;
    visibility: hidden;
    max-height: none; /* Override mobile styles */
    transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
    flex-basis: auto;
}

#main-nav li.has-submenu:hover .mega-menu {
    visibility: visible;
    opacity: 1;
    top: calc(100% + 5px); /* Animate downwards */
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1/3 for categories, 2/3 for content */
    gap: 1.5rem;
}

.mega-menu-item {
    display: contents; /* Core of the grid layout */
    border-bottom: none;
}

.category-link {
    grid-column: 1;
    padding: 0.75rem !important;
    border-radius: 5px;
    transition: background-color 0.2s ease;
    font-weight: 700 !important;
    border-bottom: none !important;
}

.category-link::after {
    display: none; /* Hide mobile accordion icon */
}

.mega-menu-item.is-active > .category-link {
    background-color: #eef5ff;
    color: var(--secondary-color) !important;
}

.mega-menu-item:hover > .category-link {
    background-color: #eef5ff;
}

.content-panel {
    grid-column: 2;
   grid-row: 1 / span var(--grid-row-span, 3); /* Variable controls it dynamically via layout file */
    display: none; /* Hide by default */
    max-height: none; /* Override mobile styles */
    background: none;
    padding: 0.5rem !important;
    border-left: 1px solid #eee;
    padding-left: 1.5rem !important;
    overflow: visible;
}

.mega-menu-item.is-active .content-panel {
    display: block; /* Show only for active item */
}

.content-panel ul {
  text-align: left;
}

.content-panel li a {
  padding: 0.5rem 0.5rem !important;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 1.2rem !important;
  font-weight: 400 !important;
}

.content-panel li a:hover {
  background-color: #f4f4f4;
  color: var(--secondary-color) !important;
}
}




/*==========================*/
/*        MAIN CONTENT      */
/*==========================*/

main {
    padding-bottom: 3rem;
}

.content-section {
    padding: 3rem 0;
}

main h2 {
    font-size: 2rem;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 2rem;
}

main p {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    text-align: center;
}

main ul {
    list-style: none;
    padding: 0;
    text-align: center;
    margin-bottom: 2rem;
}

main li {
    margin-bottom: 0,5rem;
}

main a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}

main a:hover {
    border-bottom-color: var(--secondary-color);
}

/*==========================*/
/*       Hero section       */
/*==========================*/


.hero-section {
    position: relative;
    overflow: hidden;
    z-index: 1;

    margin-top: 70px;
    padding: 5rem 0;
    text-align: center;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 62, 80, 0.6);
    z-index: 1;
}

.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* This makes the image cover the area without being distorted */
    object-fit: cover;
    
    /* This is the key for the blurred effect */
    filter: blur(0.5px) brightness(0.95);
    
    /* Make it slightly transparent so the background color shows through */
    opacity: 0.7;
    
    /* Push it behind the text content */
    z-index: -1;

    /* A subtle zoom on hover can look nice (optional) */
    transition: transform 0.4s ease-out;
}

.hero-section h1,
.hero-section .subtitle {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hero-section .container {
    position: relative;
    z-index: 2;
}

/* Optional: Subtle zoom effect */
.hero-section:hover .hero-bg-image {
    transform: scale(1.05);
}

.hero-section h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #FFFFFF;
    overflow-wrap: break-word;
}

.hero-section .subtitle {
    font-size: 1.2rem;
    max-width: 600px;
    margin-bottom: 2rem;
    opacity: 0.8;
    color: rgba(255, 255, 255, 0.9);
}

.cta-button-large {
    display: inline-block;
    background-color: var(--primary-color);
    color: #FFFFFF;
    padding: 1rem 2rem;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

.cta-button-large:hover {
    background-color: #229954;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

/*==========================*/
/*         Card Grid        */
/*==========================*/

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.card {
    background: var(--background-color);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2rem;
    text-align: left;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.card h3 {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.card p {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    margin-bottom: 1.5rem;
}

.card a {
    font-weight: 700;
    margin-top: auto;
}

@media (min-width: 768px) {
    .card {
        text-align: left;
        align-items: flex-start;
    }
    .card p {
        text-align: left;
    }
}

/*==========================*/
/*          FOOTER          */
/*==========================*/

footer {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding: 4rem 0 2rem 0;
    text-align: center;
}

footer p, footer li {
    font-size: 0.95rem;
    opacity: 0.8;
}

footer h3 {
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.footer-logo {
    color: var(--primary-color) !important;
}


footer a, footer a:visited {
    color: #ecf0f1;
    text-decoration: none;
    transition: color 0.3s ease
}

footer a:hover {
    color: var(--primary-color);
}

.footer-about, .footer-links, .footer-contact {
    margin-bottom: 3rem;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer li {
    margin-bottom: 0.75rem;
}

.footer-bottom {
    text-align: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 0.9rem;
    opacity: 0.6;
}


@media (min-width: 768px) {
    .footer-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem 5 rem;
        align-items: start;
    }

    .footer-about {
        grid-column: 1 / -1;
        text-align: center;
        margin-bottom: 1rem;
    }

    .footer-links {
        text-align: left;
    }

    .footer-contact {
        text-align: right;
    }

    .footer-links, .footer-contact {
        margin-bottom: 0;
    }
}

/* ============================================ */
/*                ABOUT US SECTION              */
/* ============================================ */

.about-section {
    padding-top: 3rem 0;
    position: relative;
}

/* On mobile, stack the columns */
.about-grid {
    display: grid;
    gap: 2rem;
    align-items: center;
}

.about-image-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}
.about-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about-content h2 {
    text-align: center;
}
.about-text-content {
    /* We can reuse the rich text styles from the service page */
    margin-bottom: 2rem;
}
.about-text-content p {
    text-align: center;
    max-width: 100%;
    margin-left: 0;
    font-size: 1.1rem;
}
.about-text-content h1,
.about-text-content h2,
.about-text-content h3 {
    text-align: center;
    margin-bottom: 0.5rem;
}

/* --- Desktop Layout --- */
@media (min-width: 768px) {
    .about-section {
        padding: 3rem 0;
    }
    .about-grid {
        /* Create two equal columns on desktop */
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

@media (min-width: 768px) {
    .about-text-content h1,
    .about-text-content h2,
    .about-text-content h3 {
        text-align: left;
    }
    .about-text-content p {
        text-align: left;
    }
}


/*============================================ */
/*             BACK TO TOP BUTTON              */
/* =========================================== */


#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  color: #2c3e50;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  z-index: 1000;
  
  /* Hide it by default */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

/* The class we will add with JavaScript */
#back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/*============================================ */
/*                MEET THE TEAM                 */
/* ============================================ */

.team-section {
  padding: 3rem 0;
  background-color: var(--light-gray); /* Use the light gray for contrast */
}

/* A reusable subtitle style for sections */
.section-subtitle {
  text-align: center;
  max-width: 600px;
  margin: -1.5rem auto 3rem auto;
  opacity: 0.8;
}

.team-grid {
  display: grid;
  gap: 2rem; /* Space between cards on mobile */
}

.team-card {
  text-align: center;
  background: var(--background-color);
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.07);
}

.team-image-wrapper {
  width: 150px;
  height: 150px;
  border-radius: 50%; /* This makes the image circular */
  margin: 0 auto 1.5rem auto; /* Center the image */
  overflow: hidden; /* Clips the square image into the circle */
  border: 4px solid var(--background-color);
  box-shadow: 0 0 0 4px var(--primary-color);
}

.team-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Prevents the image from being squished */
}

.team-name {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 0.25rem;
}

.team-title {
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 1rem;
}

.team-bio {
  font-size: 0.95rem;
  opacity: 0.7;
  font-style: italic;
}

/* --- The CTA Button --- */
.team-cta-wrapper {
  text-align: center;
  margin-top: 3rem;
}

/* A new "secondary" button style */
.button-secondary {
  display: inline-block;
  background: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  padding: 0.75rem 2rem;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
}

.button-secondary:hover {
  background: var(--primary-color);
  color: var(--background-color);
}

/* ============================================ */
/*             TEAM DESKTOP STYLES              */
/* ============================================ */

@media (min-width: 768px) {
  .team-grid {
    /* On desktop, create two columns */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
}


/*============================================ */
/*            LOCATION & CONTACT                */
/* ============================================ */

.location-section {
  padding: 3rem 0;
  /* Use a white background to transition smoothly to the footer */
  background-color: var(--light-gray); 
}

/* On mobile, stack the map and info */
.location-grid {
  display: grid;
  gap: 2rem;
}

.map-container {
  /* Give the map a nice card-like appearance */
  border-radius: 12px;
  overflow: hidden; /* This clips the iframe corners to match the border-radius */
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  /* Ensure the iframe doesn't have extra space */
  line-height: 0; 
}

.map-container iframe {
  /* Make the iframe responsive and remove the default border */
  width: 100%;
  height: 400px;
  border: 0;
}

.location-info h3 {
  font-size: 1.8rem;
  color: var(--primary-color);
  margin-bottom: 2rem;
  text-align: center;
}

.info-block {
  margin-bottom: 1.5rem;
}

.info-block strong {
  display: block;
  font-weight: 700;
  font-size: 1.1rem;
  color: #2c3e50;
  margin-bottom: 0.25rem;
  text-align: center;
}

.info-block p {
  /* Reset paragraph styles for this section */
  text-align: left;
  max-width: 100%;
  margin: 0;
  line-height: 1.6;
  text-align: center;
}

@media (min-width: 768px) {
  .info-block p, .info-block strong, .location-info h3 {
    text-align: left;
  }
}

.phone-link {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-color);
  text-decoration: none;
}

/* Center the button on mobile */
.location-info .cta-button-large {
  display: block; /* Make it take up full width */
  text-align: center;
  margin-top: 2rem;
}

/* ============================================ */
/*         LOCATION DESKTOP STYLES              */
/* ============================================ */

@media (min-width: 768px) {
  .location-grid {
    /* Create two columns on desktop */
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center; /* Vertically align the info with the center of the map */
  }

  .map-container iframe {
    height: 450px; /* A slightly taller map on desktop looks better */
  }

  /* Align button to the left on desktop */
  .location-info .cta-button-large {
    display: inline-block; /* Reset to normal button behavior */
    text-align: left;
    margin-top: 0;
  }
}

/* ====================== */
/* INDEX PAGE PRINCIPLES SECTION */
/* ====================== */

.principles-section {
    padding: 3rem 0;
    background-color: var(--light-gray);
}

.principle-section .section-subtitle {
    margin-bottom: 0;
}

.principles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

.principle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.principle-icon img {
    width: 50px;
    height: 50px;
    margin-bottom: 1.25rem;
    border-radius: 5px;
}

.principle-icon-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Give it a size, matching your image icon's container */
  width: 50px; 
  height: 50px;

  /* Make it look nice */
  background-color: var(--light-gray); /* A light, neutral background */
  border-radius: 50%; /* Makes it a circle */
  border: 2px solid var(--primary-color); /* A subtle border */
  margin-bottom: 1.25rem;
}

/* Style for the number itself */
.principle-icon-fallback span {
  font-size: 2rem; /* Make the number large */
  font-weight: bold;
  color: #555; /* A dark grey color for the text */
  line-height: 1; /* Helps with vertical centering */
}

.principle-item h3 {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 0.75rem;

}

.principle-description {
    text-align: center;
    max-width: 100%;
    font-size: 1.1rem;
}

@media (min-width: 768px) {
    .principles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3.75rem 2.5rem;
    }

    .principle-item {
        align-items: flex-start;
        text-align: left;
    }
    .principle-description {
        text-align: left;
        margin-left: 0;
    }
}




/* ====================== */
/* MAIN SERVICES (the one with all categories and all services) PAGE STYLES */
/* ====================== */

.services-hero {
    margin-top: 70px;
    background-color: var(--light-gray);
    padding: 4rem 0;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
}
.services-hero h1 {
    text-align: center;
    font-size: 2.5rem;
    color: var(--primary-color);
}
.services-hero .subtitle {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    opacity: 0.8;
}

/* --- Main Content Section --- */
.services-content {
    padding: 3rem 0;
}

/* --- Sidebar (Mobile First) --- */
.services-sidebar {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    top: 100px; /* (header height + a little space) */
    max-height: calc(100vh - 120px); /* Viewport height minus header and some space */
    overflow-y: auto;
}
.services-sidebar h3 {
    text-align: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.services-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.services-sidebar li a {
    font-size: 1.1rem;
    text-align: center;
    display: block;
    padding-bottom: 0.75rem;
    padding-top: 0.75rem;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.services-sidebar li a.active,
.services-sidebar li a:hover {
    background-color: var(--primary-color);
    color: #fff;
}

@media (min-width: 768px) {
    .services-sidebar li a {
        text-align: left;
        padding-left: 0.5rem;
    }
    .services-sidebar h3 {
        text-align: left;
    }
}

/* --- Service Category Block --- */
.service-category-block {
    margin-bottom: 3rem;
    scroll-margin-top: 100px;
}
.service-category-block h2 {
    font-size: 2rem;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}
.category-description {
    text-align: center;
    max-width: 100%;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    opacity: 0.8;
    word-break: break-word;
}

@media (min-width: 768px) {
    .service-category-block h2, 
    .category-description {
        text-align: left;
    }
}

/* --- Individual Service Items --- */
.service-list {
    display: grid;
    gap: 1.5rem;
}
.service-item {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.service-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
    flex-basis: 100%;
}
.service-item-link:hover h4 {
    color: var(--primary-color);
}
.service-item-link h4 {
    transition: color 0.2s ease;
}

.service-item h4 {
    flex-basis: 100%;
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}
.service-item p {
    flex-grow: 1;
    text-align: center;
    max-width: 100%;
    margin: 0 0 1rem 0;
    opacity: 0.9;

}
.service-price {
    margin-left: auto;
    margin-right: auto;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-color);
    background-color: #eef5ff;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    margin-top: 0.5rem;
}

/* ============================================ */
/*            SERVICES DESKTOP STYLES           */
/* ============================================ */
@media (min-width: 768px) {
    .services-hero h1 { font-size: 3rem; }

    /* Create the two-column layout */
    .services-layout {
        display: grid;
        grid-template-columns: 280px 1fr; /* Fixed sidebar, flexible content */
        gap: 3rem;
        align-items: start;
    }
    .services-sidebar {
    /* --- This is the core fix --- */
    position: sticky;
    margin-bottom: 0;
    top: 6.25rem; /* Stick it 100px from the top */
    
    /* Force its height to be the height of the screen minus some padding */
    height: calc(100vh - 120px); 
    
    /* Make it a flex container to control its children */
    display: flex;
    flex-direction: column;
    }
    .services-sidebar ul#category-nav {
    /* Allow this list to scroll vertically if it's too long */
    overflow-y: auto;
    
    /* A small touch to make scrolling nicer on some systems */
    -webkit-overflow-scrolling: touch; 
    
    /* Remove default list padding */
    padding: 0;
    margin: 0;
}

     .service-item {
        /* Revert to the two-column flex layout on desktop */
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        text-align: left; /* Revert text alignment */
        flex-direction: row;
    }
    
    .service-item-link {
        flex-basis: 100%; /* Make the title span the full width */
    }

    .service-item p {
        text-align: left;
        flex-grow: 1;
        margin: 0 1rem 0 0; /* Restore desktop margin */
    }

    .service-price {
        flex-shrink: 0;
        margin-top: 0; /* Remove mobile margin */
    }
}


/*===================*/
/* Separate category page styles */
/*===================*/
.category-hero {
    margin-top: 70px;
    background-color: var(--light-gray);
    padding: 4rem 0;
    text-align: center;
}
.category-hero h1 {
    font-size: 2.5rem;
    color: var(--primary-color);
}
.category-hero .subtitle {
    text-align: center;
    font-size: 1.3rem;
    max-width: 1000px;
    margin: 0 auto;
    opacity: 1;
    overflow-wrap: break-word; /* Prevents long words from breaking the layout */
}

/* --- Main Content Area --- */
.category-content {
    padding: 3rem 0;
    overflow-x: hidden; /* Prevent horizontal scroll on small screens */
}
.service-detail-grid {
    display: grid;
    /* On mobile, 1 column. On desktop, 2 columns */
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
    justify-content: center;
}

@media (min-width: 768px) and (max-width: 1399px) {
    .service-detail-grid {
        /* Force a 2-column layout in this specific range */
        grid-template-columns: 1fr 1fr;
    }
}

.service-detail-item {
    background: var(--background-color);
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;

    text-align: center;
}


.service-detail-link {
    text-decoration: none;
    color: inherit;
}
.service-detail-link:hover h3 {
    color: var(--primary-color);
}
.service-detail-link h3 {
    transition: color 0.2s ease;
}
.service-detail-item h3 {
    font-size: 1.3rem;
    color: var(--primary-color);
}
.service-detail-item p {
    flex-grow: 1; /* Pushes the footer down */
    max-width: 100%;
    margin: 1rem 0 2rem 0;
    opacity: 0.9;
}
.service-detail-footer {
    display: flex;
    /* By default, stack them for mobile */
    flex-direction: column;
    align-items: center; /* Align to the left */
    gap: 1rem; /* Space between price and button */

    border-top: 1px solid var(--light-gray);
    padding-top: 1.5rem;
    margin-top: auto;
}

/* --- The Price Tag --- */
.price-tag {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-color);
    white-space: nowrap;

}

/* --- The Button --- */
.service-detail-footer .button-secondary {
    /* On mobile, make the button take up a sensible width */
    width: 100%;
    text-align: center;
}


@media (min-width: 480px) {
    .service-detail-footer {
        /* On wider screens, switch back to horizontal */
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .service-detail-footer .button-secondary {
        /* Revert to auto width */
        width: auto;
    }

}


@media (min-width: 768px) {
    .service-detail-item {
        text-align: left; /* Revert to left-align on desktop */
    }
    .service-detail-item p {
        text-align: left;
    }
}

@media (min-width: 480px) {
    .service-detail-footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem; 
        margin-left: 0;
    }
}

/* --- Final CTA Section --- */
.final-cta-section {
    background-color: #2c3e50; /* Dark background from footer */
    color: #ecf0f1;
    text-align: center;
    padding: 4rem 0;
}
.final-cta-section h2 {
    color: #fff;
    font-size: 2.2rem;
}
.final-cta-section p {
    opacity: 0.8;
    margin-bottom: 2rem;
}


/* ==================== */
/* CONTACTS at the location page */
/* ==================== */

.contact-hero {
    margin-top: 70px;
    background-color: var(--light-gray);
    padding: 4rem 0;
    text-align: center;
}
.contact-hero h1 {
    font-size: 2.5rem;
    color: var(--primary-color);
}
.contact-hero .subtitle {
    font-size: 1.1rem;
    max-width: 600px;
    margin: -0.5rem auto 3rem auto;
    opacity: 0.8;
}

.contact-main-actions {
    display: grid;
    gap: 1.5rem;
    max-width: 800px;
    margin: 0 auto;
}

.action-block {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    text-align: left;
}

.action-block .icon {
    width: 40px;
    height: 40px;
    color: var(--primary-color);
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.action-text strong {
    display: block;
    font-size: 1.1rem;
    color: #2c3e50;
}

.action-text a,
.action-text span {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
    text-decoration: none;
}
.action-text a:hover {
    color: var(--primary-color);
}

@media (min-width: 768px) {
    .contact-hero h1 { font-size: 3rem; }
    .contact-main-actions {
        /* On desktop, two columns */
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================ */
/*           INDIVIDUAL SERVICE PAGE            */
/* ============================================ */
.service-hero {
    margin-top: 6rem; /* Offset for fixed header */
}
.service-hero h1 {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

@media (min-width: 768px) {
    .service-hero h1, .service-description-wrapper h2 { text-align: left; }
}
.breadcrumbs {
    margin-bottom: 1rem;
    font-size: 0.9rem;
    opacity: 0.7;
}
.breadcrumbs a {
    color: var(--text-color);
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}
.breadcrumbs span {
    margin: 0 0.5rem;
}

/* --- Main Two-Column Layout --- */
.service-content-body {
    padding: 1.5rem 0;
}
.service-layout {
    display: grid;
    gap: 3rem;
}
.service-main-image {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 2rem;
    max-width: 800px;
    max-height: 600px;
}
.service-main-content h2 {
    font-size: 1.8rem;
    text-align: left;
}


    /* SERVICE PAGE DESCRIPTION STYLES */
    
.service-description {

    text-align: left;
    max-width: 100%;
    background-color: #f8f9fa; /* A clean, very light gray */
    border: 1px solid #dee2e6; /* A slightly darker border */
    border-radius: 12px;       /* More pronounced rounded corners */
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
    
    p {
        text-align: left;
        color: #34495e; /* A slightly softer black for readability */
        margin-bottom: 1rem; /* Space between paragraphs */
        line-height: 1.8;
        max-width: 100%; /* Ensure it doesn't overflow */
        margin-left: 0;
        word-break: break-word; /* Prevents long words from breaking the layout */
    }

    /* --- Headings --- */
    /* Assumes h2 is the page title, so content will use h3, h4, etc. */
    h3, h4, h5, h6 {
        color: #2c3e50; /* Darker color for headings */
        font-weight: 700;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
        line-height: 1.4;
    }
    h3 { font-size: 1.6rem; }
    h4 { font-size: 1.4rem; }
    h5 { font-size: 1.2rem; }
    h6 { font-size: 1.1rem; }

    /* --- Lists (Unordered and Ordered) --- */
    ul, ol {
        text-align: left;
        margin-bottom: 1.5rem;
        padding-left: 1.5rem; /* Standard indentation */
    }

    ul {
        list-style: disc; /* Default bullet points */
    }

    ul li::marker {
        color: var(--primary-color); /* Color for bullet points */
        font-size: 1.2em; 
    }

    li {
        margin-bottom: 0.75rem; /* Space between list items */
        padding-left: 0.5rem;
    }
    
    /* Style the bullet points for unordered lists */
    ul li::marker {
        color: var(--primary-color);
        font-size: 1.2em;
    }
    
    /* Style the numbers for ordered lists */
    ol {
        list-style: decimal; /* Ensure numbers are shown */
    }
    ol li::marker {
        color: var(--primary-color);
        font-weight: 700;
    }

    /* --- Inline Elements --- */
    strong, b {
        /* Bold text */
        font-weight: 700;
        color: #2c3e50;
    }

    em, i {
        /* Italic text */
        font-style: italic;
    }

    u {
        /* Underlined text */
        /* A more stylish underline than the browser default */
        text-decoration: none;
        border-bottom: 2px solid rgba(0, 123, 255, 0.4);
        padding-bottom: 1px;
    }
    
    a {
        /* Links within the text */
        color: var(--primary-color);
        font-weight: 600;
        text-decoration: none;
        border-bottom: 2px solid var(--primary-color);
        transition: all 0.2s ease;
    }
    a:hover {
        background-color: #eef5ff;
        border-bottom-color: var(--secondary-color);
    }

    /* --- Blockquotes --- */
    blockquote {
        margin: 2rem 0;
        padding: 1.5rem;
        background-color: var(--light-gray);
        border-left: 5px solid var(--primary-color);
        border-radius: 0 8px 8px 0;
    }
    blockquote p {
        font-style: italic;
        font-size: 1.1rem;
        color: #555;
        margin-bottom: 0; /* Remove bottom margin for the last paragraph in a quote */
    }
}

/* --- Sidebar CTA Card --- */
.cta-card {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 800;
    
    /* Appearance */
    background-color: var(--background-color);
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -4px 15px rgba(0,0,0,0.08);
    
    /* THE FIX: Use a simple grid for perfect spacing */
    display: grid;
    grid-template-columns: 1fr auto; /* Price takes up space, button is auto-sized */
    align-items: center;
    padding: 0.75rem 1rem; /* A bit tighter for mobile */
}

.cta-card h3 {
    font-size: 1.3rem;
}

.price-display {
    font-size: 1.1rem; /* A bit smaller for the bar */
    font-weight: 700;
    color: var(--primary-color);
    margin: 0; /* Remove default margin */
    text-align: left;
    white-space: nowrap; /* Prevents text wrapping */
}

.cta-card p {
    margin-bottom: 2rem;
    opacity: 0.8;
}
.cta-card h3, .cta-card p {
    display: none; /* Hide these on mobile */
}

.cta-card .cta-button-large {
    /* Make the button slightly smaller to fit */
    padding: 0.75rem 1.25rem;
    font-size: 0.7rem;
    flex-shrink: 0; /* Prevent it from shrinking */
}

.service-content-body {
    padding-bottom: 120px; /* Adjust this value to be taller than your sticky footer */
}

.page-service-detail #back-to-top {
    display: none !important; /* Hide the back-to-top button on service detail pages */
}

@media (min-width: 768px) {
    .service-detail-layout {
        display: grid;
        /* A flexible 3-column grid */
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        align-items: start;
    }
    
    /* The main IMAGE block now spans the first TWO columns */
    .service-main-content {
        grid-column: 1 / span 2;
        grid-row: 1; /* Place it on the first row */
    }

    /* The sidebar now sits in the THIRD column, on the first row */
    .service-sidebar-cta {
        grid-column: 3 / 4;
        grid-row: 1;
    }

    /* The description now spans ALL THREE columns, on the second row */
    .service-description-wrapper {
        grid-column: 1 / -1; /* Start at line 1, end at the last line */
        grid-row: 2; /* Explicitly place it on the second row */
    }

     .cta-card {
        position: sticky; /* Revert to a sticky sidebar */
        top: 100px;
        width: auto; /* Revert to auto width */

        /* Revert appearance */
        background-color: var(--light-gray);
        border: none;
        box-shadow: none;
        border-radius: 12px;
        padding: 2rem;
        
        /* Revert internal layout */
        display: block; /* Revert from flex */
        text-align: center;
        
        /* Show the title and paragraph again */
        h3, p {
            display: block;
        }
    }
    
    /* Revert the price and button styles for desktop */
    .price-display {
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }
    .cta-card .cta-button-large {
        padding: 1rem 2rem;
        font-size: 1.1rem;
    }
    
    /* Remove the extra bottom padding on desktop */
    .service-content-body {
        padding-bottom: 3rem; /* Revert to original padding */
    }
    
}

/* LOCATION PAGE HOW TO FIND US SECTION */
.directions-section {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--light-gray);
    align-items: center;
    text-align: center;
}
.directions-section h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 3rem;
}

/* On mobile, stack the columns */
.directions-grid {
    display: grid;
    gap: 3rem;
}

.directions-text h3,
.directions-gallery h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #2c3e50;
}
.directions-text p {
    text-align: center;
    max-width: 100%;
}
.directions-text h4 {
    margin-top: 2rem;
    font-size: 1.1rem;
}
.directions-text ul {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    text-align: left;
}

.directions-text ul li {
    position: relative;
    padding-left: 2rem; /* Make space for the icon */
    margin-bottom: 0.75rem;
}

/* Add a custom checkmark icon before each list item */
.directions-text ul li::before {
    content: '✓'; /* You can use a checkmark or any other character */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary-color); /* Use your brand's green */
    font-weight: bold;
    font-size: 1.2rem;
}

@media (min-width: 768px) {

    .directions-section {
        align-items: left;
        text-align: left;
    }

    .directions-text p {
        text-align: left;
    }
}

/* --- Transport Info Block --- */
.transport-info-reimagined {
    margin-top: 2.5rem;
    background-color: var(--background-color);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column; /* Stack on mobile */
    align-items: center;
    text-align: center;
    gap: 1.5rem;
}

.transport-icon-wrapper {
    background-color: var(--primary-color);
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.transport-icon-wrapper svg {
    width: 32px;
    height: 32px;
}

.transport-text-item {
    margin-bottom: 1.5rem;
}
.transport-text-item:last-child {
    margin-bottom: 0;
}
.transport-text-item strong {
    display: block;
    font-size: 1.1rem;
}

@media (min-width: 768px) {
    .transport-info-reimagined {
        flex-direction: row; /* Switch to row on tablet and up */
        text-align: left;
        align-items: flex-start;
    }
    .transport-text-item {
        margin-bottom: 0;
    }
    .transport-text-item:not(:last-child) {
        margin-right: 2rem; /* Space between items */
    }
}

/* --- Photo Gallery --- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}
.gallery-item {
    display: block;
    text-decoration: none;
    color: var(--text-color);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.gallery-item:hover img {
    transform: scale(1.05);
}
.gallery-item span {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    padding: 1.5rem 1rem 1rem 1rem;
    font-weight: 600;
}

/* ============================================ */
/*            DIRECTIONS DESKTOP STYLES         */
/* ============================================ */
@media (min-width: 768px) {
    .directions-grid {
        /* On desktop, create two columns */
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}


/*============================================ */
/*   Lightbox styles for gallery images    */
/* =========================================== */

.lightbox {
    display: flex; /* Always a flex container */
    
    /* We will now control visibility with these properties */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Cannot be interacted with when hidden */

    /* ... rest of the styles are the same ... */
    position: fixed;
    z-index: 2000;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* The class we add with JS to show the lightbox */
.lightbox.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* Can be interacted with when visible */
}

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 3rem;
    font-weight: bold;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.lightbox-content {
    width: 90%;
    max-width: 900px; /* Max width for the image */
    max-height: 90%;
    
    /* Pop-in animation */
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.lightbox.is-active .lightbox-content {
    transform: scale(1);
}

.lightbox-content img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensure the full image is visible without distortion */
    border-radius: 8px;
}

body.lightbox-open {
    overflow: hidden;
}