main {
  margin-top: var(--body-margin-top);
}

/* HERO SECTION */

.hero-service {
  background-image: url(/images/hero-images/service.jpg);
  height: 450px;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: var(--body-padding-horizontal);
  padding-right: var(--body-padding-horizontal);
}

.hero-service_text {
  font-size: var(--h1-font-size);
  color: var(--light-color);
  text-align: center;
}

span {
  color: var(--main-color);
}

/* ABOUT SERVICE */

.about-service {
  padding-left: var(--body-padding-horizontal);
  padding-right: var(--body-padding-horizontal);
  padding-top: var(--sector-vertical-padding);
  padding-bottom: var(--sector-margin-inside);
}

.about-service_info {
  display: grid;
  grid-template-columns: 150px 1fr;
  margin-bottom: var(--sector-margin-inside);
  column-gap: var(--grid-gap);
}

.about-service_info_icon-container {
  min-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-service_info_icon-container_icon {
  height: 50px;
}

.about-service_info_text-container {
  min-height: 100px;
  display: flex;
  justify-content: center;
  flex-flow: column;
  padding-left: 28px;
}

.about-service_info_text-container_title {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: bold;
  color: var(--main-color);
}

/* CONTACT SERVICE BUTTONS */

.service-contact {
  margin-left: var(--body-padding-horizontal);
  margin-right: var(--body-padding-horizontal);
  display: flex;
  justify-content: center;
}

.left {
  margin-right: 12px;
}

.right {
  margin-left: 12px;
}

#footer {
  margin-top: var(--footer-margin-top);
}

@media only screen and (max-width: 1100px) {

  .hero-service {
    height: 300px;
    padding-left: var(--body-margin-horizontal-rs);
    padding-right: var(--body-margin-horizontal-rs);
  }

  .about-service {
    padding-left: var(--body-margin-horizontal-rs);
    padding-right: var(--body-margin-horizontal-rs);
    padding-top: var(--sector-vertical-padding);
    padding-bottom: var(--sector-margin-inside);
  }

  .about-service_info {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: var(--sector-margin-inside);
    column-gap: var(--grid-gap);
    text-align: center;
  }

  .about-service_info_text-container {
    padding-left: 0px;
  }

  .service-contact {
    margin-left: var(--body-margin-horizontal-rs);
    margin-right: var(--body-margin-horizontal-rs);
    display: grid;
    grid-template-columns: 1fr;
  }

  .left {
    margin-right: 0px;
    margin-bottom: var(--sector-margin-inside);
  }
  
  .right {
    margin-left: 0px;
  }

}