/* Features CSS */

.features-section { text-align: center ;}
.feature-content { text-align: start; padding: 20px 20px !important; color: #2a2a2a; transition: all 0.3s ease !important;}
.feature-content:hover { transform: translateY(-6px) !important; }

.feature-content p { color: #2a2a2a; transition: color 0.3s ease;}
.feature-content p:hover { color: #2a2a2a; }

.feature-content ul { list-style: none; color: #2a2a2a;  }
.feature-content ul li { padding: 0px 0px 15px; display: flex; align-items: center; transition: transform 0.3s ease;}
.feature-content ul li:hover { transform: translateX(6px); }

.feature-content ul li i { color: #BB2463; padding-right: 25px; transition: all 0.3s ease;}

.tip { background-color: #FAEFEB; color: #C45A34; border-radius: 20px; padding: 25px 30px; margin: 20px 0px 0px; font-weight: 600; transition: all 0.3s ease;}
.tip:hover { background-color: #BB2463; color: #fff; transform: translateY(-4px); box-shadow: 0 12px 30px rgba(187, 36, 99, 0.35);}

.feature-img { transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease !important; cursor: pointer !important; }
.feature-img:hover { transform: translateY(-6px) scale(1.05) !important; filter: brightness(100%) !important;}


/* How It Works CSS */

.howitworks-section { text-align: center; }
.how-p, .how-h6 { color: #2C5F77 !important;}
.step { transition: transform 0.3s ease !important;} 
.step:hover { transform: translateY(-6px) !important;}

.step1 { background-image: url(../images/step1.png); background-position: center; background-size:cover; border-radius: 20px; padding: 20px 160px !important;}
.step2 { background-image: url(../images/step2.png); background-position: center; background-size:cover; border-radius: 20px; padding: 20px 160px !important;}
.step3 { background-image: url(../images/step3.png); background-position: center; background-size:cover; border-radius: 20px; padding: 20px 160px !important;}
.step4 { background-image: url(../images/step4.png); background-position: center; background-size:cover; border-radius: 20px; padding: 20px 160px !important;}



/* marketplace CSS */

.market-border { border-radius: 20px; border: 1px solid #BB2463; padding: 30px 20px ;  }  
.marketcard img { transition: transform 0.3s ease !important;}
.marketcard img:hover { transform: translateY(-6px) scale(1.05); filter: brightness(100%) !important;}



/* Support & Help CSS */

.help-border { border-radius: 20px; border: 1px solid #2C5F77; padding: 30px 20px; color: #2C5F77; margin: 0px 0px 60px;}

.help-card-outer { text-decoration: none; padding: 12px 0px;}

.help-card { border: 1px solid #2C5F77; border-radius: 10px; padding: 40px 20px; color: #BB2463 !important; transition: transform 0.3s ease !important;}
.help-card:hover { border:none; background-color: #F5DEE8; transform: translateY(-6px) scale(1.05) !important; }

.faq-h6 { color: #2a2a2a;}
.faq-btn { border: 1px solid #2C5F77 !important; color: #2C5F77; border-radius: 50px !important; padding: 10px !important;}
.faq-btn:hover { background-color: #BB2463 !important; color: #ffffff !important;}
.faq-btn.active { background-color: #2C5F77 !important; }

.faq-item {
  background: #fff;
  border: 1px solid #2C5F77;
  color: #2C5F77 !important;
  border-radius: 50px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.faq-item:hover { transform: translateY(-6px) scale(1.02);}

.faq-question {
  padding: 22px 30px;
  font-weight: 600;
  font-size: 18px;
  color: #1f4f63;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faq-icon {
  width: 42px;
  height: 42px;
  background: #2e5f75;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.faq-answer {
  
  padding: 0 30px 20px;
  text-align: left;
  display: none;
  font-size: 16px;
  color: #2C5F77 !important;
  line-height: 1.6;
}

/* Active state */

.faq-item.active { background-color: #D5DFE4 !important; border: none; box-shadow: 0 8px 20px rgba(0,0,0,0.08); border-radius: 20px !important; }

.faq-item.active .faq-answer {
  display: block;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}