/* styles.css */

/* 1–20: Layout & Containers */
.container { max-width: 1200px; margin: 0 auto; }
body { min-height: 100vh; }

/* 21–40: Hero & Buttons */
.btn-gradient {
  background: linear-gradient(135deg,#4f46e5,#06b6d4);
  color: #fff;
}
.btn-gradient:hover {
  background: linear-gradient(135deg,#4338ca,#0891b2);
}
.btn-bounce {
  animation: bounce 4s infinite ease-in-out;
}

/* 41–60: Feature Cards */
.feature-card {
  background: #fff; padding: 2rem; border-radius: 1rem;
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  transition: transform .3s ease, box-shadow .3s ease;
  text-align: center;
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}

/* 61–80: HowTo Cards */
.howto-card {
  background: #fff; padding: 2rem; border-radius: 1rem;
  text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  transition: transform .3s ease;
}
.howto-card:hover { transform: translateY(-6px); }

/* 81–100: Tags */
.tag {
  display: inline-block; margin: .25rem; padding: .5rem 1rem;
  background: #e0f2fe; color: #0369a1; border-radius: 9999px;
  font-size: .875rem; transition: transform .2s ease;
}
.tag:hover { transform: scale(1.1); }

/* 101–120: FAQ Accordion */
.faq-item { border-bottom: 1px solid #e5e7eb; }
.faq-q {
  width: 100%; text-left; padding: 1rem; font-weight: 600;
  background: #fff; border: none; cursor: pointer;
  transition: background .2s;
}
.faq-q:hover { background: #f3f4f6; }
.faq-a {
  max-height: 0; overflow: hidden; transition: max-height .3s ease;
  padding: 0 1rem;
  background: #fafafa; color: #374151;
}
.faq-a.open { max-height: 200px; padding: 1rem; }

/* 121–140: Wave Divider */
header svg path { opacity: .6; }

/* 141–160: Converter Card */
#converter .shadow-2xl {
  box-shadow: 0 25px 50px rgba(0,0,0,0.1);
}

/* 161–180: Text & Utility */
.text-center { text-align: center; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }

/* 181–200: Bounce Animation Keyframes */
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* 201–220: AOS Overrides */
[data-aos]{ opacity:0; transition-property:opacity,transform; }
[data-aos].aos-animate{ opacity:1; }
[data-aos="fade-up"]{ transform: translateY(20px); }
[data-aos="fade-up"].aos-animate{ transform: translateY(0); }
[data-aos="zoom-in"]{ transform: scale(.8); }
[data-aos="zoom-in"].aos-animate{ transform: scale(1); }

/* 221–260: Responsive */
@media(min-width:640px){
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
}
@media(min-width:768px){
  .grid-cols-1.md\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media(min-width:1024px){
  .container{ padding: 0 2rem; }
}
/* ----------------------------
   New Section Styles
   ---------------------------- */

/* Benefit Cards */
.benefit-card {
  background: #fff;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  transition: transform .3s, box-shadow .3s;
}
.benefit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}

/* Blog Cards */
.blog-card {
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  transition: transform .3s, box-shadow .3s;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}
.blog-card figure img {
  width: 100%;
  display: block;
}

/* Testimonial Cards */
.testimonial-card {
  background: #fff;
  border-left: 4px solid #6366f1;
  padding: 1.5rem;
  border-radius: .5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* HowTo Cards (already styled) */

/* FAQ Accordion */
.faq-item { border-bottom: 1px solid #e5e7eb; }
.faq-q {
  width: 100%;
  text-left;
  padding: 1rem;
  font-weight: 600;
  background: #fff;
  border: none;
  cursor: pointer;
  transition: background .2s;
}
.faq-q:hover { background: #f3f4f6; }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  padding: 0 1rem;
  background: #fafafa;
  color: #374151;
}
.faq-a.open {
  max-height: 200px;
  padding: 1rem;
}

/* Newsletter Inputs & Button */
#newsletter input[type="email"] {
  padding: .75rem 1rem;
  border: none;
  border-radius: .75rem;
}
#newsletter button {
  border-radius: .75rem;
}

/* Tag Cloud (already styled) */

/* AOS overrides (already in place) */

/* Responsive utilities (already in place) */