body,
h1,
h2,
h3,
h4,
h5 {
  padding: 0;
  margin: 0;
}

* {
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

:root {
  --black: #000;
  --blue-50: #f5f9ff;
  --blue-100: #d0e1fd;
  --blue-200: #abc9fb;
  --blue-300: #85b2f9;
  --blue-400: #609af8;
  --blue-500: #3b82f6;
  --blue-600: #326fd1;
  --blue-700: #295bac;
  --blue-800: #204887;
  --blue-900: #183462;
  --green-10: #f3fbf6;
  --green-50: #e6f6ed;
  --green-100: #c3e9d3;
  --green-200: #9cdbb8;
  --green-300: #71ce9c;
  --green-400: #4dc387;
  --green-500: #20b772;
  --green-600: #18a867;
  --green-700: #05844e;
  --green-800: #006439;
  --green-900: #0b4c2f;
  --yellow-50: #fefbf3;
  --yellow-100: #faedc4;
  --yellow-200: #f6de95;
  --yellow-300: #f2d066;
  --yellow-400: #eec137;
  --yellow-500: #eab308;
  --yellow-600: #c79807;
  --yellow-700: #a47d06;
  --yellow-800: #816204;
  --yellow-900: #5e4803;
  --cyan-50: #f3fbfd;
  --cyan-100: #c3edf5;
  --cyan-200: #94e0ed;
  --cyan-300: #65d2e4;
  --cyan-400: #35c4dc;
  --cyan-500: #06b6d4;
  --cyan-600: #059bb4;
  --cyan-700: #047f94;
  --cyan-800: #036475;
  --cyan-900: #024955;
  --pink-50: #fef6fa;
  --pink-100: #fad3e7;
  --pink-200: #f7b0d3;
  --pink-300: #f38ec0;
  --pink-400: #f06bac;
  --pink-500: #ec4899;
  --pink-600: #c93d82;
  --pink-700: #a5326b;
  --pink-800: #822854;
  --pink-900: #5e1d3d;
  --indigo-50: #f7f7fe;
  --indigo-100: #dadafc;
  --indigo-200: #bcbdf9;
  --indigo-300: #9ea0f6;
  --indigo-400: #8183f4;
  --indigo-500: #6366f1;
  --indigo-600: #5457cd;
  --indigo-700: #4547a9;
  --indigo-800: #363885;
  --indigo-900: #282960;
  --teal-50: #f3fbfb;
  --teal-100: #c7eeea;
  --teal-200: #9ae0d9;
  --teal-300: #6dd3c8;
  --teal-400: #41c5b7;
  --teal-500: #14b8a6;
  --teal-600: #119c8d;
  --teal-700: #0e8174;
  --teal-800: #0b655b;
  --teal-900: #084a42;
  --orange-50: #fff8f3;
  --orange-100: #feddc7;
  --orange-200: #fcc39b;
  --orange-300: #fba86f;
  --orange-400: #fa8e42;
  --orange-500: #f97316;
  --orange-600: #d46213;
  --orange-700: #ae510f;
  --orange-800: #893f0c;
  --orange-900: #642e09;
  --bluegray-50: #f7f8f9;
  --bluegray-100: #dadee3;
  --bluegray-200: #bcc3cd;
  --bluegray-300: #9fa9b7;
  --bluegray-400: #818ea1;
  --bluegray-500: #64748b;
  --bluegray-600: #556376;
  --bluegray-700: #465161;
  --bluegray-800: #37404c;
  --bluegray-900: #282e38;
  --purple-50: #fbf7ff;
  --purple-100: #ead6fd;
  --purple-200: #dab6fc;
  --purple-300: #c996fa;
  --purple-400: #b975f9;
  --purple-500: #a855f7;
  --purple-600: #8f48d2;
  --purple-700: #763cad;
  --purple-800: #5c2f88;
  --purple-900: #432263;
  --red-50: #fff5f5;
  --red-100: #ffd0ce;
  --red-200: #ffaca7;
  --red-300: #ff8780;
  --red-400: #ff6259;
  --red-500: #ff3d32;
  --red-600: #d9342b;
  --red-700: #b32b23;
  --red-800: #8c221c;
  --red-900: #661814;
  --primary-50: #f5f9ff;
  --primary-100: #d0e1fd;
  --primary-200: #abc9fb;
  --primary-300: #85b2f9;
  --primary-400: #609af8;
  --primary-500: #3b82f6;
  --primary-600: #326fd1;
  --primary-700: #295bac;
  --primary-800: #204887;
  --primary-900: #183462;
  --gray-50: #fafafa;
  --gray-50: #edeef1;
  --gray-100: #d1d6dd;
  --gray-200: #b4bbc6;
  --gray-300: #97a0af;
  --gray-400: #808b9d;
  --gray-500: #6a778c;
  --gray-600: #5d697b;
  --gray-700: #4c5565;
  --gray-800: #3c434f;
  --gray-900: #292f38;
  color-scheme: light;
  --container-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
    0 1px 4px rgba(0, 0, 0, 0.14);
  --h-header: 70px;
}

@media (max-width: 767px) {
  :root {
    --h-header: 60px;
  }
}

.text-black {
  color: #000;
}

header {
  background: rgba(255, 255, 255, 0.97);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--h-header);
  border-bottom: 1px solid var(--gray-50);
  display: flex;
  justify-content: center;
  z-index: 99;
}

.anchor {
  scroll-margin-top: calc(var(--h-header) + 30px);
}

main {
  margin-top: var(--h-header);
  display: flex;
  flex-direction: column;
  align-items: center;
}

header section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  padding: 0 20px;
}

.logo-img {
  width: 150px;
}

nav a {
  color: var(--gray-900);
  text-decoration: none;
}

nav a:hover {
  color: var(--green-600);
}

.green-button {
  background-color: var(--green-700);
  color: white;
  padding: 12px 40px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: flex;
  justify-content: center;
}

.green-button.big {
  padding: 15px 50px;
  font-size: 16px;
}

.green-button.small {
  font-size: 14px;
}

.green-button.outlined {
  background-color: transparent;
  border: 1px solid var(--green-700);
  box-sizing: border-box;
  padding: 15px 30px;
  color: var(--green-700);
}

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
}

.hw-card {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  padding: 30px 20px;
  z-index: 2;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.hw-card p {
  font-size: 18px;
  line-height: 1.4;
}

.hw-card h3 {
  font-weight: 600;
}
.hw-card img {
  width: 100%;
}

@media (min-width: 1210px) {
  .hw-card img {
    width: 336px;
  }
}

.hw-step {
  position: absolute;
  right: 5px;
  font-weight: 600;
  top: 0;
  font-size: 56px;
  color: var(--gray-50);
  z-index: -1;
}

.hw-card-head {
  display: flex;
  align-items: center;
}

.hw-card-head .material-symbols-outlined {
  font-size: 30px;
  margin-right: 10px;
}

@media (max-width: 992px) {
  .hw-card {
    padding: 20px;
  }
  .hw-card p {
    font-size: 16px;
  }
  .hw-card h3 {
    font-weight: 500;
    font-size: 18px;
  }
  .hw-card-head .material-symbols-outlined {
    font-size: 26px;
    margin-right: 10px;
  }
}

.feature-text-section {
  cursor: pointer;
  color: var(--gray-300);
}
.feature-text-section .material-symbols-outlined {
  display: none;
}

.feature-text-section.active {
  color: #000;
}

.feature-text-section.active .material-symbols-outlined {
  display: block;
}

@media (max-width: 767px) {
  .feature-text-section.active .material-symbols-outlined {
    display: none;
  }
  .feature-text-section {
    cursor: pointer;
    color: #000;
  }
}

.advantage-feature-text {
  margin-top: 28px;
  line-height: 1.5;
}

@media (max-width: 992px) {
  .advantage-feature-text {
    margin-top: 20px;
    line-height: 1.4;
  }
}

.light-green {
  background: #f3fbf6;
}

.price-card {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 6px;
  z-index: 2;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  display: flex;
  flex-direction: column;
}

.price-card-header {
  padding: 20px 20px;
  text-align: center;
  font-weight: 600;
  /* color: var(--green-700); */
  font-size: 22px;
  border-bottom: 1px solid var(--gray-100);
}

.price-container {
  display: flex;
  justify-content: center;
  padding: 30px 40px;
}
.price-currency {
  align-self: flex-start;
  font-size: 14px;
  color: var(--gray-900);
  margin-right: 2px;
}
.price-amount {
  font-size: 28px;
  font-weight: 700;
}
.price-period {
  align-self: flex-end;
  margin-left: 2px;
  /* vertical-align: bottom; */
}

.price-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40px 40px 40px;
}

@media (max-width: 767px) {
  .price-container {
    padding: 25px 20px;
  }
  .price-body {
    padding: 0 20px 20px 20px;
  }
}

.price-feature {
  display: flex;
  align-items: center;
  margin-top: 14px;
}
.price-feature .material-symbols-outlined {
  margin-right: 3px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
  gap: 10px; /* Adjust the spacing between images */
  /* padding: 10px; */
}

.image-item {
  border-radius: 6px;
}

.image-item img {
  border-radius: 6px;
  border: 1px solid var(--gray-50);
  width: 100%; /* Make images fully responsive within their container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove bottom space/margin under images */
}

@media (max-width: 767px) {
  .image-grid {
    grid-template-columns: repeat(
      auto-fill,
      minmax(350px, 1fr)
    ); /* Adjust grid for smaller screens */
  }
}

.faq-section {
  width: 100%;
  /* margin: auto;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
}

.faq-section h2 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.faq-item {
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
}

.faq-question {
  font-weight: 500;
  cursor: pointer;
  padding: 20px;
  margin: 0;
  border-radius: 4px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease;
}

.faq-question:hover {
  background-color: var(--gray-50);
}

.faq-answer.active {
  border-top: 1px solid var(--gray-50);
}

.faq-answer {
  transition: height 0.3s ease;
  height: 0;
  overflow: hidden;
  padding: 0 10px; /* Keep padding for the transition */
}

.faq-answer p {
  margin: 0;
  padding: 20px;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.3s ease 0.3s;
}

.faq-answer.active p {
  opacity: 1;
  transition: opacity 0.3s ease;
}

footer {
  border-top: 1px solid var(--gray-50);
  /* background: var(--gray-50); */
  color: var(--gray-900);
  padding: 20px;
  display: flex;
  font-size: 14px;
  justify-content: center;
  margin-top: 20px;
}