/* Theme Name:GREENMAX */


    :root {

        /*Global colors here*/
        --GMX-Brown: #8C7161;
        --GMX-LtBrown: #9c8171;
        --GMX-Grey: #797F8C;
        --White: #fff;
        --GMX-DkGrey: #485059;
        --BLACK: #000;
        --GMX-Green:#528953;
        --GMX-ltBlueGry: #A6A7A6;

    }

    /* CSS COLORS */
    .GMX-Brown {
        color: var(--GMX-Brown, #8C7161);
    }

    .GMX-LtBrown {
        color: var(--GMX-LtBrown, #968277);
    }

   .GMX-Grey {
        color: var(--GMX-Grey, #797F8C);
    }

    .white {
        color: var(--White, #fff);
    }

    .GMX-DkGrey {
        color: var(--GMX-DkGrey, #485059);
    }

    .GMX-ltBlue {
        color: #9cc8f1;
    }

    .black {
        color:#000;
    }

    .GMX-Green {
        color: var(--GMX-Green, #528953);
    }

    /* END CSS COLORS */



    /* BUTTONS */

    .btn-outline {

       color: #595A5C;
        text-align: center;
        font-family: "League Gothic";
        font-size: 2rem;
        font-style: normal;
        font-weight: 100;
        line-height: normal;
        kerning: .75rem;
        display: flex;
        padding: .3rem 1.75rem;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        /* width: 100%; */
        border-radius: 0.75rem;
        border: 1px solid var(--Max-Black, rgb(255, 255, 255));
        opacity: 1;
        background: rgba(0, 0, 0, .3);

    }

        .btn-outline-small {

        color: #595A5C;
        text-align: center;
        font-family: "League Gothic";
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 300;
        line-height: normal;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        min-width: 200px;
        opacity: 1;
        border-radius: 0.875rem;
        border: 1px solid var(--GMX-DkGrey);
        padding: .5rem 3rem;

    }

    .btn-solid {

        color: #595A5C;
        text-align: center;
        font-family: "League Gothic";
        font-size: 2.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

    
        border-radius: 0.875rem;
        border: 1px solid white;
        background: white;
        display: flex;
        padding: 1rem 3rem;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
    }

   .btn-solid-DkGrey-small {

        color: #fff;
        text-align: center;
        font-family: "League Gothic";
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 300;
        line-height: normal;

    
        border-radius: 0.875rem;
        /* border: 1px solid white; */
        border: 1px solid var(--GMX-DkGrey);
        background: var(--GMX-DkGrey);
        display: flex;
        padding: .5rem 3rem;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
    }

    .btn-solid-small {

        color: #595A5C;
        text-align: center;
        font-family: "League Gothic";
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

    
        border-radius: 0.875rem;
        border: 1px solid white;
        background: white;
        display: flex;
        padding: .5rem 3rem;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
    }

    .btn-solid-GMX-green {
        font-family: "League Gothic";
        font-size: 2.5rem;
        display: flex;
        padding: 1rem 3rem;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        color: var(--GMX-LtBrown);
        border-radius: 0.75rem;
        border: 1px solid #D9D9D9;
        background: #528953;
        color: white;

    }
    .btn-solid-brown {
         font-family: "League Gothic";
        font-size: 1.5rem;
        border-radius: 0.875rem;
        border: 1px solid var(--GMX-LtBrown);
        background: var(--GMX-LtBrown);
        display: flex;
        padding: .5rem 3rem;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        color: white;

    }
        .btn-solid-dkGrey {
        font-family: "League Gothic";
        font-size: 1.75rem;
        font-weight: 100;
        border-radius: 0.875rem;
        border: 1px solid var(--GMX-DkGrey);
        background: var(--GMX-DkGrey);
        display: flex;
        padding: 1rem 3rem;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        color: white;

    }

    .btn-solid-medblue {
         font-family: "League Gothic";
        font-size: 1.5rem;
        border-radius: 0.875rem;
        border: 1px solid var(--GMX-ltBlue);
        background: var(--GMX-ltBlue);
        display: flex;
        padding: .5rem 3rem;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        color: var(--GMX-DkGrey);

    }

    .btn-wrapper {
        display: flex;
        align-items: flex-end;
        width: 100%;
        padding-left: 4rem;
    }

    /* START CONTENTS */
    html {
        height: 100%;
        width: auto;
        margin: 0;
        color: #000;
        scroll-behavior: smooth;
    }


    body {
        margin: 0;
        width: auto;
        font-family: "Inter", sans-serif;
        height: 100%;
        background-color: #000;
        color: var(--GMX-DkGrey);
    }

    main {
        margin: auto;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /* define main page parameters */
    *,
    *::after,
    *::before {
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
        color:var(--GMX-DkGrey)
    }

    #active-link {
    /* border-bottom: var(--GMX-Green, #528953) 3px solid; */
            text-decoration: underline;
            color: #528953;
    /* padding-top: 25px; */
    }

      #active-link-ftr {
    /* border-bottom: var(--GMX-Green, #528953) 3px solid; */
            text-decoration: underline;
            color: white;
            font-weight: 200;
    /* padding-top: 25px; */
    }

    li:hover, li:active  {
        border-bottom: var(--GMX-Green, #528953) 3px solid;
        /* padding-top: 25px; */
    }

     button:hover, button:active  {
        /* border-bottom: var(--light-green-color) 20px solid; */
        /* padding-top: 25px; */
        background-color: #528953;
        color: white;
        outline-color: white;
    }

    /* Fonts */
    /* <uniquifier>: Use a unique and descriptive class name
       <weight>: Use a value from 100 to 900 */

    h1 {

        /* H1 */
        /* font-family: Akhand;
        font-size: 2.75rem;
        font-style: normal;
        font-weight: 300;
        line-height: normal; */

        /* color: #FFF; */
        font-family: "League Gothic";
        font-size: 4rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;
         margin: 0;

    }

    h2 {
        /* H2 */
       /* color: #FFF; */
        font-family: "League Gothic";
        font-size: 2.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;
        margin: 0;

    }

    h3 {
        /* H3 */
        /* font-family: Akhand;
        font-size: 2rem;
        font-style: normal;
        font-weight: 200; 
        line-height: normal;*/
        margin: 0;
        font-family: "Manrope", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        /* color: #FFF; */
        font-size: 1.75rem;
        font-weight: 200;
        line-height: normal;
        font-style: normal;
        margin: 0;


    }

    h4 {

        font-family: "League Gothic";
        font-size: 2rem;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
        text-transform: uppercase;
        margin: 0;
    }


    h5 {

        font-family: Akhand;
        font-optical-sizing: auto;
        font-size: 1rem;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
        margin: 0;
    }


    p {
        color: var(--BLACK, #000);
        font-family: "Inter", sans-serif;
        font-optical-sizing: auto;
        font-size: 1rem;
        font-style: normal;
        font-weight: 300;
        line-height: 130%;
        letter-spacing: -0.011rem;
    }

    ul,
    li {
        
        color: #595A5C;
        font-family: Manrope;
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2rem;
    }

    .superscript {
        font-size: 2rem;
        vertical-align: super;
        line-height: 0;
        position: relative;
        top: -0.5rem;
    }

    /* END FONTS */


    /* SPACERS */

    .btn-align-center {
        
        text-align: center;
        align-self: center;
    }

    .spacer-height-72 {
        width: 72px;
        height: 12px;
    }


    .spacer-60 {
        width: 60px;
    }

    .spacer-24 {
        width: 12px;
    }

    .spacer-36h {
        height: 48px;
    }

    .spacer-24h {
        height: 24px;
    }

    /* TYPE OPTIONS */


    /* ALIGNMENT */

    .txt-align-right {
        text-align: right;
    }
    .txt-align-left {
        text-align: left;
        align-self: flex-start;
    }
    .align-right {
        display: flex;
        justify-content: end;
        align-items: center;
    }

    .align-left {
        display: block;
        width: 100%;
        justify-content: start;
        align-items: center;
        margin: 0;
        padding: 0;
        height: fit-content;
    }

    .align-center {
        align-items: center;
        text-align: center;
    }


    .align-flex-end {
        align-self: end;
    }


    /* END BUTTONS */



    /* ANIMATION CODE */

    @keyframes fadeInSlideUp {
    0% {
        opacity: 0; /* Start completely transparent */
        transform: translateY(20px); /* Start slightly below its final position */
    }
    100% {
        opacity: 1; /* End fully opaque */
        transform: translateY(0); /* End at its original vertical position */
    }
    }

    .animated-element {
    animation: fadeInSlideUp 1s ease-out forwards;
    /* Initial state before animation starts (optional, but good practice) */
    opacity: 0; 
    }

    .fade-in-element {
        opacity: 0;
        transition: opacity 1s ease-out; /* Adjust duration and timing function */
    }

    .fade-in-element.is-visible {
        opacity: 1;
    }

        .slide-in-element {
        opacity: 0; /* Combine with fade-in for a smoother effect */
        transform: translateY(20vh); /* Adjust direction and distance */
        transition: opacity 0.6s ease-out, transform 1.2s ease-out;
    }

    .slide-in-element.is-visible {
        opacity: 1;
        transform: translateY(0);
    }




    /* HEADER START */


    .nav-up {
        top: -148px;
    }

    .nav-down {
        top: 0px;
    }

    .header-spacer {
        height: 84px;
    }

    .hide {
        display: none;
    }

        /* .modal {
        position: fixed;
        display: none;
        z-index: 200;
        top: 80px;
        right: 0;
        width: 250px;
        background: white;
        padding-left: 0px;
        padding-top: 60px;
        padding-bottom: 60px;
        border: 1px solid #ccc;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        text-align: center;
        margin-left: 0px;
        } */
    
        /* .menu-drop-down-close {
        display: none;
        position: relative;
        width: 30px;
        z-index: 10;
        }
     */
        /* .mobile-menu-wrapper ul  {
            display: flex;
            flex-direction: column;
            gap: 24px;
            align-items: center;
            text-decoration: none;
            font-variation-settings: "ital" 0, "wdth" 65, "wght" 600;
            font-size: 24px;
            list-style: none;
            color:var(--txt-menu-grey-color);
            margin: 0px;
            padding-left: 0px;
        }
    
        .mobile-menu-wrapper  li  {
            border-bottom: var(--White) 20px solid;
            padding-top: 25px;
            margin: 0;
        }
        
        .mobile-menu-wrapper  li:hover, li:active  {
            border-bottom: var(--light-green-color) 20px solid;
            padding-top: 25px;
            margin: 0;
        }
    
        .mobile-menu-wrapper  a {
            text-decoration: none;
            color: var(--txt-menu-grey-color);
            margin: 0px;
            cursor: pointer;
            }
     */

    header {
        margin: auto;
        margin: 0;
        padding: 0;
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        z-index: 100;
        /* Show/hide Header CSS */
        position: fixed;
        top: 0;
        transition: top 0.2s ease-in-out;
        z-index: 499;
        /* End Show/Hide CSS */
        /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
    }
/*     
    header {
        height: auto;
        margin: auto;
        margin: 0;
        padding: 0;
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: flex-end;
        flex-shrink: inherit;
        align-items: center;
        z-index: 100;
        position: fixed;
        top: 0;
        transition: top 0.2s ease-in-out;
        z-index: 499;
    } */


    .hdr-box {
        width: 90%;
        top:0;
        padding-left: 0rem;
        margin: auto;
        display: flex;
        height: 7rem;
        justify-content: space-between;
        align-items: center;
        background: none;
        gap: 0rem;
        z-index: 100;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 0px 0px 6px 6px;
    }
    .hdr-left {
        display: flex;
        padding-right: 1.5rem;
        padding-left: 1.5rem;

        padding-top: 1.25rem;
        padding-bottom: 1rem;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: -0.0625rem;
        align-self: stretch;
        /* background-color: #393d42; */
        /* border-radius: 0px 0px 24px 24px;
        border-top: 0px none var(--GMX-Grey);
        border-right: 0px none var(--GMX-Grey);
        border-left: 0px none var(--GMX-Grey); */
        width: 30%;
        max-width: 500px;
        min-width: 260px;

    }

    .logowrapper {
        display: flex;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 0px 0px 6px 6px;
        margin-top: -1.2rem;
        justify-content: center;
        flex-direction: column;
        align-content: center;
        align-items: center;
    }

    .bufferline {
        padding: 20px 48px;
    }

    
    .hdr-middle {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: flex-start;
        flex: 1 0 0;
        color: white;
        gap: 3rem;
        margin-top:-4rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: 1.5rem;
        padding-bottom: 1rem;
        margin-bottom: 1rem;
        /* background-color: rgba(57, 61, 66, .3); */
        justify-content: flex-end;
        
    }
  .hdr-right {
        position: absolute;
        overflow: visible;

    }

    .menubkgnd {
        /* display: flex;
        gap: 2rem;
        padding: .5rem 1.5rem;
        background-color: rgba(255, 255, 255, .8);
        height: fit-content;
        border-radius: 0 0 12px 12px; */

        display: flex;
        gap: 2rem;
        padding: .5rem 1.5rem;
        /* background-color: rgba(255, 255, 255, .8); */
        height: fit-content;
        /* border-radius: 0 0 12px 12px; */
        position: absolute;
        right: 12px;
        top: 0rem;
        text-align: end;

    }

    .menubkgnd a {
        color: #595A5C;
        font-family: "League Gothic";
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 0;
        line-height: normal;
        text-transform: uppercase;
        margin: 0;
        padding: 0;
    }
    
  .hdr-right-new {
   display: flex;
    padding-top: 0;
    padding-bottom: .25rem;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    overflow: visible;
    /* top: 0px; */
    /* right: 0px; */
    width: 100%;
    height: 50px;

}

    .hdr-logo {
    align-self: center;
    width: 90%;
    /* min-width: 100px; */
    padding-top: 0rem;
    padding-left: 1.5rem;
    padding-right: 0rem;
    padding-bottom: 0rem;
}
    
/* 
    .hdr-menu {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 264px;
    } */

    /* HEADER END */


    /* MAIN SECTION */

    .section-home {

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        flex: 1 0 0;
        align-self: stretch;
        display: flex;
        background-color: #000;
        padding: 0;
        margin: 0;
        width: 100%;
        overflow: hidden;
        border-radius: 0px;
        background-image: url(../../../wp-content/uploads/assets/img/GreenMax-Hero-crop-blank.webp);
        background-size: cover;
        background-position: flex-start;
        background-repeat: no-repeat;
    
    }

        .home-overlaytext {
        display: flex;
        flex-direction: row;
        align-items:center;
        flex: 1 0 0;
        /* align-self: stretch; */
        vertical-align: middle;
        position: absolute;
        /* width: 100%; */
        /* max-width: 800px; */
        padding: 60px 60px;
        gap: 3rem;
    
    }


    .hero-main {
        width: 100%;
        height: 100vh;
        align-content: center;
        align-self: stretch;

    }

    .hero-content {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        flex: 1 0 0;
        vertical-align: middle;
        padding-top: 72px;
        gap: 2rem;

    }

    .videounderlay {
        opacity: 1;
        clip-path: margin-box;
        height: 114%;
        align-self: center;
    }

    .hero-video {
        display: flex;
        width: 100%;
        width: 100vw;
        height: 100vh;
        overflow: visible;
    }

    .main-wrapper {
        position: relative;
        width: 100%;
        display: flex;
       flex-direction: column;
        align-items: center;
         background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 67.79%, rgba(82, 137, 83, 0.50) 100%), lightgray 50% / cover no-repeat;
        height: 100vh;
    }

    .subtitle {
        align-self: stretch;
        z-index: 100;
    }




    /* SECTION - 60% Reduction */

    .reduction-wrapper {
        display: flex;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        width: 100%;
        /* height: 100vh; */
        background-color: black;
    }

    /* END SECTION - 60% Reduction */




    /* SECTION - WHY */

    .section-why {

        display: flex;
        width: 100%;
        height: 100vh;
        padding: 2rem 1.5rem 1.5rem 1.5rem;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;

    }

    .why-wrapper {

       display: flex;
        padding: 4rem 5rem 11.25rem 5rem;
        flex-direction: column;
        align-items: flex-start;
        flex: 1 0 0;
        align-self: stretch;

        background-image: url(../../../wp-content/uploads/assets/img/img-why-greenmax.jpeg);
        background-size: cover;
        background-position: flex-start;
        background-repeat: no-repeat;
        border-radius: 0.75rem;
    
    }

    .why-overlaytext {
        display: flex;
        flex-direction: row;
        align-items:center;
        flex: 1 0 0;
        vertical-align: flex-start;
        position: absolute;
        padding: 60px 60px;
    
    }

    .why-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1 0 0;
    }

    .why-copy {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .why-buffer {
        margin: auto;
        padding-left: 2.5rem;
        display: flex;

    }

    /* END SECTION - WHY */





    /* <!-- SECTION - FEATURES --> */

    .section-features {
        display: flex;
        width: 100%;
        padding: 2rem 1.5rem 1.5rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        flex-shrink: 0;
    }

    .features-content {
        display: flex;
        padding: 2.5rem 3.75rem;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        gap: 0.4375rem;
        flex: 1 0 0;
        align-self: stretch;
        background-color: #FFF;
        border-radius: 0.75rem;


    }


    .line-h {
        height: 0;
        align-self: stretch;
        stroke-width: 1px;
        stroke: #595A5C;
        padding: 0px;
        padding-bottom: 1rem;
        width: 100%;
 }

    .feature-item {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        align-self: stretch;
        color: #595A5C;
        font-family: "League Gothic";
        font-size: 2rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding-top: 1rem;
    }


    .align-featurebox {
        width: 400px;
    }

    .performance {
        display: flex;
        align-items: center;
        gap: 2.25rem;
        align-self: stretch;
        padding: 2rem 0rem;
    }

    .performance-img {
        display: flex;
        width: 50%;
        height: 50vh;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        align-content: center;
        gap: 0.625rem;
        flex-shrink: 0;
        margin-left: -3.75rem;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(../../../wp-content/uploads/assets/img/AdobeStock_1038817969.webp) lightgray 50% / cover no-repeat;
        border-bottom-right-radius: 12px;
        border-top-right-radius: 12px;
        padding: 2rem;
    }

    .performance-copy {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        gap: 2.25rem;
    }


    .performance-compare {
        display: flex;
        flex-direction: row;
        padding: 15px 12px;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 75px;
        align-self: stretch;
    }


    /* <!-- END SECTION - FEATURES --> */

    .section-designed {

        display: flex;
        width: 100%;
        padding: 2rem 1.5rem 2rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        flex-shrink: 0;
        height: 100vh;

    }

    .designed-content {

        display: flex;
        padding: 2.5rem 3.75rem;
        width: 100%;
        flex-direction: row;
        align-items: flex-start;
        align-self: stretch;
        gap: 0.4375rem;
        flex: 1 0 0;
        align-self: stretch;
        background-color: #FFF;
        border-radius: 0.75rem;
        background: url(../../../wp-content/uploads/assets/img/hero-designed.jpg) lightgray 50% / cover no-repeat;
        justify-content: space-between;

    }

    .designed-copytop {
        display: flex;
        width: 50%;
        flex-direction: column;
        align-items: flex-start;
        gap: 60px;
    }
    .designed-logo {
        width: 135px;
        height: 131px;
    }

    .designed-copybtm {
        display: flex;
        position: relative;
        width: 40%;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        align-self: flex-end;
        gap: 113px;
        align-self: stretch;
    }

    /* END DESIGNED */



    /* APPLICATIONS */

    .section-applications {
        display: flex;
        width: 100%;
        padding: 2rem 1.5rem 2rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        flex-shrink: 0;
    }

    .applications-content {
        display: flex;
        padding: 2.5rem 3.75rem;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        gap: 0.4375rem;
        flex: 1 0 0;
        align-self: stretch;
        background-color: #FFF;
        border-radius: 0.75rem;


    }

    .application-wrapper {
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        gap: 30px;
        align-self: stretch;
        flex-wrap: wrap;
    }

    .application-item {
        display: flex;
        min-width: 264px;
        padding: 7px 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        flex: 1 0 0;

    }

    .application-img-structural {
        display: flex;
        height: 250px;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;

        border-radius: 6px;
        background: url(../../../wp-content/uploads/assets/img/application-structural.jpeg) lightgray 50% / cover no-repeat;

    }

        .application-img-precast {
        display: flex;
        height: 250px;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;

        border-radius: 6px;
        background: url(../../../wp-content/uploads/assets/img/application-precast.jpeg) lightgray 50% / cover no-repeat;

    }

        .application-img-masonry {
        display: flex;
        height: 250px;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;

        border-radius: 6px;
        background: url(../../../wp-content/uploads/assets/img/application-masonry.jpeg) lightgray 50% / cover no-repeat;

    }

        .application-img-surface {
        display: flex;
        height: 250px;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;

        border-radius: 6px;
        background: url(../../../wp-content/uploads/assets/img/application-surface.jpeg) lightgray 50% / cover no-repeat;

    }

        .application-img-repair {
        display: flex;
        height: 250px;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;

        border-radius: 6px;
        background: url(../../../wp-content/uploads/assets/img/application-repair.jpeg) lightgray 50% / cover no-repeat;

    }

        .application-img-thinset {
        display: flex;
        height: 250px;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;

        border-radius: 6px;
        background: url(../../../wp-content/uploads/assets/img/application-thinset.jpeg) lightgray 50% / cover no-repeat;

    }

        .application-img-underlayment {
        display: flex;
        height: 250px;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;

        border-radius: 6px;
        background: url(../../../wp-content/uploads/assets/img/application-underlayment.jpeg) lightgray 50% / cover no-repeat;

    }

    /* END - APPLICATIONS */




    /* SECTION - MIXING / HANDLING */    


    .application-wrapper {
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        gap: 30px;
        align-self: stretch;
        flex-wrap: wrap;
    }

    .section-mixing {
        display: flex;
        width: 100%;
        padding: 2rem 1.5rem 2rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        flex-shrink: 0;
        }

  .mixing-content {
        display: flex;
        padding: 3rem 3.75rem;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        gap: 0.4375rem;
        flex: 1 0 0;
        align-self: stretch;
        background-color: #FFF;
        border-radius: 0.75rem;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 85%), url(../../../wp-content/uploads/assets/img/img-mixing-handling.jpg) lightgray 50% / cover no-repeat;
   


    }

    .mixing-wrapper {
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        gap: 30px;
        align-self: stretch;
        flex-wrap: wrap;
    }


    .mixing-cta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        align-self: stretch;
        padding: 0px 0px;
    }
    /* END - SECTION - MIXING / HANDLING */   



  /* SECTION - Tech Support CTA */    

    .section-techsupport {
        display: flex;
        width: 100%;
        height: 100vh;
        padding: 2rem 1.5rem 2rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        flex-shrink: 0;
        }

  .techsupport-content {
        display: flex;
        padding: 2.5rem 3.75rem;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;
        gap: 0;
        flex: 1 0 0;
        align-self: stretch;
        background-color: #FFF;
        border-radius: 0.75rem;
        justify-content: space-evenly;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 85%), url(../../../wp-content/uploads/assets/img/img-techsupport.webp) lightgray 50% / cover no-repeat;
   
    }

    .techsupport-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        align-content: flex-end;
        gap: 1rem;
        align-self: stretch;
        flex-wrap: wrap;
        justify-content: flex-end;
    }


    .techsupport-cta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        align-self: stretch;
    }
    /* END - SECTION - Tech Support CTA */   




      /* SECTION - Join the Movement CTA */    

    .section-join {
        display: flex;
        width: 100%;
        height: 100vh;
        padding: 2rem 1.5rem 2rem 1.5rem;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;
        flex-shrink: 0;
    }
    
    .join-content {
        display: flex;
        padding: 3.5rem 3.75rem;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;
        justify-content: flex-end;

        gap: 0.4375rem;
        flex: 1 0 0;
        align-self: stretch;
        background-color: #FFF;
        border-radius: 0.75rem;
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.80) 85%), url(../../../wp-content/uploads/assets/img/img-join-hero.webp) lightgray 50% / cover no-repeat;

    }

    .join-hero {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-content: flex-start;
        gap: 1rem;
        align-self: stretch;
        flex-wrap: wrap;
        justify-content: left;
    }

    .join-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        gap: 2rem;
        align-self: stretch;
        flex-wrap: wrap;
        background-color: white;
        padding: 2.5rem 3.75rem;
    }

    .join-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        align-self: stretch;
    }

    /* END SECTION - Join the Movement CTA */    




/* GREENMAX RESULTS */


    /* Results Hero */

    .section-results {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-end;
        gap: -21.25rem;
    }

    .results-cement {
        display: flex;
        height: 70vh;
        padding: 0 3.75rem;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0.625rem;
        align-self: stretch;

        background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 80.75%), url(../../../wp-content/uploads/assets/img/img-results-hero.webp) -50px -107.2px / 103.472% 140.946% no-repeat;
        background-blend-mode: multiply, multiply;
        background-size: cover;
        background-position: center;


    }

    .results-logo {
        position: relative;
        display: flex;
        width: 27.36363rem;
        height: 10rem;
        flex-shrink: 0;
        aspect-ratio: 437.82/160.00;
 
    }

    .results-hero-wrapper {

        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
    }

    /* .results-logo-sizing {

        width: 60rem;
        flex-shrink: 0;
        overflow: visible;
        z-index: 2;
        margin-bottom: -20rem;
    } */


    .results-logo-sizing {
        width: 50rem;
        margin-bottom: -6rem;
        margin-top: 3rem;
        flex-shrink: 0;
        overflow: visible;
        z-index: 2;
    }


    .GMX-ConcreteBag {
        display: flex;
        justify-content: flex-end;
        background: none;
        margin-top: -40rem;
        width: 100%;
        padding-top: 6rem;
    }


    .comparison-wrapper {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
        /* height: 50rem; */
    }


/* END - GREENMAX RESULTS */




/* GREENMAX RESULTS */


    .results-logo {
        position: relative;
        display: flex;
        width: 27.36363rem;
        height: 10rem;
        flex-shrink: 0;
        aspect-ratio: 437.82/160.00;
 
    }


/* END - GREENMAX RESULTS */



/* SECTION - GREENMAX RESULTS DETAILS */

    .section-results-detail {
        display: flex;
        width: 100%;
        padding: 3.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
        background: #FFF;
    }

    .results-detail-wrapper {
        /* display: flex;
        width: 100%;
        position: relative;
        padding: 1.5rem 0 3.75rem 0;
        flex-direction: column;
        gap: 0rem;
        align-self: stretch;
        align-items: flex-end;
        align-self: stretch;
        justify-content: flex-end; */

            display: flex;
            width: 100%;
            position: relative;
            padding: 1.5rem 0 3.75rem 0;
            flex-direction: column;
            gap: 0rem;
            align-self: stretch;
            align-items: flex-start;
            align-self: stretch;
            justify-content: flex-end;

    }

    .results-wrapper-inner {
        display: flex;
        width: 100%;
        position: absolute;
        height: 27.625rem;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 0.625rem;
        align-self: stretch;
    }

    .results-wrapper-bkgnd {
        height: 16.8125rem;
        width: 100%;
        position: top left;
        flex-shrink: 0;
        align-self: stretch;
        fill: #528953;
        mix-blend-mode: multiply;
        background-image: url(../../../wp-content/uploads/assets/img/img-results-bkgnd-green.png);
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: 100%;
     
    }

    .results-metrics {
        width: 100%;
        display: flex;
        position: top left;
        /* width: 65.125rem; */
        justify-content: space-around;
        align-items: flex-end;
        gap: 2rem;
        padding-right: 3rem;
    }

    .result-img-metrics {
        position: relative;
        width: 40%;
    }

    .result-img-compare {
        position: relative;
        width: 100%;
    }

    .section-datasheet {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: 0.75rem;
        background: url(../../../wp-content/uploads/assets/img/img-product-datasheet-bkgnd.webp) lightgray 50% / cover no-repeat;
        height: 80vh;
        padding: 20rem 0rem;
    }

/* END - GREENMAX RESULTS DETAILS */




/* GREENMAX INFOCENTER */


    /* INFOCENTER Hero */

    .section-infocenter {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: flex-end;
        gap: -21.25rem;
    }

    .infocenter-cement {
          display: flex;
        height: 70vh;
        padding: 0 3.75rem;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0.625rem;
        align-self: stretch;

        background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 80.75%), url(../../../wp-content/uploads/assets/img/img-infocenter-hero.webp) -50px -107.2px / 103.472% 140.946% no-repeat;
        background-blend-mode: multiply, multiply;
        background-size: cover;
        background-position: center;

    }

     .infocenter-contact {
          display: flex;
        height: 70vh;
        padding: 0 3.75rem;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 0.625rem;
        align-self: stretch;

        background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 80.75%), url(../../../wp-content/uploads/assets/img/img-contact-hero.webp) -50px -107.2px / 103.472% 140.946% no-repeat;
        background-blend-mode: multiply, multiply;
        background-size: cover;
        background-position: center;

    }

    .infocenter-logo {
      position: relative;
        display: flex;
        width: 27.36363rem;
        height: 10rem;
        flex-shrink: 0;
        aspect-ratio: 437.82/160.00;
 
    }

    .infocenter-hero-wrapper {

        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
    }

    .infocenter-logo-sizing {
        width: 60rem;
        margin-bottom: -6rem;
        flex-shrink: 0;
        overflow: visible;
        z-index: 2;
    }

/* END - GREENMAX INFOCENTER */


/* SECTION - GREENMAX RESULTS DETAILS */

    .section-infocenter-detail {
        display: flex;
        width: 100%;
        padding: 3.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
        background: #FFF;
    }

    .infocenter-cta {
        display: flex;
        width: 100%;
        height: 32.25rem;
        padding: 0 0rem 0rem 0rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5rem;
        flex-shrink: 0;
    }

    .infocenter-cta-wrapper {
        display: flex;
        width: 100%;
        padding: 0 2rem;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 5rem;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: 0.75rem;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.35) 100%), url(../../../wp-content/uploads/assets/img/img-infocenter-cta.webp) lightgray 50% / cover no-repeat;
        background-blend-mode: plus-darker, normal;
        text-align: right;
    }

    .section-infocenter-cta {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: 0.75rem;
        /* background: url(img/img-concrete-onthemove.webp) lightgray 50% / cover no-repeat; */
        height: 80vh;

        background: linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.40) 80.75%), url(../../../wp-content/uploads/assets/img/img-concrete-onthemove.webp) -50px -107.2px / 103.472% 140.946% no-repeat;
        background-blend-mode: multiply, multiply;
        background-size: cover;
        background-position: center;
    }

    .infocenter-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.625rem;
        align-self: stretch;
        padding: 3rem 0
    }
    

/* END - GREENMAX RESULTS DETAILS */






/* SECTION - CONTACT US FORM */

.img-form-resize {
    display: flex;
    width: 100%;
}

.section-contact-detail {
        display: flex;
        width: 100%;
        padding: 3.75rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
        background: #FFF;
        /* height: 100vh; */
    }

    .section-contact {
        display: flex;
        width: 100%;
        /* height: 100vh; */
        padding: 2rem 1.5rem 2rem 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        /* gap: 0.625rem; */
        flex-shrink: 0;
        /* background-color: #FFF; */
    }

    .contact-content {
        display: flex;
        padding: 2.5rem 3.75rem;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;
        gap: 3rem;
        flex: 1 0 0;
        align-self: stretch;
        background-color: #FFF;
        border-radius: 0.75rem;


    }

/* END - CONTACT US FORM */








/* FOOTER */

footer {
    margin: auto;
    margin: 0px;
    width: 100%;
    text-align: center;
}

footer li:hover, li:active  {
    border-bottom: var(--light-green-color,#A2D9A7) 20px solid;
    padding-top: 25px;

}
footer a {
    text-decoration: none;
    color: var(--txt-menu-grey-color);
    margin: 0px;
        font-family: "League Gothic";
        /* font-size: 2.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal; */
    }

    header a {
    text-decoration: none;
    color: white;
    margin: 0px;
        font-family: "League Gothic";
        /* font-size: 2.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal; */
    }

    header a:hover {
    text-decoration: none;
    color: var(--GMX-ltBlueGry);
    margin: 0px;
    }

.main-footer {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    background: #528953;
}

    .videounderlay-footer {
        opacity: .5;
        clip-path: margin-box;
        height: 100%;
        align-self: center;
        mix-blend-mode: multiply;
    }


.footer-box {
    margin: 0;
    display: flex;
    flex-direction: column;
	width:100%;
    vertical-align: middle;
    gap: 2rem;
    vertical-align: baseline;
    justify-content: space-around;
    align-items: center;
    background: #528953;
    background: linear-gradient(90deg, rgba(82, 137, 83, 0.00) 0%, rgba(082, 137, 83, 0.40) 50.75%);
    
    opacity: .7;
    box-shadow: 0 4px 68.4px 0 rgba(0, 0, 0, 0.25);
    padding-left: 48px;
    padding-right: 48px;
    padding-top: 2rem;
    height: 120%;
    justify-content: flex-start;
    
    /* background: linear-gradient(90deg, rgba(82, 137, 83, 0.00) 0%, rgba(082, 137, 83, 0.40) 50.75%), url(img/AdobeStock_1334866591.webp) -50px -107.2px / 103.472% 140.946% no-repeat;
     */
    background-blend-mode: multiply, multiply;
    /* background-size: 150%; */
    background-position: top;
    position: absolute;
}

.footer-company-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: bottom;
    align-items: center;
    text-align: left;
    width: 100%;
    min-width: 320px;
    justify-content: space-between;
    gap: 2rem;
}

.footer-logo {
    vertical-align: bottom;
    text-align: center;
    width: 264px;
}

.logo-footer-img {
    width: 100%;
}

.social-links {
    display: flex;
    margin: auto;
    align-content: flex-start;
    justify-content: space-evenly;
    border-radius: 15px;
    border: 1px solid var(--txt-menu-grey-color, #FFF);
    /* background-color: #ffffff; */
    
    padding: 10px 0px;
    margin-top: 36px;
    width: 100%;

}

.social-icon {
    width: 40px;
}

.footer-social {
    display: flex;
    flex-direction: row;
    vertical-align: bottom;
    text-align: center;
    width: 40%;
    gap: 4rem;
}

.footer-nav-box {
    display: flex;
    flex-direction: row;
    vertical-align: middle;
    gap: 4rem;
    vertical-align: baseline;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 0px;
    padding: 12px;
    border-bottom: solid 2px var(--lt-grey-color);
    width: 100%;
}

.ftr-ul  {
	gap: 30px;
	align-items: center;
	text-decoration: none;
	font-variation-settings: "ital" 0, "wdth" 65, "wght" 400;
    font-family: Akhand;
    font-size: 20px;
	list-style: none;
	color:white;
	margin: 0px;
    padding: 12px;

}

.ftr-li  {
	border-bottom: var(--lt-grey-color) 20px solid;
}

.ftr-li:hover, li:active  {
    border-bottom: var(--light-green-color) 20px solid;
}

.ftr-lu a {
	text-decoration: none;
	color: var(--txt-menu-grey-color);
	margin: 0px;
	}


.post-wrapper {
    display: flex;
    padding: 24px 0;
    align-items: flex-start;
    align-content: flex-start;
    gap: 30px;
    align-self: stretch;
    flex-wrap: wrap;
    width: 100%;
    flex-direction: row;

}

.post-copy {
    display: flex;
    padding: 24px 0;
    align-items: flex-start;
    align-content: flex-start;
    gap: 30px;
    align-self: stretch;
    flex-wrap: wrap;
    min-width: 250px;
    /* max-width: 400px; */

}

.post-image {
    display: flex;
    height: 250px;
    flex-direction: column;
    align-items: flex-end;
    flex: 1 0 0;

    border-radius: 6px;
    background: url(../../../wp-content/uploads/assets/img/AdobeStock_1088333120.webp) lightgray 50% / cover no-repeat;
}

.contact-form {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
    padding: 1rem 0;
}


@media (max-width: 1440px) {


    /* .reduction-wrapper {
        height: 940px;
    } */

    .features-content {
    display: flex;
    padding: 2.5rem 3.75rem;
    flex-direction: row;
    align-items: flex-start;
    /* align-self: stretch; */
    gap: 3rem;
    flex: 1 0 0;
    align-self: stretch;
    background-color: #FFF;
    border-radius: 0.75rem;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-evenly;

    }

    .feature-item{
        width: 100%;
                    max-width: 300px;
            min-width: 200px;
            flex-direction: column;
    }


    .designed-copytop {
        width: 100%;

    }

    .designed-copybtm {
        width: 100%;

    }

    .results-logo-sizing {
        width: 45rem;
        margin-bottom: -6rem;
    }

    .infocenter-logo-sizing {
        width: 45rem;
        margin-bottom: -6rem;
    }

    .section-results-detail {
        padding-top: 18rem;
    }

    .section-infocenter-detail {
        padding-top: 18rem;
    }

}

@media (max-width: 1280px) {


    /* .reduction-wrapper {
        height: 800px;
    } */

    /* .results-logo {
    position: relative;
    display: flex;
    width: 20%;
    height: 8rem;
    flex-shrink: 0;
    aspect-ratio: 437.82 / 160.00;
} */

    .results-cement {
            display: flex;
            height: 45vh;
            padding: 48px;;
            align-items: flex-start;
    }

    .results-logo {
        position: relative;
        display: flex;
        width: 50%;
        height: 8rem;
        flex-shrink: 0;
        aspect-ratio: 437.82 / 160.00;
        padding-top: 2rem;
    }

        .results-hero-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        align-content: center;
        width: 50%;
    }

        .results-logo-sizing {
        width: 30rem;
        margin-top: 6rem;
        /* padding-top: -22rem; */
    }

        .infocenter-logo-sizing {
        width: 30rem;
        margin-top: 6rem;
        /* padding-top: -22rem; */
    }
}

@media (max-width: 1024px) {


    /* .reduction-wrapper {
        height: 680px;
    } */

    .performance-compare {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-self: stretch;
}

h1 {

        font-size: 3rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;


    }

    h2 {

        font-size: 2.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;

    }

    h3 {

        font-size: 1.5rem;
        font-weight: 300;
        line-height: normal;
        font-style: normal;

    }

    h4 {

        font-size: 2rem;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
        text-transform: uppercase;
    }


    h5 {
        font-size: 1rem;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
    }


    p {
        font-size: 1rem;
        font-style: normal;
        font-weight: 300;
        line-height: 130%;
        letter-spacing: -0.011rem;
    }

    ul,
    li {
        
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2rem;
    }

    .superscript {
        font-size: 1.25rem;
        line-height: 0;
        position: relative;
        top: -0.5rem;
    }

        .menubkgnd a {
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 0;
        line-height: normal;
        text-transform: uppercase;
        margin: 0;
        padding: 0;
    }




} 

@media (max-width: 980px) {

    .designed-content {
        flex-direction: column;

    }

    .results-logo-sizing {
        width: 30rem;
        margin-bottom: 0rem;
        padding-top: 2rem;
    }

    .infocenter-logo-sizing {
        width: 30rem;
        margin-bottom: 1.5rem;
        padding-top: 2rem;
    }

    .result-img-metrics {
        position: relative;
        width: 100%;
    }


    .results-metrics {
        flex-direction: column;
        gap: 3rem;
        padding-right: 0rem;
    }

    .section-results-detail {
        display: flex;
        width: 100%;
        padding: 2rem;
        padding-right: 2rem;
        padding-top: 10rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
        background: #FFF;
        }


.results-wrapper-inner {
    display: flex;
    width: 100%;
    position: absolute;
    height: 90%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

.results-wrapper-bkgnd {
    height: 100%;
    width: 100%;
    position: top left;
    flex-shrink: 0;
    align-self: stretch;
    fill: #528953;
    mix-blend-mode: multiply;
    background-image: url(../../../wp-content/uploads/assets/img/img-results-bkgnd-green.png);
    background-position: top center;
    background-repeat: repeat;
    background-size: 100%;
    margin-top: 2.5rem;
    opacity: 0;
}

 .footer-box {
    gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0rem;
    }


}




@media (max-width: 900px) {


    .btn-wrapper {
        display: flex;
        padding-left: 2rem;
        }

    .performance {
        display: flex;
        flex-direction: column;
        align-content: flex-start;
    }

    .performance-img {
        display: flex;
        width: 100%;
        padding: 2rem;;
        }

    .performance-compare{flex-direction: column;}
   

    .hero-content {
        flex-direction: column;
 
        }

    .why-buffer {
        margin: auto;
        padding-left: 0rem;
        display: flex;
        }

    .why-wrapper {
        padding: 3rem 3rem 1rem 2rem;
        background-position-x: -15px;
    
    }

}    
@media (max-width: 764px) {
    .menubkgnd {
        flex-direction: column;
        gap: 0px;
        align-items: flex-end;
        justify-content: flex-end;
        top: 0rem;
    }
    .hdr-middle {
        margin-top: -2rem;
    }

    .contact-content {
    padding: .5rem 0rem;
        flex-direction: column;
        align-items: flex-end;
        align-self: stretch;
        gap: 3rem;
        flex: 1 0 0;
        align-self: stretch;
        background-color: #FFF;
        border-radius: 0.75rem;
    }

    .hdr-right-new {
        display: flex;
        padding-top: 0;
        padding-bottom: .25rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: visible;
        top: 1rem;
        right: 0px;
        width: 100%;
        height: 100%;

    }

    .hdr-left {
        display: flex;
        padding-right: 0rem;
        padding-left: 1.5rem;
        padding-top: 1.25rem;
        padding-bottom: 1rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: -0.0625rem;
        align-self: stretch;
        /* background-color: #393d42; */
        /* border-radius: 0px 0px 24px 24px; */
        border-top: 0px none var(--GMX-Grey);
        border-right: 0px none var(--GMX-Grey);
        border-left: 0px none var(--GMX-Grey);
        width: 30%;
        max-width: 500px;
        min-width: 220px;
        }

    .applications-content {
        padding: 4.5rem 2.75rem;

        }
}

@media (max-width: 640px) {




    .performance-img {
        display: flex;
        width: 100%;
        height: 50vh;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        align-content: center;
        gap: 0.625rem;
        flex-shrink: 0;
        margin-left: -3.75rem;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(../../../wp-content/uploads/assets/img/AdobeStock_1038817969.webp) lightgray 50% / cover no-repeat;
        border-bottom-right-radius: 12px;
        border-top-right-radius: 12px;
        padding-bottom: 2rem;
    }

        /* .reduction-wrapper {
        height: 680px;
    } */

    .why-wrapper {
        padding: 3rem 3rem 11.25rem 3rem;
        background-position-x: -108px;
    
    }

    .performance-compare {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        align-self: stretch;
}

h1 {

        font-size: 2.5rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;


    }

    h2 {

        font-size: 2rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;

    }

    h3 {

        font-weight: 400;
        font-size: 1.25rem;;
        line-height: normal;
        font-style: normal;

    }

    h4 {

        font-size: 1.5rem;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
        text-transform: uppercase;
    }


    h5 {
        font-size: .75rem;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
    }


    p {
        font-size: 1rem;
        font-style: normal;
        font-weight: 300;
        line-height: 130%;
        letter-spacing: -0.011rem;
    }

    ul,
    li {
        
        font-size: 1rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2rem;
    }

    .li-shortheight {
            line-height: 1.5rem;
    }

    .superscript {
        font-size: 1rem;
        line-height: 0;
        position: relative;
        top: -0.5rem;
    }

    .reg-results {
        font-size: .25rem;
    }

        .menubkgnd a {
        font-size: 1rem;
        font-style: normal;
        font-weight: 0;
        line-height: normal;
        text-transform: uppercase;
        margin: 0;
        padding: 0;
    }


.hero-content {
    display: flex;
    align-items: flex-end;
    flex: 1 0 0;
    vertical-align: middle;
    padding-top: 72px;
    gap: 1rem;
}
.home-overlaytext {
    display: flex;
    align-items: center;
    flex: 1 0 0;
    vertical-align: middle;
    position: absolute;
    padding: 36px 48px;
    gap: 2rem;
}

    .videounderlay {
        opacity: 1;
        clip-path: margin-box;
        height: 105%;
        align-self: center;
        margin-right: 4rem;
    }
   
    .performance-img {  
        margin-left: -4rem;
    }

    .feature-item {
    gap: .25rem;
    }

    .features-content {
    padding: 2.5rem 2rem;
    gap: 1rem
    }

    .performance-copy {
    gap: 1.25rem;
    }

    .performance {
    gap: 1.25rem;
    }

    .designed-content {
    padding: 2.5rem 2rem;
    }

    .designed-copybtm {
    width: 50%;
    align-self: flex-end;
    }

    .mixing-content {
    padding: 3rem 2rem;
    }

    .mixing-cta {
    padding: 0px 0px;
    }

    .techsupport-content {
     justify-content: center;  
     padding: 2.5rem 2rem; 
     gap: 1rem;
    }

    .btn-solid {
    font-size: 2rem;
    }

    .footer-nav-box {
    gap: 1rem;
    flex-direction: column;
    }

    .footer-box {
    gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0rem;
    }
}   

@media (max-width: 465px) {


    .why-wrapper {
    padding: 3rem 3rem 11.25rem 3rem;
    background-position-x: -171px;

    }

  .hero-content {
    display: flex;
    align-items: flex-end;
    flex: 1 0 0;
    vertical-align: middle;
    padding-top: 72px;
    gap: 1rem;
    padding-bottom: 2rem;
  }


    .performance-img {
        display: flex;
        width: 100%;
        height: 50vh;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        align-content: center;
        gap: 0.625rem;
        flex-shrink: 0;
        margin-left: -3.75rem;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), url(../../../wp-content/uploads/assets/img/AdobeStock_1038817969.webp) lightgray 50% / cover no-repeat;
        border-bottom-right-radius: 12px;
        border-top-right-radius: 12px;
        padding-bottom: 2rem;
    }

        /* .reduction-wrapper {
        height: 680px;
    } */

    .performance-compare {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-self: stretch;
}

h1 {

        font-size: 2rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;


    }

    h2 {

        font-size: 2rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: uppercase;

    }

    h3 {

        font-weight: 400;
        font-size: 1rem;
        line-height: normal;
        font-style: normal;

    }

    h4 {

        font-size: 1.5rem;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
        text-transform: uppercase;
    }


    h5 {
        font-size: .75rem;
        font-style: normal;
        font-weight: 200;
        line-height: normal;
    }


    p {
        font-size: 1rem;
        font-style: normal;
        font-weight: 300;
        line-height: 130%;
        letter-spacing: -0.011rem;
    }

    ul,
    li {
        
        font-size: 1rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2rem;
    }

    .li-shortheight {
            line-height: 1.5rem;
    }

    .superscript {
        font-size: 1rem;
        line-height: 0;
        position: relative;
        top: -0.5rem;
    }

        .menubkgnd a {
        font-size: 1rem;
        font-style: normal;
        font-weight: 0;
        line-height: normal;
        text-transform: uppercase;
        margin: 0;
        padding: 0;
    }


.hero-content {
    display: flex;
    align-items: flex-end;
    flex: 1 0 0;
    vertical-align: middle;
    padding-top: 72px;
    gap: 1rem;
}
.home-overlaytext {
    display: flex;
    align-items: flex-end;
    flex: 1 0 0;
    vertical-align: middle;
    position: absolute;
    padding: .5rem 4rem;
    gap: 2rem;
}

    .videounderlay {
        opacity: 1;
        clip-path: margin-box;
        height: 105%;
        align-self: center;
        margin-right: 7rem;
    }
   
    .performance-img {  
        margin-left: -4rem;
    }

    .feature-item {
    gap: .25rem;
    }

    .features-content {
    padding: 2.5rem 2rem;
    gap: 1rem
    }

    .performance-copy {
    gap: 1.25rem;
    }

    .performance {
    gap: 1.25rem;
    }

    .designed-content {
    padding: 2.5rem 2rem;
    }

    .designed-copybtm {
    width: 50%;
    align-self: flex-end;
    }

    .mixing-content {
    padding: 3rem 2rem;
    }

    .mixing-cta {
    padding: 0px 0px;
    }

    .techsupport-content {
     justify-content: center;  
     padding: 2.5rem 2rem; 
     gap: 1rem;
    }

    .btn-solid {
    font-size: 1.5rem;
    }

    .btn-outline {
    font-size: 1.25rem;
    }

    .footer-nav-box {
    gap: 1rem;
    flex-direction: column;
    }

    .footer-box {
    gap: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2rem;
    }
}   


@media (max-width: 400px) {

    .why-wrapper {
    padding: 3rem 3rem 1rem 1.5rem;
    background-position-x: -177px;
  }

  .hdr-logo {
  align-self: flex-start;
  width: 90%;
  min-width: 100px;
  padding-top: 0rem;
  padding-left: 0rem;
  padding-right: 0rem;
  padding-bottom: 0rem;
}

}