@import url(var.css);

/* ==================================== */

input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: none;
    background: #f1f1f1;
}

.real_stories,
.story_myco,
.myco_content,
.tab_management {
    overflow: hidden;
}

header {
    position: fixed;
    width: 100%;
    height: auto;
    top: 15px;
    left: 0;
    z-index: 5;
    transition: transform 0.5s ease;
}

.dropdown-menu {
    border: none;
    padding: 0;
    left: 50%;
    transform: translateX(-50%);
}

.dropdown-item {
    font-size: var(--font_16);
    color: var(--blue);
    padding: 15px;
    border-bottom: 1px dashed #dedede;
    position: relative;
    overflow: hidden;
}


/* 
.dropdown-item:hover {
    padding-left: 20px;
}

.dropdown-item::before {
    content: "\f105";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: -50px;
    transform: translateY(-50%);
    opacity: 0;
    transition: .3s;
}

.dropdown-item:hover::before {
    opacity: 1;
    left: 5px;
} */

.dropdown-menu li:last-child .dropdown-item {
    border: none;
}

.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--white);
    background-color: var(--blue);
}

.fixed-header .dropdown-menu {
    background: var(--white);
}

.fixed-header .dropdown-item {
    color: var(--blue);
}

.fixed-header .dropdown-item:focus,
.fixed-header .dropdown-item:hover {
    color: var(--white);
    background-color: var(--blue);
}

.dropdown-toggle::after {
    content: "\f107";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    border: none;
    vertical-align: -1px;
}


/* header.fixed-header {
    position: fixed;
    width: 100%;
    height: auto;
    top: 15px;
    left: 0;
    z-index: 5;
} */

header.fixed-header .navbar {
    background: var(--blue);
}

header.fixed-header .navbar .navbar-nav .nav-link {
    color: var(--white);
}

header.fixed-header .navbar .navbar-nav .nav-link:hover {
    color: var(--yellow);
}

header.fixed-header .navbar .navbar-nav .had_btn:hover {
    background: var(--light_green);
}

header.hide-header {
    transform: translateY(-120%);
}

header .navbar {
    border: 1px solid #2c658f;
    border-radius: 70px;
    padding: 0;
}

header .collapse .navbar-nav {
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

header .navbar-light .navbar-nav li:last-child,
header .navbar-light .Main_Logo {
    padding: 0;
    position: relative;
}

header .navbar-light .Main_Logo {
    z-index: 0;
}

.Main_Logo::before {
    content: "";
    background: var(--white);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: -20px;
    left: -18px;
    z-index: -1;
}

.Main_Logo .navbar-brand {
    display: inline-block;
    max-width: 60px;
    margin: 0;
    padding: 0;
}


/* header .navbar-nav li:first-child {
    padding-left: 30px;
} */

header .navbar-light .navbar-nav .nav-link {
    font-size: var(--font_18);
    color: var(--blue);
    display: inline-block;
    text-transform: capitalize;
    padding: 0;
    position: relative;
    z-index: 1;
    border-radius: 1rem;
    padding: 23px 56px;
}


/* header .nav-link:before {
    content: "";
    background: linear-gradient(0deg, rgba(69, 226, 200, 1) 0%, rgba(207, 248, 240, 0) 91%);

    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    transition: .1s;
    z-index: -1;
}

header .nav-link:hover:before {
    height: 100%;
} */

header .navbar-light .navbar-nav .nav-link:hover {
    color: var(--dark);
}

.had_btn {
    font-size: var(--font_20);
    text-transform: uppercase;
    background: #1579db;
    color: var(--white);
    padding: 17px 30px;
    border: none;
    text-align: center;
    gap: 15px;
    border-radius: 0 60px 60px 0;
    border-left: 1px solid transparent;
}

.banner .cmn_btn {
    margin: auto;
    margin-bottom: 10px;
}

.had_btn:hover {
    background: var(--blue);
}

.arrow_loti {
    width: 40px;
}

.banner {
    background: url("../images/green_gradient_img.png") no-repeat;
    background-size: cover;
    padding-top: 150px;
    position: relative;
}

.banner .row {
    align-items: center;
}

.banner .comntitle {
    font-size: var(--font_42);
    color: var(--blue);
    font-weight: 600;
    line-height: 60px;
    margin-bottom: 0;
    text-transform: capitalize;
}

.subline {
    font-size: var(--font_30);
    color: var(--blue);
    font-weight: 500;
    display: inline-block;
    margin-top: 15px;
}

.banner .comntitle span {
    color: #F3C010;
}

.banner p {
    font-size: var(--font_18);
    max-width: 1010px;
    margin: 30px auto;
}

.line_div {
    position: relative;
    font-size: 100%;
    /* overflow: hidden; */
    z-index: 1;
}

.line_div svg {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    z-index: -1;
}

.right_animate {
    position: relative;
}

.banner_img {
    width: 100%;
    margin: 0 auto 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.illrust_center {
    max-width: 100%;
}

#Path_3506 {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
}

#Path_3 {
    stroke-dasharray: 10;
    stroke-dashoffset: 0;
}

.illrust_center #Path_11424,
.illrust_center #Path_11425,
.illrust_center #Path_11426,
.illrust_center #Path_11427,
.illrust_center #Path_11428 {
    animation: mymove 5s infinite;
}

@keyframes mymove {
    from {
        fill: #fff;
    }
    to {
        fill: rgb(255, 230, 0);
    }
}

.illrust_center,
.boxthree_img img,
.boxtwo_img img,
.boxone_img img {
    width: 100%;
}

.banner_img svg {
    width: 100%;
    height: auto;
}

.payroll_banner .banner_img img,
.payroll_banner .banner_img svg {
    height: 550px;
    object-fit: contain;
}

.tab_slider,
.mobile_banner_img {
    display: none;
}


/* .illrust_center svg {
    width: 100%;
    height: auto;
} */

.boxtwo_img {
    width: 10%;
    top: 11%;
    left: 3%;
    z-index: -1;
}

.boxone_img {
    width: 12%;
    top: -7%;
    left: 21%;
    z-index: -1;
}

.boxthree_img {
    top: -11%;
    right: 6%;
    width: 11%;
    z-index: -1;
}

.boxfive_img {
    bottom: 54%;
    right: 18%;
    z-index: -1;
    left: auto;
    position: absolute;
}

.watch_lotti {
    max-width: 60px;
    top: 10%;
    left: 0;
    right: 0;
    margin: auto;
    height: auto;
}

.watch_lotti,
.boxthree_img,
.boxtwo_img,
.boxone_img {
    position: absolute;
}

.depth {
    animation: depth1 3.5s ease-in-out infinite alternate;
}

@keyframes depth1 {
    0% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1.1, 1.1);
    }
}

.depth2 {
    animation: depth2 3.5s ease-in-out infinite alternate;
}

@keyframes depth2 {
    from {
        transform: translate3d(10px, 0, 0);
    }
    to {
        transform: translate3d(-10px, 0, 0);
    }
}

.depth3 {
    animation: depth3 3.5s ease-in-out infinite alternate;
}

@keyframes depth3 {
    from {
        transform: translate3d(0, 10px, 0);
    }
    to {
        transform: translate3d(0, -10px, 0);
    }
}

.boxfour_img {
    top: 15%;
    right: -65%;
    z-index: -1;
    width: 75%;
}


/* .depth4 {
    animation: depth4 2s alternate;
}

@keyframes depth4 {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
} */

.glass_effect {
    padding: 15px;
    /* background: rgb(255 255 255 / 31%); */
    background: rgb(255 255 255);
    backdrop-filter: blur(2px);
    border: 1px solid #0d4c7d;
    border-radius: 10px;
}

.down_arrow {
    width: 60px;
    height: 60px;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    z-index: 11;
    top: auto;
    opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.features_tab #Group_4662,
.features_tab #Group_4659 {
    animation: kit 1.5s ease-in-out infinite alternate;
}

@keyframes kit {
    from {
        transform: translate(82px, 605px);
    }
    to {
        transform: translate(70px, 605px);
    }
}

.features_tab #Group_4665 {
    animation: kit2 1.5s ease-in-out infinite alternate;
}

@keyframes kit2 {
    from {
        transform: translate(0px, 300px);
    }
    to {
        transform: translate(0px, 290px);
    }
}

.features_tab #Group_4660,
.features_tab #Group_4658 {
    animation: kit3 1.5s ease-in-out infinite alternate;
}

@keyframes kit3 {
    from {
        transform: translate(82px, 605px);
    }
    to {
        transform: translate(82px, 595px);
    }
}


/* ================ */

.platform {
    background: var(--light_blue);
}

.tab_management {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.tab_management .tab-content,
.tab_management .nav {
    width: 49%;
}

.tab_management .nav-pills .nav-link {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    background: none;
    padding: 25px;
    border-bottom: 1px solid #4a4a4a30;
    border-radius: 0;
}

.tab_management .nav-pills .nav-link:last-child {
    border-bottom: none;
}

#tab_slider_mobile .owl-item.active,
.tab_management .nav-pills .nav-link.active {
    background: transparent linear-gradient(90deg, #ffffff 0%, #ffffff00 100%) 0% 0% no-repeat padding-box;
    box-shadow: -20px 0px 40px #00000014;
    border-radius: 20px;
    border-bottom: 1px solid transparent;
    position: relative;
    z-index: 1;
}

.tab_management .nav-pills .nav-link.active::before {
    content: "";
    background: transparent linear-gradient(90deg, #ffffff 0%, #e5f2ff 100%) 0% 0% no-repeat padding-box;
    position: absolute;
    width: 100%;
    height: 2px;
    top: -2px;
    left: 0;
    z-index: -2;
}

.tab_management .nav-pills .nav-link.active::after {
    content: "";
    background: url("../images/shape.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    width: 38px;
    height: 21px;
    top: -3px;
    left: -2px;
    z-index: -1;
    filter: brightness(0) saturate(100%) invert(99%) sepia(40%) saturate(2568%) hue-rotate(178deg) brightness(102%) contrast(104%);
}

.tab_management .nav-pills .nav-link.active h5 {
    color: var(--yellow);
}

.tab_management .nav-pills .nav-link.active .icon_round::before {
    background: rgb(243 192 16 / 10%);
}

.icon_round {
    width: 80px;
    position: relative;
}

.tab_management .nav-pills .nav-link.active #pay #pay_path,
.tab_management .nav-pills .nav-link.active #pay path {
    fill: var(--yellow);
}


/* 
.rond_coin {
    transition: 1s;
}

.tab_management .nav-pills .nav-link.active #pay {
    transition: 1s;
}

.tab_management .nav-pills .nav-link.active #pay {
    animation: flip 0.8s ease-out;
}

@keyframes flip {
    from {
        -webkit-transform: rotateY(-1turn);
        transform: rotateY(0.5turn);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    to {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
} */

.icon_round::before {
    content: "";
    position: absolute;
    top: 10px;
    left: -10px;
    width: 80px;
    height: 80px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
}

.tab_text {
    text-align: left;
    width: 85%;
}

.tab_text h5 {
    font-size: var(--font_20);
    color: var(--blue);
}

.tab_text p {
    margin-bottom: 0;
}

.automated {
    position: relative;
}

.mobile_img {
    text-align: center;
}


/* 
#Path_10858 {
    animation: mymove 2s infinite;
}

@keyframes mymove {
    0% {
        fill: #000000;
    }
    100% {
        fill: #45e2c8;
    }
} */


/* .automated img {
    width: 100%;
} */

.priority_img {
    position: absolute;
    top: 5%;
    left: 5%;
    z-index: 2;
    width: 23%;
}

.leave_day {
    left: 14%;
}


/* .tick_img {
    position: absolute;
    bottom: 6%;
    left: 9%;
    z-index: 2;
    width: 30%;
} */

.tick_img {
    position: absolute;
    bottom: 6%;
    left: 14%;
    z-index: 2;
    width: 18%;
}


/* .activity_img {
    position: absolute;
    bottom: 6%;
    right: -6%;
    z-index: 2;
    width: 45%;
} */

.activity_img {
    position: absolute;
    bottom: 6%;
    right: 0;
    z-index: 2;
    width: 30%;
}

.three_line {
    position: absolute;
    top: 0;
    right: 20%;
    width: 7%;
}

.features {
    background: url("../images/newBg.webp") no-repeat;
    background-size: 100% 100%;
}

.features_tab .nav-tabs {
    background: rgb(13 76 125 / 10%);
    border: none;
    border-radius: 100px;
    /* justify-content: space-between; */
}

.features_tab .nav-link {
    font-size: var(--font_17);
    width: calc(16.6% - 0px);
    border: none;
    padding: 10px;
    border-radius: 60px;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    position: relative;
    text-align: left;
    border-radius: 60px;
}

.polygon_shape {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: auto;
    width: 40px;
}

.hrms_icon svg {
    max-width: 36px;
}

.features_tab .nav-link.active .polygon_shape {
    display: block;
}

.features_tab .nav-link.active {
    background: var(--blue);
    color: var(--light_green);
    border-radius: 60px;
}

.features_tab .nav-link::after {
    content: "";
    position: absolute;
    top: 40%;
    right: 0;
    width: 2px;
    height: 60%;
    background: var(--white);
    transform: translateY(-30%);
}

.features_tab .nav-link.active::after {
    background: rgb(229 237 242);
    right: -2px;
}

.features_tab .nav-link:last-child::after {
    content: unset;
}

.features_tab .nav-link.active::before {
    content: "";
    position: absolute;
    top: 40%;
    left: -2px;
    width: 2px;
    height: 60%;
    background: #e3edf1;
    transform: translateY(-30%);
}

.features_tab .nav-link:first-child.active::before {
    content: unset;
}

.features_tab .nav-link.active #Path_6604,
.features_tab .nav-link.active .white_part path {
    fill: var(--white);
}

.ft_size {
    width: 80px;
    height: 80px;
}

.features_tab .tab-content {
    margin-top: 80px;
}

.payroll_content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.left_side {
    width: 40%;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 26px 35px #0d4c7d1a;
    padding: 50px;
    border-radius: 20px;
}

.left_side h5 {
    font-size: var(--font_28);
    color: var(--blue);
    font-weight: 500;
    margin-bottom: 30px;
}

.left_side h5 span {
    color: var(--yellow);
}

.list_one li {
    font-size: var(--font_16);
    color: var(--blue);
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
}

.list_one li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--font_20);
    color: var(--light_green);
}

.left_side .cmn_btn .icon_ani {
    padding: 10px 20px;
}

.left_side .cmn_btn .icon_ani i {
    color: var(--white);
}

.left_side .cmn_btn:hover i {
    color: var(--blue);
}

.right_side {
    width: 60%;
}

.ft_img {
    width: 80%;
    text-align: center;
    position: relative;
    z-index: 1;
}

.ft_img svg {
    max-width: 80%;
    margin: auto;
    width: 100%;
}

.payroll_content .glass_effect {
    border: 1px solid #0d4c7d2b;
}

.payroll_img {
    position: absolute;
    bottom: 20%;
    right: -10%;
    border: 1px solid;
    width: 28%;
}

.payroll_img.glass_effect {
    background: rgb(255 255 255 / 81%);
}

.salary_img {
    position: absolute;
    top: 0;
    left: 8%;
    width: 25%;
    z-index: -1;
}

.field_1 {
    position: absolute;
    top: 0;
    left: 2%;
    z-index: -1;
}

.meeting {
    left: -12%;
    z-index: 1;
}

.company_yearly {
    position: absolute;
    bottom: 15%;
    left: 7%;
}

.leave_img {
    position: absolute;
    top: 0;
    right: 12%;
    width: 20%;
}

.tools_img {
    right: 0;
    width: 30%;
    z-index: -1;
}

.total_msg {
    bottom: 20%;
    top: unset;
    width: 29%;
    right: 8%;
}

.received_msg {
    top: 50%;
    left: 12%;
    z-index: 1;
}

.work_alert {
    width: 30%;
}

.support_img {
    width: 45%;
    z-index: -1;
    right: -3%;
}

.best_employe {
    right: 0;
    top: 10%;
}

.team_img {
    width: 23%;
    right: 24%;
    z-index: -1;
}

.salary_img img,
.leave_img img,
.payroll_img img {
    width: 100%;
}


/* #partner_slider .item {
    border: 1px solid #dedede;
} */

.partner_img {
    width: 90%;
    margin: auto;
    border: 1px solid #dedede;
    border-radius: 8px;
    padding: 15px 30px;
}

.partner_img img {
    /* max-width: 110px;
    width: 100%;
    margin: auto; */
    height: 110px;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.story {
    background: url("../images/story_patterns.png") no-repeat var(--light_blue);
    background-size: cover;
    background-position: top center;
    overflow: hidden;
}

.video_part {
    position: relative;
    z-index: 1;
}

.video_part::before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(13 76 125 / 8%);
    position: absolute;
    top: 10%;
    left: -5%;
    z-index: -1;
    border-radius: 20px;
}

.video_part video {
    width: 100%;
    border-radius: 20px;
    display: block;
}

.payroll3d {
    position: absolute;
    bottom: 0%;
    left: 10px;
}

.top_arrow {
    position: absolute;
    top: -25%;
    left: 50%;
    z-index: -1;
    rotate: 1deg;
}

.myco_one {
    padding-left: 50px;
}

.myco_one h5 {
    font-size: var(--font_28);
    color: var(--blue);
}


/*
.myco_one {
    margin-bottom: 25px;
}
 
.myco_one:last-child {
    margin-bottom: 0;
}

.myco_one:last-child h5 {
    color: var(--yellow);
} */

.blog_list .cmn_btn,
.myco_one .cmn_btn,
.left_side .cmn_btn {
    margin-top: 30px;
    display: inline-flex;
}

.blog_list .cmn_btn i,
.myco_one .cmn_btn i {
    color: var(--white);
}

.blog_list .cmn_btn:hover i,
.myco_one .cmn_btn:hover i {
    color: var(--blue);
}


/* ========= */


/**
 * Title:
 *    Animations
 * Description:
 *    List all the animations of the site in one file
 * Sections:
 *    $. Keyframes
 *    $. Classes
 */


/* $. Keyframes
\*----------------------------------------------------------------*/

@-webkit-keyframes shrink {
    0% {
        color: green;
        transform: scale(2);
    }
    100% {
        transform: scale(1);
        color: grey;
    }
}

@keyframes shrink {
    0% {
        color: green;
        transform: scale(2);
    }
    100% {
        transform: scale(1);
        color: grey;
    }
}

@-webkit-keyframes grow {
    0% {
        transform: scale(1);
        color: grey;
    }
    100% {
        transform: scale(2);
        color: green;
    }
}

@keyframes grow {
    0% {
        transform: scale(1);
        color: grey;
    }
    100% {
        transform: scale(2);
        color: green;
    }
}


/* $. Classes
  \*----------------------------------------------------------------*/

#real_story {
    display: none;
}

.animate {
    transform: translate3d(0, 0, 0);
    perspective: 1000;
    filter: blur(0);
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    transform-origin: center left;
}

.animate--shrink,
.hero__title .slick-current>span {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: shrink;
    animation-name: shrink;
    -webkit-animation-timing-function: "linear";
    animation-timing-function: "linear";
}

.animate--grow,
.no-js .hero__title .slick-dupe:nth-child(2)>span,
.hero__title .slick-current+.slick-slide>span {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: "linear";
    animation-timing-function: "linear";
    -webkit-animation-name: grow;
    animation-name: grow;
}


/* Slider */

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    /* touch-callout: none; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: pan-y;
    /* tap-highlight-color: transparent; */
    padding-top: 40px;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
}

.slick-track:before,
.slick-track:after {
    content: "";
    display: table;
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}

[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: 0;
    outline: none;
}

.slick-vertical .slick-slide::-moz-selection {
    outline: none !important;
    border: 0 !important;
    box-shadow: none;
}

.slick-vertical .slick-slide:focus,
.slick-vertical .slick-slide:active,
.slick-vertical .slick-slide::selection {
    outline: none !important;
    border: 0 !important;
    box-shadow: none;
}

.slick-arrow.slick-hidden {
    display: none;
}

.slick-current {
    position: relative;
}

.hero__title .slick-slide {
    overflow: hidden;
    padding: 20px 0;
}

.hero__title [aria-hidden] {
    transition: 1s;
}


/* 
  .hero__title [aria-hidden="false"]{
      opacity: 1;
  }
  
  .hero__title [aria-hidden="true"] {
      opacity: 0;
  }
   */

.hero__title .slick-current>span {
    box-sizing: border-box;
    display: block;
}

.no-js .hero__title .slick-dupe:nth-child(2)>span {
    padding: 1em;
}

.hero__title-misc {
    display: block;
    font-size: 24px;
    font-weight: bold;
    color: grey;
}

.real_stories {
    background: url("../images/cheks_patterns.png") no-repeat var(--light_blue);
    background-size: cover;
    background-position: bottom center;
}

.functionality {
    background: url("../images/cheks_patterns.png") no-repeat var(--white);
    background-size: cover;
    background-position: bottom center;
}

.list_two {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

.list_two li {
    width: 32%;
    overflow: hidden;
}

.list_two li:nth-child(2) {
    text-align: center;
}

.list_two li:last-child {
    text-align: right;
}

.shift_set {
    border-bottom: 1px solid #4a4a4a30;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.shift_set h6 {
    font-size: var(--font_20);
    color: var(--blue);
}

.shift_set p {
    margin-bottom: 0;
}

.list_two li .shift_set:last-child {
    margin-bottom: 0;
}

.client_slider {
    position: relative;
}

.listen {
    position: absolute;
    top: -19%;
    right: -4%;
    z-index: 2;
    width: 17%;
}

.saying {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    background: transparent linear-gradient(180deg, #ffffff 0%, #ffffff00 100%) 0% 0% no-repeat padding-box;
    padding: 15px 70px 15px 15px;
    border-radius: 20px;
    position: relative;
}

.client_profile {
    width: 8%;
}

.tag_line {
    width: 88%;
}

.client_profile img {
    width: 100%;
}


/* .saying:hover {
    background: transparent linear-gradient(180deg, var(--blue) 0%, #ffffff00 100%) 0% 0% no-repeat padding-box;
}

.saying:hover p,
.saying:hover h6 {
    color: white;
}

.saying:hover::before {
    filter: brightness(0) saturate(100%) invert(94%) sepia(95%) saturate(12%) hue-rotate(305deg) brightness(107%) contrast(100%);
} */

.saying::before {
    content: "";
    width: 50px;
    height: 40px;
    background: url("../images/quote_img.png") no-repeat;
    background-size: contain;
    position: absolute;
    top: 30px;
    right: 30px;
}

.tag_line h6 {
    font-size: var(--font_22);
    color: var(--blue);
}

.tag_line h6 span {
    font-size: var(--font_16);
    color: var(--yellow);
}

.tag_line p {
    font-size: var(--font_15);
}

.client {
    width: 80%;
    margin: auto;
    border-radius: 20px;
    overflow: hidden;
}

.client_video {
    width: 100%;
}

.client_video video {
    width: 100%;
    display: block;
}

.client_name {
    display: flex;
    background: var(--white);
    align-items: center;
    justify-content: space-between;
    padding: 25px;
    border-radius: 0 0 20px 20px;
}

.client_name h6 {
    font-size: var(--font_22);
    color: var(--light_green);
}

.client_name small {
    font-size: var(--font_20);
}

.client_name img {
    max-width: 100px;
}

#payroll_management_video .owl-nav,
#highlights .owl-nav,
#real_story .owl-nav,
#tab_slider_mobile .owl-nav,
#blog_slider .owl-nav,
#video_slider .owl-nav,
#testimonial_client .owl-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 30px;
}

#payroll_management_video .owl-nav i,
#highlights .owl-nav i,
#real_story .owl-nav i,
#tab_slider_mobile .owl-nav i,
#blog_slider .owl-nav i,
#video_slider .owl-nav i,
#testimonial_client .owl-nav i {
    font-size: 30px;
}

#payroll_management_video .owl-nav i:hover,
#highlights .owl-nav i:hover,
#real_story .owl-nav i:hover,
#tab_slider_mobile .owl-nav i:hover,
#blog_slider .owl-nav i:hover,
#video_slider .owl-nav i:hover,
#testimonial_client .owl-nav i:hover {
    color: var(--yellow);
}


/* ==================== testtimonial vertical slider css start here ========================================= */

@-webkit-keyframes shrink {
    0% {
        color: green;
        transform: scale(2);
    }
    100% {
        transform: scale(1);
        color: grey;
    }
}

@keyframes shrink {
    0% {
        color: green;
        transform: scale(2);
    }
    100% {
        transform: scale(1);
        color: grey;
    }
}

@-webkit-keyframes grow {
    0% {
        transform: scale(1);
        color: grey;
    }
    100% {
        transform: scale(2);
        color: green;
    }
}

@keyframes grow {
    0% {
        transform: scale(1);
        color: grey;
    }
    100% {
        transform: scale(2);
        color: green;
    }
}

.animate {
    transform: translate3d(0, 0, 0);
    perspective: 1000;
    filter: blur(0);
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    transform-origin: center left;
}

.animate--shrink,
.hero__title .slick-current>span {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: shrink;
    animation-name: shrink;
    -webkit-animation-timing-function: "linear";
    animation-timing-function: "linear";
}

.animate--grow,
.no-js .hero__title .slick-dupe:nth-child(2)>span,
.hero__title .slick-current+.slick-slide>span {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: "linear";
    animation-timing-function: "linear";
    -webkit-animation-name: grow;
    animation-name: grow;
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    /* touch-callout: none; */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: pan-y;
    /* tap-highlight-color: transparent; */
    padding-top: 0;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
}

.slick-track:before,
.slick-track:after {
    content: "";
    display: table;
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
}

[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: 0;
    outline: none;
}

.slick-vertical .slick-slide::-moz-selection {
    outline: none !important;
    border: 0 !important;
    box-shadow: none;
}

.slick-vertical .slick-slide:focus,
.slick-vertical .slick-slide:active,
.slick-vertical .slick-slide::selection {
    outline: none !important;
    border: 0 !important;
    box-shadow: none;
}

.slick-arrow.slick-hidden {
    display: none;
}

.hero__title .slick-slide {
    overflow: hidden;
    /* padding: 20px 0; */
    padding: 0 0 10px 0;
}

.hero__title .slick-slide:last-child {
    padding-bottom: 0;
}

.hero__title [aria-hidden] {
    transition: 1s;
}

.hero__title .slick-current>span {
    box-sizing: border-box;
    display: block;
}

.no-js .hero__title .slick-dupe:nth-child(2)>span {
    padding: 1em;
}

.hero__title-misc {
    color: grey;
}


/* ==================== testtimonial vertical slider css end here ========================================= */

.video_blog .nav-tabs {
    border: none;
    gap: 30px;
    justify-content: center;
}

.video_blog .nav-link {
    font-size: var(--font_22);
    padding-bottom: 8px;
    border: none;
    padding: 0;
    color: rgb(44 101 143 / 50%);
    text-transform: uppercase;
}

.video_blog .nav-link.active {
    color: var(--yellow);
    border-bottom: 2px solid var(--blue);
}

.video_blog .tab-content {
    margin-top: 50px;
}

.video_div {
    width: 90%;
    margin: auto;
    padding: 30px;
    position: relative;
}

.video_div video {
    width: 100%;
    border-radius: 20px;
    border: 1px solid #dedede;
}

.play_btn,
#play_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80px;
    width: 100%;
    animation: beat 1.5s ease-in-out infinite;
    cursor: pointer;
}

#video_slider .play-btn {
    max-width: 40px;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80px;
    width: 100%;
    cursor: pointer;
}

.owl-item.active.center .play-btn {
    animation: beat 1.5s ease-in-out infinite;
}


/* .day_work svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80px;
    width: 100%;
    animation: beat 1.5s ease-in-out infinite;
} */

@keyframes beat {
    0%,
    100% {
        scale: 1;
    }
    25% {
        scale: 1.1;
    }
    50% {
        scale: 1;
    }
    75% {
        scale: 1.1;
    }
}

#video_slider .owl-item.active.center .video_div {
    padding: 0;
    /* margin: 0; */
}

.blog_part {
    position: relative;
    margin: 30px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 15px;
}

.blog_part img {
    width: 100%;
}

.hover_box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90%;
    right: 0;
    margin: auto;
    background: #e5f2ff;
    padding: 25px;
    transform: translateY(30%);
    transition: 0.5s;
    border-radius: 15px;
}

.blog_part:hover .hover_box {
    transform: translateY(-10%);
}

.hover_box .top_name {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top_name span,
.slick-current {
    position: relative;
}

.top_name h5 {
    font-size: var(--font_22);
    color: var(--blue);
}

.top_name span {
    color: var(--yellow);
}

.top_name span::before {
    content: "\f111";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    font-size: 5px;
    position: absolute;
    top: 6px;
    left: -15px;
}

a.more.cmn_btn {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    display: inline-block;
}

.more.cmn_btn:hover {
    color: var(--yellow);
}


/*======================= CTA start here  ======================= */

.CTA {
    background: linear-gradient( 270deg, rgba(254, 249, 244, 1) 30%, rgba(255, 255, 255, 1) 45%, rgba(239, 252, 250, 1) 91%);
    /* background: var(--light_blue); */
}


/* .CTA .text-center {
    background: var(--blue);
    padding: 30px;
    border-radius: 150px;
} */

.CTA .comntitle {
    color: var(--blue);
    /* font-size: var(--font_30); */
}

.CTA .cmn_btn {
    margin-top: 15px;
    background: var(--light_green);
    color: var(--blue);
    display: inline-flex;
    border: none;
}

.CTA .cmn_btn:hover {
    background: var(--skyblue);
    color: var(--white);
}

.CTA .cmn_btn .icon_ani {
    background: var(--light_blue);
}

.CTA .cmn_btn i {
    color: var(--blue);
    font-size: var(--font_30);
}


/*======================= CTA start end  ======================= */


/*========================================================================================================================================================================================*/

footer {
    background: var(--blue);
}

footer>.container>.row {
    padding: 60px 0;
    border-bottom: 1px solid rgb(255 255 255 / 30%);
}

.ftlogo>a {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 25px;
}

.ftlogo p {
    font-size: var(--font_16);
    line-height: 24px;
    color: white;
    margin: 30px 0;
}

.ft_social {
    display: flex;
    gap: 30px;
}

.ft_social a:hover img {
    filter: brightness(0) saturate(100%) invert(94%) sepia(95%) saturate(12%) hue-rotate(305deg) brightness(107%) contrast(100%);
}

.ft_about h6 {
    font-size: var(--font_18);
    color: var(--light_green);
    margin-bottom: 30px;
    text-transform: uppercase;
}

.list-unstyled li {
    margin-bottom: 10px;
}

.list-unstyled li a {
    font-size: var(--font_16);
    color: var(--white);
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.list-unstyled li a:hover {
    padding-left: 25px;
    color: var(--light_green);
}

.list-unstyled li a::before {
    content: "\f101";
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
    font-size: var(--font_20);
    color: white;
    transform: translateX(-25px);
    overflow: hidden;
    opacity: 0;
    transition: 0.5s;
}

.list-unstyled li a:hover::before {
    transform: translateX(0px);
    opacity: 1;
    color: var(--light_green);
}

.ft_about aside {
    font-size: var(--font_16);
    display: flex;
    /* gap: 10px; */
    align-items: baseline;
    color: var(--white);
}

.ft_contact i {
    color: var(--light_green);
    font-size: var(--font_18);
    padding-right: 15px;
}

.ft_otherlink {
    color: #fff;
}

.ft_otherlink a {
    position: relative;
    margin-right: 10px;
    padding-right: 10px;
    display: inline-block;
}

.ft_otherlink a:before {
    content: "";
    width: 1px;
    height: 100%;
    background: var(--white);
    position: absolute;
    right: 0;
    top: 0;
}

.ft_otherlink a:last-child {
    padding-right: 0;
    margin-right: 0;
}

.ft_otherlink a:last-child::before {
    display: none;
}

.ft_about a {
    font-size: var(--font_16);
    color: var(--white);
}

.contact {
    margin-bottom: 25px;
    display: flex;
}

.email_adress {
    position: relative;
}

.email_adress input {
    padding-right: 100px;
}

.email_adress button {
    background: var(--light_green);
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 10px 25px;
    border-radius: 8px;
    border: none;
    text-align: center;
}

.ft_about h5 {
    font-size: var(--font_18);
    color: var(--white);
    margin: 25px 0 15px 0;
}

.stor_link a {
    display: inline-block;
    margin: 5px;
}

.copyright aside {
    font-size: var(--font_18);
    color: var(--white);
    text-align: center;
    padding: 30px 0;
}

.contact_popup {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 3;
    background: #1579db;
    color: var(--white);
    font-size: var(--font_24);
}

.btn-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: #ff4545;
    opacity: 1;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-close:hover {
    opacity: 1;
    color: white;
}

#exampleModal {
    background: #00000038;
    backdrop-filter: blur(3px);
}

.modal-content {
    background: url(../images/newBg.webp) no-repeat;
    background-size: 100% 100%;
    border: none;
}

.modal-header h5 {
    font-size: var(--font_28);
    color: var(--blue);
    font-weight: 500;
    margin: auto;
}

#exampleModal .modal-dialog {
    max-width: 950px;
}

.popup_body {
    padding: 25px;
}

.popup_body .input-group {
    margin-bottom: 30px;
}

.popup_body .cmn_btn {
    padding: 12px 25px;
    background: var(--blue);
    color: var(--white);
    border-radius: 8px;
    margin: 20px auto 0;
}

.popup_body textarea {
    resize: none;
    height: 130px;
}


/* .request_form .popup_body textarea {
    height: 80px;
} */


/*========================================================================================================================================================================================
================================================================= Features_Category Page css start here ================================================================================
========================================================================================================================================================================================*/

.Features_Category {
    padding: 220px 0 100px;
}

.Features_Category .comntitle {
    line-height: 64px;
}

.Features_Category .cmn_btn {
    margin: unset;
}

.why_myco {
    background: var(--light_blue);
}

.why_myco .comntitle {
    margin-bottom: 30px;
}

.why_myco .story_myco svg {
    width: 100%;
    height: auto;
}

.feature_cta p {
    font-size: var(--font_24);
    color: var(--blue);
    margin: 30px 0;
}

.team_list {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    gap: 30px;
}

.team_list li {
    width: 48.9%;
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--blue);
}

.icon_tailored {
    width: 129px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
    position: relative;
}

.icon_tailored::before {
    content: "";
    width: 1px;
    height: 80%;
    background: var(--blue);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.team_details {
    width: calc(100% - 150px);
    text-align: left;
    padding: 15px 0;
}


/* .icon_tailored {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    border: 1px solid var(--light_green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
} */


/* .icon_tailored::before {
    content: "";
    width: 160PX;
    height: 3px;
    background: var(--light_green);
    position: absolute;
    top: 50%;
    right: -100%;
    transform: translate(65%, -50%);
}

.team_list li:last-child .icon_tailored::before {
    content: unset;
} */

.icon_tailored img {
    max-width: 60px;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.team_list li h6 {
    font-size: var(--font_22);
    color: var(--blue);
}

.work_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 100px;
    margin-top: 70px;
    /* align-items: center; */
}

.work_list li {
    width: 28.4%;
    text-align: center;
    background: white;
    box-shadow: 0px 0px 30px 0px #00000012;
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.work_list_img {
    width: 90px;
    height: 90px;
    background: var(--white);
    margin: -70px auto 30px;
    padding: 15px;
    border-radius: 50%;
    border: 1px solid #0d4c7d;
    display: flex;
    justify-content: center;
    align-items: center;
}

.work_list_img svg {
    max-width: 46px;
    height: 46px;
    width: 100%;
    aspect-ratio: 1/1;
}

.Features_Category.contact_banner .line_div {
    display: unset;
}

.Features_Category.contact_banner .line_div svg,
.Features_Category.about_banner .line_div svg {
    width: 100%;
}

.payroll_banner .line_div,
.Features_Category .line_div {
    display: block;
}

.payroll_banner .line_div svg,
.Features_Category .line_div svg {
    width: auto;
}


/* .work_list_img svg {
    width: 100%;
    height: auto;
} */

.work_list h5 {
    font-size: var(--font_18);
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.work_list span {
    font-size: var(--font_16);
    font-weight: 600;
    color: var(--yellow);
    margin-bottom: 5px;
    display: inline-block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}


/* .work_list p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
} */

.work_list a {
    font-size: var(--font_16);
    font-weight: 500;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--blue);
    padding: 10px 30px;
    border-radius: 30px;
}

.work_list a:hover {
    background: var(--skyblue);
    color: var(--white);
}

.work_list a i {
    font-size: var(--font_18);
    transition: unset;
    font-weight: 500;
}

.simplifies {
    background: var(--light_blue);
}

.simplifies .comntitle {
    margin-bottom: 70px;
}

.day_work {
    position: relative;
}

.day_work video {
    width: 100%;
    border-radius: 20px;
}

.eye {
    margin: auto;
}

.pupil3,
.pupil2,
.pupil1,
.pupil {
    position: relative;
}


/*========================================================================================================================================================================================
================================================================= Features_Category Page css END here ================================================================================
========================================================================================================================================================================================*/


/*========================================================================================================================================================================================
================================================================= detaile_landing css START here ================================================================================
========================================================================================================================================================================================*/

.payroll_banner_2 {
    padding: 220px 0 100px;
}

.sub_tag {
    font-size: 30px;
    color: var(--blue);
    font-weight: 500;
    /* background: linear-gradient(270deg, rgba(233, 239, 247, 0) 0%, rgb(69 226 200) 100%); */
    display: inline-block;
    padding: 10px;
    text-transform: capitalize;
}

.head_tab_div {
    /* background: url("../images/green_gradient_img.png") no-repeat;
    background-size: cover; */
    background: linear-gradient( 270deg, rgba(207, 248, 241, 1) 3%, rgba(233, 239, 247, 1) 44%, rgba(222, 239, 255, 1) 91%);
    padding-top: 130px;
    position: relative;
}

.head_tab_div .sub_tabline {
    background: rgb(13 76 125 / 10%);
    /* padding: 25px 0; */
}

.sub_tabline .nav-tabs {
    gap: 15px;
    justify-content: center;
}

.sub_tabline .nav-link {
    font-size: var(--font_18);
    /* color: var(--blue); */
    color: var(--dark);
    border: unset;
    border-radius: 0;
    /* padding: 10px 30px; */
    padding: 30px;
    border-bottom: 1px solid transparent;
    font-weight: 300;
}

.sub_tabline .nav-link:hover {
    border-bottom: 3px solid var(--blue);
}


/* .sub_tabline .nav-link:hover {
    border: 1px solid var(--skyblue);
    color: var(--skyblue);
} */

.sub_tabline .nav-link.active {
    background: none;
    color: var(--blue);
    border-bottom: 3px solid var(--blue);
    position: relative;
    z-index: 1;
    font-weight: 500;
}

.payroll_page #home-tab {
    font-weight: 500;
}

.sub_tabline .nav-link.active::before {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient( 180deg, rgba(233, 239, 247, 0) 0%, rgb(255 255 255 / 65%) 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
}


/* 
.sub_tabline .nav-tabs .nav-link.active {
    background: var(--blue);
    color: var(--white);
} */

.payroll_banner {
    background: var(--white);
}

.payroll_banner_2 .cmn_btn {
    margin: unset;
}

.payroll_banner .cmn_btn {
    margin: unset;
    margin-top: 50px;
}

.Payroll_Software {
    background: var(--light_blue);
}

.list_four {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.Payroll_Software .list_four li {
    width: 31%;
    margin: 0;
    padding: 25px;
    background: linear-gradient( 180deg, rgba(233, 239, 247, 0) 0%, rgba(255, 255, 255, 1) 100%);
    border-radius: 20px;
}

.list_four li::before {
    content: unset;
}

.list_four li img {
    display: block;
    margin: 0 auto 30px;
}

.list_four p {
    color: var(--blue);
}

.list_three li {
    font-size: var(--font_20);
    color: var(--blue);
    margin-bottom: 15px;
}

.system {
    background: url(../images/newBg.webp) no-repeat #fff;
    background-size: 100% 100%;
}

.system .svg_code {
    max-width: 100%;
    width: auto;
    height: auto;
    display: block;
    margin: auto;
}

.list_top {
    margin-top: 50px;
}

.select_payroll {
    background: var(--white);
}


/* .list_four li h5 {
    font-size: var(--font_20);
    font-weight: 600;
    color: var(--blue);
}

.list_four li p {
    margin: 0;
} */

.main_faq {
    background: var(--white);
}

.main_faq h6 {
    text-align: center;
}

.main_faq #accordionExample {
    width: 100%;
    margin-top: 70px;
}

.main_faq .accordion-item {
    margin-bottom: 20px;
    border: 1px solid var(--blue) !important;
    border-radius: 20px !important;
    overflow: hidden;
}

.main_faq .accordion-item:last-child {
    margin-bottom: 0;
}

.main_faq #accordionExample .accordion-button {
    font-size: var(--font_20);
    color: var(--blue);
    padding: 20px;
}

.main_faq #accordionExample .accordion-button:not(.collapsed) {
    background: var(--blue);
    color: var(--white);
    box-shadow: none;
    border-radius: 20px 20px 0 0;
}

.accordion-button:focus {
    box-shadow: none;
}

.main_faq #accordionExample .accordion-body {
    padding: 20px;
}

.faq_section .accordion-body,
.main_faq #accordionExample p {
    margin: 0;
    font-size: var(--font_16);
}

.accordion-button::after {
    transition: all 0.5s;
    background-size: 1.50rem;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
    transition: all 0.5s;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 16 16'%3E%3C!-- Generator: Adobe Illustrator 29.2.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 116) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M4,8c0-.3.2-.5.5-.5h7c.3,0,.5.2.5.5s-.2.5-.5.5h-7c-.3,0-.5-.2-.5-.5Z'/%3E%3C/svg%3E");
}

.effective {
    background: url(../images/newBg.webp) no-repeat #fff;
    background-size: 100% 100%;
}

.effective .comntitle {
    text-align: center;
}

.effective_tab {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    position: relative;
}

.what_is_img {
    position: absolute;
    top: -60%;
    left: 0;
    width: 6%;
}

.effective_tab .nav-tabs {
    gap: 15px;
    border: none;
    display: flex;
    flex-direction: column;
    width: 20%;
}

.effective_tab .nav-link {
    width: calc(17% - 6px);
    border: none;
    padding: 10px 30px;
    border-radius: 60px;
    font-size: var(--font_18);
    color: #000000;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    text-align: left;
    border-radius: 8px;
    border: 1px solid var(--blue);
    width: 100%;
}

.effective_tab .nav-link.active {
    background: var(--blue);
    color: var(--white);
    border: 1px solid transparent;
}

.effective_tab .nav-link:hover {
    border-color: var(--blue);
}

.effective_tab .nav-link.active .white_part,
.effective_tab .nav-link.active .white_part #Path_15626 {
    fill: var(--white);
}

.effective_tab .hrms_icon svg {
    max-width: 40px;
    height: 40px;
    width: 100%;
    aspect-ratio: 1/1;
}

.effective_tab .tab-content {
    width: 70%;
}

.effective_tab .left_side {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 50px 50px 0 50px;
}

.effective_tab .left_side .list_one {
    width: 60%;
}

.effective_tab_img {
    width: 40%;
    margin-top: -100px;
    margin-left: auto;
    text-align: center;
}


/* .effective_tab_img img {
    max-height: 250px;
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: contain;
} */


/* 
.select_payroll .team_list {
    justify-content: center;
}

.select_payroll .full_list li {
    width: 31.9%;
    padding: 15px;
    gap: 0;
}

.select_payroll .icon_tailored {
    width: 100%;
    height: auto;
}

.select_payroll .icon_tailored::before {
    content: none;
}

.select_payroll .team_details {
    text-align: center;
} */


/*========================================================================================================================================================================================
================================================================= detaile_landing css END here ================================================================================
========================================================================================================================================================================================*/


/*========================================================================================================================================================================================
================================================================= contact page css start here ================================================================================
========================================================================================================================================================================================*/

.send_us {
    background: var(--light_blue);
}

.send_us form {
    /* width: 80%;
    margin: auto; */
    /* background: url(../images/newBg.webp) no-repeat #fff; */
    background: var(--white);
    background-size: 100% 100%;
    padding: 50px 30px;
    border-radius: 20px;
    position: relative;
}

.send_us form .connect_img {
    position: absolute;
    top: -28%;
    left: -14%;
    width: 15%;
}

.send_us iframe {
    width: 100%;
    height: 500px;
    border-radius: 20px;
    margin-top: 30px;
}

label {
    font-size: var(--font_18);
    color: var(--blue);
    margin-bottom: 8px;
}

.send_us .input_grup {
    margin-bottom: 30px;
}

.send_us form .input_grup input,
.send_us form .input_grup textarea {
    border: none !important;
}


/* .input_grup {
    margin-bottom: 30px;
} */

.input_grup textarea {
    resize: none;
    height: 180px;
}

.send_us .cmn_btn {
    background: var(--skyblue);
    color: var(--white);
    padding: 10px 60px;
    text-transform: uppercase;
    display: table;
    margin: auto;
}

.send_us .cmn_btn:hover {
    background: var(--blue);
}

.our_office .container {
    text-align: center;
}

.our_office svg {
    max-width: 100%;
    height: auto;
    overflow: hidden;
}

.contact_detail {
    background: linear-gradient(273deg, rgba(233, 239, 247, 0) 0%, rgb(255 255 255) 100%);
    padding: 30px 0 30px 30px;
    border-radius: 20px;
}

.contact_detail .Sales_no {
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.contact_detail .Sales_no:last-child {
    margin-bottom: 0;
}

.contact_had {
    width: calc(100% - 80px);
}

.Sales_no span {
    font-weight: 600;
}

.Sales_no address {
    font-size: var(--font_16);
    color: var(--dark);
}

.address_div address,
.Sales_no span {
    font-size: var(--font_16);
    color: var(--skyblue);
}

.Sales_no span {
    display: block;
}

.Sales_no a {
    color: var(--dark);
    font-size: var(--font_15);
}

.Sales_no a:hover {
    color: var(--skyblue);
}

.address_div {
    display: flex;
    gap: 10px;
}

.address_div span {
    white-space: nowrap;
}

.Sales_no i {
    width: 60px;
    height: 60px;
    font-size: 24px;
    background: white;
    color: var(--blue);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--blue);
}

.Sales_no img {
    max-width: 24px;
    /* margin-right: 10px; */
    filter: brightness(0) saturate(100%) invert(20%) sepia(94%) saturate(996%) hue-rotate(178deg) brightness(94%) contrast(93%);
}

.main_map {
    background: var(--light_blue);
}

.main_map .container {
    text-align: center;
}

.all_map {
    width: 100%;
}

.all_map img {
    width: 70%;
    height: auto;
}

.request_form {
    background: url(../images/newBg.webp) no-repeat;
    background-size: 100% 100%;
}


/*========================================================================================================================================================================================
================================================================= contact page css END here ================================================================================
========================================================================================================================================================================================*/


/*========================================================================================================================================================================================
================================================================= About us page css START here ================================================================================
========================================================================================================================================================================================*/

.about_we_img {
    width: 70%;
    margin: auto;
}

.about_we_img svg {
    width: 100%;
    height: auto;
}


/*========================================================================================================================================================================================
================================================================= About us page css END here ================================================================================
========================================================================================================================================================================================*/

.map {
    height: 600px;
}

.map iframe {
    width: 100%;
    height: 100%;
}

.city {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.city span {
    font-size: var(--font_15);
    font-weight: 400;
    border: 1px solid rgba(13, 76, 125, 0.2);
    padding: 5px 20px;
    display: inline-block;
    border-radius: 5px;
    /* background: var(--light_green);*/
    color: var(--blue);
    -moz-transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    cursor: pointer;
}

.city span:hover {
    color: var(--white);
    background: var(--skyblue);
}

.city h4 {
    font-size: var(--font_24);
    padding-bottom: 5px;
    margin-bottom: 15px;
    width: 100%;
    text-align: left;
    text-transform: capitalize;
    border-bottom: 1px solid;
    color: var(--skyblue);
}

.our_vision {
    /* background: url(../images/green_gradient_img.png) no-repeat; 
    background-size: cover;*/
    background: linear-gradient( 270deg, rgba(254, 249, 244, 1) 30%, rgba(255, 255, 255, 1) 45%, rgba(239, 252, 250, 1) 91%);
}

.mission_box {
    background: var(--white);
    padding: 40px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 0 30px #ddd;
}

.mission_box h3 {
    font-size: var(--font_28);
    color: var(--blue);
}

.mission_box img {
    margin: 20px 0;
}


/* ==========================================================*/

.outer {
    background: var(--light_blue);
}

#big .item {
    padding: 50px;
    margin: 2px;
    border-radius: 3px;
}

#big .item h3 {
    font-size: var(--font_22);
}

#thumbs .item {
    font-size: var(--font_22);
    padding: 10px 30px;
    background: var(--skyblue);
    margin: 2px;
    color: #fff;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
}

#thumbs .item h1 {
    font-size: 18px;
}


/* #thumbs .current .item {
  background: #ff5722;
} */

.owl-theme .owl-nav [class*="owl-"] {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.owl-theme .owl-nav [class*="owl-"].disabled:hover {
    background-color: #d6d6d6;
}

#big.owl-theme {
    position: relative;
}

#big.owl-theme .owl-next,
#big.owl-theme .owl-prev {
    background: #333;
    width: 22px;
    line-height: 40px;
    height: 40px;
    margin-top: -20px;
    position: absolute;
    text-align: center;
    top: 50%;
}

#big.owl-theme .owl-prev {
    left: 10px;
}

#big.owl-theme .owl-next {
    right: 10px;
}

#thumbs .owl-nav button {
    background: #177cd7;
    color: #fff;
    width: 26px;
    border-radius: 50%;
    line-height: 26px;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
}

#thumbs.owl-theme .owl-prev {
    left: 0;
}

#thumbs.owl-theme .owl-next {
    right: 0;
}


/* #thumbs .owl-item::after {
    content: "";
      width: 0;
      height: 0;
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      border-top: 20px solid #4be2c9;
      position: absolute;
      bottom:-15px;
      left: 0;
      right: 0;
      margin: auto;
      opacity: 0;
    } */

#thumbs .owl-item {
    margin-bottom: 20px;
}

#thumbs .owl-item.active.current .item {
    background: var(--light_green);
    color: var(--blue);
}

#thumbs .owl-item.active.current::after {
    opacity: 1;
}


/*=================================================== Our Team page css start here ========================================*/

.cmn_center_banner {
    padding: 220px 0 40px;
}

.team_div {
    background: var(--light_blue);
}

.tem_ul li {
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto 100px;
    gap: 50px;
}

.tem_ul li:last-child {
    margin-bottom: 0;
}

.team_div_img {
    width: 40%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.team_div_img img {
    width: 100%;
    margin: auto;
    display: block;
    border-radius: 20px;
    overflow: hidden;
}

.team_div_content {
    width: 55%;
}

.team_heading {
    border-bottom: 1px solid var(--blue);
    padding-bottom: 15px;
    margin-bottom: 30px;
}

.team_heading h4 {
    font-size: var(--font_24);
    color: var(--skyblue);
    font-weight: 500;
    margin-bottom: 0;
    text-transform: uppercase;
}

.team_heading small {
    font-size: var(--font_16);
    color: var(--yellow);
    display: none;
}

.team_heading span {
    font-size: var(--font_18);
    color: var(--blue);
    display: block;
    margin-top: 5px;
}

.content_paregraph {
    height: 390px;
}

.mCSB_draggerRail {
    display: none;
}

.mCSB_draggerContainer::after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: calc( 50% - 1px);
    background: var(--white);
    width: 2px;
}

.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: var(--skyblue);
}


/* 
.content_paregraph::-webkit-scrollbar {
    width: 5px;
}

.content_paregraph::-webkit-scrollbar-track {
    background: var(--white);
    -webkit-border-radius: 10px;
    border-radius: 5px;
}

.content_paregraph::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 5px;
    background: var(--skyblue);
} */

#highlights .item .d {
    width: 100%;
}

#highlights .item .d img {
    aspect-ratio: 1/1;
    object-fit: contain;
}


/*=================================================== Our Team page css END here ========================================*/


/*=================================================== FAQ page css START here ========================================*/

.faq_section ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.faq_section ul li {
    overflow: hidden;
}

.faq_section ul li a {
    font-size: var(--font_18);
    background: var(--skyblue);
    color: var(--white);
    display: block;
    padding: 10px 30px;
    border-radius: 50px;
    overflow: hidden;
}

.faq_section ul li a.active {
    background: var(--blue);
    color: var(--white);
}

.faq_input {
    width: 50%;
    margin: 30px auto;
    border: 1px solid var(--blue);
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.faq_input input {
    border: none !important;
    border-radius: 0;
    padding-right: 60px;
}

.faq_input button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 15px;
    border-radius: 0;
    background: var(--blue);
    color: var(--white);
    border: 0;
}

.faq_section .accordion-item {
    margin: 20px 0;
}


/*=================================================== FAQ page css END here ========================================*/


/*=================================================== Blog Page css Start here ========================================*/

.blog_search {
    position: relative;
}

.blog_search input {
    /* border: 2px solid var(--blue);
    border-radius: 10px; */
    padding: 15px 50px 15px 10px;
    width: 100%;
    background: none;
}

.blog_search button {
    font-size: var(--font_20);
    border: none;
    position: absolute;
    right: 0;
    background: none;
    color: var(--blue);
    top: 0;
    bottom: 0;
    padding-right: 15px;
}

.comnbox {
    background: var(--light_blue);
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
}

.Recent_articles h4,
.Categories_list h4 {
    font-size: var(--font_24);
    color: var(--skyblue);
}

.Categories_list li:last-child,
.Recent_articles li:last-child {
    border: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.Categories_list li {
    font-size: var(--font_16);
    padding: 10px 0;
    border-bottom: 1px dashed #19191940;
    color: #191919;
    font-weight: 500;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.Categories_list li a {
    font-size: var(--font_16);
    color: var(--blue);
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.Categories_list li a:hover {
    color: var(--skyblue);
}

.Recent_articles li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px dashed #19191940;
}

.Recent_articles ul li img {
    width: 90px;
    height: 90px;
    object-fit: cover;
}

.Recent_articles li img {
    max-width: 90px;
    margin-right: 20px;
    border-radius: 10px;
}

.artical_content {
    width: calc(100% - 110px);
    color: var(--dark);
}

.artical_content a {
    display: block;
    color: var(--dark);
}

.artical_content span {
    font-size: 14px;
    display: block;
    margin-bottom: 5px;
}

.artical_content span i {
    color: var(--skyblue);
}

.artical_content p {
    margin-bottom: 0;
}

.blog_ad_caption {
    padding: 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    color: #fff;
}

.blog_ad_caption img {
    position: absolute;
    right: 60px;
    top: 60px;
    max-width: 60px;
    filter: brightness(0) saturate(100%) invert(85%) sepia(11%) saturate(4427%) hue-rotate(352deg) brightness(98%) contrast(94%);
}

.blog_ad {
    margin-top: 30px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    z-index: 1;
}

.blog_ad::before {
    content: "";
    background: linear-gradient(180deg, rgba(233, 239, 247, 0) 0%, rgb(0 0 0) 100%);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.ad_title {
    font-size: var(--font_24);
    color: #fff;
    margin-bottom: 15px;
}

.blog_ad_caption .cmn_btn {
    background: var(--skyblue);
    color: var(--white);
    padding: 15px 30px;
    border: none;
    display: table;
}

.blog_ad_caption .cmn_btn:hover {
    background: var(--light_green);
    color: var(--blue);
}

.blog_lable a {
    font-size: var(--font_18);
    color: var(--blue);
    background: var(--light_green);
    padding: 5px 25px;
    border-radius: 20px;
}

.blog_list {
    border: 2px solid rgba(25, 25, 25, .15);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 30px;
}

.blog_link {
    font-size: var(--font_18);
    font-weight: 500;
    color: var(--skyblue);
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog_link i {
    transition: unset;
}

.blog_link:hover {
    color: var(--yellow);
}

.blog_info {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 1px dashed #19191940;
}

.blog_info span {
    font-size: 16px;
    margin-right: 15px;
}

.blog_info>div>span {
    font-size: var(--font_16);
}

.blog_title {
    font-size: var(--font_24);
    color: var(--blue);
    margin-bottom: 15px;
}

.Recent_articles {
    background: no-repeat;
    border: 1px solid #ddd;
}


/*===================================================  Blog Page css END here ========================================*/


/*===================================================  Blog-detail Page css start here ========================================*/

.blog_details>img {
    width: 100%;
    border-radius: 20px 20px 0 0;
}

.italictext {
    font-size: var(--font_22);
    margin: 10px 0;
    display: block;
    font-weight: 600;
    color: var(--skyblue);
}

.custom-counter {
    margin: 0 0 15px 0;
    padding: 0;
    list-style-type: none;
}

.custom-counter li {
    counter-increment: step-counter;
    font-size: var(--font_16);
    margin: 10px 0;
    position: relative;
    padding-left: 40px;
    display: inline-block;
    width: 100%;
    color: var(--dark);
}

.custom-counter li::before {
    content: counter(step-counter);
    font-size: var(--font_16);
    background-color: var(--skyblue);
    color: white;
    font-weight: bold;
    border-radius: 3px;
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.right_arrow {
    margin: 30px 0;
}

.right_arrow li {
    padding-left: 30px;
    font-size: var(--font_16);
    color: var(--dark);
    margin: 10px 0;
    position: relative;
}

.right_arrow li::before {
    content: "\f054";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    font-size: var(--font_18);
    color: var(--skyblue);
}


/*===================================================  Blog-detail Page css end here ========================================*/


/*===================================================  terms conditions Page css start here ========================================*/

.policy,
.condition {
    background: url(../images/newBg.webp) no-repeat;
    background-size: 100% 100%;
}

.list_roman {
    margin: 30px 0;
    padding: 0;
}

.list_roman li {
    counter-increment: step-counter;
    font-size: var(--font_16);
    margin: 0 0 25px 0;
    position: relative;
    padding-left: 40px;
    padding-bottom: 15px;
    display: inline-block;
    width: 100%;
    color: var(--dark);
    border-bottom: 1px dashed #dedede;
}

.list_roman li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.list_roman li p {
    margin: 0;
}

.list_roman li::before {
    content: counter(step-counter);
    font-size: var(--font_16);
    background-color: var(--skyblue);
    color: white;
    font-weight: bold;
    border-radius: 3px;
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


/* .list_roman li::marker {
    font-size: var(--font_20);
    color: var(--blue);
    font-weight: 600;
} */

.privacy_policy .privacy_content {
    margin-bottom: 25px;
}

.privacy_policy .privacy_content:last-child {
    margin-bottom: 0;
}

.privacy_content p a {
    color: var(--dark);
    font-weight: 500;
}

.privacy_content p a:hover {
    color: var(--skyblue);
}

.privacy_content h5 {
    font-size: var(--font_20);
    color: var(--skyblue);
}


/*===================================================  terms conditions Page css end here ========================================*/


/*===================================================  download Page css start here ========================================*/

.download h2 {
    margin-bottom: 60px;
}

.ios_text h3,
.android_text h3 {
    font-size: var(--font_24);
    color: var(--blue);
    font-weight: 600;
    text-transform: uppercase;
}

.down_rat {
    margin: 40px 0;
    display: inline-block;
    width: 100%;
}

.down_rat li {
    display: inline-block;
    border-right: 1px solid #a2afb4;
    padding-right: 50px;
    margin-right: 40px;
}

.down_rat li:last-child {
    border-right: none;
    padding-right: 0px;
    margin-right: 0px;
}

.down_rat li span {
    font-size: 60px;
    color: #007ef6;
    display: block;
    line-height: 60px;
}

.down_rat li small {
    font-size: 20px;
    color: #373e45;
}

.ios_img,
.android_img {
    text-align: center;
}


/* .ios_img img,
.android_img img{
    max-height: 500px;
} */


/*===================================================  download Page css end here ========================================*/

.our_story {
    margin: 80px 0;
}

.story_content strong {
    font-size: var(--font_42);
    background: var(--light_green);
    color: var(--white);
    font-weight: 600;
    padding: 5px 25px;
    margin-bottom: 10px;
    display: inline-block;
    position: relative;
}

.story_content span {
    font-size: var(--font_36);
    display: block;
    font-weight: 500;
    color: var(--blue);
}

.story_content img,
.story_content svg {
    position: absolute;
    left: 100%;
    bottom: 100%;
}

.story_img svg {
    animation: Rocket 15s infinite;
    width: 100%;
}


/* @keyframes Rocket {
  from {
    transform: translate(20px, 20px);
    transition-timing-function: ease-in-out;
}
  to {
    transform: translate(-20px,-20px);
    transition-timing-function: ease-in-out;
}
} */

@keyframes Rocket {
    0% {
        transform: translate(30px, 30px);
    }
    60% {
        transform: translate(-20px, -20px);
    }
    100% {
        transform: translate(30px, 30px);
    }
}

.Fire {
    animation: blub 200ms infinite;
}

@keyframes blub {
    0% {
        opacity: 0.8;
    }
    30% {
        opacity: 0.9;
    }
    60% {
        opacity: 1;
    }
    80% {
        opacity: 0.9;
    }
    100% {
        opacity: 0.8;
    }
}

video {
    max-width: 100%;
}
 #partner_slider .owl-nav {
  display: none !important;
}

.sub-heading-center{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.sub-heading
{
    color: var(--blue); 
    font-size: var(--font_20);

}
.reverse-row {
    display: flex;
    flex-direction: row-reverse;
}

.main_faq #accordionExample .accordion-button,
.main_faq #salarymanagement .accordion-button,
.main_faq #leavemanagement .accordion-button,
.main_faq #shiftmanagement .accordion-button,
.main_faq #expensemanagement .accordion-button {
    font-size: var(--font_20);
    color: var(--blue);
    padding: 20px;
}

.main_faq 
#accordionExample .accordion-button:not(.collapsed),
.main_faq 
#salarymanagement .accordion-button:not(.collapsed),
.main_faq 
#leavemanagement .accordion-button:not(.collapsed),
.main_faq 
#shiftmanagement .accordion-button:not(.collapsed),
.main_faq 
#expensemanagement .accordion-button:not(.collapsed) {
    background: var(--blue);
    color: var(--white);
    box-shadow: none;
    border-radius: 20px 20px 0 0;
}

#video_slider .owl-item.active.center .video_div {
    padding: 0;
    margin: 0;
    width: 100%;
}

.uti-w{
    width: 20% !important;
}



/*----------------- this css for performance-management and employee-engagement tabs icons page 25-06-25 -----------------*/

.hrms_icon {
    position: relative;
}
.hrms_icon  img.back{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.effective_tab .nav-link.active .hrms_icon  img.back{
    opacity: 1;
}