SafeValue must use [property]=binding: <style>
/* ===== RESET & BASE ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f9f9f9;
  color: #222;
  line-height: 1.6;
}

/* 🧱 Extended for Mega Navbar Dropdown */
.mega-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: #fff;
  border-bottom: 1px solid #eee;
  position: relative;
}

.nav-1 {
  display: flex;
  list-style: none;
  gap: 20px;
  position: relative;
}

.nav-1 li {
  position: relative;
}

.nav-1 li a {
  text-decoration: none;
  color: #222;
  font-weight: 500;
  padding: 8px 12px;
  display: inline-block;
}

.nav-1 li:hover > .dropdown-content {
  display: block;
}

/* Dropdown content for mega menu */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 20px;
  z-index: 999;
  width: 800px;
}

.dropdown-columns {
  display: flex;
  gap: 30px;
}

.column {
  flex: 1;
}

.column h4 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}

.column ul {
  list-style: none;
  padding: 0;
}

.column ul li {
  margin-bottom: 12px;
}

.column ul li span {
  display: inline-block;
  margin-right: 8px;
}

.column ul li strong {
  display: block;
  font-weight: bold;
  margin-bottom: 2px;
}

.column ul li p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.footer-link {
  margin-top: 15px;
}

.footer-link a {
  color: #007bff;
  text-decoration: none;
  font-weight: 500;
}

.footer-link a:hover {
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 960px) {
  .dropdown-columns {
    flex-direction: column;
  }

  .dropdown-content {
    width: 100%;
    left: 0;
    right: 0;
  }

  .mega-navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-1 {
    flex-direction: column;
    gap: 10px;
  }

  .navbar-actions {
    margin-top: 10px;
  }
}

/* ======= NAVBAR ======= */
.navbar-1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.logo-1 {
  width: 100px;
  height: 30px;
  background: #ccc;
}

.nav-1 {
  display: flex;
  gap: 20px;
  list-style: none;
}

.nav-1 li a {
  text-decoration: none;
  color: #222;
  font-weight: 500;
}

.join-btn {
  background: black;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* ======= HERO / HEADER SECTION ======= */
.hero-header {
  text-align: center;
  padding: 60px 20px;
  background: #fdfdfd;
}

.hero-header h1 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.hero-header p {
  font-size: 16px;
  color: #555;
  margin-bottom: 30px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.cta-buttons button {
  padding: 10px 20px;
  background: black;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
  /* ✅ Generic button fix */
button {
  font-size: 15px;
  padding: 10px 20px;
  background-color: black;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #333;
}

.cta-buttons button,
.footer-1 button,
.testimonial-section button {
  font-size: 15px;
  padding: 10px 20px;
}


/* ======= IMAGE GRID ======= */
.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 40px;
}

.image-grid div {
  background: #ddd;
  aspect-ratio: 1;
  border-radius: 4px;
}

/* ======= BODY SECTION (2 COLUMN) ======= */
.feature-section {
  display: flex;
  flex-wrap: wrap;
  padding: 60px 40px;
  align-items: center;
  gap: 40px;
}

.feature-section img {
  width: 300px;
  height: 300px;
  background: #ccc;
  object-fit: cover;
}

.feature-content {
  flex: 1;
}

.feature-content h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}

.feature-content p {
  font-size: 16px;
  color: #444;
  margin-bottom: 20px;
}

.feature-content ul {
  list-style: none;
  padding: 0;
}

.feature-content ul li {
  padding-left: 20px;
  position: relative;
  margin-bottom: 10px;
}

.feature-content ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #007bff;
}

/* ======= TESTIMONIAL SECTION ======= */
.testimonial-section {
  padding: 60px 20px;
  text-align: center;
}

.testimonial-heading {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.testimonial-subtitle {
  color: #666;
  margin-bottom: 40px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.testimonial-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  max-width: 320px;
}
.stars {
  color: #f39c12;
  font-size: 1.2rem;
}
.author {
  margin-top: 15px;
  text-align: center;
}
.author .avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.testimonial-card .profile {
  width: 40px;
  height: 40px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 auto 10px;
}

.testimonial-card blockquote {
  font-style: italic;
  color: #444;
  margin: 10px 0;
}



/* ======= FOOTER ======= */
.footer-1 {
  background: #f8f8f8;
  padding: 40px 20px;
  font-size: 15px;
}

.footer-top,
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.footer-nav,
.footer-legal {
  display: flex;
  gap: 15px;
  list-style: none;
  flex-wrap: wrap;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social div {
  width: 24px;
  height: 24px;
  background: #bbb;
  border-radius: 50%;
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  width: 100%;
  font-family: 'Segoe UI', sans-serif;
}

/* 🧱 All section wrapper spacing */
section, header, footer, nav, div {
  margin-bottom: 30px;
}

/* Layout blocks stay inside */
.canvas-page {
  overflow-wrap: break-word;
}

/* Prevent buttons from floating off */
button {
  display: inline-block;
  white-space: nowrap;
}

/* Keep max-width structure */
.container,
.feature-section,
.hero-header {
  max-width: 100%;
  width: 100%;
}

.cta-section {
  text-align: center;
  padding: 60px 20px;
}

.cta-button {
  background: black;
  color: white;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
  margin-top: 20px;
  text-decoration: none;
}

.hero-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 40px;
  background-color: #ffffff;
  font-family: sans-serif;
  flex-wrap: wrap;
}

.hero-left {
  flex: 1;
  min-width: 300px;
}

.hero-right {
  flex: 1;
  min-width: 300px;
  display: flex;
  justify-content: center;
  background-color: #e5e5e5;
}

.hero-right-img {
  width: 100%;
  height: auto;
}

.hero-buttons {
  margin-top: 20px;
  display: flex;
  gap: 16px;
}

.btn {
  padding: 10px 20px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-filled {
  background-color: #000;
  color: #fff;
}

.btn-outlined {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
}

.hero-centered {
  background: #ffffff;
  font-family: sans-serif;
  text-align: center;
  padding: 60px 20px;
}

.hero-heading {
  font-size: 32px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 20px;
}

.hero-description {
  font-size: 16px;
  color: #333333;
  max-width: 600px;
  margin: 0 auto 30px;
}

.btn-filled {
  padding: 10px 20px;
  background-color: #000000;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
}

.btn-outlined {
  padding: 10px 20px;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
  border-radius: 4px;
  cursor: pointer;
}

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 40px;
  background-color: #e5e5e5;
}


/* ======= HERO SECTION (Two Column) ======= */
.feature-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 60px 40px;
  gap: 40px;
}

.feature-content {
  flex: 1;
  min-width: 300px;
}

.feature-content h2 {
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 15px;
}

.feature-content p {
  font-size: 16px;
  color: #444;
  margin-bottom: 20px;
}

.cta-buttons {
  display: flex;
  gap: 15px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.cta-buttons a {
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s ease;
}

.cta-buttons a:hover {
  opacity: 0.9;
}

.feature-section img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* ======= PARTNER LOGOS ======= */
.feature-content .partners-logos {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.feature-content .partners-logos img {
  height: 24px;
  object-fit: contain;
}

/* ======= DECORATIONS ======= */
.decoration {
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 0;
  opacity: 0.4;
}

.decoration.circle {
  border-radius: 50%;
}

.decoration.abstract-green {
  clip-path: polygon(0 0, 100% 20%, 80% 100%, 0 100%);
}

.decoration.abstract-orange {
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

/* ======= SCROLL INDICATOR ======= */
.scroll-indicator {
  font-size: 20px;
  position: absolute;
  animation: bounce 2s infinite;
  color: #666;
}

.scroll-indicator.bottom-left {
  bottom: 20px;
  left: 20px;
}

.scroll-indicator.bottom-right {
  bottom: 20px;
  right: 20px;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.hero-left-cards {
  background: radial-gradient(circle, #1a1f1c, #2d3430);
  color: white;
  font-family: sans-serif;
  padding: 60px 40px;
}

.hero-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
}

.hero-left {
  flex: 1;
  min-width: 300px;
}

.hero-logo {
  width: 48px;
  margin-bottom: 10px;
}

.hero-label {
  font-size: 14px;
  text-transform: uppercase;
  color: #aaa;
}

.hero-heading {
  font-size: 36px;
  font-weight: bold;
  margin-top: 10px;
}

.hero-right {
  flex: 1;
  display: grid;
  gap: 20px;
  min-width: 300px;
}

.hero-card {
  background: #1c1f1e;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.hero-card img.card-img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 10px;
}

.card-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.btn-filled {
  background: #506c4f;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  text-decoration: none;
}

.btn-outlined {
  border: 1px solid #fff;
  background: transparent;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
}

.hero-centered-art {
  text-align: center;
  background: #fff;
  padding: 80px 20px;
  position: relative;
}

.hero-centered-art .hero-heading {
  font-size: 36px;
  color: #333;
  font-family: sans-serif;
  max-width: 700px;
  margin: 0 auto 30px;
  line-height: 1.3;
}

.hero-centered-art .btn-teal {
  background-color: #00b3b3;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
}

.hero-art-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
}

.hero-art-right {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
}

.subsection-centered {
  text-align: center;
  padding: 60px 20px;
  max-width: 700px;
  margin: 0 auto;
  font-family: sans-serif;
}

.subsection-centered h2 {
  font-size: 28px;
  margin-bottom: 15px;
}

.subsection-centered p {
  font-size: 16px;
  color: #444;
}

.testimonial-section.simple-testimonial {
  padding: 60px 20px;
  text-align: center;
  background: #fff;
  color: #222;
}

.testimonial-logo img {
  height: 40px;
  margin-bottom: 20px;
}

.testimonial-quote {
  font-size: 20px;
  font-style: italic;
  margin-bottom: 30px;
  color: #444;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.testimonial-author .author-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ccc;
  object-fit: cover;
}

.testimonial-author .author-details {
  font-size: 14px;
  color: #555;
  line-height: 1.4;
}
.testimonial-section.dark {
  background: #111;
  color: #fff;
  padding: 60px 20px;
  text-align: center;
}

.testimonial-section.dark .testimonial-heading {
  font-size: 32px;
  margin-bottom: 30px;
}

.testimonial-section.dark .testimonial-grid {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.testimonial-section.dark .testimonial-card {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 12px;
  max-width: 350px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.testimonial-section.dark .stars {
  font-size: 18px;
  color: gold;
  margin-bottom: 10px;
}

.testimonial-section.dark .author {
  margin-top: 20px;
}

.testimonial-section.dark .author .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.client-testimonial-section {
  padding: 60px 20px;
  background-color: #111;
  color: #fff;
  font-family: sans-serif;
  position: relative;
  text-align: center;
}

.testimonial-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.1;
  z-index: -1;
}

.testimonial-logo {
  width: 80px;
  margin-bottom: 20px;
}

.testimonial-title {
  font-size: 32px;
  margin-bottom: 40px;
}

.testimonial-cards {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.testimonial-card {
  background: #222;
  border-radius: 8px;
  padding: 20px;
  max-width: 300px;
}

.testimonial-card .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonial-card blockquote {
  font-style: italic;
  margin: 20px 0;
}

.testimonial-card .author {
  font-size: 14px;
  color: #aaa;
}

.testimonial-card .stars {
  color: gold;
  font-size: 18px;
}

.testimonial-cta .btn-filled {
  margin-top: 30px;
  background: teal;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 4px;
}

.testimonial-contact p {
  margin-top: 10px;
}

.testimonial-landing {
  padding: 60px 20px;
  text-align: center;
  font-family: sans-serif;
}

.testimonial-landing.orange {
  background-color: #fff3e0;
  color: #bf360c;
}

.landing-title {
  font-size: 32px;
  margin-bottom: 10px;
}

.landing-description {
  font-size: 16px;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-grid {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.testimonial-box {
  background: #ffffff;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 8px;
  max-width: 300px;
  box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

.testimonial-box.highlight {
  background: #ffe0b2;
  border-color: #ff9800;
}

.testimonial-box blockquote {
  font-style: italic;
  margin-bottom: 16px;
}

.author-name {
  font-weight: bold;
  font-size: 14px;
}

/* Team secction */
.team-slider-section {
  text-align: center;
  padding: 40px;
  font-family: sans-serif;
}

.team-slider-section h2 {
  font-size: 32px;
  margin-bottom: 10px;
}

.team-slider-section p {
  color: gray;
}

.team-slider {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 10px;
}

.team-member {
  min-width: 300px;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  background: #fff;
  flex-shrink: 0;
  text-align: center;
}

.team-member img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 15px;
}

.team-member h4 {
  margin: 10px 0 5px;
}

.team-member .social-icons a {
  margin: 0 5px;
  color: #555;
  text-decoration: none;
  font-size: 16px;
}

.team-member .profile-link {
  color: #007BFF;
  text-decoration: underline;
  display: inline-block;
  margin-top: 10px;
}
.team-section {
  padding: 60px 20px;
  background: #fff;
  text-align: center;
}
.team-member {
  display: inline-block;
  margin: 20px;
}
.team-member img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.team-member .name {
  margin-top: 10px;
  font-weight: bold;
}
.team-member .role {
  color: #777;
}

/* === Team Showcase === */
#team-showcase {
  padding: 60px 20px;
  text-align: center;
  background-color: #fff;
}
#team-showcase .heading {
  font-size: 2.5rem;
  margin-bottom: 10px;
}
#team-showcase .subtitle {
  color: #666;
  margin-bottom: 40px;
}
#team-showcase .group-list {
  display: flex;
  flex-direction: column;
  gap: 50px;
}
#team-showcase .group {
  padding: 0 10px;
}
#team-showcase .group .groupName {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 20px;
}
#team-showcase .group .team-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  justify-items: center;
}
.team-member {
  text-align: center;
}
.team-member img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
}
.team-member .name {
  font-weight: bold;
}
.team-member .role {
  font-size: 0.95rem;
  color: #777;
}
.team-showcase {
  padding: 60px 20px;
  background: #f9f9f9;
  text-align: center;
}

.team-showcase .group {
  margin-bottom: 40px;
}

.team-showcase .group h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.team-showcase .member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  justify-items: center;
}

.team-showcase .member {
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
  max-width: 200px;
}

.team-showcase .member img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
}

.team-showcase .member .name {
  font-weight: bold;
  margin-bottom: 4px;
}

.team-showcase .member .role {
  font-size: 0.9rem;
  color: #777;
}


/* === Team Grid Section === */
#team-grid {
  padding: 60px 20px;
  background-color: #f9f9f9;
  text-align: center;
}
#team-grid .tag {
  text-transform: uppercase;
  font-weight: 600;
  color: #ff6600;
  margin-bottom: 10px;
}
#team-grid .heading {
  font-size: 2.2rem;
  margin-bottom: 10px;
}
#team-grid .description {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 40px;
}
#team-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 30px;
  justify-items: center;
}
.team-member {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
  max-width: 250px;
  text-align: center;
}
.team-member img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.team-member .name {
  font-weight: bold;
  margin-top: 12px;
}
.team-member .description {
  font-size: 0.95rem;
  color: #555;
  margin-top: 6px;
}


/* === FAQ === */
.faq-section {
  padding: 60px 20px;
}
.faq-title {
  font-size: 2rem;
  margin-bottom: 20px;
}
.faq-subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 30px;
}
.faq-question {
  font-weight: bold;
  margin-top: 15px;
}
.faq-answer {
  margin-bottom: 20px;
  color: #444;
}

/* === Logo Showcase === */
.logo-showcase {
  padding: 60px 20px;
  text-align: center;
}
.logo-showcase img {
  height: 40px;
  margin: 10px 20px;
  opacity: 0.8;
}

/* === HEADER === */
header[ref="header-1"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.logo-1 {
  font-size: 1.5rem;
  font-weight: bold;
}
.nav-1 {
  display: flex;
  gap: 20px;
  list-style: none;
}
.nav-1 li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}
.button-join, .button {
  background: black;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* === HERO SECTION === */
.hero-section {
  text-align: center;
  padding: 80px 20px;
  background: #fff;
}
.hero-heading {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}
.hero-paragraph {
  font-size: 1.2rem;
  margin-bottom: 30px;
  max-width: 700px;
  margin-inline: auto;
}
.button-group {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.button-group .button:first-child {
  background-color: black;
  color: white;
}
.button-group .button:last-child {
  background-color: transparent;
  border: 1px solid #222;
  color: #222;
}

/* === IMAGE GRID === */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  padding: 40px;
  background: #fafafa;
}
.image-tile img {
  width: 100%;
  border-radius: 8px;
  display: block;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.logo-1 {
  font-size: 20px;
  font-weight: bold;
}
.nav-1 {
  display: flex;
  list-style: none;
  gap: 20px;
}
.nav-1 li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}
.join-btn {
  background: black;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Hero */
.hero-section {
  text-align: center;
  padding: 80px 20px;
  background: #f9f9f9;
}
.hero-heading {
  font-size: 32px;
  margin-bottom: 20px;
}
.hero-paragraph {
  max-width: 600px;
  margin: auto;
  color: #555;
}
.button-group {
  margin-top: 20px;
}
.button-group .join-btn {
  margin-right: 10px;
}

/* Image Grid */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
  padding: 40px;
}
.image-tile img {
  width: 100%;
  border-radius: 8px;
}
/* ======= HERO SECTION CENTERED ======= */
.hero-centered {
  text-align: center;
  padding: 60px 20px;
  background: #fdfdfd;
  max-width: 100%;
}

.hero-label {
  font-size: 14px;
  font-weight: 600;
  color: #007bff;
  margin-bottom: 10px;
  display: block;
}

.hero-heading {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #222;
}

.hero-description {
  font-size: 16px;
  color: #555;
  max-width: 700px;
  margin: 0 auto 30px auto;
  line-height: 1.6;
}

.hero-centered .btn {
  font-size: 15px;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  margin: 0 8px;
  cursor: pointer;
}

/* Button Filled */
.btn-filled {
  background-color: black;
  color: white;
  border: none;
}

.btn-filled:hover {
  background-color: #333;
}

/* Button Outlined */
.btn-outlined {
  border: 1px solid black;
  background: transparent;
  color: black;
}

.btn-outlined:hover {
  background-color: black;
  color: white;
}

.text-dark {
  color: #333333;
}
.text-blue {
  color: #3b82f6;
}
.site-info {
  margin-left: 20px;
}

.site-info h2 {
  font-size: 18px;
  margin-bottom: 5px;
}

.site-info p {
  font-size: 14px;
  color: #777;
}
.feature-list-section {
  padding: 60px 20px;
  background-color: #ffffff;
  font-family: sans-serif;
}

.feature-heading {
  font-size: 28px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-bottom: 40px;
}

.feature-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}

.feature-card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  text-align: center;
}

.feature-card img {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
}

.feature-card h4 {
  font-size: 18px;
  margin-bottom: 10px;
}

.feature-card p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.text-button {
  background: none;
  color: #000;
  font-weight: 500;
  text-decoration: underline;
  border: none;
  cursor: pointer;
  padding: 0;
}
.subscription-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px 40px;
  background-color: #ffffff;
  flex-wrap: wrap;
  gap: 40px;
}

.subscription-heading {
  font-size: 24px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 10px;
}

.subscription-description {
  font-size: 14px;
  color: #555555;
  margin-bottom: 20px;
}

.subscription-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
  width: 100%;
}

.form-input {
  padding: 10px 15px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.form-submit {
  background-color: black;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.form-submit:hover {
  background-color: #222;
}

.subscription-form .disclaimer {
  font-size: 12px;
  color: #777;
}

.subscription-form .link-text {
  color: #2563eb;
  text-decoration: underline;
  margin-left: 4px;
  font-weight: 500;
}
.cta-gradient-section {
  background: linear-gradient(90deg, #fbb034, #ffdd00);
  text-align: center;
  padding: 40px 20px;
  border-radius: 10px;
  font-family: sans-serif;
}
.contact-signup-section {
  display: flex;
  justify-content: space-between;
  background-color: #fafafa;
  padding: 40px 20px;
  border-radius: 12px;
  font-family: sans-serif;
  flex-wrap: wrap;
  gap: 30px;
}

.contact-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 300px;
}

.contact-form input[type="email"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  flex: 1;
}

.btn-filled-orange {
  background-color: #f5a623;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
.hero-banner {
  background-color: #fcd34d;
  text-align: center;
  padding: 80px 20px;
  position: relative;
  font-family: sans-serif;
}

.hero-subheading {
  font-size: 24px;
  color: #333333;
  font-weight: 500;
  margin-top: 10px;
}

.hero-button {
  background-color: #1f2937;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: bold;
  display: inline-block;
  margin-top: 20px;
  cursor: pointer;
  text-decoration: none;
}

.decoration {
  position: absolute;
  z-index: 0;
  opacity: 0.5;
}

.decoration.top-left {
  top: 0;
  left: 0;
}

.decoration.top-right {
  top: 0;
  right: 0;
}
.pricing-section {
  padding: 60px 20px;
  text-align: center;
  background: #fff;
  font-family: sans-serif;
}

.pricing-section .hero-label {
  font-size: 14px;
  color: #888;
  margin-bottom: 10px;
}

.pricing-section .hero-heading {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

.pricing-section .hero-description {
  font-size: 16px;
  color: #555;
  max-width: 600px;
  margin: 0 auto 40px;
}

.pricing-section .pricing-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.pricing-card {
  background: #f9f9f9;
  padding: 30px;
  border-radius: 8px;
  width: 280px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  text-align: left;
}

.pricing-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.pricing-card .price {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  margin: 10px 0;
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.pricing-card ul li {
  margin-bottom: 10px;
  color: #444;
}

.pricing-card .btn-filled {
  display: inline-block;
  padding: 10px 20px;
  background: black;
  color: white;
  border-radius: 4px;
  text-decoration: none;
}
.pricing-section-dark {
  background: #111;
  color: #fff;
  padding: 60px 20px;
  text-align: center;
  font-family: sans-serif;
}

.pricing-section-dark .badge {
  text-transform: uppercase;
  color: #facc15;
  font-weight: 600;
  margin-bottom: 10px;
}

.pricing-section-dark .title {
  font-size: 32px;
  margin-bottom: 10px;
}

.pricing-section-dark .description {
  color: #ccc;
  margin-bottom: 40px;
  max-width: 700px;
  margin-inline: auto;
}

.pricing-section-dark .card-grid {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.pricing-card {
  background: #1a1a1a;
  padding: 30px;
  border-radius: 8px;
  width: 280px;
  text-align: left;
}

.pricing-card.highlight {
  border: 2px solid #facc15;
}

.pricing-card .badge {
  color: #facc15;
  font-weight: bold;
  margin-bottom: 8px;
}

.pricing-card .price {
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
  color: #fff;
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  color: #bbb;
  margin-bottom: 20px;
}

.pricing-card ul li {
  margin-bottom: 8px;
}

.pricing-card button {
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

button.filled {
  background: #facc15;
  color: #000;
  border: none;
}

button.outline {
  background: transparent;
  color: #facc15;
  border: 1px solid #facc15;
}

button.light {
  background: #fff;
  color: #111;
  border: none;
}
/* ======= PRICING SECTION ======= */
.pricing-section {
  padding: 60px 40px;
  background: #fff;
   text-align: center;
}

.pricing-header {
  text-align: center;
  margin-bottom: 40px;
}

.pricing-header h2 {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.pricing-header p {
  color: #666;
  font-size: 16px;
}

.pricing-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 20px 0 40px 0;
}

.pricing-tabs li {
  background: #f2f2f2;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
}

.pricing-tabs li:hover {
  background: #ddd;
}

.pricing-hub {
  text-align: center;
  margin-bottom: 40px;
}

.pricing-hub h3 {
  font-size: 20px;
  font-weight: bold;
}

.pricing-hub p {
  color: #444;
  font-size: 15px;
  margin-bottom: 10px;
}

.hub-link {
  color: #007bff;
  font-weight: 500;
  text-decoration: underline;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}

.pricing-card {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 20px;
  background: #fdfdfd;
  text-align: center;
}

.pricing-card h4 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}

.pricing-card .price {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.price-yearly {
  display: block;
  font-size: 14px;
  color: #888;
}

.pricing-card .contacts {
  font-size: 14px;
  color: #444;
  margin-bottom: 10px;
}

.pricing-card .notes {
  font-size: 13px;
  color: #777;
  margin-bottom: 15px;
}

.buy-btn {
  background: black;
  color: white;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.buy-btn:hover {
  background: #333;
}



.pricing-header {
  margin-bottom: 30px;
}

.pricing-toggle {
  display: inline-flex;
  border: 1px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 30px;
}

.pricing-toggle button {
  padding: 10px 20px;
  border: none;
  background: #eee;
  cursor: pointer;
}

.pricing-toggle button.active {
  background: #000;
  color: #fff;
}

.pricing-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.pricing-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 30px 20px;
  width: 300px;
  text-align: left;
  box-shadow: 0 0 6px rgba(0,0,0,0.05);
}

.pricing-card.highlight {
  border: 2px solid #000;
}

.pricing-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.pricing-card .price {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.pricing-card .savings,
.pricing-card .bonus {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.pricing-card ul li {
  margin-bottom: 8px;
}

.pricing-card button {
  background: #000;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.pricing-single-plan {
  padding: 60px 20px;
  background-color: #fff;
  text-align: center;
  font-family: sans-serif;
}

.pricing-header .pricing-title {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

.pricing-header .pricing-subtitle {
  color: #555;
  margin-bottom: 40px;
  font-size: 16px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.feature-item {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

.feature-icon {
  font-size: 24px;
  display: block;
  margin-bottom: 10px;
}

.feature-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 5px;
}

.feature-description {
  font-size: 14px;
  color: #666;
}

.plan-card {
  background: #f0f4ff;
  padding: 30px;
  border-radius: 10px;
  max-width: 400px;
  margin: 0 auto;
}

.plan-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.plan-price {
  font-size: 20px;
  color: #333;
  margin-bottom: 10px;
}

.plan-description {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}
.contact-form-section {
  padding: 60px 20px;
  background-color: #fff;
  font-family: sans-serif;
  text-align: center;
}

.contact-header .contact-title {
  font-size: 28px;
  font-weight: bold;
  color: #000;
  margin-bottom: 10px;
}

.contact-description {
  color: #555;
  font-size: 14px;
  margin-bottom: 30px;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
  font-family: inherit;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #444;
  justify-content: start;
  text-align: left;
}

.contact-form .btn-filled {
  background-color: black;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  font-size: 16px;
}
.contact-info-section {
  text-align: center;
  padding: 60px 20px;
  background-color: #fff;
}

.contact-profile-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 20px;
}

.contact-heading {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.contact-description {
  font-size: 14px;
  color: #666;
  max-width: 600px;
  margin: 0 auto 40px;
  white-space: pre-line;
}

.contact-columns {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.contact-column {
  flex: 1;
  min-width: 240px;
  max-width: 300px;
  text-align: left;
}

.contact-icon {
  font-size: 24px;
  display: block;
  margin-bottom: 10px;
}

.contact-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 6px;
}

.contact-text {
  font-size: 14px;
  color: #444;
  white-space: pre-line;
}
.contact-split-section {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
}

.contact-left-panel {
  flex: 1;
  background-size: cover;
  background-position: center;
  color: white;
  padding: 40px;
}

.contact-right-panel {
  flex: 1;
  background-color: #ffffff;
  padding: 60px 40px;
}

.contact-section {
  margin-bottom: 30px;
}

.section-heading {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.section-content {
  white-space: pre-line;
  color: #eee;
}

.section-highlight {
  color: #00ff99;
  font-weight: 500;
  white-space: pre-line;
}

.form-heading {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.contact-form textarea {
  height: 120px;
  resize: vertical;
}

.contact-form .btn-filled {
  background-color: #00c981;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.contact-page {
  font-family: sans-serif;
}

.hero-banner {
  background-size: cover;
  background-position: center;
  padding: 80px 20px;
  color: #fff;
  text-align: center;
}

.contact-three-column {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 60px 20px;
  justify-content: space-between;
  background: #fff;
}

.contact-map {
  flex: 1;
  min-width: 280px;
  border: none;
  height: 300px;
}

.contact-info {
  flex: 1;
  min-width: 280px;
}

.contact-form {
  flex: 1;
  min-width: 280px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.contact-form textarea {
  resize: vertical;
  height: 100px;
}

.contact-form button {
  background-color: #007bff;
  color: #fff;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.contact-getintouch {
  background-color: #084c61;
  color: #ffffff;
  padding: 60px 20px;
  text-align: center;
}

.contact-getintouch h2 {
  font-size: 28px;
  margin-bottom: 30px;
}

.contact-getintouch .columns {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}

.contact-getintouch .column {
  flex: 1 1 250px;
  text-align: left;
}

.contact-getintouch .column h4 {
  margin-top: 10px;
  font-size: 18px;
}

.contact-getintouch .column p {
  font-size: 14px;
  margin: 4px 0;
}

.contact-messageus {
  background-color: #ffffff;
  padding: 60px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: flex-start;
}

.contact-messageus .left-column {
  flex: 1 1 300px;
}

.contact-messageus .left-column h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.contact-messageus .left-column p {
  font-size: 14px;
  color: #444;
  margin-bottom: 15px;
}

.contact-messageus .form {
  flex: 1 1 400px;
}

.contact-messageus form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-messageus form input,
.contact-messageus form textarea {
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.contact-messageus form button {
  background-color: #c3d500;
  color: #000;
  border: none;
  padding: 12px;
  border-radius: 4px;
  cursor: pointer;
}


</style>
<header class="navbar-1"><div class="logo-1" ref="logo-1">Logo</div><ul class="nav-1" ref="nav-1"><li><a href="#">Home Page</a></li><li><a href="#">About Us</a></li><li><a href="#">Services</a></li><li><a href="#">More Info ▾</a></li></ul><button class="join-btn" ref="join-btn">Join</button></header>
<header class="navbar-1"><div class="logo-1" ref="logo-1">Logo</div><ul class="nav-1" ref="nav-1"><li><a href="#">Home Page</a></li><li><a href="#">About Us</a></li><li><a href="#">Services</a></li><li><a href="#">More Info ▾</a></li></ul><button class="join-btn" ref="button-join">Join</button></header><section class="hero-section"><h1 class="hero-heading" ref="hero-heading">Build Your Dream Project with Ease</h1><p class="hero-paragraph" ref="hero-paragraph">Our mission is to empower creators by providing a seamless platform for project development.
Sign up today and turn your ideas into reality!</p><div class="button-group"><button class="join-btn" ref="button-signup">Sign Up</button><button class="join-btn" ref="button-learn">Learn More</button></div></section><div class="image-grid"><div class="image-tile" ref="tile-1"><img src="placeholder.png" alt="image"/></div><div class="image-tile" ref="tile-2"><img src="placeholder.png" alt="image"/></div><div class="image-tile" ref="tile-3"><img src="placeholder.png" alt="image"/></div><div class="image-tile" ref="tile-4"><img src="placeholder.png" alt="image"/></div><div class="image-tile" ref="tile-5"><img src="placeholder.png" alt="image"/></div><div class="image-tile" ref="tile-6"><img src="placeholder.png" alt="image"/></div></div>
⚠️ No response received from HTML API.
<section class="testimonial-landing orange"><h2 class="landing-title">What Our Client Say?</h2><p class="landing-description">Here’s what our customers think about our product and service quality.</p><div class="testimonial-grid"><div class="testimonial-box"><blockquote>Exceptional platform. Very intuitive UI and great results.</blockquote><p class="author-name">— Jeff Stroman</p></div><div class="testimonial-box highlight"><blockquote>This service changed the way we approach marketing...</blockquote><p class="author-name">— Ning Asih</p></div></div></section>
<section style="background:#0d2550; color:white; font-family:sans-serif; padding:40px;"><div style="display:flex; gap:40px; flex-wrap:wrap;"><div style="flex:1; min-width:300px;"><h2>Let's Talk</h2><p>Every project starts with a chat. Joven leads our client conversations and will be happy to discuss your project. He will also pull in the right people from the team when needed.</p><a href="#" style="display:inline-block; padding:10px 20px; background:#00d26a; color:white; font-weight:bold; text-decoration:none; border-radius:4px; margin-top:10px;">Tell us about your project</a></div><div style="flex:1; min-width:300px;"><p><strong>Email:</strong> <a href="mailto:hello@buuuk.com" style="color:#00aaff;">hello@buuuk.com</a></p><p><strong>Phone:</strong> <a href="tel:+6598753984" style="color:#00aaff;">(+65) 98753984</a></p><p><strong>Address:</strong><br/>1 Paya Lebar Link<br/>#04-01, Paya Lebar Quarter<br/>Singapore, 408533<br/></p><div class="social-icons" style="margin-top:20px;"><a href="#" style="margin-right:10px; color:inherit;">🐦</a><a href="#" style="margin-right:10px; color:inherit;">📘</a><a href="#" style="margin-right:10px; color:inherit;">📷</a><a href="#" style="margin-right:10px; color:inherit;">🔗</a></div></div></div></section><footer style=""></footer>
⚠️ No response received from HTML API.
<section class="feature-grid-section"><p class="hero-label"Tagline>Tagline</p><h2 class="hero-heading"Medium length section heading goes here>Medium length section heading goes here</h2><p class="hero-description"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p><div class="feature-grid"><div class="feature-card"><img class="card-img" src="placeholder.png" alt="Feature 1" src="placeholder.png" alt="Feature 1" /><h3 class="card-title"Medium length section heading goes here>Medium length section heading goes here</h3><p class="card-description"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.</p></div><div class="feature-card"><img class="card-img" src="placeholder.png" alt="Feature 2" src="placeholder.png" alt="Feature 2" /><h3 class="card-title"Medium length section heading goes here>Medium length section heading goes here</h3><p class="card-description"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.</p></div><div class="feature-card"><img class="card-img" src="placeholder.png" alt="Feature 3" src="placeholder.png" alt="Feature 3" /><h3 class="card-title"Medium length section heading goes here>Medium length section heading goes here</h3><p class="card-description"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.</p></div></div><div class="cta-buttons"><a class="btn-filled" href="#"Button><a href="#">Button</a><a class="btn-outlined" href="#"Button><a href="#">Button</a></div></section> (see https://g.co/ng/security#xss)