.circle-button-blue {
    width: 40px;
    height: 40px;
    border: 1px solid #377cff;
    border-radius: 50%;
    position: relative;
}
.btn-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    color: #377cff;
}
.circle-button-green {
    width: 40px;
    height: 40px;
    background-color: #81b441;
    border-color: #81b441;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: .02em !important;
    border-radius: 50%;
}

.bg-for-hrm{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.hrm-title
{
    position: relative;
    margin: auto;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    flex-direction: column;

}
.backend-demo{
    background: linear-gradient(to right,#e62e04 0%,#f77b0b 100%);
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: .05em !important;
    box-shadow: 0px 14px 15px 0px #000;
    padding: 15px 30px;
    border-radius: 50px;
    color: #fff;
}
.android-demo{
    background: linear-gradient(to right,#377dff 0%,#5ac9f6 100%);
    font-size: 16px !important;
    font-weight: 400 !important;
    letter-spacing: .05em !important;
    box-shadow: 0px 14px 15px 0px #000;
    padding: 15px 40px;
    border-radius: 50px;
    color: #fff;
}
.primary-highlight{
    color: #7f58fe!important;
}
.works-icon-bg{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: auto;
}
.works-icon-bg i{
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25px;
    color: #7f58fe;
}
.card-one{
    background-color: #effbfc !important;
    border-radius: 5px;
}
.card-two{
    background-color: #fff8f4 !important;
    border-radius: 5px;
}
.card-three{
    background-color: #eff6fc !important;
    border-radius: 5px;
}
.card-four{
    background-color: #f6f6ff !important;
    border-radius: 5px;
}
.slick-backend-design{
    box-shadow: 0px 20px 70px 0px rgb(0 0 0 / 30%);
}
.border-none{
    border: none;
}
.shadow-light{
    box-shadow: 0 25px 70px rgb(0 0 0 / 7%);
}
.bg-primary-hrm{
    background: #7f58fe;
}
.bg-circle-light{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: auto;
}
.icon-white i{
    color: #fff;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
.bg-red-hrm{
    background-color: #ff2d20;
}
.text-red-hrm{
    color: #ff2d20;
}
.bg-blue-hrm{
    background: #673ab7;

}
.text-blue-hrm{
  color: #673ab7;
}
.bg-orange-hrm{
    background: #eb4719;
}
.text-orange-hrm
{
    color: #eb4719;
}
.feature-btn
{
    background: #377cff;
    padding: 20px 40px;
    color: #fff;
    border-radius: 50px;

}
.feature-btn:hover{
    box-shadow: 4px 14px 20px 0px #9cbeff;
}
.user-panel-tabs{
    flex-direction: column;
}
.user-panel-tabs .nav-link.active {
    color: #fff !important;
    background-color: #377cff !important;
    white-space: normal;
    text-align: left;
    padding: 30px;
    border-radius: 10px;
}
.user-panel-tabs .nav-link:hover {
    color: #fff !important;
    background-color: #377cff !important;
    white-space: normal;
    text-align: left;
    padding: 30px;
    border-radius: 10px;
}
.user-panel-tabs .nav-link.active .user-tab-header{
    font-size: 24px ;
    font-weight: bold ;

}
.user-panel-tabs .nav-link.active .user-tab-content,.user-panel-tabs .nav-link:hover .user-tab-content
{
    color: rgba(255, 255, 255, 0.808) ;
    font-size: 18px ;
}
.user-panel-tabs .nav-link {
    color: #222 !important;
    background-color: #fff !important;
    white-space: normal;
    text-align: left;
    padding: 30px;
    border-radius: 10px;
}
 .user-tab-header{
    font-size: 24px ;
    font-weight: bold ;

}
 .user-tab-content
{
    color: rgba(34, 34, 34, 0.747) ;
    font-size: 18px ;
}
.user-panel-tabs .nav-link {
    background-color: #fff !important;
    white-space: normal;
    text-align: left;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 10px 33px rgb(0 0 0 / 5%);
}
.gradiant-color{
    font-size: 60px;
    background:  linear-gradient(to right, #f69406a8 0%, #7F58FE 100%);
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.pricing-table{
    padding: 0 1rem;
    margin-bottom: .5rem;
}
.pricing-table li {
    padding: 1.5em 1em;
    border-top: 1px solid #ebeff1;
    font-size: 14px;
    line-height: 1.5em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    margin-top: 0px;
}
.price-btn{
    border-radius: 50px;
    font-size: 15px;

}
.price-btn:hover{
        border-color: transparent;
        transform: translateY(-1px);
        box-shadow: 0px 1px 1px rgb(0 0 0 / 5%), 0px 2px 2px rgb(0 0 0 / 5%), 0px 4px 4px rgb(0 0 0 / 5%), 0px 8px 8px rgb(0 0 0 / 5%), 0px 16px 16px rgb(0 0 0 / 5%);
}
.user-interface{
    background-color: #f7f9fb !important;
    padding-top: 50px;
    padding-bottom: 30px;
}
.mockup-img{
    margin-top: 100px;
}
.mockup-img img{
    display: block;
    margin: auto;
}
.posting-bg{
    margin-top: -200px !important;
    padding-top: 230px !important;
    padding-bottom: 60px !important;
    background-color: #f9efec !important;
}
.wp-50{
    width: 50%;
}

.bg-circle-light-more {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 17px 30px rgb(0 0 0 / 7%);
    text-align: center;
}
.icon-orange i{
    color: #F57869;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 17px;
}
.gateway-content-title{
    font-size: 40px;
}