/* ===== SaaS Hero Section (White Header Friendly) ===== */
      .saas-hero {
          background: linear-gradient(
              180deg,
              #f8fafc 0%,
              #eef2ff 35%,
              #e0e7ff 100%
          );
          padding: 130px 0 90px;
          color: #0f172a;
          position: relative;
          overflow: hidden;
      }

      /* Soft bottom fade to white */
      .saas-hero::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 120px;
          background: linear-gradient(
              to bottom,
              rgba(255,255,255,0),
              #ffffff
          );
      }

      /* Tag */
      .hero-tag {
          display: inline-block;
          background: #e0e7ff;
          color: #4338ca;
          padding: 6px 16px;
          border-radius: 999px;
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 18px;
      }

      /* Title */
      .hero-title {
          font-size: 48px;
          font-weight: 800;
          line-height: 1.2;
          margin-bottom: 22px;
          color: #0f172a;
      }

      /* Text */
      .hero-text {
          font-size: 16px;
          color: #475569;
          margin-bottom: 34px;
          max-width: 520px;
      }

      /* Buttons */
      .hero-actions {
          display: flex;
          gap: 16px;
          flex-wrap: wrap;
      }

      /* Primary Button */
      .hero-btn.primary {
          background: #4f46e5;
          color: #ffffff;
          padding: 14px 32px;
          border-radius: 12px;
          font-weight: 600;
          box-shadow: 0 10px 30px rgba(79,70,229,0.25);
          transition: all 0.3s ease;
      }

      .hero-btn.primary:hover {
          background: #4338ca;
          transform: translateY(-2px);
      }

      /* Optional secondary button */
      .hero-btn.outline {
          border: 2px solid #4f46e5;
          color: #4f46e5;
          padding: 14px 30px;
          border-radius: 12px;
          font-weight: 600;
          background: transparent;
      }

      .hero-btn.outline:hover {
          background: #4f46e5;
          color: #ffffff;
      }

      /* Image */
      .hero-img {
          max-width: 92%;
          filter: drop-shadow(0 20px 40px rgba(15,23,42,0.15));
      }

      /* Carousel controls */
      .saas-hero .carousel-control-prev,
      .saas-hero .carousel-control-next {
          width: 6%;
      }






      /* ===== Services Section ===== */
      .services-section {
          background: #ffffff;
          padding: 100px 0;
      }

      /* Section Header */
      .section-tag {
          display: inline-block;
          background: #eef2ff;
          color: #4f46e5;
          padding: 6px 18px;
          border-radius: 999px;
          font-size: 14px;
          font-weight: 600;
          margin-bottom: 16px;
      }

      .section-title {
          font-size: 36px;
          font-weight: 800;
          color: #0f172a;
          margin-bottom: 16px;
      }

      .section-desc {
          font-size: 16px;
          color: #64748b;
          max-width: 560px;
          margin: 0 auto;
      }

      /* Service Cards */
      .service-card {
          background: #ffffff;
          border-radius: 18px;
          padding: 40px 28px;
          text-align: center;
          border: 1px solid #e5e7eb;
          transition: all 0.3s ease;
          height: 100%;
      }

      .service-card:hover {
          transform: translateY(-6px);
          box-shadow: 0 25px 50px rgba(15, 23, 42, 0.08);
          border-color: transparent;
      }

      /* Icons */
      .service-card .icon {
          width: 64px;
          height: 64px;
          margin: 0 auto 20px;
          border-radius: 16px;
          background: linear-gradient(135deg, #4f46e5, #6366f1);
          display: flex;
          align-items: center;
          justify-content: center;
      }

      .service-card .icon i {
          font-size: 26px;
          color: #ffffff;
      }

      /* Text */
      .service-card h5 {
          font-size: 18px;
          font-weight: 700;
          color: #0f172a;
          margin-bottom: 12px;
      }

      .service-card p {
          font-size: 15px;
          color: #64748b;
          line-height: 1.6;
      }

      /* Responsive */
      @media (max-width: 768px) {
          .section-title {
              font-size: 28px;
          }
      }


        /* ===== About SaaS Section ===== */
        .about-saas {
            background: #f8fafc;
            padding: 110px 0;
        }

        /* Image */
        .about-img img {
            width: 100%;
            border-radius: 20px;
            box-shadow: 0 25px 60px rgba(15, 23, 42, 0.15);
        }

        /* Content */
        .about-content {
            padding-left: 20px;
        }

        .about-title {
            font-size: 36px;
            font-weight: 800;
            color: #0f172a;
            margin: 18px 0;
        }

        .about-desc {
            font-size: 16px;
            color: #64748b;
            line-height: 1.7;
            margin-bottom: 32px;
        }

        /* Stats */
        .about-stats {
            display: flex;
            gap: 30px;
            margin-bottom: 36px;
            flex-wrap: wrap;
        }

        .stat-box {
            background: #ffffff;
            padding: 18px 24px;
            border-radius: 14px;
            border: 1px solid #e5e7eb;
            text-align: center;
            min-width: 140px;
        }

        .stat-box h3 {
            font-size: 28px;
            font-weight: 800;
            color: #4f46e5;
            margin-bottom: 6px;
        }

        .stat-box span {
            font-size: 14px;
            color: #64748b;
            font-weight: 500;
        }

        /* Button */
        .about-btn {
            display: inline-block;
            padding: 14px 30px;
            border-radius: 12px;
            background: linear-gradient(135deg, #4f46e5, #6366f1);
            color: #ffffff;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .about-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(79, 70, 229, 0.4);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .about-title {
                font-size: 28px;
            }
            .about-content {
                padding-left: 0;
            }
        }


        #saasHeroSlider .carousel-control-prev,
        #saasHeroSlider .carousel-control-next {
            width: 50px;
        }

        #saasHeroSlider .carousel-control-prev-icon,
        #saasHeroSlider .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 20px;
            background-size: 60%;
        }
        .carousel-control-prev, .carousel-control-next{
          opacity: 1;
        }