/* ajustes en mobile. latest
pero con problemas */

/* Templante name: Gardner Hero no boxes

layout

.hero-main-container-no-box-no-box 60vh
    .gardner-hero-container 60vh
        .top-hero 100
    .gardner-overlay-container 60vh
        container
        image



*/



.hero-main-container-no-box{
    padding: 1rem 0;
    z-index: 1;/* so the image wont interfer with the navbar (navbar z index: 10) */
    /* height: var(--gardner-hero-height); */
    /* background-color: antiquewhite; */
}

.hero-main-container-no-box .gardner-hero-container .top-hero .left-col{ 
    width: 100%;
}
.hero-main-container-no-box .gardner-hero-container .top-hero .right-col{ 
    display: none;
}

/* hide the maskin effect on the hero image when is smaller than desktop */
/* .hero-main-container-no-box .gardner-overlay-container .elementor-element.elementor-widget-image.hero-cut-out .elementor-widget-container img{
    -webkit-mask-image: none;
} */

.hero-main-container-no-box .gardner-overlay-container .elementor-element.elementor-widget-image.hero-cut-out .elementor-widget-container img{
    position: absolute;
    top: 0;
    left: 0;
    -webkit-mask-image: url( ../images/Graphics/hero-cutout-new.svg);
    mask-image: url( ../images/Graphics/hero-cutout-new.svg );
    /* -webkit-mask-image: url( ../images/Graphics/hero-image-cut-out.svg );
    mask-image: url( ../images/Graphics/hero-image-cut-out.svg ); */
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center center;
    /* -webkit-mask-position: right; */
    -webkit-mask-repeat: no-repeat;
}


/* this overlay is added to the img inmediate parent. is used in screens below 1024px.  it can also be used on bigger screen, but need to remove the other green overlay that is on the code below  */
.hero-main-container-no-box .gardner-overlay-container .elementor-widget-image .elementor-widget-container::before{
    position: absolute;
    content: "";
    display: block;
    top: 1px;
    left: 0;
    height: 100%;
    width: 100%;
    clip-path: polygon(81% 69%, 100% 80%, 100% 100%, 0 100%, 0 83%);
    background-color: var(--gardner-green);
    opacity: 0.5;
    z-index: 1;
    left: 0;
}


/* section: hero-bottom using the archive_dep elementor element 
*
*/


/* hero bottom added by elizabeth.  needs a custom tile background color that the ova elemento does not provide. will be implemented using classes like .gardner-body-blue */
.elementor-element.gardner-body-blue.elementor-widget.elementor-widget-ova_archive_dep .archive_dep .content .items .wp-item{
    background-color: var(--gardner-body-blue);
}

.elementor-element.gardner-body-blue.elementor-widget.elementor-widget-ova_archive_dep .archive_dep .content .ova-content .descption{
    color: #fff;
    min-height: 80px;
}
.elementor-element.gardner-body-blue.elementor-widget.elementor-widget-ova_archive_dep .archive_dep .content .ova-content .readmore{
    color: #fff;
}
.elementor-element.gardner-body-blue.elementor-widget.elementor-widget-ova_archive_dep .archive_dep .content .ova-content .title a{
    color: #fff;
}
.elementor-element.gardner-body-blue.elementor-widget.elementor-widget-ova_archive_dep .archive_dep .content .ova-content .title a:hover{
    /* color: var(--gardner-orange); */
    color: var(--gardner-fonts-orange);
}


.archive_dep .content,
.ova_archive_sev.archive_sev .content
{
    margin: 0;
}



/*  section: featured services -  on home page 
*
*/
/* make the box a minimum height */
.archive_sev .items .wp-items{
    min-height: 280px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.archive_sev .items .wp-items:hover .content-sub{
    top: calc(100% - 137px);
}

/* .archive_sev .items .wp-items{
    min-height: 217px;
    flex-grow: 1;
} */

@media screen and (min-width: 1024.5px) {


    .hero-main-container-no-box{
        padding: 0;
        /* border: 2px solid red; */

        /* margin-top: -40px;
        height: var(--gardner-hero-height); */
        /* margin-top: -70px; */
    } 

    .hero-main-container-no-box .gardner-hero-container{
        height: var(--gardner-hero-height);
    }

    /* so the overlay will be on top of image but beneath the icons */
    .hero-main-container-no-box .gardner-hero-container .top-hero .left-col{ 
        z-index: 2;
        height: 100%;
        width: 30%;
        padding-top: 1rem;
        padding-bottom: 1rem;
        /* border: 2px solid red; */

        margin-bottom: 40px;
    }
    .hero-main-container-no-box .gardner-hero-container .top-hero .right-col{ 
        z-index: 0;
        height: 100%;
        width: 70%;
        padding-right: 0;
        /* border: 1px solid blue; */
    }
    
    .hero-main-container-no-box .gardner-overlay-container {z-index: 1;}
    .hero-main-container-no-box .gardner-hero-container .top-hero { 
        /* original vaue  */
        /* height: 100%; */
        
        padding: 0;
        height: 95%;
        z-index: 2;
    }


    /* if we dont want to use pseudo element before for the overlay */
    /* .gardner-overlay-container{
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        clip-path: polygon(75% 10%, 100% 18%, 100% 100%, 0% 100%);
        opacity: 0.5;
    } */
    /* .gardner-overlay-container div{
        width: 100%;
        height: 100%;
        border: 8px solid red;
        filter: blur(4px);
    } */



    /* USING pseudo element before for the overlay */
    .hero-main-container-no-box .gardner-overlay-container{
        position: absolute;
        height: 100%;
        height: var(--gardner-hero-height);
        
    }

    .hero-main-container-no-box .gardner-overlay-container > .elementor-element{
        height: 100%;        
        padding: 0;
    }

    .hero-main-container-no-box .gardner-overlay-container .elementor-widget-image{
        position: relative;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* border: 1px solid gold; */
    }

    /* background-image: url("../images/Graphics/hero-image-cut-out.svg"); */
    /* .hero-main-container-no-box .gardner-overlay-container .elementor-widget-image::before{
        position: absolute;
        content: "";
        display: block;
        background-color: var(--gardner-green);
        top: 60%;
        left: 0;
        height: 100%;
        width: 100%;
        opacity: 0.8;
        z-index: 1;
        background-image: url("../images/Graphics/hero-image-cut-out-2.svg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
    } */



    /* this was working for the overlay. kind of */
    .hero-main-container-no-box .gardner-overlay-container .elementor-widget-image::before{
        /* left: calc(calc(100% - 1140px)/2); */
        position: absolute;
        content: "";
        display: block;
        top: 0px;
        left: 0;
        height: 100%;
        width: 100%;
        /* clip-path: polygon(88.8% 70%, 100% 80%, 100% 100%, 0 100%, 0 95%); */
        clip-path: polygon(95.8% 70%, 100% 74%, 100% 100%, 0 100%, 0 100%);
        /* background-color: var(--gardner-green); */
        background-color: var(--gardner-green-alt);
        /* opacity: 0.5; */
        opacity: 0.75;
        z-index: 1;
        left: 0;
        /* transform: translate(-50%, 0); */
    }

    /* remove the green overlay for this div that was set above. will use theoverlay on its parent so it can be full with */
    .hero-main-container-no-box .gardner-overlay-container .elementor-widget-image .elementor-widget-container::before{
        content: none;
    }



    /* image processing 
    *
    */

    .hero-main-container-no-box .gardner-overlay-container .elementor-widget-image .elementor-widget-container{
        overflow: hidden;

        position: absolute;
        max-width: 60%;
        max-height: var(--gardner-hero-height);
        width: 100%;
        height: 100%;
        z-index: 0;
        top: 0;
        right: 0;
        /* left: 0; */
        /* left: calc(50% - 190px); */
    }


    /* .hero-main-container-no-box .gardner-overlay-container .elementor-widget-image .elementor-widget-container::before{
        position: absolute;
        content: "";
        display: block;
        width: 100.1%;
        height: 100%;
        top: -50%;
        left: -50.1%;
        background-image: url("../images/Graphics/hero-image-cut-out-2.svg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top;
        transform: translate(50%, 50%);
    }
    .hero-main-container-no-box .gardner-overlay-container .elementor-widget-image .elementor-widget-container::after{
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        bottom: -50%;
        left: -50%;
        background-image: url("../images/Graphics/hero-image-cut-out-2.svg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: bottom;
        transform: translate(50%, -50%);
    } */


    .hero-main-container-no-box .gardner-overlay-container .elementor-widget-image .elementor-widget-container img{
        max-width: 100%;
        width: 100%;
        height: 100%;
        z-index: 0;
        object-fit: cover;
        object-position: center center;
        /* border: 1px solid yellowgreen; */
    }


    /* this mask is already set on gardner-images. but again is removed (for tablet and mobile) above. so we need to set it again */
    /* .hero-main-container-no-box .gardner-overlay-container .elementor-element.elementor-widget-image.hero-cut-out .elementor-widget-container img{
        -webkit-mask-image: url( ../images/Graphics/hero-image-cut-out.svg );
        mask-image: url( ../images/Graphics/hero-image-cut-out.svg );
        -webkit-mask-size: cover;
        mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    } */





}

@media screen and (min-width: 1500px) {
    .hero-main-container-no-box{
        /* border: 2px solid blue; */
    } 


    .hero-main-container-no-box .gardner-overlay-container .elementor-widget-image::before{
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        clip-path: polygon(88.8% 70%, 100% 80%, 100% 100%, 0 100%, 0 100%);
        /* background-color: red; */
        /* opacity: 0.5; */
        opacity: 0.75;
        z-index: 1;
        left: 0;
        /* transform: translate(-50%, 0); */
    }
}


@media screen and (max-width: 1024px) {

    /* original code */
    .hero-main-container-no-box .gardner-overlay-container .elementor-element.elementor-widget-image.hero-cut-out .elementor-widget-container img{
        -webkit-mask-image: none;
        position: relative;

    }


    /* make the hero container no paading bottom on tablet and mobile */
    .hero-main-container-no-box{
        padding-bottom: 0;
    }

    /* make the image container full width */
    .hero-main-container-no-box .gardner-overlay-container > .elementor-element.e-con{
        padding: 0;
    }

    .hero-main-container-no-box .gardner-overlay-container .elementor-widget-image .elementor-widget-container::before{
        clip-path: none;
        
        /* background: url( ../images/Graphics/hero-cutout-mobile-v1.svg);
        background-size: cover; */
        
        /* background-image: url( ../images/Graphics/hero-cutout-mobile-v1-no-aspect-ratio.svg); */
        background: url( ../images/Graphics/hero-cutout-mobile-v1-no-aspect-ratio.svg);
        background-size: 100% 100%;

        /* mix-blend-mode: exclusion; */
        background-repeat: no-repeat;
        top: -1px;
        left: 0;
        height: 101%;
        opacity: 1;
    }

    /* if want to remove the cutout from the image on tablet and mobile */
    /* .hero-main-container-no-box .gardner-overlay-container .elementor-element.elementor-widget-image.hero-cut-out .elementor-widget-container img{
        -webkit-mask-image:none;
        mask-image: none;
        position: relative;
    } */


    
    /* TESTING */
    /* .hero-main-container-no-box .gardner-overlay-container .elementor-element.elementor-widget-image.hero-cut-out .elementor-widget-container img{
        position: relative;

        -webkit-mask-image: url( ../images/Graphics/hero-cutout-mobile.svg);
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;


    }

    .hero-main-container-no-box .gardner-overlay-container .elementor-element.elementor-widget-image.hero-cut-out .elementor-widget-container::before{
        content: none;
    } */
    /* TESTING */

}


@media screen and (max-width: 767px) {
    /* .hero-main-container-no-box .gardner-overlay-container .elementor-element.elementor-widget-image.hero-cut-out .elementor-widget-container img{
        min-height: 420px;
        height: auto;
        object-fit: cover;
        object-position: center center;
    }  
    .hero-main-container-no-box .gardner-overlay-container .elementor-widget-image .elementor-widget-container::before{
        min-height: 420px;
    } */

    /* featured services -  on home page */

    /* make the box a minimum height */
    .archive_sev .items .wp-items{
        min-height: 188px;
    }

}

/* @media screen and (max-width: 572px) {
    .hero-main-container-no-box .gardner-overlay-container .elementor-element.elementor-widget-image.hero-cut-out .elementor-widget-container img{
        min-height: 100%;
    }  
    .hero-main-container-no-box .gardner-overlay-container .elementor-widget-image .elementor-widget-container::before{
        min-height: 100%;
    }
} */


/* random code to delete */