@push('style')
<style>
  .h-img{
    position: absolute;
    z-index: 1;
    right:0;
  }
  .hero{
    background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);
    background:white;
    min-height:600px;
  }
  .img_cover{
    display: flex;
    align-items:center;
    justify-content: center;
   
    /* background:url('assets/b2c_img/home_background.jpg') */ 
    position: relative;
  }
  .img_cover::before{
    content:"";
    /* background:url('assets/b2c_img/banner_pic.jpg'); */
    background:url('assets/b2c_img/backimg.jpg');
    background-position: center !important;
    background-size: cover !important;
    opacity: 0.2;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

  }
  .dark-mode .img_cover{
    position: relative;
    /* background:url('https://img.freepik.com/free-photo/3d-render-rainbow-coloured-low-poly-plexud-design_1048-13154.jpg?w=996&t=st=1701704946~exp=1701705546~hmac=ee1686fab712ea2d654baea23cb82d88b068a07b3b851f10ede54c0d2d55ee16'); */
    /* background:#16151f ; */
  }
  .dark-mode .img_cover::before{
    content:"";
    background: url('/assets/b2c_img/baneer.jpg');
    inset:0;
    position: absolute;
    opacity: 1;
  }
  .light{
    color: #ffffff;
    -webkit-text-stroke: 1px var(--color-primary);
    letter-spacing: 1px;
    font-size: 35px;
  }
  .swiper-container {
        width: 100%;
        height: 100%;
    }
    .swiper-wrapper{
      padding-left: initial;
      margin: 0;
    }
    
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        width: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .slider_image{
      /* filter:drop-shadow(0 0 20px #fff); */
      max-width :500px;
      width:100%;
      max-height:500px;
      height:100%;
    }
    lottie-player{
      position: relative;
    }
    .slide-img{
      position: absolute;
    }
    .texts{
    color: #000;
    font-size: 32px;
    font-weight:600;
    }
    .dark-mode .texts{
      color:var(--color-primary);
    }
    .typed-cursor{
      font-size:33px;
      color:var(--color-secondary);
    }
    @media screen and (max-width:400px){
      .anim-text{
        margin-top:10px;
      }
    }
    .overlayer_img{
      position: relative;
    }
    .overlayer {
      position: absolute;
      top: 0;
      left: 20px;
      width: 96%;
      height: 100%;
      background: rgba(0, 0, 0, 0);
      transition: background 0.5s ease;
    }
    .overlayer_img:hover .overlayer {
      display: block;
      background: rgba(0, 0, 0, .2);
    }
    .button {
      position: absolute;
      width: 500px;
      left:0;
      top: 50%;
      text-align: center;
      opacity: 0;
      transition: opacity .35s ease;
    }

    .button a {
      width: 150px;
      padding: 12px 30px;
      text-align: center;
      color: white;
      border: solid 2px var(--color-primary);
      background:var(--color-primary);
      z-index: 1;
      border-radius:5px;
    }

    .overlayer_img:hover .button {
      opacity: 1;
    }
</style>
@endpush
  <section class="dt-bg hero img_cover" style="">
    <div class="container" style="margin-top:100px">
      <div class="row g-5 align-items-center">
        <div class="col-lg-6 col-md-6 col-sm-12" data-aos="zoom-out">
        @php
            $title = json_decode($home_slider['title'] ?? '');
        @endphp
          <h1 class="sec-head">{{ $title[0] ?? '' }}<span class="text-primary"> {{ $title[1] ?? '' }} </span></h1>
          <div class="anim-text d-flex">
            <div class="texts"></div>
          </div>
          <!-- <span class="light">Better Future</span> -->
          <p class="dt-p-w">{!! $home_slider['description'] ?? '' !!}</p>
          <button class="default-btn"><a href="{{route('fe.market-place.index')}}" class="text-white">Get Started</a></button>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 " data-aos="zoom-out" data-aos-delay="600">
          <div class="myswiper">
              <div class="swiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide m-auto overlayer_img">
                      <!-- <lottie-player src="{{ asset('assets/b2c_lottie/blob vision.json') }}" background="transparent"  speed="1"  style="width: 500px; height: 500px;" loop autoplay></lottie-player> -->
                      <img class="slider_image" src="{{ $home_slider['image1'] ?? '' }}" alt="slider-1" >
                      <!-- <div class="overlayer"></div>
                      <div class="button">
                        <a href="{{ route('fe.master-live.index')}}">
                          Register Now
                        </a>
                      </div> -->
                  </div>
                  <div class="swiper-slide m-auto overlayer_img">
                      <!-- <lottie-player src="{{ asset('assets/b2c_lottie/circles.json') }}" background="transparent"  speed="1"  style="width: 500px; height: 500px;" loop autoplay></lottie-player> -->
                      <img class="slider_image" src="{{ $home_slider['image2'] ?? '' }}" alt="slider-1" >
                      <!-- <div class="overlayer"></div>
                      <div class="button">
                      <a href="{{ route('fe.master-live.index')}}">
                          Register Now
                        </a>
                      </div> -->
                  </div>
                  <div class="swiper-slide m-auto overlayer_img">
                      <img class="slider_image" src="{{ $home_slider['image3'] ?? '' }}" alt="slider-1" >
                      <!-- <div class="overlayer"></div>
                      <div class="button">
                      <a href="{{ route('fe.master-live.index')}}">
                          Register Now
                        </a>
                      </div> -->
                  </div>
                </div>
              </div>
              <div class="swiper-pagination"></div>
            </div>
        </div>
      </div>
    </div>
    <!-- <div class="shape-1 d-none d-md-block">
          <img src="{{ asset('assets/b2c_img/animation_1.svg') }}" alt="img" /> 
      </div> 
      <div class="shape-2 d-none d-md-block">
          <img src="{{ asset('assets/b2c_img/animation.svg') }}" alt="img" /> 
      </div>
      <div class="shape-3">
        <img src="{{ asset('assets/b2c_img/heart.png') }}" alt="img" width="50" height="50"/> 
      </div>
      <div class="shape-4">
        <img src="{{ asset('assets/b2c_img/injection.svg') }}" alt="img" width="50" height="50"/> 
      </div>
      <div class="shape-5 d-none d-md-block">
        <img src="{{ asset('assets/b2c_img/sethscope.svg') }}" alt="img" width="50" height="50"/> 
      </div> -->
      <div class="shape-6 d-none d-md-block">
        <img src="{{ asset('assets/b2c_img/heart.png') }}" alt="img" width="50" height="50"/> 
      </div>
  </section>
  @push('script')
  <script>  
      const swiper = new Swiper('.swiper', {
      loop: true,
      slidesPerView: 1,
      centeredSlides: true,
      effect: 'fade', 
      fadeEffect: {
        crossFade: true 
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true 
      },
      autoplay: {
        enabled: true,
        delay: 5000
          },
      });
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js" integrity="sha512-BdHyGtczsUoFcEma+MfXc71KJLv/cd+sUsUaYYf2mXpfG/PtBjNXsPo78+rxWjscxUYN2Qr2+DbeGGiJx81ifg==" crossorigin="anonymous"></script>
  <script>
   var subtitle = @json(json_decode($home_slider['subtitle'] ?? ''));
   var typing=new Typed(".texts", {
       strings: ["", subtitle[0], subtitle[1], subtitle[2]],
       typeSpeed: 100,
       backSpeed: 40,
       loop: true,
       showCursor: false
   });
</script>

  @endpush