#tr_header.fixed-header{
    background-color: #fff;
    position: fixed;
    top:0;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.fixed-header .main-menu li a, .fixed-header .header_right .call_us a, .fixed-header .header_right .call_us span{
    color:var(--body)
}
.custom-sec-head{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.custom-sec-head img{
    height: 80px;
    margin-right: 40px;
}
.sidebar__toggle{
    color:#fff;
}

.service-title{
    padding:20px 50px;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    margin-bottom: 0;
    aspect-ratio: 1/1;
}

.service-title p{
    margin-bottom: 0;
    color: #fff;
    padding:0 25px;
}

.image-wrap{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    padding: 20px;
}
.image-wrap img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position:center ;
}

.main-list{
  width: min(100%, 60rem);
  overflow: hidden;
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 4rem);
  list-style: none;
  perspective: 1000px;
  display: grid;
  row-gap: 0.5rem;
}
.main-list li.card{
  position: relative;
  padding-block: 1.5rem;
  padding-inline: 2rem;
  background-color: var(--bg-color);
  background-image: linear-gradient(to right, rgb(0 0 0 / .15), transparent);
  transform-style: preserve-3d;
  color: var(--color);
  
  display: grid;
  grid-template: 'icon' 'title' 'content';
  row-gap: 0.5rem;
  column-gap: 2rem;
}
.main-list li.card::before, .main-list li.card::after {
  --side-rotate: 60deg;
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  transform-origin: calc(50% - (50% * var(--ry))) 50%  ;
  transform: rotateY(calc(var(--side-rotate) * var(--ry)));
  background-color: inherit;
  background-image: linear-gradient(calc(90deg * var(--ry)), rgb(0 0 0 / .25), rgb(0 0 0 / .5));  
}
.main-list li.card::before {--ry: -1; right: 100% }
.main-list li.card::after {--ry: 1; left: 100% }

.main-list li.card .icon {
  grid-area: icon;
  display: grid;
  place-items: center;
}
.main-list li.card .icon i {
  font-size: 2rem;
}
.main-list li.card .title{
  grid-area: title;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}
.main-list li.card .content{
  grid-area: content;
}

@media (min-width: 30rem){
  .main-list li.card {
    grid-template: 'icon title' 'icon content';
    text-align: left;
  }
  .main-list li.card .title { text-align: left }
}
.bg{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

.tilesWrap {
	padding: 0;
	margin: 50px auto;
	list-style: none;
	text-align: center;
}
.tilesWrap li {
	display: inline-block;
	width: 20%;
	padding: 20px 20px 20px;
	position: relative;
	vertical-align: top;
	margin: 10px;
	font-family: 'helvetica', san-serif;
	min-height: 25vh;
	background: #262a2b;
	border: 1px solid #252727;
	text-align: left;
}
.tilesWrap li h2 {
	font-size: 114px;
	margin: 0;
	position: absolute;
	opacity: 0.2;
	top: 50px;
	right: 10px;
	transition: all 0.3s ease-in-out;
}
.tilesWrap li h3 {
	font-size: 20px;
	color: #b7b7b7;
	margin-bottom: 5px;
}
.tilesWrap li p {
	font-size: 16px;
	line-height: 25px;
	color: #b7b7b7;
	margin-top: 5px;
}
.tilesWrap li button {
	background: transparent;
	border: 1px solid #b7b7b7;
	padding: 10px 20px;
	color: #b7b7b7;
	border-radius: 3px;
	position: relative;
	transition: all 0.3s ease-in-out;
	transform: translateY(-40px);
	opacity: 0;
	cursor: pointer;
	overflow: hidden;
}
.tilesWrap li button:before {
	content: '';
	position: absolute;
	height: 100%;
	width: 120%;
	background: #b7b7b7;
	top: 0;
	opacity: 0;
	left: -140px;
	border-radius: 0 20px 20px 0;
	z-index: -1;
	transition: all 0.3s ease-in-out;
	
}
.tilesWrap li:hover button {
	transform: translateY(5px);
	opacity: 1;
}
.tilesWrap li button:hover {
	color: #262a2b;
}
.tilesWrap li button:hover:before {
	left: 0;
	opacity: 1;
}
.tilesWrap li:hover h2 {
	top: 0px;
	opacity: 0.6;
}

.tilesWrap li:before {
	content: '';
	position: absolute;
	top: -2px;
	left: -2px;
	right: -2px;
	bottom: -2px;
	z-index: -1;
	background: #fff;
	transform: skew(2deg, 2deg);
}
.tilesWrap li:after {
	content: '';
	position: absolute;
	width: 40%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(255, 255, 255, 0.02);
}
.tilesWrap li:nth-child(1):before {
	background: #C9FFBF;
background: -webkit-linear-gradient(to right, #FFAFBD, #C9FFBF);
background: linear-gradient(to right, #FFAFBD, #C9FFBF);
}
.tilesWrap li:nth-child(2):before {
	background: #f2709c;
background: -webkit-linear-gradient(to right, #ff9472, #f2709c);
background: linear-gradient(to right, #ff9472, #f2709c);
}
.tilesWrap li:nth-child(3):before {
	background: #c21500;
background: -webkit-linear-gradient(to right, #ffc500, #c21500);
background: linear-gradient(to right, #ffc500, #c21500);
}
.tilesWrap li:nth-child(4):before {
	background: #FC354C;
background: -webkit-linear-gradient(to right, #0ABFBC, #FC354C);
background: linear-gradient(to right, #0ABFBC, #FC354C);
}

@media only screen and (max-width:600px){
    .call_us{
        display:none !important;
    }
    .header_top{
        display: none;
    }
    #tr_header{
        top:0;
        padding:0;
    }
    .fixed-header .sidebar__toggle{
        color:#000
    }
    .site_logo{
        margin-bottom: 0;
    }
    .tcat_content h4{
        font-size: 16px;
    }
    .tcat_content{
        left: 12px;
        bottom:12px;
    }
    .pt100{
        padding-top: 30px;
    }
    .pb100{
        padding-bottom: 30px;
    }
    .section-padding{
        padding: 30px 0;
    }
    .custom-sec-head{
        flex-direction: column;
        text-align: center;
    }
    .tilesWrap li {
        width: 50%;
    }
}