<div class="w-full overflow-hidden carousel">
   <div class="box-border relative flex flex-none w-full carousel-item snap-start" id="slide1">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/1.jpg" alt="nature">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slide4">❮</a>
         <a class="btn" href="#slide2">❯</a>
      </div>
   </div>
   <div class="box-border relative flex flex-none w-full carousel-item snap-start" id="slide2">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/2.jpg" alt="butterfly">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slide1">❮</a>
         <a class="btn" href="#slide3">❯</a>
      </div>
   </div>
   <div class="box-border relative flex flex-none w-full carousel-item snap-start" id="slide3">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/3.jpg" alt="sky view">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slide2">❮</a>
         <a class="btn" href="#slide4">❯</a>
      </div>
   </div>
   <div class="box-border relative flex flex-none w-full carousel-item snap-start" id="slide4">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/4.jpg" alt="tree">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slide3">❮</a>
         <a class="btn" href="#slide1">❯</a>
      </div>
   </div>
</div> 

 <div class="w-full overflow-hidden carousel">
   <div class="box-border flex flex-none w-full carousel-item snap-start" id="item1">
       <img class="w-full h-[250px] xl:h-[184px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/3.jpg" alt="SKY VIEW">
   </div>
   <div class="box-border flex flex-none w-full carousel-item snap-start" id="item2">
       <img class="w-full h-[250px] xl:h-[184px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/4.jpg" alt="tree">
   </div>
   <div class="box-border flex flex-none w-full carousel-item snap-start" id="item3">
       <img class="w-full h-[250px] xl:h-[184px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/1.jpg" alt="nature">
   </div>
   <div class="box-border flex flex-none w-full carousel-item snap-start" id="item4">
       <img class="w-full h-[250px] xl:h-[184px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/2.jpg" alt="butterfly">
   </div>
</div>
<div class="flex justify-center w-full gap-2 pt-2">
   <a class="text-white btn btn-xs bg-primary" href="#item1">1</a>
   <a class="text-white btn btn-xs bg-primary" href="#item2">2</a>
   <a class="text-white btn btn-xs bg-primary" href="#item3">3</a>
   <a class="text-white btn btn-xs bg-primary" href="#item4">4</a>
</div>

 <div class="w-full overflow-hidden carousel">
   <div class="box-border flex flex-none w-full carousel-item snap-start" id="slide-1">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/2.jpg" alt="butterfly">
   </div>
   <div class="box-border flex flex-none w-full carousel-item snap-start" id="slide-2">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/1.jpg" alt="nature">
   </div>
   <div class="box-border flex flex-none w-full carousel-item snap-start" id="slide-3">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/3.jpg" alt="sky view">
   </div>
   <div class="box-border flex flex-none w-full carousel-item snap-start" id="slide-4">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/4.jpg" alt="tree">
   </div>
</div>
<div class="flex justify-center w-full gap-2 pt-2">
   <a class="w-2 h-2 p-0 btn bg-primary" href="#slide-1"></a>
   <a class="w-2 h-2 p-0 btn bg-primary" href="#slide-2"></a>
   <a class="w-2 h-2 p-0 btn bg-primary" href="#slide-3"></a>
   <a class="w-2 h-2 p-0 btn bg-primary" href="#slide-4"></a>
</div>

 <div class="w-full overflow-hidden carousel">
   <div class="box-border flex flex-none w-full carousel-item snap-start" id="slide-1">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/4.jpg" alt="tree">
   </div>
   <div class="box-border flex flex-none w-full carousel-item snap-start" id="slide-2">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/1.jpg" alt="nature">
   </div>
   <div class="box-border flex flex-none w-full carousel-item snap-start" id="slide-3">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/3.jpg" alt="sky view">
   </div>
   <div class="box-border flex flex-none w-full carousel-item snap-start" id="slide-4">
       <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/2.jpg" alt="butterfly">
   </div>
</div>
<div class="flex justify-center w-full gap-2 pt-2">
   <a class="btn w-6 bg-success p-0 h-[2px]" href="#slide-1"></a>
   <a class="btn w-6 bg-success p-0 h-[2px]" href="#slide-2"></a>
   <a class="btn w-6 bg-success p-0 h-[2px]" href="#slide-3"></a>
   <a class="btn w-6 bg-success p-0 h-[2px]" href="#slide-4"></a>
</div> 

 <div class="w-full overflow-hidden carousel">
   <div class="box-border relative flex flex-none w-full carousel-item snap-start" id="slider1">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/3.jpg" alt="sky view">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slider4">❮</a>
         <a class="btn" href="#slider2">❯</a>
      </div>
      <div class="flex justify-center gap-2 -translate-x-1/2 left-1/2 bottom-2">
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-1"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-2"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-3"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-4"></a>
      </div>
   </div>
   <div class="box-border relative flex flex-none w-full carousel-item snap-start" id="slider2">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/2.jpg" alt="butterfly">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slider1">❮</a>
         <a class="btn" href="#slider3">❯</a>
      </div>
      <div class="flex justify-center gap-2 -translate-x-1/2 left-1/2 bottom-2">
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-1"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-2"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-3"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-4"></a>
      </div>
   </div>
   <div class="box-border relative flex flex-none w-full carousel-item snap-start" id="slider3">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/1.jpg" alt="nature">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slider2">❮</a>
         <a class="btn" href="#slider4">❯</a>
      </div>
      <div class="flex justify-center gap-2 -translate-x-1/2 left-1/2 bottom-2">
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-1"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-2"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-3"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-4"></a>
      </div>
   </div>
   <div class="box-border relative flex flex-none w-full carousel-item snap-start" id="slider4">
      <img class="w-full h-[282px] xl:h-[215px] 2lg:h-60 sm:h-36 2sm:h-32" src="../../assets/images/carousel/4.jpg" alt="tree">
      <div class="absolute flex justify-between transform left-5 right-5 text-white -translate-y-1/2 top-1/2 lg:left-2.5 lg:right-2.5">
         <a class="btn" href="#slider3">❮</a>
         <a class="btn" href="#slider1">❯</a>
      </div>
      <div class="flex justify-center gap-2 -translate-x-1/2 left-1/2 bottom-2">
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-1"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-2"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-3"></a>
         <a class="btn w-6 bg-white p-0 h-[2px]" href="#slide-4"></a>
      </div>
   </div>
</div> 

 <div class="w-60 h-72 carousel sm:w-52 sm:h-72">
   <div class="h-full carousel-item">
    <img class="w-full" src="../../assets/images/carousel/7.jpg" alt="sunflower">
   </div>
   <div class="h-full carousel-item">
    <img class="w-full" src="../../assets/images/carousel/6.jpg" alt="night view">
   </div>
   <div class="h-full carousel-item">
    <img class="w-full" src="../../assets/images/carousel/8.jpg" alt="moon">
   </div>
   <div class="h-full carousel-item">
    <img class="w-full" src="../../assets/images/carousel/9.jpg" alt="forest">
   </div>
</div>