@use "../01-base/breakpoints" as *;
@use "../01-base/colors" as *;
@use "../02-abstracts/mixins" as *;

.hero-with-form{
    height: 90vh;
    width: 100%;
    margin-bottom: 80px;
    @include responsive(tablet){
        margin-bottom: 0px;
    }
    @include responsive(desktop){
        max-height: 780px;
    }
    .hero-wrapper{
        position: relative;
        height: 100%;
        width: 100%!important;
        background-repeat: no-repeat;
        background-size: cover!important;
        background-position: center;
        display: flex;
        flex-direction: column;
            @include responsive(tablet){
                flex-direction: row;
                align-items: flex-end;
                padding-bottom: 90px;
            }
            @include responsive(desktop){
                padding: 102px;
            }
        }
        .bg-filter{
            @include bg-filter;
            @include bg-filter--gradient;
        }
        .hero-content{
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-content: flex-end;
            gap: 20px;
            flex: 0 1 50%;
            z-index: 998;
            @include responsive(tablet){
                align-items: flex-start;
            }
                .hero-heading{
                    z-index: 99;
                    @include responsive(tablet){
                        max-width: 70%;
                    }
                    @include responsive(desktop){
                        max-width: inherit;
                        flex: 0 0 50%;
                    }
                }
                .hero-text{
                    text-shadow: 2px 2px 3px $dark-color;
                }
        }
        .hero-form{
            background-color: $dark-color;
            padding: 22px;
            clip-path: polygon(0% 4%, 4% 0%, 100% 0%, 100% 4%, 100% 100%, 0% 100%, 0% 4%);
            flex: 0 0 50%;
            @include responsive(tablet){
                height: fit-content;
            }
            @include responsive(desktop){
                padding: 28px;
            }
        }
}