@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700&display=swap');


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

  .offsite-left{
    left: -5%;
  }

  .mobile-only{
    display: none;
  }

  .desktop-only{
    display: block;
  }


  .page-link{
    text-decoration: none;
    border-radius: 0px !important;
  }
  
  .pagination a {
    color: black;
    text-decoration: none;
    transition: background-color .3s;
    border: 0px solid #ddd;
    border-radius: 0px !important;
  }

  .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link{ 
    color: #49B749;
     border-bottom: 3px solid #49B749;
     font-weight: bold;
  }

  .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #49B749;
    border-color: #49B749;
}

  .topnav a {
    float: left;
    display: block;
    color: #49B749;
    text-align: center;
    text-decoration: none;
    border-bottom: 3px solid transparent;
  }
  
  .topnav a:hover {
    border-bottom: 3px solid #49B749;
  }
  
  .topnav a.active {
    border-bottom: 3px solid #49B749;
  }
  
  .pagination a:hover:not(.active) {background-color: #ddd;}
  
  .bottom-space{
    margin-top: 44px;
  }

  .wrap-text{
    width: 37rem;
  }
  .wrap-text-slider3{
    width: 55rem;
  }

  .wrap-text-slider-page2{
    width: 55rem;
  }

  .wrap-text-slider-page-career{
    width: 45rem;
  }

  body {
    font-family: 'Inter';font-size: 22px;
  }
  
  html {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: 'Inter';
  }
  
  .green {
      color: #49B749
  }
  
  .desk-hide{
    display: none;
  }
  
  .buttonHover1{
    position: absolute;
    bottom: 8rem;
    left: 84.5%;
  }
  
  .buttonHover2{
    position: absolute;
    bottom: 11rem;
    left: 85%;
    z-index: 50;
  }
  
  .buttonContact{
    position: relative;
    bottom: 60px;
    left: 52%;
    z-index: 50;
  }

  .bottom-space {
    margin-top: 120px;
  }
  
  p{
    font-size: 15px !important;
    line-height: 23px;
    word-wrap: break-word;
    width: 45rem;
  }
  
  h1{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 65px !important;
    line-height: 65px !important;
  }

  h2{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 45px !important;
    line-height: 65px !important;
  }
  
  h6{
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 22px !important;
    line-height: 35px !important;
  }
  
  .button-green {
      background-color: #49B749; /* Green */
      border: none;
      color: white;
      padding: 10px 30px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }

    .button-green:hover {
      background-color: #F8941D;
    }
  
    .img-2 {
      position: relative;
      top: 1%;
      width: 209%;
      z-index: -5;
      float: right;
    }
  
    .card-text{
      width: 45ch;
    }
  
    .special-card {
      background: rgba(000, 000, 000, .4);
        color: #FFFF !important;
        height: 440px;
        width: 24%;
        position: absolute;
        left: 85%;
        top: 25rem;
      }
  
    link.active{
      color: #49B749 !important;
    }
  
    .li-point{
      text-decoration: none !important;
      font-size: 15px;
    }
  
    html, body {
      max-width: 100%;
      overflow-x: hidden;
    }
    
  
    .carousel-indicators .active{
      background-color: #F8941D;  
    }
  
    .carousel-indicators li {
      width: 15px;
      bottom: 80%;
      height: 15px;
      border-radius: 100%;
      background-color: #49B749;      
      z-index: 9999;
    }
  
    .carousel-caption {
      top: 3%;
      bottom: auto;
      left: -65%;
  }
  
    .p-copyright{
      font-size: 14px;
    }
  
    .carousel-indicators {
      bottom: 7%;
      z-index: 15;
      width: 70%;
      margin-left: 58%;
  }
  
  .card:hover{
    background: linear-gradient(
          50deg,
          #49B749,
          #49B749 100%
        );
    color: white !important;
  }

  .card:active{
    background: orange !important;
  }
  
  .card-hover-a{
    text-decoration: none;
    color: black !important;
  }
  
  .card-hover-a:hover{
    text-decoration: none;
    color: black !important;
    background: orange !important;
  }
  
  .carousel2 {
    bottom: 13%;
    z-index: 15;
    width: 70%;
    left: 1%;
  }
  
  .wrap-text-2{
    width: 50rem !important;
  }
  
  .button-2{
    bottom: 0%; right: 50px;
  }
  
  .button-3{
    bottom: 15%; right: 50px;
  }
  
  .button-4{
    bottom: 20%; right: 50px;
  }
  
}

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

  .bottom-space{
    margin-top: 22px;
  }

  .offsite-left{
    left: -5%;
  }
  
  .wrap-text{
    width: 37rem;
  }
  .wrap-text-slider3{
    width: 40rem;
  }

  .wrap-text-slider-page2{
    width: 40rem;
  }

  .wrap-text-slider-page-career{
    width: 35rem;
  }

  body {
    font-family: 'Inter';font-size: 15px;
  }
  
  html {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: 'Inter';
  }
  
  .green {
      color: #49B749
  }
  
  .desk-hide{
    display: none;
  }
  
  .buttonHover1{
    position: absolute;
    bottom: 6rem;
    left: 82.5%;
    z-index: 50;
  }
  
  .buttonHover2{
    position: absolute;
    bottom: 6rem;
    left: 82.5%;
    z-index: 50;
  }
  
  .buttonContact{
    position: relative;
    bottom: 60px;
    left: 52%;
    z-index: 50;
  }
  
  p{
    font-size: 15px !important;
    line-height: 23px;
    word-wrap: break-word;
    width: 45rem;
  }
  
  h1{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 48px !important;
    line-height: 62px !important;
  }

  h2{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 39px !important;
    line-height: 54px !important;
  }

  h4{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 27px;
    line-height: 32px;
  }
  
  h6{
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 18px !important;
    line-height: 28px !important;
  }
  
  .button-green {
      background-color: #49B749; /* Green */
      border: none;
      color: white;
      padding: 10px 30px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
  
    .img-2 {
      position: relative;
      width: 204.5%;
      z-index: -5;
      float: right;
    }
  
    .card-text{
      width: 50ch;
    }
  
    .special-card {
      background: rgba(000, 000, 000, .4);
        color: #FFFF !important;
        height: 350px;
        width: 25%;
        position: absolute;
        left: 83%;
        top:  350px;
      }
  
    /* .li-point{
      text-decoration: none !important;
      font-size: 15px;
    } */
  
    .carousel-indicators .active{
      background-color: #F8941D;  
    }
  
    .carousel-indicators li {
      width: 10px;
      bottom: 80%;
      height: 10px;
      border-radius: 100%;
      background-color: #49B749;      
      z-index: 9999;
    }
  
    .carousel-caption {
      top: 3%;
      bottom: auto;
      left: -65%;
  }
  
    .p-copyright{
      font-size: 14px;
    }
  
    .carousel-indicators {
      bottom: 5%;
      z-index: 15;
      width: 70%;
      margin-left: 57.5%;
  }
  
  /* .card:hover{
    background: linear-gradient(
          45deg,
          #49B749,
          #49B749 100%
        );
    color: white !important;
  } */

  /* .card:active{
    background: orange !important;
  }
  
  .card-hover-a{
    text-decoration: none;
    color: black !important;
  }
  
  .card-hover-a:hover{
    text-decoration: none;
    color: white !important;
    background: orange !important;
  } */
  
  .carousel2 {
    bottom: 6%;
    z-index: 15;
    width: 70%;
    left: 1%;
  }
  
  .wrap-text-2{
    width: 50rem !important;
  }
  
  .button-2{
    bottom: 0%; right: 50px;
  }
  
  .button-3{
    bottom: 15%; right: 50px;
  }
  
  .button-4{
    bottom: 20%; right: 50px;
  }
  
}

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

  .bottom-space{
    margin-top: 22px;
  }

  .offsite-left{
    left: -5%;
  }
  
  .wrap-text{
    width: 37rem;
  }
  .wrap-text-slider3{
    width: 40rem;
  }

  .wrap-text-slider-page2{
    width: 40rem;
  }

  .wrap-text-slider-page-career{
    width: 35rem;
  }

  body {
    font-family: 'Inter';font-size: 15px;
  }
  
  html {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: 'Inter';
  }
  
  .green {
      color: #49B749
  }
  
  .desk-hide{
    display: none;
  }
  
  .buttonHover1{
    position: absolute;
    bottom: 6rem;
    left: 80.5%;
    z-index: 50;
  }
  
  .buttonHover2{
    position: absolute;
    bottom: 6rem;
    left: 81%;
    z-index: 50;
  }
  
  .buttonContact{
    position: relative;
    bottom: 60px;
    left: 52%;
    z-index: 50;
  }
  
  p{
    font-size: 15px !important;
    line-height: 23px;
    word-wrap: break-word;
    width: 45rem;
  }
  
  h1{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 48px !important;
    line-height: 62px !important;
  }

  h2{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 39px !important;
    line-height: 54px !important;
  }

  h4{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 27px;
    line-height: 32px;
  }
  
  h6{
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 27px !important;
  }
  
  .button-green {
      background-color: #49B749; /* Green */
      border: none;
      color: white;
      padding: 10px 30px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
  
    .img-2 {
      position: relative;
      width: 204.5%;
      z-index: -5;
      float: right;
    }
  
    .card-text{
      width: 50ch;
    }
  
    .special-card {
      background: rgba(000, 000, 000, .4);
        color: #FFFF !important;
        height: 350px;
        width: 25%;
        position: absolute;
        left: 84%;
        top:  325px;
      }
  
    /* .li-point{
      text-decoration: none !important;
      font-size: 15px;
    } */
  
    .carousel-indicators .active{
      background-color: #F8941D;  
    }
  
    .carousel-indicators li {
      width: 10px;
      bottom: 80%;
      height: 10px;
      border-radius: 100%;
      background-color: #49B749;      
      z-index: 9999;
    }
  
    .carousel-caption {
      top: 3%;
      bottom: auto;
      left: -65%;
  }
  
    .p-copyright{
      font-size: 14px;
    }
  
    .carousel-indicators {
      bottom: 5%;
      z-index: 15;
      width: 70%;
      margin-left: 56%;
  }
  
  /* .card:hover{
    background: linear-gradient(
          45deg,
          #49B749,
          #49B749 100%
        );
    color: white !important;
  } */

  /* .card:active{
    background: orange !important;
  }
  
  .card-hover-a{
    text-decoration: none;
    color: black !important;
  }
  
  .card-hover-a:hover{
    text-decoration: none;
    color: white !important;
    background: orange !important;
  } */
  
  .carousel2 {
    bottom: 6%;
    z-index: 15;
    width: 70%;
    left: 1%;
  }
  
  .wrap-text-2{
    width: 50rem !important;
  }
  
  .button-2{
    bottom: 0%; right: 50px;
  }
  
  .button-3{
    bottom: 15%; right: 50px;
  }
  
  .button-4{
    bottom: 20%; right: 50px;
  }
  
}

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

  .bottom-space{
    margin-top: 44px;
  }

  .offsite-left{
    left: -5%;
  }
  
  .wrap-text{
    width: 37rem;
  }
  .wrap-text-slider3{
    width: 40rem;
  }

  .wrap-text-slider-page2{
    width: 40rem;
  }

  .wrap-text-slider-page-career{
    width: 35rem;
  }

  body {
    font-family: 'Inter';font-size: 15px;
  }
  
  html {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: 'Inter';
  }
  
  .green {
      color: #49B749
  }
  
  .desk-hide{
    display: none;
  }
  
  .buttonHover1{
    position: absolute;
    bottom: 6rem;
    left: 79.5%;
  }
  
  .buttonHover2{
    position: absolute;
    bottom: 6rem;
    left: 80%;
    z-index: 50;
  }
  
  .buttonContact{
    position: relative;
    bottom: 60px;
    left: 52%;
    z-index: 50;
  }
  
  p{
    font-size: 15px !important;
    line-height: 23px;
    word-wrap: break-word;
    width: 45rem;
  }
  
  h1{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 42px !important;
    line-height: 54px !important;
  }

  h2{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 37px !important;
    line-height: 54px !important;
  }

  h4{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
  }
  
  h6{
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 23px !important;
  }
  
  .button-green {
      background-color: #49B749; /* Green */
      border: none;
      color: white;
      padding: 10px 30px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
    }
  
    .img-2 {
      position: relative;
      width: 204.5%;
      z-index: -5;
      float: right;
    }
  
    .card-text{
      width: 50ch;
    }
  
    .special-card {
      background: rgba(000, 000, 000, .4);
        color: #FFFF !important;
        height: 350px;
        width: 25%;
        position: absolute;
        left: 83.5%;
        top: 18rem;
      }
  
    /* .li-point{
      text-decoration: none !important;
      font-size: 15px;
    } */
  
    .carousel-indicators .active{
      background-color: #F8941D;  
    }
  
    .carousel-indicators li {
      width: 10px;
      bottom: 80%;
      height: 10px;
      border-radius: 100%;
      background-color: #49B749;      
      z-index: 9999;
    }
  
    .carousel-caption {
      top: 3%;
      bottom: auto;
      left: -65%;
  }
  
    .p-copyright{
      font-size: 14px;
    }
  
    .carousel-indicators {
      bottom: 5%;
      z-index: 15;
      width: 70%;
      margin-left: 56%;
  }
  
  /* .card:hover{
    background: linear-gradient(
          45deg,
          #49B749,
          #49B749 100%
        );
    color: white !important;
  } */

  /* .card:active{
    background: orange !important;
  }
  
  .card-hover-a{
    text-decoration: none;
    color: black !important;
  }
  
  .card-hover-a:hover{
    text-decoration: none;
    color: white !important;
    background: orange !important;
  } */
  
  .carousel2 {
    bottom: 6%;
    z-index: 15;
    width: 70%;
    left: 1%;
  }
  
  .wrap-text-2{
    width: 50rem !important;
  }
  
  .button-2{
    bottom: 0%; right: 50px;
  }
  
  .button-3{
    bottom: 15%; right: 50px;
  }
  
  .button-4{
    bottom: 20%; right: 50px;
  }
  
}

@media only screen and (max-width: 1366px) {
  .buttonHover1{
    position: absolute;
    left: 78.5%;
    bottom: 5rem;
  }
  .buttonHover2{
    position: absolute;
    left: 78.5%;
    bottom: 5rem;
  }
  .carousel2 {
    bottom: 5%;
    z-index: 15;
    width: 70%;
    left: 0%;
  }
  
}

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

  .bottom-space{
    margin-top: -20px;
  }

  .h5{
    font-size: 18px;
  }

  .offsite-left{
    left: -5%;
  }
  
  .wrap-text{
    width: 37rem;
  }
  .wrap-text-slider3{
    width: 40rem;
  }

  .wrap-text-slider-page2{
    width: 33rem;
  }

  .wrap-text-slider-page-career{
    width: 35rem;
  }

  body {
    font-family: 'Inter';font-size: 15px;
  }
  
  html {
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: 'Inter';
  }
  
  .green {
      color: #49B749
  }
  
  .desk-hide{
    display: none;
  }
  
  .buttonHover1{
    position: absolute;
    bottom: 4rem;
    left: 79%;
  }
  
  .buttonHover2{
    position: absolute;
    bottom: 6rem;
    left: 80%;
    z-index: 50;
  }
  
  .buttonContact{
    position: relative;
    bottom: 60px;
    left: 52%;
    z-index: 50;
  }
  
  p{
    font-size: 15px !important;
    line-height: 23px;
    word-wrap: break-word;
    width: 45rem;
  }
  
  h1{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 42px !important;
    line-height: 54px !important;
  }

  h2{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 37px !important;
    line-height: 54px !important;
  }

  h4{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
  }
  
  h6{
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 15px !important;
    line-height: 23px !important;
  }
  
  .button-green {
      background-color: #49B749; /* Green */
      border: none;
      color: white;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 15px;
    }
  
    .img-2 {
      position: relative;
      width: 204.5%;
      z-index: -5;
      float: right;
    }
  
    .card-text{
      width: 45ch;
    }
  
    .special-card {
      background: rgba(000, 000, 000, .4);
        color: #FFFF !important;
        height: 300px;
        width: 25%;
        position: absolute;
        left: 83%;
        top: 16rem;
      }
  
    /* .li-point{
      text-decoration: none !important;
      font-size: 15px;
    } */
  
    .carousel-indicators .active{
      background-color: #F8941D;  
    }
  
    .carousel-indicators li {
      width: 10px;
      bottom: 80%;
      height: 10px;
      border-radius: 100%;
      background-color: #49B749;      
      z-index: 9999;
    }
  
    .carousel-caption {
      top: 3%;
      bottom: auto;
      left: -65%;
  }
  
    .p-copyright{
      font-size: 14px;
    }
  
    .carousel-indicators {
      bottom: 2%;
      z-index: 15;
      width: 70%;
      margin-left: 55%;
  }
  
  /* .card:hover{
    background: linear-gradient(
          45deg,
          #49B749,
          #49B749 100%
        );
    color: white !important;
  } */

  /* .card:active{
    background: orange !important;
  }
  
  .card-hover-a{
    text-decoration: none;
    color: black !important;
  }
  
  .card-hover-a:hover{
    text-decoration: none;
    color: white !important;
    background: orange !important;
  } */
  
  .carousel2 {
    bottom: 6%;
    z-index: 15;
    width: 70%;
    left: 1%;
  }
  
  .wrap-text-2{
    width: 50rem !important;
  }
  
  .button-2{
    bottom: 0%; right: 50px;
  }
  
  .button-3{
    bottom: 15%; right: 50px;
  }
  
  .button-4{
    bottom: 20%; right: 50px;
  }
  
}

@media only screen and (max-width: 1024px) {
  /* For tablet: */

  a{
    font-size: 11px !important;
  }

  /* .tablet-left-pos{
    margin-left: -200px
  } */

  .img-ipad{
    width: 100%;
    height: 550px;
    object-fit: cover;
  }

  .card-text{
    width: 45ch;
  }

  .special-card {
    background: rgba(000, 000, 000, .4);
      color: #FFFF !important;
      height: 300px;
      width: 25%;
      position: absolute;
      left: 80.5%;
      top: 9rem;
    }


  .buttonHover1{
    position: absolute;
    bottom: 3.5rem;
    left: 73.5%;
  }

  .carousel-indicators{
    left: -2.5%;
  }

  .buttonHover2{
    position: absolute;
    bottom: 5rem;
    left: 73.5%;
  }

  .carousel-caption-mobile {
    top: 3%;
    bottom: auto;
    left: 5%;
}

.add-right{
  margin-left: 56%;
}

  .mobile-title-1{
    left: -100px !important;
  }

  /* .mobile-only{
    display: block;
  }
  .desktop-only{
    display: none;
  } */

  .tablet-up{
    margin-top: -0.2rem !important;
  }

  .tablet-up-2{
    margin-top: -1rem !important;
  }

  .resize-ul{
    font-size: 12px !important;
  }

  .tablet-left{
    margin-left: -17px !important;
  }

  p{
    font-size: 12px !important;
    line-height: 25px;
    word-wrap: break-word;
    width: 45rem;
  }
  
  h1{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 25px !important;
    line-height: 28px !important;
  }

  h2{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 24px !important;
    line-height: 65px !important;
  }
  
  h6{
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }
  h4{
    font-size: 18px !important;
  }

  .navbar-light .navbar-toggler {
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,0) !important;
    }

  .pagination a {
    color: black;
    text-decoration: none;
    transition: background-color .3s;
    border: 0px solid #ddd;
    border-radius: 0px !important;
  }

  .pagination a:hover:not(.active) {background-color: #ddd;}
}

@media only screen and (max-width: 600px) {
  /* For phone: */
  .margin-left-mobile
  {
    margin-left: 100px;
  }

  .tablet-left-pos{
    margin-left: 0px
  }

  .img-mobile{
    width: 100%;
  }

  .special-card {
    background: rgba(000, 000, 000, .4);
      color: #FFFF !important;
      height: 140px;
      width: 73%;
      position: absolute;
      left: 35%;
      top: 5rem;
    }


  .buttonHover1-mobile{
    position: absolute;
    bottom: 3rem;
    left: 9px;
  }

  .buttonHover2-mobile{
    position: absolute;
    bottom: 3rem;
    left: 9px;
  }

  .carousel-caption-mobile {
    top: 3%;
    bottom: auto;
    left: 5%;
}


  .mobile-title-1{
    left: -100px !important;
  }

  .mobile-only{
    display: block;
  }
  .desktop-only{
    display: none;
  }

  /* .li-point{
    font-size: 12px !important;
  } */

  p{
    font-size: 12px !important;
    line-height: 25px;
    word-wrap: break-word;
    width: 45rem;
  }
  
  h1{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 24px !important;
    line-height: 32px !important;
  }

  h2{
    font-style: normal !important;
    font-weight: bolder !important;
    font-size: 24px !important;
    line-height: 65px !important;
  }
  
  h6{
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }
  h4{
    font-size: 18px !important;
  }

  .navbar-light .navbar-toggler {
    color: rgba(0,0,0,.5);
    border-color: rgba(0,0,0,0) !important;
    }

  .pagination a {
    color: black;
    text-decoration: none;
    transition: background-color .3s;
    border: 0px solid #ddd;
    border-radius: 0px !important;
  }

  .pagination a:hover:not(.active) {background-color: #ddd;}
}