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;}
/*Hero Section Start*/
.hero-section { background: linear-gradient(135deg, #00652f 0%, #094 100%);padding: 50px 0; } .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; }
/*Hero 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 2fr; 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: 280px;object-fit: contain; width: 100%; }
/* 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 */

/* 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 */


/* apps work  Start */
.apps-work-container {
    max-width: 1200px;
    margin: 0 auto;
    }

    .apps-work-heading {
    color: #00652f;
    margin-bottom: 24px;
    /* font-size: clamp(1.75rem, 4vw, 2.75rem); */
    font-weight: 700;
    line-height: 1.2;
    }
    .apps-work-intro {
      color: #6b7280;
      margin-bottom: 20px;
      font-size: 1.125rem;
    }
    .apps-work-container .section-header {
      margin-bottom: 30px;
    }
    .apps-work-features-list {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
    list-style: none;
    display: flex;
    }

    .apps-work-feature-item {
    align-items: flex-start;
    gap: 12px;
    display: flex;
    }

    .apps-work-bullet {
    background-color: #ffcf18;
    border-radius: 50%;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    }

    .apps-work-feature-text {
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.6;
    }

    .apps-work-btn {
    background-color: #ffcf18 !important;
    color: #000 !important;
    border: none;
    border-radius: 8px;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    }

    .apps-work-btn:hover {
    background-color: #e6ba00 !important;
    transform: translateY(-2px);
    }

    .apps-work-container .section-header h2 {
      color: #00652f;
      text-align: center;
      margin-bottom: 20px;
      font-size: clamp(1.75rem, 4vw, 2.75rem);
      font-weight: 700;
      line-height: 1.3;
    }
    .apps-work-container .section-header p {
        color: #6b7280;
        text-align: center;
        font-size: 1.125rem;
    }
    .apps-work-visual {
        justify-content: center;
        align-items: center;
        display: flex;
        position: relative;
    }
    .app-work-wrapper {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .apps-work-section {
      padding-bottom: 60px;
    }

    .apps-work-yellow-blob {
    background-color: #ffcf18;
    z-index: 0;
    opacity: .9;
    border-radius: 150px;
    width: 300px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    .apps-work-analytics-card {
    background-color: #fff;
    z-index: 2;
    border-radius: 12px;
    min-width: 160px;
    padding: 16px 20px;
    position: absolute;
    box-shadow: 0 4px 20px #0000001a;
    }

    .apps-work-analytics-card.top-left {
    top: 40px;
    left: 0;
    }

    .apps-work-analytics-card.top-right {
    top: 40px;
    right: 0;
    }

    .apps-work-analytics-card.bottom-left {
    bottom: 40px;
    left: 20px;
    }

    .apps-work-card-amount {
    color: #00652f;
    font-size: 1.5rem;
    font-weight: 700;
    }

    .apps-work-card-change {
    margin-top: 4px;
    font-size: .875rem;
    }

    .apps-work-card-change.positive {
    color: #10b981;
    }

    .apps-work-card-change.negative {
    color: #ef4444;
    }

    .apps-work-card-label {
    color: #9ca3af;
    margin-top: 4px;
    font-size: .75rem;
    }

    .apps-work-phone {
    z-index: 1;
    background-color: #1a1a1a;
    border-radius: 32px;
    padding: 12px;
    position: absolute;
    box-shadow: 0 25px 50px #0000004d;
    }

    .apps-work-phone.left {
    width: 200px;
    top: 50%;
    left: 50px;
    transform: translateY(-50%)rotate(-5deg);
    }

    .apps-work-phone.right {
    width: 220px;
    top: 50%;
    right: 30px;
    transform: translateY(-50%)rotate(5deg);
    }

    .apps-work-phone-screen {
    background-color: #fff;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    }

    .apps-work-phone-notch {
    z-index: 10;
    background-color: #1a1a1a;
    border-radius: 0 0 16px 16px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    }

    .apps-work-phone.left .apps-work-phone-notch {
    width: 100px;
    height: 24px;
    }

    .apps-work-phone.right .apps-work-phone-notch {
    width: 110px;
    height: 26px;
    }

    .apps-work-phone-screen img {
    aspect-ratio: 9 / 19.5;
    object-fit: cover;
    width: 100%;
    display: block;
    }
  
    /* apps work  End */
/* Tech Stack Start */
.tech-stack-section { padding: 60px 20px;text-align: center; } .tech-stack-section .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; white-space: nowrap; 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 */

    /* VIP Collection Start */
    .vip-collection {
      padding: 60px 20px 0;
    }
    .vip-container {
      max-width: 1200px;
      margin: auto;
    }
    .vip-wrapper {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 14px;
      align-items: center;
    }
    .vip-header { margin-bottom: 30px; }
    .vip-header h2 {
        color: #00652f;
        margin-bottom: 10px;
        font-size: clamp(1.75rem, 4vw, 2.75rem);
        font-weight: 700;
        line-height: 1.2;
    }
    .vip-subtitle {
        color: #6b7280;
        font-size: 1.125rem;
    }
    .vip-tabs {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .vip-tab {
      text-align: left;
      padding: 20px 30px;
      border-radius: 15px;
      border: 2px solid #FFCF18;
      background: #fff;
      cursor: pointer;
      transition: 0.2s;
    }
    .vip-tab h3 {
      font-size: 22px;
      margin: 0 0 4px;
      color: #00652F;
      font-weight: 700;
    }
    .vip-tab p {
      font-size: 14px;
      margin: 0;
      color: #4A5565;
    }
    .vip-tab.active {
      background: #00652F;
      border: 2px solid #00652F;
    }
    .vip-right {
      position: relative;
    }
    .vip-img {
      display: none;
      max-width: 100%;
    }
    .vip-tabs button.active {
        background: #00652F;
    }
    .vip-tab.active h3{
        color: #FFCF18;
    }
    .vip-tab.active p {
        color: #fff;
    }
    .vip-img.active {
      display: block;
    }
    /* VIP Collection End */
.vip-tab,.why-different-card { transition: transform 0.3s ease; } .vip-tab:hover,.why-different-card:hover { transform: translateY(-5px); } .latest-blog h2, .latest-blog p {  margin-bottom: 10px; }

@media (min-width: 768px) {
    .hero-container {
      grid-template-columns: 6fr 4fr;
    }
    .why-different-grid {
      grid-template-columns: 1fr 1fr;
    }
    .apps-work-grid {
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 30px;
    }
  }
  @media (min-width: 1024px) {
  }
  @media (max-width: 991px) {
    .tech-stack-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
  }
  @media (max-width: 767px) {
    .hero-section {
      padding: 30px 20px;
    }
    .hero-section:before {
      background: unset;
    }
    .hero-feature-item {
        text-align: left;
    }
    .hero-buttons {
        margin-bottom: 0;
    }
   .why-different-container > P {
      MARGIN-BOTTOM: 20px;
    }
    .fs-40 {
      font-size: 28px;
    }
    .why-different-cards-wrapper {
      grid-template-columns: 1fr;
    }
    .banner-devices,.why-different-phones-container,.vip-right img {
      max-width: 400px;
      margin: 0 auto;
    }
    .why-different-card.full-width {
      grid-column: 1;
    }
    .why-different-phone {
      width: 180px;
    }
    .apps-work-visual, .zigzag-visual {
      min-height: auto;
    }
    .apps-work-yellow-blob {
      width: 250px;
      height: 350px;
    }
    .apps-work-phone.left {
      width: 160px;
      left: 20px;
    }
    .apps-work-phone.right {
      width: 180px;
      right: 10px;
    }
    .apps-work-analytics-card {
      min-width: 140px;
      padding: 12px 16px;
    }
    .apps-work-card-amount {
      font-size: 1.25rem;
    }
    .why-different-section, section.apps-work-section {
      padding-left: 20px;
      padding-right: 20px;
    }
    .why-different-mockup-wrapper, .apps-work-visual {
      padding: 0;
    }
    .tech-grid {margin-bottom: 0;}
    .cta-banner-section {
      padding: 35px 20px 50px;
    }
    .pt-60 {
      padding-top: 40px;
    }
    .apps-work-section {
      padding-bottom: 40px;
    }
    .fb-inner-img img {
      height: 100%;
      width: 90px;
    }
    .fb-grid {
      grid-template-columns: 1fr;gap: 20px;
    }
    .why-different-cards-wrapper .why-different-card:nth-child(3) {
      order: 4;
    }
    .why-different-section {
      padding-bottom: 45px;
    }
    .fashion-brands h2 {
      font-size: 28px;
    }
    .vip-wrapper {
      grid-template-columns: 1fr;
    }
    .vip-right {
      order: -1;
      text-align: center;
    }
    .fashion-brands,.vip-collection {
      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);
    }
    .cta-content p {
      margin-bottom: 0;
    }
    .apps-work-container .section-header h2, .apps-work-container .section-header p {
      text-align: left;
    }
    .apps-work-container .section-header {
        margin-bottom: 20px;
    }
    .fb-badge.yellow {
        transform: translateX(56px);
    }
    .apps-work-container .section-header h2,.apps-work-heading,.apps-work-intro,.faq-section h2,.cta-content h2,.latest-blog .subheading {
      margin-bottom: 8px;
    }
    .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;
    }
    .apps-work-visual {
        order: 2;
    }
    .work-v2 {
      gap: 10px;
    }
    .work-v2 .apps-work-visual {
      background: #00652F;
      border-radius: 20px;
      padding: 10px;
    }
    .vip-tab {
      padding: 14px;
    }
    .vip-wrapper {
      grid-template-columns: 1fr;
      gap: 20px;
    }
    .tech-stack-section {
      padding: 10px 20px 50px;
    }
    .faq-section {
      padding-top: 35px;
    }
    .py-60 {
      padding-top: 30px;
      padding-bottom: 40px;
    }
  }
  @media (max-width: 480px) {
    .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-devices, .why-different-phones-container, .vip-right img {
      max-width: 100%;
      margin: 0 auto;
    }
}