.rotator .top-head{
  margin-bottom: 30px;
  text-align: center;
}
.rotator .sub-head{
  text-align: center;
}

.rotator_01 .on-desktop{
  display:flex !important;
  padding-top:130px;
}
.rotator_01 .on-desktop .left-sec,
.rotator_01 .on-desktop .right-sec{
  width:50%;
}



.image-bg svg {
  width: 50px;
  top: 50%;  
  left: 50%; 
  transform: translate(-50%, -50%);
  position: absolute;
}
.image-bg  {
  position:relative;
}

/*********************** base ***********************/
.rotator_01 a {
  text-decoration: none;
  letter-spacing: 2px;
} 

.rotator_01 .service-rotation .caps.orenge{
  margin-bottom: 10px;
}


.rotator_01 .service-rotation .accordion {
  margin:1em 0
}
.rotator_01 .service-rotation .accordion h3 {
  color:#fff;
  cursor:pointer;
  margin:0 0 1px 0;
  padding:4px 10px;
  font-size:20px;
  position: relative;
  margin-bottom:10px;
}

.rotator_01 .service-rotation .accordion .current {
  cursor:default
}
.rotator_01 .service-rotation .accordion .pane {
  padding:5px 10px 20px 10px;
}
.rotator_01 .service-rotation  .mian_img{
  text-align: center;
  display: block;
  height: auto;
  width: auto;
  margin: auto;
  max-width:250px;
}
.rotator_01 .main-view{
  width: 100%;
  float: left;
  padding: 15px;
  position: relative;	
  -webkit-transition: all .25s .15s linear;
  -moz-transition: all .25s .15s linear;
  -ms-transition: all .25s .15s linear;
  -o-transition: all .25s .15s linear;
  transition: all .25s .15s linear;
}

.rotator_01 .service-rotation .image-bg:focus-visible,
.rotator_01 .main-view .image-bg .inner:focus-visible{
  outline: none;
}

.rotator_01 .img1{
  position: absolute;
  top: -50%;
  right: 38%;
}
.rotator_01 .img2{
  position: absolute;
  top: -27%;
  right: 12%;
}
.rotator_01 .img3{
  position: absolute;
  top: 25%;
  right: 4%;
}
.rotator_01 .img4{
  position: absolute;
  top: 80%;
  right: 12%;
}
.rotator_01 .img5{
  position: absolute;
  right: 38%;
  bottom: -52%;
}
.rotator_01 .img6{
  position: absolute;
  right: 63%;
  bottom: -29%;
}
.rotator_01 .img7{
  position: absolute;
  right: 73%;
  top: 25%;
}
.rotator_01 .img8{
  position: absolute;
  top: -30%;
  right: 64%;
}
.rotator_01 .service-rotation .image-bg {
  /* padding: 5px; */
  -webkit-transition: all .25s .15s linear;
  -   moz-transition: all .25s .15s linear;
  -ms-transition: all .25s .15s linear;
  -o-transition: all .25s .15s linear;
  transition: all .25s .15s linear;
}
.rotator_01 .section_txt-none.active1 {
  display: block !important
}
.rotator_01 .section_txt-none.active2 {
  display: block !important
}
.rotator_01 .section_txt-none.active3 {
  display: block !important
}
.rotator_01 .section_txt-none.active4 {
  display: block !important
}
.rotator_01 .section_txt-none.active5 {
  display: block !important
}
.rotator_01 .section_txt-none.active6 {
  display: block !important
}
.rotator_01 .section_txt-none.active7 {
  display: block !important
}
.rotator_01 .section_txt-none.active8 {
  display: block !important
}
.rotator_01 .section_txt-none {
  display: none
}
.rotator_01 .main-view.active1 .img1 img,
.rotator_01 .main-view.active2 .img2 img,
.rotator_01 .main-view.active3 .img3 img,
.rotator_01 .main-view.active4 .img4 img,
.rotator_01 .main-view.active5 .img5 img,
.rotator_01 .main-view.active6 .img6 img,
.rotator_01 .main-view.active7 .img7 img,
.rotator_01 .main-view.active8 .img8 img{
  filter: brightness(0) invert(1);
}

.rotator_01 .main-view.active1 .img1,
.rotator_01 .main-view.active2 .img2,
.rotator_01 .main-view.active3 .img3,
.rotator_01 .main-view.active4 .img4,
.rotator_01 .main-view.active5 .img5,
.rotator_01 .main-view.active6 .img6,
.rotator_01 .main-view.active7 .img7,
.rotator_01 .main-view.active8 .img8{
  border-radius: 50%;
}



.rotator_01 .main-view.active8 {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}
.rotator_01 .main-view.active8 .image-bg {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.rotator_01 .main-view.active1 {
  -ms-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0)
}
.rotator_01 .main-view.active1 .image-bg {
  -ms-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0)
}
.rotator_01 .main-view.active2 {
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg)
}
.rotator_01 .main-view.active2 .image-bg {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg)
}
.rotator_01 .main-view.active3 {
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg)
}
.rotator_01 .main-view.active3 .image-bg {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}
.rotator_01 .main-view.active4 {
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg)
}
.rotator_01 .main-view.active4 .image-bg {
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg)
}
.rotator_01 .main-view.active5 {
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg)
}
.rotator_01 .main-view.active5 .image-bg {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg)
}
.rotator_01 .main-view.active6 {
  -ms-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg)
}
.rotator_01 .main-view.active6 .image-bg {
  -ms-transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg)
}
.rotator_01 .main-view.active7 {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg)
}
.rotator_01 .main-view.active7 .image-bg {
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg)
} 


.rotator_01 .image-bg .inner img {
  width: 140px;
  height: 140px;
  padding: 25px 20px;
}
.rotator_01 .image-bg .inner-image img {
  width: 140px;
  height: 140px;
  /*   padding: 25px 20px; */
  border-radius: 50%;
}
.rotator_01 .image-bg .inner-image {
  background: #fff;
  display: flex;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  cursor:pointer;
  line-height:110px;
}
.rotator_01 .image-bg .inner {
  background: #fff;
  display: flex;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  cursor:pointer;
  line-height:110px;
}
.rotator_01 .image-bg .inner:hover {
  background: #ff8b00;
}
.rotator_01 .image-bg .inner:hover svg, .rotator_01 .image-bg .inner:focus svg,
.rotator_01 .image-bg .inner:visited svg, .rotator_01 .image-bg .inner:hover i,
.rotator_01 .image-bg .inner:focus i, .rotator_01 .image-bg .inner:visited i{
  color: #fff;
}
.rotator_01 .image-bg .inner:hover i, .rotator_01 .image-bg .inner:focus i, 
.rotator_01 .image-bg .inner:visited i{
  color: #fff;
}
.rotator_01 .image-bg .inner:hover img {
  filter: brightness(0) invert(1);
}

.rotator_01 .service-rotation .section_txt {
  margin-top: 50px;
}
.rotator_01 .service-rotation .on-mobile {
  display: none;
}
.rotator_01 .service-rotation .on-desktop {
  display: block;
}
.rotator_01 .horizontal-tab .on-mobile {
  display: none;
}
.rotator_01 .horizontal-tab .on-desktop {
  display: block;
}
.rotator_01 .horizontal-tab .accordion {
  margin:1em 0
}
.rotator_01 .horizontal-tab .accordion h3 {
  background: #f7c345;
  color:#fff;
  cursor:pointer;
  margin:0 0 1px 0;
  padding:4px 10px;
  font-size:20px;
  position: relative;
}
.rotator_01 .horizontal-tab.accordion h3.current {
  background:#f58220;
  cursor:default
}
.rotator_01 .horizontal-tab .accordion div.pane {
  padding:5px 10px
}
.rotator_01 .services-page .container-two .page-center {
  padding-bottom: 50px;
  padding-top: 25px;
}
.rotator_01 .image-bg .inner svg,.image-bg .inner i{
  margin: auto;
  font-size: 35px;
}

.rotator_01 .main-view.active1 .img1 .inner svg,
.rotator_01 .main-view.active2 .img2 .inner svg,
.rotator_01 .main-view.active3 .img3 .inner svg,
.rotator_01 .main-view.active4 .img4 .inner svg,
.rotator_01 .main-view.active5 .img5 .inner svg,
.rotator_01 .main-view.active6 .img6 .inner svg,
.rotator_01 .main-view.active7 .img7 .inner svg,
.rotator_01 .main-view.active8 .img8 .inner svg{
  color:#fff; 
}
.rotator_01 .main-view.active1 .img1 .inner i,
.rotator_01  .main-view.active2 .img2 .inner i,
.rotator_01  .main-view.active3 .img3 .inner i,
.rotator_01  .main-view.active4 .img4 .inner i,
.rotator_01 .main-view.active5 .img5 .inner i, 
.rotator_01 .main-view.active6 .img6 .inner i,
.rotator_01  .main-view.active7 .img7 .inner i,
.rotator_01  .main-view.active8 .img8 .inner i{
  color:#fff; 
}


@media only screen and ( max-width: 1100px ) and (min-width: 986px){
  .rotator_01 .on-desktop .left-sec{
    width: 49%;
  }
  .rotator_01 .on-desktop .right-sec{
    width:42%;
  }

  .rotator_01 .service-rotation .mian_img {
    width: 50%;
  }
  .rotator_01{
    padding:0px 0 0px 0;
  }
  .rotator_01 .image-bg .inner img {
    width: 100px;
    height: 100px;
    padding: 25px 20px;
  }
  .rotator_01 .image-bg .inner-image {
    width: 100px;
    height: 100px;
  }
  .rotator_01 .image-bg .inner-image img {
    width: 100px;
    height: 100px;
  }
  .rotator_01 .image-bg .inner {
    width: 100px;
    height: 100px;
  }

  .rotator_01 .img1 {
    top: -17% !important;
    right: 65% !important;
  }
  .rotator_01 .img2 {
    top: -42% !important;
    right: 38% !important;
  }
  .rotator_01 .img3 {
    top: -23% !important;
    right: 11% !important;
  }
  .rotator_01 .img4 {
    right: 0% !important;
    top: 27% !important;
  }
  .rotator_01 .img5 {
    right: 9.5% !important;
    bottom: -22%;
  }
  .rotator_01 .img6 {
    right: 38% !important;
    bottom: -38% !important;
  }
  .rotator_01 .img7 {
    right: 65% !important;
    top:77%;
  }
  .rotator_01 .img8 {
    right: 76% !important;
    top: 29% !important;
  }
}



@media only screen and ( max-width: 1400px ) and (min-width: 1100px){
  .rotator_01 .on-desktop .left-sec{
    width: 49%;
  }
  .rotator_01 .on-desktop .right-sec{
    width:42%;
  }

  .rotator_01 .service-rotation .mian_img {
    width: 50%;
  }
  .rotator_01{
    padding:0px 0 0px 0;
  }
  .rotator_01 .image-bg .inner img {
    width: 100px;
    height: 100px;
    padding: 25px 20px;
  }
  .rotator_01 .image-bg .inner-image {
    width: 100px;
    height: 100px;
  }
  .rotator_01 .image-bg .inner-image img {
    width: 100px;
    height: 100px;
  }
  .rotator_01 .image-bg .inner {
    width: 100px;
    height: 100px;
  }

  .rotator_01 .img1 {
    top: -16% ;
    right: 67%;
  }
  .rotator_01 .img2 {
    top: -37%;
    right: 40%;
  }
  .rotator_01 .img3 {
    top: -15%;
    right: 14%;
  }
  .rotator_01 .img4 {
    right: 5%;
    top: 29%;
  }
  .rotator_01 .img5 {
    right: 12.5%;
    bottom: -16%;
  }
  .rotator_01 .img6 {
    right: 40%;
    bottom: -37%;
  }
  .rotator_01 .img7 {
    right: 67%;
    top:79%;
  }
  .rotator_01 .img8 {
    right: 76%;
    top: 30%;
  }
}

@media only screen and (max-width: 985px) and (min-width: 768px){
  .rotator_01{
    padding:0;
  }
  .rotator_01 .service-rotation .accordion h3:after {
    content: '\f067';
    font-family: "Font Awesome 5 Solid";
    font-size: 12px;
    margin-top: 3px;
  } 
  .rotator_01 .service-rotation .accordion h3 svg, 
  .rotator_01 .service-rotation .accordion h3 i{
    position: absolute;
    right: 7%;
    top: 30px;
  }
  .rotator_01 .service-rotation .accordion h3:after,
  .rotator_01 .service-rotation .accordion h3.current:after{
    display:none;
  }
  .rotator_01 .service-rotation .accordion h3.current:after {
    content: '\f068 ';
    font-family: "Font Awesome 5 Solid";
    font-size: 12px;
    margin-top: 5px;
  } 
  .rotator_01 .service-rotation .accordion h3 {
    padding: 15px 10px !important;
  }
  .rotator_01 .service-rotation .on-mobile {
    display: block !important;
  }
  .rotator_01 .service-rotation .on-desktop {
    display: none !important;
  }
}

@media only screen and (max-width: 767px) and (min-width: 480px){
  .rotator_01 .service-rotation .accordion h3:after {
    content: '\f067';
    font-family: "Font Awesome 5 Solid";
    font-size: 12px;
    margin-top: 3px;
  } 
  .rotator_01 .service-rotation .accordion h3 svg, 
  .rotator_01 .service-rotation .accordion h3 i{
    position: absolute;
    right: 7%;
    top: 30px;
  }
  .rotator_01 .service-rotation .accordion h3:after,
  .rotator_01 .service-rotation .accordion h3.current:after{
    display:none;
  }
  .rotator_01 .service-rotation .accordion h3.current:after {
    content: '\f068 ';
    font-family: "Font Awesome 5 Solid";
    font-size: 12px;
    margin-top: 5px;
  }
  .rotator_01 .service-rotation .accordion h3 {
    padding: 15px 10px !important;
  }
  .rotator_01 .service-rotation .on-mobile {
    display: block !important;
  }
  .rotator_01 .service-rotation .on-desktop {
    display: none !important;
  }
}


@media only screen and (max-width: 479px) and (min-width: 320px){

  .rotator_01{
    padding:0;
  }
  .rotator_01 .service-rotation .accordion h3:after {
    content: '\f067';
    font-family: "Font Awesome 5 Solid";
    font-size: 12px;
    margin-top: 3px;
  } 
  .rotator_01 .service-rotation .accordion h3 svg,
  .rotator_01 .service-rotation .accordion h3 i{
    position: absolute;
    right: 7%;
    top: 30px;
  }
  .rotator_01 .service-rotation .accordion h3:after,
  .rotator_01 .service-rotation .accordion h3.current:after{
    display:none;
  }
  .rotator_01 .service-rotation .accordion h3.current:after {
    content: '\f068 ';
    font-family: "Font Awesome 5 Solid";
    font-size: 12px;
    margin-top: 5px;
  }  
  .rotator_01 .service-rotation .accordion h3 {
    /*     font-size: 14px !important; */
    padding: 15px 10px !important;
  }

  .rotator_01 .service-rotation .on-mobile {
    display: block !important;
  }
  .rotator_01 .service-rotation .on-desktop {
    display: none !important;
  }
}

@media only screen and (max-width: 319px) and (min-width: 240px){
  .rotator_01{
    padding:60px 0 180px 0;
  }
  .rotator_01 .service-rotation .accordion h3:after {
    content: '\f067';
    font-family: "Font Awesome 5 Solid";
    font-size: 12px;
    margin-top: 3px;
  } 
  .rotator_01 .service-rotation .accordion h3 svg, 
  .rotator_01 .service-rotation .accordion h3 i{
    position: absolute;
    right: 7%;
    top: 30px;
  }
  .rotator_01 .service-rotation .accordion h3:after,
  .rotator_01 .service-rotation .accordion h3.current:after{
    display:none;
  }
  .rotator_01 .service-rotation .accordion h3.current:after {
    content: '\f068 ';
    font-family: "Font Awesome 5 Solid";
    font-size: 12px;
    margin-top: 5px;
  }
  .rotator_01 .service-rotation .accordion h3 {
    font-size: 16px !important;
    padding: 15px 10px !important;
  }

  .rotator_01 .service-rotation .on-mobile {
    display: block !important;
  }
  .rotator_01 .service-rotation .on-desktop {
    display: none !important;
  }
}



/* @media only screen and (max-width: 1300px) {
.rotator_01 .main-view.active8,
.rotator_01 .main-view.active8 .image-bg,
.rotator_01 .main-view.active1,
.rotator_01 .main-view.active1 .image-bg,
.rotator_01 .main-view.active2 ,
.rotator_01 .main-view.active2 .image-bg,
.rotator_01 .main-view.active3 ,
.rotator_01 .main-view.active3 .image-bg ,
.rotator_01 .main-view.active4 ,
.rotator_01 .main-view.active4 .image-bg ,
.rotator_01 .main-view.active5 ,
.rotator_01 .main-view.active5 .image-bg ,
.rotator_01 .main-view.active6 ,
.rotator_01 .main-view.active6 .image-bg ,
.rotator_01 .main-view.active7 ,
.rotator_01 .main-view.active7 .image-bg {
transform:none;
} */