<?php include 'header.php';?>



<div id="carouselExampleCaptions" class="carousel slide desk" data-bs-ride="carousel" data-interval="12000">
   
    <div class="carousel-inner">
     
        <div class="carousel-item active">
            <img src="images/banner-1.webp" class="wd100">
        </div>
        <div class="carousel-item">
            <img src="images/banner-2.webp" class="wd100">
        </div>
        <div class="carousel-item">
            <img src="images/b-1.webp" class="wd100">
        </div>
        
        <div class="carousel-item">
            <img src="images/b-2.webp" class="wd100">
        </div>
        <div class="carousel-item">
            <img src="images/b-3.webp" class="wd100">
        </div>
        <div class="carousel-item">
            <img src="images/b-4.webp" class="wd100">
        </div>
     
    </div>
    <button class="carousel-control-prev leftcss" type="button" data-bs-target="#carouselExampleCaptions" 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 rightcss" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>




<section class="desk">
    <div class="logo15">

        <div class="">
            <section class="top-features">
                <div class="auto-container">
                    <div class="row ptbox-100">
                        <div class="col-lg-1 col-md-6 col-sm-12"></div>
                            <div class="feature-block col-lg-2 col-md-6 col-sm-12">
                                <div class="inner-box">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <a href="#" class="inn">
                                                <figure class="image1"><center><img src="images/fd1.png" alt="" style="width: 35px;"></center></figure>
                                                <figure class="image2"><center><img src="images/fd2.webp" alt="" style="width: 35px;"></center></figure>
                                            </a>
                                        </div>
                                        <div class="col-md-10">
                                            <h4><a href="#">Find a <br>Doctor</a></h4>
                                        </div>
                                    </div>
                                    
                                    <p>Access our network of experienced specialists.</p>
                                     <img src="images/logobox.webp" class="logopacity">
                                </div>
                               
                            </div>
                
                            <div class="feature-block col-lg-2 col-md-6 col-sm-12">
                                <div class="inner-box">
                                    
                                    <div class="row">
                                        <div class="col-md-2">
                                            <a href="#" class="inn">
                                                <figure class="image1"><center><img src="images/Healthb.png" alt="" style="width: 40px;"></center></figure>
                                                <figure class="image2"><center><img src="images/Healthw.webp" alt="" style="width: 40px;"></center></figure>
                                            </a>
                                        </div>
                                        <div class="col-md-10">
                                            <h4><a href="#">Health <br>Package </a></h4>
                                        </div>
                                    </div>
                                    <p>Preventive care plans tailored to your needs.</p>
                                    <img src="images/logobox.webp" class="logopacity">
                                </div>
                            </div>

                            <div class="feature-block col-lg-2 col-md-6 col-sm-12">
                                <div class="inner-box">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <a href="room-accommodation.php" class="inn">
                                                <figure class="image1"><center><img src="images/Roomb.png" alt="" style="    width:44px;"></center></figure>
                                                <figure class="image2"><center><img src="images/Roomw.webp" alt="" style="    width:44px;"></center></figure>
                                            </a>
                                        </div>
                                        <div class="col-md-10">
                                            <h4><a href="room-accommodation.php">Room <br>Accommodation</a></h4>
                                        </div>
                                    </div>
                                    
                                    <p>Explore rooms designed for superior comfort.</p>
                                    <img src="images/logobox.webp" class="logopacity">
                                </div>
                            </div>

                            <div class="feature-block col-lg-2 col-md-6 col-sm-12">
                                <div class="inner-box">
                                    <div class="row">
                                        <div class="col-md-2">
                                            <a href="#" class="inn">
                                                <figure class="image1"><center><img src="images/homeb.png" alt="" style="    width: 34px;"></center></figure>
                                                <figure class="image2"><center><img src="images/homew.webp" alt="" style="    width: 34px;"></center></figure>
                                            </a>
                                        </div>
                                        <div class="col-md-10">
                                            <h4><a href="#">Home Care <br>Services</a></h4>
                                        </div>
                                    </div>
                                    
                                    
                                    
                                    <p>Trusted medical care delivered to your home.</p>
                                    <img src="images/logobox.webp" class="logopacity">
                                </div>
                            </div>
                
                            <div class="feature-block col-lg-2 col-md-6 col-sm-12">
                                <div class="inner-box">
                                    
                                    <div class="row">
                                        <div class="col-md-2">
                                            <a href="#" class="inn">
                                                <figure class="image1"><center><img src="images/Diagnosticb.png" alt="" style="    width: 37px;"></center></figure>
                                                <figure class="image2"><center><img src="images/Diagnosticw.webp" alt="" style="    width: 37px;"></center></figure>
                                            </a>
                                        </div>
                                        <div class="col-md-10">
                                            <h4><a href="#">Diagnostic <br>Services</a></h4>
                                        </div>
                                    </div>
                                    
                                    
                                    
                                    <p>Get precise tests to guide the best care.</p>
                                    <img src="images/logobox.webp" class="logopacity">
                                </div>
                            </div>
                            <div class="col-lg-1 col-md-6 col-sm-12"></div>
                    </div>
                </div>
            </section>
        </div>
      
        <div class="container">

            <div class="ptsp" data-animation="fadeIn">
                <h3 class="center title" data-animation="slideInDown" data-animation-delay=".5s"><span>For over 80 years, </span>millions of people have  placed <br>their Trust in our Compassionate Care.</h3>
                    <div class="row mt45">
                        <div id="wrapper">
                            <div id="content-wrapper" class="d-flex flex-column">
                                <div id="content">
                                    <!-- Begin Page Content -->
                                    <div class="">
                                        <div class="tabControl">
                                            <div class="pt-20">
                                                <ul class="nav nav-pills nav-fill" id="pills-tab" role="tablist">
                                                    <li class="nav-item">
                                                        <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-1" role="tab">Key Specialities</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-2" role="tab">Special Clinics</a>
                                                    </li>
                                                    <li class="nav-item">
                                                        <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-3" role="tab">Services</a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="tab-content" id="pills-tabContent">
                                                <div class="tab-pane fade show active" id="pills-1" role="tabpanel" aria-labelledby="pills-home-tab">
                                                    <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
                                                        <div class="carousel-inner">
                                                            
                                                            <div class="carousel-item active" data-bs-interval="1000">
                                                                <div class="row">
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <a href="#">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/01.webp" class="spicon spiconnew">
                                                                            <h4>Cardiac Care</h4>
                                                                        </div>
                                                                        </a>
                                                                    </div>
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/02.webp" class="spicon spiconnew">
                                                                            <h4>Urology </h4>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/03.webp" class="spicon spiconnew">
                                                                            <h4>Neurology </h4>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/04.webp" class="spicon spiconnew">
                                                                            <h4>Orthopaedics </h4>
                                                                        </div>
                                                                    </div>
                                                                     <div class="col-md-2 sphd sphnew">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/05.webp" class="spicon spiconnew">
                                                                            <h4>Gastroenterology</h4>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <p class="sppara">Explore 30+ specialities delivering comprehensive, expert-led medical care under one trusted roof.
<span class="spnpnk">View All Specialities &gt; </span></p>
                                                        </div>
                                                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                            <span class="visually-hidden">Next</span>
                                                        </button>
                                                        
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="pills-2" role="tabpanel" aria-labelledby="pills-profile-tab">
                                                    <div id="carouselExampleDark1" class="carousel carousel-dark slide" data-bs-ride="carousel">
                                                        <div class="carousel-inner">
                                                            <div class="carousel-item active" data-bs-interval="10000">
                                                                <div class="row">
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <a href="#">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/01.webp" class="spicon spiconnew">
                                                                            <h4>Memory Disorders Clinic</h4>
                                                                        </div>
                                                                        </a>
                                                                    </div>
                                                                   
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <a href="#">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/01.webp" class="spicon spiconnew">
                                                                            <h4>Cancer Detection Clinic</h4>
                                                                        </div>
                                                                        </a>
                                                                    </div>
                                                                    
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <a href="#">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/01.webp" class="spicon spiconnew">
                                                                            <h4>Pain Clinic</h4>
                                                                        </div>
                                                                        </a>
                                                                    </div>
                                                                    
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <a href="#">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/01.webp" class="spicon spiconnew">
                                                                            <h4>Retinal Clinic</h4>
                                                                        </div>
                                                                        </a>
                                                                    </div>
                                                                   
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <a href="#">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/01.webp" class="spicon spiconnew">
                                                                            <h4>Child & Adolescent Guidance Clinic</h4>
                                                                        </div>
                                                                        </a>
                                                                    </div>

                                                                </div>
                                                            </div>
                                                                
                                                        </div>
                                                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark1" 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="#carouselExampleDark1" data-bs-slide="next">
                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                            <span class="visually-hidden">Next</span>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="tab-pane fade" id="pills-3" role="tabpanel" aria-labelledby="pills-contact-tab">
                                                    <div id="carouselExampleDark2" class="carousel carousel-dark slide" data-bs-ride="carousel">
                                                        <div class="carousel-inner">
                                                            <div class="carousel-item active" data-bs-interval="10000">
                                                                <div class="row">
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <a href="#">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/01.webp" class="spicon spiconnew">
                                                                            <h4>Emergency & Critical Care</h4>
                                                                        </div>
                                                                        </a>
                                                                    </div>
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <a href="#">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/01.webp" class="spicon spiconnew">
                                                                            <h4>Health Check Packages</h4>
                                                                        </div>
                                                                        </a>
                                                                    </div>
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <a href="#">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/01.webp" class="spicon spiconnew">
                                                                            <h4>Physiotherapy</h4>
                                                                        </div>
                                                                        </a>
                                                                    </div>
                                                                    
                                                                    <div class="col-md-2 sphd sphnew">
                                                                        <a href="#">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/01.webp" class="spicon spiconnew">
                                                                            <h4>Imaging & Labs</h4>
                                                                        </div>
                                                                        </a>
                                                                    </div>
                                                                   
                                                                   
                                                                   
                                                                   <div class="col-md-2 sphd sphnew">
                                                                        <a href="#">
                                                                        <div class="spshadownone">
                                                                            <img src="images/spicon/newicon/01.webp" class="spicon spiconnew">
                                                                            <h4>Pharmacy (24x7)</h4>
                                                                        </div>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <!--<div class="carousel-item" data-bs-interval="20000">-->
                                                            <!--    <div class="row">-->
                                                                    
                                                            <!--        <div class="col-md-3">-->
                                                            <!--            <div class="featured-icon-box icon-align-top-content style2">-->
                                                            <!--                <div class="featured-icon">-->
                                                            <!--                    <div class="bckimg2e spimg"></div>-->
                                                            <!--                    <div class="top-left">Pharmacy (24x7) </div>-->
                                                            <!--                </div>-->
                                                            <!--                <div class="featured-content">-->
                                                            <!--                    <div class="featured-desc">-->
                                                            <!--                        <p>Fully stocked pharmacy ensuring seamless access to medicines anytime</p>-->
                                                            <!--                    </div>-->
                                                            <!--                    <a class="ttm-btn ttm-btn-size-sm ttm-btn-shape-round ttm-icon-btn-right ttm-btn-color-dark" href="#" style="background: #fff;color:#193778;" tabindex="0"><b>Read more</b> <i class="fa fa-arrow-right"></i></a>-->
                                                            <!--                </div>-->
                                                            <!--            </div>-->
                                                            <!--        </div>-->
                                                            <!--        <div class="col-md-3">-->
                                                            <!--            <div class="featured-icon-box icon-align-top-content style2">-->
                                                            <!--                <div class="featured-icon">-->
                                                            <!--                    <div class="bckimg2f spimg"></div>-->
                                                            <!--                    <div class="top-left">Home Care Services</div>-->
                                                            <!--                </div>-->
                                                            <!--                <div class="featured-content">-->
                                                            <!--                    <div class="featured-desc">-->
                                                            <!--                        <p>Our quality medical care now delivered at the comfort of your home</p>-->
                                                            <!--                    </div>-->
                                                            <!--                    <a class="ttm-btn ttm-btn-size-sm ttm-btn-shape-round ttm-icon-btn-right ttm-btn-color-dark" href="#" style="background: #fff;color:#193778;" tabindex="0"><b>Read more</b> <i class="fa fa-arrow-right"></i></a>-->
                                                            <!--                </div>-->
                                                            <!--            </div>-->
                                                            <!--        </div>-->
                                                            <!--    </div>-->
                                                            <!--</div>-->
                                                        </div>
                                                        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark2" 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="#carouselExampleDark2" data-bs-slide="next">
                                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                            <span class="visually-hidden">Next</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        
        
            <div class="row pt125">
                
                <div class="counter_wrapper">
		<div class="container">
	
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="count_box">
                        <h3><span class="timer">80</span>+</h3>
                        <h4>Years of Experience</h4>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="count_box">
                        <h3><span class="timer">14</span></h3>
                        <h4>Special Clinics</h4>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="count_box">
                        <h3><span class="timer">300</span>+</h3>
                        <h4>Experienced Doctors</h4>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="count_box" style="border-right: none;">
                        <h3><span class="timer">1  </span> Million+</h3>
                        <h4>Patients Healed</h4>
                    </div>
                </div>
            </div>
			
		</div>
	</div>
	
	
	
                <!--<div class="column">-->
                <!--    <div class="card">-->
                <!--        <h3><span id="Partners">0</span></h3>-->
                <!--        <p>Year of<br> Experience</p>-->
                <!--    </div>-->
                <!--</div>-->
                <!--<div class="column">-->
                <!--    <div class="card">-->
                <!--        <h3><span id="Projects">0</span></h3>-->
                <!--        <p>Hospital <br>Location</p>-->
                <!--    </div>-->
                <!--</div>-->
                <!--<div class="column">-->
                <!--    <div class="card">-->
                <!--        <h3><span id="Experienced">0</span>+</h3>-->
                <!--        <p>Experienced <br> Doctors</p>-->
                <!--    </div>-->
                <!--</div> -->
                <!--<div class="column">-->
                <!--    <div class="card">-->
                <!--        <h3><span id="Happy">0</span>+</h3>-->
                <!--        <p>Happy <br> Patients</p>-->
                <!--    </div>-->
                <!--</div>-->
                <!--<div class="column" style="border-right: none;">-->
                <!--    <div class="card">-->
                <!--        <h3><span id="Clinics">0</span></h3>-->
                <!--        <p>Hospital and <br>Clinics</p>-->
                <!--    </div>-->
                <!--</div>-->
            </div>
        </div>
    </div>
</section>


<!--about legand-->
<section  class="desk" style="background: #193778;margin-bottom: 10px;">
    <div class="container">
        <div class="row padd-blue">
            <div class="col-md-7 blupara">
                <h3 class="center hdh3 title animated slideInDown h3whttxt" data-animation="slideInDown" data-animation-delay=".5s" style="color:#fff;">
                    <span class="pinkspan">Legend of Holy Family Hospital:  </span> <br>The Legacy of Mother Giovanna
                </h3>
                <p class="legpara">In the year 1978, Mother Giovanna arrived in Mumbai to take over the Holy Family Hospital which was handed over to the Ursuline Sisters of Mary Immaculate from the Medical Mission Sisters. Mother Giovanna was the pioneer and primary architect behind its phenomenal growth. Her gentle healing hands and magnanimous heart won over the hearts and minds of the Bandra community and the hospital soon gained a good reputation, especially as a maternity home. She extended ...</p>
                <a href="" class="wht allbtn">View more</a>
            </div>
            <div class="col-md-5">
                <iframe class="ifr" height="250" src="https://www.youtube.com/embed/g9FIR-hyqLs?si=8gwpZ0BwOTEYAbmT" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</section>



<section class="pt-100 desk">
    <div class="container">
        <h3 class="center title" data-animation="slideInDown" data-animation-delay=".5s"><span>Patient </span>Care </h3>
        <p class="txtcntr">Compassionate care begins with the right support. <b>Explore services designed to make your hospital journey smooth, comfortable, and reassuring.</b></p>

        <div class="hf section">
            <div class="row">
                <div class="col-md-4 scrll">
                    <div class="scrll mb-24">
                        <a href="#" class="anchr">
                            <div class="patsec">
                                <div class="row inner-box">
                                    <div class="col-md-2 leftimg">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/app1.webp" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/app2.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <p>OPD Schedule</p>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/lgarrow.png" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/lgarrowwhite.webp" alt=""></center></figure>
                                        </div>
                                        <!--<img src="images/lgarrow.png">-->
                                    </div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="#" class="anchr">
                            <div class="patsec">
                                <div class="row inner-box">
                                    <div class="col-md-2 leftimg">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/fnddr.webp" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/fnddrwh.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <p>Find a doctor</p>
                                    </div>
                                    <div class="col-md-3">
                                         <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/lgarrow.png" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/lgarrowwhite.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="#" class="anchr">
                            <div class="patsec">
                                <div class="row inner-box">
                                    <div class="col-md-2 leftimg">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/trrifblu.webp" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/tarrifwh.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <p>Tariff</p>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/lgarrow.png" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/lgarrowwhite.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="#" class="anchr">
                            <div class="patsec">
                                <div class="row inner-box">
                                    <div class="col-md-2 leftimg">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/insblu.webp" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/inswh.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <p>Insurance & TPAs</p>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/lgarrow.png" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/lgarrowwhite.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        
                        <!--<a href="#" class="anchr">-->
                        <!--    <div class="patsec">-->
                        <!--        <div class="row">-->
                        <!--            <div class="col-md-2 leftimg">-->
                        <!--                <img src="images/opd.png">-->
                        <!--            </div>-->
                        <!--            <div class="col-md-7">-->
                        <!--                <p>OPD Schedule</p>-->
                        <!--            </div>-->
                        <!--            <div class="col-md-3">-->
                        <!--                <div class="inn pcimge">-->
                        <!--                    <figure class="image1"><center><img src="images/lgarrow.png" alt=""></center></figure>-->
                        <!--                    <figure class="image2"><center><img src="images/lgarrowwhite.webp" alt=""></center></figure>-->
                        <!--                </div>-->
                        <!--            </div>-->
                        <!--        </div>-->
                        <!--    </div>-->
                        <!--</a>-->
                        
                        <a href="#" class="anchr">
                            <div class="patsec">
                                <div class="row inner-box">
                                    <div class="col-md-2 leftimg">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/admisssionbl.webp" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/admisssionwh.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <p>Admission Process</p>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/lgarrow.png" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/lgarrowwhite.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="#" class="anchr">
                            <div class="patsec">
                                <div class="row inner-box">
                                    <div class="col-md-2 leftimg">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/gebu.webp" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/gewh.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <p>General Enquiry</p>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/lgarrow.png" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/lgarrowwhite.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="#" class="anchr">
                            <div class="patsec">
                                <div class="row inner-box">
                                    <div class="col-md-2 leftimg">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/Patientbu.webp" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/Patientwh.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <p>Patient Brochure</p>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/lgarrow.png" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/lgarrowwhite.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                        
                        <a href="#" class="anchr">
                            <div class="patsec">
                                <div class="row inner-box">
                                    <div class="col-md-2 leftimg">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/shrfdbu.webp" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/shrfdwh.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                    <div class="col-md-7">
                                        <p>Share your feedback</p>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="inn pcimge">
                                            <figure class="image1"><center><img src="images/lgarrow.png" alt=""></center></figure>
                                            <figure class="image2"><center><img src="images/lgarrowwhite.webp" alt=""></center></figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>

                    </div>
                </div>
                <div class="col-md-8 scrll">
                        <div class="scrll">
                        <div class="row">
                            <div class="col-md-6 scrll mar">
                                <div class="rghtsec">
                                    <img src="images/pc1.webp" class="img100">
                                    <div class="hedsec">
                                        <h4>Procedures@ Holy Family Hospital</h4>
                                        <p>Discover our procedures, performed with surgical precision to ensure best possible care.</p>
                                        <a href="" class="wht allbtn pcvwbtn">View more</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 scrll mar">
                                <div class="rghtsec">
                                    <img src="images/pc2.webp" class="img100">
                                    <div class="hedsec">
                                        <h4>Real Life Success Stories that can inspire</h4>
                                        <p>Every successful treatment is a story of resilience & healing that drives us to deliver excellent care every day.</p>
                                        <a href="" class="wht allbtn pcvwbtn">View more</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 scrll mar">
                                <div class="rghtsec">
                                    <img src="images/pc4.webp" class="img100">
                                    <div class="hedsec">
                                        <h4>Discover Our Speciality Clinics for Focused Care</h4>
                                        <p>Explore Holy Family Hospital's advanced, Consultant-Led Care across specialties for your unique health requirements.</p>
                                        <a href="" class="wht allbtn pcvwbtn">View more</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 scrll mar">
                                <div class="rghtsec">
                                    <img src="images/pc3.webp" class="img100">
                                    <div class="hedsec">
                                        <h4>Access Our Health Check Packages</h4>
                                        <p>Comprehensive Preventive Screenings designed for early detection and lifelong wellness management.</p>
                                        <a href="" class="wht allbtn pcvwbtn">View more</a>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                        </div>
                </div>
            </div>
        </div>
                    
    </div>

    <div class="shdw">
        <p style="color: transparent;">Holy</p>
    </div>
    <div class="container">
        <div class="pnkbrdr">
            <p>Our Patient Say <img src="images/lgarrow.png" style="width: 28px;"> <span style="color:#D81159;"> Excellence</span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <span class="fa fa-star checked"></span>
                <b>4.6</b> out of 5 based on <b>4,556 patient reviews (As of December 2025) | Verified by: </b> 
                <img src="images/google.png">
            </p>
        </div>
    </div>
</section>






<section class="desk">
    <div class="container">
        <h3 class="center pt60" data-animation="slideInDown" data-animation-delay=".5s"><span>State-of-the-Art </span> Facilities</h3>
        <p class="txtcntr">Holy Family Hospital is equipped with cutting-edge infrastructure and the latest medical technology, creating a space where expert care, efficient treatment, and patient comfort come together naturally. </p>
    </div>
    <div class="auto-container pt-45">
        <div class="container-fluid">
            <div class="row">
                <div class="multi-carousel-container" id="multiCarousel">
                    <div class="multi-carousel-inner" id="carouselInner">
                        <div class="multi-carousel-item">
                            <div class="img-container"> <img src="images/1.webp" alt="Image 1">
                                <div class="progress-bar-container"><div class="progress-bar-fill"></div></div>
                            </div>
                        </div>
                        <div class="multi-carousel-item">
                            <div class="img-container">  <img src="images/2.webp" alt="Image 2">
                                <div class="progress-bar-container"> <div class="progress-bar-fill"></div> </div>
                            </div>
                        </div>
                        <div class="multi-carousel-item">
                            <div class="img-container"><img src="images/3.webp" alt="Image 3">
                                <div class="progress-bar-container"> <div class="progress-bar-fill"></div></div>
                            </div>
                        </div>
                    </div>
                    <button class="multi-carousel-control-prev" id="prevBtn"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </button>
                    <button class="multi-carousel-control-next" id="nextBtn"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </button>
                </div>
            </div>
        </div>
    </div>
</section>





<div class="container desk">
    <img src="images/layout.png" class="img100 cicrimg">
    <h3 class="buildh3"><span style="color:#D81159;"><b>80 Years</b> </span> of Trusted Care, Celebrated with Awards of Excellence </h3>
    <img src="images/building.png" class="buildimg">
</div>


<!--start footer-->
<footer class="desk">
    <div class="auto-container">
        <div class="container">
            <div class="row footwht homefooter">
                <div class="col-md-4">
                    <h3>Patient Care</h3>
                    <a href="#"><p>Book Appointment</p></a>
                    <a href="#"><p>Find a Doctor</p></a>
                    <a href="#"><p>Insurance & TPA</p></a>
                    <a href="#"><p>Tariff</p></a>
                    <a href="#"><p>Health Check Packages</p></a>
                    <a href="#"><p>Patient Testimonials</p></a>
                    <a href="#"><p>Patient Brochure</p></a>
                    <a href="#"><p>Complaints & Feedback Form</p></a>
                    <a href="#"><p>Floor Directory</p></a>
                </div>
                <div class="col-md-4">
                    <h3>Useful Links</h3>
                    <a href="#"><p>Centers of Excellence</p></a>
                    <a href="#"><p>Corporate & Partnerships</p></a>
                    <a href="#"><p>News & Press Releases</p></a>
                    <a href="#"><p>Download Centre</p></a>
                    <a href="#"><p>Work with us</p></a>
                    <a href="#"><p>Procedures</p></a>
                    <a href="#"><p>About us</p></a>
                    <a href="#"><p>Specialities</p></a>
                </div>
                <div class="col-md-4">
                    <h3>Services</h3>
                    <a href="#"><p>Emergency & Trauma Care</p></a>
                    <a href="#"><p>OPD & IPD</p></a>
                    <a href="#"><p>Diagnostic</p></a>
                    <a href="#"><p>Pharmacy(24*7)</p></a>
                    <a href="#"><p>Home Care Services</p></a>
                    <a href="#"><p>Pain Clinic</p></a>
                    <a href="#"><p>Retinal Clinic</p></a>
                    <a href="#"><p>Child & Adolescent Guidance</p></a>
                </div>
            </div>
        </div>
        <img src="images/footer-img.png" class="img100 mt-30">
    </div>
    <div class="blackfoot">
        <div class="container">
            <div class="whitefoot">
                <div class="rg">
                    <button class="footbtn">Get appointment </button>
                    <button class="footbtn">24*7 Emergency </button>
                    <button class="footbtn">Get Direction </button>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <img src="images/logonew.webp" class="logoimg">
                    </div>
                    <div class="col-md-2"></div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-2">
                                        <i class="fas fa-location fafaicon"></i>
                                        <!--<img src="images/location.png">-->
                                    </div>
                                    <div class="col-md-10 pl0">
                                        <p>St Andrew’s Road,<br>Bandra (West),<br>Mumbai – 400 050. <br>Maharashtra, India.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row mb-10">
                                    <div class="col-md-2">
                                        <i class="fa-solid fa-phone fafaicon"></i>
                                    </div>
                                    <div class="col-md-10 pl0">
                                        <p>022-62670366</p>
                                    </div>
                                </div>
                                <div class="row pt10">
                                    <div class="col-md-2">
                                        <i class="fa-solid fa-envelope fafaicon"></i>
                                    </div>
                                    <div class="col-md-10 pl0">
                                        <p>info@holyfamilyhospital.in</p>
                                    </div>
                                </div>
                                <div class="row fllowimg">
                                    <div class="col-md-2"></div>
                                    <div class="col-md-10 pl0 pt-10">
                                        <p><b>Follow us on</b></p>
                                        <i class="fab fa-facebook-f fafaicon"></i>
                                        <i class="fab fa-twitter fafaicon"></i>
                                        <i class="fab fa-instagram fafaicon"></i>
                                        <i class="fa-brands fa-youtube fafaicon"></i>
                                        <i class="fab fa-linkedin-in fafaicon"></i>

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

                    </div>
                </div>
            </div>
            <div class="row blckfootpd">
                <div class="col-md-9">
                    <p>2025 Holy Family Hospital & Medical Research Center | Designed, Developed by : HashTAGit.</p>
                </div>
                <div class="col-md-3">
                    <p class="fr">Managed by : HashTAGit.</p>
                </div>
            </div>
        </div>
    </div>
</footer>

<!--footer end-->



<div class="auto-container mob">
    <img src="images/mobile.jpg" style="width: 100%;    display: none;">
</div>





<!--infrastructure-->
<script>
    document.addEventListener("DOMContentLoaded", function () {
  // Configuration - dynamic based on screen size
  let itemsPerSlide = window.innerWidth < 720 ? 1 : 1;
  const totalItems = document.querySelectorAll(
    ".multi-carousel-item:not(.clone)"
  ).length;
  let slideBy = 1;
  const maxCenterWidth = 700;

  // DOM elements
  const carousel = document.getElementById("multiCarousel");
  const carouselInner = document.getElementById("carouselInner");
  const prevBtn = document.getElementById("prevBtn");
  const nextBtn = document.getElementById("nextBtn");
  const carouselTitle = document.getElementById("carouselTitle");

  // Progress bar and timing variables
  const progressDuration = 10000; // 10 seconds
  let currentSlideStartTime = null;
  let pausedElapsedTime = 0;
  let autoAdvanceTimeout = null;
  let progressAnimationTimeout = null;

  // State variables
  let userHasInteracted = false;
  let isHoverPaused = false;
  let userInactivityTimeout = null;
  let isDragging = false;
  let isInitialized = false; // Flag to track initial setup
  let isFirstLoad = true; // Flag to track first load
  let currentCenterSlideNumber = -1; // Track current center slide number
  let initialLoadComplete = false; // Flag to track if initial load is complete
  let lastDirection = "none"; // Track last navigation direction

  // Function to calculate slide widths based on container width
  function calculateSlideWidths() {
    const containerWidth = carousel.offsetWidth;
    const isMobile = window.innerWidth < 720;
    if (isMobile) {
      document.documentElement.style.setProperty("--slide-width", "100%");
      return { slideWidthPercent: 100, translateOffset: 0 };
    }
    let centerWidthPercent;
    if (containerWidth <= maxCenterWidth) {
      centerWidthPercent = 75;
    } else {
      centerWidthPercent = (maxCenterWidth / containerWidth) * 100;
    }
    document.documentElement.style.setProperty(
      "--slide-width",
      `${centerWidthPercent}%`
    );
    const translateOffset = (100 - centerWidthPercent) / 2;
    return {
      slideWidthPercent: centerWidthPercent,
      translateOffset: translateOffset
    };
  }

  // Function to update configuration based on screen size
  function updateConfig() {
    itemsPerSlide = 1;
    slideBy = 1;
    return calculateSlideWidths();
  }

  // Function to reset all progress bars immediately without flicker
  function resetAllProgressBars() {
    const allProgressBars = document.querySelectorAll(".progress-bar-fill");
    allProgressBars.forEach((progressBar) => {
      progressBar.style.transition = "none";
      progressBar.style.width = "0%";
      void progressBar.offsetWidth; // Force reflow
    });
  }

  // Function to get the slide number (1, 2, 3) from an element
  function getSlideNumber(element) {
    if (!element) return -1;

    const itemNumber = element.querySelector(".item-number");
    if (itemNumber) {
      return parseInt(itemNumber.textContent, 10);
    }

    return -1;
  }

  // Function to reset all slides to default opacity
  function resetAllSlidesOpacity() {
    const allItems = document.querySelectorAll(".multi-carousel-item, .clone");
    allItems.forEach((item) => {
      // Remove any inline opacity styles that might override CSS
      item.style.opacity = "";
      item.classList.remove("center", "fade-in");
    });
  }

  // Function to update center item highlighting with fade-in effect
  function updateCenterItem() {
    const allItems = document.querySelectorAll(".multi-carousel-item, .clone");
    const centerIndex = Math.round(position);

    // Reset all slides first
    resetAllSlidesOpacity();

    if (allItems[centerIndex]) {
      const newCenterItem = allItems[centerIndex];

      // Get the slide number (1, 2, 3)
      const slideNumber = getSlideNumber(newCenterItem);

      // Add center class
      newCenterItem.classList.add("center");

      // Add fade-in effect only if:
      // 1. Initial load is complete
      // 2. This is a different slide than before
      if (initialLoadComplete && slideNumber !== currentCenterSlideNumber) {
        newCenterItem.classList.add("fade-in");

        // Remove fade-in class after animation completes
        setTimeout(() => {
          newCenterItem.classList.remove("fade-in");
        }, 600);
      }

      // Update current center slide number
      currentCenterSlideNumber = slideNumber;
    }
  }

  // Clear all timers
  function clearAllTimers() {
    if (autoAdvanceTimeout) clearTimeout(autoAdvanceTimeout);
    if (progressAnimationTimeout) clearTimeout(progressAnimationTimeout);
    if (userInactivityTimeout) clearTimeout(userInactivityTimeout);
    autoAdvanceTimeout = null;
    progressAnimationTimeout = null;
    userInactivityTimeout = null;
  }

  // Start new slide timer (always from zero)
  function startSlideTimerDelayed(delay = 150) {
    setTimeout(() => {
      startSlideTimer();
    }, delay);
  }

  function startSlideTimer() {
    if (isHoverPaused || isDragging) return;
    clearAllTimers();

    const centerItem = document.querySelector(
      ".multi-carousel-item.center, .clone.center"
    );
    if (!centerItem) return;

    const progressFill = centerItem.querySelector(".progress-bar-fill");
    if (!progressFill) return;

    // Reset bar with no transition first
    progressFill.style.transition = "none";
    progressFill.style.width = "0%";
    void progressFill.offsetWidth; // force reflow

    currentSlideStartTime = Date.now();
    pausedElapsedTime = 0;

    // Apply transition after reset
    setTimeout(() => {
      if (isHoverPaused || isDragging) return;
      progressFill.style.transition = `width ${progressDuration}ms linear`;
      progressFill.style.width = "100%";
    }, 10);

    autoAdvanceTimeout = setTimeout(() => {
      if (!isHoverPaused && !isDragging) {
        next();
      }
    }, progressDuration);
  }

  // Pause timer (for hover)
  function pauseSlideTimer() {
    if (!currentSlideStartTime || isHoverPaused) return;
    clearAllTimers();
    pausedElapsedTime = Date.now() - currentSlideStartTime;
    isHoverPaused = true;

    const centerItem = document.querySelector(
      ".multi-carousel-item.center, .clone.center"
    );
    if (centerItem) {
      const progressFill = centerItem.querySelector(".progress-bar-fill");
      if (progressFill) {
        const computedStyle = window.getComputedStyle(progressFill);
        const currentWidth = computedStyle.width;
        progressFill.style.transition = "none";
        progressFill.style.width = currentWidth;
      }
    }
  }

  // Resume timer (after hover)
  function resumeSlideTimer() {
    if (!isHoverPaused || isDragging) return;
    isHoverPaused = false;

    const centerItem = document.querySelector(
      ".multi-carousel-item.center, .clone.center"
    );
    if (centerItem) {
      const progressFill = centerItem.querySelector(".progress-bar-fill");
      if (progressFill) {
        const remainingTime = Math.max(0, progressDuration - pausedElapsedTime);
        const computedStyle = window.getComputedStyle(progressFill);
        const currentWidth = computedStyle.width;
        progressFill.style.transition = `width ${remainingTime}ms linear`;
        progressFill.style.width = "100%";

        currentSlideStartTime = Date.now() - pausedElapsedTime;
        autoAdvanceTimeout = setTimeout(() => {
          if (!isHoverPaused && !isDragging) {
            next();
          }
        }, remainingTime);
      }
    }
  }

  // Mark user interaction
  function markUserInteraction(isDragAction = false) {
    if (!isDragAction) userHasInteracted = true;
    isHoverPaused = false;
    pausedElapsedTime = 0;
    clearAllTimers();

    const centerItem = document.querySelector(
      ".multi-carousel-item.center, .clone.center"
    );
    if (centerItem) {
      const progressFill = centerItem.querySelector(".progress-bar-fill");
      if (progressFill) {
        const computedStyle = window.getComputedStyle(progressFill);
        const currentWidth = computedStyle.width;
        progressFill.style.transition = "none";
        progressFill.style.width = currentWidth;
      }
    }

    if (!isDragAction) {
      userInactivityTimeout = setTimeout(() => {
        userHasInteracted = false;
        if (!isHoverPaused && !isDragging) {
          startSlideTimer();
        }
      }, 10000);
    }
  }

  function handleDragInteraction() {
    clearAllTimers();
    const centerItem = document.querySelector(
      ".multi-carousel-item.center, .clone.center"
    );
    if (centerItem) {
      const progressFill = centerItem.querySelector(".progress-bar-fill");
      if (progressFill) {
        const computedStyle = window.getComputedStyle(progressFill);
        const currentWidth = computedStyle.width;
        progressFill.style.transition = "none";
        progressFill.style.width = currentWidth;
      }
    }
  }

  function restartProgressAfterDrag() {
    isHoverPaused = false;
    pausedElapsedTime = 0;
    currentSlideStartTime = null;
    startSlideTimerDelayed(100);
  }

  // Dynamically add clone elements for infinite loop effect
  function initializeClones() {
    const originalItems = Array.from(
      document.querySelectorAll(".multi-carousel-item:not(.clone)")
    );
    document.querySelectorAll(".clone").forEach((clone) => clone.remove());

    const clonesNeeded = 2;

    // Prepend end clones
    originalItems
      .slice(-clonesNeeded)
      .reverse()
      .forEach((item) => {
        const clone = item.cloneNode(true);
        clone.classList.add("clone");
        // Remove any inline styles that might interfere with CSS opacity
        clone.style.opacity = "";
        const progressFill = clone.querySelector(".progress-bar-fill");
        if (progressFill) {
          progressFill.style.transition = "none";
          progressFill.style.width = "0%";
        }
        carouselInner.prepend(clone);
      });

    // Append start clones
    originalItems.slice(0, clonesNeeded).forEach((item) => {
      const clone = item.cloneNode(true);
      clone.classList.add("clone");
      // Remove any inline styles that might interfere with CSS opacity
      clone.style.opacity = "";
      const progressFill = clone.querySelector(".progress-bar-fill");
      if (progressFill) {
        progressFill.style.transition = "none";
        progressFill.style.width = "0%";
      }
      carouselInner.append(clone);
    });
  }

  // Set carousel height - now uses calc to account for margins
  function setCarouselHeight() {
    // Set a CSS variable for carousel height that accounts for the margins
    document.documentElement.style.setProperty(
      "--carousel-height",
      "calc(100vh - 5rem)" // 2.5rem top + 2.5rem bottom = 5rem total
    );
  }

  // Update carousel position visually
  let slideConfig = updateConfig();
  initializeClones();
  setCarouselHeight();

  let currentIndex = 0;
  let position = 2;
  let isAnimating = false;

  // Pre-load all images to prevent flash on first slide
  function preloadImages() {
    const allImages = document.querySelectorAll(
      ".multi-carousel-item img, .clone img"
    );
    return Promise.all(
      Array.from(allImages).map((img) => {
        return new Promise((resolve) => {
          if (img.complete) {
            resolve();
          } else {
            img.onload = () => resolve();
            img.onerror = () => resolve();
          }
        });
      })
    );
  }

  function updateCarouselPosition(animate = true) {
    // If this is the first position update on page load, don't animate
    if (!isInitialized) {
      animate = false;
    }

    carouselInner.style.transition = animate ? "transform 0.5s ease" : "none";
    const { slideWidthPercent, translateOffset } = slideConfig;
    const translateX = -position * slideWidthPercent + translateOffset;
    carouselInner.style.transform = `translateX(${translateX}%)`;

    setTimeout(
      () => {
        updateCenterItem();
      },
      animate ? 50 : 0
    );
  }

  // Preload images and then initialize carousel properly
  preloadImages().then(() => {
    // Set initial position without animation
    updateCarouselPosition(false);

    // Update center item immediately
    updateCenterItem();

    // Make carousel visible after everything is positioned
    setTimeout(() => {
      carouselInner.classList.add("initialized");
      isInitialized = true;
      isFirstLoad = false;

      // After a delay, allow all slides to have fade-in effect
      setTimeout(() => {
        initialLoadComplete = true;
      }, 1000);
    }, 50);

    // Start the first timer after everything is loaded
    setTimeout(() => {
      startSlideTimer();
    }, 1000);
  });

  carouselInner.addEventListener("transitionend", function (event) {
    if (event.target !== carouselInner || event.propertyName !== "transform")
      return;
    isAnimating = false;

    const oldPosition = position;

    if (position >= totalItems + 2) {
      // When we reach the end clones, jump to the real slides without animation
      position = 2 + (position - (totalItems + 2));
      carouselInner.style.transition = "none";
      const { slideWidthPercent, translateOffset } = slideConfig;
      const translateX = -position * slideWidthPercent + translateOffset;
      carouselInner.style.transform = `translateX(${translateX}%)`;

      // Force reflow to ensure the transition is applied
      void carouselInner.offsetWidth;

      // Update center item immediately after position change
      updateCenterItem();
    } else if (position < 2) {
      // When we reach the beginning clones, jump to the real slides without animation
      position = totalItems + position;
      carouselInner.style.transition = "none";
      const { slideWidthPercent, translateOffset } = slideConfig;
      const translateX = -position * slideWidthPercent + translateOffset;
      carouselInner.style.transform = `translateX(${translateX}%)`;

      // Force reflow to ensure the transition is applied
      void carouselInner.offsetWidth;

      // Update center item immediately after position change
      updateCenterItem();
    }

    if (position !== oldPosition) {
      resetAllProgressBars();
      if (!isHoverPaused) {
        startSlideTimerDelayed(100);
      }
    } else {
      currentIndex = (position - 2 + totalItems) % totalItems;
      if (!isHoverPaused) {
        startSlideTimerDelayed(100);
      }
    }
  });

  function next() {
    if (isAnimating) return;
    isAnimating = true;
    position += slideBy;
    lastDirection = "next";
    initialLoadComplete = true; // Ensure animations are enabled after user interaction

    clearAllTimers();
    userHasInteracted = false;
    isHoverPaused = false;
    pausedElapsedTime = 0;
    currentSlideStartTime = null;

    resetAllProgressBars();
    updateCarouselPosition();
  }

  function prev() {
    if (isAnimating) return;
    isAnimating = true;
    position -= slideBy;
    lastDirection = "prev";
    initialLoadComplete = true; // Ensure animations are enabled after user interaction

    clearAllTimers();
    userHasInteracted = false;
    isHoverPaused = false;
    pausedElapsedTime = 0;
    currentSlideStartTime = null;

    resetAllProgressBars();
    updateCarouselPosition();
  }

  // Event listeners...
  nextBtn.addEventListener("click", next);
  prevBtn.addEventListener("click", prev);

  // Mouse drag functionality
  let startX = 0;
  let startPosition = 0;

  const carouselImages = document.querySelectorAll("#carouselInner img");
  carouselImages.forEach((img) => {
    img.addEventListener("dragstart", (e) => e.preventDefault());
    img.style.pointerEvents = "none";
  });

  carousel.addEventListener("mousedown", startDrag);
  carousel.addEventListener("touchstart", startDrag, { passive: true });
  carousel.addEventListener("mousemove", drag);
  carousel.addEventListener("touchmove", drag, { passive: true });
  carousel.addEventListener("mouseup", endDrag);
  carousel.addEventListener("touchend", endDrag);
  carousel.addEventListener("mouseleave", endDrag);

  function startDrag(e) {
    if (e.target.closest("button")) return;
    if (isAnimating) return;
    isDragging = true;
    startX = e.type.includes("mouse") ? e.clientX : e.touches[0].clientX;
    startPosition = position;
    carousel.classList.add("dragging");
    carouselInner.style.transition = "none";
    document.body.style.cursor = "grabbing";
    document.body.style.userSelect = "none";
    handleDragInteraction();
  }

  function drag(e) {
    if (!isDragging) return;
    const x = e.type.includes("mouse") ? e.clientX : e.touches[0].clientX;
    const walk = (x - startX) / carousel.offsetWidth;
    const { slideWidthPercent, translateOffset } = slideConfig;
    const newPosition = startPosition - walk * (100 / slideWidthPercent);
    const translateX = -newPosition * slideWidthPercent + translateOffset;
    carouselInner.style.transform = `translateX(${translateX}%)`;
  }

  function endDrag(e) {
    if (!isDragging) return;
    isDragging = false;
    carousel.classList.remove("dragging");
    document.body.style.cursor = "";
    document.body.style.userSelect = "";

    const x = e.type?.includes("mouse")
      ? e.clientX
      : e.changedTouches
      ? e.changedTouches[0].clientX
      : startX;
    const walk = (x - startX) / carousel.offsetWidth;

    if (Math.abs(walk) > 0.2) {
      initialLoadComplete = true; // Ensure animations are enabled after user interaction
      if (walk > 0) {
        lastDirection = "prev";
        prev();
      } else {
        lastDirection = "next";
        next();
      }
      setTimeout(() => {
        restartProgressAfterDrag();
      }, 600);
    } else {
      updateCarouselPosition();
      restartProgressAfterDrag();
    }
  }

  // Keyboard navigation
  document.addEventListener("keydown", function (e) {
    if (
      carousel.offsetParent === null ||
      document.activeElement.tagName === "INPUT" ||
      document.activeElement.tagName === "TEXTAREA" ||
      document.activeElement.isContentEditable
    )
      return;
    switch (e.key) {
      case "ArrowLeft":
        e.preventDefault();
        prev();
        break;
      case "ArrowRight":
        e.preventDefault();
        next();
        break;
    }
  });

  // Hover events
  carousel.addEventListener(
    "mouseenter",
    (event) => {
      const targetSlide = event.target.closest(".multi-carousel-item, .clone");
      if (
        targetSlide &&
        targetSlide.classList.contains("center") &&
        !isDragging
      ) {
        pauseSlideTimer();
      }
    },
    true
  );

  carousel.addEventListener(
    "mouseleave",
    (event) => {
      const currentCenter = document.querySelector(
        ".multi-carousel-item.center, .clone.center"
      );
      if (
        currentCenter &&
        !currentCenter.contains(event.relatedTarget) &&
        !isDragging
      ) {
        resumeSlideTimer();
      }
    },
    true
  );

  // General activity
  carousel.addEventListener("click", (e) => {
    if (!e.target.closest("button") && !isDragging) {
      markUserInteraction();
    }
  });

  carousel.addEventListener("wheel", () => {
    markUserInteraction();
  });

  // Resize handler
  window.addEventListener("resize", function () {
    slideConfig = updateConfig();
    setCarouselHeight();
    clearAllTimers();
    isHoverPaused = false;
    pausedElapsedTime = 0;
    resetAllProgressBars();
    updateCarouselPosition(false);
    markUserInteraction();
  });
});

/**
 * Script to dynamically adjust carousel height based on heading element presence
 */

class CarouselHeightAdjuster {
  constructor() {
    this.headingElement = null;
    this.carouselContainer = null;
    this.observer = null;
    this.resizeObserver = null;

    this.init();
  }

  init() {
    // Wait for DOM to be fully loaded
    if (document.readyState === "loading") {
      document.addEventListener("DOMContentLoaded", () => this.setup());
    } else {
      this.setup();
    }
  }

  setup() {
    // Locate required elements
    this.headingElement = document.querySelector(".heading");
    this.carouselContainer = document.querySelector(
      ".multi-carousel-container"
    );

    if (!this.carouselContainer) {
      console.warn("Elemento .multi-carousel-container não encontrado");
      return;
    }

    if (!this.headingElement) {
      console.warn("Elemento .heading não encontrado");
      return;
    }

    // Setup observers
    this.setupMutationObserver();
    this.setupResizeObserver();

    // Perform initial adjustment
    this.adjustCarouselHeight();

    console.log("CarouselHeightAdjuster inicializado com sucesso");
  }

  setupMutationObserver() {
    // Observer to detect changes in heading element classes
    this.observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (
          mutation.type === "attributes" &&
          mutation.attributeName === "class"
        ) {
          this.adjustCarouselHeight();
        }
      });
    });

    // Observe changes in heading element class attribute
    this.observer.observe(this.headingElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
  }

  setupResizeObserver() {
    // Observer to detect changes in heading size (in case content changes)
    if (window.ResizeObserver) {
      this.resizeObserver = new ResizeObserver(() => {
        if (this.isHeadingVisible()) {
          this.adjustCarouselHeight();
        }
      });

      this.resizeObserver.observe(this.headingElement);
    }
  }

  isHeadingVisible() {
    if (!this.headingElement) return false;

    // Check if element is visible
    const style = window.getComputedStyle(this.headingElement);
    const hasDisplayNone = style.display === "none";
    const hasVisibilityHidden = style.visibility === "hidden";
    const hasOpacityZero = parseFloat(style.opacity) === 0;
    const hasDNoneClass = this.headingElement.classList.contains("d-none");

    return (
      !hasDisplayNone &&
      !hasVisibilityHidden &&
      !hasOpacityZero &&
      !hasDNoneClass
    );
  }

  getHeadingHeight() {
    if (!this.isHeadingVisible()) return 0;

    // Calculate total heading height including margins
    const rect = this.headingElement.getBoundingClientRect();
    const style = window.getComputedStyle(this.headingElement);

    const marginTop = parseFloat(style.marginTop) || 0;
    const marginBottom = parseFloat(style.marginBottom) || 0;

    return rect.height + marginTop + marginBottom;
  }

  adjustCarouselHeight() {
    if (!this.carouselContainer) return;

    const headingHeight = this.getHeadingHeight();
    const containerMargins = 80; // 2.5rem top + 2.5rem bottom = 80px (assuming 1rem = 16px)

    let newHeight;

    if (headingHeight > 0) {
      // If heading is visible, subtract its height + container margins
      newHeight = `calc(100vh - ${containerMargins + headingHeight}px)`;
    } else {
      // If heading is not visible, use only container margins
      newHeight = `calc(100vh - ${containerMargins}px)`;
    }

    // Apply new height
    this.carouselContainer.style.height = newHeight;

    console.log(
      `Altura do carousel ajustada para: ${newHeight} (heading ${
        headingHeight > 0 ? "visível" : "oculto"
      })`
    );
  }

  // Method to force recalculation (useful for debugging or manual use)
  recalculate() {
    this.adjustCarouselHeight();
  }

  // Method to destroy observers (cleanup)
  destroy() {
    if (this.observer) {
      this.observer.disconnect();
      this.observer = null;
    }

    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
      this.resizeObserver = null;
    }

    console.log("CarouselHeightAdjuster destruído");
  }
}

// Initialize adjuster automatically
const carouselHeightAdjuster = new CarouselHeightAdjuster();

// Expose globally for manual use if needed
window.CarouselHeightAdjuster = CarouselHeightAdjuster;
window.carouselHeightAdjuster = carouselHeightAdjuster;

// Example of manual usage:
// carouselHeightAdjuster.recalculate(); // Force recalculation
// carouselHeightAdjuster.destroy(); // Remove observers

</script>

<script>
    // this function used to creat th countUp  animation for business websites
// use the three parameters to customize it 
// call it for every element
// note that may be small diffrance in the count 100 be 99 so chack it 
function numCounter(tagId,maxCount,speed){
    var initialNumber = 0;
    function counter(){
        document.getElementById(tagId).innerHTML = initialNumber;
        ++initialNumber;
    }
    var counterDelay = setInterval(counter,speed);
    function totalTime(){
        clearInterval(counterDelay);
    }
    var totalPeriod = speed * (maxCount);  
    setTimeout(totalTime, totalPeriod);
}

numCounter("Projects",83,100);
numCounter("Experienced",1250,10);
numCounter("Partners",20,10);
numCounter("Clinics",25,100);
numCounter("Happy",60000,1);

</script>






<script>
    const animatedEls = document.querySelectorAll("[data-animation]");

const observer = new IntersectionObserver((entries) => {
	entries.forEach((entry) => {
		const animation = entry.target.getAttribute("data-animation");

		if (entry.isIntersecting) {
			entry.target.classList.add("animated", `${animation}`);
		} else {
			entry.target.classList.remove("animated", `${animation}`);
		}
	});
});

animatedEls.forEach((el) => observer.observe(el));

</script>
<script>
    // interval is in milliseconds. 1000 = 1 second -> so 1000 * 10 = 10 seconds
$('.carousel').carousel({
  interval: 1000 * 10
});
</script>




<script>
    const buttonElement = document.querySelectorAll('.tablinks');
const tabContent = document.querySelectorAll(".tabcontent");

tabContent[0].style.display = "block";

buttonElement.forEach(function (i) {
    i.addEventListener('click', function (event) {

        for (let x = 0; x < buttonElement.length; x++) {
            if (event.target.id == buttonElement[x].id) {
                buttonElement[x].className = buttonElement[x].className.replace(" active", "");
                tabContent[x].style.display = "block";
                event.currentTarget.className += " active";
            } else {
                tabContent[x].style.display = "none";
                buttonElement[x].className = buttonElement[x].className.replace(" active", "");
            }
        }
        
    });
});
</script>


<script>
    const faqItems = document.querySelectorAll(".faq-item");

faqItems.forEach(item => {
  const btn = item.querySelector(".faq-question");

  btn.addEventListener("click", () => {
    // close other items
    faqItems.forEach(i => {
      if (i !== item) {
        i.classList.remove("active");
        i.querySelector(".icon").textContent = "+";
      }
    });

    // toggle current item
    item.classList.toggle("active");

    const icon = item.querySelector(".icon");
    icon.textContent = item.classList.contains("active") ? "–" : "+";
  });
});


</script>

<script>
    
$('.btnNext').click(function() {
    $('.nav-pills .active').parent().next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function() {
    $('.nav-pills .active').parent().prev('li').find('a').trigger('click');
});
</script>



<script>
    // Just added bootstrap v4.5 css
// You don't need any other library to run this counter
const animationDuration = 3000;

const frameDuration = 1000 / 60;

const totalFrames = Math.round( animationDuration / frameDuration );

const easeOutQuad = t => t * ( 2 - t );

const animateCountUp = el => {
	let frame = 0;
	const countTo = parseInt( el.innerHTML, 10 );
	
	const counter = setInterval( () => {
		frame++;

		const progress = easeOutQuad( frame / totalFrames );

		const currentCount = Math.round( countTo * progress );


		if ( parseInt( el.innerHTML, 10 ) !== currentCount ) {
			el.innerHTML = currentCount;
		}

		if ( frame === totalFrames ) {
			clearInterval( counter );
		}
	}, frameDuration );
};

	const countupEls = document.querySelectorAll( '.timer' );
	countupEls.forEach( animateCountUp );

</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <script src="https://kit.fontawesome.com/1b59bc20c8.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js" ></script>
<script src="js/loop.js" ></script>
</body>
</html>
