@import url("./header.css");
@import url("./footer.css");
@import url("./bot.css");
@import url("https://fonts.googleapis.com/css2?family=Anta&display=swap");

body {
  background: rgb(15 23 42);
  color: rgb(2, 8, 23);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
  /* border: 1px solid rgb(226, 232, 240); */
}

button {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  color: inherit;
}
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  color: inherit;
  background-color: transparent;
  border: none;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
}

/* --- Global Section Padding & Container --- */
.section-padding {
  padding-top: 5rem; /* py-20 */
  padding-bottom: 5rem; /* py-20 */
}

.max-width-container {
  max-width: 80rem; /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
}

.text-center-wrapper {
  text-align: center;
}

/* --- Hero Section --- */
.hero-section {
  background-image: linear-gradient(
    to bottom right,
    #0f172a,
    #1e293b,
    #0f172a
  ); /* bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 */
  position: relative;
  overflow: hidden;
}

.hero-background-effects {
  position: absolute;
  inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */
}

.hero-blob-emerald {
  position: absolute;
  top: 25%; /* top-1/4 */
  left: 25%; /* left-1/4 */
  width: 24rem; /* w-96 */
  height: 24rem; /* h-96 */
  background-color: rgba(16, 185, 129, 0.1); /* bg-emerald-500/10 */
  border-radius: 50%;
  filter: blur(48px); /* blur-3xl */
}

.hero-blob-blue {
  position: absolute;
  bottom: 25%; /* bottom-1/4 */
  right: 25%; /* right-1/4 */
  width: 24rem; /* w-96 */
  height: 24rem; /* h-96 */
  background-color: rgba(59, 130, 246, 0.1); /* bg-blue-500/10 */
  border-radius: 50%;
  filter: blur(48px); /* blur-3xl */
}

.hero-content {
  position: relative; /* relative */
  max-width: 64rem; /* max-w-7xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
  text-align: center; /* text-center */
  z-index: 1; /* Ensure content is above blobs */
}

.hero-title {
  font-family: "Anta", sans-serif;
  font-size: 3rem; /* text-5xl */
  line-height: 1.2;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1.5rem; /* mb-6 */
}

.hero-title-gradient {
  background-image: linear-gradient(
    to right,
    #34d399,
    #60a5fa
  ); /* from-emerald-400 to-blue-400 */
  -webkit-background-clip: text; /* bg-clip-text */
  -webkit-text-fill-color: transparent; /* text-transparent */
  background-clip: text; /* Fallback */
  color: transparent; /* Fallback */
}

.hero-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.625; /* leading-relaxed */
  color: #d1d5db; /* text-gray-300 */
  max-width: 48rem; /* max-w-3xl */
  margin-left: auto;
  margin-right: auto;
}

/* --- Contact Form & Info Section --- */
.contact-section {
  background-color: rgba(30, 41, 59, 0.3); /* bg-slate-800/30 */
}

.contact-grid {
  display: grid; /* grid */
  gap: 4rem; /* gap-16 */
  justify-items: stretch;
  place-content: stretch;
}

/* --- Contact Form Styles --- */
.contact-form-wrapper {
  background-color: rgba(15, 23, 42, 0.5); /* bg-slate-900/50 */
  border: 1px solid #334155; /* border border-slate-700 */
  border-radius: 0.75rem; /* rounded-xl */
  padding: 2rem; /* p-8 */
}

.form-title {
  font-size: 1.875rem; /* text-3xl */
  line-height: 2.25rem;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 2rem; /* mb-8 */
}

.contact-form-elements {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* space-y-6 */
}

.form-grid-2col {
  display: grid; /* grid */
  gap: 1.5rem; /* gap-6 */
}

.form-field label {
  display: block; /* block */
  color: #d1d5db; /* text-gray-300 */
  margin-bottom: 0.5rem; /* mb-2 */
  font-weight: 500; /* font-medium */
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; /* w-full */
  padding: 0.75rem 1rem; /* px-4 py-3 */
  background-color: #1e293b; /* bg-slate-800 */
  border: 1px solid #4b5563; /* border border-slate-600 */
  border-radius: 0.5rem; /* rounded-lg */
  color: #ffffff; /* text-white */
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-colors */
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: #9ca3af; /* placeholder-gray-400 */
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: #10b981; /* focus:border-emerald-500 */
}

.form-field textarea {
  resize: vertical; /* resize-none (default is none, but explicit for consistency) */
  min-height: 8rem; /* rows={6} approx */
}

.submit-button {
  width: 100%; /* w-full */
  background-image: linear-gradient(
    to right,
    #10b981,
    #059669
  ); /* from-emerald-500 to-emerald-600 */
  color: #ffffff; /* text-white */
  padding: 1rem 1.5rem; /* py-4 px-6 */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 600; /* font-semibold */
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-all duration-200 */
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
}

.submit-button:hover {
  background-image: linear-gradient(
    to right,
    #059669,
    #047857
  ); /* hover:from-emerald-600 hover:to-emerald-700 */
}

.submit-button svg {
  margin-left: 0.5rem; /* ml-2 */
  width: 1.25rem; /* size={20} */
  height: 1.25rem; /* size={20} */
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-transform */
}

.submit-button:hover svg {
  transform: translateX(0.25rem); /* group-hover:translate-x-1 */
}

/* --- Contact Info Styles --- */
.contact-info-section {
  display: flex;
  flex-direction: column;
  gap: 2rem; /* space-y-8 */
}

.contact-info-header {
  font-size: 1.875rem; /* text-3xl */
  line-height: 2.25rem;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 2rem; /* mb-8 */
}

.contact-info-description {
  color: #d1d5db; /* text-gray-300 */
  margin-bottom: 2rem; /* mb-8 */
  line-height: 1.625; /* leading-relaxed */
}

.contact-info-grid {
  display: grid; /* grid */
  gap: 1.5rem; /* gap-6 */
}

.contact-info-item {
  display: flex; /* flex */
  align-items: center; /* items-center */
  padding: 1rem; /* p-4 */
  background-color: rgba(15, 23, 42, 0.5); /* bg-slate-900/50 */
  border: 1px solid #334155; /* border border-slate-700 */
  border-radius: 0.5rem; /* rounded-lg */
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-colors */
  text-decoration: none;
}

.contact-info-item:hover {
  border-color: rgba(16, 185, 129, 0.5); /* hover:border-emerald-500/50 */
}

.contact-info-icon-wrapper {
  width: 3rem; /* w-12 */
  height: 3rem; /* h-12 */
  background-color: rgba(16, 185, 129, 0.1); /* bg-emerald-500/10 */
  border-radius: 0.5rem; /* rounded-lg */
  display: flex; /* flex */
  align-items: center; /* items-center */
  justify-content: center; /* justify-center */
  margin-right: 1rem; /* mr-4 */
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-colors */
}

.contact-info-item:hover .contact-info-icon-wrapper {
  background-color: rgba(16, 185, 129, 0.2); /* group-hover:bg-emerald-500/20 */
}

.contact-info-icon-wrapper svg {
  color: #34d399; /* text-emerald-400 */
  width: 1.5rem; /* size={24} */
  height: 1.5rem; /* size={24} */
}

.contact-info-label {
  color: #9ca3af; /* text-gray-400 */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
}

.contact-info-value {
  color: #ffffff; /* text-white */
  font-weight: 600; /* font-semibold */
}

/* --- Chatbot CTA --- */
.chatbot-cta-card {
  background-image: linear-gradient(
    to right,
    rgba(16, 185, 129, 0.1),
    rgba(59, 130, 246, 0.1)
  ); /* bg-gradient-to-r from-emerald-500/10 to-blue-500/10 */
  border: 1px solid rgba(16, 185, 129, 0.2); /* border border-emerald-500/20 */
  border-radius: 0.75rem; /* rounded-xl */
  padding: 1.5rem; /* p-6 */
}

.chatbot-cta-header {
  display: flex; /* flex */
  align-items: center; /* items-center */
  margin-bottom: 1rem; /* mb-4 */
}

.chatbot-cta-header svg {
  color: #34d399; /* text-emerald-400 */
  margin-right: 0.75rem; /* mr-3 */
  width: 1.5rem; /* size={24} */
  height: 1.5rem; /* size={24} */
}

.chatbot-cta-title {
  color: #ffffff; /* text-white */
  font-weight: 700; /* font-bold */
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75rem;
}

.chatbot-cta-description {
  color: #d1d5db; /* text-gray-300 */
  margin-bottom: 1rem; /* mb-4 */
}

.chatbot-cta-button {
  background-color: #10b981; /* bg-emerald-500 */
  color: #ffffff; /* text-white */
  padding-left: 1.5rem; /* px-6 */
  padding-right: 1.5rem; /* px-6 */
  padding-top: 0.5rem; /* py-2 */
  padding-bottom: 0.5rem; /* py-2 */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 600; /* font-semibold */
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1); /* transition-colors */
}

.chatbot-cta-button:hover {
  background-color: #059669; /* hover:bg-emerald-600 */
}

/* --- FAQ Section --- */
.faq-section {
  background-color: rgba(15, 23, 42, 0.5); /* bg-slate-900/50 */
}

.faq-header {
  margin-bottom: 4rem; /* mb-16 */
}

.faq-title {
  font-size: 2.25rem; /* text-4xl */
  line-height: 2.5rem;
  font-weight: 700; /* font-bold */
  color: #ffffff; /* text-white */
  margin-bottom: 1rem; /* mb-4 */
  font-family: "Anta", sans-serif;
}

.faq-description {
  font-size: 1.25rem; /* text-xl */
  line-height: 1.75rem;
  color: #9ca3af; /* text-gray-400 */
}

.faq-items-spacing {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* space-y-6 */
}

.faq-item-card {
  background-color: rgba(15, 23, 42, 0.5); /* bg-slate-900/50 */
  border: 1px solid #334155; /* border border-slate-700 */
  border-radius: 0.5rem; /* rounded-lg */
  padding: 1.5rem; /* p-6 */
}

.faq-question {
  color: #ffffff; /* text-white */
  font-weight: 700; /* font-bold */
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75rem;
  margin-bottom: 0.75rem; /* mb-3 */
}

.faq-answer {
  color: #9ca3af; /* text-gray-400 */
  line-height: 1.625; /* leading-relaxed */
}

/* --- Responsive Adjustments --- */
@media (min-width: 640px) {
  /* sm breakpoint */
  .max-width-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem; /* sm:px-6 */
  }
}

@media (min-width: 1024px) {
  /* lg breakpoint */
  .max-width-container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem; /* lg:px-8 */
  }
  .hero-title {
    font-size: 4.5rem; /* lg:text-7xl */
  }
  .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* lg:grid-cols-2 */
  }
  .form-grid-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* md:grid-cols-2 */
  }
}