/* this is for the section that is beneath the hero image and goes over the image
also the hero bottom
*/



.hero-middle{
    /* background-color: var(--gardner-green);
    opacity: 0.5;
    z-index: 0; */
    /* background-color: var(--gardner-green); */
    position: relative;

}
.hero-middle::before{
    position: absolute;
    content: "";
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* clip-path: polygon(86% 70%, 100% 80%, 100% 100%, 0 100%, 0 90%); */
    background-color: var(--gardner-green);
    opacity: 0.5;
    z-index: -1;
}

/* remove the white icon background */
.hero-middle .elementor-widget-ova_feature .ova_feature .items .icon{
    background: transparent;
    margin-bottom: 0;
}

/* set icons containters background blue */
.hero-middle .elementor-widget-ova_feature
{
    background-color: var(--gardner-deep-blue);
}

/* set the icon colo white */
.hero-middle .elementor-widget-ova_feature .items .icon span:before
{
    color: #fff;
}
/* set the icon color orange on hover, the important only affect elements with this class .hero-midlle */
.hero-middle .elementor-widget-ova_feature .items:hover .icon span:before
{
    color: var(--gardner-orange) !important;
}

/* make the feature title color white */
.hero-middle .elementor-widget-ova_feature .ova_feature .items .title a
{
    color: var(--gardner-green);
    /* color: transparent; */
}

.hero-middle .elementor-section.elementor-element.elementor-element-656a05f .elementor-container.elementor-column-gap-default{
    position: relative;
}


.hero-middle .elementor-section.elementor-element.elementor-element-656a05f .elementor-container.elementor-column-gap-default::before{
    position: absolute;
    content: "";
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--gardner-green);
    opacity: 0.5;
    z-index: -1;
}


@media screen and (min-width: 1024.5px) {
    /* this is the section that has a negative margin top and overlaps the hero image */
    .hero-middle .elementor-section.elementor-element.elementor-element-656a05f {
        /* original value */
        /* margin-top: -100px; */

        /* margin-top: 0; */
        margin-top: -40px;
    }

    /* define gaps between icons */
    .hero-middle .elementor-section.elementor-element.elementor-element-656a05f .elementor-container.elementor-column-gap-default{
        column-gap: 0.1rem;
    }
}

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

    /* define gaps between icons */
    .hero-middle .elementor-section.elementor-element.elementor-element-656a05f .elementor-container.elementor-column-gap-default{
        column-gap: 0.1rem;
    }

    .hero-middle .elementor-section.elementor-element.elementor-element-656a05f .elementor-container.elementor-column-gap-default .elementor-column.elementor-col-16.elementor-inner-column.elementor-element{
        margin-bottom: 0.1rem;
        width: 33%;;
    }


    .hero-middle .elementor-section.elementor-element.elementor-element-656a05f .elementor-container.elementor-column-gap-default .elementor-widget-ova_feature{
        min-height: 258px;
        /* padding: 0.1rem; */
    }

}
/* hero-botom
*
*
*
*
*
*
*
*
*/

.hero-bottom h2.elementor-heading-title,
.hero-bottom p.elementor-heading-title
{
    color: var(--gardner-deep-blue);
}


.hero-bottom{
    position: relative;
}

.hero-bottom::before{
    position: absolute;
    content: "";
    display: block;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* background-color: var(--gardner-green); */
    background-color: var(--gardner-green-alt);
    /* opacity: 0.5; */
    opacity: 0.75;
}