.IntroSection {
    display: grid;
    width: 100%;
    grid-template-columns: 8fr 6fr;
    background: var( --e-global-color-primary );
    position:relative;
    height: 85vh;
    & .wave {
     position:absolute;   
    }
    & h1 {
        font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
        font-size: var( --e-global-typography-primary-font-size );
        font-weight: var( --e-global-typography-primary-font-weight );
        text-transform: var( --e-global-typography-primary-text-transform );
        text-decoration: var( --e-global-typography-primary-text-decoration );
        line-height: var( --e-global-typography-primary-line-height );
        letter-spacing: var( --e-global-typography-primary-letter-spacing );
        color: var( --e-global-color-accent );
    }
    & h1 span {
        display: flex;
        align-items: center;
        gap: 10px;

      &::before {
          display:block;
          height:3px;
          width: 80px;
          background:#fff;
          content:""''
      }
    }
}


ul.IconsList {
    display: flex;
    padding: 0;
    margin: 0;
    flex-direction:column;
    list-style: none;
    gap:15px;
    & li {
        display:flex;
        color:#fff;
        gap:15px;
    }
    & i {
        height:30px;
        width:30px;
        background:#fff;
        color: var( --e-global-color-secondary );
        display: flex;
        border-radius: 10px 0;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
            & svg {

                width: 72%;
    height: auto;
    fill: none !important;
        }
}

.IntroSection__image {
    position:relative;
    & img {
        height: 95vh;
        width:100%;
        object-fit:cover;
        border-bottom-left-radius: 70px;
    }
}

.IntroSection__text {
    display: flex;
    height: 100%;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding: 0 51px;
    gap: 35px;
    position: relative;
    overflow: hidden;
}

.IntroSection__wave {
    position: absolute;
    background: #fff;
    height: 50vh;
    width: 92vh;
    border-radius: 100%;
    right: -38%;
    bottom: -21%;
    opacity: 0.1;
}

@media (max-width: 767px) {
    .IntroSection {
        grid-template-columns:1fr;
        border-bottom-left-radius: 70px;
        padding-top:50px;
        padding-bottom:50px;
        height:95vh;
        & .IntroSection__wave {
            display:none;
        }
        & h1 {
            font-size: var( --e-global-typography-primary-font-size ) !important;
            line-height: var( --e-global-typography-primary-line-height );
            letter-spacing: var( --e-global-typography-primary-letter-spacing );
            & span::before {
                display:none;
            }
        }
    }
    .IntroSection__image {
        position:absolute;
        opacity:0.5;
        height:100%;
        & img {
            height:100% !important;
        }
    }
    .IntroSection__text {
z-index:2;
        padding-left:25px;
    }
}