body {
    overflow-x: hidden;
}

/* Centered top title */
.services-header {
    text-align: left;
    max-width: 1400px;
    margin: 100px auto 20px;
    display: flex;
    justify-content: space-between;
}

.services-header-title {
    font-size: 60px;
 margin-left: 20px;
 margin-top: 0;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
      background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    text-align: center;
    margin-bottom: 0;
}

/* Services layout */
.feature-services {
    padding: 60px 20px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Feature cards */
.feature-card {
    display: flex;
    flex-direction: column;
    background: var(--color-background);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;
    opacity: 0;
    transform: translateY(20px);
    position: relative;
    overflow: hidden;
}

.feature-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.feature-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Feature icon */
.feature-icon {
    font-size: 50px;
    margin-bottom: 16px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
     background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    transition: transform 0.3s ease;
    background-size: 200% 200%;
    animation: gradientShift 5s ease infinite;
}

.feature-card:hover .feature-icon {
    transform: scale(1.05) rotate(4deg); /* smaller scale and rotation */
    transition: transform 0.3s ease;    /* smooth transition */
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Badge for popular services */
.feature-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: var(--color-primary);
    color: #fff;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    font-weight: 600;
}

/* Feature text */
.feature-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Make text container fill remaining card height */
}

.feature-text h3 {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 600;
}

.feature-text p {
    margin-bottom: 16px;
    line-height: 1.6;
    color: #444;
}

/* Feature includes list */
.feature-includes {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.feature-includes li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    font-size: 15px;
    color: #333;
}

.feature-includes li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #2c7a4b;
    font-weight: 600;
}

/* Feature link/button */
.feature-link {
    margin-top: auto; /* Push button to bottom of card */
    display: flex;
    font-weight: 500;
    text-decoration: none;
    background: var(--color-primary);
    color: #ffffff !important; 
    padding: 12px 30px;
    border-radius: 50px;
    transition: all 0.3s ease;
    border: #00000000 2px solid;
    justify-content: space-between;
    align-items: center;
}

.feature-link:hover {
    background-color: #00000000;
    color: var(--color-primary) !important;
    border: var(--color-primary) 2px solid;
}

/* Reverse gradient for even icons */
.features-grid .feature-card:nth-child(even) .feature-icon {
    background: linear-gradient(315deg, var(--color-primary), var(--color-secondary));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Background patterns for cards */
.feature-pattern-1::before { background-image: url('/images/patterns/wave-pattern.png'); }
.feature-pattern-2::before { background-image: url('/images/patterns/wave-pattern-2.png'); }
.feature-pattern-3::before { background-image: url('/images/patterns/wave-pattern-3.png'); }
.feature-pattern-4::before { background-image: url('/images/patterns/wave-pattern-4.png'); }

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.4;
    border-radius: 12px;
    pointer-events: none;
    z-index: 0;
}

.feature-card > * {
    position: relative;
    z-index: 1;
}

/* Responsive */
@media (max-width: 600px) {
    .feature-card {
        padding: 22px;
    }

    .feature-text h3 {
        font-size: 18px;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .feature-card {
        background: #1a1a1a70;
        box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    }

    .feature-text p,
    .feature-includes li {
        color: #ddd;
    }

    .feature-includes li::before {
        color: #4CAF50;
    }

    .feature-link {
        color: #fff;
    }
.feature-card::before {
    opacity: 0.1 !important;
}
}

.services-header-buttons {
display: flex;
gap: 10px;
margin-left: 20px;
margin-top: 10px;
}

.services-header-link {
    border: var(--color-text) 1px solid;
    border-radius: 50px;
    padding: 10px 15px;
    color: var(--color-text);

}
.services-header-link:hover {
    border: var(--color-text) 1px solid;
    background-color: var(--color-text);
    color: var(--color-gray);
    text-decoration: none;
}

.services-hedaer-commercial-links-container {
    display: flex;
    flex-direction: column;
    text-align: right;
    margin-right: 20px;
}


/* Mobile adjustments */
@media (max-width: 768px) {
    .services-header-title {
        font-size: 36px; /* smaller title on phones */
        margin-top: 10px;
        margin-left: 20px;
    }

    .services-header-buttons {
        display: flex;
        gap: 10px;
        margin-left: 20px;
        margin-top: 10px;
        overflow-x: auto; /* horizontal scroll */
        -webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
        padding-bottom: 5px;
        font-size: 14px;
         -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
        flex-wrap: nowrap; /* prevent wrapping */
        width: calc(100vw - 20px);
    }

    .services-header-buttons::-webkit-scrollbar {
        display: none;
    }

    .services-header-link {
        flex: 0 0 auto; /* prevent shrinking */
        white-space: nowrap; /* keep text on one line */
    }

      .services-header {
        flex-direction: column-reverse;
        align-items: flex-start;
        margin-top: 5px;
    }

    /* Push Commercial Services below */
    .services-header > div:last-child {
        margin-top: 10px;
        margin-right: auto;
       
        text-align: left;
        align-items: flex-start;
    }

    .services-hedaer-commercial-links-container {
        display: flex;
        flex-direction: row;
        margin-top: 0px !important;
     justify-content: flex-start;
        gap: 20px;
        margin-left: 20px;
    }

    /* Re-enable horizontal scrolling for buttons */
    .services-header-buttons {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    h4 {
        margin: 0px;
        display: none;
        visibility: hidden;
    }
}

.services-hedaer-commercial-link {
    margin-bottom: 7px;
}

/* Service page mobile layout */
@media (max-width: 768px) {
    .service-page-wrapper {
        flex-direction: column;
        padding: 10px;
    }

          .service-page-list {
              text-align: left;
              padding-left: 20px;
              margin-left: 0;
          }
    
          .service-page-list li {
              text-align: left;
          }

                  .commercial-cta-title {
                      font-size: clamp(18px, 4vw, 24px);
                      line-height: 1.3;
                      max-width: 90%;
                  }

@media (max-width: 768px) {
    .commercial-cta-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

    .service-page-left {
        text-align: center;
    }

    .service-page-icon {
        font-size: 64px;
        margin: 30px auto 10px auto;
        display: block;
        text-align: center;
    }

    .service-page-title {
        font-size: 28px;
        text-align: center;
        margin: 10px auto 0 auto;
        display: block;
    }

    .service-page-body {
        font-size: 16px;
        margin: 15px 0 30px 0;
    }

    .service-page-list {
        margin-left: 0;
    }

    .service-page-buttons {
        margin-top: 20px;
        align-items: stretch;
    }

    .service-page-button {
        justify-content: space-between;
        font-size: 15px;
    }
}

.service-page-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    text-align: left;
    padding-bottom: 40px;
    display: flex;
    justify-content: space-between;
}

.service-page-title {
    font-size: 36px;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 10px;
    display: inline-block;
}

.service-page-icon {
    font-size: 90px;
    display: block;
    text-align: center;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 60px;
background: linear-gradient(315deg, var(--color-primary), var(--color-secondary));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.service-page-body {
    font-size: 18px;
    text-align: left;
    max-width: 800px;
    margin: 20px auto 40px 20px;
    color: var(--color-text-secondary);
}

.service-page-list {
    list-style: none;
    padding: 0;
    margin: 0 0 40px 20px;
}

.service-page-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    font-size: 15px;
    color: #333;
}

.service-page-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #2c7a4b;
    font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  

.service-page-list li::before {
    color: #4CAF50;
}

.service-page-list li {
    color: var(--color-text);
}
}

.service-page-back-link {
    font-size: 16px;
    text-decoration: none;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 10px 15px;
    border-radius: 5000px;
    width: fit-content;
border: transparent 2px solid;
}

.service-page-back-link:hover {
    border: var(--color-text) 2px solid;
}

.service-page-buttons {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 175px;
    align-items: flex-end;
    justify-content: flex-end;
}

.service-page-button {
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 500px;
    font-size: 16px;
    font-weight: 500;
    background-color: var(--color-text);
    color: var(--color-gray) !important;
    border: transparent 2px solid;
    width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.service-page-button-mobile {
    width: 100% !important;
    max-width: 400px !important;
    justify-content: space-between;
    margin: 0 auto;
}

.service-page-back-links {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.service-page-button:hover {
    background-color: #00000000;
    color: var(--color-text) !important;
    border: var(--color-text) 2px solid;
}

.commercial-cta-section {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    padding: 20px 20px;
}

.commercial-cta-container {
    padding: 0;
    padding: 0 20px;
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.commercial-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    border: 2px solid var(--color-light-text);
    background-color: #ffffff;
    color: var(--color-primary) !important;
    padding: 10px 20px;
    font-size: 14px;
    height: fit-content;
    width: fit-content;
    text-wrap: nowrap;
}

.commercial-cta-btn:hover,
.commercial-cta-btn:focus-visible {
    background-color: var(--color-primary);
    border-color: var(--color-light-text);
    color: var(--color-light-text) !important;
    text-decoration: none;
}

/* Repeating background words for commercial CTA */
.commercial-cta-section {
    position: relative;
    overflow: hidden;
    color: var(--color-light-text);
}

.commercial-cta-section::before {
    content:
        "Catering   Plumbing   Gas  Heating   Commercial   Repairs   Catering   Plumbing   Gas  Heating   Commercial   Repairs   Catering   Plumbing   Gas  Heating   Commercial   Repairs\A"
        "Plumbing   Gas  Heating   Commercial   Maintenance   Catering   Plumbing   Gas  Heating   Commercial   Maintenance   Catering   Plumbing   Gas  Heating   Commercial   Maintenance   Catering\A"
        "Gas  Heating   Catering   Repairs   Catering   Plumbing   Commercial   Gas  Heating   Catering   Repairs   Catering   Plumbing   Commercial   Gas  Heating   Catering   Repairs   Catering   Plumbing   Commercial\A"
        "Commercial   Maintenance   Plumbing   Gas   Commercial   Repairs   Commercial   Maintenance   Plumbing   Gas   Commercial   Repairs   Commercial   Maintenance   Plumbing   Gas   Commercial   Repairs\A"
        "Catering   Commercial   Gas  Heating   Plumbing   Maintenance   Catering   Commercial   Gas  Heating   Plumbing   Maintenance   Catering   Commercial   Gas  Heating   Plumbing   Maintenance\A"
        "Plumbing   Gas  Heating   Catering   Commercial   Repairs   Plumbing   Gas  Heating   Catering   Commercial   Repairs   Plumbing   Gas  Heating   Catering   Commercial   Repairs\A"
        "Commercial   Plumbing   Maintenance   Gas  Heating   Catering   Commercial   Plumbing   Maintenance   Gas  Heating   Catering   Commercial   Plumbing   Maintenance   Gas  Heating   Catering\A"
        "Gas  Heating   Commercial   Repairs   Plumbing   Catering   Gas  Heating   Commercial   Repairs   Plumbing   Catering   Gas  Heating   Commercial   Repairs   Plumbing   Catering\A"
        "Catering   Maintenance   Commercial   Gas  Heating   Plumbing   Catering   Maintenance   Commercial   Gas  Heating   Plumbing   Catering   Maintenance   Commercial   Gas  Heating   Plumbing\A"
        "Plumbing   Commercial   Repairs   Catering   Gas  Heating   Plumbing   Commercial   Repairs   Catering   Gas  Heating   Plumbing   Commercial   Repairs   Catering   Gas  Heating\A"
        "Commercial   Gas  Heating   Maintenance   Plumbing   Catering   Commercial   Gas  Heating   Maintenance   Plumbing   Catering   Commercial   Gas  Heating   Maintenance   Plumbing   Catering\A"
        "Catering   Plumbing   Commercial   Repairs   Gas  Heating   Catering   Plumbing   Commercial   Repairs   Gas  Heating   Catering   Plumbing   Commercial   Repairs   Gas  Heating";
    position: absolute;
    top: -250px;
    left: -20%;
    width: 250%;
    height: 350%;

    font-size: 60px;
    font-weight: 700;
    line-height: 1.4;
    white-space: pre;

    opacity: 0.06;
    color: #ffffff;

    pointer-events: none;
    z-index: 0;

    transform: rotate(-8deg);
}

.commercial-cta-container {
    position: relative;
    z-index: 2;
margin-left: 20px;
    margin-right: 20px;

}

.commercial-cta-section-wrapper {
max-width: 1400px;
margin: auto auto;
border-radius: 25px;
}

.commercial-cta-section {
    margin-left: 30px;
    margin-right: 30px;
    border-radius: 25px;
}

.suppliers-section {
    padding: 60px 20px;
    text-align: center;
}

.suppliers-title {
    font-size: 20px;
    margin-bottom: 40px;
    color: var(--color-text);
    opacity: 0.8;
}

.suppliers-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

.suppliers-logos img {
    max-height: 68px;
    max-width: 150px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: filter 0.3s ease, opacity 0.3s ease;
}