:root {
  /* background color  */
  --bg-primary-dark: #191a19;
  --bg-secondary: #1e5128;
  --bg-primary-light: #4e9f3d;
  --bg-secondary-light: #d8e9a8;

  /*color */
  --text-primary-dark: #191a19;
  --text-secondary: #1e5128;
  --text-primary-light: #4e9f3d;
  --text-secondary-light: #d8e9a8;

  /* font family  */
  --font-family-primary: "Montserrat", sans-serif;
  --font-family-secondary: "Josefin Sans", sans-serif;
  --font-family-tertiry: "Poppins", sans-serif;
}
@media (max-width: 768px) {
  .description-product{
    padding: 40px 10px 10px 10px  !important;
  }
  .fruits-banner{
    height: 180px !important;
  }
  .about-heading-two-choose{
    font-family: var(--font-family-tertiry);
    font-weight: 700;
    margin-top: 30px;
    font-size: 18px !important;
    color: var(--text-primary-dark);
}
.about-subheading {
  font-size: 14px !important;

  line-height: 27px !important;
}
.product-card{
  height: auto !important;
  
}
}
.color-g {
  color: var(--bg-primary-light);
}

.fruits-banner {
    background-image: url(/assets/images/product/fruits=banner.png);
    height: 220px;
    background-size: contain;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 95px;
}

.product-heading-1{
  font-family: var(--font-family-tertiry);
  font-weight: 700;
  color: var(--text-secondary);
}
.product-hero-section{
  padding: 50px 0px;
}

.product-left-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 20px;
}

.nav-pills .nav-link {
  padding: 5px;
  margin-bottom: 10px;
  border: 2px solid transparent;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.nav-pills .nav-link img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
  border-color: #ff4c60;
  background-color: #fff;
}

.tab-pane img {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.tab-pane p {
  margin-top: 15px;
  font-size: 16px;
  color: #555;
}
.product-cat-heading-2{
  font-family: var(--font-family-tertiry);
  font-weight: 700;
  color: var(--text-secondary);
}
.product-cat-para{
  font-family: var(--font-family-secondary);
  line-height: 30px;
  text-align: justify;
  color: var(--text-primary-dark);
}
.location-content{
   display: flex;
   gap: 10px;    
}
.location-content p{
  font-family: var(--font-family-primary);
  font-weight: 600;
  color: var(--text-primary-light);
}
.location-div{
  background-color: green;
  color: white;
 width: 30px;
 height: 30px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(2px 2px 2px whitesmoke);
}
.states-provide-content h4{
font-family: var(--font-family-tertiry);

}
.table-product-content table{
overflow-x: auto;
}
.table-product-content th,td{
font-family: var(--font-family-secondary);

}
.table-product-content th{
color: var(--text-primary-light);
}
 
.hero-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  background: var(--bg-primary-light);
  font-family: "Montserrat", sans-serif;
  box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  cursor: pointer;
  border: none;
}

.hero-button:after {
  content: " ";
  width: 0%;
  height: 100%;
  background: var(--bg-secondary);
  color: #fff !important;
  position: absolute;
  transition: all 0.4s ease-in-out;
  right: 0;
}

.hero-button:hover::after {
  right: auto;
  left: 0;
  width: 100%;
  
}

.hero-button span {
  text-align: center;
  text-decoration: none;
  width: 100%;
  padding: 10px 40px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3em;
  z-index: 2;
  transition: all 0.3s ease-in-out;
}

.hero-button:hover span {
  color: var(--text-secondary-light);
  animation: scaleUp 0.3s ease-in-out;
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}
.poduct-sub-heading{
font-family: var(--font-family-tertiry);
color: var(--text-secondary);
font-weight: 600;
}
.description-product{
background-image: url(/assets/images/home/qlty1.png);
border-radius: 20px;
padding: 40px;
background-size: cover;
}
.vairety-card {
padding: 0 4px; /* Adjust spacing between cards */
background-color: white;
border-radius: 10px;
box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
padding: 20px;
margin-bottom: 20px;

}

.vairety-card h5{
font-family: var(--font-family-tertiry);
color:var(--text-primary-light);
}

.vairety-card p{
font-family: var(--font-family-secondary);

}

.states-provide{
padding: 40px 0px;
}
#chartdiv {
width: 100%;
height: 500px
}
.about-second{
background-image: url(/assets/images/about/about-values.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
padding:80px 0px ;
}

.about-heading-two-choose{
font-family: var(--font-family-tertiry);
font-weight: 700;
margin-top: 30px;
font-size: 22px;
color: var(--text-primary-dark);
}
.about-main-points{
padding: 0px 15px;
}

.about-subheading {
font-family: var(--font-family-primary);
font-size: 17px;
word-spacing: 1px;
line-height: 30px;
color: var(--text-secondary);
font-weight: 700;
}
.about-number{
background-color: var(--bg-primary-light);
width: 50px;
height: 50px;

border-radius: 50%;

}
.about-number h5{
font-family: var(--font-family-tertiry);
color: white;
margin: 0px;

}
.about-points .card-body{
padding-left: 50px;
}
.about-points .card-body h4{
font-family: var(--font-family-primary);
color: var(--text-primary-dark);
font-weight: 600;
font-size: 20px;
}
.about-points .card-body p{
font-family: var(--font-family-secondary);
color: var(--text-primary-light);
font-weight: 600;
font-size: 14px;
}
.about-points:hover{
transform: translateY(-5px);
cursor: pointer;
transition: 2s;
}
button.hero-button.rounded-pill {
z-index: -1;
}


.product-card{

padding: 0 4px; /* Adjust spacing between cards */
background-color: white;
border-radius: 10px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
padding: 18px;
margin-bottom: 20px;
height: 200px;



}

.product-card h5{
font-family: var(--font-family-tertiry);
color:var(--text-primary-light);
white-space: nowrap;

}

.product-card p{
font-family: var(--font-family-secondary);
text-align: justify;
}
.product-card a{
  align-items: baseline;
}




.product-button {
position: relative;
display: flex;
justify-content: center;
align-items: center;

background: var(--bg-primary-light);
font-family: "Montserrat", sans-serif;
box-shadow: 0px 6px 24px 0px rgba(0, 0, 0, 0.2);

cursor: pointer;
border: none;
}

.product-button:after {
content: " ";
width: 0%;
height: 100%;
background: var(--bg-secondary);

position: absolute;
transition: all 0.4s ease-in-out;
right: 0;
}

.product-button:hover::after {
right: auto;
left: 0;
width: 100%;
}

.product-button span {
text-align: center;
text-decoration: none;
width: 100%;
padding: 9px 13px;
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
z-index: 1;
transition: all 0.3s ease-in-out;
}

.product-button:hover span {
color: var(--text-secondary-light);
animation: scaleUp 0.3s ease-in-out;
}

.btn1-link{
text-decoration: none;
}



.btn-modal-form:hover{
  background-color: var(--bg-secondary);
  transition: 2s;
}
.btn-modal-form{
  background-color: var(--bg-primary-light);
  padding: 8px 40px;
  color:var(--text-secondary-light);
  border-radius: 20px;
  border: none;
  font-family: var(--font-family-tertiry);
  font-weight: 700;
  letter-spacing: 1px;
}
.modal-dialog{
  background-image: url(../images/home/qlty1.png);

}
.modal-body{
  background-image: url(../images/home/qlty1.png);
}
.modal-body input{
  border-radius: 0px;

}
.modal-body label{
  font-family: var(--font-family-secondary);
}
.modal-body select option{
  font-family: var(--font-family-secondary);
 margin-bottom: 40px !important;
}


.dehydrated-img{
  height: 193px;
}


.dehydrated-heading{
  font-family: var(--font-family-tertiry);
  color:var(--text-primary-light);
  white-space: nowrap;
}


.para{
  font-family: var(--font-family-secondary);
  text-align: justify;
  }
  


.left-column-bg-product-1{
  background-image: url(../images/fruits-img-bg.jpg);
  background-size: cover;
  height: 200px;
  width: 100%;
}
.left-column-bg-product-2{
  background-image: url(../images/vegitables-bg-img.jpg);
  background-size: cover;
  height: 200px;
  width: 100%;
}