/* hero-s */
      #suggestionQuery{border-radius: 16px !important;}
        #hero-s {
		    text-align: center;
		    color: #ffffff;
		    padding: 7% 20% 9% 20%;
		    margin-top: 0px;
		    background-color: #1f4b35;
		    background-image: url(../images/solutions-header-new-2.webp);
		    background-size: cover;      /* 改成cover，填满容器 */
		    background-repeat: no-repeat;
		    background-position: center; /* 居中裁切，保证主体内容可见 */
		    min-height: 600px;
		}
          #hero-s .hero-s-subhead{text-transform: uppercase; font-size: 24px;}
          #hero-s .hero-s-header{font-size: 42px;}
          #hero-s h1{font-size:46px !important; line-height: 53px !important;}
          #hero-s .bolded{font-size:42px;font-weight: 500; margin: 0;}
          #hero-s p{font-size: 18px; font-weight: 200;}
          #hero-s a{color:#ffffff; border:1px solid #ffffff; border-radius:32px; padding:10px 20px; margin:15px 0 15px 0px;font-size:20px; font-weight:500; text-decoration:none;display:inline-block;font-family:"Open Sans" !important;}
          #hero-s a:before{content: "";font-size:20px;
          display: inline-block;
          margin-right: 10px;
          width: 0;
          height: 0;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-left: 10px solid #31ab32;}
          #hero-s a:hover{color:#cccccc;}
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .page-container{
            max-width: 100%;
            position: relative;
            width: 100%;
            margin: 0 auto;
        }
        .page-container-2{
            max-width: 1500px;
            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;}

      /* monitor-track */
      #monitor-track-wrapper{display: flex;align-items: stretch;flex-direction: row; flex-wrap: wrap; gap:45px;  justify-content: space-evenly; z-index:10; margin-top:60px;font-family:"Open Sans" !important;}
      #monitor-track-wrapper .monitor-track-left{width:40%; padding-left:100px;}

      #monitor-track-wrapper .monitor-track-right{width:60%;}
      #monitor-track-wrapper .monitor-track-item{color:#ffffff;padding:10px 20px; border:1px solid #ffffff; border-radius: 8px; width:25%;background-color:#379739;/* -webkit-box-shadow:0px 0px 22px 3px rgba(255,255,255,0.54)*/;
-moz-box-shadow: 0px 0px 22px 3px rgba(255,255,255,0.54);box-shadow: 0px 0px 22px 3px rgba(255,255w,255,0.54);}
      #monitor-track-wrapper .monitor-track-item h3{color:#ffffff;text-align: center; text-transform: uppercase; font-weight: 500;}
      #monitor-track-wrapper .monitor-track-item p{color: #ffffff; font-weight: 200; text-align: center;}
      @media screen and (max-width: 768px) {
        #monitor-track-wrapper{flex-direction: column; padding:2%;gap:0px; margin-top: 20px; gap:30px;}
        #monitor-track-wrapper .monitor-track-item{width: 85%; margin: 0 auto;}
        #hero-s{text-align: center; color: #ffffff;
          padding:0;
            background-image:none;
            background-position: center top;
            background-repeat: no-repeat;
          }
          #hero-s a {padding: 3%;}
          #hero-s .inventory-wrapper{padding:25px;}
          #hero-s .bolded, #hero-s h1 {font-size: 42px;}
          #hero-s .header-new h1 {font-size: 20px;}
          #hero-s .header-new h2 {font-size: 42px;}
        }
/* Total Solutions */
      #total-solutions{background-image: linear-gradient(#000000,#379739); text-align: center; color: #ffffff;
        padding: 0px 0 0 0;
        margin-top:0px;
        }
/* Total Solutions Top */
      #total-solutions-2-top{padding-top: 20px;}
      #total-solutions-2{text-align: left; color: #ffffff;
        padding:0px 10px 20px 10px;
        margin-top:0px;
        background-color:#379739;
        background-position: top;
        background-repeat: no-repeat;
        background-size: cover;
        font-family:"Open Sans" !important;
        font-weight: 200;
        }
        .total-solutions-2-wrapper{padding-top:100px;}
        #total-solutions-2 .total-solutions-2-header{font-size: 20px; text-align: center; font-weight: 200;}
        #total-solutions-2 .total-solutions-2-header span{font-weight: 500;}
        #total-solutions-2 p{font-size: 18px; text-align: center; font-weight: 200;   font-family:"Open Sans" !important;}
        #total-solutions-2 a{color:#ffffff; border:1px solid #ffffff; border-radius:32px; padding:10px 20px; margin:15px 0 15px 0px;font-size:20px; font-weight:500; text-decoration:none;display:inline-block;}
        #total-solutions-2 a:hover{color:#cccccc;}
        @media screen and (max-width: 768px) {
          #total-solutions-2 {padding: 0px 2% 2% 2%; }
        }
/* flip boxes */
      #flip{margin: auto; background-color: #31ab32; min-height: 300px;font-family:"Open Sans" !important;font-weight: 200; padding-left: 60px; padding-right: 60px;}
      #flip .flip-wrapper{justify-content: center; margin: auto; display: flex; max-width: 1500px;align-items: stretch;flex-direction: row; flex-wrap: wrap; gap:0px;  justify-content: space-evenly;}
      #flip .flip-wrapper .flip-item{width: 25%; padding:0;text-align: center;min-height: 300px;}
      #flip .flip-wrapper .flip-item img{width:175px; }
      #flip .flip-wrapper .flip-item .flip-box-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      font-family:"Open Sans" !important;
    }

    #flip .flip-wrapper .flip-item:hover .flip-box-inner {
      transform: rotateY(180deg);
    }

    #flip .flip-wrapper .flip-item .flip-box-front, #flip .flip-wrapper .flip-item .flip-box-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      display: block;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      padding: 20px;
      font-family:"Open Sans" !important;
    }

    #flip .flip-wrapper .flip-item .flip-box-front {
      color: white;
    }

    #flip .flip-wrapper .flip-item .flip-box-back {
      background-color: #333333;
      color: #ffffff;
      transform: rotateY(180deg);
    }
    .ft-weight{font-weight: 500;}
    @media screen and (max-width: 768px) {
      #flip .flip-wrapper {flex-direction: column;}
      #flip .flip-wrapper .flip-item {width: 100%;min-height: 300px;}
      #flip .flip-wrapper .flip-item .flip-box-inner {min-height: 300px;}
        }
/* what people say */

      #what-people-say{margin: auto; background-color: #c8ccce;font-family:"Open Sans" !important;}
      #what-people-say .what-people-say-wrapper{display: flex; max-width: 100%; align-items: stretch;flex-direction: row; flex-wrap: wrap; gap:0px;  }

      #what-people-say .what-people-say-wrapper .what-left{width: 30%; display: flex; padding: 100px 80px 100px 80px; font-size: 48px;font-weight: 200; color: #ffffff;background-color: #5A5858;z-index: 2;}
      #what-people-say .what-people-say-wrapper .what-left span{display: block; }
      #what-people-say .what-people-say-wrapper .what-right{width: 67%; margin: auto; background-color: #c8ccce; height: 100%; font-weight:200;font-family:"Open Sans" !important;}
      #what-people-say .slider {
        width: 100%;
        height:100%;
        perspective: 1000px;
        position: relative;
        border:1px solid #c8ccce;
        padding-top:10px;
      }

      #what-people-say .testimonial {
      position: absolute;
      top: 10px;
      left: 0;
      width: 100%;
       padding: 30px 20px;
      opacity: 0;
      transition: opacity 0.6s ease;
      z-index: 0;
      font-weight:200;
      font-family:"Open Sans" !important;
      text-align: center;
    }
    #what-people-say .testimonial p{font-size: 22px;font-weight:200; padding-bottom: 10px; font-family:"Open Sans" !important;}
            #what-people-say .testimonial.hidden {
        /* transform: rotateY(180deg); */
        opacity: 0;
        pointer-events: none;
        font-family:"Open Sans" !important;
      }

      #what-people-say .testimonial.visible {
        transform: rotateY(0);
        opacity: 1;
        align-items: center;
      }

      .ft-weight-2 {font-weight: 500; font-size: 16px;}
    #what-people-say .testimonial-title {font-size: 16px; padding-top: 20px; padding-bottom: 20px; font-weight:200;font-family:"Open Sans" !important;}


      #what-people-say .testimonial {
        transform: rotateY(0);
        opacity: 1;
      }

      #what-people-say .dots {
        text-align: center;
        align-content: flex-end;
        position: relative; !important;
        padding-top: 250px;
      }

      #what-people-say .dot {
        height: 12px;
        margin-top: 120px;
        width: 12px;
        margin: 0 5px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

      #what-people-say .dot.active {
        background-color: #333;
      }
      @media screen and (max-width: 768px) {
      #what-people-say .what-people-say-wrapper {flex-direction: column; top: 10px;}
      #what-people-say .what-people-say-wrapper .what-left {width: 100%; text-align: center;}
      #what-people-say .what-people-say-wrapper .what-right {width: 100%; padding-bottom: 20px; height: fit-content; }
      #what-people-say .testimonial{height: auto;}
      #what-people-say .dots {position: relative; bottom: 5px; padding-top: 400px;}

      }

/* lets talk */

      #lets-talk{background-image:linear-gradient(to bottom right,#28812a, #31ab32);background-color:#379739;padding: 40px 0;}
      #lets-talk h2{color: #ffffff; font-size: 52px; font-weight: 100px; text-align: center; margin: 5px 0 20px 0;}
      #lets-talk .form-include{width: 80%; margin: auto; background-color: #ffffff; border-radius: 12px; padding:30px 90px;}

@media screen and (max-width: 768px) { /* hide and show mobile */ .show-desktop{display: none;} .show-mobile{display: block;} }