@use "../../../../styles/abstracts/variables";
@use "../../../../styles/abstracts/mixins";  

.banner{
    background-color: variables.$col-primary;
    padding-bottom: 4rem;

    &__content{
        background: linear-gradient(to bottom, rgba(22,24,26, 0.8), rgba(22,24,26, .9)), url("/assets/images/waves.svg");
        background-repeat: no-repeat;
        color: #000 !important;
        background-size: cover;
        background-position: center;
        color: #FFF;
        display: flex;
        padding: 3rem 3rem;
        // justify-content: center;
        // align-items: center;
        // position: relative;
        border-radius: 6px;

        &__img{
            position: absolute;
            left: 0;
            top: -100px;
        }

        &__text{
            display: flex;
            justify-content: space-between !important;
            align-items: center;

            &__details{
                // max-width: 700px;
                // margin: 0;
                padding-bottom: 1rem;
                display: flex;
                justify-content: space-between;
                gap: 50px;
            }
            h3{
                // @use section__header__text;
                color: #FFF;
                padding-bottom: 1.5rem;
                font-size: 1.5rem;
                line-height: 1.7;
                font-weight: 700;
                max-width: 60%;
                text-transform: capitalize;
            }
            p{
                // @use section__header__paragraph;
                padding-bottom: 4rem;
                color: #FFF;
                font-size: .98rem;
            }
        }
    }
}

// Media Queries @ Phone 
@media only screen and (max-width: 1000px) {
    .banner{
        padding: 0 .3rem;
        &__content{
            padding: 3rem 1.5rem;

            &__text{
                padding-bottom: 5rem;
            }
            h1{
                font-size: 2.5rem;
                padding-top: 3rem;
            }
            p{
                font-size: 1rem;
            }
        }
    }
}