.sticky-text {
            position: sticky;
            flex-direction: column;
            padding: 2rem;
            background: #fff;
        }

        /* کل بخش کارت‌ها */
        .cards-wrapper {
            position: relative;
            height: calc(var(--cards-count) * 120vh);
            overflow: visible;
        }

        /* هر کارت sticky */
        .card-item {
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: var(--z);
            transform-origin: top center;
            transition: transform 0.4s ease, opacity 0.4s ease;
        }

        /* محتوای کارت */
        .card-content {
            width: 100%;
            max-width: 700px;
            border-radius: 1.5rem;
            box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
            background: white;
            transform: translateY(0);
            transition: transform 0.4s ease, rotate 0.4s ease;
        }

     
        .card-item:nth-child(1) .card-content {
            transform: translateY(2vh);
        }

        .card-item:nth-child(2) .card-content {
            transform: translateY(4vh);
        }

        .card-item:nth-child(3) .card-content {
            transform: translateY(6vh);
        }

        .card-item:nth-child(4) .card-content {
            transform: translateY(8vh);
        }

        .card-item:nth-child(5) .card-content {
             transform: translateY(14vh) rotate(-2deg);
        }

        

        
        .bg1 {
            background: linear-gradient(16deg, rgb(176 201 251) 0%, rgb(202 220 253) 50%, rgb(56 121 255) 100%);
        }

        .bg2 {
            background: linear-gradient(41deg, rgb(230 238 255) 0%, rgb(226 236 255) 50%, rgb(121 165 255) 100%);
        }



        .card-content img {
            width: 100%;
            border-radius: 0.5rem;
            margin-top: 1rem;
        }

     @media (min-width: 991px){
         .vh-class{
            height: 100vh;
           }
        }
       
        @media (max-width: 768px) {


            .card-item {   
                 height:60vh !important;
              }

             .card-content {
                width: 80%;
                padding: 1rem;
            }

            .card-item:nth-child(2) .card-content {
                transform: translateY(2vh);
            }

            .card-item:nth-child(3) .card-content {
                transform: translateY(4vh);
            }

            .card-item:nth-child(4) .card-content {
                transform: translateY(8vh);
            }

            .card-item:nth-child(5) .card-content {
                transform: translateY(12vh) rotate(-2deg);
            }

            
        }



        
        .btn-whiteNew {
            background: linear-gradient(135deg, #ebe7e7 0, #fffefe 80%) !important;
            color:#000;
            transition: all 0.3s ease;
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            border: none;
            padding:12px 23px 12px 25px ;
        }

      
        .btn-whiteNew:hover {
            filter: brightness(1.1);
            transform: scale(1.05);
            box-shadow: 0 0.5rem 1.5rem rgba(59, 130, 246, 0.5);
            animation: pulse 1s infinite;
            color:#fff;
            background:linear-gradient(135deg, #0054cf 0, #256ad1 80%) !important;
        }
       .btn-custom {
      background-color: #004be0;
      color: white;
      border-radius: 50px;
      padding: 10px 19px 10px 48px;
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: background 0.3s ease;
    }

   .btn-custom:hover {
      background-color: #0059ff;
      color:#fff !important;
    }

   
    .btn-custom::before {
      content: '↩';
      position: absolute;
      left: 11px;
      font-size: 17px;
      background: linear-gradient(145deg, #f1f6ff, #cddfff);
      color: #004be0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.3s ease;
      padding-top:3px;
    }

    /* انیمیشن فلش در حالت هاور */
    .btn-custom:hover::before {
      transform: translateX(-6px);
    }
         
        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
                transform: scale(1.05);
            }

            50% {
                opacity: 0.9;
                transform: scale(1.1);
            }
        }


  .btn-outline-custom {
      background-color: white;
      border:1px solid #004be0;
      color: #053697;
      border-radius: 50px;
      padding: 10px 19px 10px 48px;
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      transition: background 0.3s ease;
    }

   .btn-outline-custom:hover {
      background:linear-gradient(102deg, #fff9e8, #e8f1ff);
      color:#053697 !important;
    }

   
    .btn-outline-custom::before {
      content: '↩';
      position: absolute;
      left: 11px;
      font-size: 17px;
      background: linear-gradient(145deg, #f1f6ff, #cddfff);
      color: #053697;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.3s ease;
      padding-top:3px;
    }

    /* انیمیشن فلش در حالت هاور */
    .btn-outline-custom:hover::before {
      transform: translateX(-6px);
    }
         
        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
                transform: scale(1.05);
            }

            50% {
                opacity: 0.9;
                transform: scale(1.1);
            }
        }


 .audience-btn {
    background-color: #e9f2ff;
    color: #212529;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    border-radius: 0.5rem;
  }
  .audience-btn.active {
    background-color: #fbbf24;
    color: #212529;
  }
  .audience-btn:hover {
    border-color: #0d6efd;
  }