@use "../../abstract/" as *;

/* ========== Component : banner Style  ============= */
.inner {
    &_banner {
        &-section {
            padding-top: 100px;
            padding-bottom: 60px;
            position: relative;
            overflow: hidden;

            @media (min-width:768px) {
                padding-top: 84px;
                padding-bottom: 80px;
            }

            @media (min-width:992px) {
                padding-top: 160px;
                padding-bottom: 120px;
            }

            @media (min-width:1200px) {
                padding-top: 190px;
            }

        }
        &-background-image {
            position: absolute;
            inset: 0;
            z-index: -1;
            width: 100%;
            height: 100%;
        }

        &-content-block {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            row-gap: 15px;

            @media (min-width:576px) {
                row-gap: 40px;
            }
        }

        &-title {
            text-align: center;
            color: $black;
            @include heading-70();
        }
    }
}

.banner__page-navigator {
    display: flex;
    justify-content: center;
    align-items: center;
    @include body-18;
    
    color: $black;
    li{
        text-transform: capitalize;
        &:after{
            content: "\f054";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            font-size: 13px;
            margin:0 10px;
            display: inline-block;
        }
        &:last-child{
            &:after{
                display: none;
            }
        }
    }
    .active {
        color: $primary;
    }
    a{
        color: inherit;
    }
}