<div class="form-switch switch-primary d-flex align-items-center gap-3">
      <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked>
      <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1">Switch Active</label>
    </div>  
    <div class="form-switch switch-purple d-flex align-items-center gap-3">
      <input class="form-check-input" type="checkbox" role="switch" id="switch2" checked>
      <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch2">Switch Active</label>
    </div>  
    <div class="form-switch switch-success d-flex align-items-center gap-3">
      <input class="form-check-input" type="checkbox" role="switch" id="switch3" checked>
      <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch3">Switch Active</label>
    </div>  
    <div class="form-switch switch-warning d-flex align-items-center gap-3">
      <input class="form-check-input" type="checkbox" role="switch" id="switch4" checked>
      <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch4">Switch Active</label>
    </div>
                

  <div class="arrow-carousel">
    <div class="gradient-overlay bottom-0 start-0 h-100">
        <img src="assets/images/carousel/carousel-img2.png" alt="" class="w-100 h-100 object-fit-cover">
        <div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
            <h5 class="card-title text-white text-lg mb-6">Carousel Slide One</h5>
            <p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
        </div>
    </div>
    <div class="gradient-overlay bottom-0 start-0 h-100">
        <img src="assets/images/carousel/carousel-img4.png" alt="" class="w-100 h-100 object-fit-cover">
        <div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
            <h5 class="card-title text-white text-lg mb-6">Carousel Slide Two</h5>
            <p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
        </div>
    </div>
    <div class="gradient-overlay bottom-0 start-0 h-100">
        <img src="assets/images/carousel/carousel-img3.png" alt="" class="w-100 h-100 object-fit-cover">
        <div class="position-absolute start-50 translate-middle-x bottom-0 pb-24 z-1 text-center w-100 max-w-440-px">
            <h5 class="card-title text-white text-lg mb-6">Carousel Slide Three</h5>
            <p class="card-text text-white mx-auto text-sm">User Interface (UI) and User Experience (UX) Design play key roles in the experience users have when </p>
        </div>
    </div>
  </div>
                

  // Arrow Carousel
  $('.arrow-carousel').slick({
      infinite: true,
      slidesToShow: 1,
      slidesToScroll: 1, 
      arrows: true, 
      dots: false,
      infinite: true,
      autoplay: false,
      autoplaySpeed: 2000,
      speed: 600,
      prevArrow: '',
      nextArrow: '',
  });
                

  <div class="position-relative">
    <img src="assets/images/videos/video-img1.png" class="w-100 h-100 object-fit-cover radius-8" alt="">
    <a href="https://www.youtube.com/watch?v=Vr9WoWXkKeE" class="magnific-video bordered-shadow w-56-px h-56-px bg-white rounded-circle d-flex justify-content-center align-items-center position-absolute start-50 top-50 translate-middle z-1">
      <iconify-icon icon="ion:play" class="text-primary-600 text-xxl"></iconify-icon>
    </a>
  </div>
                

  // ========================= magnific Popup Icon Js Start =====================
  $('.magnific-video').magnificPopup({
    type:'iframe'
  });
  // ========================= magnific Popup Icon Js End =====================
                

  <div class="upload-image-wrapper d-flex align-items-center gap-3 flex-wrap">
    <div class="uploaded-imgs-container d-flex gap-3 flex-wrap"></div>
    <label class="upload-file-multiple h-120-px w-120-px border input-form-light radius-8 overflow-hidden border-dashed bg-neutral-50 bg-hover-neutral-200 d-flex align-items-center flex-column justify-content-center gap-1" for="upload-file-multiple">
      <iconify-icon icon="solar:camera-outline" class="text-xl text-secondary-light"></iconify-icon>
      <span class="fw-semibold text-secondary-light">Upload</span>
      <input id="upload-file-multiple" type="file" hidden multiple/>
    </label>
  </div>
                

    // ================================================ Upload Multiple image js Start here ================================================
    const fileInputMultiple = document.getElementById("upload-file-multiple");
    const uploadedImgsContainer = document.querySelector(".uploaded-imgs-container");
  
    fileInputMultiple.addEventListener("change", (e) => {
      const files = e.target.files;
  
      Array.from(files).forEach(file => {
        const src = URL.createObjectURL(file);
  
        const imgContainer = document.createElement('div');
        imgContainer.classList.add('position-relative', 'h-120-px', 'w-120-px', 'border', 'input-form-light', 'radius-8', 'overflow-hidden', 'border-dashed', 'bg-neutral-50');
  
        const removeButton = document.createElement('button');
        removeButton.type = 'button';
        removeButton.classList.add('uploaded-img__remove', 'position-absolute', 'top-0', 'end-0', 'z-1', 'text-2xxl', 'line-height-1', 'me-8', 'mt-8', 'd-flex');
        removeButton.innerHTML = '';
  
        const imagePreview = document.createElement('img');
        imagePreview.classList.add('w-100', 'h-100', 'object-fit-cover');
        imagePreview.src = src;
  
        imgContainer.appendChild(removeButton);
        imgContainer.appendChild(imagePreview);
        uploadedImgsContainer.appendChild(imgContainer);
  
        removeButton.addEventListener('click', () => {
          URL.revokeObjectURL(src);
          imgContainer.remove();
        });
      });
  
      // Clear the file input so the same file(s) can be uploaded again if needed
      fileInputMultiple.value = '';
    });
    // ================================================ Upload Multiple image js End here  ================================================