.welcome-hero-area,
.welcome-slider-area,
.welcome-hero-area,
.welcome-slider-area div {
  height: unset;
}

body {
    margin-top: -20px;
}

.inner-hero {
  position: relative;
  height: 400px;

  @media (max-width: 768px) {
    height: 100vh;
  }

  .img-container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: black;
        opacity: 0.5;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .text-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    height: 100%;
    padding-inline: 1rem;
    max-width: 900px;
    margin-inline: auto;

    * {
        color: white;
    }

    h1 {
        text-wrap: balance;
        text-align: center;

        @media (max-width: 768px) { 
            font-size: 3rem;
            line-height: calc(3rem * 1.3);
        }
    }
  }
}

.main-content {
    padding-block: 100px;

    @media (max-width: 768px) { 
        * {
            font-size: 14px;
            line-height: calc(14px * 1.5);
        }
    }
    

    h2 {
        font-size: 25px;
        margin-top: 4rem;
        margin-bottom: 2rem;

        @media (max-width: 768px) { 
            font-size: 21px;
            line-height: calc(21px * 1.3);
        }
    }

    p {
        margin-bottom: 1rem;
    }

    ul {
        margin-bottom: 2rem;
    }

    li {
        list-style: inside;
        margin-bottom: 1rem;
    }
}