@use '../root' as *;
@use '../utilities' as *;

.medical-service {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 870px;
    @include breakpoint (max-lg){
        height: 583px;
    }
  
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 20px;
      background: rgba(31, 31, 31, 0.30);
      z-index: 1;
    }
  
    &-content {
        border-radius: 14px 14px 0px 0px;
         background: $title-color2;
        padding: 44px 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 125px;
        position: relative;
        z-index: 2;
        bottom: -19%;
        left: 25%;
        @include breakpoint (max-md){
            left: 11%;
        }
        @include breakpoint (max-sm){
            padding: 30px 30px;
            gap: 50px;
            left: 5%;
        }
        @include breakpoint (max-xsmall){
            padding: 30px 30px;
            gap: 65px;
            left: 0%;
        }
        @include breakpoint (max-xxsmall){
            gap: 44px;
        }

        &-info {
            &__sub-title {
                color: $title-color;
                font-family: $body-font;
                font-size: 15px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                text-transform: uppercase;
                opacity: 0.7;
                padding-bottom: 18px;
            }
            &__title {
                color: $title-color;
                font-family: $body-font;
                font-size: 30px;
                font-style: normal;
                font-weight: 600;
                line-height: 24px; /* 80% */
                @include breakpoint (max-xsmall){
                    font-size: 28px;
                }
                @include breakpoint (max-xxsmall){
                    font-size: 23px;
                }
            }
        }
    }
  }
  