html {
    scroll-behavior: smooth;
  }

body {
            font-family: 'Poppins', 'inter', sans-serif;
            scroll-behavior: smooth;
        }

        .hero-image {

            background-image: url('images/hero_image.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background: 
            linear-gradient(rgba(123, 62, 62, 0.2), rgba(43, 66, 103, 0.2)),
            url('images/hero_image.jpg') center/cover no-repeat;
    
        }

        .MyheroGradientClass{height:200px;
          background: radial-gradient(circle at 75% 50%, rgba(255, 107, 0, 0.3) 0%, transparent 50%),
                      radial-gradient(circle at 25% 50%, rgba(0, 71, 250, 0.3) 0%, transparent 50%),
                      linear-gradient(to right, #ffffff, #ffffff); 
          background-color: #ffffff; 
        }


        .implementationGradientClass {
          background: linear-gradient(
            to bottom,
            rgba(255, 107, 0, 0.1) 0%,
            rgba(255, 255, 255, 1) 30%,
            rgba(0, 71, 250, 0.1) 100%
          );
        }
        


        .how-button {
            /* spacing from the text above */
            margin-top: 2rem;
          
            /* internal padding */
            padding: 0.75rem 2rem;
          
            /* fallback color */
            background-color: #0047FA;
          
            background-image: #0047FA 100%;
          
            /* rest of your styles */
            color: #fff;
            border-radius: 0.5rem;
            text-decoration: none;
            display: inline-block;
            font-weight: 600;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: background 0.3s, transform 0.2s;
          }
          
                /* 1. Define the animation */
                @keyframes fadeUp {
                    from {
                    opacity: 0;
                    transform: translateY(20px);
                    }
                    to {
                    opacity: 1;
                    transform: translateY(0);
                    }
                }
                
                .animate-fade-up {
                    /* animation-duration | timing-function | fill-mode */
                    animation: fadeUp 1s ease-out both;
                }
            .contact-us:hover{
                background-image: linear-gradient(
                    225deg,
                    #ff3333 0%,
                    #d087d6 30%,
                    #5159f2 100%
                  );
                  transform: scale(1.05);
            }

            .how-button:hover {
              background-image: linear-gradient(
                225deg,
                #ff3333 0%,
                #d087d6 30%,
                #5159f2 100%
              );
              transform: scale(1.05);
            }

        .section-label {
            font-size: 0.875rem;
            font-weight: 600;
            color: #6366f1;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.75rem;
        }
        .section-title {
            font-weight: 600;
            font-size: 2.5rem; 
            letter-spacing: -0.025em;
            line-height: 1.2;
            margin-bottom: 1rem;
        }
        .section-subtitle {
            font-size: 1.125rem;
            color: #6b7280; 
            line-height: 1.6;
        }
        .stat-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(209, 213, 219, 0.3);
        }
        .section-subtitle {
            padding-bottom: 1rem;
          }
          
        .site-footer {
            background-color: #0047FA;
            color: #eef2ff;
            padding: 1rem 0;
          }