.scroll-section {
      position: relative;
      width: 100%;
      height: 500px;
      overflow: hidden;
    }

    /* gradient overlay top and bottom */
    .scroll-section::before,
    .scroll-section::after {
      content: "";
      position: absolute;
      left: 0;
      width: 100%;
      height: 80px; /* height of gradient overlay */
      z-index: 10;
      pointer-events: none;
    }

    .scroll-section::before {
      top: 0;
      background: linear-gradient(to bottom, #fff 0%, rgba(255,255,255,0) 100%);
    }

    .scroll-section::after {
      bottom: 0;
      background: linear-gradient(to top, #fff 0%, rgba(255,255,255,0) 100%);
    }

    .scroll-track {
      display: flex;
      flex-direction: column;
      animation: scrollInfinite 60s linear infinite;
    }

    .scroll-track img {
      width: 100%; /* full width of col-md-6 */
      height: auto;
      border-radius: 15px; /* square with rounded corners */
      margin-bottom: 15px;
      display: block;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    @keyframes scrollInfinite {
      0%   { transform: translateY(0); }
      100% { transform: translateY(-50%); }
    }

    /* responsive tweak */
    @media (max-width: 768px) {
      .scroll-section { height: 350px; }
      .scroll-track img { margin-bottom: 10px; }
      .scroll-section::before,
      .scroll-section::after { height: 50px; }
    }















    /* parallax background */
    .parallax-section {
      position: relative;
      background-image: url('../../public/images/vector/vector-parallex-banner.jpg'); /* example bg */
      background-attachment: fixed;   /* parallax effect */
      background-size: contain;
      background-position: center;
      height: 100vh; /* full screen height */
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-align: center;
    }

    /* overlay color/gradient */
    .parallax-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.5); /* semi transparent black overlay */
      z-index: 1;
    }

    /* content on top of overlay */
    .parallax-content {
      position: relative;
      z-index: 2;
    }
    
    
    
    
    
    .text_mono-dark-9 {
    color: white;
}


.text_mono-gray-7 {
    color: black;
}

.text_mono-dark-8 {
    color: black;
}

.heading-tag .icon {
    color: black;
}


.parallex-white{
    color:white;
}




/*3 Defintion Section*/

    /*body{font-family: 'Poppins', sans-serif;background:linear-gradient(180deg,#f5f8fb 0%,#fff 100%);}*/
    .section-head{text-align:center;padding:60px 0 36px}
    .section-head h2{font-weight:800;letter-spacing:-0.5px}
    .section-head p{color:#6c757d;margin-top:8px}
    .cards-wrap{display:flex;gap:1rem;align-items:stretch;justify-content:center;flex-wrap:wrap;position:relative}
    .bg-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgb(255 123 57 / 34%), transparent 70%);animation:floaty 10s linear infinite;z-index:0}
    .bubble1{width:140px;height:140px;left:-40px;top:20%;animation-duration:15s}
    .bubble2{width:100px;height:100px;right:-30px;top:50%;animation-duration:20s}
    .bubble3{width:180px;height:180px;left:50%;bottom:-80px;animation-duration:25s}
    @keyframes floaty{0%{transform:translateY(0) translateX(0)}50%{transform:translateY(-20px) translateX(10px)}100%{transform:translateY(0) translateX(0)}}
    .feature-card{background:#fff;border-radius:18px;padding:28px 22px 20px;width:300px;position:relative;transition:all .3s ease;box-shadow:0 8px 28px rgba(16,24,40,0.06);z-index:1;}
    .feature-card.center{width:340px}
    .feature-card::before{content:'';position:absolute;inset:0;border-radius:20px;padding:2px;background:linear-gradient(135deg,#1565ff,#00c6ff,#ff6b6b);-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
    .feature-card:hover::before{opacity:1}
    .feature-img{width:120px;height:120px;object-fit:cover;border-radius:50%;margin:-70px auto 12px;display:block;border:8px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,0.1);animation:floaty 5s ease-in-out infinite;background:#fff;z-index:1}
    .card-title{font-weight:700;font-size:1.2rem}
    .card-desc{color:#6c757d;font-size:.1.5rem;margin:12px 0 18px}
    .corner-icon{position:absolute;top:-20px;right:-20px;width:48px;height:48px;border-radius:12px;background:rgba(20,30,60,0.05);display:flex;align-items:center;justify-content:center;transition:transform .3s}
    .feature-card:hover .corner-icon{transform:scale(1.2) rotate(10deg)}
    .btn-cta{padding:10px 24px;border-radius:40px;font-weight:700;border:none;background:linear-gradient(90deg, #ff5833, #ffa13f)color:#fff;position:relative;overflow:hidden;cursor:pointer}
    .btn-cta::after{content:'';position:absolute;border-radius:50%;width:10px;height:10px;background:rgba(255,255,255,.6);left:50%;top:50%;transform:translate(-50%,-50%) scale(0);opacity:0}
    .btn-cta:active::after{transform:translate(-50%,-50%) scale(12);opacity:1;transition:transform .5s,opacity .6s}
    .hidden{opacity:0;transform:translateY(30px)}
    .visible{opacity:1;transform:translateY(0);transition:all .6s ease-out}
    @media (max-width:1000px){.cards-wrap{gap:20px}.feature-card{width:320px}.feature-card.center{width:340px}}
    @media (max-width:720px){.cards-wrap{flex-direction:column;align-items:center}.feature-card{width:92%}.feature-img{margin-top:-56px;width:96px;height:96px}}


/*3 Defintion Section*/