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

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

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

        }
        .pac-btn{
            flex-basis: 25%;
            background-color:#2db2ff;
        }
        .call-btn{
            flex-basis: 25%;
            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{
               bottom: 50px !important;
               display:flex;
            }
                
            
            }
            

    </style>



    <!--<div class="ftr-bar">-->
    <!--    <div class="ftr-bar-btn book-btn">-->
    <!--        <a href="#"><i class="fa fa-home"></i> Home</a>-->
    <!--    </div>-->
    <!--    <div class="ftr-bar-btn pac-btn">-->
    <!--        <a href="#"><i class="fa fa-bed" aria-hidden="true"></i>-->
    <!--        Products</a>-->
    <!--    </div>-->
    <!--    <div class="ftr-bar-btn call-btn">-->
    <!--        <a href="#"><i class="fa fa-phone"></i> Call Now</a>-->
           
    <!--    </div>-->
    <!--    <div class="ftr-bar-btn wp-btn">-->
    <!--         <a href="#"><i class="fa fa-whatsapp"></i> Whatsapp</a>-->
          
    <!--    </div>-->
    <!--</div>-->
    
    <!--Desktop View -->
     <div class="whatsapp-float">
         <a href="https://wa.me/<?php echo $datac['whatsapp']; ?>">
        <img src="<?php echo $wspath?>assets/images/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?>assets/images/call-icon.png" width="50px" class="whatsapp-float-btn">
                 </a>
        </div>