/* 20260122162513 - v2 */
.gui,
.gui-block-linklist li a {
  color: #666666;
}

.gui-page-title,
.gui a.gui-bold,
.gui-block-subtitle,
.gui-table thead tr th,
.gui ul.gui-products li .gui-products-title a,
.gui-form label,
.gui-block-title.gui-dark strong,
.gui-block-title.gui-dark strong a,
.gui-content-subtitle {
  color: #000000;
}

.gui-block-inner strong {
  color: #848484;
}

.gui a {
  color: #6db43f;
}

.gui-input.gui-focus,
.gui-text.gui-focus,
.gui-select.gui-focus {
  border-color: #6db43f;
  box-shadow: 0 0 2px #6db43f;
}

.gui-select.gui-focus .gui-handle {
  border-color: #6db43f;
}

.gui-block,
.gui-block-title,
.gui-buttons.gui-border,
.gui-block-inner,
.gui-image {
  border-color: #8d8d8d;
}

.gui-block-title {
  color: #333333;
  background-color: #ffffff;
}

.gui-content-title {
  color: #333333;
}

.gui-form .gui-field .gui-description span {
  color: #666666;
}

.gui-block-inner {
  background-color: #f4f4f4;
}

.gui-block-option {
  border-color: #ededed;
  background-color: #f9f9f9;
}

.gui-block-option-block {
  border-color: #ededed;
}

.gui-block-title strong {
  color: #333333;
}

.gui-line,
.gui-cart-sum .gui-line {
  background-color: #cbcbcb;
}

.gui ul.gui-products li {
  border-color: #dcdcdc;
}

.gui-block-subcontent,
.gui-content-subtitle {
  border-color: #dcdcdc;
}

.gui-faq,
.gui-login,
.gui-password,
.gui-register,
.gui-review,
.gui-sitemap,
.gui-block-linklist li,
.gui-table {
  border-color: #dcdcdc;
}

.gui-block-content .gui-table {
  border-color: #ededed;
}

.gui-table thead tr th {
  border-color: #cbcbcb;
  background-color: #f9f9f9;
}

.gui-table tbody tr td {
  border-color: #ededed;
}

.gui a.gui-button-large,
.gui a.gui-button-small {
  border-color: #8d8d8d;
  color: #f9f6f6;
  background-color: #6db43f;
}

.gui a.gui-button-large.gui-button-action,
.gui a.gui-button-small.gui-button-action {
  border-color: #8d8d8d;
  color: #000000;
  background-color: #ffffff;
}

.gui a.gui-button-large:active,
.gui a.gui-button-small:active {
  background-color: #579032;
  border-color: #707070;
}

.gui a.gui-button-large.gui-button-action:active,
.gui a.gui-button-small.gui-button-action:active {
  background-color: #cccccc;
  border-color: #707070;
}

.gui-input,
.gui-text,
.gui-select,
.gui-number {
  border-color: #8d8d8d;
  background-color: #ffffff;
}

.gui-select .gui-handle,
.gui-number .gui-handle {
  border-color: #8d8d8d;
}

.gui-number .gui-handle a {
  background-color: #ffffff;
}

.gui-input input,
.gui-number input,
.gui-text textarea,
.gui-select .gui-value {
  color: #000000;
}

.gui-progressbar {
  background-color: #76c61b;
}

/* custom */
/* Wrap all service cards */
.services-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

/* Base: 1 per line on mobile */
.services-row .col-12 {
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
}

/* 2 per line on tablets and up */
@media (min-width: 768px) {
  .services-row .col-md-6 {
    width: 50%;
  }
}

/* 2 per line on desktops too (same as md) */
@media (min-width: 992px) {
  .services-row .col-lg-6 {
    width: 50%;
  }
}

/* Card styling (optional, make it look nice) */
.service-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  margin-bottom: 24px;
}

.service-card img {
  display: block;
  width: 100%;
  height: auto;
}

.service-card-body {
  padding: 16px 18px 18px;
}

.service-card-title {
  font-weight: 700;
  margin-bottom: 4px;
}

.service-card-subtitle {
  font-size: 0.9rem;
  color: #777;
}

.service-card-text {
  margin-top: 8px;
  font-size: 0.95rem;
}

/* === GRID FOR SERVICES SECTION ONLY === */

/* Flex row wrapper */
#services-grid .services-row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;   /* gutter */
  margin-right: -15px;  /* gutter */
}

/* All columns inside the row */
#services-grid .services-row > [class*="col-"] {
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}

/* Mobile: 1 card per line */
#services-grid .col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Tablet and up: use .col-md-6 to make them 50% wide */
@media (min-width: 768px) {
  #services-grid .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Desktop and up: .col-lg-6 still 50% (2 cards per line) */
@media (min-width: 992px) {
  #services-grid .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* Make each column a flex item so all cards in a row share height */
#services-grid .services-row > [class*="col-"] {
  display: flex;
  margin-bottom: 24px; 
}

/* Make the card itself stretch to fill the column height */
#services-grid .service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#services-grid .service-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#services-grid .service-card-text {
  margin-top: auto; /* pushes the paragraph to the bottom of the card body */
}

/* Bottom note section under services */
#services-note-section {
  padding: 2.5rem 0 3rem;
  background-color: #ffffff;
}

#services-note-section .services-note-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

#services-note-section .services-note-line {
  border: 0;
  border-top: 3px solid #6cc049;      /* green line */
  margin: 0 auto;
}

#services-note-section .services-note-text {
  margin: 1.8rem 0;
  font-size: 0.95rem;
  font-style: italic;
  color: #444444;
}

/* Slightly smaller on mobile */
@media (max-width: 767px) {
  #services-note-section .services-note-text {
    font-size: 1.2rem;
    margin: 1.4rem 0;
}

/* Full-page style background for the services page wrapper */
#services-page-bg {
  background-image: url('https://sunnspokes.com/asset/images/shop-dog.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  /* gives some breathing room so content isn't glued to the edges */
  padding: 3rem 0;
}

/* Optional: make sure internal sections are on a readable “panel” */
#services-page-bg .features4,
#services-page-bg #services-note-section {
  background-color: rgba(255, 255, 255, 0.92);
}