/* innner page banner 
    
    I NEED THE SVG FOR THE BANNER
    */

    /* .elementor-element.elementor-widget.elementor-widget-ova_header .wrap_ova_header.bg_feature_img.left{ */
    .elementor-element.elementor-widget.elementor-widget-ova_header .wrap_ova_header{
        /* border: 2px solid red; */
        position: relative;
        overflow: hidden;
    }


    .elementor-element.elementor-widget.elementor-widget-ova_header .wrap_ova_header::after{
        content: "";
        display: block;
        position: absolute;
        background-color: var(--gardner-green);
        width: 55%;
        height: 100%;
        clip-path: polygon(0% 0%, 75% 0%, 82% 62%, 75% 100%, 0% 100%);
        top: 0;
        left: -5px;
        text-align: center;
        align-self: center;
        opacity: 0.8;
    }

    /* this is to gie a shdow to the image. but it needs to be "before" so it wont apply the shadow to the overlay as well */
    .elementor-element.elementor-widget.elementor-widget-ova_header .wrap_ova_header::before{
        background-color: rgba(6, 22, 58, 0.4);
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
    }


    /* this is to remove the shadow that was affecting the overlay color */
    .elementor-element.elementor-widget.elementor-widget-ova_header .wrap_ova_header .container .cover_color{
        background-color: transparent;   
    }



    /* use this if the asset is an image/svg */
    /* .elementor-element.elementor-widget.elementor-widget-ova_header .wrap_ova_header.bg_feature_img.left::before{
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        bottom: 0px;
        left: -50%;
        background-image: url("../images/Graphics/shape-overlay.svg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
        opacity: 0.8;
    } */