.swiper-wrapper {
     transition-timing-function: linear !important;
 }
 .section-highlights .box-highlights .box-detail .text-animate {
     position: absolute;
     top: 20px;
     left: 20px;
     transition: all 0.8s ease;
     padding: 10px 20px;
     border-radius: 6px;
     width: auto;
 }
 .text-animate p.slide-up {
     opacity: 0;
     transform: translateX(1920px) translateY(50%);
 
     transition: all 1s ease;
 }
 .text-animate p.slide-down {
     opacity: 0;
     transform: translateX(1920px) translateY(50%);
     transition: all 1s ease;
 }
 .section-highlights .box-highlights .box-detail .text-animate.center p {
     opacity: 1;
     transform: translateX(0) translateY(0);
 }
 
 .section-highlights .box-highlights .box-detail .text-animate.center {
     /* top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center; */
     text-align: center;
     animation: moveToCenter 0.8s ease forwards;
 }
 
 .box-detail {
     background-color: transparent;
     transition: background-color 1s ease;
 }
 .box-detail.has-center {
     background-color: rgba(0, 0, 0, 0.5);
 }
 .slide-center {
     width: 100% !important;
     transition: all 1s ease;
 }
 
 /* ใช้ keyframes ในการ animate */
 .slide-to-center {
     animation: moveToCenter 0.8s ease forwards;
 }
 
 .w-md-100 {
     width: 100% !important;
 }
 @keyframes moveToCenter {
     0% {
         top: 20px;
         left: 20px;
         transform: none;
     }
     100% {
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
     }
 }
 @media (max-width: 768px) {
     .w-md-100 {
         width: auto !important;
     }
     .section-highlights .box-highlights .box-detail .control-transform p {
         width: 100%;
         opacity: 1;
     }
     .section-services .group-services .grid-services .detail-services {
         height: auto;
     }
     .section-services .group-services .grid-services .detail-services .top-detail {
         padding: 50px 10px;
     }
     .text-animate p.slide-down,
     .text-animate p.slide-up {
         transform: initial;
     }
 }

  @media (max-width: 768px){
    .section-highlights .box-highlights .box-detail .text-animate{
      position: relative;
      left: 0;
    }
  }