@font-face {

    font-family: 'raleway-variablefont_wght';

    src: url('../fonts/raleway-variablefont_wght.ttf') format('truetype');

}

body {

    background: #fbffff !important;

}

.fl {

    float: left;

}

.df {

    display: flex;

}

/* preloader */

body {

   /* overflow: hidden;*/

}

body.loaded {

    overflow: auto;

}

#loader {

    background-image: url('../images/loader.png') !important;

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: #FFF;

    z-index: 9999999;

    background-repeat: no-repeat;

    background-position: center;

    animation: zoom-in-zoom-out 1.5s ease infinite;

}

@keyframes zoom-in-zoom-out {

    0% {

        transform: scale(1, 1);

    }

 

    50% {

        transform: scale(1.2, 1.2);

    }

 

    100% {

        transform: scale(1, 1);

    }

}

 

/*  scroll top */

.scrolltop .icon {

    font-size: 30px;

    text-align: center;

    padding: 4px;

    color: #424345;

    cursor: pointer;

}

.scrolltop {

    position: fixed;

    bottom: 70px;

    right: 40px;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background-color: #fff;

    display: none;

    z-index: 99999;

}

 

/* Header */

.nav_head {

    background-color: #fff !important;

    border-color: #fff !important;

}

header, .main-header {

    background-color: #fff;

    height: 100px;

}

.logo_hlcpl {

    background-image: url(../images/HLCPL.png);

    background-position: left;

    background-size: contain;

    height: 100px;

    width: 70%;

    background-repeat: no-repeat;

    float: none;

    position: relative;

    top: 12px;

    cursor: pointer;

}

@media (min-width:768px) {

    .logo_hlcpl {

        background-image: url(../images/HLCPL.png);

        background-position: center;

        background-size: 80%;

        height: 100px;

        width: 100%;

        background-repeat: no-repeat;

        float: left;

        position: relative;

        top: 12px;

        cursor: pointer;

    }

}

 

.nav_holder {

    background-color: #fff;

    border-color: #fff;

    margin: 0px;

    float: left;

    right: 0px;

    top: -75px;

    width: 100%;

}

@media (min-width:768px) {

    .nav_holder {

        background-color: transparent;

        border-color: transparent;

        margin: 25px 0px 0px 0px;

        float: right;

        position: relative !important;

        left: 25% !important;

        top: 0px;

        width: auto;

    }

}

/*.nav_list {

    display: contents !important;

}*/

.nav_list li a {

    color: #00294b;

    font-size: 14px;

    font-weight: 600;

    text-transform: none;

    font-family: 'raleway-variablefont_wght';

    letter-spacing: 1px;

    text-decoration: none;

    padding: 10px 10px;

    margin: 0px;

}

@media (min-width:768px) {

    .nav_list li a {

        color: #00294b;

        font-size: 14px;

        font-weight: 600;

        text-transform: none;

        font-family: 'raleway-variablefont_wght';

        letter-spacing: 1px;

        text-decoration: none;

        padding: 10px 10px;

        margin: 0px 0px;

    }

}

 

.nav_list li a:hover {

    background: #ddd;

    padding: 10px 10px;

    color: #131e3c !important;

}

.dropbtn {

    background-color: transparent;

    color: #00294b !important;

    padding: 10px;

    font-size: 14px;

    border: none;

    font-weight: 600;

    text-transform: none;

    font-family: 'raleway-variablefont_wght';

    letter-spacing: 1px;

}

/*.hlcpl_nav {

    position: relative;

    left: -2%;

    bottom: 80px;

}

 

@media (min-width:768px) {

    .hlcpl_nav {

        position: relative;

        left: 20%;

        float: right;

    }

}

.dropend .dropdown-toggle {

    color: salmon;

    margin-left: 1em;

}

 

.dropdown-item:hover {

    background-color: lightsalmon;

    color: #fff;

}

 

.dropdown .dropdown-menu {

    display: none;

    z-index: 999999;

    top: 50px;

}

 

.dropdown:hover > .dropdown-menu,

.dropend:hover > .dropdown-menu {

    display: block;

    margin-top: 0.125em;

    margin-left: 0.125em;

}

 

@media screen and (min-width: 769px) {

    .dropend:hover > .dropdown-menu {

        position: absolute;

        top: 0;

        left: 100%;

    }

 

    .dropend .dropdown-toggle {

        margin-left: 0.5em;

    }

}

 

.dropdown-toggle::after {

    display: none !important;

}

 

.dropend a {

    padding: 10px 18px !important;

}

.navbar-toggler {

    color: #c1b8b8 !important;

    background: #14365e !important;

}

.nav_hold {

    background: #dbe1e5;

}

*/

.navbar-toggler {

    position: absolute;

    right: 0;

    top: 0;

}

/*.dropdown {

    position: relative;

    display: inline-block;

}

.dropdown-content {

    display: none;

    position: relative;

    background-color: #f1f1f1;

    min-width: 215px;

    box-shadow: none;

    z-index: 1;

}

@media (min-width:768px) {

    .dropdown-content {

        display: none;

        position: absolute;

        background-color: #f1f1f1;

        min-width: 215px;

        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

        z-index: 1;

    }

}

.dropdown-content a {

    color: #00294b !important;

    padding: 12px 16px !important;

    text-decoration: none !important;

    display: block;

    margin: 0 !important;

}

    .dropdown-content a:hover {

        background-color: #ddd !important;

        color: #131e3c !important;

    }

.dropdown:hover .dropdown-content {

    display: block;

}

.dropdown:hover .dropbtn {

    background-color: #ddd;

    color: #131e3c !important;

}

*/

 

.dropdown-item:hover {

    background-color: #dddddd !important;

    color: #fff;

}

 

.dropdown-menu li a::after {

    content: none !important;

}

 

.dropdown-menu li a {

    width: 100% !important;

    margin: 0px;

}

 

.dropdown .dropdown-menu {

    display: none;

    z-index: 999999;

    border-top: 5px solid #969ea4;

    background: #f1f1f1;

    width: auto;

}

@media (min-width:768px) {

    .dropdown .dropdown-menu {

        display: none;

        z-index: 999999;

        border-top: 5px solid #969ea4;

        background: #f1f1f1;

        width: max-content;

    }

}

 

.dropend:hover {

    background-color: #dddddd !important;

}

 

    .dropdown:hover > .dropdown-menu,

    .dropend:hover > .dropdown-menu {

        display: block;

        margin-left: 0px;

    }

 

@media screen and (min-width: 769px) {

    .dropend:hover > .dropdown-menu {

        position: absolute;

        top: 0;

        left: 100%;

    }

 

    .dropend .dropdown-toggle {

        margin-left: 0em;

    }

}

 

.dropdown-toggle::after {

    display: none !important;

}

 

.dropend a {

    padding: 10px 10px !important;

}

 

.navbar-default .navbar-nav > .active > a {

    background-color: transparent;

}

/* Banner */

.banner_img {

    background-image: url(../images/bg_img.png);

    background-position: center;

    background-size: cover;

    width: 100%;

    background-repeat: no-repeat;

    min-height: 130vh;

}

.banner_txt1 {

    position: absolute;

    top: 40%;

    left: 12%;

    font-size: 85px;

    text-indent: 70px;

    font-weight: 800;

    font-family: 'raleway-variablefont_wght';

    color: #0b0a0a;

    letter-spacing: 5px;

}

.banner_txt2 {

    position: absolute;

    top: 70%;

    left: 12%;

    font-size: 17px;

    font-weight: 800;

    font-family: 'raleway-variablefont_wght';

    color: #141414;

    letter-spacing: 3px;

}

/* Caruosel */

.carousel-fade {

    position: relative;

}

/*#carouselExampleFade::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    min-width: 100%;

    min-height: 100%;

    background-image: linear-gradient(180deg, #394044, #000707ed);

    opacity: 0.8;

    z-index: 999;

}*/

.carousel-control-prev, .carousel-control-next {

    z-index: 9999;

}

.carousel-caption {

    position: absolute;

    right: 15%;

    bottom: -10% !important;

    left: 15%;

    padding-top: 1.25rem;

    padding-bottom: 1.25rem;

    text-align: center;

}

@media (min-width:768px) {

    .carousel-caption {

        position: absolute;

        right: 15%;

        bottom: 30% !important;

        left: 15%;

        padding-top: 1.25rem;

        padding-bottom: 1.25rem;

        text-align: center;

    }

 

}

.carousel-caption h5 {

    font-size: 12px;

    color: #ffffff;

    font-family: 'raleway-variablefont_wght';

    line-height: 2;

    font-weight: 800;

    letter-spacing: 2px;

}

@media (min-width:768px) {

    .carousel-caption h5 {

        font-size: 40px;

        color: #ffffff;

        font-family: 'raleway-variablefont_wght';

        line-height: 2;

        font-weight: 800;

        letter-spacing: 2px;

    }

}

.carousel-caption p {

    color: #ebdcdc;

    font-size: 8px;

    font-family: 'raleway-variablefont_wght';

    letter-spacing: 2px;

}

@media (min-width:768px) {

    .carousel-caption p {

        color: #ebdcdc;

        font-size: 18px;

        font-family: 'raleway-variablefont_wght';

        letter-spacing: 2px;

    }

 

} 

.img_banner {

    opacity: 0.9;

}

/*Aboutus*/

.head_main {

    margin: 0px 0px 20px 0px;

    min-width: 40vh;

    display: flex;

}

@media (min-width:768px) {

    .head_main {

        margin: 0px 0px 20px 25px;

        min-width: 100vh;

        display: flex;

    }

}

.head_main h1 {

    color: #07345c;

    letter-spacing: 5px;

    font-family: 'raleway-variablefont_wght';

    font-weight: 700;

    font-size: 28px;

}

.head_main h1:before,

.head_main h1:after {

    background-color: #3cb64b;

    content: "";

    display: inline-block;

    height: 2px;

    position: relative;

    vertical-align: middle;

    width: 100%;

}

.head_main h1:before {

    right: 0px;

    margin-left: 0%;

}

.head_main h1:after {

    left: 0px;

}

.abtus_wrap {

    display: block;

}

@media (min-width:768px) {

    .abtus_wrap {

        display: flex;

    }

}

.vission_img {

    background-image: url(../images/vision.png);

    background-size: 65%;

    width: 100%;

    background-repeat: no-repeat;

    height: 190px;

    background-position: center;

}

.vission_wrapper, .mission_wrapper, .exe_wrapper {

    background: #f1f4f5;

    box-shadow: 0 5px 10px rgb(0 0 0 / 17%);

    border-radius: 8px;

    margin: 10px 12px 0px 0px;

    min-height: 62vh;

}

.mission_img {

    background-image: url(../images/mission.png);

    background-size: 65%;

    width: 100%;

    background-repeat: no-repeat;

    height: 190px;

    background-position: center;

}

.exe_img {

    background-image: url(../images/execution.png);

    background-size: 65%;

    width: 100%;

    background-repeat: no-repeat;

    height: 190px;

    background-position: center;

}

.vission_txt p, .mission_txt p, .exe_txt p {

    font-family: 'raleway-variablefont_wght';

    font-size: 14px;

    letter-spacing: 1px;

    text-align: justify;

    padding: 10px 30px;

    position: relative;

    line-height: 2;

    text-indent: 50px;

}

/* Workforce solution */

.consulting_img {

    background-image: url(../images/consulting.png);

    width: 100%;

    height: 225px;

    background-repeat: no-repeat;

    background-size: 60%;

    background-position: top;

    float: left;

}

.soln_txt p {

    font-size: 16px;

    letter-spacing: 1px;

    font-family: 'raleway-variablefont_wght';

    text-indent: 45px;

    line-height: 35px;

    position: relative;

    top: 12px;

    text-align: justify;

    min-height: 34vh;

    width: auto;

}

@media (min-width:768px) {

    .soln_txt p {

        font-size: 16px;

        letter-spacing: 1px;

        font-family: 'raleway-variablefont_wght';

        text-indent: 45px;

        line-height: 35px;

        position: relative;

        top: 12px;

        text-align: justify;

        min-height: 34vh;

        width: 500px;

    }

}

.soln_icons {

    float: right;

    text-align: center;

}

.icon_holder i {

    font-size: 50px;

    color: #00294b;

}

.icon_holder {

    margin: 32px 25px 10px 10px;

    width: 210px;

}

.icon_holder h3 {

    font-size: 16px;

    font-weight: 700;

    font-family: 'raleway-variablefont_wght';

    letter-spacing: 1px;

    position: relative;

    top: 15px;

}

.wrk_banner {

    background-image: url('../images/wrk_banner.jpg');

    width: 100%;

    background-attachment: fixed;

    background-position: center;

    background-size: cover;

    min-height: 100vh;

}

/* our partner */

.slick-slide {

    margin: 0px 20px;

}

.slick-slide img {

    width: 100%;

}

.slick-slider {

    position: relative;

    display: block;

    box-sizing: border-box;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    -webkit-touch-callout: none;

    -ms-touch-action: pan-y;

    touch-action: pan-y;

    -webkit-tap-highlight-color: transparent;

}

.slick-list {

    position: relative;

    display: block;

    overflow: hidden;

    margin: 0;

    padding: 0;

}

.slick-list:focus {

    outline: none;

}

.slick-list.dragging {

    cursor: pointer;

    cursor: hand;

}

.slick-slider .slick-track,

.slick-slider .slick-list {

    -webkit-transform: translate3d(0, 0, 0);

    -moz-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

    -o-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

}

.slick-track {

    position: relative;

    top: 0;

    left: 0;

    display: block;

}

.slick-track:before,

.slick-track:after {

    display: table;

    content: '';

}

.slick-track:after {

    clear: both;

}

.slick-loading .slick-track {

    visibility: hidden;

}

.slick-slide {

    display: none;

    float: left;

    height: 100%;

    min-height: 1px;

}

[dir='rtl'] .slick-slide {

    float: right;

}

.slick-slide img {

    display: block;

}

.slick-slide.slick-loading img {

    display: none;

}

.slick-slide.dragging img {

    pointer-events: none;

}

.slick-initialized .slick-slide {

    display: block;

}

.slick-loading .slick-slide {

    visibility: hidden;

}

.slick-vertical .slick-slide {

    display: block;

    height: auto;

    border: 1px solid transparent;

}

.slick-arrow.slick-hidden {

    display: none;

}

/* Counter */

.count-area {

    background-image: url(../images/counter_bg.jpg);

    padding: 90px 0;

    text-align: center;

    width: 100%;

    background-attachment: fixed;

    background-position: center;

    background-size: cover;

    min-height: 40vh;

}

 

.count-area-content {

    border-bottom: 5px solid #07345c;

    background: #9fd2f187;

    border-radius: 15px;

    box-shadow: inset 0px 5px 0px 0px #07345c;

}

 

.count-area i {

    font-size: 48px;

    margin-top: 25px;

    color: #07345c;

}

 

.count-digit {

    margin: 10px 0px;

    color: #F5F5F5;

    font-weight: 700;

    font-size: 50px;

    font-family: 'raleway-variablefont_wght';

}

 

.count-title {

    font-size: 20px;

    margin-bottom: 15px;

    font-family: 'raleway-variablefont_wght';

    font-weight: 700;

    letter-spacing: 1px;

}

/* Certificate */

.certificate_wrapper {

    margin-top: -65px;

}

.certi_img {

    background-image: url('../images/iso-02.png');

    background-position: center;

    background-repeat: no-repeat;

    width: 20%;

    background-size: 90%;

    height: 220px;

}

.certi_holder {

    display: flex;

    align-content: center;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

}

.certi_holder p {

    font-size: 30px;

    /*font-family: 'raleway-variablefont_wght';*/    

    color: #07345c;

    font-weight: 500;

    letter-spacing: 1px;

}

/* Client feedback */

.card {

    width: 100%;

    height: 300px !important;

    transform-style: preserve-3d;

    perspective: 500px;

    border: none;

    background-color: inherit;

}

.card .box {

    position: absolute;

    color: #262626;

    width: 100%;

    height: 100%;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);

    border-radius: 15px;

    background: #fff;

    transform-style: preserve-3d;

    transition: 0.5s;

    backface-visibility: hidden;

}

.card .box.front,

.card .box.back {

    position: absolute;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}

.card .box.front img {

    width: 200px;

    height: 200px;

    object-fit: cover;

}

.card:hover .box.front {

    transform: rotateY(180deg);

}

.box.front h2 {

    font-family: 'Bebas Neue', cursive;

    font-size: 20px;

}

.box.front h4 {

    font-size: 14px;

    letter-spacing: 1px;

}

.card .box.back {

    position: absolute;

    background: #fff;

    transform: rotateY(180deg);

    padding: 20px 30px;

    text-align: center;

    user-select: none;

}

.card .box.back .fa-quote-left {

    position: absolute;

    top: 25px;

    left: 180px;

    font-size: 3.2rem;

}

.card:hover .box.back {

    transform: rotateY(360deg);

}

@media(max-width: 991.5px) {

    .col-lg-4 {

        margin-top: 40px;

        margin-bottom: 20px;

    }

}

.star_icon i {

    color: #f2e14b;

    font-size: 20px;

}

/* Footer */

.footer_bg {

    background: #00294b;

    min-height: 36vh;

}

.footer_wrapper {

    margin-top: 50px;

}

.foot_abt {

    margin: 0px 40px 0px 0px;

}

.foot_abtimg {

    background-image: url(../images/hlcpl_footer.png);

    background-size: 25%;

    width: 100%;

    background-repeat: no-repeat;

    height: 70px;

    float: left;

}

.abt_txt p {

    color: #fff;

    font-family: raleway-variablefont_wght;

    letter-spacing: 1px;

    font-size: 13px;

    text-align: justify;

    line-height: 25px;

}

.contact_ph ul {

    list-style: none;

    padding: 0;

    line-height: 40px;

}

.contact_ph li a {

    text-decoration: none;

    color: #d4d1d1;

    letter-spacing: 2px;

    font-size: 13px;

    display: block;

    text-transform: lowercase;

}

.contact_ph i {

    color: #d4d1d1;

    font-size: 20px;

    width: 40px;

}

.foot_addr, .foot_link {

    float: none;

}

@media (min-width:768px) {

    .foot_addr, .foot_link {

        float: left;

    }

}

.call_txt {

    border-bottom: 3px solid #3cb64b;

    width: max-content;

    margin-bottom: 8px;

    margin-top: 15px;

}

    .call_txt h4 {

        color: #f5f5f5;

        font-size: 20px;

        font-family: 'raleway-variablefont_wght';

        letter-spacing: 4px;

        margin-bottom: 10px;

        margin-left: 0px;

        font-weight: 600;

    }

.contact_link a i {

    font-size: 20px;

    color: #d4d1d1;

    border: 1px solid #d4d1d1;

    border-radius: 50px;

    padding: 10px;

    height: 40px;

    width: 40px;

    margin: 0px 0px 0px 20px;

}

.contact_link a i:hover {

    color: #062aa2;

    border: 1px solid #fff;

    background: #fff;

}

.contact_addr {

    display: flex;

}

.contact_addr i {

    color: #d4d1d1;

    font-size: 20px;

    width: 30px;

}

.contact_addr p {

    color: #d4d1d1;

    font-size: 13px;

    font-weight: 600;

    text-align: left;

    letter-spacing: 2px;

    line-height: 23px;

}

.contact_addr span {

    font-size: 18px;

    color: #ceea11;

}

.copyright {

    display: inline-block;

    border-top: 1px solid #fff;

    margin: 15px 0px 0px 0px;

}

.copyright p {

    color: #f5f5f5;

    text-align: center;

    font-size: 11px;

    letter-spacing: 1px;

    padding: 10px 0px;

}

.footer_txt p {

    color: #fff;

    font-family: raleway-variablefont_wght;

    letter-spacing: 1px;

    font-size: 20px;

    text-align: left;

    line-height: 30px;

    padding: 10px 0px;

    width: 100%;

}

/* About us page */

.content_img1 {

    background-image: url('../images/aboutus.png');

    width: 100%;

    height: 300px;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}

.content_wrapper {

    display: flex;

    margin-top: 40px;

}

.content_txt h2 {

    font-family: 'raleway-variablefont_wght';

    font-size: 40px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #00294b;

    margin-left: 10px;

}

.content_para p {

    font-size: 16px;

    font-family: 'raleway-variablefont_wght';

    letter-spacing: 1px;

    line-height: 35px;

    text-align: justify;

    text-indent: 50px;

}

.content_txt {

    border-left: 5px solid #3cb64b;

}

.abt_banner {

    background-image: url('../images/abtus_banner.jpg');

    height: 20vh;

    width: 100%;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: top;

}

@media (min-width:768px) {

    .abt_banner {

        background-image: url('../images/abtus_banner.jpg');

        height: 80vh;

        width: 100%;

        background-repeat: no-repeat;

        background-size: contain;

        background-position: top;

    }

}

 

.box_content {

    background-color: #ffffffe6;

    padding: 20px;

    margin: 15px 15px;

}

 

.box_wrapper {

    padding: 0px 70px;

}

 

.box_icon {

    width: 70px;

    height: 70px;

    background: #1b68a5;

    color: #f8faf9;

    border-radius: 50px;

    float: left;

}

 

.box_icon i {

    font-size: 35px;

    display: block;

    text-align: center;

    padding: 15px 10px;

}

 

.box_para {

    display: grid;

    padding: 0px 0px 0px 20px;

}

 

.box_para h3 {

    font-size: 20px;

    font-weight: 700;

    font-family: josefinsans;

    line-height: 2;

}

 

.box_para p {

    font-size: 16px;

    font-style: normal;

    font-family: 'raleway-variablefont_wght';

    text-align: justify;

    letter-spacing: 1px;

    line-height: 35px;

    text-indent: 40px;

}

 

/* Career Page */

.content_img2 {

    background-image: url('../images/career.png');

    width: 100%;

    height: 300px;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}

.careers_banner {

    background-image: url('../images/careers_banner.jpg');

    height: 20vh;

    width: 100%;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: top;

}

@media (min-width:768px) {

    .careers_banner {

        background-image: url('../images/careers_banner.jpg');

        height: 80vh;

        width: 100%;

        background-repeat: no-repeat;

        background-size: contain;

        background-position: top;

    }

}

/* Contact us page */

.content_img3 {

    background-image: url('../images/contactus.png');

    width: 100%;

    height: 300px;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}

.btn_send {

    background: #00294b !important;

    color: #fff !important;

    padding: 10px 25px !important;

    float: right;

    font-family: 'raleway-variablefont_wght';

    font-weight: 700 !important;

    letter-spacing: 1px;

}

.contact_wrapper {

    background-image: linear-gradient(39deg, #baccde, transparent);

    border-radius: 8px;

    box-shadow: 0px 0px 5px 5px #E0E0E0;

}

.contact_wrap {

    background: #fff;

}

.contact_form {

    background-image: url('../images/contactform.png');

    width: 100%;

    height: 500px;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}

.contact_banner {

    background-image: url('../images/contactus-banner.jpg');

    height: 20vh;

    width: 100%;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: top;

}

@media (min-width:768px) {

    .contact_banner {

        background-image: url('../images/contactus-banner.jpg');

        height: 80vh;

        width: 100%;

        background-repeat: no-repeat;

        background-size: contain;

        background-position: top;

    }

}

 

.box_align label {

    font-family: 'raleway-variablefont_wght';

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1px;

}

.contact_txt {

    font-family: 'raleway-variablefont_wght';

    margin-top: 20px;

    letter-spacing: 2px;

    font-weight: 800;

    color: #0b2256;

}

/* map */

.google-map {

    display: contents;

    position: relative;

}

 

.google-map iframe {

    min-height: 40vh;

    width: 100%;

    left: 0;

    top: 0;

    position: relative;

    border-radius: 30px;

}

 

.map_inner h3, .map_inner p {

    color: #000;

    text-align: center;

    font-family: raleway-variablefont_wght;

}

/* Contract staffing */

.content_img4 {

    background-image: url('../images/contract.png');

    width: 100%;

    height: 300px;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}

.cs_banner {

    background-image: url('../images/Contract staffing-banner.jpg');

    height: 20vh;

    width: 100%;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: top;

}

@media (min-width:768px) {

    .cs_banner {

        background-image: url('../images/Contract staffing-banner.jpg');

        height: 80vh;

        width: 100%;

        background-repeat: no-repeat;

        background-size: contain;

        background-position: top;

    }

}

/* Permanent staffing */

.content_img5 {

    background-image: url('../images/permanent.png');

    width: 100%;

    height: 300px;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}

.ps_banner {

    background-image: url('../images/p staff-banner.jpg');

    height: 20vh;

    width: 100%;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: top;

}

@media (min-width:768px) {

    .ps_banner {

        background-image: url('../images/p staff-banner.jpg');

        height: 80vh;

        width: 100%;

        background-repeat: no-repeat;

        background-size: contain;

        background-position: top;

    }

}

/* RPO */

.content_img6 {

    background-image: url('../images/rpo.png');

    width: 100%;

    height: 300px;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}

.rpo_banner {

    background-image: url('../images/rpo-banner.jpg');

    height: 20vh;

    width: 100%;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: top;

}

@media (min-width:768px) {

    .rpo_banner {

        background-image: url('../images/rpo-banner.jpg');

        height: 80vh;

        width: 100%;

        background-repeat: no-repeat;

        background-size: contain;

        background-position: top;

    }

}

/* Executive Search */

.content_img7 {

    background-image: url('../images/search.png');

    width: 100%;

    height: 300px;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}

.exe_banner {

    background-image: url('../images/E-search-07.jpg');

    height: 20vh;

    width: 100%;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: top;

}

@media (min-width:768px) {

    .exe_banner {

        background-image: url('../images/E-search-07.jpg');

        height: 80vh;

        width: 100%;

        background-repeat: no-repeat;

        background-size: contain;

        background-position: top;

    }

}

/* Payroll */

.content_img8 {

    background-image: url('../images/payroll.png');

    width: 100%;

    height: 300px;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}

.pay_banner {

    background-image: url('../images/payroll-banner.jpg');

    height: 20vh;

    width: 100%;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: top;

}

@media (min-width:768px) {

    .pay_banner {

        background-image: url('../images/payroll-banner.jpg');

        height: 80vh;

        width: 100%;

        background-repeat: no-repeat;

        background-size: contain;

        background-position: top;

    }

 

}

/* Animation */

@-webkit-keyframes bounceInLeft {

    from, 60%, 75%, 90%, to {

        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

    }

 

    0% {

        opacity: 0;

        -webkit-transform: translate3d(-3000px, 0, 0);

        transform: translate3d(-3000px, 0, 0);

    }

 

    60% {

        opacity: 1;

        -webkit-transform: translate3d(25px, 0, 0);

        transform: translate3d(25px, 0, 0);

    }

 

    75% {

        -webkit-transform: translate3d(-10px, 0, 0);

        transform: translate3d(-10px, 0, 0);

    }

 

    90% {

        -webkit-transform: translate3d(5px, 0, 0);

        transform: translate3d(5px, 0, 0);

    }

 

    to {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

    }

}

 

@keyframes bounceInLeft {

    from, 60%, 75%, 90%, to {

        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

    }

 

    0% {

        opacity: 0;

        -webkit-transform: translate3d(-3000px, 0, 0);

        transform: translate3d(-3000px, 0, 0);

    }

 

    60% {

        opacity: 1;

        -webkit-transform: translate3d(25px, 0, 0);

        transform: translate3d(25px, 0, 0);

    }

 

    75% {

        -webkit-transform: translate3d(-10px, 0, 0);

        transform: translate3d(-10px, 0, 0);

    }

 

    90% {

        -webkit-transform: translate3d(5px, 0, 0);

        transform: translate3d(5px, 0, 0);

    }

 

    to {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

    }

}

 

.bounceInLeft {

    -webkit-animation-name: bounceInLeft;

    animation-name: bounceInLeft;

}

 

.animated {

    -webkit-animation-duration: 1s;

    animation-duration: 1s;

    -webkit-animation-fill-mode: both;

    animation-fill-mode: both;

}

 

@-webkit-keyframes bounceInRight {

    from, 60%, 75%, 90%, to {

        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

    }

 

    from {

        opacity: 0;

        -webkit-transform: translate3d(3000px, 0, 0);

        transform: translate3d(3000px, 0, 0);

    }

 

    60% {

        opacity: 1;

        -webkit-transform: translate3d(-25px, 0, 0);

        transform: translate3d(-25px, 0, 0);

    }

 

    75% {

        -webkit-transform: translate3d(10px, 0, 0);

        transform: translate3d(10px, 0, 0);

    }

 

    90% {

        -webkit-transform: translate3d(-5px, 0, 0);

        transform: translate3d(-5px, 0, 0);

    }

 

    to {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

    }

}

 

@keyframes bounceInRight {

    from, 60%, 75%, 90%, to {

        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

    }

 

    from {

        opacity: 0;

        -webkit-transform: translate3d(3000px, 0, 0);

        transform: translate3d(3000px, 0, 0);

    }

 

    60% {

        opacity: 1;

        -webkit-transform: translate3d(-25px, 0, 0);

        transform: translate3d(-25px, 0, 0);

    }

 

    75% {

        -webkit-transform: translate3d(10px, 0, 0);

        transform: translate3d(10px, 0, 0);

    }

 

    90% {

        -webkit-transform: translate3d(-5px, 0, 0);

        transform: translate3d(-5px, 0, 0);

    }

 

    to {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

    }

}

 

.bounceInRight {

    -webkit-animation-name: bounceInRight;

    animation-name: bounceInRight;

}

 

@-webkit-keyframes fadeInUp {

    from {

        opacity: 0;

        -webkit-transform: translate3d(0, 100%, 0);

        transform: translate3d(0, 100%, 0);

    }

 

    to {

        opacity: 1;

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

    }

}

 

@keyframes fadeInUp {

    from {

        opacity: 0;

        -webkit-transform: translate3d(0, 100%, 0);

        transform: translate3d(0, 100%, 0);

    }

 

    to {

        opacity: 1;

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0);

    }

}

 

.fadeInUp {

    -webkit-animation-name: fadeInUp;

    animation-name: fadeInUp;

    animation-duration: 3s;

}

.typing_txt {

    position: absolute;

    top: 19%;

    right: 0%;

    display: block;

    color: #163663;

    white-space: nowrap;

    letter-spacing: 2px;

/*    animation: typing 1.5s steps(60, end);

*/    overflow: hidden;

    font-family: 'raleway-variablefont_wght';

    font-weight: 600;

}

@media (min-width:768px) {

    .typing_txt {

        position: absolute;

        top: 45%;

        right: 15%;

        display: block;

        color: #163663;

        white-space: nowrap;

        letter-spacing: 4px;

        /*    animation: typing 1.5s steps(60, end);

*/ overflow: hidden;

        font-family: 'raleway-variablefont_wght';

        font-weight: 600;

    }

}

 

 

@keyframes typing {

    0% {

        width: 0;

    }

 

    25% {

        width: 0;

    }

 

    50% {

        width: 0;

    }

 

    75% {

        width: 0;

    }

 

    100% {

        width: 100px;

    }

}

/* Under construction */

.under_banner {

    background-image: url('../images/under_construction.png');

    height: 20vh;

    width: 100%;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}

 

@media (min-width:768px) {

    .under_banner {

        background-image: url('../images/under_construction.png');

        height: 100vh;

        width: 100%;

        background-repeat: no-repeat;

        background-size: contain;

        background-position: bottom;

    }

}

.go_to {

    position: relative;

    bottom: -60px;

    right: -24%;

    text-decoration: none;

    border: 1px solid #0e82cf;

    background: #0e82cf;

    color: #fff;

    font-family: 'raleway-variablefont_wght';

    padding: 10px;

    border-radius: 4px;

    font-weight: 700;

    letter-spacing: 1px;

}

@media (min-width:768px) {

    .go_to {

        position: absolute;

        bottom: 38%;

        right: 15%;

        text-decoration: none;

        border: 1px solid #0e82cf;

        background: #0e82cf;

        color: #fff;

        font-family: 'raleway-variablefont_wght';

        padding: 10px;

        border-radius: 4px;

        font-weight: 700;

        letter-spacing: 1px;

    }

}

.go_to:hover {

    color: #0e82cf;

    background: #fff;

}

/* Compliance */

.compliance_banner {

    background-image: url('../images/compliance_banner.jpg');

    height: 20vh;

    width: 100%;

    background-repeat: no-repeat;

    background-size: contain;

    background-position: top;

}

 

@media (min-width:768px) {

    .compliance_banner {

        background-image: url('../images/compliance_banner.jpg');

        height: 80vh;

        width: 100%;

        background-repeat: no-repeat;

        background-size: contain;

        background-position: top;

    }

}

/* Upload */

#imgPreview {

    max-width: 100px;

    max-height: 100px;

    min-width: 100px;

    min-height: 100px;

}

input[type=file]::file-selector-button {

    margin-right: 20px;

    border: none;

    background: #084cdf;

    padding: 10px 20px;

    border-radius: 10px;

    color: #fff;

    cursor: pointer;

    transition: background .2s ease-in-out;

}

input[type=file]::file-selector-button:hover {

    background: #0d45a5;

}

.file_format {

    font-style: italic;

    font-weight: 500;

    font-size: 14px;

    line-height: 25px;

    color: #46667d;

}

.fileinput-upload {

    display: none !important;

}

.file-drop-zone-title {

    color: #5f5050 !important;

    font-size: 24px !important;

    text-align: center !important;

    padding: 85px 10px !important;

    cursor: default !important;

    font-family: 'raleway-variablefont_wght' !important;

    font-weight: 500 !important;

}

.file-footer-caption, .file-caption-info, .file-caption-name {

    color: #16416c !important;

}

.btn-file {

    background: #0e82cf !important;

    border: 1px solid #0e82cf !important;

}

/* Grid view */

.dataTables_length {

    position: absolute !important;

}

 

.dt-buttons {

    position: absolute !important;

    bottom: 0 !important;

}

 

 

.comp_align {

    display: flex;

    justify-content: space-around;

    align-items: center;

    flex-direction: column;

}

 

kv-file-upload {

    display: none !important;

}

 

.fileinput-remove-button span, .fileinput-cancel-button {

    display: none !important;

}

 

.btn_upload {

    position: relative;

    bottom: 40px;

    margin: 48px 0px 0px 0px;

    background: #0e82cf !important;

    float: right;

}

.client-details-textbox {
    width: 100%;
}

.client-details-form {
    width: 100%;
}

    .client-details-form label {
        width: auto;
    }

.create-client-whole {
    height: auto;
    width: 150%;
    padding: 50px 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.client-createbtn {
    text-align: center;
    padding: 15px 5px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

    .client-createbtn input {
        border: 1px solid #d0d0e7;
        border-radius: 3px;
        cursor: pointer;
        background-image: linear-gradient(17deg, #1ecf2d, #1f95b9);
        padding: 12px 20px;
        color: #fff;
        font-size: 18px;
        font-weight: 500;
    }

        .client-createbtn input:hover {
            background-image: linear-gradient(20deg,#1f95b9,#1ecf2d );
        }

.form-horizontal h4 {
    text-align: center;
    font-size: 28px;
    font-family: raleway;
}

}

.create-client-backlist {
    /* padding: 0px 141px;*/
    /* width: 95px; */
    /* height: 30px; */
    /* top: 73%; */
    /* text-align: center; */
    /* width: 51%; */
    /*top: 75%;*/
    /*position: absolute;*/
}
/*filetype*/
.formdesignfile {
    height: auto;
    width: 145%;
    padding: 50px 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 600px) {
    .formdesignfile {
        height: 267px;
        width: 80%;
        padding: 40px 38px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
}

.filetype-heading {
    text-align: center;
}

.filelabel {
    height: 27px;
    font-size: 18px;
}

.filetextbox input {
    display: block;
    width: 100%;
    padding: 0px;
    font-size: 18px;
    height: 30px;
    color: #212529 !important;
    background-color: #fff !important;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.filetextbox {
    height: 50px;
}

.file-upload {
    height: 41px !important;
}
/*.client-createfile input {
    border: 2px solid #d0d0e7;
    background-color: darkseagreen;
     color: white;
}

    .client-createfile input:hover {
        background-color: #48b950de;
    }*/
.create-file-backlist {
    /*padding: 0px 124px;
    width: 99px;*/
    /* height: 30px; */
    /* top: 73%; */
    /* text-align: center; */
    /* width: 51%; */
    /*top: 71%;
    position: absolute;*/
    text-align:center;
}

    .create-file-backlist a {
        position: relative;
        text-decoration: none;
        right: 45%;
    }

.branch-edits {
    color: #f9a408b3;
    /* border-radius: 8px;*/
}

    .branch-edits:hover a {
        color: white;
        background-color: #f9a408b3
    }

    .branch-edits a {
        color: #e99512;
        text-decoration: none;
    }

.branch-details {
    color: #1a7acdc4;
    /*border-radius: 8px;*/
}

    .branch-details:hover a {
        background-color: #1a86e5c4;
        color: white;
    }

    .branch-details a {
        color: #4044cf;
        text-decoration: none;
    }

.branch-delete {
    color: #f10808d1;
    /*border-radius: 8px;*/
}

    .branch-delete:hover a {
        color: white;
        background-color: #f10808;
    }

    .branch-delete a {
        color: #f10808;
        text-decoration: none;
    }

.branch-next {
    color: #2cc32cc7;
    /*border-radius: 8px;*/
}

    .branch-next:hover a {
        background-color: #2cc32cf2;
        color: white;
    }

    .branch-next a {
        color: #2cc32cf2;
        text-decoration: none;
    }

.clientbranch {
    padding: 0px 402px;
    font-size: 19px;
    text-align: center;
}

@media screen and (max-width: 600px) {
    .clientbranch {
        /*padding: 0px 100px;
        font-size: 19px;*/
        padding: 0px 0px;
        font-size: 19px;
        text-align: center;
    }
}

.clientbranch a {
    text-decoration: none;
}

    .clientbranch a:hover {
        background-color: blue;
        color: white;
    }
/* #index-client-details*/
.indexuploadfile:hover {
    background-color: #80808024;
}

.create-client-branch {
    padding: 0px !important;
    width: 100% !important;
    height: 30px !important;
}
.filetextboxu input{
    height:0% !important;
}
.download-file{
    color:blue;
}
.download-file:hover{
    color:darkblue;
}

.edit_font:before {
    font-family: "Font Awesome 5 Free";
    content: "\f044";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}
.details_font:before {
    font-family: "Font Awesome 5 Free";
    content: "\f06e";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}
.delete_font:before {
    font-family: "Font Awesome 5 Free";
    content: "\f2ed";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}
.download_font:before {
    font-family: "Font Awesome 5 Free";
    content: "\f019";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
}
.close_btn a{
    float: right;
    color: #f31717;
    font-size: 30px;
    position: relative;
    margin: -40px -30px 0px 0px;
    cursor: pointer;
    text-decoration: none;
}
.delete-client-whole, .edit_client_whole {
    height: auto;
    width: 50%;
    padding: 50px 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.edit_btn {
    border: 1px solid #d0d0e7;
    border-radius: 3px;
    cursor: pointer;
    background-image: linear-gradient(17deg, #1ecf2d, #1f95b9);
    padding: 12px 20px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}

    .edit_btn:hover {
        background-image: linear-gradient(20deg,#1f95b9,#1ecf2d );
    }
/*Login page*/
.box_holder {
    opacity: 0.4;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    padding: 40px;
    box-shadow: 0 15px 25px rgba(0,0,0,.5);
    border-radius: 10px;
    box-sizing: border-box;
    height: 500px;
    background-color: #000;
}

.box_align {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    padding: 40px;
    box-shadow: 0 15px 25px rgba(0,0,0,.5);
    border-radius: 10px;
    box-sizing: border-box;
    height: 500px;
}

    .box_align h2 {
        margin: 0 0 30px;
        padding: 0;
        color: #fff;
        text-align: center;
        font-weight: 600;
        font-family: raleway;
        letter-spacing: 1px;
    }

    .box_align .inputbox {
        position: relative;
    }

        .box_align .inputbox input {
            width: 100%;
            padding: 15px 0;
            font-size: 16px;
            color: #fff;
            letter-spacing: 1px;
            margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #fff;
            outline: none;
            background: transparent;
        }

        .box_align .inputbox label {
            position: absolute;
            top: 0;
            left: 0;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            pointer-events: none;
            transition: .5s;
        }

        .box_align .inputbox input:focus ~ label,
        .box_align .inputbox input:valid ~ label {
            top: -18px;
            left: 0;
            color: #fff;
            font-size: 15px;
        }

    .box_align input[type="submit"] {
        background: transparent;
        border: none;
        outline: none;
        color: #fff;
        background-image: linear-gradient(45deg, #0adb1a, #0b5523);
        padding: 10px 20px;
        cursor: pointer;
        border-radius: 5px;
        font-weight: 700;
    }

        .box_align input[type="submit"]:hover {
            background-image: linear-gradient(45deg, #0b5523, #0adb1a);
        }

.forgot_align {
    float: right;
}

.form-check {
    display: inline !important;
}

.form-check-label {
    color: #fff;
}

.forgot_align a {
    text-decoration: none;
    color: #fff;
}

    .forgot_align a:hover {
        text-decoration: none !important;
        color: #fff !important;
    }

.submitbox {
    text-align: center;
    margin: 35px 0px 15px 0px;
    display: grid;
    width: 100%;
}

.font_eye {
    position: absolute;
    right: 0;
    bottom: 40px;
    color: #fff;
    cursor: pointer;
}

.create_align a {
    color: #fff;
    text-decoration: none;
}

    .create_align a:hover {
        text-decoration: none !important;
        color: #fff !important;
    }

.pod_info {
    height: auto;
    width: 45% !important;
    padding: 50px 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 0px 0px 25px 28%;
}