@media screen and (max-width: 767px) {
      .banner .slider{
          width: 100px;
          height: 160px;
          left: calc(50% - 50px);
      }
      .banner .slider .item{
          transform: 
              rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
              translateZ(150px);
      }
      
  }
/* **********************************************************************************8 */
   /* MEDIA QUERY FOR 360 IMG SLIDER  */
   @media screen and (max-width: 1023px) {
    #serv{
      margin-top: 0;
      height: auto;
      padding: 0;
      /* background-color: red; */
    }
    .serv-texts{
      width: 100%;
      height: auto;
      padding: 15px;
    }
    .serv-texts h3{
        font-weight: bold;
    }
  /* ************************** */
    .banner{
      margin-top: 20px;
      height: 40vh;
      /* background-color: orange; */
    }
    .banner .slider{
        padding-top: 30px;
        width: 160px;
        height: 200px;
        left: calc(50% - 80px);
    }
    .banner .slider .item{
        transform: 
            rotateY(calc( (var(--position) - 1) * (360 / var(--quantity)) * 1deg))
            translateZ(250px);
    }
  
}
     /* **************************************8 */