?
<!-- Hero Section with Slider -->
<section class="homeslider">
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel " data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel " data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel " data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/userassets/slider4.jpg" class="d-block w-100" alt="Hero Slide 1">
<div class="shape-image-animation bottom-0 p-0 w-100 d-none d-md-block">
<svg xmlns="http://www.w3.org/2000/svg" widht="3000" height="180" viewBox="0 180 2500 200" fill="#ffffff">
<path class="st1" d="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250">
<animate attributeName="d" dur="5s" values="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250;
M 0 250 C 400 50 400 400 3000 250 L 3000 550 L 0 550 L 0 250;
M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250" repeatCount="indefinite"></animate>
</path>
</svg>
</div>
<div class="carousel-caption ">
<div class="hero-text">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12" >
<h1 class="fade-in">Uncovering the Truth Behind Every Face</h1>
<h5 class="">Trusted Domestic Investigation Agency Serving All of Canada</h5>
<div class="d-flex slider-btn mt-4 gap-4">
<a href="#" class="btn btn-primary fade-in"><i class="feather icon-feather-phone-call"></i> Request Free Consultation</a>
<a href="#" class=" btn-outline-light fade-in"><i class="feather icon-feather-user"></i>Talk to an Investigator</a>
</div>
</div> </div> </div>
</div>
</div>
<div class="carousel-item">
<img src="assets/userassets/slider.png" class="d-block w-100" alt="Hero Slide 1">
<img src="assets/userassets/slider.png" class="d-block w-100" alt="Hero Slide 1">
<div class="shape-image-animation bottom-0 p-0 w-100 d-none d-md-block">
<svg xmlns="http://www.w3.org/2000/svg" widht="3000" height="180" viewBox="0 180 2500 200" fill="#ffffff">
<path class="st1" d="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250">
<animate attributeName="d" dur="5s" values="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250;
M 0 250 C 400 50 400 400 3000 250 L 3000 550 L 0 550 L 0 250;
M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250" repeatCount="indefinite"></animate>
</path>
</svg>
</div>
<div class="carousel-caption ">
<div class="hero-text">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12" >
<h1 class="fade-in">Uncovering the Truth Behind Every Face</h1>
<h5 class="">Trusted Domestic Investigation Agency Serving All of Canada</h5>
<div class="d-flex slider-btn mt-4 gap-4">
<a href="#" class="btn btn-primary fade-in"><i class="feather icon-feather-phone-call"></i> Request Free Consultation</a>
<a href="#" class=" btn-outline-light fade-in"><i class="feather icon-feather-user"></i>Talk to an Investigator</a>
</div>
</div> </div> </div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel " data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel " data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>