@use "../utilities" as *;

/**----------------------------------------
START: Page Header CSS
----------------------------------------*/
.page-header{
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 120px 0;
    .overlay{
        background: linear-gradient(90deg, #F3F7FB 43.21%, rgba(243, 247, 251, 0.24) 63.66%);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .bg-img{
        @include background;
        background-size: contain;
        background-position: top right;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
        @include breakpoint(xl){
            background-size: cover;
        }
    }
    .shapes{
        @include breakpoint(sm){
            display: none;
        }
        .shape{
            position: absolute;
            z-index: -1;
            &.shape-1{
                bottom: 20px;
                left: 50px;
                @include breakpoint(xxxl){
                    left: 0;
                }
            }
            &.shape-2{
                bottom: 0;
                left: 40%;
            }
            &.shape-3{
                top: 0;
                right: 0;
            }
        }
    }
}

.page-header-content{
    @include breakpoint(xxxl){
        padding-left: 100px;
    }
    @include breakpoint(xxl){
        padding-left: 150px;
    }
    @include breakpoint(xl){
        padding-left: 200px;
    }
    @include breakpoint(sm){
        padding-left: 0;
    }
    .title{
        font-size: 48px;
        font-weight: 600;
        margin-bottom: 15px;
        line-height: 1;
    }
    .sub-title{
        font-size: 16px;
        font-weight: 500;
        .icon{
            font-size: 16px;
            padding: 0 5px;
        }
        .inner-page{
            color: var(--ed-color-theme-primary);
        }
    }
}


/* !END:  Page Header CSS */