.page-node-type-city-page .paragraph {
    background: #f5f5f5;
    padding: 20px;
}
.page-node-type-city-page .field {
    padding: 5px;
}

.page-node-type-city-page .page-title {
    background-image: url(/themes/subtheme/images/professional-hvac-services.png);
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
}
.page-node-type-city-page .page-title h1 {
    background: rgba(11, 11, 11, 0.35);
    padding: 10% 15px;margin:0;color:white;
}

.page-node-type-city-page .page-header {
    display: block;
}
.page-node-type-city-page .wrapper {
    background-image: url(/themes/subtheme/images/753b2c17-a0bb-49ca-85c4-aa0c5de23ccc.webp);
}
.page-node-type-city-page .contain {
    background: rgb(11 11 11 / 35%);
    padding: 10% 15px;
}
.page-node-type-city-page .field--name-field-service-name .field--item {
    font-size: 22px;
    font-weight: bold;
    color: blue;
}
.page-node-type-city-page  .paragraph--type--service-group .field--name-field-service-name {
  cursor: pointer;
  text-decoration: underline;
}

.page-node-type-city-page  .paragraph--type--service-group .field--name-field-service-name:hover {
  text-decoration: none;
}

.page-node-type-city-page .service-name-arrow {
  display: inline-block;
  margin-right: 5px;font-size: 30px;
    font-weight: bold;
}

.page-node-type-city-page .service-name-arrow::before {
  content: "\25B6"; /* Right arrow */
  font-size: 16px;
  font-weight: bold;
  color: #000; /* Change to desired color */
  vertical-align: middle;padding-right: 10px;
}
.page-node-type-city-page .paragraph {
    background: white;
    padding: 20px;
    border: 2px solid #ebe5e5;
}
.page-node-type-city-page span.service-name-arrow.clicked.active {
    background: #030e64;
    width: 100%;
    color: white;
    padding: 10px;
}
.page-node-type-city-page span.service-name-arrow.clicked.active a {
    color: white;
}
.page-node-type-city-page .service-name-arrow.clicked::before {
  content: "\25BC"; /* Downward arrow */
  font-size: 16px;
  font-weight: bold;
    color: white;
}
.page-node-type-city-page .field--name-field-service-name.active {
  background-color: #041e58;
  color: white;
   font-size: 20px;
}

.page-node-type-city-page .field--name-field-service-name.active .service-name-arrow::before {
  color: #fff !important; /* Change to white */
}

/* Scope to service pages so it doesn't affect other places */
.page-node-type-city-page .field--name-field-service .field--item {
  display: inline; /* keeps the suffix on the same line */
}
.page-node-type-city-page .field--name-field-service .field--item::after {
  content: " Services:";
}
.page-node-type-city-page .field--name-field-service .field--item{
  display:block;
  font-weight: 800;
  margin: 0 0 .5rem;
}

@media only screen and (max-width: 769px) {
.page-node-type-city-page .contain {
    padding: 5% 15px;
}
}





.page-node-type-city-page .service-name-arrow {
  display: inline-flex;               /* put arrow + label + item on one line */
  align-items: center;         /* vertical center */
  gap: 8px;                    /* space between pieces */
  font-size: 16px;             /* base text size */
  font-weight: 600;
}