/* تعيين موقع كل زر عن طريق top و left بدلاً من bottom و right */
  .btnWagreen {
    border: 2px solid whitesmoke; /* Change color as desired */
    border-width: 2px 2px 2px 0; /* 2px for top, right, bottom; 0px for left */

   
    text-align: center;
    position: fixed;
    z-index: 9999;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: green;
  }

  .btnLocred {
   
    text-align: center;
    border: 2px solid whitesmoke; /* Change color as desired */
    border-width: 2px 2px 2px 0; /* 2px for top, right, bottom; 0px for left */
        position: fixed;
    z-index: 9999;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: red;
  }

  .btncalwhite {
    
    text-align: center;
    border: 2px solid whitesmoke; /* Change color as desired */
    border-width: 2px 2px 2px 0; /* 2px for top, right, bottom; 0px for left */
        position: fixed;
    z-index: 9999;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #927527;
  }




  /* استخدم وسائط الإعلام لتحديد حجم الأزرار بناءً على حجم الشاشة */
/* تعيين أحجام مختلفة للأجهزة المحمولة وأجهزة اللابتوب */
@media screen and (max-width: 767px) {
  /* أحجام الأزرار للأجهزة المحمولة (الهواتف) */
  .btnWagreen, .btnLocred, .btncalwhite {
    padding: 10px 20px;
    width: 60px;
    height: 40px;
    width: 50px;
    height: 35px;
  }
.btncalwhite{
    bottom: 240px;
}
.btnLocred{
    bottom: 200px;

}
.btnWagreen{
    bottom: 160px;
}


  .icon-action{
    font-size: 25px;
  }


}

@media screen and (min-width: 768px) {
  /* أحجام الأزرار لأجهزة اللابتوب */
  .btnWagreen, .btnLocred, .btncalwhite {
    padding: 10px 20px;
    width: 70px;
    height: 40px;
  }
  .btncalwhite{
    bottom: 250px;
}
.btnLocred{
    bottom: 200px;

}
.btnWagreen{
    bottom: 150px;
}
  .icon-action{
    font-size: 35px;
  }
}