html, body {
    overflow-x: hidden;
    width: 100%;
}


/********** Template CSS **********/
.bg-secondary {
    background-color: #c07c42 !important;
}

.btn-secondary {
    background-color: #332607 !important;
    border-color: #332607 !important;
    color: #f7f7f7 !important;
}

.bg-dark{background-color: #719b68 !important}
    
.btn-primary {
    background-color: #719b68 !important;
    border-color: #719b68 !important;
}

.pro-table{border:1px solid #000000;}

/*.text-light{color:#f0d7c2;}*/

.text-ddark{color:#332607;}
.text-dlight{color:#c07c42;}
.bg-ddark{background-color:#332607;}

.img-border-light{border:4px solid #f7f7f7;}
.img-border-dark{border:4px solid #332607;}
.img-border-gdark{border:4px solid #719b68;}

.pro-img-border{border:4px solid #c07c42;border-radius: 10px;}

.text-icon-ggdark{
    color: #5B8C51;
}

.banner-text {font-size:48px;line-height: 1.5;}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background:#332607;
    color: #fff;
}

.btn.btn-secondary:hover {
    background-color: #404A3D !important;
    border-color: #404A3D !important;
    color: #f7f7f7 !important;
}

/*product slider*/
.product-slider {
    width: 100%;
    margin: auto;
}
.product-item {
    text-align: center;
    padding: 10px;
    background: #f8f8f8;
    border-radius: 10px;
}
.product-item img {
    width: 100%;
    border-radius: 10px;
}



.slick-dots {
    display: block !important;  /* Make sure dots are displayed */
    position: absolute;
    bottom: 10px; /* Adjust vertical position */
    width: 100%;
    text-align: center;
}

.slick-dots li {
    display: inline-block;
    margin: 0 5px;
}

.slick-dots li button:before {
    font-size: 12px; /* Adjust dot size */
    color: #000 !important; /* Change dot color if needed */
    opacity: 1;
}

.slick-dots li.slick-active button:before {
    color: #ff0000 !important; /* Change active dot color */
}

  @font-face {
  font-family: 'Klein';
  src: url('fonts/Klein-Regular.woff2') format('woff2'),
       url('fonts/Klein-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.gps-font {
  font-family: 'Klein', sans-serif;
}


.jsv-banner{
    font-size: 3.25rem;
}

    @media (max-width: 576px) {
  h1.banner-text {
    font-size: 1.75rem; /* Reduce size on mobile */
    text-align: center;
  }
  h1.jsv-banner{
    font-size: 2.00rem;
}
}

@media (min-width: 577px) and (max-width: 767.98px) {
  h1.banner-text {
    font-size: 2.25rem; /* Medium size on small tablets */
  }

}

.small-contact-box{
  background-image: url(../img/above_footer_bg.png); /* Replace with your image path */
  background-repeat: no-repeat;
  background-size: cover;         /* Cover entire container */
  background-position: center;    /* Center the image */
  width: 100%;                    /* Full width */
  height:200px;
}

.benefit-box {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: white; /* Ensure text is readable */
  height:260px;
}

.benefit-box::before {
  content: "";
  position: absolute;
  inset: 0; /* shorthand for top, right, bottom, left = 0 */
  background: url('../img/benefit-box-bg.png') no-repeat center center;
  background-size: cover;
  opacity: 0.1; /* Adjust opacity as needed */
  z-index: 0;
}

.benefit-box > * {
  position: relative;
  z-index: 1;
}

.bg-benefit{
  background-color: #c77b41;
}

.btn-hover-zoom {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-hover-zoom:hover {
  transform: scale(1.05); /* Zoom in slightly */
  box-shadow: 0 8px 16px rgba(73, 235, 178, 0.2); /* Add shadow */
}


.pro-heading{
  color: #719b68;
}

/*usage image section*/
.magic-motion {
  animation: move3DZoom 5s ease-in-out infinite;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

@keyframes move3DZoom {
  0% {
    transform: translate(0, 0) scale(1) rotateY(0deg);
  }
  25% {
    transform: translate(-10px, -10px) scale(1.05) rotateY(5deg);
  }
  50% {
    transform: translate(10px, 10px) scale(1.1) rotateY(0deg);
  }
  75% {
    transform: translate(-10px, -10px) scale(1.05) rotateY(-5deg);
  }
  100% {
    transform: translate(0, 0) scale(1) rotateY(0deg);
  }
}

   .custom-bullet li {
    list-style: none;
    position: relative;
    padding-left: 34px; 
  }

  .custom-bullet li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 28px;
    height: 28px;
    background-image: url('../img/jsv-bullet.gif');
    background-size: contain;
    background-repeat: no-repeat;
  } 

  /* .custom-bullet {
  list-style: none;
  padding-left: 0;
}

.custom-bullet > li {
  list-style: none;
  position: relative;
  padding-left: 28px; 
}

.custom-bullet > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 24px;
  height: 24px;
  background-image: url('../img/jsv-bullet.gif');
  background-size: contain;
  background-repeat: no-repeat;
}

.nested-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.nested-list > li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.nested-list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background-color: #c07c42;
  border-radius: 50%; 
} */

/* Hide the label when input is focused or has content */
.form-floating input:focus ~ label,
.form-floating input:not(:placeholder-shown) ~ label,
.form-floating textarea:focus ~ label,
.form-floating textarea:not(:placeholder-shown) ~ label {
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}

  .nav-tabs .nav-link.active {
    color:#f7f7f7;
   background-color:#332607;
  }

/*contact button*/
 @property --a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

#send_wrap {
  --b: 2px;
  /*--l: #ff66cc 0% 15%, #00f7ff 15% 70%, #ff66cc 70% 100%;*/
  --l: #ffffff 0% 25%, #ffffff 25% 70%, #719b68 70% 100%;
  --a: 0deg;

  display: inline-block;
  padding: var(--b);
  border-radius: 50rem;
  background: #332607;
  transition: all 0.3s ease;

}

#send_wrap.loading {
  background: repeating-conic-gradient(from var(--a), var(--l)) border-box;
  animation: rotateBorder 2s linear infinite;
  /* box-shadow: 0 0 10px #ff66cc, 0 0 20px #00f7ff, 0 0 30px #ff66cc; */
}

@keyframes rotateBorder {
  to { --a: 1turn; }
}

#send_wrap input {
  border: none;
  background-color: #332607;
  color: #fff;
  padding: 8px 20px;
  border-radius: 50rem;
  cursor: pointer;
}