/* Pricing.css - UPDATED */

/* Tier Description Section */
.testimonials {
  padding: 20vh 0 6vh 0;
  margin: 0 auto;
  width: 80%;
  max-width: 1200px;
  height: fit-content;
  background-color: #fde2cf;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pricing-desc {
  padding: 16vh 0 6vh 0;
  margin: 0 auto;
  width: 80%;
  max-width: 1200px;
  background-color: #fde2cf;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pricing-desc h2 {
  font-size: 80px;
  margin-bottom: 2rem;
  line-height: 1.2;
  text-align: center;
}

.pricing-desc h3 {
  font-size: 2rem;
  text-align: center;
}

.pricing-desc h4 {
  font-size: 1.3rem;
  margin-bottom: 1em;
  text-align: center;
}

.testimonialContainer {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2em;
}

.testimonialItem {
  background-color: #1e1a16;
  color: #fde2cf;
  width: 30%;
  min-height: 320px;
  border-radius: 0.8em;
  padding: 2em;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.testimonialItem > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quotes {
  font-size: 60px;
  width: 100%;
  display: flex;
  justify-content: start;
}

.quotes i {
  text-shadow: 3px 3px #ed6325;
  transition: all 0.3s ease-in-out;
}

.quotes i:hover {
  text-shadow: none;
}

.testimonialItem p {
  text-align: center;
  font-size: 1.1em;
  margin: 0.5em 0;
  line-height: 1.6;
}

.testimonialItem h3 {
  text-align: center;
  margin-bottom: 0.5rem;
}

.testimonialItem h4 {
  text-align: center;
  margin-bottom: 1rem;
  color: #fde2cfbb;
}

/* Tier Comparision */
.comparision {
  padding: 6vh 0;
  margin: 16vh auto 0;
  width: 80%;
  max-width: 1200px;
  height: fit-content;
  position: relative;
  background-color: #fde2cf;
  color: #1e1a16;
  border-radius: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.comparision h2 {
  font-size: 80px;
  margin-bottom: 2rem;
  line-height: 1.2;
  text-align: center;
}

.compareTable {
  background-color: #fde2cf;
  padding: 2rem;
  border-radius: 1.25rem;
  color: #642714;
  width: 100%;
  position: sticky;
  display: flex;
  justify-content: space-between;
  top: 14.25%;
  font-size: 28px;
  text-align: center;
}

.compareTable span {
  flex: 1;
  text-align: center;
  padding: 0 1rem;
}

.featureTable {
  width: 100%;
}

.featureItem {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(54, 54, 54, 0.468);
}

.featureItem span {
  flex: 1;
  text-align: center;
  padding: 0 1rem;
}

/* Add Ons */
.addons {
  padding: 6vh 4rem;
  margin: 16vh auto 0;
  width: 80%;
  max-width: 1200px;
  height: fit-content;
  background-color: #ed6325;
  color: #fde2cf;
  border-radius: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.addons h2 {
  font-size: 40px;
  margin-bottom: 2rem;
  text-align: center;
}

.points {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 4rem;
}

.points ul {
  list-style: none;
  text-align: left;
  flex: 1;
}

.points li {
  margin: 0.75rem 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.points li i {
  margin-right: 0.5rem;
  font-size: 8px;
}

.addonEnd {
  margin-top: 2rem;
  font-size: 22.5px;
  text-align: center;
}

/* Payment Options */
.paymentContainer {
  width: 100%;
  max-width: 1200px;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2em;
}

.paymentItem {
  background-color: #f8a720;
  color: #8f2121;
  width: 30%;
  min-height: 320px;
  border-radius: 0.8em;
  padding: 2em;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.paymentItem > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.paymentItem h3 {
  color: #642714;
  text-shadow: 1px 1px 1px #8f2121;
  text-align: center;
  margin-bottom: 0.5rem;
}

.paymentItem h4 {
  color: #642714;
  text-align: center;
  margin-bottom: 1.5rem;
}

.paymentPara {
  text-align: left;
  width: 100%;
  margin: 0.5rem 0;
  display: flex;
  align-items: flex-start;
}

.paymentPara i {
  margin-top: 0.25rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

/* CTA */
.cta {
  background-color: #1e1a16;
  color: #fde2cf;
  margin: 16vh auto 0;
  padding: 4rem 2rem;
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  width: 80%;
  max-width: 1200px;
  justify-content: center;
  align-items: center;
}

.cta h2 {
  font-size: 60px;
  text-align: center;
  margin-bottom: 1rem;
}

.cta h3 {
  font-size: 25px;
  text-align: center;
  margin-bottom: 1rem;
}

.cta p {
  font-size: 20px;
  width: 80%;
  text-align: center;
  margin-top: 1rem;
  line-height: 1.6;
}

.cta ul {
  list-style: none;
  margin: 1.5rem 0;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.cta ul li {
  text-shadow: 1.5px 1.5px 1.5px #ed6325;
  text-align: center;
}

/* Pricing FAQ - UPDATED TO MATCH CONTACT PAGE */
.faq {
  background: #ed6325;
  width: 80%;
  max-width: 1200px;
  height: fit-content;
  margin: 16vh auto 0;
  border-radius: 32px;
  padding: 5em 7em;
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.faq h2 {
  font-size: 72px;
  line-height: 1.1em;
  color: #fde2cf;
}

.faqContent {
  background: #fde2cf;
  padding: 24px 38px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 60%;
  height: fit-content;
}

.faqItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 24px;
  line-height: 1.4em;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

.faqQues {
  font-size: 20px;
  font-weight: 500 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.faqQues span {
  transition: transform 0.3s ease;
  font-size: 24px;
}

.faqAns {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faqItem.active .faqAns {
  max-height: 300px;
  opacity: 1;
  margin-top: 1.1em;
  padding-bottom: 10px;
}

.faqItem.active .faqQues span {
  transform: rotate(45deg);
}

.faqHead {
  font-size: 115px !important;
  display: block;
  margin-top: 0.5rem;
}

.faqContentContainer {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* ADDED: Pricing Tiers Container Fix */
.pricingContainer {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 2em;
  width: 100%;
}

.pricingTiers {
  background: #ed6325;
  color: #fde2cf;
  width: 31%;
  min-width: 300px;
  height: auto;
  margin: 1.5em 0;
  border-radius: 32px;
  padding: 3em 2em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 1;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .testimonials,
  .pricing-desc,
  .comparision,
  .addons,
  .cta,
  .faq {
    width: 90%;
  }
  
  .testimonialItem,
  .paymentItem {
    width: 45%;
  }
  
  .points {
    gap: 2rem;
  }
  
  .pricingTiers {
    width: 45%;
    min-width: 280px;
  }
  
  .pricingContainer {
    flex-wrap: wrap;
  }
}

@media (max-width: 992px) {
  .pricing-desc h2,
  .comparision h2 {
    font-size: 60px;
  }
  
  .compareTable {
    font-size: 22px;
    padding: 1.5rem;
  }
  
  .featureItem {
    padding: 1.5rem 0;
  }
  
  .addons h2 {
    font-size: 32px;
  }
  
  .cta h2 {
    font-size: 48px;
  }
  
  .cta h3 {
    font-size: 22px;
  }
  
  .faq {
    padding: 4em 5em;
  }
}

@media (max-width: 867px) {
  .faq {
    padding: 5em 3em;
  }
}

@media (max-width: 768px) {
  .testimonials,
  .pricing-desc,
  .comparision,
  .addons,
  .cta,
  .faq {
    width: 95%;
  }
  
  .testimonialContainer,
  .paymentContainer {
    flex-direction: column;
  }
  
  .testimonialItem,
  .paymentItem {
    width: 100%;
  }
  
  .points {
    flex-direction: column;
    gap: 2rem;
    align-items: center;
  }
  
  .points ul {
    text-align: center;
    width: 100%;
  }
  
  .points li {
    justify-content: center;
  }
  
  .compareTable {
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
  }
  
  .compareTable span {
    padding: 0.5rem;
  }
  
  .featureItem {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
  
  .featureItem span {
    padding: 0.5rem;
  }
  
  .cta p {
    width: 95%;
  }
  
  .cta ul {
    align-items: center;
    text-align: center;
  }
  
  .pricingContainer {
    flex-direction: column;
    align-items: center;
  }
  
  .pricingTiers {
    width: 90%;
    min-width: auto;
  }
  
  .faqContentContainer {
    flex-direction: column;
  }
  
  .faqContent {
    width: 98%;
    margin-top: 1.2em;
    align-self: center;
  }
}

@media (max-width: 707px) {
  .faq {
    padding: 5em 1.2em;
  }
}

@media (max-width: 576px) {
  .pricing-desc h2,
  .comparision h2 {
    font-size: 48px;
  }
  
  .cta h2 {
    font-size: 36px;
  }
  
  .cta h3 {
    font-size: 20px;
  }
  
  .cta p {
    font-size: 18px;
  }
  
  .addons {
    padding: 4rem 2rem;
  }
  
  .addons h2 {
    font-size: 28px;
  }
  
  .faqHead {
    font-size: 80px !important;
  }
  
  .faq h2 {
    font-size: 60px;
  }
}

@media (max-width: 525px) {
  .faqContent {
    padding: 24px 10px;
  }
  
  .faqItem {
    padding: 20px 6px;
  }
  
  .faqQues {
    font-size: 16px;
  }
  
  .faqAns {
    font-size: 14px;
    line-height: 1.5em !important;
  }
}