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 style="background:white; borderBottom:1px solid #e5e7eb; padding:16px 40px; fontFamily:sans-serif; "><div style="font-weight:bold; font-size:20px;">Logo</div><ul style="display:flex; gap:20px; list-style:none"><li><a href="#">Link One</a></li><li><a href="#">Link Two</a></li><li><a href="#">Link Three</a></li><li><a href="#">Link Four</a></li></ul><a href="#" style="background:white;color:black;padding:8px 16px;border:1px solid black;text-decoration:none; margin-left:10px;">Button</a><a href="#" style="background:black;color:white;padding:8px 16px;border:none;text-decoration:none; margin-left:10px;">Button</a></nav>
<section class="header-section"><section class="class">hero-header</section><section class="heading">Build Your Dream Project with Ease</section><section class="subheading">Our mission is to empower creators...</section><section class="buttons"><section class="class">cta-buttons</section><section class="items">Sign UpLearn More</section></section></section>
<section class="featuresection"><section class="class">feature-list-section</section><section class="heading"><section class="class">feature-heading</section><section class="text">Long heading is what you see here in this feature section</section></section><section class="features"><section class="icon"><section class="src">icon.svg</section><section class="alt">Icon</section></section><section class="title">Long heading is what you see here in this feature section</section><section class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</section><section class="button"><section class="label">Button</section><section class="arrow">true</section><section class="class">text-button</section></section><section class="icon"><section class="src">icon.svg</section><section class="alt">Icon</section></section><section class="title">Long heading is what you see here in this feature section</section><section class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</section><section class="button"><section class="label">Button</section><section class="arrow">true</section><section class="class">text-button</section></section><section class="icon"><section class="src">icon.svg</section><section class="alt">Icon</section></section><section class="title">Long heading is what you see here in this feature section</section><section class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</section><section class="button"><section class="label">Button</section><section class="arrow">true</section><section class="class">text-button</section></section></section></section>
<section class="testimonial-section simple-testimonial light"><div class="testimonial-logo"><img src="webflow-logo.png" alt="Webflow" /></div><blockquote class="testimonial-quote">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.</blockquote><div class="testimonial-author"><img class="author-img" src="author.jpg" alt="author" /><div class="author-details"><strong>Name Surname</strong><br/><span>Position, Company name</span></div></div></section>
<footer style="background:#111; color:white; padding:40px;"><div style="margin-bottom:20px;"><h2>LOGO</h2><p>SOLOGAN COMPANY</p></div><div style="display:flex; gap:40px; flex-wrap:wrap;"><div class="link-col"><p><a href="#" style="color:inherit;">Weebly Themes</a></p><p><a href="#" style="color:inherit;">Pre-Sale FAQs</a></p><p><a href="#" style="color:inherit;">Submit a Ticket</a></p></div><div class="link-col"><p><a href="#" style="color:inherit;">Services</a></p><p><a href="#" style="color:inherit;">Theme Tweak</a></p></div><div class="link-col"><p><a href="#" style="color:inherit;">Showcase</a></p><p><a href="#" style="color:inherit;">Widgetkit</a></p><p><a href="#" style="color:inherit;">Support</a></p></div><div class="link-col"><p><a href="#" style="color:inherit;">About Us</a></p><p><a href="#" style="color:inherit;">Contact Us</a></p><p><a href="#" style="color:inherit;">Affiliates</a></p><p><a href="#" style="color:inherit;">Resources</a></p></div></div><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><a href="#" style="margin-right:10px; color:inherit;">📦</a></div><p style="margin-top:20px; font-size:12px;">©Copyright. All rights reserved.</p></footer>
⚠️ No response received from HTML API.
⚠️ No response received from HTML API. (see https://g.co/ng/security#xss)