body {color: #fff;}
button { cursor: pointer;font-family: Inter, sans-serif;transition: all .3s;}
.fs-40 {font-size: 40px;}
.py-60 { padding-top: 60px; padding-bottom: 50px;} .pt-50 { padding-top: 50px;} .pt-60 { padding-top: 60px;} .pb-50 { padding-bottom: 50px;} .pb-60 { padding-bottom: 60px;} .mb-10 { margin-bottom: 10px; } .pb-40 { padding-bottom: 40px;} .pb-30 { padding-bottom: 30px; }
.hero-section {  position: relative;background: linear-gradient(180deg, #00652F 0%, #009944 100%);  padding: 50px 0;overflow: hidden;} .hero-title { margin-bottom: 20px; } .hero-section:before { content: ""; background: radial-gradient(circle at 100% 0, #ffcf1826, #0000 60%); width: 50%; height: 100%; position: absolute; top: 0; right: 0; } .hero-container { grid-template-columns: 1fr; align-items: center; gap: 20px; max-width: 1200px; margin: 0 auto;padding: 0 ; display: grid; } .hero-content { z-index: 2; position: relative; } .hero-tagline { color: #ffcf18;letter-spacing: .5px;margin-bottom: 16px;font-size: .875rem;font-weight: 500; } .hero-buttons { flex-wrap: wrap;gap: 16px;margin-bottom: 12px;margin-top: 20px;display: flex; } .hero-btn-primary { background-color: #ffcf18 !important;color: #000 !important;border: none;border-radius: 8px;padding: 14px 32px;font-size: 16px;font-weight: 600; } .hero-btn-primary:hover { background-color: #e6ba00;transform: translateY(-2px); } .hero-btn-secondary { color: #fff !important;border: 2px solid #fff; background-color: #0000 !important;border-radius: 8px;padding: 14px 32px; font-size: 16px; font-weight: 600; } .hero-btn-secondary:hover { background-color: #fff;color: #00652f; } .hero-features-list { flex-direction: column; gap: 12px;list-style: none;display: flex;margin-top: 20px; } .hero-feature-item { align-items: flex-start;gap: 12px;display: flex; } .hero-feature-icon { width: 24px;height: 24px;color: #ffcf18;flex-shrink: 0;margin-top: 2px; } .hero-feature-text { color: #fff;font-size: 1rem;line-height: 1.6; } 
.fashion-brands {  padding: 48px 20px 20px; max-width: 1200px;margin: 0 auto;text-align: center; } .fashion-brands h2 {  font-size: clamp(1.75rem, 4vw, 2.75rem);color: #00652F;font-weight: 600;margin-bottom: 10px;  } .fb-grid { display: grid;grid-template-columns: 1fr 1fr;gap: 30px;align-items: end;margin-top: 30px; } .fb-card { border: 1px solid #00652F;padding: 40px 20px 0;text-align: left;height: 100%; } .fb-badge.green,.fb-badge.yellow {  color: #fff;font-size: 18px;font-weight: 600;position: absolute;left: 0;right: 0;text-align: center;margin: 0 auto;top: 20px; } .fb-card ul {  list-style: none;padding: 0;margin-top: 30px; } .fb-card li { display: flex;align-items: flex-start;gap: 10px;margin-bottom: 14px;font-size: 16px; color: #4A5565;text-align: left; } .fashion-brands p {  color: #6b7280;text-align: center;max-width: 800px;margin-left: auto;margin-right: auto;font-size: 1.125rem; } .icon {  margin-top: 0; flex-shrink: 0; } .fb-inner-list .icon { width: 12px;display: flex;height: 12px;align-items: center;justify-content: center;margin-top: 6px; } .fb-cta {  margin-top: 40px;display: inline-block;background: #FFCF18;padding: 10px 22px;color: #000;border-radius: 20px; font-size: 14px; font-weight: 600; } .fb-inner { display: grid;grid-template-columns: 1fr 3fr;gap: 10px;margin-top: 8px;
  align-items: end; } .fb-card.green { border: 1px solid #00652F;padding: 40px 30px 0;text-align: left; } .fb-badge { position: relative;max-width: 240px;margin-left: 80px; } .fb-inner-img img {  height: 250px; object-fit: contain;  width: 100%;object-position:bottom; } 
.why-different-container {  max-width: 1200px;  margin: 0 auto;  } .why-different-heading { color: #00652f;text-align: center;margin-bottom: 10px;font-size: clamp(1.75rem, 4vw, 2.75rem);font-weight: 700;line-height: 1.3;  } .why-subheading,.why-different-container > p {  color: #6b7280;text-align: center;max-width: 800px;margin-left: auto;margin-right: auto;font-size: 1.125rem; }  .why-subheading {  margin-bottom: 60px;  } .why-different-container > p {  margin-bottom: 40px;  } .why-different-cards-wrapper {  grid-template-columns: repeat(2, 1fr);gap: 16px;  display: grid;  } .why-different-card { color: #fff;padding: 20px; }  .why-different-card.green {  border: 2px solid #00652f;color: #000; } .why-different-card.yellow {  border: 2px solid #ffcf18;  color: #00652f;  } .why-different-card.full-width {   grid-column: 1 / -1;  }  .why-different-card-title {   margin-bottom: 5px;  font-size: 1.5rem;  font-weight: 700;line-height: 1.3; } .why-different-card-text {  opacity: .95;font-size: 1rem;line-height: 1.6; }  .why-different-card.yellow .why-different-card-text {  opacity: .85; } .why-different-mockup-wrapper {  justify-content: center;align-items: center;padding: 40px;display: flex;position: relative; } .why-different-frame {  border: 3px solid #ffcf18;z-index: 0;border-radius: 16px;width: 90%;height: 90%;position: absolute;top: 20px;right: 20px; } .why-different-phones-container {  z-index: 1;justify-content: center;gap: 20px;display: flex;position: relative; }  .why-different-phone {background-color: #1a1a1a;border-radius: 32px;width: 220px;padding: 12px;box-shadow: 0 20px 50px #0000004d; } .why-different-phone.offset { margin-top: 30px; } .why-different-phone-screen { background-color: #fff;border-radius: 24px;position: relative;overflow: hidden; }  .why-different-phone-notch { z-index: 10;background-color: #1a1a1a;border-radius: 0 0 20px 20px;width: 120px;height: 28px;position: absolute;top: 0;left: 50%;transform: translateX(-50%); } .why-different-phone-screen img {  aspect-ratio: 9 / 19.5;object-fit: cover;width: 100%;display: block; } .why-different-section { overflow: hidden;} .why-different-container .sec-head > p { color: #6b7280; text-align: center; font-size: 1.125rem; margin-bottom: 30px; }
.cta-banner-section { background: #00652F;padding: 60px 24px; } .cta-banner-container { max-width: 1200px;margin: 0 auto; } .cta-banner-heading { color: #fff; margin-bottom: 12px;font-size: 2rem;font-weight: 700; } .cta-banner-text { color: #ffffffe6;margin-bottom: 24px;font-size: 1.125rem; } .cta-banner-btn-primary {  background-color: #ffcf18 !important;color: #000 !important;border: none; border-radius: 8px; padding: 14px 32px;font-size: 16px;font-weight: 600; } .cta-banner-btn-primary:hover { background-color: #e6ba00 !important;transform: translateY(-2px); } .cta-banner-btn-secondary { color: #fff !important;border: 2px solid #fff !important;background-color: #0000 !important;border-radius: 8px; padding: 14px 32px;font-size: 16px; font-weight: 600; } .cta-banner-btn-secondary:hover { background-color: #fff !important;color: #00652f !important; }
.grow-community { padding: 60px 0;} .grow-community-wrap { display: grid;grid-template-columns: 1fr 1fr;gap: 40px; align-items: center;} .grow-community-content h2 { font-size: clamp(1.75rem, 4vw, 2.75rem);line-height: 1.25; color: #00652F;margin-bottom: 30px;font-weight: 600;}
.grow-community-content p { font-size: 16px; color: #4A5565;margin-bottom: 20px;} .grow-community-boxes { display: grid;grid-template-columns: repeat(2, 1fr);gap: 14px;} .community-box { background: #FFCF18;border-radius: 20px;padding: 20px;display: flex;align-items: center;gap: 14px;flex-direction: column;justify-content: center;} .community-box img { width: 35px;height: 35px;flex-shrink: 0;} .community-box span { font-size: 14px;line-height: 1.5;color: #00652F;text-align: center;} .grow-community-image img { max-width: 100%;height: 630px;object-fit: contain;margin: 0 auto;} .grow-img { background: #00652F; border-radius: 50%; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center;} .community-box-v2 { background: #FFCF18; border-radius: 20px; padding: 20px; display: flex; gap: 14px; flex-direction: column;} .community-box-v2 span { font-size: 14px; line-height: 1.5; color: #00652F;}
.stay-top-mind-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;} .stay-top-mind-content h2 {  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.25; color: #00652F; margin-bottom: 16px; font-weight: 600;} .stay-top-mind-content p { font-size: 16px;color: #4A5565;margin-bottom: 20px;} .stay-top-mind-boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;} .mind-box { background: #00652F; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; align-items: center;} .mind-box img { width: 50px; height: 50px;} .mind-box span { color: #ffffff; font-size: 14px; line-height: 1.5; text-align: center;}
.automatic-login-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;} .automatic-login-image img { max-width: 100%; height: 600px; margin: 0 auto;} .automatic-login-content h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.25; color: #00652F; margin-bottom: 16px; font-weight: 600;} .automatic-login-content p {  font-size: 16px;  color: #4A5565;  margin-bottom: 20px;} .automatic-login-boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;} .auto-box { background: #00652F; border-radius: 16px; padding: 22px; display: flex; flex-direction: column; gap: 14px; align-items: center;} .auto-box img { width: 35px; height: 35px;} .auto-box span { color: #ffffff; font-size: 14px; line-height: 1.5; text-align: center;}
.seamless-onboarding { padding: 60px 0;} .onboarding-title { font-size: clamp(1.75rem, 4vw, 2.75rem);line-height: 1.25;color: #00652F;margin-bottom: 16px;font-weight: 600;margin-bottom: 30px;} .onboarding-boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;} .onboarding-box { background: #00652F;border-radius: 16px;padding: 26px 22px;text-align: left;} .onboarding-box img { width: 36px; height: 36px; margin-bottom: 14px;} .onboarding-box h3 { color: #FFCF18; font-size: 18px; margin-bottom: 8px;} .onboarding-box p { color: #ffffff; font-size: 15px; line-height: 1.6;}
.why-different-card,.community-box,.community-box-v2,.auto-box,.onboarding-box,.mind-box { transition: transform 0.3s ease; } .why-different-card:hover,.community-box:hover,.community-box-v2:hover,.auto-box:hover,.onboarding-box:hover,.mind-box:hover { transform: translateY(-5px); } .latest-blog h2, .latest-blog p {  margin-bottom: 10px; }
.container {  max-width: 1200px;margin: 0 auto;padding: 0; } .latest-blog .container { max-width: 1280px;margin: 0 auto;padding: 0 1rem; }
@media (min-width: 768px) {
    .hero-container {  grid-template-columns: 5fr 4fr; } .why-different-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 991px) {
    .onboarding-boxes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .hero-section {  padding: 30px 20px; } .image-holder img { max-width: 320px; } .hero-section:before { background: unset; } .hero-feature-item { text-align: left; } .hero-buttons {  margin-bottom: 0; }  .fs-40 {  font-size: 28px;  } .cta-banner-section { padding: 45px 20px 50px; } .pt-60 { padding-top: 30px; } .cta-content p {  margin-bottom: 0; } .faq-section h2,.cta-content h2,.latest-blog .subheading {  margin-bottom: 8px; } .faq-section { padding-top: 35px;  } .py-60 {  padding-top: 30px;  padding-bottom: 30px; } .fb-inner-img img {  height: 100%;width: 90px; } .fb-grid,.iwt-wrap { grid-template-columns: 1fr;gap: 12px; }  .fashion-brands h2 { font-size: 28px; } .fashion-brands { padding: 30px 20px; } .fashion-brands h2 { font-size: 28px;margin-bottom: 25px; } .fb-card {  padding: 15px 15px 0; }  .fb-badge { max-width: 100%;  margin-left: 0;  } .fb-badge.gr-badge { background: #00652F; border-radius: 12px;} .fb-badge.yl-badge { background: #FFCF18; border-radius: 12px;} .fb-badge.green,.fb-badge.yellow { left: 0;transform: unset;right: 0; top: 15px; font-size: 18px; }  .fb-inner-list {  margin: 0 0 20px; } .fb-inner { grid-template-columns: auto 2fr; gap: 10px; align-items: end; } .fb-badge svg { width: 200px; height: 50px; } .fb-card ul {   margin-top: 0; } .fb-card li {  margin-bottom: 4px; } .why-different-container > P { MARGIN-BOTTOM: 20px; } .why-different-cards-wrapper,.grow-community-boxes,.grow-community-wrap,.stay-top-mind-wrap,.stay-top-mind-boxes,.automatic-login-wrap,.automatic-login-boxes,.onboarding-boxes { grid-template-columns: 1fr; } .why-different-card.full-width {   grid-column: 1; } .why-different-phone { width: 180px;  } .why-different-section { padding-left: 20px;  padding-right: 20px; } .why-different-mockup-wrapper {  padding: 0;  } .why-different-cards-wrapper .why-different-card:nth-child(3) { order: 4;  }  .why-different-section {  padding-bottom: 45px; } .pb-60 { padding-bottom: 45px; } .fb-cta { margin-top: 15px; } .grow-community { padding: 40px 0 20px;} .grow-community-image img,.automatic-login-image img {  height: auto;} .grow-community-wrap,.automatic-login-wrap {  gap: 20px;} .stay-top-mind-wrap { gap: 8px;} .grow-community-content h2 { margin-bottom: 10px;}
    .order-2 { order: 2;} .seamless-onboarding { padding: 35px 0 45px;} .grow-community-v2 { padding: 40px 0 35px;} .stay-top-mind-content p {  margin-bottom: 5px;}
  }

  @media (max-width: 480px) {
    .why-different-phones-container {  max-width: 100%; margin: 0 auto; } .why-different-cards-wrapper { order: 2; }
} 
