/**
AUFBAU CSS

1) General
2) Navbar
    -> /* ALL REGULAR SIZED with max-width 1899
    -> /* MANY LARGE SCREENS 1900-3000  (with media scaler)
    -> /* 4K SUPERLARGE SCREENS min width 3000 (with media scaler)
3) Fade-Up
4) Carousel Hero Section
5) Sections General Design
6) Cards
7) Services and Text
8) Footer
9) Cookie Banner
10) Telephone Pop Up 

*/

/*--------------------------------------------------------------
1) GENERAL
--------------------------------------------------------------*/
body {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  color: #4d4643;
  overflow-x: hidden;
}

a {
  color: #1d6f26;
}

a:hover {
  color: #1d6f26;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Muli", sans-serif;
}


/*--------------------------------------------------------------
2) NAVBAR
--------------------------------------------------------------*/

.greysupport {
  position: absolute; 
  left: 11px; 
  top: 94px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-top: 0px; 
  background-color: #b1b2b3;
  border: 1px solid;
  border-top-color: none;
  border-right-color: #fff;
  border-left-color: #fff;
  border-bottom-color: #fff;

}

.navbar-custom {
  background-color: #b1b2b3;
}        

.custom-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
} 

.custom-toggler.navbar-toggler {
border-color: rgb(255,255,255);
} 


  /* ALL REGULAR SIZED with max width 1899*/
        
  @media screen and (max-width:1899px) 
    {
    
        body {
          padding-top: 55px; 
          }

        .greenbg {
          background-color: #1a801a;
        }

        .whitebg {
          background-color: #fff;
        }

        /* NAVIGATIONSMENÜ: navbar Menue*/

        .setlogo {
          position: absolute; 
          left: 50px; 
          top: -39px; 
          z-index: 3;
        }

        .setwhiteline {
          height: 1px; 
          top: 55px; 
          z-index: 3;
        }

        .setgreenline {
          height: 38px;
          top: 56px; 
          z-index: 3;
        }

        .navbar-custom .navbar-brand, .navbar-custom .navbar-text {
              color: #b1b2b3;
              font-size: 15px;
            }
          
        .navbar-custom .navbar-nav .nav-link {
              color: #fff;
              font-size: 15px;
          }

          .navbar-custom .nav-item.active .nav-link,
          .navbar-custom .nav-item:hover .nav-link {
              color: #1d6f26;
              font-size: 15px;
          }

          .submenue-btn {
              color: #fff;
              border-radius: 0px;
              border-color: #fff;
              font-size: 15px;
              background-color:#b1b2b3;
              text-decoration: none;
          }

          .submenue-green:link {
              color: #fff;
              font-size: 15px;
              background-color: rgba(68, 68, 68, 0.0);
              text-decoration: none;
          }

          .submenue-green:visited{
              color: #fff;
              font-size: 15px;
              background-color:rgba(68, 68, 68, 0.0);
              text-decoration: none;
          }

          .submenue-green:hover{
              color:  #1d6f26;
              font-size: 15px;
              background-color:rgba(68, 68, 68, 0.0);
              text-decoration: none;
          }


    }
    
    /* MANY LARGE SCREENS 1900-3000*/

    @media screen and (min-width:1900px) and (max-width:2999px) 
    {
    
        .fourkscale {
     
        zoom: 1.6; 
        -moz-transform: scale(1.6);
        -moz-transform-origin: top center;
        -o-transform: scale(1.6);       
        -o-transform-origin: top center;
        
        }
           
        /* NAVIGATIONSMENÜ: navbar Menue*/

        .setlogo {
          position: absolute; 
          left: 50px; 
          top: -33px; 
          z-index: 3;
        }

        .setwhiteline {
          height: 1px; 
          
          top: 68px; 
          z-index: 3;
        }

        .setgreenline {
          height: 38px; 
          
          top: 69px; 
          z-index: 3;
        }

        .greenbg {
          background-color: #1a801a;
        }

        .whitebg {
          background-color: #fff;
        }
        

            .navbar-custom .navbar-brand, .navbar-custom .navbar-text {
              color: #b1b2b3;
              font-size: 24px;
              margin-left: 5px;
              margin-right: 5px;
            }
          
          .navbar-custom .navbar-nav .nav-link {
              color: #fff;
              font-size: 24px;
              margin-left: 5px;
              margin-right: 5px;
            
          }

          .navbar-custom .nav-item.active .nav-link,
          .navbar-custom .nav-item:hover .nav-link {
              color: #1d6f26;
              font-size: 24px;
              margin-left: 5px;
              margin-right: 5px;
            
          }

          .submenue-btn {
              color: #fff;
              border-radius: 0px;
              border-color: #fff;
              font-size: 24px;
              background-color:#b1b2b3;
              text-decoration: none;
              margin-left: 5px;
              margin-right: 5px;
            
          }

          .submenue-green:link {
              color: #fff;
              font-size: 24px;
              background-color:rgba(68, 68, 68, 0.0);
              text-decoration: none;
              margin-left: 5px;
              margin-right: 5px;
            
          }

          .submenue-green:visited{
              color: #fff;
              font-size: 24px;
              background-color:rgba(68, 68, 68, 0.0);
              text-decoration: none;
              margin-left: 5px;
              margin-right: 5px;
            
          }

          .submenue-green:hover{
              color:  #1d6f26;
              font-size: 24px;
              background-color:rgba(68, 68, 68, 0.0);
              text-decoration: none;
              margin-left: 5px;
              margin-right: 5px;
            
          }

          .footerbg {
            background-color: #b1b2b3;  
        }
    }

    /* 4K SUPERLARGE SCREENS min width 3000*/

    @media screen and (min-width:3000px) 
    {
        

        .fourkscale {
       
          zoom: 2.2; 
          -moz-transform: scale(2.2);
          -moz-transform-origin: top center;
          -o-transform: scale(2.2);       
          -o-transform-origin: top center;
          
          
        }

         /* NAVIGATIONSMENÜ: navbar Menue*/

        .setlogo {
          position: absolute; 
          left: 50px; 
          top: -29px; 
          z-index: 3;
        }

        .setwhiteline {
          height: 1px;   
          top: 77px; 
          z-index: 3;
        }

        .setgreenline {
          height: 38px;
          top: 78px; 
          z-index: 3;
        }

        .greenbg {
          background-color: #1a801a;
        }

        .whitebg {
          background-color: #fff;
        }
        

        
          .navbar-custom .navbar-brand, .navbar-custom .navbar-text {
              color: #b1b2b3;
              font-size: 30px;
              margin-left: 10px;
              margin-right: 10px;
            }
          
          .navbar-custom .navbar-nav .nav-link {
              color: #fff;
              font-size: 30px;
              margin-left: 10px;
              margin-right: 10px;
            
          }

          .navbar-custom .nav-item.active .nav-link,
          .navbar-custom .nav-item:hover .nav-link {
              color: #1d6f26;
              font-size: 30px;
              margin-left: 10px;
              margin-right: 10px;
            
          }

          .submenue-btn {
              color: #fff;
              border-radius: 0px;
              border-color: #888;
              font-size: 30px;
              background-color:#b1b2b3;
              text-decoration: none;
              margin-left: 10px;
              margin-right: 10px;
            
          }

          .submenue-green:link {
              color: #fff;
              font-size: 30px;
              background-color:rgba(68, 68, 68, 0.0);
              text-decoration: none;
              margin-left: 10px;
              margin-right: 10px;
            
          }

          .submenue-green:visited{
              color: #fff;
              font-size: 30px;
              background-color:rgba(68, 68, 68, 0.0);
              text-decoration: none;
              margin-left: 10px;
              margin-right: 10px;
            
          }

          .submenue-green:hover{
              color:  #1d6f26;
              font-size: 30px;
              background-color:rgba(68, 68, 68, 0.0);
              text-decoration: none;
              margin-left: 10px;
              margin-right: 10px;
            
          }

          .footerbg {
            background-color: #b1b2b3;  
        }
    }


/*--------------------------------------------------------------
3) FADE-UP Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}


/*--------------------------------------------------------------
4) CAROUSEL Hero Section
--------------------------------------------------------------*/
#hero {
  width: 100%;
  height: 50vh;
  overflow: hidden;
  position: relative;
  padding: 0;
}

#hero .carousel, #hero .carousel-inner, #hero .carousel-item, #hero .carousel-item::before {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#hero .carousel-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: absolute;
  bottom: 60px;
  top: 110px;
  left: 50px;
  right: 50px;
}

#hero .carousel-content {
  background: rgba(28, 23, 21, 0.7);
  padding: 20px;
  color: #fff;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
  border-top: 5px solid #2d7d36;
}

#hero .carousel-content h2 {
  color: #fff;
  margin-bottom: 30px;
  font-size: 28px;
  font-weight: 700;
}

#hero .btn-get-started {
  font-family: "Muli", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 4px;
  transition: 0.5s;
  line-height: 1;
  margin: 10px;
  color: #fff;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  border: 2px solid #2d7d36;
}

#hero .btn-get-started:hover {
  background: #2d7d36;
  color: #fff;
  text-decoration: none;
}

#hero .carousel-inner .carousel-item {
  transition-property: opacity;
}

#hero .carousel-inner .carousel-item,
#hero .carousel-inner .active.carousel-item-left,
#hero .carousel-inner .active.carousel-item-right {
  opacity: 0;
}

#hero .carousel-inner .active,
#hero .carousel-inner .carousel-item-next.carousel-item-left,
#hero .carousel-inner .carousel-item-prev.carousel-item-right {
  opacity: 1;
  transition: 0.5s;
}

#hero .carousel-inner .carousel-item-next,
#hero .carousel-inner .carousel-item-prev,
#hero .carousel-inner .active.carousel-item-left,
#hero .carousel-inner .active.carousel-item-right {
  left: 0;
  transform: translate3d(0, 0, 0);
}

#hero .carousel-control-prev, #hero .carousel-control-next {
  width: 10%;
}

#hero .carousel-control-next-icon, #hero .carousel-control-prev-icon {
  background: none;
  font-size: 48px;
  line-height: 1;
  width: auto;
  height: auto;
}

#hero .carousel-indicators li {
  cursor: pointer;
}

@media (min-width: 1024px) {
  #hero .carousel-content {
    width: 60%;
  }
  #hero .carousel-control-prev, #hero .carousel-control-next {
    width: 5%;
  }
}

@media (max-width: 992px) {
  #hero {
    height: calc(80vh - 70px);
  }
  #hero .carousel-content h2 {
    margin-bottom: 15px;
    font-size: 22px;
  }
  #hero .carousel-content p {
    font-size: 15px;
  }
}

@media (max-height: 500px) {
  #hero {
    height: 120vh;
  }
}

/*--------------------------------------------------------------
5) SECTIONS General Design
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
  background-color: #f6f3f2;
}

.section-title {
  padding-bottom: 30px;
  letter-spacing: 0.01em;
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  color: #666;
}

.section-title h2 {
  font-size: 26px;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 0;
  color: #666;
}


.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
6) CARDS
--------------------------------------------------------------*/

.overlay-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 300; /* Ensure it sits above the parent div content */
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0); /* Invisible background */
}



.greenbanner-div {
  position: absolute;
  padding: 3px 2px 3px 10px;
  border:1px solid white;
  top: 0px;
  left: 0px;
  width: 140px;
  height: 34px;
  z-index: 15; /* Ensure it sits above the parent div content */
  text-decoration: none;
  color: white;
  text-decoration: none;
  font-size: 15px;
  background-color: #1a801a; /* Invisible background */

  
  margin-top: -20px; /* Moves up */
  margin-left: -20px; /* Moves left */
  
}


.greenbannervis-div {
  position: absolute;
  padding: 3px 2px 3px 10px;
  border:1px solid white;
  top: 35px;
  right: -1px;
  width: 140px;
  height: 34px;
  z-index: 14; /* Ensure it sits above the parent div content */
  text-decoration: none;
  color: white;
  text-decoration: none;
  font-size: 15px;
  background-color: #1a801a; /* Invisible background */

  
  margin-top: -20px; /* Moves up */
  margin-left: -20px; /* Moves left */
  
}

.clone {
  position: absolute; /* Freely position the clone */
  z-index: 360; /* Ensure it appears above the parent */
}

.greenlink, .greenlink:link {     
  color:  #1d6f26;
  text-decoration: none;
  font-size: 15px;
}
      
.h-divider{
margin-top:3px;
margin-bottom:3px;
height:1px;
width:100%;
border-top:1px solid #ccc;
}

body {
  font-family: Arial, sans-serif;
}

/* Default styles for mobile - no line break */
.linebreak {
  display: inline;
}

/* Styles for larger screens */
@media (min-width: 768px) {
  .linebreak {
      display: block;
  }
}

/* Default styles for mobile - no line break */
.inverselinebreak {
  display: block;
}

/* Styles for larger screens */
@media (min-width: 768px) {
  .inverselinebreak {
      display: inline;
  }
}

@media (min-width: 1200px) {
  .verticalpuffer {
      display: none;
  }
}

@media (min-width: 992px) {
  .verticalpuffer_klein {
      display: none;
  }
}



.csw2-container, .csw1-container {
  display: flex;
  margin: 0 -32px 0 -32px;
  padding: 0 0px 0 0px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  line-height: 26px;
  font-size: 32px;
  color: #555;
}

.cswx-container  {
  display: flex;
  margin: 0 -32px 0 -32px;
  padding: 0 0px 0 0px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  line-height: 26px;
  font-size: 32px;
  color: #555;
}

.csw2-card {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  line-height: 26px;
  font-size: 16px;
  color: #555;
  
}

.cswx-card, .csw1-card {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  line-height: 26px;
  font-size: 16px;
  color: #555;
}


.csw2-broad-card {
  position: relative;
  width: 430px;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  line-height: 26px;
  font-size: 16px;
  color: #555;
}

.csw0-broad-card {
  position: relative;
  width: 540px;
  height: 140px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  line-height: 26px;
  font-size: 16px;
  color: #555;
}

.csw2-img {
  width: 100%;
  height: auto;
}

.csw2-centering-container {
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;
  margin: 0 -32px 0 -32px;
  padding: 0 0px 0 0px;
  line-height: 26px;
  font-size: 16px;
  color: #555;
}

.csw2-plan-container {
  position: relative;
  width: 100%; /* Adjust as needed */
  padding-top: 90%; /* This creates a 16:9 aspect ratio, adjust as needed */
  background-color: white;
  overflow: hidden;
}

.csw2-plan-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 95%;
  max-height: 95%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);

}

.csw2-foto-container {
  position: relative;
  width: 100%; /* Adjust as needed */
  padding-top: 66%; /* This creates a 16:9 aspect ratio, adjust as needed */
  background-color: white;
  overflow: hidden;
}

.csw2-foto-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 150%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}

.csw2-broadfoto-container {
  position: relative;
  width: 100%; /* Adjust as needed */
  padding-top: 49%; /* This creates a 16:9 aspect ratio, adjust as needed */
  background-color: white;
  overflow: hidden;
}

.csw2-broadfoto-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 110%;
  max-height: 110%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}




.csw2-text-box {
  padding-top: 18px;
  text-align: center;
  background-color: #f8f8f8;
  line-height: 26px;
  font-size: 15px;
  color: #555;
}

.csw2-dots {
  display: none;
  justify-content: center;
  padding-top: 16px;
  display: none; 
  gap: 4px;
}

.csw1-dots {
  display: none;
  justify-content: center;
  padding-top: 16px;
  display: none; 
  gap: 4px;
}


.csw2-dot {
  height: 12px;
  width: 12px;
  margin: 0 4px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.csw2-dot.active {
  background-color: #717171;
}

.csw1-dot {
  height: 12px;
  width: 12px;
  margin: 0 4px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.csw1-dot.active {
  background-color: #717171;
}

  
  .csw2-broad-card {
    width: 540px;
    height: 407px;
  }
   
  
  .cswx-card, .csw1-card, .csw2-card {
    width: 260px;
  }

  .cswx-card, .csw1-card, .csw2-card  {
    height: 390px;
  }


}

@media screen and (max-width: 1199px) {
  
  .csw2-container, .csw1-container, .cswx-container  {
    display: flex;
    margin: 0 -64px 0 -64px;
    padding: 0 0px 0 0px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
    line-height: 26px;
    font-size: 16px;
    color: #555;
  }

    


  .csw2-broad-card {
    width: 670px;
    height: 427px;
  }

 
   
  
  .cswx-card, .csw1-card, .csw2-card {
    width: 285px;
    }

  .cswx-card, .csw1-card {
    height: 387px;
  }

  .csw2-card {
    height: 428px;
  }


  .csw2-plan-container {
    padding-top: 101%; /* This creates a 16:9 aspect ratio, adjust as needed */
   }
  
  .csw2-plan-container img {
    max-width: 95%;
    max-height: 100%;
   
  }
  

  .csw2-text-box {
    padding-top: 14px;
    text-align: center;
    background-color: #f8f8f8;
    line-height: 22px;
    font-size: 14px;
    color: #555;
  }

  
  
}

@media screen and (max-width: 991px) {
 
  .csw2-broad-card {
    width: 606px;
    height: 439px;
  }

  .csw0-broad-card {
    width: 606px;
    height: 145px;
  }
 


  .cswx-card, .csw1-card, .csw2-card {
    width: 285px;
  }

  .cswx-card, .csw1-card {
    height: 406px;
  }

  .csw2-card {
    height: 412px;
  }


}

@media screen and (max-width: 768px) {
  
  .csw2-plan-container {
    position: relative;
    width: 100%; /* Adjust as needed */
    padding-top: 120%; /* This creates a 16:9 aspect ratio, adjust as needed */
    background-color: white;
    overflow: hidden;
  }
  
  .csw2-plan-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 95%;
    max-height: 80%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
  }

 .cswx-container  {
    display: flex;
    margin: 0 -32px 0 -32px;
    padding: 0 0px 0 32px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80px;
    line-height: 26px;
    font-size: 16px;
    color: #555;

}

  .csw2-container, .csw1-container  {
      display: flex;
      margin: 0 -32px 0 -32px;
      padding: 0 0px 0 32px;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 80px;
      line-height: 26px;
      font-size: 16px;
      color: #555;
    flex-wrap: nowrap;
    overflow-x: auto; /* Allow horizontal scrolling */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

.csw2-container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.csw1-container::-webkit-scrollbar { 
  display: none;  /* Safari and Chrome */
}



.cswx-card, .csw1-card, .csw2-card, .csw2-broad-card {
      width: 480px;
      flex: none;
      scroll-snap-align: center;
  }

  .csw2-broad-card {
    height: 376px;
  }

  .csw0-broad-card {
    width: 480px;
    height: 145px;
  }
     
  .cswx-card, .csw1-card  {
      height: 502px;
  }
  
  .csw2-card  {
    height: 728px;
  }
    

  .csw2-text-box {
    padding-top: 26px;
    text-align: center;
    background-color: #f8f8f8;
    line-height: 22px;
    font-size: 15px;
    color: #555;
  }

  .csw2-dots {
      display: flex;
  }

  .csw1-dots {
    display: flex;
  }
}


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

  .csw2-container, .csw1-container, .cswx-container  {
    gap: 12px;
    margin: 0 0px 0 0px;
    padding: 0 0px 0 0px;
}

.csw2-broad-card {
  width: 450px;
  height: 365px;
  flex: none;
  scroll-snap-align: center;
}

.csw0-broad-card {
  width: 450px;
  height: 145px;
  flex: none;
  scroll-snap-align: center;
}

 
.cswx-card, .csw1-card  {
    width: 450px;
    height: 483px;
    flex: none;
    scroll-snap-align: start;
}

.csw2-card  {
  width: 450px;
  height: 692px;
  flex: none;
  scroll-snap-align: start;
}


}

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

.csw2-container, .csw1-container, .cswx-container  {
    gap: 16px;
    margin: 0 0px 0 0px;
    padding: 0 0px 0 0px;
}


.csw2-broad-card {
  width: 350px;
  height: 333px;
  flex: none;
  scroll-snap-align: center;
}

.csw0-broad-card {
  width: 350px;
  height: 145px;
  flex: none;
  scroll-snap-align: center;
}

.cswx-card, .csw1-card  {
    width: 350px;
    height: 416px;
    flex: none;
    scroll-snap-align: start;
}

.csw2-card  {
  width: 350px;
  height: 571px;
  flex: none;
  scroll-snap-align: start;
}


}


/*--------------------------------------------------------------
7) SERVICES and Text
--------------------------------------------------------------*/
.services .icon-box {
  text-align: center;
  border: 1px solid #ebe6e4;
  position: relative;
  background: #faf9f8;
}

.services .icon {
  position: absolute;
  top: -36px;
  left: calc(50% - 36px);
  transition: 0.2s;
  border-radius: 50%;
  border: 6px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  width: 72px;
  height: 72px;
  background: #2d7d36;
}

.icon-img {
  position: relative;
  left: calc(-0px);
  
  transition: 0.2s;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #2d7d36;
}

.icon-text {
  padding: 10px 20px;
  margin-top: 15px;
  position: relative;
  left: calc(-0px);
  transition: 0.2s;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.services .icon i {
  color: #fff;
  font-size: 24px;
}

.services .title {
  font-weight: 600;
  color: #555;
  line-height: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
  font-size: 15px;
  
}

.titledark {
  font-weight: 600;
  color: #222;
  line-height: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
  font-size: 15px;
  
}

.titledarkplus {
  font-weight: 600;
  color: #222;
  line-height: 22px;
  letter-spacing: 0.05em;
  margin-bottom: 15px;
  font-size: 17px;
  
}


.services .title a {
  color: #555;
  line-height: 22px;
  font-weight: 600;
  margin-bottom: 15px;
}

.services .icon-box:hover .icon {
  background: #fff;
  border: 2px solid #2d7d36;
}

.services .icon-box:hover .icon i {
  color: #2d7d36;
}

.services .icon-box:hover .title a {
  color: #2d7d36;
  font-weight: 600;
}

.second-btn {
  border: 1px solid #d4d3d2;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 8px;
  padding-top: 8px;
  border-radius: 3px;
  font-size: 15px;
  background-color:#f2f1f0;
  text-decoration: none;
  color:  #369741;
}

.services .description {
  line-height: 26px;
  font-size: 15px;
  color: #555;
}

@media screen and (min-width:768px)  
    {
.description_extrasize {
  line-height: 26px;
  word-spacing: -0.5px;
  letter-spacing: -0.3px;
  font-size: 14px;
  color: #555;
}
    }

@media screen and (max-width:767px)  
    {
.description_extrasize {
  line-height: 26px;
  word-spacing: ;
  letter-spacing: ;
  font-size: 15px;
  color: #555;
}
    }

.tinyredflag, .tinyredflag:link {
  line-height: 18px;
  font-size: 12px;
  color: red;
}

.tinydescription {
  line-height: 18px;
  font-size: 12px;
  color: #555;
}

.descriptiondark {
  line-height: 24px;
  font-size: 15px;
  color: #222;
}

.descriptiondark a {
  line-height: 20px;
  font-size: 14px;
  color: #1d6f26;
}

.descriptiontinydark {
  line-height: 20px;
  font-size: 13px;
  color: #222;
}

.descriptiontinygreen {
  line-height: 20px;
  font-size: 13px;
  color: #1d6f26;
}

.descriptiontinydark a {
  line-height: 20px;
  font-size: 13px;
  color: #1d6f26;
}


/*--------------------------------------------------------------
8) FOOTER
--------------------------------------------------------------*/
.footerbg {
  background-color: #b1b2b3;  
}

#footer {
  color: #b4aca8;
  font-size: 14px;
  background: #14100f;
}


/*--------------------------------------------------------------
9 COOKIE Banner
--------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------
Start Cookie Banner Items --------------------------------------------------------------------*/

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #333;
  color: white;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

.cookie-banner p {
  margin: 0;
}

.cookie-banner button {
  background-color: #1d6f26;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.cookie-banner button:hover {
  background-color: #1d6f26;
}

/*------------------------------------------------------------------------------------------
End of Cookie Banner Items --------------------------------------------------------------------*/

/*--------------------------------------------------------------
10 TELEPHONE Pop Up
--------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------------
Start of Telephone Number Pop Up DIV -----------------------------------------------------*/

#telpop-popup {
  display: none;
  position:fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  padding: 10px 10px 10px 20px;
  background: #faf9f8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border: 1px solid #faf9f8;
  z-index: 1000;
}
#telpop-popup .close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  cursor: pointer;
}

#telpop-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  z-index: 999;
}

/*-----------------------------------------------------------------------------------------
End of Telephone Number Pop Up DIV -----------------------------------------------------*/

.overflow-hidden {
  overflow: hidden;
}