<style>
        .ftr-bar{
            display: flex;
            width: 100%;
            position:fixed;
            bottom:0;
            z-index:999;
           
        }

        .ftr-bar-btn{
            flex-basis:33.33%;
            background-color: #ccc; 
            display:flex;
            justify-content:center;
            align-items:center;
            color:#ffffff !important;
            font-weight:700;
            padding:8px 0px;
        }

        .book-btn{
        flex-basis: 33.33%;
        background-color: #ffba00;
        }
        .wp-btn{
         flex-basis: 33.33%;
         background-color:#4CAF50;

        }
        .pac-btn{
            flex-basis: 33.33%;
            background-color:#2db2ff;
        }
        .call-btn{
            flex-basis: 33.33%;
            background-color: #031b24;
        }
        .book-btn a ,
        .pac-btn a{
         color: #fefefe;
         text-decoration: none;
        }
        .wp-btn a{
            color: #fefefe;
            text-decoration: none;
        }
        .call-btn a{
            color: #fefefe;
            text-decoration: none;
        }

        .ftr-bar{
            display: none;
        }
        
        
        
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 10px;
    z-index: 999;
}
.whatsapp-float img {
   width: 50px;
   height: 50px;
}
.call-icon{
    position: fixed;
    bottom: 20px;
    left: 10px;
    z-index: 999;
}
.call-icon img{
    width: 50px;
    height: 50px;
 } 
        
      @media only screen and (max-width: 768px) {

        .ftr-bar{
            display: flex;
            
        }
        
        .whatsapp-float,
            .call-icon{
                display:none;
            }
        
        
            }
            

    </style>



    <div class="ftr-bar">
        <!--<div class="ftr-bar-btn book-btn">-->
        <!--    <a href="<?php echo $wspath ?>"><i class="fa fa-home"></i> Home</a>-->
        <!--</div>-->
        <div class="ftr-bar-btn pac-btn">
            <a href="<?php echo $wspath?>services.html"><i class="fa fa-book" aria-hidden="true"></i>Services</a>
        </div>
        <div class="ftr-bar-btn call-btn">
            <a href="tel:<?php echo $datac['phone'] ?>"><i class="fa fa-phone"></i> Call Now</a>
           
        </div>
        <div class="ftr-bar-btn wp-btn">
             <a href="https://wa.me/<?php echo $datac['whatsapp'] ?>"><i class="fa fa-whatsapp"></i> Whatsapp</a>
          
        </div>
    </div>
    
    <!--Desktop View -->
     <div class="whatsapp-float">
         <a href="<?php echo $datac['whatsapp']; ?>">
        <img src="<?php echo $wspath?>img/wp-icon.png" width="50px" class="whatsapp-float-btn">
         </a>
            
    </div>
       
        <div class="call-icon">
             <a href="tel:<?php echo $datac['phone']; ?>">
                 <img src="<?php echo $wspath?>img/call-icon.png" width="50px" class="whatsapp-float-btn">
                 </a>
        </div>