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;}
/*Hero Section Start*/
.hero-section { position: relative;background: linear-gradient(135deg, #00652f 0%, #094 100%);padding: 50px 0;overflow: hidden;} .hero-container {  z-index: 0; } .hero-container:after { position: absolute;content: '';width: 100%;max-width: 490px; z-index: -1; background: linear-gradient(315deg, #FFCF18 35.08%, #066A30 88.74%); height: 490px;opacity: 50%; border-radius: 50%; right: -120px; bottom: -126px; } .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: 32px;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; } .banner-left-mockup { position: absolute; top: 0; left:0; } .banner-top-image { position: absolute; right: 0; top: 0;max-width: 160px;} .banner-bottom-mockup { position: absolute;bottom: 0; left: 0;right: 0; margin: 0 auto; text-align: center; transform: translate(10%, 10px); max-width: 170px;height: 143px;} .banner-secondary { position: absolute; bottom: -76px; max-width: 235px;z-index: -1; right: 56px; } .hero-mockup-container { position: relative;z-index: 1; }
/*Hero Section End*/

/* cta banner section Start */
.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; }
/* cta banner section End */

/* Fashion Brands Start */
.fashion-brands {  padding: 80px 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: 30px;font-weight: 600;position: absolute;left: 0;right: 0;text-align: center;margin: 0 auto;top: 12px; } .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; } .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: 255px; object-fit: contain;  width: 100%; } .fb-inner-img { margin-bottom: -10px; }
  /* Fashion Brands End */

/* why different Start */
.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 End */

/* Image with Text Start */
.iwt-left h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.25;color: #00652F;margin-bottom: 16px;font-weight: 600;} .iwt-desc { font-size: 16px; color: #4A5565; max-width: 480px;margin-bottom: 20px; } .iwt-wrap { display: grid; grid-template-columns: 1.1fr 1fr;gap: 50px;align-items: center; } .iwt-list { list-style: none;padding: 0;margin: 0; } .iwt-list li {  display: flex; gap: 10px;margin-bottom: 10px;font-size: 15px;color: #4A5565; } .iwt-list .icon { flex-shrink: 0;margin-top: 2px; } .iwt-image-wrap { border-radius: 20px;text-align: center; } .iwt-image-wrap img {  max-width: 100%;height: auto; }
/* Image with Text End */

/* Tech Stack Start */
.tech-stack-sec { padding: 60px 20px 70px;text-align: center; } .tech-stack-sec .fb-cta { margin-top: 0;margin-bottom: 20px; } .tech-stack-container { max-width: 1200px; margin: 0 auto; } .tech-title { color: #00652f;text-align: center; margin-bottom: 10px;font-size: clamp(1.75rem, 4vw, 2.75rem);font-weight: 700; line-height: 1.3; } .tech-subtitle { color: #6b7280; text-align: center; font-size: 1.125rem; } .tech-stack-wrap { background: #facc15; padding: 32px 40px; border-radius: 30px; margin-top: 20px; display: grid;grid-template-columns: repeat(4, 1fr);gap: 16px; } .tech-item { background: #ffffff; border-radius: 20px; padding: 14px 16px; display: flex; align-items: center; gap: 10px; height: 56px; } .tech-item img { height: 45px;width: 45px;object-fit: contain; } .tech-item span { font-size: 13px; font-weight: 500;color: #111827;text-align: left; overflow: hidden;text-overflow: ellipsis; } .tech-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); transition: 0.25s ease; }
/* Tech Stcak End */

.why-different-card,.experience-card,.custom-box,.nav-card,.checkout-card,.growth-card,.device-card { transition: transform 0.3s ease; } .why-different-card:hover,.experience-card:hover,.custom-box:hover,.nav-card:hover,.checkout-card:hover,.growth-card:hover,.device-card: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) {
    .tech-stack-wrap {  grid-template-columns: repeat(2, 1fr);  }
  }
  @media (max-width: 767px) {
    .hero-section {  padding: 30px 20px; } .image-holder img { max-width: 320px; } .hero-container:after { max-width: 415px;height: 415px;right: 0; left: 0;top: auto; bottom: -60px;margin: 0 auto; } .hero-section:before { background: unset; } .hero-feature-item { text-align: left; } .hero-buttons {  margin-bottom: 0; }  .fs-40 {  font-size: 28px;  } .banner-devices { max-width: 400px; margin: 0 auto; } .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: 40px; } .fb-inner-img img {  height: 100%;width: 90px; } .fb-grid,.iwt-wrap { grid-template-columns: 1fr;gap: 20px; }  .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.green, .fb-badge.yellow { font-size: 18px; right: auto; margin: unset; top: 10px; }  .fb-badge.green { transform: translateX(70px);  } .fb-badge.yellow {  transform: translateX(56px); } .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 { 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; }  .iwt-list li {  text-align: left; } .iwt-image-wrap {  max-width: 400px;  margin: 0 auto; } .tech-grid {margin-bottom: 0;} .tech-stack-sec {  padding: 45px 20px 40px; } .order-2 { order: 2; }  .banner-secondary { right: 0; left: 0; margin: 0 auto; } .banner-bottom-mockup {  display: none; } .fb-inner-img { margin-bottom: 0px; } .cta-content p { font-size: 16px; } .cta-content h2 { font-size: 28px; } .pb-40 { padding-bottom: 30px; }
  }


  @media (max-width: 480px) {
    .hero-container:after { max-width: 300px;height: 300px;bottom: -30px; } .banner-devices, .why-different-phones-container,.iwt-image-wrap {  max-width: 100%; margin: 0 auto; } .tech-stack-wrap { grid-template-columns: 1fr; padding: 24px; } .why-different-cards-wrapper {  order: 2; }.tech-title {   font-size: 28px; } .tech-item { height: auto; } .tech-title { font-size: 28px; margin-bottom: 10px; } .tech-item {  height: auto; padding: 10px; border-radius: 12px; } .banner-top-image { max-width: 80px; }  .banner-secondary { bottom: -20px;max-width: 100px;  }
}