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>
<nav class="mega-navbar" logo="Logo"><div class="logo-1">Logo</div><ul class="nav-1"><li><a href="#">New Releases</a></li><li><a href="#">Coming Soon</a></li><li><a href="#">Investor Pitch</a></li><li class="dropdown"><a href="#">Co-Founder Appeal</a><div class="dropdown-content"><div class="dropdown-columns"><div class="column"><h4>Page group one</h4><ul><li><span>📦</span><strong>Developer Offers</strong><p>Explore our latest investment opportunities today.</p></li><li><span>📦</span><strong>Join Us</strong><p>Connect with potential partners and investors.</p></li><li><span>📦</span><strong>Get Updates</strong><p>Stay informed about our upcoming projects.</p></li><li><span>📦</span><strong>Investor Relations</strong><p>Learn more about our financial strategies.</p></li></ul></div><div class="column"><h4>Page group two</h4><ul><li><span>📦</span><strong>Page Five</strong><p>Lorem ipsum dolor sit amet consectetur elit</p></li><li><span>📦</span><strong>Page Six</strong><p>Lorem ipsum dolor sit amet consectetur elit</p></li><li><span>📦</span><strong>Page Seven</strong><p>Lorem ipsum dolor sit amet consectetur elit</p></li><li><span>📦</span><strong>Page Eight</strong><p>Lorem ipsum dolor sit amet consectetur elit</p></li></ul></div><div class="column"><h4>Featured from Blog</h4><ul><li><strong>Article Title</strong><p>Lorem ipsum dolor sit amet consectetur elit</p><a href="#">Read more</a></li><li><strong>Article Title</strong><p>Lorem ipsum dolor sit amet consectetur elit</p><a href="#">Read more</a></li><div class="footer-link"><a href="#">See all articles →</a></div></ul></div></div></div></li></ul><div class="navbar-actions"><button class="join-btn">Join</button><button class="join-btn primary">Apply</button></div></nav>
<section class="hero-section centered-hero" style="background:#fff; font-family:sans-serif; text-align:center; padding: 60px 20px;"><h1 style="font-size:36px; font-weight:bold; color:#000000;">Short heading here</h1><p style="font-size:16px; color:#333333; max-width:600px; margin:0 auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p><div class="cta-buttons" style="margin-top: 30px; display: flex; justify-content: center; gap: 10px;"><a href="#" style="padding: 10px 20px; background:#000000; color:#ffffff; border:none; text-decoration:none; border-radius:4px; font-weight:500;">Button</a><a href="#" style="padding: 10px 20px; background:#ffffff; color:#000000; border:1px solid #000000; text-decoration:none; border-radius:4px; font-weight:500;">Button</a></div></section>
<section class="hero-centered"><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="hero-buttons"><a class="btn-filled" href="#"Button><a href="#">Button</a><a class="btn-outlined" href="#"Button><a href="#">Button</a></div><img class="hero-image" src="placeholder.png" alt="Placeholder" src="placeholder.png" alt="Placeholder" /></section>
<section class="testimonialgrid"><section class="testimonial-section"><h2 class="testimonial-heading"Customer testimonials>Customer testimonials</h2><p class="testimonial-subtitle"Lorem ipsum dolor sit amet, consectetur adipiscing elit.>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class="testimonial-grid"><div class="testimonial-card"><div class="stars"★★★★★>★★★★★</div><pLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare...>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare...</p><div class="author"><img class="avatar" src="avatar1.jpg" alt="Name Surname" src="avatar1.jpg" alt="Name Surname" /><strongName Surname>Name Surname</strong><pPosition, Company name>Position, Company name</p></div></div><div class="testimonial-card"><div class="stars"★★★★★>★★★★★</div><pLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare...>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare...</p><div class="author"><img class="avatar" src="avatar2.jpg" alt="Name Surname" src="avatar2.jpg" alt="Name Surname" /><strongName Surname>Name Surname</strong><pPosition, Company name>Position, Company name</p></div></div><div class="testimonial-card"><div class="stars"★★★★★>★★★★★</div><pLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare...>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare...</p><div class="author"><img class="avatar" src="avatar3.jpg" alt="Name Surname" src="avatar3.jpg" alt="Name Surname" /><strongName Surname>Name Surname</strong><pPosition, Company name>Position, Company name</p></div></div></div></section></section>
<footer class="footer-1" ref="footer-1"><section class="footer-top" ref="footer-top"><div class="logo-1" ref="footer-logo">Logo</div><ul class="nav-1" ref="footer-nav"><li><a href="#">Get Started</a></li><li><a href="#">Our Services</a></li><li><a href="#">Contact Us</a></li><li><a href="#">About Us</a></li><li><a href="#">Support Center</a></li></ul><div class="footer-social" ref="footer-social"><divFacebook><div>📘 Facebook</div><divInstagram><div>📷 Instagram</div><divX><div>𝕏 X</div><divLinkedIn><div>🔗 LinkedIn</div><divYouTube><div>▶️ YouTube</div></div></section><section class="footer-bottom" ref="footer-bottom"><span© 2025 Relume. All rights reserved.>© 2025 Relume. All rights reserved.<ul class="nav-1" ref="footer-legal"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookie Settings</a></li></ul></section></footer>
⚠️ No response received from HTML API.
⚠️ No response received from HTML API. (see https://g.co/ng/security#xss)