@use "../utilities" as *;

/**----------------------------------------
    START: Hero CSS
----------------------------------------*/

.hero-section{
    background-color: #EAEEF5;
    position: relative;
    z-index: 2;
    overflow: hidden;
    .hero-mask-img{
        background-color: var(--bz-color-common-black);
        mask-image: url(../img/shapes/hero-mask-img.png);
        mask-repeat: no-repeat;
        max-width: 960px;
        width: 100%;
        height: 775px;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        @include breakpoint(xxxl){
            max-width: 775px;
        }
        @include breakpoint(lg){
            max-width: 510px;
        }
        @include breakpoint(md){
            max-width: 389px;
        }
        @include breakpoint(sm){
            display: none;
        }
        img{
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
        .overlay{
            background: rgba(30, 110, 231, 0.6);
            mix-blend-mode: multiply;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .overlay-2{
            background: rgba(11, 42, 88, 0.22);
            mix-blend-mode: multiply;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    .shapes{
        .shape{
            position: absolute;
            z-index: -1;
            &.shape-1{
                top: 50px;
                left: 70px;
                animation: hero-anim-2 1s infinite linear alternate-reverse;
            }
            &.shape-2{
                bottom: 0;
                left: 0;
            }
            &.shape-3{
                left: 60%;
                bottom: 50px;
                transform: translateX(-50%);
                animation: hero-anim-1 1s infinite linear alternate-reverse;
            }
            &.shape-4{
                height: 100%;
                bottom: 0;
                left: 0;
                img{
                    height: 100%;
                }
            }
        }
        .round-shape{
            background-color: var(--bz-color-common-white);
            width: 1262px;
            height: 1262px;
            position: absolute;
            top: -52%;
            right: -16%;
            border-radius: 50%;
            z-index: -1;
            @include breakpoint(xxxl){
                right: -35%;
            }
            @include breakpoint(lg){
                display: none;
            }
        }
    }
}

.hero-content{
    padding: 200px 0;
    @include breakpoint(md){
        padding: 100px 0;
    }
    @include breakpoint(sm){
        padding: 70px 0;
    }
    .section-heading{
        .sub-heading{
            @include breakpoint(sm){
                font-size: 14px;
            }
        }
        .section-title{
            font-size: 72px;
            font-weight: 600;
            margin-top: 10px;
            margin-bottom: 30px;
            @include breakpoint(md){
                font-size: 50px;
            }
            @include breakpoint(sm){
                font-size: 32px;
            }
        }
        p{
            max-width: 500px;
            width: 100%;
            @include breakpoint(md){
                max-width: 400px
            }
        }
    }
    .hero-btn-wrap{
        @include flex-vertical-center;
        column-gap: 15px;
        flex-wrap: wrap;
        row-gap: 15px;
        .bz-primary-btn{
            &:before{
                background-color: var(--bz-color-heading-primary);
            }
        }
        .hero-btn{
            background-color: var(--bz-color-heading-primary);
            &:before{
                background-color: var(--bz-color-theme-primary);
            }
        }
    }
}


@-webkit-keyframes hero-anim-1 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(15px);
        transform: translateX(15px);
    }
}
    @keyframes hero-anim-1 {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(15px);
        transform: translateX(15px);
    }
}


@-webkit-keyframes hero-anim-2 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
}
    @keyframes hero-anim-2 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
}

// Hero 2

.hero-section-2{
    @include background;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.hero-content-2{
    padding: 180px 0;
    position: relative;
    z-index: 10;
    @include breakpoint(sm){
        padding: 100px 0;
    }
    @include breakpoint(md){
        padding: 120px 0;
    }
    .section-heading{
        .section-title{
            font-size: 64px;
            font-weight: 600;
            @include breakpoint(sm){
                font-size: 34px;
            }
        }
    }
    p{
        color: var(--bz-color-common-white);
        max-width: 520px;
        width: 100%;
        margin-bottom: 50px;
    }
    .hero-btn{
        background-color: var(--bz-color-common-white);
        color: var(--bz-color-theme-primary);
        &:hover{
            color: var(--bz-color-common-white);
        }
        &:before{
            background-color: var(--bz-color-theme-primary);
        }
    }
}


// Hero 3

.hero-section-3{
    @include background;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    .shapes{
        .shape{
            position: absolute;
            z-index: -1;
            height: 100%;
            img{
                height: 100%;
            }
            &.shape-1{
                top: 0;
                left: 0;
            }
            &.shape-2{
                top: 0;
                left: 0;
                opacity: 0.7;
            }
        }
    }
}

.hero-content-3{
    padding: 325px 0 265px 0;
    @include breakpoint(md){
        padding: 250px 0 160px 0;
    }
    @include breakpoint(sm){
        padding: 150px 0 150px 0;
    }
    .section-heading{
        .sub-heading{
            @include breakpoint(sm){
                font-size: 13px;
            }
        }
        .section-title{
            color: var(--bz-color-common-white);
            font-size: 64px;
            @include breakpoint(md){
                font-size: 48px;
            }
            @include breakpoint(sm){
                font-size: 32px;
            }
        }
        p{
            font-size: 18px;
            max-width: 750px;
            width: 100%;
            color: var(--bz-color-common-white);
            margin-bottom: 50px;
        }
    }
    
}

/* !END: Hero CSS */
