.svp-mobile-carousel {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      overflow: hidden;
      min-width: 0;
      box-sizing: border-box;
  }

  .svp-mobile-track {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      width: 100%;
      max-width: 100%;
      min-width: 100%;
      padding: 0 16px 16px;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: 16px;
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
      align-items: flex-start;
      direction: ltr;
      box-sizing: border-box;
  }

  .svp-mobile-slide {
      width: 100%;
      max-width: calc(100% - 48px);
      flex: 0 0 calc(100% - 48px);
      height: 370.345px;
      min-width: 0;
      background: #B15FF3;
      border-radius: 24px;
      color: #ffffff;
      font-family: "Vazirmatn", "IRANSans", "Tahoma", sans-serif;
      box-sizing: border-box;
      scroll-snap-align: start;
      overflow: hidden;
      display: flex;
      flex-direction: column;
  }

  .svp-mobile-info {
      padding: 16px 14px 18px;
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 10px;
      text-align: right;
      direction: rtl;
      min-width: 0;
      box-sizing: border-box;
  }

  .svp-mobile-title {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
  }

  .svp-mobile-label {
      font-size: 14px;
      font-weight: 600;
  }

  .svp-mobile-description {
      margin: 0;
      font-size: 14px;
      line-height: 1.8;
      max-width: 100%;
      overflow-wrap: anywhere;
      word-break: break-word;
  }

  .svp-desktop {
      display: none;
  }

  .svp-card {
      width: 332px;
      min-height: 370.345px;
      height: auto;
      max-width: 100%;
      margin: 0 auto;
      background: #B15FF3;
      border-radius: 24px;
      overflow: hidden;
      color: #ffffff;
      font-family: "Vazirmatn", "IRANSans", "Tahoma", sans-serif;
      box-sizing: border-box;
  }

  .svp-layout {
      display: flex;
      flex-direction: column;
      height: 100%;
  }

  .svp-left {
      display: flex;
      flex-direction: column;
  }

  .svp-video {
      width: 100%;
      height: 150.345px;
      border-radius: 24px;
      border: 2px solid rgba(255, 255, 255, 0.6);
      box-sizing: border-box;
      padding: 0;
      position: relative;
      overflow: hidden;
  }

  .svp-video-poster,
  .svp-video-player {
      width: 100%;
      height: 100%;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background-color: #F6F1FF;
      background-size: cover;
      background-position: center;
      border: none;
      cursor: pointer;
  }

  .svp-video-poster:hover,
  .svp-video-poster:focus,
  .svp-video-poster:active {
      background-color: #F6F1FF;
      box-shadow: none;
      filter: none;
      opacity: 1;
      outline: none;
  }

  .svp-video-player {
      display: block;
  }

  .svp-video-poster.svp-is-disabled {
      cursor: not-allowed;
      opacity: 0.7;
  }

  .svp-play,
  .svp-play-icon {
      width: 57px;
      height: 57px;
      border-radius: 50%;
      background-image: var(--svp-play-icon, url("../images/Subtract.svg"));
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      border: none;
      position: relative;
      display: block;
      box-shadow: 0 10px 18px rgba(48, 16, 85, 0.28);
  }

  .svp-play::before,
  .svp-play-icon::before,
  .svp-play::after,
  .svp-play-icon::after {
      content: none;
  }

  .svp-play-overlay {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background: transparent;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s ease;
      z-index: 2;
  }

  .svp-play-overlay:hover,
  .svp-play-overlay:focus,
  .svp-play-overlay:active {
      background: transparent;
  }

  .svp-play-overlay.is-visible {
      opacity: 1;
      pointer-events: auto;
  }

  .svp-slider {
      display: flex;
      gap: 12px;
      margin-top: 12px;
      overflow-x: auto;
      overflow-y: hidden;
      align-items: center;
      padding: 12px;
      padding-inline-end: 40px;
      background: rgba(255, 255, 255, 0.18);
      border-radius: 18px;
      box-sizing: border-box;
      scroll-snap-type: x mandatory;
      scrollbar-width: thin;
      -webkit-overflow-scrolling: touch;
  }

  .svp-slider.svp-slider-single {
      display: none;
  }

  .svp-thumb {
      width: 140px;
      height: 80px;
      padding: 0;
      box-sizing: border-box;
      border-radius: 18px;
      border: 2px solid transparent;
      background: #EAE2FF;
      background-size: cover;
      background-position: center;
      flex: 0 0 auto;
      cursor: pointer;
      scroll-snap-align: start;
  }

  .svp-right {
      width: 100%;
      height: 220px;
      padding: 16px 14px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .svp-title {
      margin: 0;
      font-size: 18px;
      font-weight: 700;
  }

  .svp-label {
      font-size: 14px;
      font-weight: 600;
      display: none;
  }

  .svp-description {
      margin: 0;
      font-size: 14px;
      line-height: 1.8;
  }

  .svp-teacher {
      display: none;
  }

  .svp-teacher[hidden] {
      display: none !important;
  }

  .svp-teacher img {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.6);
      object-fit: cover;
  }

  @media (max-width: 360px) {
      .svp-card {
          width: 100%;
          max-width: 332px;
          min-height: 370.345px;
          height: auto;
      }

      .svp-right {
          height: 220px;
      }
  }

  @media (min-width: 768px) and (max-width: 991px) {
      .svp-mobile-carousel {
          display: none;
      }

      .svp-desktop {
          display: block;
      }

      .svp-card {
          width: 100%;
          max-width: 920px;
          min-height: 0;
          background: #E5CCFB;
          color: #2d2438;
          padding: 18px;
          border-radius: 24px;
          box-shadow: 0 16px 32px rgba(55, 25, 98, 0.12);
      }

      .svp-layout {
          flex-direction: row;
          gap: 18px;
          align-items: flex-start;
      }

      .svp-left {
          flex: 1 1 56%;
          min-width: 0;
          order: 2;
      }

      .svp-video {
          height: 280px;
          border-radius: 28px;
          border-color: rgba(177, 95, 243, 0.6);
          border-width: 2px;
          background: #E5CCFB;
      }

      .svp-video-poster,
      .svp-video-player {
          border-radius: 22px;
      }

      .svp-slider {
          display: flex;
          margin-top: 10px;
          padding: 10px;
          background: #B15FF3;
          border-radius: 20px;
          scrollbar-width: thin;
      }

      .svp-slider.svp-slider-single {
          display: none;
      }

      .svp-thumb {
          width: 120px;
          height: 72px;
          border-radius: 14px;
          position: relative;
          overflow: hidden;
      }

      .svp-thumb::after {
          content: "";
          position: absolute;
          inset: 0;
          background-image: var(--svp-thumb-icon, url("../images/play.svg"));
          background-repeat: no-repeat;
          background-position: center;
          background-size: 24px 24px;
          opacity: 0.9;
          pointer-events: none;
      }

      .svp-thumb.is-active {
          border-color: #ffffff;
          box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
      }

      .svp-right {
          flex: 0 1 38%;
          min-width: 240px;
          height: auto;
          color: #2d2438;
          padding: 4px 0 0;
          gap: 8px;
          direction: rtl;
          text-align: right;
          order: 1;
      }

      .svp-title {
          font-size: 19px;
      }

      .svp-label {
          display: block;
          color: #6f52a6;
      }

      .svp-description {
          font-size: 14px;
          line-height: 1.8;
      }

      .svp-teacher {
          display: block;
          width: 100%;
          height: auto;
          aspect-ratio: 4 / 2.25;
          border-radius: 28px;
          border: 2px solid #B15FF3;
          box-sizing: border-box;
          overflow: hidden;
          background: #ffffff;
          margin-bottom: 8px;
      }

      .svp-teacher img {
          width: 100%;
          height: 100%;
          border-radius: inherit;
          object-fit: cover;
          border: none;
          display: block;
      }
  }

  @media (min-width: 992px) {
      .svp-mobile-carousel {
          display: none;
      }

      .svp-desktop {
          display: block;
      }

      .svp-card {
          width: 100%;
          max-width: 1220px;
          height: auto;
          background: #E5CCFB;
          color: #2d2438;
          padding: 24px;
          border-radius: 28px;
          box-shadow: 0 20px 40px rgba(55, 25, 98, 0.12);
      }

      .svp-layout {
          flex-direction: row;
          gap: 24px;
          align-items: flex-start;
      }

      .svp-left {
          flex: 1 1 0;
          max-width: 717.6825px;
          min-width: 0;
          order: 2;
      }

      .svp-video {
          width: 100%;
          height: 325px;
          border-radius: 36px;
          border-color: rgba(177, 95, 243, 0.6);
          border-width: 2px;
          box-sizing: border-box;
          padding: 0;
          background: #E5CCFB;
      }

      .svp-video-poster,
      .svp-video-player {
          border-radius: 28px;
      }

      .svp-slider {
          display: flex;
          width: 100%;
          height: 104px;
          gap: 12px;
          margin-top: 12px;
          overflow-x: auto;
          padding: 12px;
          background: #B15FF3;
          border-radius: 24px;
          box-sizing: border-box;
          scrollbar-width: thin;
      }

      .svp-slider.svp-slider-single {
          display: none;
      }

      .svp-thumb {
          width: 140px;
          height: 80px;
          border-radius: 18px;
          border: 2px solid transparent;
          background: #EAE2FF;
          background-size: cover;
          background-position: center;
          flex: 0 0 auto;
          cursor: pointer;
          position: relative;
          overflow: hidden;
      }

      .svp-thumb::after {
          content: "";
          position: absolute;
          inset: 0;
          background-image: var(--svp-thumb-icon, url("../images/play.svg"));
          background-repeat: no-repeat;
          background-position: center;
          background-size: 26px 26px;
          opacity: 0.9;
          pointer-events: none;
      }

      .svp-thumb.is-active {
          border-color: #ffffff;
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
      }

      .svp-right {
          flex: 0 1 418.3175px;
          min-width: 0;
          height: auto;
          color: #2d2438;
          padding: 8px 0 0;
          gap: 10px;
          direction: rtl;
          text-align: right;
          order: 1;
      }

      .svp-title {
          font-size: 20px;
      }

      .svp-label {
          display: block;
          color: #6f52a6;
      }

      .svp-description {
          font-size: 15px;
          line-height: 1.9;
      }

      .svp-teacher {
          display: block;
          width: 100%;
          max-width: 418.3175px;
          height: auto;
          aspect-ratio: 418.3175 / 235.8372;
          border-radius: 36px;
          border: 2px solid #B15FF3;
          box-sizing: border-box;
          overflow: hidden;
          background: #ffffff;
          margin-bottom: 8px;
      }

      .svp-teacher img {
          width: 100%;
          height: 100%;
          border-radius: inherit;
          object-fit: cover;
          border: none;
          display: block;
      }
  }