website/sass/pages/home.scss

// Hero Section
.hero {
  background: url('/images/hero/hero-bg.jpg') center center / cover no-repeat fixed;
  min-height: 100vh;
  padding: 80rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  &__container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }

  &__content {
    max-width: 494rem;
  }

  &__title {
    margin-bottom: var(--mb-16);
  }

  &__description {
    margin-bottom: var(--mb-40);
  }

  &__image {
    position: absolute;
    top: 50%;
    right: -20rem;
    transform: translateY(-50%);
  }
}

// Section MAP
.open-map {
  background: var(--map-section-bg) center center / contain no-repeat;
  display: flex;
  margin: 30rem 0;
  align-items: center;
  justify-content: center;
  min-height: 660rem;
  &__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  &__img {
    background: var(--map-section-icon) center center / cover no-repeat;
    width: 144rem;
    height: 144rem;
    margin-bottom: var(--mb-16);
  }
  &__title {
    margin-bottom: var(--mb-16);
  }
  &__icon {
    position: absolute;
    left: calc(50% - 25rem);
    top: calc(50% - 25rem);
    &:nth-child(1) {
      width: 96rem;
      left: calc(50% + 175rem);
      top: calc(50% - 85rem);
    }
    &:nth-child(2) {
      width: 72rem;
      left: calc(50% + 285rem);
      top: calc(50% - -45rem);
    }
    &:nth-child(3) {
      width: 96rem;
      left: calc(50% - 395rem);
      top: calc(50% + -86rem);
    }
    &:nth-child(4) {
      width: 72rem;
      left: calc(50% - 355rem);
      top: calc(50% - -74rem);
    }
    &:nth-child(5) {
      width: 80rem;
      left: calc(50% - -375rem);
      top: calc(50% + 153rem);
    }
    &:nth-child(6) {
      width: 64rem;
      left: calc(50% + 305rem);
      top: calc(50% + -217rem);
    }
    &:nth-child(7) {
      width: 80rem;
      left: calc(50% + -275rem);
      top: calc(50% + 223rem);
    }
    &:nth-child(8) {
      width: 64rem;
      left: calc(50% - 195rem);
      top: calc(50% + -227rem);
    }
  }
}

// Services
.services {

  &__container {
    padding: 50rem 40rem;
    border-radius: var(--border-r-24);
    background-color: var(--bg-green);
  }
  &__item {
    display: flex;
    align-items: center;
    padding-bottom: 60rem;
    gap: 50rem;
    margin-right: -50rem;
    &:nth-child(2n) {
      flex-direction: row-reverse;
      margin-right: auto;
      margin-left: -50rem;
      .services__card {
      justify-content: flex-start;
      }
      .services__img--first  {
        left: auto;
        right: 0;
      }
    }
    &:last-child {
      padding-bottom: 0;
    }

  }
  &__content {
    max-width: 498rem;
  }
  &__title {
    max-width: 357rem;
  }
  &__description {
    margin: 24rem 0;
  }
  &__card {
    position: relative;
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
  }
  &__button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }
  &__img {
    padding: 20rem;
    z-index: 3;
    &--first {
      object-fit: cover;
      z-index: 1;
      max-width: 324rem;
      max-height: 374rem;
      position: absolute;
      top: 50%;
      left: -19rem;
      transform: translateY(-50%);
    }
  }
}

// Singl
.single-section {
margin: 60rem 0;
  overflow: hidden;
  &__container {
    padding: 0rem 40rem 0;
    border-radius: var(--border-r-24);
    background-color: var(--bg-green);
  }
  &__item {
    display: flex;
    align-items: flex-end;
    gap: 50rem;
  }
  &__content {
    max-width: 498rem;
    padding: 90rem 0;
  }
  &__title {
    max-width: 357rem;
  }
  &__description {
    margin: 24rem 0;
  }
  &__card {
    position: relative;
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
  }

  &__img {
    padding: 0;
    z-index: 3;
    width: 90%;
  }
}