/* ------------------------------------------------------------
         2) Value Prop Section
         ------------------------------------------------------------ */
         .value-prop {
            position: relative;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            width: 100vw;
            background: linear-gradient(180deg, #050038 0%, #4B128B 31.1%, #050038 97.2%);
    
          }
      
          /* White card-like container (the .features-container) sits inside .value-prop 
             but is narrower than full width. */
          .features-container {
            max-width: 1200px;
            margin: 0 auto;
            background: #FFFFFF;
            border-radius: 1rem;
            /* You can remove or adjust transform if you want full size. */
            transform: scale(0.89); 
            padding: 4rem 3rem;
          }
          .features-heading {
            text-align: center;
            margin-bottom: 1rem;
            font-size: 50px;
            background: linear-gradient(90deg, #BC42B9 4%, #4BC7E8 96%);
            -webkit-background-clip: text;  /* Safari/Chrome support */
            -webkit-text-fill-color: transparent; 
            margin-left: 11%;
            margin-right: 11%;
          }
          .features-subheading {
            text-align: center;
            max-width: 700px;
            margin: 0.5rem auto 3rem auto;
            font-size: 22px;
            color: #696688;
            ;
            line-height: 1.5;
          }
          .feature {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 3rem;
            gap: 2rem;
          }
          .feature-text {
            flex: 1 1 400px; 
          }
          .feature-text h3 {
            font-size: 34px;
            color: #050038;
            ;
            margin-bottom: 0.5rem;
          }
          .feature-text p {
            font-size: 22px;
            line-height: 1.5;
            color: #696688;
            margin-bottom: 1rem;
          }
          .feature-text a {
            display: inline-block;
            background-color: #ff6bac; /* Pink background */
            color: #ffffff; /* White text */
            text-decoration: none;
            font-weight: 600;
            font-size: 20px;
            padding: 10px 20px; /* Adjust padding for button size */
            border-radius: 28px; /* Rounded corners */
            transition: background-color 0.3s ease, transform 0.2s ease;
        }
        
        .feature-text a:hover {
            background-color: #FF5FBC; /* Darker pink on hover */
            transform: scale(1.05); /* Slight scaling effect */
        }
        
          .arrow {
            font-size: 21px; 
            vertical-align: middle;
          }
          .feature-image-wrapper {
            position: relative;
            flex: 1 1 400px; 
            min-width: 300px;
          }
          .feature-image {
            position: relative;
            z-index: 2; 
            max-width: 100%;
            display: block;
            margin: 0 auto;
          }
          /* Default: Align text left */
          .feature .feature-text {
            text-align: left;
          }

          /* Right-align text for sections 1, 3, 5 */
          .feature:nth-of-type(odd) .feature-text {
            text-align: right;
          }

      
@media (max-width: 768px) {
  .feature {
    flex-direction: column;
  }
  .gradient-bg {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    bottom: 0;
  }
}

@media (max-width: 768px) {
  .features-container {
    padding: 3rem 1.5rem; /* Reduce padding for smaller screens */
    transform: scale(1); /* Remove scaling to fit better */
    max-width: 100%;
    border-radius: 0; /* Remove border-radius for full-width look */
    scale: 0.959 !important;
  }

  .features-heading {
    font-size: 36px; /* Adjust heading size */
    margin-left: 0;
    margin-right: 0;
  }

  .features-subheading {
    font-size: 18px; /* Reduce text size */
    max-width: 100%;
    padding: 0 15px;
  }

  .feature {
    flex-direction: column;
    text-align: center;
    gap: 1.5rem;
  }

  .feature-text {
    flex: 1 1 100%;
    text-align: center !important;
  }

  .feature-text h3 {
    font-size: 28px; /* Reduce heading size */
  }

  .feature-text p {
    font-size: 18px;
  }

  .feature-text a {
    font-size: 18px; /* Reduce CTA size */
  }

  .feature-image-wrapper {
    flex: 1 1 100%;
    min-width: auto;
  }

  .feature-image {
    max-width: 90%;
  }

  .gradient-bg {
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    bottom: 0;
  }
}
/* 📱📲 Mobile Horizontal & iPad-Friendly Layout */
@media (max-width: 1024px) {
  .features-container {
    padding: 3.5rem 2rem;
    transform: scale(1);
    max-width: 95%;
    border-radius: 0.8rem;
  }

  .features-heading {
    font-size: 42px;
    margin-left: 0;
    margin-right: 0;
  }

  .features-subheading {
    font-size: 20px;
    max-width: 90%;
  }

  .feature {
    display: flex;
    flex-direction: column !important; /* Stack elements */
    text-align: center;
  }

  .feature-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    order: -1 !important; /* Ensures image is always on top */
    flex: 1 1 auto;
    width: 100%;
  }

  .feature-text {
    order: 2 !important; /* Ensures text is always below the image */
    flex: 1 1 auto;
    width: 100%;
  }

  .feature-image {
    max-width: 90%;
    height: auto;
  }

  .feature-text h3 {
    font-size: 30px;
  }

  .feature-text p {
    font-size: 20px;
  }

  .feature-text a {
    font-size: 19px;
    padding: 12px 24px;
  }

  .feature-image {
    max-width: 85%;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  .features-container {
    padding: 3rem 1.5rem;
    max-width: 100%;
    border-radius: 0;
  }

  .features-heading {
    font-size: 38px;
  }

  .features-subheading {
    font-size: 18px;
    max-width: 100%;
    padding: 0 15px;
  }

  .feature {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 1.5rem;
  }

  .feature-text {
    flex: 1 1 90%;
  }

  .feature-text h3 {
    font-size: 28px;
  }

  .feature-text p {
    font-size: 18px;
  }

  .feature-text a {
    font-size: 18px;
  }

  .feature-image-wrapper {
    flex: 1 1 100%;
  }

  .feature-image {
    max-width: 80%;
  }
}