@import '../../styles/global.fonts.scss';
@import '../../styles/global.colors.scss';

.servicesCard {
  color: $dark-gray-text-color;
  background-color: inherit;
  color: inherit;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-top: 12px;
  h2 {
    @include ExtraBoldDark16Mixin;
    color: rgb(41, 41, 41);
  }

  .textContainer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .durationButton {
    padding-bottom: 20px;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    p {
      @include MediumLight14Mixin;
    }
    button {
      @include MediumDark14Mixin;
      color: $primary-blue-color;
    }
  }

  img {
    height: auto;
    cursor: pointer;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    width: 100%;
    height: 0.5px;
    background-color: $light-gray-text-color-opacity;
  }
  .arrowContainer {
    width: 30%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}