#suggestionQuery{border-radius: 16px !important;}
          .hero-f {
            position: relative;
            width: 100%;
            height: 80vh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: left;
            background-color: #000000;
            background-image:url('/static-assets/images/fcom/2025/general/newsite/esg/esg-header.webp');
            background-position: top;
            background-repeat: no-repeat;
            background-size: cover;
            padding: 3%;

        }
        .hero-f video {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .hero-f-content {
            position: relative;
            z-index: 2;
          }
        .hero-f-content h1{font-size:56px; line-height: 63px;font-family:"Open Sans" !important;font-weight: 200;color: #ffffff; width:40%; padding:0 0 15px 0;}
        .hero-f-content p{font-size:18px; line-height: 27px; font-family:"Open Sans" !important;font-weight: 200;color:#ffffff; width: 40%;}
        .hero-f-content .subhead{font-size:22px; line-height: 27px; font-family:"Open Sans" !important;font-weight: 500;color:#ffffff; width: 40%;}
        .hero-f-content strong{font-family:"Open Sans" !important;font-weight: 500;}
        .overlay-f {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.25);
            z-index: 1;
        }
        .page-container{
              max-width: 100%;
              position: relative;
              width: 100%;
              margin: 0 auto;
          }
        .flex-thing{display: flex;align-items: center;flex-direction: row; flex-wrap: wrap;  justify-content: space-between;}
          /* hide and show mobile */
          .show-desktop{display: block;}
          .show-mobile{display: none;}

          @media screen and (max-width: 768px) {
            .hero-f{height: 100%; padding: 0px; background-image: none;}
            .hero-f video {
                position: relative;
                top: 0%;
                left: 0%;
                transform: none;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .hero-f-content {
                position: relative;
                z-index: 2;
                top: 0%;
                left: 0% !important;
                transform: none;
                padding: 0;
                width: 100% !important;
                text-align: center;
            }
            .hero-f-content h1, .hero-f-content p {text-align:center; width: 90%; margin: auto; padding: 3%;}
            .hero-f-content .subhead{padding:40px 20px 0 40px; margin:auto;}
        }
    }
        #two-column{padding:50px 100px 25px 100px;background-color: #DDDDDD;}
        #two-column h2{font-size: 52px; line-height: 55px; font-family:"Open Sans" !important;font-weight: 200; text-align: center;}
        #two-column .two-column-wrapper{display: flex;align-items: flex-start;flex-direction: row; flex-wrap: wrap;  justify-content: space-between;width:80%; margin: 0 auto; padding:0 30px;}
        #two-column .row-1 .ff-left{width:45%;margin:25px 0; padding:0; text-align: center;;}
        #two-column .row-1 .ff-right{width:53%;margin:25px 0; padding:0 15px;}
        #two-column .row-2 .ff-left{width:53%;margin:25px 0; padding:0 15px;}
        #two-column .row-2 .ff-right{width:45%;margin:25px 0; padding:0;}
        #two-column .ff-header{color:#003b69; text-transform: none; font-size:28px; font-family:"Open Sans" !important;font-weight: 200;}
        #two-column p{font-size:22px; font-family:"Open Sans" !important;font-weight: 200;}
        #two-column a{color:#ffffff; border:1px solid #00599C; border-radius:32px; padding:5px 20px; margin:15px 0 0 0px;font-size:16px; font-weight:500; text-decoration:none;display:inline-block;font-family:"Open Sans" !important; text-align: center; text-transform: none; background-color: #00599C; min-width:250px;}
        #two-column a:hover{color: #dddddd;}
        #two-column strong{font-weight: 500;}
        #two-column strong{font-weight: 500;}

        /* esg box */
        #esg{background-color:#ffffff;padding:1% 1%; width:83%; margin:30px auto; border-radius: 32px; color: #000000; text-align: left;}
        #esg .esg-wrapper{display: flex;align-items: stretch;flex-direction: row; flex-wrap: nowrap; gap:45px;  justify-content:center; padding:2% 4%; text-align: left;}
        #esg .esg-item{width: 45%; text-align: center;}
        #esg .subhead{font-family:"Open Sans" !important; font-size: 24px;line-height:28px;font-weight: 500; padding:0 4%;}
        #esg p{font-family:"Open Sans" !important; font-size: 18px;font-weight: 200; }
        #esg strong{font-weight: 500;}

        @media screen and (max-width: 768px) {
          #two-column{flex-direction: column; padding:5% 4%;background-image:none; text-align: center;}
          #two-column .two-column-wrapper{width:100%}
           #two-column .two-column-wrapper.row-2{width:100%; flex-direction: column-reverse;}
          #two-column .row-1 .ff-left, #two-column .row-1 .ff-right, #two-column .row-2 .ff-left, #two-column .row-2 .ff-right{width: 100%;}
          /* this overrides the default order -- pretty nifty */

          #esg{ width: 90%; padding:6%;}
            #esg .esg-wrapper{width: 100%;flex-direction: column;padding:0 20px;}
            #esg .esg-item{width: 100%;}
        }

        #environmental {background-image:linear-gradient(to right,#003B69,#00599C);padding:5% 3%; text-align: center;}
        #environmental h2{font-size: 52px; line-height: 55px;color:#ffffff; font-family:"Open Sans" !important;font-weight: 200;}
        #environmental p{width: 80%; margin:auto; font-size:18px; color:#ffffff; line-height: 25px;color:#ffffff; font-family:"Open Sans" !important;font-weight: 200;}
        #environmental a{color:#ffffff;  text-decoration:underline !important;display:inline-block;font-family:"Open Sans" !important;}
        #environmental a:hover{text-decoration: none !important;}
        #environmental .environmental-wrapper{width:85%; margin:0 auto; display: flex;align-items:flex-start;flex-direction: row; flex-wrap: wrap; gap:px;  justify-content:space-evenly; padding:20px 30px;}
        #environmental .environmental-wrapper .environmental-item{width: 30%; text-align: center;}
        #environmental .environmental-wrapper .environmental-item h3{font-size:28px; color:#ffffff; color:#ffffff; font-family:"Open Sans" !important;font-weight: 500; padding-top: 15px;}
        #environmental .environmental-wrapper .environmental-item p{font-size: 18px;font-weight:200;font-family:"Open Sans" !important; color:#ffffff;line-height: 25px;}
        #environmental .environmental-wrapper .environmental-item a{color:#ffffff; border:1px solid #ffffff; border-radius:32px; padding:5px 20px; margin:15px 0 15px 0px;font-size:16px; font-weight:500; display:inline-block;font-family:"Open Sans" !important; text-align: center; text-transform: none; text-decoration: none !important;}
        #environmental .environmental-wrapper .environmental-item a:hover{color: #dddddd !important;}
        @media (max-width: 768px) {
          #environmental .environmental-wrapper{width:95%; text-align: center; flex-direction: column;}
          #environmental .environmental-wrapper .environmental-item {width: 100%; }

      }

      /* for mobile */
      @media screen and (max-width: 768px) {
                body {
                    width:100% !important;

                }
                .flex-thing{flex-direction: column; flex-direction: column-reverse;}
                .two-column-floor .ff-right img,.two-column-solutions .ff-right img{max-width: 100%;}
                /* hide and show mobile */
              .show-desktop{display: none;}
              .show-mobile{display: block;}
            }