@extends('frontend.layout.layout')
@section('content')

    <div class="video-container iq-main-slider">
        <video class="video d-block" controls loop>
            <source src="{{Storage::disk('Wasabi')->exists($tvShows->episode[0]->video) ? Storage::disk('Wasabi')->url($tvShows->episode[0]->video) : Storage::disk('Wasabi')->url('content/videos/earth.mp4')}}" type="video/mp4">
        </video>
    </div>
    <div class="main-content">
        <section class="mb-5 popular-seasons">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-3 col-lg-3  d-flex flex-column  justify-content-center align-items-center">
                        <h3 class="text-center">Popular Seasons </h3>
                        <p class="border border-top-0 border-left-0 border-right-0 border-bottom-secondary mt-3">Most Watched Seasons By Day</p>
                        <span class="text-secondary mt-3">View All <i class="fas fa-chevron-right"></i> </span>
                    </div>


                    <div class="col-md-3 col-lg-3">
                        <li class="slide-item" style="list-style-type:none;">

                            <div class="block-images position-relative">
                                <div class="img-box">
                                    <img src="{{Storage::disk('Wasabi')->exists('lg/'.$tvShows->episode[0]->portrait_image) ? Storage::disk('Wasabi')->url('lg/'.$tvShows->episode[0]->portrait_image) : Storage::disk('Wasabi')->url('content/videos/earth.mp4')}}" class="img-fluid"alt="">
                                </div>
                                <div class="block-description">
                                    <h6 class="iq-title"><a href="{{route('showdetails')}}">Inside the Sea</a></h6>
                                    <div class="movie-time d-flex align-items-center my-2">
                                        <div class="badge badge-secondary p-1 mr-2">11+</div>
                                        <span class="text-white">2h 30m</span>
                                    </div>
                                    <div class="hover-buttons">
                                        <a href="{{route('showdetails')}}">
                                     <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                       Play Now</span>

                                        </a>
                                    </div>
                                </div>
                                <div class="block-social-info">
                                    <ul class="list-inline p-0 m-0 music-play-lists">
                                        <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                            <span><i class="fas fa-info-circle" ></i></span>
                                            <!-- <span class="count-box">19+</span> -->
                                        </li>
                                        <li><span><i class="fas fa-thumbs-up"></i></span>
                                            <span class="count-box">19+</span></li>
                                        <li><span><i class="ri-add-line"></i></span></li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                    </div>
                    <div class="col-md-3 col-lg-3">
                        <li class="slide-item" style="list-style-type:none;">

                            <div class="block-images position-relative">
                                <div class="img-box">
                                    <img src="{{asset('frontend/images/favorite/poster2.jpg')}}" class="img-fluid"alt="">
                                </div>
                                <div class="block-description">
                                    <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                    <div class="movie-time d-flex align-items-center my-2">
                                        <div class="badge badge-secondary p-1 mr-2">11+</div>
                                        <span class="text-white">2h 30m</span>
                                    </div>
                                    <div class="hover-buttons">
                                        <a href="show-details.php">
                                     <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                       Play Now</span>

                                        </a>
                                    </div>
                                </div>
                                <div class="block-social-info">
                                    <ul class="list-inline p-0 m-0 music-play-lists">
                                        <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                            <span><i class="fas fa-info-circle" ></i></span>
                                        </li>
                                        <li><span><i class="fas fa-thumbs-up"></i></span>
                                            <span class="count-box">19+</span></li>
                                        <li><span><i class="ri-add-line"></i></span></li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                    </div>
                    <div class="col-md-3 col-lg-3">
                        <li class="slide-item" style="list-style-type:none;">

                            <div class="block-images position-relative">
                                <div class="img-box">
                                    <img src="{{asset('frontend/images/favorite/poster3.jpg')}}" class="img-fluid"alt="">
                                </div>
                                <div class="block-description">
                                    <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                    <div class="movie-time d-flex align-items-center my-2">
                                        <div class="badge badge-secondary p-1 mr-2">11+</div>
                                        <span class="text-white">2h 30m</span>
                                    </div>
                                    <div class="hover-buttons">
                                        <a href="show-details.php">
                                     <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                       Play Now</span>

                                        </a>
                                    </div>
                                </div>
                                <div class="block-social-info">
                                    <ul class="list-inline p-0 m-0 music-play-lists">
                                        <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                            <span><i class="fas fa-info-circle" ></i></span>
                                            <!-- <span class="count-box">19+</span> -->
                                        </li>
                                        <li><span><i class="fas fa-thumbs-up"></i></span>
                                            <span class="count-box">19+</span></li>
                                        <li><span><i class="ri-add-line"></i></span></li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                    </div>
                    <br>
                    <div class="col-md-3 col-lg-3 mt-4">
                        <li class="slide-item" style="list-style-type:none;">

                            <div class="block-images position-relative">
                                <div class="img-box">
                                    <img src="{{asset('frontend/images/favorite/poster4.jpg')}}" class="img-fluid"alt="">
                                </div>
                                <div class="block-description">
                                    <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                    <div class="movie-time d-flex align-items-center my-2">
                                        <div class="badge badge-secondary p-1 mr-2">11+</div>
                                        <span class="text-white">2h 30m</span>
                                    </div>
                                    <div class="hover-buttons">
                                        <a href="show-details.php">
                                     <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                       Play Now</span>

                                        </a>
                                    </div>
                                </div>
                                <div class="block-social-info">
                                    <ul class="list-inline p-0 m-0 music-play-lists">
                                        <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                            <span><i class="fas fa-info-circle" ></i></span>
                                            <!-- <span class="count-box">19+</span> -->
                                        </li>
                                        <li><span><i class="fas fa-thumbs-up"></i></span>
                                            <span class="count-box">19+</span></li>
                                        <li><span><i class="ri-add-line"></i></span></li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                    </div>

                    <div class="col-md-3 col-lg-3  mt-4">
                        <li class="slide-item" style="list-style-type:none;">

                            <div class="block-images position-relative">
                                <div class="img-box">
                                    <img src="{{asset('frontend/images/favorite/poster5.jpg')}}" class="img-fluid"alt="">
                                </div>
                                <div class="block-description">
                                    <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                    <div class="movie-time d-flex align-items-center my-2">
                                        <div class="badge badge-secondary p-1 mr-2">11+</div>
                                        <span class="text-white">2h 30m</span>
                                    </div>
                                    <div class="hover-buttons">
                                        <a href="show-details.php">
                                     <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                       Play Now</span>

                                        </a>
                                    </div>
                                </div>
                                <div class="block-social-info">
                                    <ul class="list-inline p-0 m-0 music-play-lists">
                                        <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                            <span><i class="fas fa-info-circle" ></i></span>
                                            <!-- <span class="count-box">19+</span> -->
                                        </li>
                                        <li><span><i class="fas fa-thumbs-up"></i></span>
                                            <span class="count-box">19+</span></li>
                                        <li><span><i class="ri-add-line"></i></span></li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                    </div>
                    <div class="col-md-3 col-lg-3  mt-4">
                        <li class="slide-item" style="list-style-type:none;">

                            <div class="block-images position-relative">
                                <div class="img-box">
                                    <img src="{{asset('frontend/images/favorite/poster6.jpg')}}" class="img-fluid"alt="">
                                </div>
                                <div class="block-description">
                                    <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                    <div class="movie-time d-flex align-items-center my-2">
                                        <div class="badge badge-secondary p-1 mr-2">11+</div>
                                        <span class="text-white">2h 30m</span>
                                    </div>
                                    <div class="hover-buttons">
                                        <a href="show-details.php">
                                     <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                       Play Now</span>

                                        </a>
                                    </div>
                                </div>
                                <div class="block-social-info">
                                    <ul class="list-inline p-0 m-0 music-play-lists">
                                        <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                            <span><i class="fas fa-info-circle" ></i></span>
                                            <!-- <span class="count-box">19+</span> -->
                                        </li>
                                        <li><span><i class="fas fa-thumbs-up"></i></span>
                                            <span class="count-box">19+</span></li>
                                        <li><span><i class="ri-add-line"></i></span></li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                    </div>

                    <div class="col-md-3 col-lg-3  mt-4">
                        <li class="slide-item" style="list-style-type:none;">

                            <div class="block-images position-relative">
                                <div class="img-box">
                                    <img src="{{asset('frontend/images/favorite/poster7.jpg')}}" class="img-fluid"alt="">
                                </div>
                                <div class="block-description">
                                    <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                    <div class="movie-time d-flex align-items-center my-2">
                                        <div class="badge badge-secondary p-1 mr-2">11+</div>
                                        <span class="text-white">2h 30m</span>
                                    </div>
                                    <div class="hover-buttons">
                                        <a href="show-details.php">
                                     <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                       Play Now</span>

                                        </a>
                                    </div>
                                </div>
                                <div class="block-social-info">
                                    <ul class="list-inline p-0 m-0 music-play-lists">
                                        <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                            <span><i class="fas fa-info-circle" ></i></span>
                                            <!-- <span class="count-box">19+</span> -->
                                        </li>
                                        <li><span><i class="fas fa-thumbs-up"></i></span>
                                            <span class="count-box">19+</span></li>
                                        <li><span><i class="ri-add-line"></i></span></li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-favorites" class="s-margin popular-seasons-slider">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Popular Seasons</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster1.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster2.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster3.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster4.jpg')}}" class="img-fluid"alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster5.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>

                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster6.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster7.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-favorites">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-start ">
                            <h4 class="main-title trending_title" id="trending_title" >Trending </h4>
                            <span class="text-white mt-3 ml-3 trending_explore" id="trending_explore"> <a href="explore.php"> Explore All <i class="fas fa-chevron-right"></i></a> </span>

                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                          <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-upcoming-movie">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Tailored Recommendations</h4>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                          <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="mb-5 big-section">
            <div class="container-fluid">


                <div class="row  h-100 content-section  ">
                    <div class="col-xl-8 col-lg-12 col-md-12 a">
                        <a href="javascript:void(0);">
                            <div class="channel-logo" data-animation-in="fadeInLeft" data-delay-in="0.5">
                                <img src="{{asset('frontend/images/logo.png')}}" class="c-logo" alt="streamit">
                            </div>
                        </a>
                        <h1 class="slider-text big-title title text-uppercase" data-animation-in="fadeInLeft"
                            data-delay-in="0.6">Johnny English</h1>

                        <div class="d-flex flex-wrap align-items-center fadeInLeft animated" data-animation-in="fadeInLeft" style="opacity: 1;">

                            <div class="d-flex align-items-center mt-2 mt-md-3">
                                <span class="badge badge-secondary p-2">18+</span>
                                <span class="ml-3">2 Seasons</span>
                            </div>
                        </div>

                        <p data-animation-in="fadeInUp" data-delay-in="1.2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
                            dummy text ever since the 1500s.
                        </p>
                        <div class="trending-list" data-wp_object-in="fadeInUp" data-delay-in="1.2">
                            <div class="text-primary title starring">
                                Starring: <span class="text-body">Karen Gilchrist, James Earl Jones</span>
                            </div>
                            <div class="text-primary title genres">
                                Genres: <span class="text-body">Action</span>
                            </div>
                            <div class="text-primary title tag">
                                Tags: <span class="text-body">Action, Adventure, Horror</span>
                            </div>
                        </div>
                        <div class="d-flex align-items-center r-mb-23" data-animation-in="fadeInUp" data-delay-in="1.2">
                            <a href="show-details.php" class="btn btn-hover btn-sm iq-button top-slider-btn"><i class="fa fa-play mr-2"
                                                                                                                aria-hidden="true"></i>Play Now</a>
                            <a href="javascript:void(0)" class="btn btn-link">More details</a>
                        </div>


                    </div>


                </div>
            </div>
            <div class=" watch-trailer-btn">
                <div id="fade" onClick="lightbox_close();"></div>

                <a class="video-open playbtn" onclick="lightbox_open();" type="button">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                         x="0px" y="0px" width="80px" height="80px" viewBox="0 0 213.7 213.7"
                         enable-background="new 0 0 213.7 213.7" xml:space="preserve">
                            <polygon class='triangle' fill="none" stroke-width="7" stroke-linecap="round"
                                     stroke-linejoin="round" stroke-miterlimit="10"
                                     points="73.5,62.5 148.5,105.8 73.5,149.1 " />
                        <circle class='circle' fill="none" stroke-width="7" stroke-linecap="round"
                                stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3" />
                         </svg>
                    <span class="w-trailor">Watch Trailer</span>
                </a>
                <div id="fade" onClick="lightbox_close();"></div>


            </div>

        </section>

        <section id="iq-trending1" class="h-100 mt-5 mb-5 w-100" >
            <!-- <div class="iq-main-header d-flex align-items-center justify-content-between">
               <h4 class="main-title">Trending</h4>
            </div> -->
            <div class="trending-contens" style="min-width:100%">

                <ul id="trending-slider1" class="list-inline p-0 m-0  ">
                    <li>
                        <div class="tranding-block position-relative"
                        >
                            <div class="trending-custom-tab">
                                <div class="tab-title-info position-relative invisible">
                                    <ul class="trending-pills d-flex nav nav-pills justify-content-center align-items-center text-center"
                                        role="tablist">

                                        <li class="nav-item">
                                            <a class="nav-link active show" data-toggle="pill" href="#trending-data99" role="tab"
                                               aria-selected="true">Episodes</a>
                                        </li>


                                    </ul>
                                </div>
                                <div class="trending-content">

                                    <div id="trending-data99" class="overlay-tab tab-pane active show fade">
                                        <div
                                            class="trending-info align-items-center w-100 animated fadeInUp">
                                            <a href="show-details.php" tabindex="90">
                                                <div class="channel-logo">
                                                    <img src="{{asset('frontend/images/logo.png')}}" class="c-logo" alt="streamit">
                                                </div>
                                            </a>
                                            <h1 class="trending-text big-title text-uppercase">the hero camp</h1>
                                            <div class="d-flex align-items-center text-white text-detail mb-4">
                                                <span class="season_date">
                                                    2 Seasons
                                                </span>
                                                <span class="trending-year">Feb 2019</span>
                                            </div>
                                            <div class="episodes-contens mt-4">
                                                <div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 mb-0">
                                                    <div class="e-item">
                                                        <div class="block-image position-relative">
                                                            <a href="show-details.php">
                                                                <img src="{{asset('frontend/images/episodes/poster1.jpg')}}" class="img-fluid" alt="">
                                                            </a>
                                                            <div class="episode-play-info">
                                                                <div class="episode-play">
                                                                    <a href="show-details.php" tabindex="0"><i
                                                                            class="ri-play-fill"></i></a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="episodes-description text-body">
                                                            <div class="d-flex align-items-center justify-content-between">
                                                                <a href="show-details.php">Wolves</a>
                                                                <span class="text-primary">2M + Views</span>
                                                            </div>
                                                            <!-- <p class="mb-0">1 Year Ago
                                                            </p> -->
                                                        </div>
                                                    </div>
                                                    <div class="e-item">
                                                        <div class="block-image position-relative">
                                                            <a href="show-details.php">
                                                                <img src="{{asset('frontend/images/episodes/poster2.jpg')}}" class="img-fluid" alt="">
                                                            </a>
                                                            <div class="episode-play-info">
                                                                <div class="episode-play">
                                                                    <a href="show-details.php" tabindex="0"><i
                                                                            class="ri-play-fill"></i></a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="episodes-description text-body">
                                                            <div class="d-flex align-items-center justify-content-between">
                                                                <a href="show-details.php">Oblivion</a>
                                                                <span class="text-primary">2M + Views</span>
                                                            </div>
                                                            <!-- <p class="mb-0">1 Year Ago
                                                            </p> -->
                                                        </div>
                                                    </div>
                                                    <div class="e-item">
                                                        <div class="block-image position-relative">
                                                            <a href="show-details.php">
                                                                <img src="{{asset('frontend/images/episodes/poster3.jpg')}}" class="img-fluid" alt="">
                                                            </a>
                                                            <div class="episode-play-info">
                                                                <div class="episode-play">
                                                                    <a href="show-details.php" tabindex="0"><i
                                                                            class="ri-play-fill"></i></a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="episodes-description text-body">
                                                            <div class="d-flex align-items-center justify-content-between">
                                                                <a href="show-details.php">Carrie</a>
                                                                <span class="text-primary">2M + Views</span>
                                                            </div>
                                                            <!-- <p class="mb-0">1 Year Ago
                                                            </p> -->
                                                        </div>
                                                    </div>
                                                    <div class="e-item">
                                                        <div class="block-image position-relative">
                                                            <a href="show-details.php">
                                                                <img src="{{asset('frontend/images/episodes/poster4.jpg')}}" class="img-fluid" alt="">
                                                            </a>
                                                            <div class="episode-play-info">
                                                                <div class="episode-play">
                                                                    <a href="show-details.php" tabindex="0"><i
                                                                            class="ri-play-fill"></i></a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="episodes-description text-body">
                                                            <div class="d-flex align-items-center justify-content-between">
                                                                <a href="show-details.php">Stephen King</a>
                                                                <span class="text-primary">2M + Views</span>
                                                            </div>
                                                            <!-- <p class="mb-0">1 Year Ago
                                                            </p> -->
                                                        </div>
                                                    </div>
                                                    <div class="e-item">
                                                        <div class="block-image position-relative">
                                                            <a href="show-details.php">
                                                                <img src="{{asset('frontend/images/episodes/poster5.jpg')}}" class="img-fluid" alt="">
                                                            </a>
                                                            <div class="episode-play-info">
                                                                <div class="episode-play">
                                                                    <a href="show-details.php" tabindex="0"><i
                                                                            class="ri-play-fill"></i></a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="episodes-description text-body">
                                                            <div class="d-flex align-items-center justify-content-between">
                                                                <a href="show-details.php">Insidious</a>
                                                                <span class="text-primary">2M + Views</span>
                                                            </div>
                                                            <!-- <p class="mb-0">1 Year Ago
                                                            </p> -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </section>

        <section class="mb-5 horror-seasons">
            <div class="container-fluid">
                <div class="row">

                    <div class="col-md-3 col-lg-3  d-flex flex-column  justify-content-center align-items-center">
                        <h3 class="text-center">Popular Horror Seasons </h3>
                        <p class="border border-top-0 border-left-0 border-right-0 border-bottom-secondary mt-3">Most Watched Horror Seasons</p>
                        <span class="text-secondary mt-3">View All <i class="fas fa-chevron-right"></i> </span>
                    </div>



                    <div class="col-md-3 col-lg-3">
                        <li class="slide-item" style="list-style-type:none;">

                            <div class="block-images position-relative">
                                <div class="img-box">
                                    <img src="{{asset('frontend/images/favorite/poster22.jpg')}}" class="img-fluid" alt="">
                                </div>
                                <div class="block-description">
                                    <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                    <div class="movie-time d-flex align-items-center my-2">
                                        <div class="badge badge-secondary p-1 mr-2">11+</div>
                                        <span class="text-white">2h 30m</span>
                                    </div>
                                    <div class="hover-buttons">
                                        <a href="show-details.php">
                                     <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                       Play Now</span>

                                        </a>
                                    </div>
                                </div>
                                <div class="block-social-info">
                                    <ul class="list-inline p-0 m-0 music-play-lists">

                                        <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                            <span><i class="fas fa-info-circle" ></i></span>
                                            <!-- <span class="count-box">19+</span> -->
                                        </li>
                                        <li><span><i class="fas fa-thumbs-up"></i></span>
                                            <span class="count-box">19+</span></li>
                                        <li><span><i class="ri-add-line"></i></span></li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                    </div>
                    <div class="col-md-3 col-lg-3">
                        <li class="slide-item" style="list-style-type:none;">

                            <div class="block-images position-relative">
                                <div class="img-box">
                                    <img src="{{asset('frontend/images/favorite/poster33.jpg')}}" class="img-fluid" alt="">
                                </div>
                                <div class="block-description">
                                    <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                    <div class="movie-time d-flex align-items-center my-2">
                                        <div class="badge badge-secondary p-1 mr-2">11+</div>
                                        <span class="text-white">2h 30m</span>
                                    </div>
                                    <div class="hover-buttons">
                                        <a href="show-details.php">
                                     <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                       Play Now</span>

                                        </a>
                                    </div>
                                </div>
                                <div class="block-social-info">
                                    <ul class="list-inline p-0 m-0 music-play-lists">

                                        <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                            <span><i class="fas fa-info-circle" ></i></span>
                                            <!-- <span class="count-box">19+</span> -->
                                        </li>
                                        <li><span><i class="fas fa-thumbs-up"></i></span>
                                            <span class="count-box">19+</span></li>
                                        <li><span><i class="ri-add-line"></i></span></li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                    </div>
                    <br>
                    <div class="col-md-3 col-lg-3 ">
                        <li class="slide-item" style="list-style-type:none;">

                            <div class="block-images position-relative">
                                <div class="img-box">
                                    <img src="{{asset('frontend/images/favorite/poster44.jpg')}}" class="img-fluid" alt="">

                                </div>
                                <div class="block-description">
                                    <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                    <div class="movie-time d-flex align-items-center my-2">
                                        <div class="badge badge-secondary p-1 mr-2">11+</div>
                                        <span class="text-white">2h 30m</span>
                                    </div>
                                    <div class="hover-buttons">
                                        <a href="show-details.php">
                                     <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                       Play Now</span>

                                        </a>
                                    </div>
                                </div>
                                <div class="block-social-info">
                                    <ul class="list-inline p-0 m-0 music-play-lists">

                                        <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                            <span><i class="fas fa-info-circle" ></i></span>
                                            <!-- <span class="count-box">19+</span> -->
                                        </li>
                                        <li><span><i class="fas fa-thumbs-up"></i></span>
                                            <span class="count-box">19+</span></li>
                                        <li><span><i class="ri-add-line"></i></span></li>
                                    </ul>
                                </div>
                            </div>

                        </li>
                    </div>
                </div>


            </div>
        </section>

        <section  class="s-margin  horror-seasons-slider">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Popular Horror Drama</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster1.jpg')}}" class="img-fluid"alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster2.jpg')}}" class="img-fluid"alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster3.jpg')}}" class="img-fluid"alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster4.jpg')}}" class="img-fluid"alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster5.jpg')}}" class="img-fluid"alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>

                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster6.jpg')}}" class="img-fluid"alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/favorite/poster7.jpg')}}" class="img-fluid"alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="parallex" class="parallax-window">
            <div class="container-fluid h-100">
                <div class="row align-items-center justify-content-center h-100 parallaxt-details">
                    <div class="col-lg-4 r-mb-23">
                        <div class="text-left">
                            <a href="javascript:void(0);">
                                <img src="{{asset('frontend/images/parallax/parallax-logo.png')}}" class="img-fluid" alt="bailey">
                            </a>
                            <div class="movie-time d-flex align-items-center mb-3 mt-3">
                                <div class="badge badge-secondary mr-3">13+</div>
                                <h6 class="text-white">2h 30m</h6>
                            </div>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
                            <div class="parallax-buttons">
                                <a href="show-details.php" class="btn btn-hover btn-sm iq-button top-slider-btn">Play Now</a>
                                <!-- <a href="show-details.php" class="btn btn-link">More details</a> -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="parallax-img">
                            <a href="show-details.php">
                                <video   controls muted loop src="{{asset('frontend/video/trailer3.mp4')}}"  alt="video" volume="0.2"></video>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="mb-5 mt-5 big-section1">
            <div class="container-fluid">


                <div class="row  h-100 content-section ">
                    <div class="col-xl-8 col-lg-12 col-md-12  a">
                        <a href="javascript:void(0);">
                            <div class="channel-logo" data-animation-in="fadeInLeft" data-delay-in="0.5">
                                <img src="{{asset('frontend/images/logo.png')}}" class="c-logo" alt="streamit">
                            </div>
                        </a>
                        <h1 class="slider-text big-title title text-uppercase" data-animation-in="fadeInLeft"
                            data-delay-in="0.6">Inception</h1>

                        <div class="d-flex flex-wrap align-items-center fadeInLeft animated" data-animation-in="fadeInLeft" style="opacity: 1;">

                            <div class="d-flex align-items-center mt-2 mt-md-3">
                                <span class="badge badge-secondary p-2">18+</span>
                                <span class="ml-3">2 Seasons</span>
                            </div>
                        </div>

                        <p data-animation-in="fadeInUp" data-delay-in="1.2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
                            dummy text ever since the 1500s.
                        </p>
                        <div class="trending-list" data-wp_object-in="fadeInUp" data-delay-in="1.2">
                            <div class="text-primary title starring">
                                Starring: <span class="text-body">Karen Gilchrist, James Earl Jones</span>
                            </div>
                            <div class="text-primary title genres">
                                Genres: <span class="text-body">Action</span>
                            </div>
                            <div class="text-primary title tag">
                                Tags: <span class="text-body">Action, Adventure, Horror</span>
                            </div>
                        </div>
                        <div class="d-flex align-items-center r-mb-23" data-animation-in="fadeInUp" data-delay-in="1.2">
                            <a href="show-details.php" class="btn btn-hover btn-sm iq-button top-slider-btn"><i class="fa fa-play mr-2"
                                                                                                                aria-hidden="true"></i>Play Now</a>
                            <a href="javascript:void(0)" class="btn btn-link">More details</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-right p-5 mr-5">
                <a class="video-open playbtn"  type="button">
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                         x="0px" y="0px" width="80px" height="80px" viewBox="0 0 213.7 213.7"
                         enable-background="new 0 0 213.7 213.7" xml:space="preserve">
                            <polygon class='triangle' fill="none" stroke-width="7" stroke-linecap="round"
                                     stroke-linejoin="round" stroke-miterlimit="10"
                                     points="73.5,62.5 148.5,105.8 73.5,149.1 " />
                        <circle class='circle' fill="none" stroke-width="7" stroke-linecap="round"
                                stroke-linejoin="round" stroke-miterlimit="10" cx="106.8" cy="106.8" r="103.3" />
                         </svg>
                    <span class="w-trailor">Watch Trailer</span>
                </a>
            </div>

        </section>

        <section id="iq-suggestede" class="s-margin">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Upcoming Shows</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                          <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-suggestede" class="s-margin">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Suggested For You</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                          <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="fas fa-thumbs-up"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-suggestede" class="s-margin">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Comedy Thrillers</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                          <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-suggestede" class="s-margin">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Romance</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                          <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-suggestede" class="s-margin">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Suspense / Horror</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                          <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section id="iq-suggestede" class="s-margin">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-12 overflow-hidden">
                        <div class="iq-main-header d-flex align-items-center justify-content-between">
                            <h4 class="main-title">Action & Adventure</h4>
                            <a class="iq-view-all" href="movie-category.php">View All</a>
                        </div>
                        <div class="suggestede-contens">
                            <ul class="list-inline favorites-slider row p-0 mb-0">
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/01.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Inside the Sea</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">11+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                          <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <!-- <li class="share">
                                                    <span><i class="ri-share-fill"></i></span>
                                                    <div class="share-box">
                                                       <div class="d-flex align-items-center">
                                                          <a href="https://www.facebook.com/sharer?u=https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-facebook-fill"></i></a>
                                                          <a href="https://twitter.com/intent/tweet?text=Currentlyreading" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-twitter-fill"></i></a>
                                                          <a href="#" data-link="https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" class="share-ico iq-copy-link" tabindex="0"><i class="ri-links-fill"></i></a>
                                                       </div>
                                                    </div>
                                                 </li> -->
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/02.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Jumbo Queen</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">9+</div>
                                                <span class="text-white">2 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button "><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">

                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/03.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Unknown Land</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">17+</div>
                                                <span class="text-white">2h 30m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <!-- <li class="share">
                                                    <span><i class="ri-share-fill"></i></span>
                                                    <div class="share-box">
                                                       <div class="d-flex align-items-center">
                                                          <a href="https://www.facebook.com/sharer?u=https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-facebook-fill"></i></a>
                                                          <a href="https://twitter.com/intent/tweet?text=Currentlyreading" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-twitter-fill"></i></a>
                                                          <a href="#" data-link="https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" class="share-ico iq-copy-link" tabindex="0"><i class="ri-links-fill"></i></a>
                                                       </div>
                                                    </div>
                                                 </li> -->
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                                <li class="slide-item">
                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/04.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Friends</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">14+</div>
                                                <span class="text-white">10 Seasons</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <!-- <li class="share">
                                                    <span><i class="ri-share-fill"></i></span>
                                                    <div class="share-box">
                                                       <div class="d-flex align-items-center">
                                                          <a href="https://www.facebook.com/sharer?u=https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-facebook-fill"></i></a>
                                                          <a href="https://twitter.com/intent/tweet?text=Currentlyreading" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-twitter-fill"></i></a>
                                                          <a href="#" data-link="https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" class="share-ico iq-copy-link" tabindex="0"><i class="ri-links-fill"></i></a>
                                                       </div>
                                                    </div>
                                                 </li> -->
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                                <li class="slide-item">

                                    <div class="block-images position-relative">
                                        <div class="img-box">
                                            <img src="{{asset('frontend/images/suggested/05.jpg')}}" class="img-fluid" alt="">
                                        </div>
                                        <div class="block-description">
                                            <h6 class="iq-title"><a href="show-details.php">Blood Block</a></h6>
                                            <div class="movie-time d-flex align-items-center my-2">
                                                <div class="badge badge-secondary p-1 mr-2">13+</div>
                                                <span class="text-white">2h 40m</span>
                                            </div>
                                            <div class="hover-buttons">
                                                <a href="show-details.php">
                                        <span class="btn btn-hover iq-button"><i class="fa fa-play mr-1" aria-hidden="true"></i>
                                          Play Now</span>

                                                </a>
                                            </div>
                                        </div>
                                        <div class="block-social-info">
                                            <ul class="list-inline p-0 m-0 music-play-lists">
                                                <!-- <li class="share">
                                                    <span><i class="ri-share-fill"></i></span>
                                                    <div class="share-box">
                                                       <div class="d-flex align-items-center">
                                                          <a href="https://www.facebook.com/sharer?u=https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-facebook-fill"></i></a>
                                                          <a href="https://twitter.com/intent/tweet?text=Currentlyreading" target="_blank" rel="noopener noreferrer" class="share-ico" tabindex="0"><i class="ri-twitter-fill"></i></a>
                                                          <a href="#" data-link="https://iqonic.design/wp-themes/streamit_wp/movie/shadow/" class="share-ico iq-copy-link" tabindex="0"><i class="ri-links-fill"></i></a>
                                                       </div>
                                                    </div>
                                                 </li> -->
                                                <li data-toggle="modal" data-target="#exampleModalCenter" role="button">
                                                    <span><i class="fas fa-info-circle" ></i></span>
                                                    <!-- <span class="count-box">19+</span> -->
                                                </li>
                                                <li><span><i class="ri-heart-fill"></i></span>
                                                    <span class="count-box">19+</span></li>
                                                <li><span><i class="ri-add-line"></i></span></li>
                                            </ul>
                                        </div>
                                    </div>

                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content" style="background:#191919">
                    <div class="modal-header">
                        <!-- <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> -->
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div>
                        <video  muted loop controls class="w-100" id="modal-video" >
                            <source src="{{asset('frontend/video/trailer1.mp4')}}" type="video/mp4">
                            Your browser does not support HTML5 video.
                        </video>
                    </div>
                    <div class=" p-4 mt-4">


                        <div class="iq-card">

                            <div class="iq-card-body">


                                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Season 1</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Season 2</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Season 3</a>
                                    </li>

                                </ul>

                                <div class="tab-content" id="pills-tabContent-2">
                                    <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">

                                        <div class="row">
                                            <div class="col-lg-6 col-md-6">
                                                <div class="d-flex justify-content-start align-items-center">
                                                    <p class="mr-3">2021</p>
                                                    <p class="bg-secondary p-1 text-white mr-3">16+</p>
                                                    <!-- <p>3 Seasons</p> -->
                                                    <p class="bg-secondary text-white mr-3 p-1">HD</p>
                                                    <!-- <badge class="badge-primary p-1 rounded">Follow</badge> -->
                                                    <p class="rounded"><a href="#" class="btn btn-hover top-slider-btn btn-sm" > Follow</a></p>
                                                    <!-- <p>HD</p>-->
                                                </div>
                                                <p>It's Offical ! Another Season Is Coming</p>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, nobis!</p>
                                            </div>
                                            <div class="col-lg-6 col-md-6 ">
                                                <p class="font-size-14"><span class=" font-size-16">Cast:</span> Ryan Gosling, Emma Watson, Ryan Reynolds</p>
                                                <p class="font-size-14"><span class=" font-size-16">Genres:</span> Comedy , Action</p>
                                                <p class="font-size-14"><span class=" font-size-16">This show is:</span> Emotional</p>
                                                <p class="font-size-14"><span class=" font-size-16">Publisher:</span> John Doe</p>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6">
                                                <div class="d-flex justify-content-start align-items-center">
                                                    <p class="mr-3">2021</p>
                                                    <p class="bg-secondary p-1 text-white mr-3">16+</p>
                                                    <!-- <p>3 Seasons</p> -->
                                                    <p class="bg-secondary text-white mr-3 p-1">HD</p>
                                                    <!-- <badge class="badge-primary p-1 rounded">Follow</badge> -->
                                                    <p class="rounded"><a href="#" class="btn btn-hover top-slider-btn btn-sm" > Follow</a></p>
                                                    <!-- <p>HD</p>-->
                                                </div>
                                                <p>It's Offical ! Another Season Is Coming</p>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, nobis!</p>
                                            </div>
                                            <div class="col-lg-6 col-md-6">
                                                <p class="font-size-14"><span class=" font-size-16">Cast:</span> Ryan Gosling, Emma Watson, Ryan Reynolds</p>
                                                <p class="font-size-14"><span class=" font-size-16">Genres:</span> Comedy , Action</p>
                                                <p class="font-size-14"><span class=" font-size-16">This show is:</span> Emotional</p>
                                                <p class="font-size-14"><span class=" font-size-16">Publisher:</span> John Doe</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
                                        <div class="row">
                                            <div class="col-lg-6 col-md-6">
                                                <div class="d-flex justify-content-start align-items-center">
                                                    <p class="mr-3">2021</p>
                                                    <p class="bg-secondary p-1 text-white mr-3">16+</p>
                                                    <!-- <p>3 Seasons</p> -->
                                                    <p class="bg-secondary text-white mr-3 p-1">HD</p>
                                                    <!-- <badge class="badge-primary p-1 rounded">Follow</badge> -->
                                                    <p class="rounded"><a href="#" class="btn btn-hover top-slider-btn btn-sm" > Follow</a></p>
                                                    <!-- <p>HD</p>-->
                                                </div>
                                                <p>It's Offical ! Another Season Is Coming</p>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, nobis!</p>
                                            </div>
                                            <div class="col-lg-6 col-md-6">
                                                <p class="font-size-14"><span class=" font-size-16">Cast:</span> Ryan Gosling, Emma Watson, Ryan Reynolds</p>
                                                <p class="font-size-14"><span class=" font-size-16">Genres:</span> Comedy , Action</p>
                                                <p class="font-size-14"><span class=" font-size-16">This show is:</span> Emotional</p>
                                                <p class="font-size-14"><span class=" font-size-16">Publisher:</span> John Doe</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <h3>Episodes</h3>
                                <div class="iq-card mt-3">
                                    <div class="iq-card-body">
                                        <div class="row mb-4">
                                            <div class="col-lg-4 col-md-4">
                                                <div class="e-item">

                                                    <div class="block-image position-relative">
                                                        <a href="show-details.php">
                                                            <img src="{{asset('frontend/images/episodes/poster1.jpg')}}" class="img-fluid" alt="">
                                                        </a>
                                                        <div class="episode-play-info" style="opacity:1" style="opacity:1">
                                                            <div class="episode-play">
                                                                <a href="show-details.php" tabindex="0"><i
                                                                        class="ri-play-fill"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="col-lg-8 col-md-8 ">
                                                <div class="d-flex justify-content-between">
                                                    <h5 style="text-align:left">Episode 1</h5>
                                                    <h6>33m</h6>

                                                </div>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus facere ut aliquid perferendis voluptates iste temporibus molestiae quibusdam iure at.</p>
                                                <!-- <badge class="badge-primary p-1 rounded">Follow</badge> -->
                                                <!-- <span>Publisher  : John Doe</span> -->
                                            </div>
                                        </div>
                                        <div class="row mb-4">
                                            <div class="col-lg-4 col-md-4">
                                                <div class="e-item">

                                                    <div class="block-image position-relative">
                                                        <a href="show-details.php">
                                                            <img src="{{asset('frontend/images/episodes/poster2.jpg')}}" class="img-fluid" alt="">
                                                        </a>
                                                        <div class="episode-play-info" style="opacity:1">
                                                            <div class="episode-play">
                                                                <a href="show-details.php" tabindex="0"><i
                                                                        class="ri-play-fill"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-8 col-md-8 ">
                                                <div class="d-flex justify-content-between">
                                                    <h5 style="text-align:left">Episode 2</h5>
                                                    <h6>33m</h6>

                                                </div>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus facere ut aliquid perferendis voluptates iste temporibus molestiae quibusdam iure at.</p>
                                                <!-- <badge class="badge-primary p-1 rounded">Follow</badge> -->
                                                <!-- <span>Publisher  : John Doe</span> -->
                                            </div>
                                        </div>

                                        <div class="row mb-4">
                                            <div class="col-lg-4 col-md-4">
                                                <div class="e-item">

                                                    <div class="block-image position-relative">
                                                        <a href="show-details.php">
                                                            <img src="{{asset('frontend/images/episodes/poster3.jpg')}}" class="img-fluid" alt="">
                                                        </a>
                                                        <div class="episode-play-info" style="opacity:1">
                                                            <div class="episode-play">
                                                                <a href="show-details.php" tabindex="0"><i
                                                                        class="ri-play-fill"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-8 col-md-8   ">
                                                <div class="d-flex justify-content-between">
                                                    <h5 style="text-align:left">Episode 3</h5>
                                                    <h6>33m</h6>

                                                </div>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus facere ut aliquid perferendis voluptates iste temporibus molestiae quibusdam iure at.</p>
                                                <!-- <badge class="badge-primary p-1 rounded">Follow</badge> -->
                                                <!-- <span>Publisher  : John Doe</span> -->
                                            </div>
                                        </div>


                                        <div class="row mb-4">
                                            <div class="col-lg-4 col-md-4">
                                                <div class="e-item">

                                                    <div class="block-image position-relative">
                                                        <a href="show-details.php">
                                                            <img src="{{asset('frontend/images/episodes/poster4.jpg')}}" class="img-fluid" alt="">
                                                        </a>
                                                        <div class="episode-play-info" style="opacity:1">
                                                            <div class="episode-play">
                                                                <a href="show-details.php" tabindex="0"><i
                                                                        class="ri-play-fill"></i></a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-8 col-md-8   ">
                                                <div class="d-flex justify-content-between">
                                                    <h5 style="text-align:left">Episode 4</h5>
                                                    <h6>33m</h6>

                                                </div>
                                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus facere ut aliquid perferendis voluptates iste temporibus molestiae quibusdam iure at.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection