@keyframes bounceIn {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes changeStyles {
  0% { background: #fff; }
  50% { background: #ffb606; color: white; }
  100% { background: #fff; }
}

/* Apply animation dynamically */
#queue-now .hpanel .panel-body.animate-first {
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  animation: bounceIn 2s ease-in-out, changeStyles 2s ease-in-out;
  animation-fill-mode: forwards;
}

/* Fix targeting for first child inside .counter_no and .service_availed */
/*#queue-now .hpanel .panel-body .counter_no,
#queue-now .hpanel .panel-body .service_availed {
  animation: changeStyles 2s ease-in-out;
}*/



/* Large Screens - Desktop */
@media (min-width: 1024px) {
     
 .now-serving {
        font-size:80px;
        font-weight:800;
        padding-bottom:20px;
    }
}

/* Tablets */
@media (max-width: 1024px) {
   
 .now-serving {
        font-size:50px;
        font-weight:800;
        padding-bottom:20px;
    }
}

/* Mobile Devices */
  @media (max-width: 768px) {
    .now-serving {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center-align for better readability */
        font-size:50px;
    }

    .next-item {
        font-size: 15px;
        font-weight: 700;
    }

     .col-sm-12 {
        width: 100%; /* Make columns full-width on mobile */
           
    }

    img {
        width: 30px;
        height: 30px; /* Adjust image size for smaller screens */
    }
}

/* Extra Small Mobile Devices */
@media (max-width: 480px) {
    
}





 
  

    .counter {
        font-size:25px;
        overflow:hidden;
        overflow-wrap:break-word;
    }

    .counter_no {
      font-size:85px;
      font-weight:800;
      text-align:center;
      color: #ffb606;
     
    }

    .service_availed {
       font-size:15px;
       font-weight:800;
       padding-right:10px;
       padding-top:5px;
       color: #ffb606;
    }
 
    .priority-icon img {
        height:30px;
        width:30px;
        margin-right:10px;
        opacity:0.6;

    }

       .avail-diplay-flex {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
    }

   .avail-diplay-flex-counter {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
    }

    .priority-diplay-flex {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
    }

    .priority-icon-queue img {
        height:40px;
        width:40px;
        margin-right:10px;
        opacity:0.7;

    }



    





/* Large Screens - Desktop */
@media (min-width: 1024px) {
     .next-item {
        font-size: 23px;
        font-weight: 700;
    }

    .next-item .item-body {
       
        padding: 5px;
        position: relative;
        margin-bottom:7px;
        display: flex;
        align-items: center;
        justify-content:flex-start;
        flex-wrap: nowrap;
        transition: font-size 0.3s ease-in-out; /* Smooth transition */
    }

    

     .next-item .item-body .btn-next i {
      font-size: 0px; /* Default size */
      transition: font-size 0.3s ease-in-out; /* Smooth transition */
    }

     .next-item .item-body .btn-next i:hover {
      font-size: 40px; /* Enlarges on hover */
      cursor: pointer;
    }

     .next-item .item-body:hover  {
      font-size: 30px; /* Enlarges on hover */
      cursor: pointer;
      color:#fff;
       background: #ffb606;
        border: 1px solid #eaeaea;
        border-radius: 2px;
    }

    .next-item .item-body:hover i  {
      font-size: 35px; /* Enlarges on hover */
      cursor: pointer;
      color:#fff;
    }


}

/* Tablets */
@media (max-width: 1024px) {
   .next-item {
        font-size: 23px;
        font-weight: 700;
    }

    .next-item .item-body {
        padding: 5px;
        position: relative;
        margin-bottom:7px;
        display: flex;
        align-items: center;
        justify-content:flex-start;
        flex-wrap: nowrap;
        transition: font-size 0.3s ease-in-out; /* Smooth transition */
    }

     .next-item .item-body .btn-next i 
     {
      font-size: 0px; /* Default size */
      transition: font-size 0.3s ease-in-out; /* Smooth transition */
    }

     .next-item .item-body .btn-next i:hover {
      font-size: 40px; /* Enlarges on hover */
      cursor: pointer;
    }

     .next-item .item-body:hover  {
      font-size: 30px; /* Enlarges on hover */
      cursor: pointer;
      color:#fff;
       background: #ffb606;
        border: 1px solid #eaeaea;
        border-radius: 2px;
    }

    .next-item .item-body:hover i  {
      font-size: 35px; /* Enlarges on hover */
      cursor: pointer;
      color:#fff;
    }

 
}

/* Mobile Devices */
  @media (max-width: 768px) {
  .next-item {
        font-size: 20px;
        font-weight: 700;
    }

    .col-sm-12 {
         width:100%;
         }
}

/* Extra Small Mobile Devices */
@media (max-width: 480px) {
     .next-item {
        font-size: 23px;
        font-weight: 700;
    }
}



    .container1 {
        display: flex;
        gap: 5px;
    }

    .column {
        width: 50%;
    }

    
 

/*CLIENT*/
 .services-diplay-flex {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
    }

    .service-panel .services_name {
        font-size:18px;
    }
    .service-panel .btn-services {
        font-size:25px;
        text-align:center;
         color:#ffb606;
    }


    .service-panel:hover {
    
      cursor: pointer;
      color:#fff;
       background: #ffb606;
}

      .service-panel:hover .services_name {
         font-size: 25px; /* Enlarges on hover */
          transition: font-size 0.3s ease-in-out; /* Smooth transition */

    }

      .service-panel:hover .btn-services {
         font-size: 40px; /* Enlarges on hover */
         transition: font-size 0.3s ease-in-out; /* Smooth transition */
         color:#fff;

    }