*{

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'roboto'; 
     
  
}
html,body{
    width: 100%;
   overflow-x: hidden;
  
}
p,ul,li,a{
font-size: 14px;}


/* .r-container{
    max-width: 1300px;
    margin: auto;
} */
.paras{
    color:#6b6a6a; 
    margin-bottom: 5px;
}
.heads{
    font-weight: bold;
}

/* ===============================header=========================================== */
.header{
background-image: url(/image/home/coverpage-img.jpg);
width: 100%;
height: 100vh;
background-repeat: no-repeat;
  /* background-attachment: fixed; */
  background-position: center;
  background-size: cover;
  position: relative;

}
/* .header_container{
    background-image: url(/image/home/header-img.png);
    background-repeat: no-repeat;
    background-position: right;
   
    height: 87.6vh;
    width: 100%;
} */
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1.5rem;
   
}
.header-box{
position: absolute;
top: 50%;
left: 40%;
transform: translate(-50%,-50%);
}


.list{
    color: #000!important;
    font-size: 13px;
   font-weight: 500;
}
.list:hover{
    color: #FF7F00!important;
    
}
.active{
    color: #FF7F00!important;
}
.navbtn{
    
    
    border: 1px solid transparent;
    border-radius: 1rem;
    background-color: #FF7F00;
    color: #fff;
    padding: 5px 20px;
    font-size: 13px;
    font-weight: 500;
}
.navbtn:hover{
    background-color: #fff;
    color: #FF7F00;
    border: 1px solid #FF7F00;
    font-weight: 700;
}
.header-h1{
    font-size: 65px;
    /* padding-left: 5rem; */
    padding-top: 10rem;
    line-height: 1;
    
}
.header-p{
   
    /* padding-left: 5rem; */
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 65%;
    font-size: 16px;
}
.header-span1{
    font-weight: bold;
}
.header-span{
    font-weight: bold;
    color: #FF7F00;
}
.find-job{
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-left: 5rem; */
    margin-top: 3rem;
    background-color: #fff;
    width: 90%;
    border-radius: 1rem;
}
.job-cat{
    padding: 12px;
    border: none;
    width: 100%;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    margin-left: 10px;

}
.location{
    padding: 12px;
    border: none;
    margin-left: 10px;
    border-left: .2px solid #FF7F00;
    outline: 0;
    width: 100%;
}
.jobs{
    padding: 12px 30px;
    border: 1px solid transparent;
    background-color: #FF7F00;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
    outline: 0;
    width: 100%;
    color: #fff;
}
.jobs1{
    padding: 12px 30px;
    border:1px solid transparent;
    background-color: #FF7F00;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    margin-left: 1px;
    width: 100%;
    color: #fff;outline: 0;
}
.jobs1:hover,.jobs:hover{
    border: .5px solid #FF7F00;
    background-color: #fff;color: #FF7F00;
}
 .job-des{margin-left: 12rem;} 

/*==========sidebar hrservice===========*/
#sidebar{
        position:fixed;
        z-index: 99;
       top: 30%;
       
        transform:rotate(90deg);
        transform-origin: 8% 20%;
        display: none;
    }
    .slidebar1{
       background-color: #fff;
        font-weight: 600;
        text-decoration: none;
        color: #000;
       
        padding: 5px;
        width: 150px;
        border: 1px solid #FF7F00;
        display: flex;
        justify-content: start;
        align-items: center;
        /* border-radius: 16px; */
        /* transition: 1s;
        transition-property: transform; */
    }
    .activee{
        background-color: #FF7F00; color: #fff;
    }
    .slidebar1:hover{
        /* transform: translate(-150px,0); */
        background-color: #FF7F00; color: #fff;

    }
   
    .slidebar1 h6{
        margin: 0;
        margin-left:10px ;
        font-size: 12px;
    }
   
    
    .slidebar1 img{
        width: 10%;
    }
    .simpli_content {
       
    top: 20%;
    width: 70%;
    }
    /* @media screen and (max-width: 991px) {
        .sidebar{
        
  
       
   
       
}
} */
    @media screen and (max-width: 568px) {
        
    .hr-header .row{
        display: none;
    }
    .sidebar h6{
       font-size: 11px!important;
    }
    .sidebar a{
        padding: 5px;
        width: 100px;
    }
    .slidebar1{
        
        width: 125px;
    }
    #sidebar{
        left: -2%;
        top: 25%;
    }

    }


/*=============================*/
.job-box{
    padding: 10px;
    margin: 10px;
    
    border-radius: 1rem;
    box-shadow: 0px 3px #FF7F00;
    background-color: #FFF;
}
.job-boxx{
    padding: 10px;
    margin: 10px;
    background-color: #FFF;
    border-radius: 1rem;
    box-shadow: 0px 3px #3CC3ED;
}
#resource{
    width:100%;
min-width: 400px;
height: auto;

}
.test-card .card{
background-color: transparent;
width: 100%;
padding: 4rem,1rem;
}
.test-card .card-body{

padding: 7rem 1rem;
}
@media screen and (max-width: 991px) {
  
    .test-card .card-body{

padding: 0rem 1rem !important;

   

   
}
}


/* Job Listings */
.job-listings {
    padding: 0;
    margin: 0;
    border: 1px solid #eee;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
    background: #fff; }
    .job-listings .badge {
      color: #fff;
      padding: 4px 10px; }
    @media (max-width: 991.98px) {
      .job-listings .custom-width {
        width: 100% !important; } }
    .job-listings .job-listing {
      position: relative;
      border-bottom: 1px solid #eee;
      -webkit-transition: .3s all ease;
      -o-transition: .3s all ease;
      transition: .3s all ease; }
      .job-listings .job-listing:last-child {
        border-bottom: none; }
      .job-listings .job-listing a {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-transition: .3s all ease;
        -o-transition: .3s all ease;
        transition: .3s all ease; }
        .job-listings .job-listing a:hover {
          border-left: 7px solid #89ba16; }
      .job-listings .job-listing .job-listing-logo {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 150px;
        flex: 0 0 150px;
        border-right: 1px solid #eee; }
        @media (max-width: 575.98px) {
          .job-listings .job-listing .job-listing-logo {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
            flex: 0 0 100%; } }
    .job-listings .job-listing-position h2 {
      font-size: 1.2rem;
      margin-bottom: 0; }
    .job-listings .job-listing-position strong {
      color: #b3b3b3; }
  
  .btn-file {
    position: relative;
    overflow: hidden; }
  
  .btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block; }
    .job-listings .btn {
        color: #fff;
        padding: 4px 10px; }



.section-hero, .section-hero > .container > .row {
    height: 100vh;
    min-height: 900px; }
  
  .section-hero.inner-page, .section-hero.inner-page > .container > .row {
    height: auto;
    min-height: auto;
    padding-top: 6em;
    padding-bottom: 3em; }
  
  .section-hero.overlay, .section-hero.overlay-2 {
    position: relative; }
    .section-hero.overlay:before, .section-hero.overlay-2:before {
      z-index: 1;
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5); }
  
  .section-hero.overlay-2:before {
    background: rgba(237, 117, 73, 0.95); }
  
  .section-hero > .container {
    z-index: 2;
    position: relative; }

    .site-section {
        padding-top: 7rem;
        padding-bottom: 7rem;
        position: relative;
        z-index: 2; }
        @media (max-width: 991.98px) {
          .site-section {
            padding-top: 3rem;
            padding-bottom: 3rem; } }
        

            .custom-breadcrumbs a {
                color: #FF7F00; text-decoration: none;font-weight: bold;}
                .custom-breadcrumbs a:hover {
                  color: #fff; }
              
              .custom-breadcrumbs .slash {
                color: rgba(255, 255, 255, 0.4); }

/* ===============================search job openings=========================================== */

.search-job{
    margin-top: -6px;
     background-color: #2DD2F2;
     padding: 20px;
    position: fixed;
    width: 100%;
    z-index: 99;
    outline: 0;
   display: none;
 }
 .search-job-container{
     background-color: #fff;
     background-color: #2DD2F2;
 }
 .form{
     display: flex;
     justify-content: center;
 }
 .search-job-cat{
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
 }
 .search-job-cat,.locations{
     width: 100%;
     padding: 10px 20px;
     border: none;
     margin-right: 1px;
     outline: 0;
 }
 .search-jobs{
     width: 100%;
     padding: 10px 15px;
     border: none;
   background-color: #FF7F00;
   margin-right: 1px;
  color: #fff;
  outline: 0;
  border: 1px solid transparent;
 }
 .search-jobs2{
    width: 100%;
    padding: 10px 15px;
    border: none;
  background-color: #FF7F00;
  margin-right: 1px;
 color: #fff;
 outline: 0;
 border: 1px solid transparent;
 display: none;
}
.jobl{
    border: 1px solid transparent;
    display: flex;
    justify-content: center;
  }
  .jobl:hover{
    border: 1px solid #FF7F00;
    border-radius: 1rem;
    box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);
  }
 .search-jobs1{
     width: 100%;
     padding: 10px 15px;
     border: none;
   background-color: #FF7F00;
   color: #fff;
   outline: 0;
   border: 1px solid transparent;
   border-top-right-radius: 1rem;
   border-bottom-right-radius: 1rem;
 }
 .search-jobs1:hover{
 background-color: #fff;
 color: #FF7F00;
 border: 1px solid #FF7F00;
 }
 .search-jobs:hover{
    background-color: #fff;
    color: #FF7F00;
    border: 1px solid #FF7F00;
    }


/* ===============================current job openings=========================================== */
.job-opening{
    
    background-image: url(/image/home/coverpage-Wheel.jpg);

  background-position: center;
  background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}
.job-tab{
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin-top: 3rem;
    margin-bottom: 0;
}
.job-list{
    list-style-type: none;
}
.job-box1{
border: 1px solid transparent;
border-radius: 1rem;
box-shadow: 0px 5px  #FF7F00;
padding: 15px;
font-size: 14px;
margin: 10px;
background-color: #fff;
}
.job-box2{
    border: 1px solid transparent;
    border-radius: 1rem;
    box-shadow: 0px 5px  #2DD2F2;
    padding: 15px;
    font-size: 14px;
    margin: 10px;
    background-color: #fff;
  }

.current-job-btn{
    background-color: #FF7F00;
    color: #fff;
    border: 1px solid #FF7F00;
    border-radius: 1rem;
    font-weight: 500;
    padding:5px 25px ;
    
    margin: 2rem auto;
    
 }
 .current-job-btn:hover{
        
    background-color: #fff;
    color: #FF7F00;
    border: 1px solid #FF7F00;

 }
 .owl-dots{display: none;}
 .item{
    color: #000;
 }
.card{
    width: 330px;
    border: none;
}

 /* ===============================pay rolls=========================================== */

 .payroll-btn{
    background-color: #FF7F00;
    color: #fff;
    border: 1px solid #FF7F00;
    border-radius: 1rem;
    font-weight: 700;
    padding:5px 25px ;
    font-weight: 700;
    margin-top: 1rem;
 }
 .payroll-btn:hover{
    background-color: #fff;
    color: #FF7F00;
    border: 1px solid #FF7F00;
 }
 .payroll2{
    background-color: rgba(205, 250, 219, .42);
    
 }
 .payroll2:hover ,.payroll1:hover{
   background-color: #f1f1f1;
 }
 .payroll1{
   
    background: rgba(248, 238, 207, .42);

 }
 .payroll-span{
    color: #0fd0f7;
    font-weight: 700;
 }
 
/* ===============================About=========================================== */
.img-icon1{
    background-color:rgba(255, 127, 0, .3); 
    border: 1px solid transparent;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    width: 25%;
    border: 1px solid transparent;
}
.img-icon1:hover{
    background-color:  #FF7F00;
   
}
.img-icon2{
    background-color:rgba(45, 210, 242, .3); 
    border: 1px solid transparent;
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 1rem;
    width: 25%;
    border: 1px solid transparent;
}
.img-icon2:hover{background-color:  #2DD2F2;
    color: #fff;
    
}
.about-btn{
    background-color: #FF7F00;
    color: #fff;
    border: 1px solid #FF7F00;
    border-radius: 1rem;
    font-weight: 700;
    padding:5px 25px ;
    
    margin: 1rem auto;
}
.about-btn:hover{
 background-color: #fff;
    color: #FF7F00;
    border: 1px solid #FF7F00;
}
.about-h2{
    margin: 3rem auto;
    color: #fff;
}
.about{
    background-image:linear-gradient(rgba(0, 0, 0, 0.75),rgba(0, 0, 0, 0.75)),  url('/image/home/about-background.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    /* background-attachment: fixed; */

}
/*============================================ for forms ============================*/

.button-org{
    color: #fff;
    padding:5px 20px;
    background-color: #FF7F00;
    border: 1px solid transparent;
    border-radius: 1rem;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .button-org:hover{
    color:#FF7F00 ;
   
    background-color: #FFF;
    border: 1px solid #FF7F00;
  }
  .form-control{
    border-radius: 1rem!important;
    box-shadow: none!important;
   
  }
  input::file-selector-button {
    
    color: #FFF!important;
    background-color: #FF7F00!important;
    
  }
  .form-control:focus{
    border: 1px solid #FF7F00!important;
  }
  .site .container-fluid{
    background-color: #f1f1f1;
    
  }
.button-cv{
    background-color: #FF7F00;
    color: #fff;
    padding: 6px 20px;
    font-size: 20px;

}
/*============================================ for forms end ============================*/



/* ===============================client say=========================================== */

.cs{
    background-color: #2DD2F2;
}
.cs1{
    height: 100px;
    display: flex!important;
    justify-content: space-evenly!important;
}
.client-say-btn{
    padding: 5px 20px ;
    background-color: #fff;
    color: #FF7F00;
    font-weight: 500;  
    border: 1px solid #FF7F00;
    border-radius: 1rem; 
   
    margin: 30px 0; 
}

.client-say-btn:hover{background-color: #FF7F00;color: #fff;}
.client-say{
    background-image: url(/image/home/coverpage-Wheel.jpg);
    /* background-attachment: fixed;  */
  background-position: center;
  background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}
.client{
    display: flex;
    justify-content: space-around;
}
.client img{
    width: 14rem;
    margin: 0 20px;
}

/* ===============================partners=========================================== */

@keyframes slide{
    from{
        transform: translateX(0);
    }
    to{
        transform: translateX(calc(-250px * 4));
    }
}
.job-opening-slider{
    animation: 35s slide infinite linear;
    display:flex;
    width: calc(250px * 8);
}
.job-opening-sliders:hover .job-opening-slider {
    animation-play-state:paused  ;
}
.job-opening-sliders a{
    color: #000;
    text-decoration: none;
}

.partner img{
    width: 15%;
    height: 100px;
    margin: 0 10px;
}
.partner{
    display:inline-block;
    width: calc(300px * 5);
    animation: 35s slide infinite linear;
   
}
.partners{
    overflow: hidden;
    padding: 30px 0;
    white-space: nowrap;
}
.partners:hover .partner{
    animation-play-state:paused  ;
}
li{list-style: none;}
ul{padding: 0;}
/* ===============================footer=========================================== */
.footerlinks a{
    text-decoration: none;
    color: #fff;
}
.footerlinks a:hover{
    color: #FF7F00;
    font-weight: 700;
}
.footer-heading{
    border-bottom: 1px solid #FF7F00;
    padding-bottom: 5px;
    width: 50%;
   
}
.footer-icon{
    margin-top: 2rem;
}
.footer-icon a {
    background-color: #696565; 
    padding: 12px;
    border-radius: 50%; 
    border:1px solid transparent;
}
.footer-icon a:hover{border:1px solid #FF7F00;}
.footer-icon a img{
    background-color: #696565; 
   width:20px ;  
}
.footer-mail1{
padding: 7px;
border: 0;
outline: 0;
}
.footer-mail{
    padding: 7px 14px;
    border: 0;
    outline: 0;
    background-color: #FF7F00;
    }
    .footer-mail i{
        color: #fff;
    }
    .fbottom {
       
        padding-top: 10px;
    }
    .fbottom a{
        text-decoration: none;
        margin: 10px;
        color: #fff;
       font-size: 12px;
    }
    .fbottom a:hover{
       
        color: #FF7F00;
        
    }
    .fbottom1 p{
        font-size: 12px;
    }
    .footer-btm{
        display: flex;
        justify-content: space-between;
    }
    .whatsapp{
  
     position: fixed;
    bottom: 10.5%;
    right: 0;
    margin-right: 2rem;
    z-index: 10;
    width: 4%;
    }
/* ===============================img animation=========================================== */
/* @keyframes fade-in{
    from{scale:.6;opacity: 0;}
    to{scale:1;opacity: 1;}
}
.scrollimg{
    animation: fade-in linear;
    animation-timeline: view();
    animation-range: entry;
} */

/* ===============================search job=========================================== */

.btn-full{
    background-color: #FF7F00;
    border: 1px solid transparent;
    border-radius: 1rem;
}
/* ===============================about us page start=========================================== */

/* ===============================about us=========================================== */
.about-us{
    
    
    background-image:linear-gradient(rgba(0, 0, 0, 0.75),rgba(0, 0, 0, 0.75)),  url('/image/home/about-background.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    
}
.about-content{
   
    margin: auto 0;
}
.about-header{
    background-image: url(/image/about/about-us-_coverpage-image.jpg);
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
      /* background-attachment: fixed; */
      background-position: center;
      background-size: cover;
      display: flex;
      align-items: center;
  
    
    }
    .modal-body h6{
        color: #FF7F00;
    }
    .about-header-h1{
        font-size: 60px;
        margin-left: 2rem;        

    }
    .about-header-span1{
        color: #FF7F00;
    }
.modal-open,.modal{
    padding-right: 0!important;
}

/* ===============================who we are=========================================== */

.who-we{ 
    
    background: linear-gradient(
    to right,
    #F8EECF 0%,
    #F8EECF 60%,
    #CAF1F8 60%,
    #CAF1F8 100%
  );
}


/* ===============================Timeline=========================================== */

.timeline{

    background-color: rgba(248,238,207,.3);
}
.timeline-img{
    width: 80%;

}


.deliver-icon1{
    background-color:#F8EECF;
    margin: 5px 10px;
    padding: 20px 10px 20px 10px ;

}
.deliver-icon2{
    background-color:#C0F2FB;
    margin:5px 10px;
    padding: 20px 10px 20px 10px ;

}
.deliver-container{
    background-image: url(/image/home/wheel.png);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    

}
.deliver-btn{
    border: 1px solid transparent;
    border-radius: 1rem;
    background-color: #FF7F00;
    color: #fff;
    padding: 5px 20px;
    font-size: 12px; 
}
.deliver-btn:hover{
    background-color: #FFF;
    border: 1px solid #FF7F00;
    color: #FF7F00;
}



.mission{
    background-image:linear-gradient(rgba(0, 0, 0, 0.75),rgba(0, 0, 0, 0.75)),url(/image/about/vision.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
@keyframes zoom-in-zoom-out {
    0% {
      transform: scale(1, 1);
    }
    50% {
      transform: scale(1.1, 1.1);
    }
    100% {
      transform: scale(1, 1);
    }
  }
  .mision-img, .vision-img{
    animation: zoom-in-zoom-out 5s ease infinite;
  }
/* ===============================hr service=========================================== */
.hr-header{
    height: 100vh;
    background-image: linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),url('/image/hrservice/hr_header.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.hr-header .container{
    position: absolute;
    top: 67%;
    left: 50%;
    padding-bottom: 0px !important;
    transform: translate(-50%,-50%);
}
.learn-more{
    padding: 5px 20px;
    border: 1px solid #FF7F00;
    border-radius: 1rem;
    background-color: #fff;
   
    outline: 0;
}
.learn-more:hover{
    color: #FF7F00;
}
.hr-header-tabs{
    background-color: transparent;  
}
.hr-header-tabs img{
    margin-bottom: 10px;
}
.hr-header-tab3{
    background-color: #CDFADB;
    padding: 20px 15px;
}
.hr-header-tab2{
    background-color: #C0F2FB;
    padding: 20px 15px;
}
.hr-header-tab1{
    background-color: #FFD9B3;
    padding: 20px 15px;
}
.hr-header-tabs p{font-size: 12px!important;}
.complex{
    background-color: #F8EECF;
}
.simplified{
    height: 70vh;
    background-image: url('/image/hrservice/simplified_img.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff;
    position: relative;
}
.simpli_content{
   position: absolute;
   top: 40%;
   width: 45%;
}
.preparation{
    background: linear-gradient(
    to right,
    #F8EECF 0%,
    #F8EECF 60%,
    #CAF1F8 60%,
    #CAF1F8 100%
  );
}
.preparation-lists i,.benefits-lists i,.reward-lists i,.employee-benefit-lists i,.compensation-lists i,.ongoing-lists1 i,.ongoing-lists i{
    color: #FF7F00;
    margin-right: 10px;
}
.end-report-lists li,.complex_lists li{
    list-style-type: disc;
}
.end-report-lists,.complex_lists{
   padding-left: 15px;
}
.title{
    background-color: #000;
    text-align: center;
    
}
.title h1{
    color: #fff;
}
.title p{
    color: #FF7F00;
}
.risk{
    background-color: #F8EECF;
}
.benefits{
    background: url('/image/home/wheel.png');
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
    
}
.benefit-col1,
.benefit-col3{
    background-color: #F8EECF;
    padding: 15px;
    margin: 10px;
}
.benefit-col2{
    background-color: #C0F2FB;
    padding: 15px;
    margin: 10px;
}
.empower{
    background-color: #F8EECF;
}
.reward{
    background-color: #F8EECF;
}
.compensation{
    background: linear-gradient(
        to right,
        #F8EECF 0%,
        #F8EECF 60%,
        #CAF1F8 60%,
        #CAF1F8 100%
      );
}
.ongoing-lists li,.ongoing-lists1 li{
    line-height: 2;
}
.affordable{
    background-color: #000;
}

/*-================================= employee-self-service================================== */
.employee-self-service{
    height: 60vh;
    background-image: linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),url('/image/hrservice/hr_header.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center ;
    position: relative;
}
.blog{
    height: 60vh;
    background-image: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),url('/image/blog/blog-banner.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center ;
    position: relative;
}
.blog1{
    height: 60vh;
    background-image: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.75)),url('/image/blog/blog-img1.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top ;
    position: relative;
}
.blog2{
    height: 60vh;
    background-image: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.75)),url('/image/blog/blog-img2.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center ;
    position: relative;
}
.blog3{
    height: 60vh;
    background-image: linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.75)),url('/image/blog/blog-img3.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center ;
    position: relative;
}
.blogs1,.blogs2,.blogs3{
    background-color: #F8EECF;
}
.workforce{
    height: 60vh;
    background-image: linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),url('/image/hrservice/workforce-header.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center ;
    position: relative;
}
.retention{
    height: 60vh;
    background-image: linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),url('/image/insites/rentention-header.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center ;
    position: relative;
}
.employee-self-service-hrader{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.retention-header{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.blog-header{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.centralize-payroll{
    background-color: #F8EECF;
}
.workforce-content{
    height: 30vh;
    background-color: #F8EECF;
    position: relative;
}
.workforce-content-header{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
} 
.approach{
    background-color: #f1f1f1;
}
.approach-box img{
    box-shadow: 5px 5px transparent;
    border-radius: 1rem;
}
.approach-box img:hover{
    box-shadow: 5px 5px #FF7F00;
}
.choose-container{
    background-image: url('/image/home/wheel.png');
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: center;
}
.choose-icon1{
padding: 30px 10px;
background-color: #FFD9B3;

}
.choose-icon2{
    padding: 30px 10px;
    
    background-color: #C0F2FB;
    }
.join{
    height: 50vh;
    background-image: linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),url('/image/hrservice/emp-benifitss.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
} 
.join-box{
    position: absolute;
    text-align: center;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.join-btn{
    background-color: #FFF;
    color: #FF7F00;
    border: 1px solid #FF7F00;
    border-radius: 1rem;
    
    padding:5px 25px ;
    outline: 0;
    margin: 1rem auto;
}
.join-btn:hover{
    background-color: #FF7F00;
    color: #fff;
}
.blog-btn{
    border: 1px solid #FF7F00;
    padding: 5px 30px;
    background-color: #fff;
    margin-bottom: 3rem;
    border-radius: 1rem;
}
.blog-btn:hover{
    
    background-color: #FF7F00;
    color: #fff;
    
   
}

/*-================================= employee-self-service================================== */
.workforce-header{
    position: absolute;
    text-align: center;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);

}


.recruitment{
    height: 50vh;
    width: 100%;
    background-color: #6c5acb;
    background-image: linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),url('/image/insites/recurtment-header.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center top ;
    position: relative;
}
.recruitment-content{
    background-color: #fff;
}
/* =================================================insites===================================== */
.insites{
    height: 50vh;
    background-image: linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),url('/image/insites/insites-header.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center top;
    position: relative;
}
.insites-header{
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.insites-content{
   
    background-image: url('/image/insites/insites-header-content.png');
    background-color: #F8F8F8;
    background-repeat: no-repeat;
    background-position:right -25% bottom 92%;
     
}
/* -------------------------------------contact us started================== */
.contacth1{
    margin-top: 4rem;
    margin-bottom:1rem;
    
  }
  .contactp1{
    font-size: 30px;
    margin-bottom: 0px;
  }
  .contactp2{
    font-size: 16px;
    
  }
  .contactsend{
    border: 1px solid #fff;
      padding: 5px 3rem;
      border-radius: 1rem;
      background-color: #FF7F00!important;
      color: #fff!important;
      margin-top: 1rem;
  }
  .contactsend:hover{
    border: 1px solid #FF7F00!important;
    color: #FF7F00!important;
      padding: 5px 3rem;
      border-radius: 1rem;
      background-color: #fff!important;
  }
  .contacts{
    background-color: #f1f1f1;
    border-radius: 1rem;
    margin: 10px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    transition: box-shadow 0.3s ease-in-out;
  }
  .contacts i{
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #FF7F00;
  }
  .contacts .p1{
    padding-top: 2.8rem;
    padding-bottom: 2.8rem;
  }
  .contact_section1{
  margin-top: 1.8rem;
  margin-bottom: 1.8rem;
  }
  .contacts:hover, .blog-img:hover{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .contactslocation{
    color: #FF7F00;
  }
  .terms{
    background-color: #FF7F00;
    height: 50;
    text-align: center;
  }
  .fsmedia i{
    color: #FF7F00;
    padding: 10px 15px;
    margin: 5px;
    border: 1px solid #FF7F00;
    border-radius: 10px;
  }
  .fsmedia i:hover{
    color: #FFF;
   background-color: #FF7F00;
    border: 1px solid transparent;
    
  }
 
/* ===============================media query=========================================== */

@media screen and (max-width: 991px) {

    .hr-header .container {
        
        top: 58%;
    }
    .learn-more {
        font-size: 10px;
    }
    .hr-header .container  h6 {
        font-size: 0.7rem;
    }
    .hr-header-tabs p {
        font-size: 9px !important;
    }
}




@media screen and (max-width: 568px) {

    .header{
    background-image: url(/image/home/mobile-home-banner.jpg);
height: 100vh;
background-repeat: no-repeat;
  /* background-attachment: fixed; */
  background-position: center;
  background-size: cover;
  

}
.header-box{
    position: absolute;
    top: 30%;
    
    }
    .header-h1{
        font-size: 30px;
        padding-left:1rem;
    }
    .header-p{
    
        padding-left:1rem;
    }
    .r-container{
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .client-h3{
        font-size: 22px;
    }
    .find-job {display: none;}
    .search-job-cat, .locations {
        padding: 5px 10px;
        font-size: 10px;
        display: none;
    }
    .search-jobs2{
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
        padding: 5px 8px;
       display: block!important;
    }
   
    .search-jobs {
       
        display: none;
       }
    .search-jobs1 {
       
             padding: 5px 8px;} 

        .about-header{
        
            background-repeat: no-repeat;
          
            }
            
           
            .about-header-h1{
                font-size: 30px;
                margin-top: 0;
              
                }
                .header-p{width: 100%;}
                .about-header{
    
    
                    background-image:url('/image/about/mob_coverpage-image.jpg');
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: cover;
                    position: relative;
                    
                }
                .about-header-box{
                    position: absolute;
                    top: 40%;
                }
                .join{
                    height: 75vh;
                }
                .employee-self-service, .workforce, .retention {
                    height: 40vh;}
                    .workforce-content{
                        height: 65vh;
                       
                    }
                    .whatsapp{
  
                        margin-right: 1rem;
                        bottom: 6rem;
                        width: 9%;
                        
                    }
                    #resource{
                       margin-top: 4rem;
                
                    }
                    .footer-btm{
                        display: block;
                        
                    }
                    .fbottom {
       
                     text-align: center;
                     padding-bottom: 10px;
                    }
                    .insites-content {
                        background-image: none;
                    }
                    .jobl{
                        
                        display: block!important;
                        
                      }
                      
                     .job-des{margin-left: 0;} 
                     .b-name{display:none;}
                   
                .hr-header-tabs{display:none;}
}