/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */
#sec-hero {
  position: relative;
  overflow: hidden;
  padding: 166px 0 86px; }
  #sec-hero .bg-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%; }
    #sec-hero .bg-img picture,
    #sec-hero .bg-img img {
      max-height: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      width: 100% !important;
      object-fit: cover; }
    #sec-hero .bg-img::after {
      width: 100% !important;
      height: 100% !important;
      content: '';
      position: absolute;
      background-color: rgba(0, 0, 0, 0.56);
      inset: 0;
      mix-blend-mode: multiply; }
  #sec-hero h3 {
    font-size: 20px;
    max-width: 890px;
    line-height: 1.6;
    margin: 0; }
  #sec-hero .btn.btn-primary {
    margin: 0; }
  @media screen and (max-width: 1381px) {
    #sec-hero h3 {
      margin-bottom: 49px; } }
  @media screen and (min-width: 1025px) {
    #sec-hero {
      padding: 306px 0 185px; }
      #sec-hero h1 {
        max-width: 1065px;
        margin-bottom: 6rem; }
      #sec-hero h3 {
        font-size: 24px; } }

#sec-options {
  padding-top: 80px;
  padding-bottom: 80px;
  /* Colours */
  /* Fluid heading sizes - set your min/max sizes and you're done! */
  /* Some device sizes to use with min-width */
  /* adjusted breakpoints for above */
  /* 100% widths look better than "Snapping" IMO */
  /* Utility */
  /* Additional Spacers -- don't think you'll need more than 7, but if you do -- maybe just use a custom class  :)  */ }
  #sec-options picture,
  #sec-options img {
    border-radius: 20px;
    max-height: 100% !important;
    height: 100% !important;
    object-fit: cover; }
  #sec-options p:not(.small) {
    max-width: 596px; }
  #sec-options .card {
    border-radius: 20px;
    background-color: #A8D26F;
    padding: 20px 40px 45px 30px; }
    #sec-options .card.card-0 {
      background-color: #5D7B34; }
    #sec-options .card.card-1 {
      background-color: #749B3F; }
    #sec-options .card.card-2 {
      background-color: #98C062; }
    #sec-options .card i {
      font-size: 65px;
      margin-bottom: 30px;
      display: inline-block;
      color: rgba(255, 255, 255, 0.27);
      float: right; }
    #sec-options .card h4 {
      padding-bottom: 25px;
      border-bottom: 2px solid #ffffff;
      margin-bottom: 25px;
      display: flex;
      flex-direction: column;
      width: 100%;
      line-height: 1.3; }
    #sec-options .card p {
      font-size: 16px;
      max-width: 94%; }
    @media screen and (min-width: 1025px) {
      #sec-options .card {
        padding: 20px 20px 45px 24px; } }
  @media screen and (min-width: 1025px) {
    #sec-options {
      padding-top: 108px;
      padding-bottom: 168px; } }

#sec-system {
  position: relative;
  overflow: hidden;
  padding: 94px 0; }
  #sec-system .bg-img {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%; }
    #sec-system .bg-img::after {
      content: '';
      background-color: rgba(0, 0, 0, 0.56);
      mix-blend-mode: multiply;
      position: absolute;
      inset: 0;
      width: 100% !important;
      height: 100% !important; }
    #sec-system .bg-img picture,
    #sec-system .bg-img img {
      max-height: 100% !important;
      max-width: 100% !important;
      height: 100% !important;
      width: 100% !important;
      object-fit: cover; }
  #sec-system .content {
    position: relative;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 20px;
    padding: 42px 31px; }
    #sec-system .content h5 {
      font-size: 20px;
      font-family: "Montserrat", "Poppins", sans-serif;
      max-width: 470px;
      line-height: 1.5;
      font-weight: 500;
      margin-bottom: 22px; }
    #sec-system .content h2 {
      margin-bottom: 20px; }
    #sec-system .content p {
      font-family: "Montserrat", "Poppins", sans-serif;
      font-weight: 500; }
    #sec-system .content .btn.btn-primary {
      margin-top: 30px; }
  @media screen and (min-width: 1025px) {
    #sec-system {
      padding: 110px 0; }
      #sec-system .content {
        padding: 110px 43px 53px 66px; }
        #sec-system .content h5 {
          font-size: 26px; }
        #sec-system .content h2 {
          max-width: 570px; } }

#sec-performace {
  padding-top: 97px;
  padding-bottom: 45px; }
  #sec-performace .card {
    padding: 90px 21px 53px 31px;
    border-radius: 20px; }
    #sec-performace .card .card-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: -1; }
      #sec-performace .card .card-bg::after {
        content: '';
        background: linear-gradient(180deg, #44504C00, #242222BF);
        position: absolute;
        inset: 0;
        mix-blend-mode: multiply;
        border-radius: 20px; }
      #sec-performace .card .card-bg picture,
      #sec-performace .card .card-bg img {
        max-height: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
        border-radius: 20px; }
    #sec-performace .card h2 {
      border-bottom: 2px solid #ffffff;
      padding-bottom: 22px;
      display: flex;
      flex-direction: column;
      margin-bottom: 20px; }
    #sec-performace .card.card-0 h2 {
      border-bottom: 1px solid #ffffff; }
    #sec-performace .card p {
      font-size: 16px; }
  @media screen and (min-width: 1025px) {
    #sec-performace {
      padding-top: 119px;
      padding-bottom: 98px; }
      #sec-performace .card {
        padding: 89px 43px 43px 61px; } }

#sec-tested {
  padding: 112px 0 68px;
  background-color: #F6F6F6; }
  #sec-tested h2 {
    display: flex;
    flex-direction: column;
    position: relative; }
    #sec-tested h2::after {
      content: '';
      height: 2px;
      background-color: #242222;
      flex-grow: 1;
      position: absolute;
      right: 0;
      left: 53%;
      bottom: 15px;
      width: 100%; }
  #sec-tested .h5 {
    font-size: 16px;
    font-weight: 600;
    padding-bottom: 17px;
    border-bottom: 1px solid #242222;
    margin-bottom: 33px; }
  #sec-tested .card h3 {
    font-size: 30px;
    margin-bottom: 17px; }
  #sec-tested .card p {
    font-size: 16px; }
  @media screen and (min-width: 1025px) {
    #sec-tested {
      padding: 125px 0; }
      #sec-tested .content {
        max-width: 680px; }
      #sec-tested .card h3 {
        font-size: 33px; } }

#sec-contact {
  padding-top: 90px;
  padding-bottom: 80px; }
  #sec-contact .content h3 {
    color: #242222;
    font-size: 16px;
    margin: 30px 0;
    font-weight: 600; }
    #sec-contact .content h3 a {
      color: #242222; }
      #sec-contact .content h3 a:hover {
        color: #A8D26F; }
  #sec-contact h4 {
    margin-bottom: 57px; }
  #sec-contact ul li {
    font-size: 20px;
    margin-bottom: 15px; }
    #sec-contact ul li i {
      position: relative;
      top: 10px;
      font-size: 20px; }
  #sec-contact .areas-service {
    max-width: 440px;
    font-size: 16px; }
  #sec-contact h2 {
    display: flex;
    flex-direction: column;
    position: relative; }
    #sec-contact h2::after {
      content: '';
      height: 2px;
      background-color: #242222;
      flex-grow: 1;
      position: absolute;
      right: 0;
      left: 53%;
      bottom: 15px;
      width: 100%; }
  #sec-contact .form-control {
    font-size: 18px;
    border: 1px solid #242222;
    border-radius: 5px;
    margin-bottom: 27px;
    padding: 10px;
    width: 100%; }
    #sec-contact .form-control:not(textarea) {
      height: 62px; }
  #sec-contact .btn-submit {
    border: 2px solid #242222;
    border-radius: 35px;
    background-color: transparent;
    color: #242222;
    padding: 23px 48px;
    font-size: 16px;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    font-weight: 600;
    width: fit-content; }
    #sec-contact .btn-submit:hover {
      background-color: #A8D26F;
      border-color: #ffffff;
      color: #ffffff; }
  #sec-contact .list-unstyled a:hover {
    color: #A8D26F; }
  #sec-contact label {
    margin-bottom: 16px;
    font-weight: 400; }
  @media screen and (min-width: 1025px) {
    #sec-contact {
      padding-top: 110px;
      padding-bottom: 90px; }
      #sec-contact .content h3 {
        color: #A8D26F;
        font-size: 30px;
        margin: 50px 0; }
        #sec-contact .content h3 a {
          color: #A8D26F; }
          #sec-contact .content h3 a:hover {
            color: #242222; }
      #sec-contact ul li {
        font-size: 24px; } }
  @media screen and (max-width: 1025px) {
    #sec-contact .btn-submit {
      margin: 60px auto !important; } }