.about__area {
  margin-bottom: 60px;
  @media (max-width:991px) {
    margin-bottom: 32px;
  }
  .heading--primary {
    margin-bottom: 32px;
  }

  .actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;

    @media (max-width: 991px) {
      margin-bottom: 24px;
    }
  }

  .image {
    text-align: center;
    // padding: 24px;
    img {
      width: 80%;
    }
  }
}

.block__area {
  .image {
    overflow: hidden;
    border-radius: 16px;
    img {
      border-radius: 16px;
      transition: transform ease-in 0.5s;
      width: 100%;
      height: 320px;
      object-fit: cover;
      object-position: center;
    }

    &:hover img {
      transform: rotate(10deg) scale(1.2);
      transition: transform ease-in 0.5s;
    }
  }
}



.bg--1 {
  background-color: $c-background2;
  padding: 32px;
  border-radius: 24px;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;

  @media (max-width:991px) {
    margin-bottom: 32px;
  }

  &::after {
    content: "";
    border-radius: 24px;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background-image: linear-gradient(
        to right,
        rgba($c-background2, 0.7),
        rgba($c-background2, 0.7)
      ),
      url("/assets/images/shape--004.svg");
    background-size: contain;
    background-position: right top;
    background-repeat: no-repeat;
  }
}

.bg--2 {
  background-color: $c-dark;
  padding: 32px;
  border-radius: 24px;
  margin-bottom: 60px;
  @media (max-width:991px) {
    margin-bottom: 32px;
  }
}

.bg--3 {
  background-color: $c-main-dark;
  padding: 32px;
  border-radius: 24px;
  margin-bottom: 60px;

  @media (max-width:991px) {
    margin-bottom: 32px;
  }

  h3 {
    color: $c-dark !important;
  }

  p {
    color: $c-dark;
  }
}

.image--box--2 {
  overflow: hidden;

  img {
    width: 100%;
    transition: transform ease-in 0.5s;
    opacity: 0.8;
  }

  &:hover img {
    transform: rotate(-2deg) scale(1.1);
    transition: transform ease-in 0.5s;
    opacity: 1;
  }
}

.callus__area {
  background-image: url("/assets/images/bg--02.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: clamp(16px, 3vw, 32px);

  border: 1px solid rgba($c-second, 0.1);
  border-radius: 24px;

  svg {
    height: 100px;
  }

  .numbers {
    display: flex;
    align-items: center;
    margin-left: 24px;
    flex-direction: column;
    h4 {
      color: rgba($c-main, 1);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .action {
    text-align: right;
    @media (max-width: 700px) {
      text-align: center;
    }
  }
}

.contact__area {
  background-color: rgba($c-background2, 1);
  padding: clamp(16px, 3vw, 32px);

  border: 1px solid rgba($c-second, 0.1);
  border-radius: 24px;
}

.image--box--2 {
  img {
    width: 100%;
  }
}

.image--box {
  // padding: 8px;
  position: relative;
  z-index: 0;

  img {
    height: 100%;
    width: 96%;
    border-radius: 16px;
    margin-right: 16px;
    margin-top: 16px;
  }

  &::before {
    content: "";
    background-image: url("/assets/images/bg--01.jpg");
    background-size: cover;
    width: 96%;
    height: 96%;
    border-radius: 16px;
    position: absolute;
    top: 0px;
    right: 0;
    z-index: -1;
  }
}