/* Базовий клас для всіх секцій, де потрібен фон на всю ширину */
.full-bleed {
  position: relative;
}

.full-bleed::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: 50%;
  transform: translateX(-50%);
  width: max(100vw, 100%);

  z-index: -1;
  background: var(--bg-color, transparent); /* Динамічний колір */
}


/* --------------------------------------------------------------------------- */




html {
  scroll-behavior: smooth;
}
/* Скасовуємо стандартні сині/фіолетові кольори посилань та підкреслення */
.mile-section a,
.mile-section a:visited,
.mile-section a:hover,
.mile-section a:active {
  color: inherit;         /* Зберігає оригінальний колір тексту вашого класу */
  text-decoration: none;  /* Прибирає стандартне підкреслення посилань */
}

/* Коли користувач затискає кнопку (клікає) — текст стає світло-сірим */
.mile-section a:active {
  color: #d3d3d3 !important; 
}



.request-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* Прибирає стандартне підкреслення посилань */
  cursor: pointer;
  /* Додайте сюди ваші інші стилі, які були для цієї кнопки (фоновий колір, бордери, падінги тощо) */
}

.request-button,
.call-button {
  text-decoration: none; /* Прибирає підкреслення */
  /* Переконайтеся, що у вас задані базові стилі (наприклад, padding, border тощо) */
  background-color: transparent; /* Початковий фон (прозорий або ваш базовий) */
  transition: background-color 0.3s ease, color 0.3s ease; /* Плавність для фону і тексту */
}

/* Ефект при наведенні миші (hover) */
.request-button:hover,
.call-button:hover {
  background-color: #757575; /* Бажаний сірий колір фону */
}






.page-container {
  width: 100%;
  position: relative;
  background-color: var(--color-gray-200);
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
  line-height: normal;
  letter-spacing: normal;
}
.header,
.hero {
  align-self: stretch;
}
.header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-1) var(--padding-2);
  box-sizing: border-box;
  max-width: 100%;
  z-index: 1;
}
.hero {
  height: 700px;
  position: relative;
}
.hero-bg-icon {
  position: absolute;
  top: 2px;
  left: -1px;
  width: 100%;
  height: 100%;
  display: none;
}
.hero-container,
.hero-content {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* 1. Робимо hero-content відносним контейнером без власного кольорового фону */
.hero-content {
  position: absolute;
  bottom: 0px;
  left: calc(50% - 720px);
  width: 100%;
  height: 100%;
  max-height: 700px;
  align-items: flex-start;
  padding: var(--padding-2) var(--padding-0) var(--padding-0);
  box-sizing: border-box;

  /* ПРИБИРАЄМО background повністю, щоб він не вилезав знизу червоним/чорним! */
  background: transparent !important; 

  text-align: left;
  font-size: var(--fs-15);
  color: var(--color-white);
  font-family: var(--font-inter);
}

/* 2. Примусово розтягуємо контейнер з картинкою на 100% висоти батька */
.hero-container {
  align-self: stretch;
  align-items: center;
  padding: 206px var(--padding-30) 114px;
  
  /* Фонова картинка */
  background-image: url(./public/Hero-Container@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;

  /* Прив'язуємо картинку до всієї площі, щоб під нею нічого не просвічувало */
  width: 100%;
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

/*
.hero-content {
  position: absolute;
  bottom: 0px;
  left: calc(50% - 720px);
  box-shadow: 0 16px 41.7px 10px rgba(0, 0, 0, 0.25);
  background: linear-gradient(252.44deg, #424243, var(--color-black));
  width: 100%;
  align-items: flex-start;
  padding: var(--padding-2) var(--padding-0) var(--padding-0);
  max-height: 700px;
  height: 100%;
  text-align: left;
  font-size: var(--fs-15);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.hero-container {
  align-self: stretch;
  align-items: center;
  padding: 206px var(--padding-30) 114px;
  background-image: url(./public/Hero-Container@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  max-width: 100%;
  flex-shrink: 0;
} */
.hero-body,
.hero-main,
.hvac-poolspa-appliance-parent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 1257.8px;
}
.hero-main,
.hvac-poolspa-appliance-parent {
  align-items: center;
  gap: var(--gap-18);
  max-width: 519.8px;
}
.hvac-poolspa-appliance-parent {
  align-items: flex-start;
  gap: var(--gap-16);
  max-width: 510px;
  z-index: 3;
}
.hvac-poolspa {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.15em;
  line-height: 120%;
}
.reliable-service-for-container {
  margin: 0;
  width: 100%;
  position: relative;
  font-size: 60px;
  line-height: 100%;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  max-width: 470px;
}
.for-your-home,
.reliable-service {
  line-height: 100%;
}
.for-your-home {
  background: linear-gradient(90deg, #ea9243, #eec05a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.from-hvac-systems {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-16);
  line-height: 140%;
  font-weight: 300;
}
.guarantee-info {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap-10);
  max-width: 519.8px;
  font-size: var(--fs-16);
}
.checkmark-icon {
  margin: 0;
  height: 33px;
  width: 33px;
  position: relative;
}
.we-stand-behind-our-work-100 {
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 1.9px;
  box-sizing: border-box;
  min-width: var(--min-w-310);
  max-width: 100%;
}
.we-stand-behind {
  flex: 1;
  position: relative;
  line-height: 140%;
  display: inline-block;
  max-width: 100%;
}
.button,
.request-button {
  display: flex;
  box-sizing: border-box;
}
.button {
  display: flex !important;
  align-items: center;
  
  /* Примусово вирівнюємо кнопки на початок, щоб gap почав працювати */
  justify-content: flex-start !important; 
  /* Ваша бажана відстань між кнопками */
  gap: 25px !important; 
  max-width: 454.2px;
  z-index: 1;
}
.request-button {
  cursor: pointer;
  border: 0;
  padding: 6.1px 18px var(--padding-6) var(--padding-24);
  background-color: transparent;
  height: 48.1px;
  box-shadow: var(--shadow-drop);
  border-radius: var(--br-15);
  background: var(--gradient-1);
  align-items: center;
  gap: var(--gap-4);
}
.schedule-icon {
  height: 36px;
  width: 32px;
  position: relative;
  object-fit: cover;
}
.request-service {
  position: relative;
  font-size: var(--fs-16);
  line-height: 105%;
  font-weight: 500;
  font-family: var(--font-inter);
  color: var(--color-black);
  text-align: left;
}

.call-button {
  cursor: pointer;
  border: 1.5px solid var(--color-white);
  background-color: transparent;
  
  /* Точні розміри контуру кнопки */
  width: 180px;
  height: 49px;
  
  border-radius: var(--br-15);
  filter: drop-shadow(0 4px 20.1px rgba(0, 0, 0, 0.25));
  box-sizing: border-box;

  /* Центрування вмісту та відступ між іконкою й текстом */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
}

.phone-icon {
  width: 22px !important;
  height: var(--height-28);
  object-fit: cover;
  flex-shrink: 0;
}

.call-now {
  font-size: var(--fs-16);
  line-height: 105%;
  font-weight: 500;
  font-family: var(--font-inter);
  color: var(--color-white);
  text-align: left;
  white-space: nowrap;
}



.home-section {
  position: sticky;
  top: 0;
  left: calc(50% - 720px);
  width: 100%;
  display: flex;
  align-items: flex-start;
  z-index: 99;
}
.logo,
.navigation-bar {
  flex: 1;
  display: flex;
  box-sizing: border-box;
}
.navigation-bar {
  position: relative;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  padding: var(--padding-0) 44px var(--padding-2) var(--padding-30);
  gap: var(--gap-10) 31.1px;
  max-width: 100%;
  text-align: left;
  font-size: var(--fs-14);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.logo {
  align-items: flex-start;
  padding: 1.8px var(--padding-0) var(--padding-0);
  min-width: 187px;
  max-width: 292px;
}
.logo-icon {
  height: 73px;
  width: 187px;
  position: relative;
  object-fit: cover;
}
.home,
.services {
  height: var(--height-15);
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) 7px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
}
.services {
  padding: var(--padding-0) var(--padding-6) var(--padding-0) var(--padding-0);
}
.about-us,
.contact,
.service-areas {
  position: relative;
  line-height: 105%;
  font-weight: 300;
}
.contact,
.service-areas {
  flex: 1;
  display: inline-block;
  flex-shrink: 0;
}
.service-areas {
  text-align: center;
  width: 107px;
  min-width: 89px;
  max-width: 108px;
}
.contact {
  width: 165px;
  min-width: 52px;
  max-width: 166px;
}
.phone {
  color: inherit;         /* Зберігає оригінальний колір тексту вашого класу */
  text-decoration: none;  /* Прибирає стандартне підкреслення посилань */
  
  display: flex;
  align-items: center;
  padding: 21.9px var(--padding-0) 21px;
  box-sizing: border-box;
  gap: 7px;
  min-width: 151px;
  max-width: 151px;
  font-size: var(--fs-15);
}
.phone-icon2 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-01);
  background-color: transparent;
  height: var(--height-32);
  width: 31px;
  position: relative;
  object-fit: cover;
}
.div {
  position: relative;
  line-height: 105%;
  font-weight: 500;
}
.request-button-1 {
  cursor: pointer;
  border: 0;
  padding: 1.8px var(--padding-0) var(--padding-0);
  background-color: transparent;
  height: 42.8px;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.request-button-12 {
  color: inherit;         /* Зберігає оригінальний колір тексту вашого класу */
  text-decoration: none;  /* Прибирає стандартне підкреслення посилань */
  
  height: 41px;
  border-radius: 12px;
  background:
    linear-gradient(86.18deg, #ea9042, #efc15b),
    linear-gradient(#eac376, #eac376);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px var(--padding-20) var(--padding-14);
  box-sizing: border-box;
}
.bottom-line,
.request-service2 {
  font-size: var(--fs-14);
  font-family: var(--font-inter);
}
.request-service2 {
  position: relative;
  line-height: 105%;
  font-weight: 500;
  color: var(--color-black);
  text-align: center;
}
.bottom-line {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  text-align: left;
  color: var(--color-white);
}
.iicon-1-parent,
.pool-spa-hero-card {
  flex: 1;
  display: flex;
  justify-content: center;
}
.pool-spa-hero-card {
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: var(--padding-13) var(--padding-30);
  box-sizing: border-box;
  gap: 2.7px;
  max-width: 100%;
}
.iicon-1-parent {
  align-items: center;
  gap: 8.9px;
  min-width: 217px;
  max-width: 342px;
}
.iicon-1 {
  width: 51px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.group-8-column-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.9px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-6);
  min-width: 150px;
  max-width: 230.7px;
}
.fast-response,
.were-here-when {
  align-self: stretch;
  position: relative;
  line-height: 105%;
}
.fast-response {
  font-weight: 500;
}
.were-here-when {
  font-size: var(--fs-11);
  letter-spacing: 0.01em;
}
.icon-2-parent {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9.9px;
  min-width: 199px;
  max-width: 317px;
}
.icon-2 {
  width: 50px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.group-9-column-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.9px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-6);
  min-width: 167px;
}
.icon-3-parent {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9.9px;
  min-width: 192px;
  max-width: 331px;
}
.icon-3 {
  width: 54px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.group-10-column-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-6);
  min-width: 174px;
}
.icon-4-parent {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9.9px;
  min-width: 201px;
  max-width: 273px;
}
.group-11-column-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-6);
}
.our-services,
.service-intro-content {
  display: flex;
  align-items: flex-start;
  max-width: 100%;
  z-index: 2;
}
.our-services {
  align-self: stretch;
  background-color: var(--color-gray-200);
  justify-content: center;
  padding: 166px var(--padding-30) 71px;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  margin-top: -2px;
  text-align: left;
  font-size: var(--fs-11);
  color: var(--color-black);
  font-family: var(--font-inter);
}
.service-intro-content {
  width: 599px;
  margin: 0 !important;
  position: absolute;
  top: 32px;
  left: 114px;
  flex-direction: column;
  gap: var(--gap-4);
  flex-shrink: 0;
}
.complete-home-service,
.our-services2 {
  align-self: stretch;
  position: relative;
  line-height: 100%;
}
.our-services2 {
  letter-spacing: 0.1em;
  background: linear-gradient(89.27deg, #ea9143, #e6a141);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.complete-home-service {
  margin: 0;
  font-size: 35px;
  letter-spacing: -0.03em;
  font-weight: 700;
  font-family: inherit;
}
.keep-your-home {
  align-self: stretch;
  height: 52px;
  position: relative;
  font-size: var(--fs-14);
  letter-spacing: 0.01em;
  line-height: 150%;
  font-weight: 600;
  color: var(--color-lightslategray);
  display: inline-block;
  flex-shrink: 0;
}
.our-services3 {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-0);
  max-width: 1211.9px;
  row-gap: var(--gap-20);
  z-index: 1;
  flex-shrink: 0;
}
.hvac,
.service-display-cards {
  display: flex;
  flex-direction: column;
}
.hvac {
  flex: 1;
  align-items: flex-start;
  min-width: 364px;
  max-width: 383px;
  text-align: left;
  font-size: var(--fs-14);
  color: var(--color-dimgray-300);
  font-family: var(--font-inter);
}
.service-display-cards {
  align-self: stretch;
  height: 567px;
  border-radius: var(--br-5);
  background-color: var(--color-white);
  border: 3px solid var(--color-whitesmoke-100);
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-end;
  padding: var(--padding-0) var(--padding-0) var(--padding-23);
  max-height: 567px;
  max-width: 100%;
}
.bottom-1,
.image-icon {
  position: relative;
  flex-shrink: 0;
}
.image-icon {
  width: 552.1px;
  max-height: 100%;
  object-fit: cover;
  max-width: 147%;
  z-index: 1;
}
.bottom-1 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  z-index: 2;
  margin-top: -110.8px;
}
.service-card-headers {
  width: 179px;
  height: 51px;
  display: flex;
  align-items: center;
  font-size: var(--fs-20);
  color: var(--color-gray-1100);
}
.hvac-icon {
  width: var(--width-80);
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.hvac2 {
  margin: 0;
  width: 99px;
  position: relative;
  font-size: inherit;
  line-height: 120%;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  flex-shrink: 0;
}
/* Застосовуємо стилі для ВСІХ подібних блоків із підзаголовками */
[class*="repair-replacement"] {
  align-self: stretch;
  height: auto !important;
  position: relative;
  line-height: 120%;
  font-weight: 600;
  white-space: normal !important;
  display: block !important;
  flex-shrink: 0;
  text-align: left !important;

  /* Робимо зазор у 5 пікселів до наступного текстового блоку */
  margin-bottom: 5px !important;
}

/* Застосовуємо відступ для ВСІХ батьківських блоків цієї групи */
[class*="repair-replacement"][class*="-parent"] {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) 21px !important;
  box-sizing: border-box;
  gap: var(--gap-3);
  max-width: 100%;
}

.stay-comfortable-year-round {
  width: 345px;
  position: relative;
  line-height: 145%;
  font-weight: 500;
  color: var(--color-dimgray-200);
  display: inline-block;
  max-width: 100%;
}
.feature-item,
.text {
  align-self: stretch;
  display: flex;
}
.text {
  flex-direction: column;
  align-items: flex-start;
  padding: 31px var(--padding-14);
  gap: var(--gap-4);
  font-size: var(--fs-15);
}
.feature-item {
  align-items: center;
  gap: var(--gap-10);
}
.ac-heating {
  position: relative;
  letter-spacing: 0.02em;
  line-height: 100%;
  font-weight: 600;
}
.feature-item2 {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--gap-8);
}
.preventive-maintenance {
  flex: 1;
  position: relative;
  letter-spacing: 0.02em;
  line-height: 100%;
  font-weight: 600;
}
.arrow {
  text-decoration: none; /* Прибирає стандартне підкреслення посилань */
  cursor: pointer;
  color: inherit;       /* Зберігає рідний колір тексту */
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 9px var(--padding-20) var(--padding-0);
  gap: 13px;
}
.learn-more {
  position: relative;
  letter-spacing: -0.01em;
  line-height: 100%;
  font-weight: 600;
  background: var(--gradient-3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.arrow-icon {
  height: var(--height-12);
  width: var(--width-15);
  position: relative;
}
.appliences {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 365px;
  max-width: 385px;
  text-align: left;
  font-size: var(--fs-14);
  color: var(--color-dimgray-300);
  font-family: var(--font-inter);
}
.bottom-3,
.image-icon2 {
  position: relative;
  flex-shrink: 0;
}
.image-icon2 {
  width: 558.2px;
  max-height: 100%;
  object-fit: cover;
  max-width: 148%;
  z-index: 1;
}
.bottom-3 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  z-index: 2;
  margin-top: -113px;
}
.appliance-icon-parent {
  width: 281px;
  height: 53px;
  display: flex;
  align-items: center;
  font-size: var(--fs-20);
  color: var(--color-gray-1100);
}
.appliance-repair,
.fast-reliable-repair {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.appliance-repair {
  margin: 0;
  width: 201px;
  font-size: inherit;
  line-height: 120%;
  font-weight: 700;
  font-family: inherit;
}
.fast-reliable-repair {
  width: 343px;
  height: 89px;
  line-height: 145%;
  font-weight: 500;
  color: var(--color-dimgray-200);
  max-width: 100%;
}
.text2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-1) var(--padding-14);
  gap: var(--gap-4);
  font-size: var(--fs-15);
}
.checkmark-icon6 {
  height: var(--height-29);
  width: var(--width-29);
  position: relative;
  object-fit: cover;
}
.arrow2 {
  text-decoration: none; /* Прибирає стандартне підкреслення посилань */
  cursor: pointer;
  color: inherit;       /* Зберігає рідний колір тексту */
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 39px var(--padding-20) var(--padding-0);
  gap: 13px;
}
.poolspa,
.primary-navigation {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.poolspa {
  height: 684.8px;
  width: 561.5px;
  margin: 0 !important;
  position: absolute;
  top: calc(50% - 353.8px);
  left: calc(50% - 279.6px);
  padding: var(--padding-0) var(--padding-3) var(--padding-0) var(--padding-0);
  max-width: 100%;
  z-index: 1;
  flex-shrink: 0;
  text-align: left;
  font-size: var(--fs-20);
  color: var(--color-gray-1100);
  font-family: var(--font-inter);
}
.primary-navigation {
  width: 100%;
  height: 567px;
  border-radius: var(--br-5);
  background-color: var(--color-white);
  border: 3px solid var(--color-whitesmoke-100);
  padding: var(--padding-0) var(--padding-0) var(--padding-23);
  max-width: 383px;
  max-height: 567px;
}
.image-icon3 {
  width: 561.5px;
  position: relative;
  max-height: 100%;
  object-fit: cover;
  max-width: 149%;
  z-index: 1;
  flex-shrink: 0;
}
.bottom-2,
.pool-spa-header {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  max-width: 100%;
}
.bottom-2 {
  align-items: flex-start;
  gap: var(--gap-10);
  z-index: 2;
  margin-top: -110.1px;
  position: relative;
  flex-shrink: 0;
}
.pool-spa-header {
  align-items: flex-end;
  padding: var(--padding-0) var(--padding-4) var(--padding-0) var(--padding-0);
  box-sizing: border-box;
}
.pool-icon-parent {
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  padding: var(--padding-0) var(--padding-30) var(--padding-0) var(--padding-0);
  gap: var(--gap-10) var(--gap-0);
  row-gap: var(--gap-20);
  z-index: 1;
}
.pool-spa {
  margin: 0;
  flex: 1;
  position: relative;
  font-size: inherit;
  line-height: 120%;
  font-weight: 700;
  font-family: inherit;
  display: inline-block;
  min-width: 150px;
}
.equipment-plumbing-upgrade-parent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-3);
  max-width: 356px;
  z-index: 2;
  margin-top: -1px;
  position: relative;
  font-size: var(--fs-14);
  color: var(--color-dimgray-300);
}
.keep-your-pool {
  width: 309px;
  position: relative;
  line-height: 145%;
  font-weight: 500;
  color: var(--color-dimgray-200);
  
  /* Виправляємо перенесення рядків без додавання відступу */
  display: block !important;
  height: auto !important;
  white-space: normal !important;
  text-align: left !important;
}
.checklist-item-1,
.text3 {
  align-self: stretch;
  display: flex;
  max-width: 100%;
}
.text3 {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-0) var(--padding-14);
  box-sizing: border-box;
  gap: var(--gap-4);
  font-size: var(--fs-15);
  color: var(--color-dimgray-300);
}
.checklist-item-1 {
  align-items: center;
  gap: var(--gap-8);
}
.pumps-filters {
  flex: 1;
  position: relative;
  letter-spacing: 0.02em;
  line-height: 100%;
  font-weight: 600;
  display: inline-block;
  max-width: calc(100% - 37px);
}
.checklist-item-3 {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: 7.2px;
  max-width: 100%;
}
.control-panels-timers {
  flex: 1;
  position: relative;
  letter-spacing: 0.02em;
  line-height: 100%;
  font-weight: 600;
  display: inline-block;
  max-width: calc(100% - 36px);
}
.arrow3 {
  position: relative;
  pointer-events: auto;

  text-decoration: none; /* Прибирає стандартне підкреслення посилань */
  cursor: pointer;
  color: inherit;       /* Зберігає рідний колір тексту */
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: var(--padding-30) var(--padding-20) var(--padding-0);
  gap: 13px;
  font-size: var(--fs-14);
}
.why-choose-gold-line-services {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-2) var(--padding-1);
  box-sizing: border-box;
  max-width: 100%;
  z-index: 3;
  margin-top: -2px;
  position: relative;
  text-align: left;
  font-size: var(--fs-11);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.request-service-button {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  align-content: flex-end;
  padding: var(--padding-24) 47px;
  box-sizing: border-box;
  gap: var(--gap-0);
  max-width: 100%;
}
.img-previev {
  flex: 1.3799;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 1.9px;
  box-sizing: border-box;
  min-width: 308px;
  max-width: 427px;
}
.img-previev-icon {
  height: 263px;
  flex: 1;
  position: relative;
  max-width: 100%;
  overflow: hidden;
  object-fit: cover;
}
.frame-column-1,
.why-choose-gold-line-services2 {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.frame-column-1 {
  flex: 1.255;
  flex-direction: column;
  padding: 9px var(--padding-0) 17.9px 42px;
  gap: 2px;
  min-width: 308px;
  max-width: 464px;
}
.why-choose-gold-line-services2 {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-0) 7px;
  max-width: 100%;
}
.why-choose-gold {
  flex: 1;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 100%;
  display: inline-block;
  background: linear-gradient(89.86deg, #d69d34, #e0ba54);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  max-width: 100%;
}
.trusted-professional-local {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 9px;
  box-sizing: border-box;
  max-width: 413px;
  font-size: 30px;
}
.trusted-professional-local2,
.were-a-team {
  position: relative;
  font-weight: 600;
  display: inline-block;
}
.trusted-professional-local2 {
  margin: 0;
  flex: 1;
  font-size: inherit;
  line-height: 110%;
  font-family: inherit;
  max-width: 413px;
}
.were-a-team {
  width: 100%;
  height: 102px;
  font-size: var(--fs-15);
  line-height: 145%;
  color: var(--color-silver);
  flex-shrink: 0;
  max-width: 422px;
}
.button-about-us {
  text-decoration: none; /* прибирає синє підкреслення */
  color: inherit;       /* зберігає колір тексту */
  cursor: pointer;      /* РОБИТЬ КУРСОР РУЧКОЮ */

  border: 0;
  padding: var(--padding-14) var(--padding-30) var(--padding-14) 32px;
  background-color: transparent;
  width: 149px;
  height: 42px;
  box-shadow: var(--shadow-drop);
  border-radius: var(--br-10);
  background: var(--gradient-1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--gap-18);
}
.about-us2 {
  position: relative;
  font-size: var(--fs-14);
  letter-spacing: -0.06em;
  line-height: 100%;
  font-weight: 600;
  font-family: var(--font-inter);
  color: var(--color-gray-900);
  text-align: left;
}
.arrow-icon-black {
  height: 10.5px;
  display: flex;
  align-items: flex-start;
  padding: 1.2px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
}
.arrow-icon-black2 {
  height: 9.3px;
  width: 12.3px;
  position: relative;
}
.background-shape {
  height: 270px;
  width: var(--width-1);
  position: relative;
  background-color: var(--color-darkslategray-200);
}
.feature-item-container,
.feature-item-container-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.feature-item-container-parent {
  flex: 1;
  padding: 17.9px 53px;
  box-sizing: border-box;
  gap: 21px;
  min-width: 308px;
  max-width: 385px;
  font-size: var(--fs-14);
  color: var(--color-gray-100);
}
.feature-item-container {
  gap: var(--gap-9);
}
.experienced-technicians {
  align-self: stretch;
  position: relative;
  line-height: 100%;
  font-weight: 600;
}
.skilled-professionals-with {
  width: 100%;
  position: relative;
  font-size: var(--fs-12);
  line-height: 100%;
  font-weight: 500;
  color: var(--color-darkgray);
  display: inline-block;
  max-width: 236px;
}
.feature-item-container2 {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-9);
}
.no-hidden-fees {
  width: 100%;
  position: relative;
  font-size: var(--fs-12);
  line-height: 100%;
  font-weight: 500;
  color: var(--color-darkgray);
  display: inline-block;
  max-width: 279px;
}
.feature-item-container3 {
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-9);
}
.professional-service-you {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-12);
  line-height: 100%;
  font-weight: 500;
  color: var(--color-darkgray);
}
.feature-item-container4 {
  width: 261px;
  align-items: flex-start;
  gap: var(--gap-9);
}
.feature-item-container4,
.our-customers,
.our-customers2 {
  display: flex;
  flex-direction: column;
}
.our-customers {
  align-self: stretch;
  align-items: center;
  padding: var(--padding-24) var(--padding-30) 46px;
  box-sizing: border-box;
  max-width: 100%;
  z-index: 4;
  margin-top: -2px;
  position: relative;
  text-align: left;
  font-size: var(--fs-11);
  color: var(--color-gray-1000);
  font-family: var(--font-inter);
}
.our-customers2 {
  width: 100%;
  align-items: flex-end;
  max-width: 1348px;
}
.our-customers3,
.top-3 {
  width: 100%;
  display: flex;
  align-items: center;
  max-width: 1277px;
}
.our-customers3 {
  flex-direction: column;
  gap: 14px;
}
.top-3 {
  flex-wrap: wrap;
  align-content: center;
  gap: var(--gap-8);
}
.our-customers-parent {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: var(--min-w-310);
  max-width: 100%;
}
.our-customers4,
.what-our-clients {
  align-self: stretch;
  position: relative;
}
.our-customers4 {
  letter-spacing: 0.1em;
  line-height: 100%;
  background: var(--gradient-4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.what-our-clients {
  margin: 0;
  font-size: var(--fs-26);
  letter-spacing: -0.01em;
  line-height: 110%;
  font-weight: 700;
  font-family: inherit;
}
.real-feedback-from {
  align-self: stretch;
  position: relative;
  font-size: var(--fs-13);
  letter-spacing: -0.03em;
  line-height: 100%;
  font-weight: 600;
  color: var(--color-lightslategray);
}
.aroow {
  text-decoration: none; /* прибирає синє підкреслення */
  color: inherit;       /* зберігає колір тексту */
  cursor: pointer;      /* РОБИТЬ КУРСОР РУЧКОЮ */

  height: 17.9px;
  display: flex;
  align-items: center;
  padding: 5.9px 67px var(--padding-0);
  box-sizing: border-box;
  gap: var(--gap-11);
  font-size: var(--fs-12);
  color: var(--color-darkslategray-100);
}
.read-more-reviews {
  position: relative;
  letter-spacing: -0.03em;
  line-height: 100%;
  font-weight: 600;
}
.our-customers-row-1 {
  width: 100%;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: var(--padding-0) 71px var(--padding-0) var(--padding-0);
  gap: 26.5px;
  max-width: 1277px;
  font-size: var(--fs-13);
  color: var(--color-slategray-200);
}
.our-customers-row-1,
.reviev-1,
.stars {
  display: flex;
  box-sizing: border-box;
}
.reviev-1 {
  height: 154px;
  flex: 1.0073;
  border-radius: var(--br-5);
  background-color: var(--color-white);
  border: 2px solid var(--color-whitesmoke-100);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-13) 83px var(--padding-13) var(--padding-20);
  isolation: isolate;
  min-width: var(--min-w-310);
  max-width: 100%;
}
.stars {
  width: 103px;
  height: 27px;
  align-items: center;
  padding: var(--padding-0) var(--padding-0) var(--padding-4);
  z-index: 1;
}
.star-icon,
.star-icon2 {
  height: var(--height-23);
  width: var(--width-23);
  position: relative;
  object-fit: cover;
  z-index: 1;
}
.star-icon2 {
  z-index: 2;
  margin-left: -3px;
}
.star-icon3 {
  height: var(--height-23);
  z-index: 3;
}
.star-icon3,
.star-icon4,
.star-icon5 {
  width: var(--width-23);
  position: relative;
  object-fit: cover;
  margin-left: -3px;
}
.star-icon4 {
  height: var(--height-23);
  z-index: 4;
}
.star-icon5 {
  max-height: 100%;
  z-index: 5;
}
.great-service-the-technician {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-11);
  z-index: 2;
  margin-top: -3px;
  position: relative;
}
.great-service-the {
  flex: 1;
  position: relative;
  letter-spacing: -0.01em;
  line-height: 145%;
  font-weight: 600;
  display: inline-block;
  max-width: 278px;
}
.chicago-il,
.michael-t {
  align-self: stretch;
  position: relative;
  letter-spacing: -0.01em;
  line-height: var(--lh-16);
  color: var(--color-gray-700);
  z-index: 3;
  margin-top: -3px;
}
.chicago-il {
  letter-spacing: -0.05em;
  font-weight: 600;
  color: var(--color-slategray-100);
  white-space: pre-wrap;
  z-index: 4;
}
.reviev-2 {
  height: 154px;
  flex: 1.08;
  border-radius: var(--br-5);
  background-color: var(--color-white);
  border: 2px solid var(--color-whitesmoke-100);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-13) 63px var(--padding-13) var(--padding-20);
  isolation: isolate;
  min-width: var(--min-w-310);
  max-width: 100%;
}
.our-pool-has {
  flex: 1;
  position: relative;
  letter-spacing: -0.01em;
  line-height: 145%;
  font-weight: 600;
  display: inline-block;
  max-width: 297px;
}
.reviev-3 {
  height: 154px;
  flex: 1;
  border-radius: var(--br-5);
  background-color: var(--color-white);
  border: 2px solid var(--color-whitesmoke-100);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--padding-13) 85px var(--padding-13) var(--padding-20);
  isolation: isolate;
  min-width: var(--min-w-310);
  max-width: 100%;
}
.fast-friendly-and-affordable {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) var(--padding-30);
  z-index: 2;
  margin-top: -3px;
  position: relative;
}
.fast-friendly-and {
  flex: 1;
  position: relative;
  letter-spacing: -0.01em;
  line-height: 145%;
  font-weight: 600;
  display: inline-block;
  max-width: 276px;
}



.our-service-areas {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: var(--padding-1) var(--padding-6) var(--padding-2);
  box-sizing: border-box;

  max-width: 100%;
  z-index: 5;
  margin-top: -2px;
  position: relative;
  text-align: left;
  font-size: var(--fs-11);
  color: var(--color-white);
  font-family: var(--font-inter);
}

.our-service-areas.full-bleed::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: max(100vw, 100%);
  z-index: -1;

  /* Беремо колір з вашого inline-стилю style="--bg-color: #0B1014;" */
  background-color: var(--bg-color);

  /* Картинка накладається ПОВЕРХ кольору, стоїть по центру і НЕ розтягується */
  background-image: url(./public/OUR-SERVICE-AREAS@3x.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain; /* або auto, щоб картинка не розстягувалася за межі свого розміру */
}



.our-service-areas2 {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-0);
  max-width: 1317px;
  row-gap: var(--gap-20);
}
.our-service-areas-column-0,
.our-service-areas-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.our-service-areas-column-0 {
  flex: 1;
  padding: 23.9px var(--padding-0);
  box-sizing: border-box;
  gap: 29px;
  min-width: 356px;
  max-width: 374px;
}
.our-service-areas-parent {
  align-self: stretch;
  gap: var(--gap-8);
}
.serving-chicago,
.we-proudly-provide {
  position: relative;
  display: inline-block;
}
.serving-chicago {
  margin: 0;
  width: 283px;
  font-size: var(--fs-26);
  letter-spacing: -0.01em;
  line-height: 110%;
  font-weight: 700;
  font-family: inherit;
}
.we-proudly-provide {
  width: 100%;
  font-size: var(--fs-13);
  letter-spacing: -0.03em;
  line-height: 145%;
  font-weight: 600;
  color: var(--color-gray-400);
  max-width: 374px;
}
.button-view-service-areas {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  position: relative;
  isolation: isolate;
  font-size: var(--fs-12);
  color: var(--color-whitesmoke-200);
}
.button-background-shape {
  cursor: pointer;
  border: 1.5px solid var(--color-dimgray-100);
  padding: var(--padding-01);
  background-color: transparent;
  height: 35px;
  width: 176px;
  position: relative;
  filter: drop-shadow(0 4px 20.1px rgba(0, 0, 0, 0.25));
  border-radius: var(--br-10);
  box-sizing: border-box;
  z-index: 0;
}
.mappoint-icon,
.view-service-areas {
  position: absolute;
  margin: 0 !important;
}
.mappoint-icon {
  height: var(--height-24);
  width: 24px;
  top: calc(50% - 11.4px);
  left: 8.9px;
  object-fit: cover;
  z-index: 1;
}
.view-service-areas {
  top: calc(50% - 5.4px);
  left: calc(50% - 154.1px);
  line-height: 100%;
  font-weight: 500;
  display: inline-block;
  min-width: 112px;
  z-index: 2;
}
.areas {
  height: 260px;
  display: flex;
  align-items: center;
  gap: 27px;
  text-align: center;
  font-size: var(--fs-24);
}
.area-panel-background {
  height: 260px;
  width: 2px;
  position: relative;
  background-color: var(--color-darkslategray-300);
}
.area-content-wrapper {
  height: 237.9px;
  display: flex;
  align-items: flex-start;
  padding: var(--padding-0) var(--padding-0) 4.9px;
  box-sizing: border-box;
  gap: var(--gap-11);
}
.area-icon-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.checkmark-icon-white {
  width: var(--width-29);
  position: relative;
  max-height: 100%;
  object-fit: cover;
}
.h3 {
  margin: 0;
  align-self: stretch;
  position: relative;
  font-size: inherit;
  line-height: 100%;
  font-weight: 700;
  font-family: inherit;
}
.chicago-parent {
  height: 233px;
  width: 187px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  text-align: left;
  font-size: var(--fs-16);
}
.chicago {
  align-self: stretch;
  position: relative;
  letter-spacing: -0.01em;
  line-height: 110%;
}
.need-service,
.need-service2 {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  position: relative;
  max-width: 100%;
}
.need-service {
  align-self: stretch;
  padding: var(--padding-0) var(--padding-0) var(--padding-2);
  z-index: 6;
  margin-top: -2px;
  text-align: left;
  font-size: var(--fs-11);
  color: var(--color-gray-800);
  font-family: var(--font-inter);
}
.need-service2 {
  flex: 1;
  padding: var(--padding-2) var(--padding-0) var(--padding-3);
  isolation: isolate;
  background-image: url(./public/NEED-SERVICE@3x.png);
  background-repeat: no-repeat;

  /* Прив'язуємо картинку до верхнього краю */
  background-position: top center;

  /* Збільшуємо висоту фону на 3px, щоб нижні 3px вийшли за межі блоку і обрізалися */
  background-size: 100% calc(100% + 3px);
}
.call-to-action-background {
  height: 161px !important; /* Перебиває будь-які інші обмеження */
  flex: 1;
  position: relative;
  background-color: var(--color-white);
  min-width: 370px;
  max-width: 807px;
  z-index: 1;

  margin-bottom: -3px !important;
}
.need-service-parent {
  width: 374px;
  margin: 0 !important;
  position: absolute;
  top: calc(50% - 58px);
  left: 117px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  z-index: 1;
}
.need-service3 {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.1em;
  line-height: 100%;
  background: linear-gradient(89.55deg, #ea9143, #e6a141);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contact-us-today,
.lets-get-it {
  align-self: stretch;
  position: relative;
  letter-spacing: 0.01em;
}
.lets-get-it {
  margin: 0;
  font-size: var(--fs-36);
  line-height: 110%;
  font-weight: 700;
  font-family: inherit;
}
.contact-us-today {
  font-size: var(--fs-13);
  line-height: 145%;
  font-weight: 600;
  color: var(--color-slategray-200);
}
.buttons-service,
.servicce-button {
  display: flex;
  align-items: flex-start;
}
.buttons-service {
  width: 374px;
  margin: 0 !important;
  position: absolute;
  top: calc(50% - 21px);
  left: calc(50% - 223px);
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--gap-18);
  z-index: 2;
  font-size: var(--fs-14);
  color: var(--color-black);
}
.servicce-button {
  text-decoration: none; /* прибирає синє підкреслення */
  color: inherit;       /* зберігає колір тексту */
  cursor: pointer;      /* РОБИТЬ КУРСОР РУЧКОЮ */

  align-self: stretch;
}
.proposition-details {
  box-shadow: var(--shadow-drop);
  border-radius: var(--br-15);
  background: var(--gradient-1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px var(--padding-24) 7px var(--padding-22);
  gap: var(--gap-3);
}
.schedule-icon2 {
  height: var(--height-28);
  width: 25px;
  position: relative;
  object-fit: cover;
}
.request-service3 {
  position: relative;
  letter-spacing: -0.06em;
  line-height: 105%;
  font-weight: 500;
}
.call-button2 {
  text-decoration: none; /* Прибирає підкреслення */
  /* Переконайтеся, що у вас задані базові стилі (наприклад, padding, border тощо) */

  cursor: pointer;
  border: 0;
  padding: var(--padding-01);
  background-color: transparent;
  height: 42px;
  flex: 1;
  position: relative;
}


.call-button-background {
  position: absolute;
  top: calc(50% - 21px);
  left: calc(50% - 92.5px);
  filter: drop-shadow(0 4px 20.1px rgba(0, 0, 0, 0.25));
  border-radius: var(--br-15);
  border: 2px solid var(--color-darkslategray-400);
  box-sizing: border-box;
  width: 130px;
  height: 42px;
}
.call-now2 {
  position: absolute;
  top: calc(50% - 8px);
  right: 78px;
  font-size: var(--fs-14);
  letter-spacing: -0.03em;
  line-height: 105%;
  font-weight: 500;
  font-family: var(--font-inter);
  color: var(--color-gray-500);
  text-align: left;
  display: flex;
  align-items: center;
  width: 57px;
  min-width: 57px;
}
.phone-icon-black {
  position: absolute;
  top: calc(50% - 12px);
  left: 23px;
  width: var(--width-23);
  height: var(--height-24);
  object-fit: cover;
}
.bottom-info,
.bottom-info-row-0 {
  align-self: stretch;
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
}
.bottom-info {
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-6) var(--padding-0) var(--padding-24);
  gap: var(--gap-6);
  z-index: 7;
  margin-top: -2px;
  position: relative;
  text-align: left;
  font-size: var(--fs-14);
  color: var(--color-white);
  font-family: var(--font-inter);
}
.bottom-info-row-0 {
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  padding: var(--padding-0) 48px var(--padding-0) var(--padding-30);
  gap: var(--gap-20);
}
.home3,
.mile-section {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}
.mile-section {
  flex: 1.1099;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 3.9px var(--padding-0) var(--padding-0);
  gap: var(--gap-10) 38px;
  min-width: var(--min-w-310);
  max-width: 684px;
}
.home3 {
  height: var(--height-15);
  padding: var(--padding-0) var(--padding-1) var(--padding-0) var(--padding-0);
}
.service-areas2 {
  flex: 1;
  position: relative;
  line-height: 105%;
  font-weight: 300;
  display: inline-block;
  width: 94px;
  flex-shrink: 0;
  min-width: 89px;
  max-width: 94px;
}
.phone2 {
  color: inherit;         /* Зберігає оригінальний колір тексту вашого класу */
  text-decoration: none;  /* Прибирає стандартне підкреслення посилань */
  flex: 1;
  display: flex;
  align-items: center;
  padding: 4.9px 10px var(--padding-0);
  box-sizing: border-box;
  gap: 7px;
  min-width: 171px;
  max-width: 202px;
  font-size: var(--fs-15);
}
.contact-number-value {
  position: relative;
  line-height: 105%;
  font-weight: 500;
  display: inline-block;
  width: 113px;
  flex-shrink: 0;
}
.footer-separator-rect-wrapper {
  height: 36.9px;
  display: flex;
  align-items: flex-start;
  padding: 6.9px var(--padding-0) var(--padding-0);
  box-sizing: border-box;
}
.footer-separator-rect {
  height: 30px;
  width: var(--width-1);
  position: relative;
  background-color: var(--color-gray-300);
}

.icons {
  height: 36.9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4.9px 0;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.icons:hover {
  opacity: 0.8;
}

.icons2 {
  height: var(--height-32);
  width: 95px;
  position: relative;
  display: block;
}

.footer-structural-rect {
  align-self: stretch;
  height: 2px;
  position: relative;
  background-color: var(--color-gray-600);

  /* Розтягуємо на всю ширину екрана */
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}
.bottom-info-row-2 {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: var(--padding-13) 49px var(--padding-13) var(--padding-30);
  box-sizing: border-box;
  gap: var(--gap-9);
  max-width: 100%;
  font-size: var(--fs-11);
  color: var(--color-gray-300);
}
.gold-line-services {
  flex: 1;
  display: inline-block;
  width: 1027px;
  flex-shrink: 0;
  min-width: 246px;
  max-width: 1027px;
}

.privacy-policy1{
  color: inherit;         /* Зберігає оригінальний колір тексту вашого класу */
  text-decoration: none;  /* Прибирає стандартне підкреслення посилань */
}
.gold-line-services,
.privacy-policy {
  color: inherit;         /* Зберігає оригінальний колір тексту вашого класу */
  text-decoration: none;  /* Прибирає стандартне підкреслення посилань */

  position: relative;
  line-height: 100%;
  font-weight: 500;
}
.footer-separator-rect2 {
  height: var(--height-12);
  width: var(--width-1);
  position: relative;
  background-color: var(--color-gray-300);
}

.terms-of-service1{
  color: inherit;         /* Зберігає оригінальний колір тексту вашого класу */
  text-decoration: none;  /* Прибирає стандартне підкреслення посилань */
}
.terms-of-service {
  color: inherit;         /* Зберігає оригінальний колір тексту вашого класу */
  text-decoration: none;  /* Прибирає стандартне підкреслення посилань */

  flex: 1;
  position: relative;
  line-height: 100%;
  font-weight: 500;
  display: inline-block;
  width: 91px;
  flex-shrink: 0;
  min-width: 88px;
  max-width: 91px;
}
@media screen and (max-width: 1350px) {
  .hero-body {
    max-width: 100%;
  }
  .navigation-bar {
    padding-right: var(--padding-22);
    box-sizing: border-box;
  }
  .our-services3 {
    max-width: 100%;
  }
  .request-service-button {
    padding-left: var(--padding-23);
    padding-right: var(--padding-23);
    box-sizing: border-box;
  }
  .our-customers2,
  .our-customers3,
  .top-3 {
    max-width: 100%;
  }
  .our-customers-row-1 {
    padding-right: 35px;
    box-sizing: border-box;
    max-width: 100%;
  }
  .our-service-areas2 {
    max-width: 100%;
  }
  .bottom-info-row-0,
  .bottom-info-row-2 {
    padding-right: var(--padding-24);
    box-sizing: border-box;
  }
}
@media screen and (max-width: 1150px) {
  .icon-2-parent,
  .icon-3-parent,
  .icon-4-parent,
  .iicon-1-parent {
    max-width: 100%;
  }
  .our-services {
    padding-bottom: 46px;
    box-sizing: border-box;
  }
  .gold-line-services {
    max-width: 100%;
  }
}
@media screen and (max-width: 800px) {
  .hero {
    height: auto;
    min-height: 702px;
  }
  .hero-main,
  .hvac-poolspa-appliance-parent {
    max-width: 100%;
  }
  .reliable-service-for-container {
    font-size: 48px;
    line-height: 48px;
    max-width: 100%;
  }
  .guarantee-info {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .navigation-bar {
    gap: var(--gap-16);
  }
  .complete-home-service {
    font-size: 28px;
    line-height: 28px;
  }
  .frame-column-1 {
    flex: 1;
  }
  .trusted-professional-local2 {
    font-size: var(--fs-24);
    line-height: 26px;
  }
  .reviev-1,
  .reviev-3 {
    flex: 1;
  }
  .call-to-action-background {
    max-width: 100%;
  }
  .lets-get-it {
    font-size: 29px;
    line-height: 32px;
  }
  .mile-section {
    max-width: 100%;
  }
}
@media screen and (max-width: 450px) {
  .reliable-service-for-container {
    font-size: var(--fs-36);
    line-height: 36px;
  }
  .button {
    max-width: 100%;
  }
  .icon-2-parent,
  .icon-3-parent,
  .iicon-1-parent {
    flex-wrap: wrap;
  }
  .our-services {
    padding-bottom: var(--padding-30);
    box-sizing: border-box;
  }
  .complete-home-service {
    font-size: 21px;
    line-height: 21px;
  }
  .hvac {
    max-width: 100%;
  }
  .hvac2 {
    font-size: var(--fs-16);
    line-height: var(--lh-19);
  }
  .appliences {
    max-width: 100%;
  }
  .appliance-repair {
    font-size: var(--fs-16);
    line-height: var(--lh-19);
  }
  .poolspa {
    height: auto;
  }
  .primary-navigation {
    max-width: 100%;
  }
  .pool-spa {
    font-size: var(--fs-16);
    line-height: var(--lh-19);
  }
  .img-previev {
    max-width: 100%;
  }
  .frame-column-1 {
    padding-left: 21px;
    box-sizing: border-box;
    max-width: 100%;
  }
  .trusted-professional-local {
    max-width: 100%;
  }
  .trusted-professional-local2 {
    font-size: 18px;
    line-height: 20px;
    max-width: 100%;
  }
  .were-a-team {
    max-width: 100%;
  }
  .feature-item-container-parent {
    padding-left: var(--padding-20);
    padding-right: var(--padding-20);
    box-sizing: border-box;
    max-width: 100%;
    flex: 1;
  }
  .what-our-clients {
    font-size: 21px;
    line-height: 23px;
  }
  .aroow {
    padding-left: var(--padding-20);
  }
  .aroow,
  .reviev-1,
  .reviev-2,
  .reviev-3 {
    padding-right: var(--padding-20);
    box-sizing: border-box;
  }
  .serving-chicago {
    font-size: 21px;
    line-height: 23px;
  }
  .h3 {
    font-size: 19px;
    line-height: var(--lh-19);
  }
  .lets-get-it {
    font-size: 22px;
    line-height: 24px;
  }
  .mile-section {
    gap: 19px;
  }
  .phone2 {
    flex: 1;
  }
}