html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      scroll-behavior: smooth;
    }

    body {
      background-color: #fff8e1;
      font-family: 'Segoe UI', sans-serif;
      padding-top: 68px;
    }

    textarea {
      resize: none !important;
    }

    .banner-video {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }

    /* this code for image in the hero banner section for video */
    .hero-video-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 16/9;
      max-height: 680px;
      min-height: 220px;
      overflow: hidden;
    }

  
    /* this code for image in the hero banner section for image*/
    /* .hero-video-wrapper {
      width: 100%;
      overflow: hidden;
    } */

    .hero-img {
      display: block;
      width: 100%;
      height: auto;
    }

    @media (max-width: 767px) {
      .hero-img {
        min-height: 150px;
      }
    }

    /* this code for image in the hero banner section */
    @media (max-width: 991px) {
      .hero-video-wrapper {
        aspect-ratio: 16/9;
        min-height: 180px;
      }
    }

    @media (max-width: 767px) {
      .hero-video-wrapper {
        aspect-ratio: 16/9;
        min-height: 120px;
        height: auto;
      }

      .banner-video {
        object-fit: cover;
      }
    }

    @media (max-width: 575px) {
      .hero-video-wrapper {
        aspect-ratio: 16/9;
        min-height: 80px;
      }
    }



    .cta-section {
      background: linear-gradient(135deg, #791236 80%, #ffe082 100%);
      padding: 60px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .cta-card {
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 8px 32px 0 rgba(191, 33, 23, 0.10);
      padding: 48px 32px 40px 32px;
      max-width: 540px;
      margin: 0 auto;
      text-align: center;
      position: relative;
    }

    .cta-icon {
      background: #ffe082;
      color: #791236;
      border-radius: 50%;
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
      margin: 0 auto 18px auto;
      box-shadow: 0 2px 8px 0 rgba(191, 161, 74, 0.10);
    }

    .cta-card h2 {
      font-size: 2.2rem;
      font-weight: 700;
      color: #791236;
      margin-bottom: 12px;
    }

    .cta-card p {
      color: #7c6f3a;
      font-size: 1.15rem;
      margin-bottom: 32px;
    }

    .cta-btn-animate {
      animation: ctaPulse 1.5s infinite alternate;
      font-size: 1.2rem;
      font-weight: 600;
      background: #ffe082;
      color: #791236;
      border: none;
      border-radius: 8px;
      padding: 14px 36px;
      box-shadow: 0 4px 16px 0 rgba(191, 161, 74, 0.10);
      transition: background 0.2s;
    }

    .cta-btn-animate:hover {
      background: #bfa14a;
      color: #fff;
    }

    @keyframes ctaPulse {
      0% {
        box-shadow: 0 0 0 0 rgba(191, 161, 74, 0.18);
      }

      100% {
        box-shadow: 0 0 0 12px rgba(191, 161, 74, 0.04);
      }
    }

    .screenshots-section {
      background: linear-gradient(135deg, #fff8e1 70%, #ffe082 100%);
      padding: 60px 0 40px 0;
    }

    .screenshots-heading {
      font-size: 2.2rem;
      font-weight: 700;
      color: #791236;
      margin-bottom: 10px;
    }

    .screenshots-subtitle {
      color: #7c6f3a;
      font-size: 1.1rem;
      margin-bottom: 36px;
    }

    .mockup-mobile {
      background: #222;
      border-radius: 32px;
      box-shadow: 0 8px 32px 0 rgba(191, 161, 74, 0.13);
      padding: 18px 8px 12px 8px;
      position: relative;
      display: inline-block;
      width: 100%;
      max-width: 320px;
      min-height: 600px;
      margin: 0 auto;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    /* .mockup-mobile:hover {
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 16px 48px 0 rgba(191,161,74,0.18);
    } */
    .mockup-notch {
      width: 80px;
      height: 10px;
      background: #333;
      border-radius: 0 0 12px 12px;
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
    }

    .mockup-img {
      border-radius: 32px;
      width: 100%;
      height: 580px;
      object-fit: fill;
      box-shadow: 0 2px 8px 0 rgba(191, 161, 74, 0.10);
      background: #fff;
    }

    @media (max-width: 991px) {
      .mockup-mobile {
        min-height: 420px;
        max-width: 220px;
      }

      .mockup-img {
        height: 380px;
      }
    }

    @media (max-width: 767px) {
      .mockup-mobile {
        min-height: 600px;
        max-width: 75vw;
      }

      .mockup-img {
        height: 600px;
      }
    }

    .about-section-bg {
      background: linear-gradient(135deg, #fffbe7 70%, #ffe082 100%);
      padding: 60px 0 10px 0;
    }

    .about-card,
    .services-card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 8px 32px 0 rgba(191, 161, 74, 0.10);
      padding: 36px 28px 28px 28px;
      border-left: 6px solid #791236;
    }

    .jnana-logo {
      width: 130px;
      height: 130px;
      margin-bottom: 18px;
      display: block;
    }

    .about-title {
      color: #209ad2;
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 12px;
    }

    .about-desc {
      color: #7c6f3a;
      font-size: 1.13rem;
      margin-bottom: 0;
    }

    @media (max-width: 991px) {

      .about-card,
      .services-card {
        padding: 24px 12px;
      }
    }

    .services-card-list {
      background: transparent;
      box-shadow: none;
      border: none;
      padding: 0;
    }

    .service-feature-card {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 4px 24px 0 rgba(191, 161, 74, 0.10);
      border: 2px solid #ffe082;
      padding: 28px 18px 22px 18px;
      margin-bottom: 24px;
      text-align: center;
      transition: transform 0.18s, box-shadow 0.18s;
      min-height: 220px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .service-feature-card:hover {
      transform: translateY(-6px) scale(1.03);
      box-shadow: 0 8px 32px 0 rgba(191, 161, 74, 0.18);
      border-color: #bfa14a;
    }

    .service-feature-icon {
      font-size: 2.1rem;
      color: #bfa14a;
      margin-bottom: 10px;
    }

    .service-feature-title {
      font-weight: 600;
      color: #791236;
      font-size: 1.08rem;
    }

    .services-section-title {
      color: #791236;
      font-weight: 700;
      font-size: 1.75rem;
      margin-bottom: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .services-section-title:after {
      content: '';
      display: inline-block;
      width: 48px;
      height: 4px;
      background: #bfa14a;
      border-radius: 2px;
      margin-left: 14px;
    }

    .saasgold-chat-widget {
      bottom: 105px !important;
      right: 30px !important;
    }

    .saasgold-user-form-container {
      overflow-x: hidden;
      overflow-y: scroll;
    }

    @media (max-width: 768px) {
      .services-section-title {
        font-size: 1.10rem;
      }
    }

    @media (max-width: 374px) {
      .services-section-title {
        font-size: 1rem;
      }

      .services-section-title:after {
        display: none;
      }
    }