@charset "utf-8";
/* CSS Document */

.tat-service-card {
 text-align:center;
 position:relative;
 padding-bottom:40px
}
.tat-service-card .tat-title-box {
 position:absolute;
 left:40px;
 right:40px;
 bottom:0;
 z-index:2;
 background-color:var(--white-color);
 padding:25px 0;
 opacity:1;
 visibility:visible;
 margin-bottom:0;
 box-shadow:0 5px 37px 0 rgba(0,0,0,0.08)
}
.tat-service-card .tat-service-img {
 position:relative
}
.tat-service-card .tat-service-img:before {
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 height:0;
 width:100%;
 background-color:var(--black-color);
 opacity:0.50;
 visibility:hidden
}
.tat-service-card .tat-service-content {
 position:absolute;
 left:0;
 right:0;
 top:50%;
 -webkit-transform:translateY(-50%);
 -ms-transform:translateY(-50%);
 transform:translateY(-50%);
 padding-bottom:38px;
 margin-top:50px;
 opacity:0;
 visibility:hidden
}
.tat-service-card .tat-service-text {
 max-width:290px;
 margin-left:auto;
 margin-right:auto
}
.tat-service-card .tat-title-box,
.tat-service-card .tat-service-content,
.tat-service-card .tat-service-img:before {
 -webkit-transition:all ease 0.4s;
 transition:all ease 0.4s
}
.tat-service-card:hover .tat-service-content {
 opacity:1;
 visibility:visible;
 -webkit-transition-delay:0.2s;
 transition-delay:0.2s;
 margin-top:1px
}
.tat-service-card:hover .tat-title-box {
 opacity:0;
 visibility:hidden;
 margin-bottom:80px
}
.tat-service-card:hover .tat-service-img::before {
 height:100%;
 visibility:visible
}
.tat-video {
  width: 387px;
  height: 431px;
}
.tat-video-long {
  width: 1170px;
  height: 431px;
}
.tat-service-box {
 padding:50px 60px 53px 60px;
 position:relative;
 overflow:hidden;
 z-index:1
}
.tat-service-box:before {
 content:'';
 position:absolute;
 right:-80px;
 bottom:-80px;
 background-color:rgba(var(--theme-color), 1);
 width:81px;
 height:81px;
 -webkit-transform:rotate(45deg);
 -ms-transform:rotate(45deg);
 transform:rotate(45deg);
 -webkit-transition:all ease 0.4s;
 transition:all ease 0.4s
}
.tat-service-box:after {
 content:'';
 position:absolute;
 right:0;
 bottom:0;
 width:0;
 height:0;
 background-color:var(--white-color);
 -webkit-transition:all ease 0.4s;
 transition:all ease 0.4s
}
.tat-service-box:hover::before {
 right:-50px;
 bottom:-50px
}
.tat-service-box.has-gradient:before {
 z-index:3
}
.tat-service-box.has-gradient .tat-service-content {
 position:relative;
 z-index:4
}
.tat-service-box.has-gradient .tat-link-btn,
.tat-service-box.has-gradient .tat-service-text,
.tat-service-box.has-gradient .tat-service-title a,
.tat-service-box.has-gradient .icon {
 -webkit-transition:all ease 0.4s;
 transition:all ease 0.4s;
 color:var(--white-color)
}
.tat-service-box.has-gradient:hover .tat-service-text {
 color:var(--body-color)
}
.tat-service-box.has-gradient:hover:after {
 height:100%;
 width:100%
}
.tat-service-box.has-gradient:hover .tat-service-title a {
 color:var(--title-color)
}
.tat-service-box.has-gradient:hover .tat-service-title a:hover {
 color:rgba(var(--theme-color), 1)
}
.tat-service-box.has-gradient:hover .link-btn,
.tat-service-box.has-gradient:hover .icon {
 color:rgba(var(--theme-color), 1)
}
@media (max-width: 1199px) {
 .tat-service-card .tat-title-box {
  left:20px;
  right:20px;
  padding:25px 0
 }
 .tat-service-card .tat-service-text {
  max-width:280px
 }
}


.tat-vs-btn {
 display:inline-block;
 position:relative;
 border:none;
 background-color:rgba(var(--theme-color), 1);
 color:var(--white-color);
 padding:19.5px 39px;
 font-weight:700;
 line-height:1;
 border-radius:9999px;
 font-size:16px;
 z-index:1;
 margin-right:12.5px;
 -webkit-transition:all ease 0.4s;
 transition:all ease 0.4s
}
.tat-vs-btn:after {
 content:'';
 position:absolute;
 left:auto;
 right:0;
 top:50%;
 height:0;
 width:0;
 background-color:var(--tat-blue-color);
 z-index:-1;
 -webkit-transform:translateY(-50%);
 -ms-transform:translateY(-50%);
 transform:translateY(-50%);
 border-radius:inherit;
 -webkit-transition:all ease 0.4s;
 transition:all ease 0.4s
}
.tat-vs-btn i {
 display:inline-block;
 background-color:var(--silver-color);
 width:25px;
 height:25px;
 line-height:25px;
 position:absolute;
 right:-12.5px;
 top:50%;
 margin-top:-12.5px;
 color:rgba(var(--tat-color), 1);
 border-radius:100%;
 font-size:0.7em;
 text-align:center;
 -webkit-transition:inherit;
 transition:inherit;
 z-index:3
}
.tat-vs-btn.style2 {
 background-color:var(--tat-color)
}
.tat-vs-btn.style2:after {
 display:none
}
.tat-vs-btn.style2 i {
 background-color:var(--tat-color)
}
.tat-vs-btn.style2:hover {
 background-color:var(--smoke-color);
 color:var(--title-color)
}
.tat-vs-btn.style2:hover i {
 background-color:var(--title-color)
}
.tat-vs-btn.style3 {
 background-color:transparent;
 border-radius:0;
 padding-left:30px;
 padding-right:44px;
 margin-right:0
}
.tat-vs-btn.style3::before {
 content:'';
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
 background-color:rgba(var(--theme-color), 1);
 z-index:-1
}
.tat-vs-btn.style3::before,
.tat-vs-btn.style3::after {
 -webkit-clip-path:polygon(0 0, 100% 0%, calc(100% - 25px) 100%, 0% 100%);
 clip-path:polygon(0 0, 100% 0%, calc(100% - 25px) 100%, 0% 100%)
}
.tat-vs-btn.style3:after {
 left:auto;
 right:0;
 top:0;
 height:100%;
 opacity:0;
 visibility:hidden;
 -webkit-transform:translateY(0);
 -ms-transform:translateY(0);
 transform:translateY(0)
}
.tat-vs-btn.style3:hover:after {
 opacity:1;
 visibility:visible;
 left:auto;
 right:0
}
.tat-vs-btn.style3 i {
 right:0px
}
.tat-vs-btn.style4 {
 border-radius:0
}
.tat-vs-btn.style5 {
 background-color:var(--secondary-color);
 color:rgba(var(--theme-color), 1)
}
.tat-vs-btn.style5 i {
 color:var(--white-color);
 background-color:rgba(var(--theme-color), 1)
}
.tat-vs-btn.style5:hover {
 background-color:rgba(var(--theme-color), 1);
 color:var(--white-color)
}
.tat-vs-btn.style5:hover i {
 background-color:var(--secondary-color);
 color:rgba(var(--theme-color), 1)
}
.tat-vs-btn.style6 {
 background-color:rgba(var(--theme-color), 1);
 color:var(--white-color)
}
.tat-vs-btn.style6:after {
 display:none
}
.tat-vs-btn.style6:hover {
 background-color:var(--title-color);
 color:var(--white-color)
}
.tat-vs-btn:hover {
 color:var(--white-color)
}
.tat-vs-btn:hover:after {
 width:calc(100% + 1px);
 height:calc(100% + 1px);
 right:auto;
 left:0
}
.tat-vs-btn:hover i {
 background-color:rgba(var(--theme-color), 1);
 color:var(--white-color)
}
.tat-icon-btn {
 display:inline-block;
 width:45px;
 height:45px;
 line-height:45px;
 border:none;
 background-color:rgba(var(--theme-color), 1);
 color:var(--white-color);
 text-align:center;
 border-radius:50%;
 font-size:16px
}
.tat-icon-btn.style3:hover,
.tat-icon-btn:hover {
 background-color:var(--title-color);
 color:var(--white-color)
}
.tat-icon-btn.style2 {
 background-color:var(--white-color);
 color:var(--black-color)
}
.tat-icon-btn.style2:hover {
 background-color:var(--title-color);
 color:var(--white-color)
}
.tat-icon-btn.style3 {
 background-color:rgba(var(--theme-color), 0.12);
 color:var(--black-color)
}
.tat-icon-btn.style4 {
 border-radius:5px;
 background-color:var(--smoke-color);
 color:var(--black-color);
 font-size:18px
}
.tat-icon-btn.style4:hover,
.tat-icon-btn.style4.active {
 background-color:rgba(var(--theme-color), 1);
 color:var(--white-color)
}
.tat-icon-btn.style5 {
 background-color:var(--title-color);
 color:var(--white-color)
}
.tat-icon-btn.style5:hover {
 background-color:rgba(var(--theme-color), 1);
 color:var(--white-color)
}

.tat2-vs-btn[class*="wave"] {
  padding: 7px;
  padding-left: 40px;
}

.tat2-vs-btn[class*="wave"] .vs-btn-icon {
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  background-color: var(--theme-color);
  color: var(--white-color);
  margin-left: 27px;
  font-size: 16px;
  --n: 5;
}

.tat2-vs-btn.wave-style1 .vs-btn-icon {
  background-color: var(--theme-color);
  color: var(--white-color);
}

.tat2-vs-btn.wave-style1:hover {
  color: var(--white-color);
  --n: 2;
}

.tat2-vs-btn.wave-style1:hover .vs-btn-icon {
  background-color: var(--white-color);
  color: var(--theme-color);
}