*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
/*     border :  1px solid blue; */
}

:root
{
   --color1:#F0FF42;
   --color2:#82CD47;
   --color3:#54B435;
   --color4:#379237;
   --color5:#B2B2B2;
   --color6:#F5F7FA;
   --color7:#EEECF7;
   --color8:#5535F0;
   --color9:#441CFF;
   --insta: #8a3ab9;
   --facebook: #3b5998;
   --youtube: #cd201f;
   --whatsapp: #075E54;
   --linkedin: #0077b5;
   --skype: #00aff0;
   --twitter: #00acee;

}
.testBorder{
  border-bottom: 5px solid var(--facebook);
  border-radius: 11px;
  color: var(--linkedin);
}
body{
    height: 100vh;
/*    width: 100vw;*/
position: relative;
margin: auto 0;
}
.circleBtn {
  background: var(--color7);
  border: 0;
  color: var(--insta);
  font-weight: bold;
  border-radius: 5px;
  height: 40px;
  transition: all 0.2s ease;
}

.circleBtn:hover {
    background: var(--color9);
    color: var(--color6);
}

.circleBtn:focus {
    background: var(--color9);
    outline: 0;  
}
.bgcolor1{
    background-color: var(--color1) !important;
}
.Txcolor1{
    color: var(--color1) !important;
}
.bgcolor2{
    background-color: var(--color2) !important;
}
.Txcolor2{
    color: var(--color2) !important;
}
.bgcolor3{
    background-color: var(--color3) !important;
}
.Txcolor3{
    color: var(--color3) !important;
}
.bgcolor4{
    background-color: var(--color4) !important;
}
.Txcolor4{
    color: var(--color4) !important;
}
.bgcolor5{
    background-color: var(--color5) !important;
}
.Txcolor5{
    color: var(--color5) !important;
}
.bgcolor6{
    background-color: var(--color6) !important;
}
.Txcolor6{
    color: var(--color6) !important;
}
.font-1{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 500;
}
.font-2{
 font-family: 'Libre Baskerville', serif;
}
.font-3{
   font-family: 'Poppins', sans-serif;
}
.skypeText{
    color: var(--skype);
}
.skypeBg{
 background-color: var(--color1) !important;
}
.instaText{
    color: var(--insta);
}
.facebookText{
    color: var(--facebook);
}
.linkedinText{
    color: var(--linkedin);
}
.whatsappText{
    color: var(--whatsapp);
}
.twitterText{
    color: var(--twitter);
}
.youtubeText{
    color: var(--youtube);
}

.bg-Img{
    width: 100%;
    height: 100vh;
    background-image: url(../imgs/background.jpg);
    background-position: center;
    background-size: cover;
    object-fit: contain;
}
.headerLogo{
    width:50px;
    height: 50px;

}
.whyChooseImg{
    width: 100%;
    min-height:250px;
    max-height: 400px;
}
.sliderImg{
    height: 250px;
    width: 100%;
}
.meetImg{
    width: 100%;
}
.card_list  > li{
    list-style: none;
}
.toolImg{
    height: 200px;
    width: 100%;
}
.servicesImg{
    max-height: 180px;
    min-height: 180px !important;
    width: 100%;
}
.footer{
    background:  rgba(0,0,0,0.54);
    background-blend-mode :soft-light;
}
.footerLogo{
    height: 70px;
    width: 70px;
    object-fit: contain;
}
.footerLinks > a{
    text-decoration: none;
    font-size: 1rem;
}
.slide2Img{
    height: 250px;
}
.bg-transparent{
    background-color: rgba(0, 0, 0, 0.3) !important;
}

.caoruseImg{
    max-height: 170px;
    min-height: 170px;
    width: inherit;
}
.workImg{
    max-height: 250px;
    min-height: 250px;
    max-width: 250px;
}
.fixed-Bg{
    background-image: url('../imgs/tools.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    width: 100%;
    height: 100vh;
    position:relative
}
.fixed-Bg::after{
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
}
.bg-text{
    position: absolute;
    z-index: 10;
    color: white;
}

.track {
    position: relative;
    background-color: #ddd;
    height: 7px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 60px;
    margin-top: 50px;
}
.track .step {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 25%;
    margin-top: -18px;
    text-align: center;
    position: relative;
}
.track .step.active:before {
    background: #ff5722;
}
.track .step::before {
    height: 7px;
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    top: 18px;
}
.track .step.active .icon {
    background: #ee5435;
    color: #fff;
}
.track .icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    position: relative;
    border-radius: 100%;
    background: #ddd;
}
.track .step.active .text {
    font-weight: 400;
    color: #000;
}
.track .text {
    display: block;
    margin-top: 7px;
}
body{
    height: 100vh;
/*     width: 100vw; */
position: relative;
margin: auto 0;
}
.main_loader{
   position: fixed;
   height: 100%;
   width: 100%;
   top:0;
   left: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 100000 !important;
   background-color: rgba(0, 0, 0, 0.6);
   overflow: 'hidden';
}
.loader {
    animation: rotate 1s infinite;
    height: 50px;
    width: 50px;
    position: relative;
    z-index: 10001;
}
.loader::before,
.loader::after {
    content: "";
    display: block;
    height: 20px;
    width: 20px;
}
.loader::before {
    animation: box1 1s infinite;
    background-color: #fff;
    box-shadow: 30px 0 0 yellow;
    margin-bottom: 10px;
}
.loader::after {
    animation: box2 1s infinite;
    background-color: yellow;
    box-shadow: 30px 0 0 #fff;
}

@keyframes rotate {
    0% { transform: rotate(0deg) scale(0.8) }
    50% { transform: rotate(360deg) scale(1.2) }
    100% { transform: rotate(720deg) scale(0.8) }
}

@keyframes box1 {
    0% {
      box-shadow: 30px 0 0 yellow;
  }
  50% {
      box-shadow: 0 0 0 yellow;
      margin-bottom: 0;
      transform: translate(15px, 15px);
  }
  100% {
      box-shadow: 30px 0 0 yellow;
      margin-bottom: 10px;
  }
}

@keyframes box2 {
    0% {
      box-shadow: 30px 0 0 #fff;
  }
  50% {
      box-shadow: 0 0 0 #fff;
      margin-top: -20px;
      transform: translate(15px, 15px);
  }
  100% {
      box-shadow: 30px 0 0 #fff;
      margin-top: 0;
  }
}