@media (max-width:1024px) {
    br {
        display: none;
    }

    /* html {
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: scroll;
    } */

    ::-webkit-scrollbar {
        display: none;
    }

    .faq-Cta {
        margin-bottom: 2rem;
    }

    .banner-card-title h3,
    .banner-card-title .mainBanner-title {
        color: #fffafa;
        font-size: 60px;
        line-height: 100px;
        letter-spacing: 0px;
    }

    .typing-effect {
        margin: 0px 11px 0px 14px;
        min-width: 30px;
    }

    .typing-effect::before {
        transform: rotate(0deg) translateX(65px);
        top: -22px;
    }

    .typing-effect::after {
        transform: rotate(180deg) translateX(142px);
        left: 122px;
        top: 18px;
    }

    .banner-card-platform {
        width: 160px;
        height: 76px;
        gap: 13px;
    }

    .banner-card-platform img {
        width: 56px !important;
    }

    .banner-card-desc {
        max-width: 90%;
        font-size: 14px;
        line-height: 21px;
        font-weight: 400;
    }

    .mobile-frame-inner img {
        width: 170px;
    }

    img.mobile-frame-logo {
        width: 140px;
        position: absolute;
        left: 50%;
        top: 47%;
        transform: translate(-50%, -50%);
    }

    .banner-chat-bubble img {
        width: 170px;
    }

    .chat-bubble-four {
        right: 2%;
        top: 50%;
    }

    .chat-bubble-two {
        left: 2%;
        top: 58%;
    }

    .mobile-frame-overlay {
        height: 260px;
        margin-top: -6rem;
        margin-bottom: -15rem;
    }

    .type-tap-tabs-main .nav-link {
        font-size: 14px;
        width: 90%;
        white-space: normal;
        text-align: left;
    }

    .type-tap-tabs-main .nav-link {
        margin-bottom: 1.1rem;
        padding-bottom: 1.1rem;
    }

    .got-ques-header h1,
    .got-ques-header h2,
    .got-ques-header h3,
    .got-ques-header h4 {
        font-size: 30px !important;
    }

    .featired-Title {
        font-size: 30px;
    }

    .new-featured-card-title p {
        font-size: 12px;
        width: 90%;
        line-height: 22px;
    }

    .typetap-tab-pane-inner {
        width: 100%;
    }

    .slider-arrows-btn {
        width: 50px;
        height: 50px;
        font-size: 16px;
    }

    .got-ques-header p {
        font-size: 12px;
        line-height: 20px;
    }

    .industry-card p {
        font-size: 12px;
        line-height: 1.6;
    }

    .off-onboard-image-2 {
        right: 30px;
        top: 80px;
    }

    .service-Main-Card {
        margin-bottom: 1rem;
    }

    .faq-image-icon {
        display: none;
    }

    .cta-Inner-info {
        text-align: center;
        margin-bottom: 1rem;
    }

    /* featured */
    .automate-emp-calendar {
        width: 200px;
    }

    .automate-emp-night {
        width: 160px;
        top: 80px;
    }

    .automate-emp-day {
        width: 170px;
        bottom: 70px;
    }

    .multich-feature-image {
        width: 100%;
    }

    /* featured */



    /* Industry Based Solution */
    .shift-control-fetaure ul {
        padding: 40px 30px;
    }

    .shift-control-fetaure ul li span {
        font-size: 12px;
    }

    .shift-control-fetaure ul li:not(:last-child) {
        margin-bottom: 0.5rem;
    }

    .shift-control-fetaure ul li {
        gap: 10px;
    }

    .shift-control-fetaure ul li svg {
        height: 10px;
        width: auto;
    }

    .center-control-card .shift-control-head h2 {
        font-size: 25px;
        line-height: 40px;
        margin-bottom: 1.5rem;
    }

    .shift-control-head {
        padding: 45px 30px;
    }

    .shift-inner-card h3 {
        font-size: 15px;
    }

    .ess-nav-pills .nav-item {
        width: calc(95% / 4);
    }

    .essntl-tab-body .multich-feature-image {
        width: 100%;
    }

    .multich-feature-title {
        font-size: 28px;
    }

    .testi-title h5 {
        font-size: 26px;
        line-height: 40px;
        margin-bottom: 2rem;
        margin-top: 3rem;
        width: 100%;
    }

    .choose-slider-card p {
        font-size: 14px;
        line-height: 28px;
        margin-bottom: 2rem;
    }

    .faq-Cta-inner h5 {
        font-size: 16px;
        line-height: 26px;
    }

    .manage-overtime {
        left: -64px;
        bottom: 110px;
        width: 170px;
    }

    .manage-payroll-cycle {
        right: 50px;
        bottom: 25px;
        width: 160px;
    }

    .manage-shift-cycle {
        right: -40px;
        width: 150px;
        top: 90px;
    }

    .crp-team {
        width: 160px;
        right: -50px;
        top: 50px;
    }

    .crp-workday {
        left: -50px;
        width: 160px;
        bottom: 160px;
    }

    .crp-attendence {
        width: 180px;
    }

    .multich-feature-list p {
        font-size: 14px;
    }

    .eve-connect-card {
        padding: 30px;
    }

    .eve-connect-inner>svg {
        width: 40px;
        margin-bottom: 3rem;
    }

    .eve-connect-inner h3 {
        font-size: 18px;
        margin-bottom: 1rem;
    }

    .eve-connect-badge {
        padding: 12px;
        font-size: 12px;
    }

    .eve-connect-inner {
        min-height: 330px;
    }

    .chaos-card-inner {
        padding: 0rem 1rem;
    }

    .chaos-card-info h3 {
        font-size: 18px;
    }

    .chaos-icon svg {
        width: 30px;
        height: 30px;
        margin-top: 2px;
        margin-right: 5px;
    }

    .use-case-shift {
        width: 200px;
    }

    .use-case-detect {
        width: 150px;
    }

    .use-case-unplanned {

        width: 150px;
    }

    .use-case-attendence {

        width: 170px;
    }

    /* Resposive 1024px width */
}

@media (max-width:820px) {

    /* Features  */
    /* Attandence + Time tracking */
    .attend-Banner {
        width: 100%;
        margin-bottom: 2rem;
    }

    .attendence-section-main .row {
        flex-direction: column-reverse;
    }

    .sol-comp-box {
        height: 100%;
        width: 100%;
        min-height: fit-content;
    }

    .got-ques-header.inner-heading-card {
        margin-bottom: 0;
    }

    .got-ques-header p {
        font-size: 14px;
    }

    p.got-ques-desc {
        margin-bottom: 1.4rem;
        margin-top: 1rem;
    }

    .got-ques-badge {
        font-size: 10px;
        padding: 6px 12px;
        margin-bottom: 1.5rem;
    }

    .core-benfite-card {
        padding: 30px 30px;
        min-height: fit-content;
        height: 100%;
    }

    .core-benfite-card svg {
        width: 40px;
        margin-bottom: 1.2rem !important;
    }

    .multich-feature-image {
        margin-bottom: 2rem;
    }

    .footer-heading {
        width: 100%;
    }

    .footer-heading h3 {
        font-size: 23px;
        line-height: 35px;
    }

    .slack-attendence-row:last-child {
        padding-bottom: 0;
    }

    .subscribe-btn {
        position: absolute;
        right: 14px;
        top: 13px;
    }

    .subscribe-form {
        height: 50px;
    }

    .core-benefit-section .got-ques-header {
        margin-bottom: 0;
    }

    /* Attandence + Time tracking */

    .automate-emp-night {
        width: 200px;
        right: 30px;
        top: 100px;
    }

    .automate-emp-day {
        width: 220px;
        bottom: 110px;
    }

    .automate-emp-calendar {
        width: 270px;
    }

    /* Features  */
    .megaMenuAllplans {
        padding: 20px 20px;
        transform: translateX(0px);

        width: 92%;
        margin: 0 auto;
    }

    .sol-feature-Title h2 {
        font-size: 26px;
    }

    .sol-feature-Title p {
        font-size: 12px;
        line-height: 25px;
    }

    .sol-comp-data {
        padding: 15px 20px 15px;
    }

    .sol-comp-data svg {
        margin-bottom: 10px;
        width: 20px;
    }

    .sol-comp-data p {
        font-size: 14px;
        font-weight: 300;
        line-height: 25px;
    }

    .essntl-tab-body .multich-feature-image {
        width: 100%;
    }

    .testi-title h5 {
        font-size: 20px;
        font-weight: 400;
        line-height: 40px;
        margin-bottom: 1rem;
        margin-top: 0rem;
    }

    .testi-users {
        width: 35px;
        height: 35px;
    }

    .testi-title {
        margin-bottom: 4rem;
    }

    .solution-page-Banner {
        width: 65%;
        margin: -50px auto 50px;
    }

    .features-floting-card h1, 
    .features-floting-card h2, 
    .features-floting-card h3 {
        font-size: 25px;
        font-weight: 500;
        line-height: 40px;
    }

    .floting-column-label h3 {
        font-size: 18px;
        font-weight: 500;
    }

    .floting-column-label img {
        width: 72px;
        margin-top: 0.5rem;
    }

    .features-floting-card {
        padding: 30px 25px;
        position: static;
    }

    .sol-tab-Image {
        width: 130px;
    }

    .ess-nav-pills .nav-link {
        font-size: 12px;
    }

    .essntl-tab-body {
        padding: 30px 30px 30px;
    }

    .ess-nav-pills .nav-item:first-child .nav-link.active::after {
        width: 109%;
    }

    .ess-nav-pills .nav-item:last-child .nav-link.active::after {
        width: 109%;
        bottom: -43px;
        left: -14.4px;
    }

    .ess-nav-pills .nav-link:after {
        width: 117%;
    }

    .ess-nav-pills .nav-item {
        width: calc(93.27% / 4);
    }

    .client-Main-card .row .col-lg-2 {
        width: calc(100% / 5);
        margin-bottom: 0rem;
    }

    .client-card {
        height: 100px;
        padding: 0px 10px;
    }

    .mblMenuMainBox.mblMenuInnerBoxwhite {
        background-color: #071321d9;
        backdrop-filter: blur(2px);
    }

    .mblMenuMainBox.mblMenuInnerBoxwhite .mblLogo-2 {
        display: none;
    }

    .mblMenuMainBox.mblMenuInnerBoxwhite .mblLogo-1 {
        display: block;
    }

    .mblToggleBtn {
        background-color: transparent !important;
        font-size: 30px;
        padding: 0px 0px;
        color: #ffffff !important;
    }

    .mblMenuMainBox.mblMenuInnerBoxwhite .mblToggleBtn {
        background-color: transparent !important;
        color: #ffffff !important;
    }



    .manufact-image {
        height: 883px;
        margin-bottom: 2rem;
    }

    .core-benfite-card.why-hajirir {
        height: fit-content;
    }

    .center-control-card .shift-control-head h2 {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 1rem;
    }

    .shift-control-btn {
        font-size: 12px;
        padding: 10px 30px;
    }

    .center-control-card .shift-control-head {
        padding: 25px 25px;
    }

    .center-control-card .shift-control-head h2 {
        font-size: 18px;
        line-height: 30px;
        margin-bottom: 1rem;
    }

    .shift-control-btn {
        padding: 10px 30px;
    }

    .shift-control-fetaure ul {
        padding: 30px 15px;
    }

    .shift-control-fetaure ul li span {
        font-size: 12px;
        line-height: 22px;
    }

    .shift-control-fetaure ul li svg {
        height: 8px;
        width: auto;
    }

    .shift-inner-card {
        padding: 30px 15px;
    }

    .shift-inner-card h3 {
        font-size: 14px;
    }

    .shift-inner-card p {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
    }

    .crp-team {
        width: 200px;
        right: -50px;
        top: 100px;
    }

    .crp-attendence {
        width: 220px;
    }

    .crp-workday {
        left: -50px;
        width: 200px;
        bottom: 220px;
    }

    .chaos-image {
        margin: 0rem auto 3rem;
        width: 90%;
    }

    .eve-connect-inner {
        min-height: fit-content;
    }

    .connectflow-image {
        width: 100%;
        margin: 0rem auto 2rem;
    }

    .eve-connect-badge {
        padding: 12px;
        font-size: 12px;
        font-weight: 500;
        position: static;
    }

    .eve-connect-card {
        margin-bottom: 2rem !important;
    }

    .use-case-Banner {
        margin: -20px auto 50px;
        /* width: 45%; */
    }
    .cta-modal-dialog {
        max-width: 90%;
    }
    .modal-image {
    display: none;
}
.banner-form {
    width: 80%;
    padding: 30px 0px;
}
.cta-modal-dialog .btn-close {
    z-index: 10;
}
    /* Resposive 820px width */
}

@media (max-width:500px) {
    .cta-modal-dialog {
    max-width: 100%;
}
    .banner-card-badge {
        font-size: 12px;
        padding: 12px 14px;
    }

    .banner-card-title {
        flex-wrap: wrap;
    }

    .banner-card-title h3,
    .banner-card-title .mainBanner-title {
        font-size: 40px;
        line-height: 60px;
        margin-bottom: 0;
    }

    .banner-card-platform {
        width: 100px;
        height: 45px;
        gap: 10px;
        margin-bottom: 1rem;
    }

    .banner-card-platform img {
        width: 30px !important;
    }

    .typing-effect::after {
        transform: rotate(180deg) translateX(137px);
        left: 122px;
        top: 10px;
    }

    .typing-effect::before {
        transform: rotate(0deg) translateX(45px);
        top: -18px;
    }

    .banner-card-desc {
        max-width: 100%;
        font-size: 12px;
        line-height: 17px;
    }

    .banner-card-btn {
        font-size: 12px;
        padding: 6px 12px !important;
    }

    .mobile-frame {
        margin-top: 2rem;
    }

    img.mobile-frame-logo {
        width: 70px;
    }

    .faq-main-box {
        max-height: fit-content;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .service-Main-Card {
        padding: 30px 30px 0px;
        margin-bottom: 2rem;
        height: fit-content;
    }

    .service-Main-label {
        padding: 2px 20px;
        font-size: 14px;
    }

    .serviceArrow svg {
        width: 15px;
    }

    .service-Main-small.sales-tracking .desktop-Image {
        width: 100%;
        transform: translateY(0px);
        margin-top: 0;
    }

    .service-Main-large.face-enable .desktop-Image {
        width: 100%;
        transform: translate(0px, 10px);
        margin-bottom: 2rem;
    }

    .service-Main-small .desktop-Image {
        width: 80%;
        transform: translateY(0px);
        margin-top: 2rem;
    }

    .service-Main-large .desktop-Image {
        width: 100%;
        transform: translateX(0px);
        margin-top: 2rem;
    }

    .footer-heading {
        width: 100%;
    }

    .footer-heading h3 {
        font-size: 25px;
        line-height: 40px;
    }

    .nk-footer>.container>.row:nth-child(1) {
        flex-direction: column-reverse;
        align-items: center;
        gap: 15px;
    }

    .newslet-icon {
        margin-left: unset;
        margin-bottom: 0.5rem;
        width: 50%;
    }

    .slider-card-arrows {
        display: none;
    }

    .off-onboard-image-2 {
        right: 30px;
        top: 80px;
        width: 90%;
    }

    .banner-chat-bubble img {
        width: 95px;
    }

    .chat-bubble-one {
        left: -2%;
    }

    .chat-bubble-three {
        right: -2%;
        top: 15%;
    }

    .mobile-frame-overlay {
        height: 150px;
        margin-top: -3rem;
        margin-bottom: -12rem;
        filter: blur(17px);
    }

    .client-logos {
        position: relative;
        z-index: 10;
        padding: 6rem 0rem 2rem;
    }

    .workforce-attend-image-1,
    .off-onboard-image-1,
    .off-onboard-image-1 {
        width: 90%;
    }

    .workforce-attend-image-2 {
        width: 90%;
    }

    .featired-Title {
        font-size: 25px;
    }

    .type-tap-tabs-main .nav-link {
        width: 100%;
        position: absolute;
        z-index: 0;
        display: none;
        margin-bottom: 0;
        border: none !important;
    }

    .type-tap-tabs-main .nav-link.active {
        display: block;
        z-index: 1;
    }

    .type-tap-tabs-main .nav-link:after {
        height: 4px;
        width: 100%;
        top: unset;
        bottom: 0px;
        left: 0px;
        opacity: 1;
    }

    .type-tap-tabs-main .nav-link:before {
        height: 4px;
        width: 0%;
        top: unset;
        bottom: 0px;
        left: 0px;
    }

    .type-tap-tabs-main .nav-link.active:before {
        animation: activeHeight 2s linear both;
        background: var(--primary-green-color);
        opacity: 1;
    }

    @keyframes activeHeight {
        100% {
            width: 100%;
        }
    }

    .type-tap-tabs-main .nav-pills {
        margin-right: 0rem !important;
        position: relative;
    }

    .slider-border {
        display: none !important;
    }



    /* Feature */
    .attend-map {
        bottom: 20px;
        left: 20px;
        width: 140px;
    }

    .attend-slack {
        width: 140px;
        left: 20px;
        top: 53px;
    }

    .attend-whatsapp {
        width: 160px;
        right: 13px;
        top: 120px;
    }

    .multich-feature-title {
        font-size: 25px;
        margin-bottom: 1.5rem;
    }

    .multich-feature-desc {
        font-size: 14px;
    }

    .multich-feature-list p {
        font-size: 15px;
        letter-spacing: 0.2px;
        margin-bottom: 0.5rem;
    }

    .multich-feature-image {
        width: 100%;
    }

    .core-benfite-card svg {
        width: 35px;
        margin-bottom: 1rem !important;
    }

    .core-benfite-card-inner h4 {
        font-size: 16px;
    }

    .automate-emp-night {
        width: 120px;
        top: 60px;
    }

    .automate-emp-calendar {
        width: 170px;
    }

    .automate-emp-day {
        width: 120px;
        bottom: 70px;
    }

    .ai-onboard-letter {
        width: 140px;
        right: 10px;
        bottom: 10px;
    }

    .ai-onboard-paperwork {
        width: 160px;
        left: 10px;
        bottom: 40px;
    }

    .ai-onboard-flow {
        width: 180px;
        right: 10px;
        top: 50px;
    }

    .emp-db-list {
        bottom: 10px;
        left: 10px;
        width: 190px;
    }

    .emp-db-record {
        left: 10px;
        top: 56px;
        width: 150px;
    }

    .emp-db-document {
        right: 10px;
        bottom: 130px;
        width: 150px;
    }

    .cmp-option {
        width: 170px;
    }

    .cmp-auto-validate {
        top: 110px;
        left: 10px;
        width: 180px;
    }

    .cmp-ready-report {
        right: 10px;
        width: 150px;
        top: 40px;
    }

    .rpa-attendence-report {
        right: 10px;
        top: 100px;
        width: 140px;
    }

    .rpa-payrol-summary {
        left: 10px;
        width: 130px;
        top: 70px;
    }

    .rpa-summary-chart {
        bottom: 10px;
        left: 10px;
        width: 200px;
    }

    .rp-access-option {
        width: 180px;
    }

    .rp-access-control {
        right: 10px;
        top: 50px;
        width: 130px;
    }

    .rp-unlmtd-roles {
        left: 10px;
        bottom: 100px;
        width: 150px;
    }

    .multich-link {
        font-size: 12px;
        padding: 9px 18px;
    }

    .heade-badge-grey {
        padding: 3px 15px;
        font-size: 10px;
    }

    /* Feature */
    .ca-badge-whatsapp {
        right: 10px;
        top: 110px;
        width: 130px;
    }

    .ca-badge-chat-1,
    .ca-badge-chat-2 {
        left: 10px;
        width: 160px;
    }

    .ca-badge-chat-1 {
        bottom: 72px;
    }

    .ca-badge-attendence {
        left: 10px;
        top: 50px;
        width: 140px;
    }

    .ca-badge-code {
        bottom: 10px;
        left: 10px;
        width: 140px;
    }

    .ca-badge-biometric {
        right: 10px;
        bottom: 90px;
        width: 130px;
    }

    .ca-badge-atndn-api {
        left: 10px;
        top: 40px;
        width: 120px;
    }

    .solution-page-Banner {
        width: 72%;
        margin: -30px auto 60px;
    }

    .solution-employee {
        bottom: 10px;
        left: -50px;
        width: 160px;
    }

    .solution-effortless {
        bottom: 110px;
        right: -50px;
        width: 140px;
    }

    .solution-simplidied {
        top: 200px;
        right: -50px;
        width: 150px;
    }

    .sol-feature-Title h2 {
        font-size: 22px;
    }

    .sol-feature-Title p {
        font-size: 14px;
        line-height: 25px;
    }

    .sol-comp-data {
        padding: 20px 25px 20px;
    }

    .sol-comp-data p {
        font-size: 15px;
        line-height: 30px;
    }

    .sol-comp-data svg {
        margin-bottom: 10px;
        width: 24px;
    }

    .features-list-inner>.row:not(:last-child) {
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    .faq-Cta {
        margin-bottom: 1rem;
    }

    .testi-title h5 {
        font-size: 22px;
        font-weight: 400;
        line-height: 35px;
        margin-bottom: 1rem;
        margin-top: 0rem;
        width: 100%;
    }

    .testi-users-row {
        margin-bottom: 3rem;
    }

    .testi-users {
        width: 35px;
        height: 35px;
    }

    .choose-slider-card p {
        font-size: 14px;
        line-height: 25px;
        margin-bottom: 3rem;
    }

    .essntl-tab-body .multich-feature-image {
        width: 100%;
    }

    .ess-nav-pills .nav-item {
        width: fit-content;
    }

    .ess-nav-pills .nav-link:after {
        display: none;
    }

    .tab-corners::after,
    .tab-corners::before {
        display: none;
    }

    .ess-nav-pills {
        margin-bottom: 15px;
        flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
    }

    .ess-nav-pills::-webkit-scrollbar {
        display: none;
    }

    .ess-nav-pills .nav-link {
        font-size: 12px;
        padding: 15px 15px 7px;
    }

    .sol-tab-Image {
        width: 120px;
        margin-top: 3px !important;
    }

    .ess-nav-pills .nav-link.active {
        background: #0B1D32;
        border-radius: 15px;
    }

    .essntl-tab-body {
        padding: 30px 30px 30px;
    }

    .sol-comp-box {
        height: fit-content;
        margin: 15px auto 0px;
        width: 95%;
        min-height: fit-content;
    }

    .features-floting-card {
        display: none;
    }

    .features-list-inner {
        margin-top: 2rem;
    }

    .sol-feature-Title {
        margin-bottom: 1rem;
    }

    .solution-faster {
        left: -30px;
        width: 120px;
        top: 110px;
    }

    .solution-workforce {
        bottom: 30px;
        width: 170px;
        right: -50px;
    }

    .solution-bpayroll {
        width: 130px;
        bottom: 10px;
        left: -50px;
    }

    .business-shift-schedule {
        left: -40px;
        bottom: 30px;
        width: 190px;
    }

    .business-quick-shift {
        right: -30px;
        top: 100px;
        width: 140px;
    }

    .business-payroll-ready {
        bottom: 10px;
        right: -20px;
        width: 140px;
    }

    .employee-shift-details {
        right: -50px;
        bottom: 53px;
        width: 160px;
    }

    .employee-clear-leave {
        bottom: 10px;
        left: -50px;
        width: 130px;
    }

    .employee-easy-attendence {
        width: 150px;
        left: -37px;
        top: 110px;
    }

    .client-card {
        height: 50px;
        padding: 0px 15px;
    }

  

    .mobile-tab-image-card {
        display: block;
    }

    .desktop-tab-image-card {
        display: none;
    }

    .type-tap-tabs-main {
        padding-left: 0;
        position: relative;
        margin-top: 3rem;
    }

    .app-heading {
        display: none;
    }

    .app-heading-border .d-flex.align-items-center.gap-3 {
        justify-content: center !important;
        width: 100%;
        margin-bottom: -1.4rem;
    }

    .new-featured-card-title.desktop-tab-image-card {
        margin-bottom: 2rem;
    }

    .type-tap-row,
    .pay-day-row,
    .work-force-row,
    .onboard-smart-row {
        flex-direction: column-reverse !important;
    }


    .shift-control-row .col-sm-12 {
        padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
        padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
    }


    .shift-control-card {
        margin-bottom: 1rem;
    }

    .manufact-image {
        height: 490px;
        margin-bottom: 2rem;
    }

    .manage-overtime {
        left: -50px;
        bottom: 90px;
        width: 120px;
    }

    .manage-payroll-cycle {
        right: 50px;
        bottom: 25px;
        width: 120px;
    }

    .manage-shift-cycle {
        right: -40px;
        width: 130px;
        top: 60px;
    }

    .retail-store-coverage {
        width: 130px;
        bottom: 20px;
        right: -20px;
    }

    .reatil-shift-rotation {
        right: -30px;
        top: 60px;
        width: 110px;
    }

    .retail-daily-attendance-summary {
        left: -40px;
        bottom: 70px;
        width: 130px;
    }

    .shift-control-head {
        position: static;
    }

    .hsp-daily-attendance-summary {
        bottom: 0;
        right: -30px;
        top: 130px;
        width: 140px;
    }

    .hsp-peak-hour {
        bottom: 10px;
        right: 30px;
        width: 120px;
    }

    .hsp-service-cover {
        width: 140px;
        left: -30px;
        bottom: 60px;
    }

    .hc-active-shift {
        width: 130px;
        top: 70px;
        right: -40px;
    }

    .hc-on-duty {
        bottom: 5px;
        right: 30px;
        width: 120px;
    }

    .hc-live-shift {
        width: 120px;
        left: -40px;
        bottom: 80px;
    }

    .security-duty {
        width: 120px;
        left: -30px;
        top: 100px;
    }

    .security-all {
        right: -30px;
        width: 120px;
        top: 70px;
    }

    .security-guards {
        width: 120px;
        bottom: 10px;
        right: 50px;
    }

    .client-Main-card .row .col-lg-2 {
        width: calc(100% / 4);
        margin-bottom: 1.4rem;
        padding: 0;
    }

    .crp-attendence {
        width: 130px;
        right: 0px;
        bottom: 20px;
    }

    .crp-team {
        width: 120px;
        right: -30px;
        top: 60px;
    }

    .crp-workday {
        left: -30px;
        width: 130px;
        bottom: 130px;
    }

    .connectflow-body .multich-feature-list p {
        font-size: 12px;
    }

    .connectflow-body .multich-feature-list {
        margin-bottom: 0rem;
    }

    .connectflow-body .multich-feature-list p svg {
        width: 16px;
    }

    .chaos-icon svg {
        width: 25px;
        height: 25px;
        margin-right: 0px;
    }

    .chaos-card-info h3 {
        font-size: 16px;
    }

    .chaos-card-info p {
        font-size: 12px;
    }

    .chaos-card-inner>.d-flex.mb-5 {
        margin-bottom: 1rem !important;
    }

    .use-case-shift {
        width: 130px;
    }

    .use-case-detect {
        width: 100px;
    }

    .use-case-unplanned {
        width: 120px;
    }

    .use-case-attendence {
        width: 140px;
    }
    .banner-H1 {
        font-size: 14px;
        margin-bottom: 0.8rem !important;
        margin-top: 0.8rem !important;
    }
    h3.fs-20.fw-300 {
            font-size: 16px;
            line-height: 30px;
            margin-bottom: 0.5rem !important;
        }
    /* Resposive 500px width */

}


@media (max-width: 375px) {

    .banner-card-title h3,
    .banner-card-title .mainBanner-title {
        font-size: 35px;
        line-height: 55px;
    }

    .typing-effect::before {
        transform: rotate(0deg) translateX(41px);
        top: -13px;
    }

    .mobile-frame-inner img {
        width: 140px;
    }

    img.mobile-frame-logo {
        width: 70px;
    }

    .banner-card-btn {
        font-size: 10px;
        padding: 6px 12px !important;
    }

    .automate-emp-calendar {
        width: 150px;
        right: 10px;
        bottom: 10px;
    }

    .automate-emp-night {
        width: 110px;
        top: 60px;
        right: 10px;
    }

    .automate-emp-day {
        width: 120px;
        bottom: 70px;
    }

    .got-ques-header h1,
    .got-ques-header h2,
    .got-ques-header h3,
    .got-ques-header h4 {
        font-size: 24px !important;
    }

    .multich-feature-title {
        font-size: 22px;
        margin-bottom: 1.4rem;
    }

    .cmp-auto-validate {
        top: 90px;
        left: 10px;
        width: 160px;
    }

    .cmp-option {
        width: 160px;
    }

    .business-shift-schedule {
        left: -40px;
        bottom: 40px;
        width: 150px;
    }

    .business-quick-shift {
        right: -30px;
        top: 80px;
        width: 130px;
    }

    .business-payroll-ready {
        bottom: 10px;
        right: -30px;
        width: 130px;
    }

    .crp-team {
        width: 100px;
        right: -30px;
        top: 40px;
    }

    .crp-workday {
        left: -20px;
        width: 110px;
        bottom: 120px;
    }

    .crp-attendence {
        width: 120px;
        right: 0px;
        bottom: 20px;
    }
}


@media (max-width: 320px) {
    .ca-badge-code {
        bottom: 10px;
        left: 10px;
        width: 110px;
    }

    .ca-badge-atndn-api {
        left: 10px;
        top: 30px;
        width: 90px;
    }

    .ca-badge-biometric {
        right: 10px;
        bottom: 60px;
        width: 110px;
    }

    .manufact-image {
        height: 370px;
    }

    .multich-feature-list p {
        font-size: 12px;
    }

    .multich-feature-list p svg {
        width: 14px;
        margin-right: 5px;
    }

    .multich-feature-desc {
        font-size: 12px;
        line-height: 24px;
    }

    .menu-right-cta-link span {
        font-size: 10px;
    }

    .menu-right-cta-link {
        padding: 7px 14px;
    }

    .menu-right-cta-link.talk-expert {
        padding: 10px 20px;
    }

    .menu-right-cta-link svg {
        right: 16px;
        top: 18px;
        width: 14px;
    }

    .solution-page-Banner {
        width: 77%;
    }

    .faq-main-box .accordion .accordion-item .accordion-button {
        font-size: 12px;
        line-height: 22px;
    }

    .faq-expand-plus {
        right: 24px;
        top: 26px;
        font-size: 12px;
    }

    .faq-main-box .accordion .accordion-item .accordion-body {
        font-size: 12px;
        line-height: 25px;
    }

    .retail-store-coverage {
        width: 100px;
        bottom: 10px;
        right: -10px;
    }

    .reatil-shift-rotation {
        right: -20px;
        top: 50px;
        width: 90px;
    }

    .retail-daily-attendance-summary {
        left: -40px;
        bottom: 40px;
        width: 130px;
    }

    .testi-title h5 {
        font-size: 20px;
        line-height: 30px;
    }

    .testi-title p.fs-18 {
        font-size: 14px;
    }

    .hsp-daily-attendance-summary {
        bottom: 0;
        right: -30px;
        top: 100px;
        width: 110px;
    }

    .hsp-peak-hour {
        bottom: 10px;
        right: 30px;
        width: 100px;
    }

    .hsp-service-cover {
        width: 120px;
        left: -30px;
        bottom: 52px;
    }

    .hc-active-shift {
        width: 100px;
        top: 60px;
        right: -30px;
    }

    .hc-on-duty {
        bottom: 5px;
        right: 40px;
        width: 90px;
    }

    .hc-live-shift {
        width: 100px;
        left: -40px;
        bottom: 60px;
    }

    .security-duty {
        width: 90px;
        left: -20px;
        top: 70px;
    }

    .security-guards {
        width: 90px;
        bottom: 10px;
        right: 40px;
    }

    .security-all {
        right: -20px;
        width: 90px;
        top: 50px;
    }

    .client-Main-card .row .col-lg-2 {
        margin-bottom: 1rem;
    }

    .essntl-tab-body {
        padding: 20px 20px;
    }

    .footer-heading h3 {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 0;
    }

    .newslet-icon {
        margin-left: unset;
        margin-bottom: 0.3rem;
        width: 40%;
    }

    .eve-connect-inner p {
        font-size: 12px;
    }

    .chaos-card-info h3 {
        font-size: 14px;
        line-height: 25px;
    }

    .chaos-icon svg {
        width: 22px;
        height: 22px;
    }
    .use-case-Banner {
        width: 55%;
    }
    .use-case-shift {
        width: 120px;
    }
    .use-case-unplanned {
        width: 110px;
    }
    .use-case-attendence {
        width: 120px;
    }
        .eve-connect-card {
        padding: 25px;
    }
    .eve-connect-inner>svg {
        width: 35px;
        margin-bottom: 2rem;
    }
}