:root {
      --chitspot-green: #8BC53F;
      --chitspot-navy: #2C2F5A;
      --cta-gradient: linear-gradient(90deg, #8BC53F 0%, #2C2F5A 100%);
    }

    body {
      font-family: 'Poppins', sans-serif;
      background-color: #f5f6fa;
      color: #333;
    }




    /* Hero Section */
    .hero-section {
      min-height: 65vh;
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 40px 0;
    }

    .hero-img {
      width: 100%;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .hero-text h1 {
      font-weight: 700;
      color: var(--chitspot-navy);
      font-size: 2rem;
    }

    .hero-text p {
      color: #555;
    }

    .hero {
      background: var(--chitspot-navy);
      color: #fff;
      padding: 80px 20px;
      text-align: center;
    }

    .hero_page_banner h1 {
      font-size: 2.5rem;
      font-weight: 700;
    }

    .hero_page_banner p {
      font-size: 1.2rem;
      margin-top: 1rem;
    }

    /* OTP Form */
    .otp-form {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .otp-form select,
    .otp-form input {
      border: 1px solid #ccc;
      border-radius: 8px;
      color: #333;
      padding: 12px;
      width: 100%;
      margin-bottom: 15px;
      font-size: 1rem;
    }

    .otp-form button {
      background-color: #2C2F5A;
      color: #fff;
      font-weight: 600;
      border: none;
      border-radius: 8px;
      padding: 12px;
      width: 100%;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }

    .otp-form button:hover {
      background-color: #8BC53F;
      box-shadow: 0 0 10px rgba(139, 197, 63, 0.4);
    }

    #otp-message {
      opacity: 0;
      max-height: 0;
      overflow: hidden;
      margin-bottom: 0.75rem;
      transition: opacity 0.4s ease-in-out, max-height 0.4s ease-in-out;
    }

    #otp-message.active {
      opacity: 1;
      max-height: 200px;
      /* or more, just make sure it's enough */
      margin-top: 0.5rem;
    }


    /* Features & How It Works */
    .feature-card,
    .testimonial-card,
    .faq-card {
      background: #fff;
      border-radius: 15px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: 0.3s;
    }

    .feature-card:hover {
      transform: translateY(-5px);
    }

    #features .border {
      transition: 0.3s ease;
    }

    #features .border:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    }

    .contact-form input,
    .contact-form textarea {
      border-radius: 8px;
      padding: 12px;
      font-size: 1rem;
    }

    .contact-form button {
      font-size: 1rem;
      padding: 12px;
    }

    .accordion-button {
      font-size: 1rem;
    }

    .accordion-body {
      font-size: 0.95rem;
      color: #555;
    }

    .btn-cta {
      background: var(--chitspot-navy);
      color: #fff !important;
      font-weight: 600;
      border-radius: 30px;
      padding: 10px 25px;
      transition: all 0.3s ease;
    }

    .btn-cta:hover {
      background: #8BC53F;
      transform: scale(1.05);
    }

    .alert.active {
      transition: all 0.3s ease-in-out;
      transform: scale(1.02);
    }


    footer {
      background-color: var(--chitspot-navy);
      color: #fff;
      font-size: 0.9rem;
    }

    @media (max-width: 767.98px) {
      .image-id {
        display: none !important;
      }

      .hero-text h1 {
        font-size: 1.75rem;
      }

      .hero-text p {
        font-size: 0.95rem;
      }
    }