.all-service-btn {
    background-color: #000;
    height: 250px;
    padding: 20px 0;
}

.all-service-btn .container {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.all-service-btn .service__top-btn {
    width: 50%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service__top-btn #btn_wrapper {
    margin-left: auto;
    margin-right: -40px;
    width: 220px;
    height: 220px;
    /* margin-left: -25px; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    border-radius: 100%;
    margin-left: -40px;
}

.service__top-btn #btn_wrapper .btn-item {
    position: absolute;
    border: 1px solid #2c2c2c;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 170px;
    height: 170px;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.3;
    text-transform: capitalize;
    color: var(--black-3);
    border-radius: 100%;
    overflow: hidden;
    opacity: 0;
    transition: all 1s cubic-bezier(0.28, 1.07, 0.53, 1.02);
    --anim-transform: translate(0,0);   /* خاص بالأنيميشن */
    --mouse-transform: translate(0,0);  /* خاص بالماوس */
    transform: var(--anim-transform) var(--mouse-transform);
}

@keyframes bounceIn {

  0%   { opacity: 0; --anim-transform: translateY(-150px); }
  40%  { opacity: 1; --anim-transform: translateY(40px); }
  60%  { --anim-transform: translateY(-20px); }
  75%  { --anim-transform: translateY(15px); }
  85%  { --anim-transform: translateY(-8px); }
  95%  { --anim-transform: translateY(4px); }
  100% { --anim-transform: translateY(0); }
  }
  

  .service__top-btn #btn_wrapper .btn-item.visible {
    animation: bounceIn 1s ease forwards;
    opacity: 1;

  }
  

.service__top-btn #btn_wrapper .btn-item span {
    background-color: var(--e-global-color-primary);
    position: absolute;
    width: 300px;
    /* أكبر من الزرار */
    height: 300px;
    left: 50%;
    top: 50%;
    border-radius: 100%;
    transform: translate(-50%, -50%) scale(0);
    /* ابدأ مخفي */
    transition: transform 0.7s ease;
    z-index: -1;
    /* مش -1 */
    pointer-events: none;
}

.service__top-btn #btn_wrapper .btn-item:hover span {
    transform: translate(-50%, -50%) scale(1);
    /* يملأ الخلفية */
}


.service__top-btn #btn_wrapper .btn-item i {
    margin-right: 2px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    padding-left: 5px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}