/*--------------------------------------------------------------
#title Section
--------------------------------------------------------------*/
.title {
  position: relative;
  overflow: hidden;
  background-color: #F3FFF5;
  background-image: url('../img/tbp/tpb-background-1.png'); 
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
  height: 70vh;
}
.title .title-desc {
  position: absolute;
  left: 7vw;
  top:11vw;
  font-size: 4vw;
  font-weight: 600;
  line-height: 1;
  color: #7FC823;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
@media (max-width: 767.98px) {
  .title {
    height: 50vh;
  }
  .title .title-desc {
    top: 6vw;
    font-size: 10vw;
  }
}
/*--------------------------------------------------------------
#description Section
--------------------------------------------------------------*/
#card-solutions-img-1 {
  background-image:  
    url('../img/tbp/tpb-1.png');
  background-size: cover;          
  background-position: center;   
  background-repeat: no-repeat;
  height: 280px;
  max-width: 440px; 
  width: auto;                 
}
#description {
  background-color: #F8FFF6;
}
.card-content-desc h3 {
  padding-top: 80px;
}
.description .description-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem 0;
}
.card-content-desc {
  font-size: 20px;
  color: #A1A1A1;
}
.border-left-1 {
  border-left: 2px solid #949494;
}
@media (max-width: 767.98px) {
  .card-content-desc h3 {
    padding-top: 0;
  }
}
/*--------------------------------------------------------------
#process Section
--------------------------------------------------------------*/
.process-container {
  background-color: #F8FFF6;
  padding: 10vh 5vw;
}
.card-process {
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
  height: 340px; 
}
#card-process-img-1 {
  background-image: 
    url('../img/tbp/process-1.png'); 
  background-size: cover;          
  background-position: center;   
  background-repeat: no-repeat;
  height: 220px;                          
  color: white;  
}
#card-process-img-2 {
  background-image: 
    url('../img/tbp/process-2.png'); 
  background-size: cover;          
  background-position: center;   
  background-repeat: no-repeat;
  height: 220px;                          
  color: white;  
}
#card-process-img-3 {
  background-image: 
    url('../img/tbp/process-3.png'); 
  background-size: cover;          
  background-position: center;   
  background-repeat: no-repeat;
  height: 220px;                          
  color: white;  
}
.card-content-title {
  color: #009100;
  font-size: 1.5rem;
  padding-left: 30px;
  align-content: center;
  height: 100px;
}
.card-content-desc-2 {
  padding-top: 20px;
}
.card-content-desc-2 ul {
  padding-left: 0;
  font-size: .9rem;
}
.w-1 {
  width: 30%;
}
.w-2 {
  width: 5%;
}
.title-icon {
  display: inline-block; 
  width: 60px; 
  height: 60px; 
  margin-top: 1rem;
  margin-bottom: 0.1rem;
  background-size: contain; 
  background-repeat: no-repeat;
}	
.grid {
  display: grid;
}
@media (max-width: 991.98px) {
  .w-1 {
    width: 330px;
    height: 220px;
  }
  .w-2 {
    width: 100%;
    padding-top: 85px;
  }
}
/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
#contact {
  background: linear-gradient(to bottom, #F8FFF6 50%, #F3F3F3 50%);
}
h3 {
  color: #009100;
}
#mailto {
  text-decoration: underline;
  color: #949494;
}
a:hover {
  color: #000000;
}
.contact .contact-item {
  background-color: var(--surface-color);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  border-radius: 25px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}
.contact .contact-item:hover {
  box-shadow:
    0 8px 15px rgba(0, 0, 0, 0.1), 
    0 -4px 10px rgba(0, 0, 0, 0.05);
  transform: translateY(2px);
}