*{
  	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'inter', sans-serif;
}

html, body{
	margin: 0;
	padding: 0;
}

body{
  background-color: white;
}

#Z {
  position: fixed;
  right: 8px;
  bottom: 0;
  z-index: 1000;
}

.botcross {
  visibility: hidden;
  position: absolute;
  top: 24px;
  right: 0px;
  background-color: rgb(98, 98, 98);
  color: rgb(225, 223, 223);
  border-radius: 60%;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  z-index: 1001;
}

#Z .tool {
  width: 75px;
  height: 75px;
  cursor: pointer;
  font-size: 14px;

  background-image: url("../images/3_HS.png");
  background-size: cover;
  background-position: top;
  position: relative;
  display: inline-block;
  margin: 40px 15% 70px 0;
  background-color: #E65449;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#Z .tool span {
  opacity: 0;
  color: #fff;
  width: 140px;
  padding: 5px 10px;
  font-weight: 650;
  background: #444;
  text-align: center;
  position: absolute;
  border-radius: 6px;
  transition: opacity 0.2s;
  box-shadow: rgba(5, 5, 5, 0.35) 0px 5px 15px;
}

#Z .tool span:after {
  content: '';
  border-width: 5px;
  position: absolute;
  border-style: solid;
}

#Z .tool:hover span {
  opacity: 1;
}

#Z .tool .L-st {
  top: 0;
  left: -125px;
}

#Z .tool .L-st:after {
  bottom: 20%;
  left: 100%;
  border-color: transparent transparent transparent #444;
}

#Z.show span {
  opacity: 1;
}




@-webkit-keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @-moz-keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @-o-keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @-webkit-keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  @-moz-keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  @-o-keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  @keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }


  body {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC") repeat 0 0;
    -webkit-animation: bg-scrolling-reverse 0.92s infinite;
    -moz-animation: bg-scrolling-reverse 0.92s infinite;
    -o-animation: bg-scrolling-reverse 0.92s infinite;
    animation: bg-scrolling-reverse 0.92s infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

.footeritem ul li:hover{
    font-weight: 600;
    transition: all 0.2s linear;
}

.socialicons a:hover{
	transform: translateY(-10px);
  transition: 0.3s;
}

.job-card-slider .card:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 7px rgba(255, 255, 255, 0.23);
}

.bottom-btn:hover{
    background-color: #5767B0;
	  color: white;
    box-shadow: 0 4px 7px rgba(255, 255, 255, 0.23);
    border-color: white;
    transition: 0.2s;
}



.stats-grid > div:hover {
    border: 3px solid rgba(0, 0, 0, 0.783);
    box-shadow: 0 4px 7px rgba(0,0,0,0.23);
}


.seebelow:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}

.seebelow:active {
    color: #000
}

.seebelow:active:after {
    background: transparent;
}

.seebelow:hover:before {
    opacity: 1;
}

.seebelow:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}


.categorybox:hover{
    transform: scale(1.08);
}


.gallery-btn:hover{
	border-radius: 65px;
	border: 3px solid #fff;
	color: white;
	background-color: #E65449;
}

.team-heads:hover .team-head-img{
	width: 130%;
    height: 135%;
    transform: translateY(-100px);;
}

.infocardContainer:hover{
    transform: scale(1.05);
    background: #E65449;
}

.infocardContainer #textbois:hover #info-btn a{
	color: #E65449;
}

/*.workbox:hover{
    background-color: #fff;
    color: #000;
    transition: 0.3s;
}*/


.reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 0.3s all linear;
}

.reveal.active{
    transform: translateY(0);
    opacity: 1;
}



@media (max-width: 1263px) {
	html{
		font-size: 70%;
	}

  
   
  #hiring-services-box{
    padding: 0 3.5rem;
  }
  

}

@media (max-width:1270px) and (min-width:1022px) {
    /*.cardrow2 .btn{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        gap: 0.41rem;
        align-items: flex-start;
        margin-bottom: 0.41rem;
        padding: 0.5rem;
    }*/
    
    /*.btninfo{
        padding: 0.1rem 0.5rem;
        font-size: 0.6rem;
        border-radius: 20px;
    }*/
}


.shake-lr {
	-webkit-animation: shake-lr 1.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
	        animation: shake-lr 1.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

 

/* ----------------------------------------------
 * Generated by Animista on 2024-5-7 15:11:49
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation shake-lr
 * ----------------------------------------
 */
 @-webkit-keyframes shake-lr {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  10% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  80% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  90% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
}
@keyframes shake-lr {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  10% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  80% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  90% {
    -webkit-transform: rotate(8deg);
            transform: rotate(8deg);
  }
}


/*************LAYOUT*****************/

@media (max-width:1020px) {
        
    header {
        height: 58px; /*Adjust the hight to your purposes*/
    }


}