* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }


   @font-face {
       font-family: 'Jost';
       src: url('Jost-Regular.woff2');
       font-weight: 400;
   }

   @font-face {
       font-family: 'Jost';
       src: url('Jost-Bold.woff2');
       font-weight: 700;
   }

   :root {
       --theme-color-1: #120245;
       --theme-color-2: #785DC5;
       --heading-color: #120245;
       --footer-bg: #ffffff;
       --theme-color-1: #120245;
       --bg: #f6f6fb;
       --text: #0b0a2a;
       --font-white: #ffffff;
       --bg: #0b0b0b;
       --line: #2a2a2a;
       --text: #f2f2f2;
       --green: #36d86f;
   }

   h4, h5 {
       color: var(--heading-color);
       margin-bottom: 0;
       font-family: 'Inter', sans-serif;
       font-weight: normal;
       line-height: 1.5;
   }

   p {
       font-size: 16px;
       font-weight: 500;
       margin: 0;
   }

   body {

       background-color: var(--body-bg);
       margin: 0;
       padding: 0;
       font-size: 14px;
       line-height: 25px;
       font-family: 'Inter', sans-serif;
       font-weight: normal;
       color: var(--font-color);
       background-image: radial-gradient(circle at center, #d5d5d5 0%, #ffffff 70%);

   }

   h1, h2, h3 {
       color: var(--heading-color);
       margin-bottom: 0;
       font-weight: normal;
       line-height: 1.5;
   }

   .scrn-container {
       width: 90%;
       max-width: 1480px;
       margin: auto;
   }

   .header_area-fixed {
       top: 0;
       width: 100%;
       z-index: 999;
       transition: 0.25s ease;
       position: relative;
   }
   .hero_img-bannre img {
    width: 100%;
    object-fit: cover;
    height: auto;
}

   .header_area-fixed.is-sticky {
       background: #fff;
       border-bottom: 1px solid #eee;
       box-shadow: rgba(99, 99, 99, .2) 0 2px 8px 0;
       position: fixed;
   }

   img.social-media-review {
       width: 100%;
       max-width: 122px;
   }


   a.header_nav-brand {
       display: flex;
       align-items: center;
       gap: 3px;
       text-decoration: none;
   }

   a.header_nav-brand span {
       font-size: 25px;
       font-weight: 700;
       color: #000;
   }

   .main_header_area {
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 14px 0;
       gap: 16px;
   }

   .nav-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 12px;
   }

   .header_nav-brand img {
       max-height: 44px;
       width: auto;
       display: block;
   }

   .nav-menus-wrapper {
       display: flex;
       justify-content: center;
       gap: 144px;
   }

   .header_ul {
       list-style: none;
       display: flex;
       align-items: center;
       gap: 27px;
       margin: 0;
   }

   .header_ul a {
       text-decoration: none;
       color: #111;
       font-weight: 600;
       font-size: 18px;
       text-transform: capitalize;
   }

   .header_btn ul {
       display: flex;
       gap: 19px;
       text-align: center;
       list-style: none;
       padding: 0;
       margin: 0;
   }

   .header_btn .common-btn {
       text-decoration: none;
       padding: 10px 21px;
       background: #17315e;
       white-space: nowrap;
       font-size: 16px;
       font-family: Specter;
       font-style: normal;
       font-weight: 500;
       line-height: 27px;
       border: none;
       outline: none;
       color: #fff;
       border-radius: 2px;
       transition: all 0.3s ease-in-out;
   }
   
   .support-section {
    text-align: center;
    margin: 0 auto;
    width: 60%;
    margin-bottom: 52px;
}

.support-section h3 {
    font-size: 32px;
    font-weight: 500;
    line-height: 49px;
    color: #000;
}

   /* ====== Hamburger (Hidden on Desktop) ====== */
   .nav-toggle {
       width: 44px;
       height: 38px;
       display: none;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       border: 1px solid #ddd;
       border-radius: 10px;
       position: relative;
       background: #fff;
   } 

   .nav-toggle span,
   .nav-toggle span::before,
   .nav-toggle span::after {
       content: "";
       display: block;
       width: 22px;
       height: 2px;
       background: #111;
       position: absolute;
       transition: 0.25s ease;
   }

   .nav-toggle span::before {
       transform: translateY(-7px);
   }

   .nav-toggle span::after {
       transform: translateY(7px);
   }



   .banner-container {
       width: 100%;
       position: relative;
       display: flex;
       background: linear-gradient(135deg, #ffe8e8 10%, #d6e0d7 35%, #e8e3f8 60%, #ffffff 90%);
   }

   .hero_badge {
       position: relative;
       display: inline-flex;
       gap: 4px;
       padding: 9px 14px;
       border-radius: 9999px;
       margin-bottom: 22px;
       font-size: 15px;
   }

   .banner-wrapper {
       width: 100%;
       display: flex;
       flex-direction: column;
       height: 100%;
   }


   .banner-wrapper span {
       color: #089a1f;
   }

   .banner-wrapper form {
       width: 100%;
       margin-top: 17px;
   }

   .banner-subscribe-group {
       position: relative;
       display: inline-block;
       margin: auto;
       width: 100%;
       max-width: 599px;
   }

   .banner-input {
       filter: drop-shadow(0px 5px 10px rgba(136, 136, 136, 0.25));
       width: 100%;
       position: relative;
       display: inline-block;
       padding: 13px 133px 14px 27px;
       border-radius: 30px;
       background-color: var(--font-white);
       border: transparent;
       outline: none;
   }

   .banner-subscribe-group button {
       position: absolute;
       right: 5px;
       top: 1px;
   }

   .btn-main {
       color: #fff;
       background-color: var(--theme-color-2);
       transition: ease-in-out 0.3s;
       border: 1px solid var(--theme-color-2);
   }

   .theme-btn {
       border-radius: 30px;
       height: 48px;
       text-align: center;
       border: none;
       max-width: max-content;
       width: auto;
       padding: 10px 30px;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: 'Jost-Medium';
       font-weight: normal;
       transition: ease-in-out 0.3s;
       font-size: 14px;
   }

   .services-section {
       background: #f9f7f2;
       padding: 40px 0 63px;
   }



   .price-title {
       text-align: center;
       margin-bottom: 50px;
       margin: 40px 73px;
   }



   .app-download {
       display: flex;
       align-items: center;
       margin: 14px 0 0 0;
       gap: 13px;
       font-family: 'Sora', sans-serif;
   }

   .app-download__links {
       display: flex;
       gap: 18px;
       align-items: center;
       flex-wrap: wrap;
       font-family: 'Sora', sans-serif;
   }

   .app-download__link {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       text-decoration: none;
       border-radius: 10px;
       overflow: hidden;
       transition: transform 0.2s ease, opacity 0.2s ease;
   }

   .app-download__img {
       display: block;
       height: 50px;
       width: auto;
   }

   .app-download-inner {
       display: block;
       height: 36px;
       width: auto;
   }

   .app-download__link:hover {
       transform: translateY(-2px);
       opacity: 0.95;
   }

   .price-title p {
       max-width: 650px;
       margin: auto;
       font-size: 16px;
       font-weight: 400;
       line-height: 26px;
       font-style: normal;
   }

   .services-row {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 20px;
   }

   .services-row2 {
       grid-template-columns: repeat(3, 1fr);
   }

   .services-card {
       padding: 18px;
       background: #fff;
       border-radius: 6px;
       border: 1px solid;
       transition: 0.35s ease;
       height: 100%;
   }

   .services-col {
       height: 100%;
   }

   .services-card:hover {
       transform: translateY(-8px);
   }

   .services-icon {
       width: 55px;
       height: 55px;
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 13px;
   }

   .services-icon i {
       font-size: 26px;
   }

   .services-card h3 {
       font-size: 20px;
       font-weight: 700;
       line-height: 30px;
       margin-top: 3px;
   }




   .services-col:nth-child(1) .services-card {
       border-color: #f8b46b;
       box-shadow: 0 18px 35px rgba(248, 180, 107, 0.25);
   }

   .services-col:nth-child(1) .services-card:hover {
       box-shadow: 0 22px 45px rgba(248, 180, 107, 0.4);
   }

   .services-col:nth-child(1) .services-icon {
       background: rgba(248, 180, 107, 0.15);
   }

   .services-col:nth-child(1) i {
       color: #f8b46b;
   }

   .services-col:nth-child(2) .services-card {
       border-color: #4fa3a5;
       box-shadow: 0 18px 35px rgba(79, 163, 165, 0.25);
   }

   .services-col:nth-child(2) .services-card:hover {
       box-shadow: 0 22px 45px rgba(79, 163, 165, 0.4);
   }

   .services-col:nth-child(2) .services-icon {
       background: rgba(79, 163, 165, 0.15);
   }

   .services-col:nth-child(2) i {
       color: #4fa3a5;
   }

   .services-col:nth-child(3) .services-card {
       border-color: #6c63ff;
       box-shadow: 0 18px 35px rgba(108, 99, 255, 0.25);
   }

   .services-col:nth-child(3) .services-card:hover {
       box-shadow: 0 22px 45px rgba(108, 99, 255, 0.4);
   }

   .services-col:nth-child(3) .services-icon {
       background: rgba(108, 99, 255, 0.15);
   }

   .services-col:nth-child(3) i {
       color: #6c63ff;
   }

   .services-col:nth-child(4) .services-card {
       border-color: #ff6b6b;
       box-shadow: 0 18px 35px rgba(255, 107, 107, 0.25);
   }

   .services-col:nth-child(4) .services-card:hover {
       box-shadow: 0 22px 45px rgba(255, 107, 107, 0.4);
   }

   .services-col:nth-child(4) .services-icon {
       background: rgba(255, 107, 107, 0.15);
   }

   .services-col:nth-child(4) i {
       color: #ff6b6b;
   }

   .services-col:nth-child(5) .services-card {
       border-color: #2ecc71;
       box-shadow: 0 18px 35px rgba(46, 204, 113, 0.25);
   }

   .services-col:nth-child(5) .services-card:hover {
       box-shadow: 0 22px 45px rgba(46, 204, 113, 0.4);
   }

   .services-col:nth-child(5) .services-icon {
       background: rgba(46, 204, 113, 0.15);
   }

   .services-col:nth-child(5) i {
       color: #2ecc71;
   }

   .services-col:nth-child(6) .services-card {
       border-color: #3498db;
       box-shadow: 0 18px 35px rgba(52, 152, 219, 0.25);
   }

   .services-col:nth-child(6) .services-card:hover {
       box-shadow: 0 22px 45px rgba(52, 152, 219, 0.4);
   }

   .services-col:nth-child(6) .services-icon {
       background: rgba(52, 152, 219, 0.15);
   }

   .services-col:nth-child(6) i {
       color: #3498db;
   }

   .services-col:nth-child(7) .services-card {
       border-color: #9b59b6;
       box-shadow: 0 18px 35px rgba(155, 89, 182, 0.25);
   }

   .services-col:nth-child(7) .services-card:hover {
       box-shadow: 0 22px 45px rgba(155, 89, 182, 0.4);
   }

   .services-col:nth-child(7) .services-icon {
       background: rgba(155, 89, 182, 0.15);
   }

   .services-col:nth-child(7) i {
       color: #9b59b6;
   }

   .services-col:nth-child(8) .services-card {
       border-color: #e67e22;
       box-shadow: 0 18px 35px rgba(230, 126, 34, 0.25);
   }

   .services-col:nth-child(8) .services-card:hover {
       box-shadow: 0 22px 45px rgba(230, 126, 34, 0.4);
   }

   .services-col:nth-child(8) .services-icon {
       background: rgba(230, 126, 34, 0.15);
   }

   .services-col:nth-child(8) i {
       color: #e67e22;
   }

   section.key-features_section {
       width: 100%;
       position: relative;
       padding: 4rem 0;
   }

   .analytics-content-wrapper {
       width: 100%;
       position: relative;
       display: inline-block;
       padding: 2rem 0;
   }

   .section-heading-wrapper {
       width: 100%;
   }

   .section-heading-wrapper span {
       height: 35px;
       display: flex;
       align-items: center;
       justify-content: center;
       max-width: max-content;
       font-weight: 500;
   }




   .analytics-content-info-card {
       width: 100%;
       position: relative;
       display: inline-block;
   }

   ul.aci-info-pointsList {
       padding: 0;
       margin: 0;
       display: flex;
       flex-direction: column;
       column-count: 2;
       padding-top: 20px !important;
   }

   .aci-info-pointsList li {
       float: left;
       display: flex;
       align-items: center;
       margin-bottom: 20px;
   }



   .analytics-image-wrapper {
       width: 100%;
       height: 100%;
       position: relative;
       display: inline-block;
   }

   .analytics-image-wrapper img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: 30px;
       margin: 0 auto;
       display: block;
   }

   .statutory_section {
       background-color: #f9f7f2;
   }

   .analytics-content-box {
       width: 80%;
       margin: 0 auto;
       text-align: center;
       display: block;
   }

   .section-heading-analytics {
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
   }

   .faq-section {
       padding: 80px 0;
       position: relative;
       background: radial-gradient(900px 400px at 10% 0%, rgba(52, 211, 153, 0.12), transparent 70%),
           radial-gradient(900px 420px at 90% 10%, rgba(99, 102, 241, 0.1), transparent 70%),
           linear-gradient(180deg, #f8fafc 0%, #eef4f8 100%);
   }

   .faq-section h2 {
       text-align: center;
       margin-bottom: 48px;
       font-weight: 700;
       color: #0f172a;
   }

   .faq-grid {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 28px;
   }

   .faq-column {
       display: flex;
       flex-direction: column;
       gap: 17px;
   }

   .faq-item {
       background: #ffffff;
       overflow: hidden;
       border-radius: 14px;
       border: 1px solid rgba(15, 23, 42, 0.08);
       box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
   }

   .faq-column .faq-item:last-child {
       border-bottom: none;
   }

   .faq-question {
       padding: 18px 20px;
       cursor: pointer;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-size: 18px;
       font-weight: 700;
       color: #0f172a;
       line-height: 24px;
   }

   .faq-question span {
       width: 32px;
       height: 32px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       border-radius: 999px;
       background: rgba(99, 102, 241, 0.14);
       color: #4338ca;
       font-size: 20px;
       transition: transform 0.3s ease;
   }

   .faq-answer {
       max-height: 0;
       overflow: hidden;
       padding: 0 20px;
       transition: all 0.4s ease;

   }

   .faq-answer p {
       margin: 0;
       font-weight: 500;
       line-height: 26px;
       padding: 0 19px;
       color: #475569;
   }

   .faq-item.active .faq-answer {
       max-height: 200px;
       padding: 0 0 8px;
   }

   .faq-item.active .faq-question span {
       transform: rotate(45deg);
   }


   .testimonial-section {
       padding: 60px 0 40px 0;
       position: relative;
       background-color: #fff;
   }

   .testimonial-header {
       text-align: center;
       margin-bottom: 40px;
   }

   .testimonial-header h2 {
       font-size: 2rem;
       text-align: center;
       margin-bottom: 14px;
       font-weight: 700;
   }

   .testimonial-header p {
       max-width: 800px;
       margin: 0 auto;
       font-size: 16px;
       font-weight: 400;
       line-height: 28px;
   }

   .swiper {
       padding: 40px 0;
   }

   .swiper-slide {
       display: flex;
       justify-content: center;
   }

   .testimonial-card {
       background: #f9f7f2;
       border-radius: 13px;
       padding: 25px 42px;
       max-width: 900px;
       width: 100%;
       height: 100%;
       margin: 10px auto;
       box-shadow: rgb(6 24 44 / 12%) 0px 0px 0px 1px, rgb(6 24 44 / 10%) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
   }

   .testimonial-text {
       font-weight: 500;
       margin-bottom: 18px;
       font-size: 17px;
       line-height: 32px;
   }


   .author {
       display: flex;
       align-items: center;
       gap: 16px;
   }

   .author img {
       width: 58px;
       height: 58px;
       border-radius: 50%;
       object-fit: cover;
   }

   .author h4 {
       font-size: 18px;
       color: #6a1d0c;
       margin-bottom: 4px;
   }

   .author p {
       font-size: 14px;
       color: #8b6b5b;
   }


   .hero_banner-img {
       position: relative;
       width: 100%;
       height: clamp(260px, 40vw, 420px);
       overflow: hidden;
       border-radius: 0;
       background: #0b132b;
   }

   .hero_banner-img img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       filter: saturate(1.05) contrast(1.05);
   }

   .hero_banner-img::after {
       content: "";
       position: absolute;
       inset: 0;
       background: radial-gradient(900px 360px at 10% 10%, rgba(59, 130, 246, 0.2), transparent 70%),
           radial-gradient(800px 320px at 90% 10%, rgba(34, 197, 94, 0.18), transparent 70%),
           linear-gradient(180deg, rgba(15, 23, 42, 0.65), rgba(15, 23, 42, 0.45));
   }

   /* text overlay */
   .hero_content-banner {
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       padding: 20px;
       z-index: 1;
   }

   .hero_content-banner h1 {
       margin: 0;
       color: #fff;
       text-transform: capitalize;
       font-size: clamp(2rem, 4vw, 3rem);
       font-family: 'Nunito Sans', sans-serif;
       font-weight: 700;
       position: relative;
       line-height: 1.15;
       letter-spacing: 0.01em;
       text-shadow: 0 12px 30px rgba(15, 23, 42, 0.4);
       padding: 12px 20px;
       border-radius: 16px;
       background: rgba(15, 23, 42, 0.28);
       border: 1px solid rgba(255, 255, 255, 0.2);
       backdrop-filter: blur(2px);
   }

   section.about_banner {
       background: linear-gradient(90deg, rgba(24, 56, 102, 1) 55%, rgba(162, 174, 194, 1) 88%, rgba(245, 247, 250, 1) 100%);
       padding: 50px 0;
   }

   .about_container h1 {
       font-size: 46px;
       font-family: Nunito Sans;
       font-weight: 700;
       color: #fff;
       margin-bottom: 21px;
   }

   .mi-text-warning {
       color: #4CAF50;
   }



   .founded_heaidng h3 {
       font-size: 40px;
       font-family: Nunito Sans;
       font-weight: 700;
       position: relative;
       line-height: 1.4;
       width: 70%;
       text-align: center;
       margin: 0 auto;
       margin-bottom: 44px;
   }

   .principles-grid {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 56px;
       align-items: start;
   }


   .about-unirr {
       background: #ffffff;
       padding: 72px 0;
       text-align: center;
   }

   .about-setion-heading {
       width: 80%;
       margin: 0 auto;
   }

   .about-setion-heading h2 {
       font-size: 42px;
       font-weight: 700;
       position: relative;
       line-height: 1.4;
   }

   /*.about-unirr p {*/
   /*    font-size: 20px;*/
   /*    line-height: 1.8;*/
   /*    color: #374151;*/
   /*    margin: 0;*/
   /*}*/

   .intro {
       font-weight: 500;
   }




   /* UNIRR - Terms & Conditions */
   .privary-content-box ul {
       display: flex;
       flex-direction: column;
       gap: 8px;
   }

   .privary-content-box h3 {
       font-size: 25px;
       font-weight: 600;
       line-height: 31px;
       font-family: Nunito Sans;
   }

   .privary-content-box li strong {
       font-size: 20px;
       font-weight: 600;
       line-height: 32px;
       font-family: Nunito Sans;
   }

   h3.heading-policy-inner {
       font-size: 24px;
       font-weight: 600;
       line-height: 34px;
       margin-bottom: 12px;
   }

   .hero_row_inner {
       display: grid;
       grid-template-columns: 2fr 1fr;
       align-items: flex-start;
       gap: 40px;
   }



   .hero_row_inner p {
       font-size: 18px;
       line-height: 29px;
       font-family: Nunito Sans;
       font-weight: 500;
       max-width: 700px;
   }

   .attendance_img-inner img {
       width: 100% !important;
   }

   .attendance_img img {
       display: inline-block;
       width: 400px;
       height: 400px;
       background-size: 400px;
       border-radius: 40px;
       object-fit: cover;
   }

   .list-item_feature h4 {
       font-size: 18px;
       margin: 10px 10px;
       color: #0f172a;
       font-weight: 700;
       display: flex;
       align-items: center;
       gap: 13px;
   }




   .payroll_image-wrapper img {
       object-fit: cover;
       border-radius: 27px;
       display: block;
       width: 100%;
       max-width: 488px;
       margin: 0 auto;
   }

   .hero_img-abnner img {
       width: 100%;
       height: auto;
       object-fit: cover;
           max-width: 478px
   }

   .mi-btn-warning {
       background: linear-gradient(135deg, #ff9800, #ff5722);
       color: #ffffff !IMPORTANT;
       border: none !important;
       padding: 9px 22px !important;
       font-size: 16px !important;
       font-weight: 600 !IMPORTANT;
       box-shadow: 0 6px 15px rgba(255, 87, 34, 0.35);
   }

   /*.mi-btn-warning:hover {*/
   /*    background: linear-gradient(135deg, #ff5722, #ff9800);*/
   /*    transform: translateY(-2px);*/
   /*    box-shadow: 0 10px 25px rgba(255, 87, 34, 0.5);*/
   /*    color: #ffffff;*/
   /*}*/

   /*.mi-btn-warning:focus,*/
   /*.mi-btn-warning:active {*/
   /*    outline: none;*/
   /*    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.4);*/
   /*}*/

   .footer {
       font-size: 14px;
       background: radial-gradient(900px 360px at 10% 0%, rgba(59, 130, 246, 0.18), transparent 70%),
           radial-gradient(800px 320px at 90% 0%, rgba(16, 185, 129, 0.18), transparent 70%),
           linear-gradient(135deg, #0b132b 0%, #0b2f4f 100%) !important;
       color: #e5e7eb;
       position: relative;
       overflow: hidden;
   }

   .footer::before,
   .footer::after {
       content: "";
       position: absolute;
       width: 280px;
       height: 280px;
       border-radius: 999px;
       opacity: 0.2;
       filter: blur(0);
       pointer-events: none;
   }

   .footer::before {
       left: -120px;
       bottom: -140px;
       background: radial-gradient(circle, rgba(255, 122, 26, 0.5), transparent 70%);
   }

   .footer::after {
       right: -140px;
       top: -120px;
       background: radial-gradient(circle, rgba(99, 102, 241, 0.5), transparent 70%);
   }

   .footer-color {
       padding: 70px 0 40px;
       position: relative;
       z-index: 1;
   }

   .footer_img img {
       max-width: 100%;
       margin-bottom: 15px;
       max-width: 48px;
   }

   .footer_img span {
       font-size: 28px;
       font-weight: 700;
       font-family: 'Nunito Sans', sans-serif;
       line-height: 20px;
       color: #ffffff;
   }

   .f-pad-logo-row p {
       color: rgba(226, 232, 240, 0.85);
       line-height: 28px;
       font-size: 15px;
       margin-top: 12px;
   }

   .social-list {
       display: flex;
       gap: 12px;
       padding: 0;
       margin-top: 18px;
       list-style: none;
   }

   .social-list li a {
       width: 40px;
       height: 40px;
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.18);
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       color: #ffffff;
       transition: .3s;
       font-size: 18px;
       text-decoration: none;
   }

   .social-list li a:hover {
       background: #22c55e;
       border-color: #22c55e;
       color: #ffffff;
       transform: translateY(-2px);
   }

   .f-title {
       font-size: 20px;
       font-weight: 700;
       margin-bottom: 16px;
       color: #ffffff;
       letter-spacing: 0.01em;
   }

   .footer-right {
       position: fixed;
       /* bottom-right corner */
       right: 20px;
       bottom: 60px;
       display: flex;
       flex-direction: column;
       gap: 12px;
       z-index: 9999;
   }

   .icon-whatsapp {
       display: flex;
       align-items: center;
       justify-content: center;
       text-decoration: none;
   }


   .icon-whatsapp img {
       width: 100%;
       max-width: 45px;
   }



   .contact-item {
       display: flex;
       align-items: baseline;
       margin-bottom: 12px;
       width: 100%;
       font-size: 15px;
       font-weight: 500;
       text-decoration: none;
       flex-wrap: wrap;
       color: rgba(226, 232, 240, 0.9);
   }

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

   .contact-item i {
       margin-right: 8px;
       font-size: 18px;
   }

   .label {
       font-weight: 600;
       margin-right: 6px;
       color: #ffffff;
   }

   .contact-box a {
       color: rgba(226, 232, 240, 0.95);
       text-decoration: none;
       padding-top: 8px;
   }

   .contact-box a:hover {
       text-decoration: underline;
   }


   .menu-footer-solutions {
       display: flex;
       flex-direction: column;
       gap: 6px;
       padding: 0;
   }

   .widget.widget_nav_menu {
       display: flex;
       flex-direction: column;
       gap: 23px;
   }

   .menu-footer-solutions li {
       margin-bottom: 8px;
       display: flex;
       width: 100%;
   }

   .menu-footer-solutions li a {
       color: rgba(226, 232, 240, 0.85);
       transition: .3s;
       width: 100%;
       font-size: 15px;
       font-weight: 500;
       text-decoration: none;
   }

   .menu-footer-solutions li a:hover {
       color: #22c55e;
       padding-left: 6px;
   }

   .footer_list_row {
       row-gap: 30px;
   }

   .copy-right-section {
       background-color: rgba(9, 16, 37, 0.95);
       padding: 18px 0;
       border-top: 1px solid rgba(148, 163, 184, 0.2);
       text-align: center;
   }

   .copyright-container a {
       color: rgba(226, 232, 240, 0.9) !important;
       font-size: 15px;
       font-weight: 500;
       transition: color 0.3s ease;
       text-decoration: none;
   }



   .copyright-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: 16px;
       flex-wrap: wrap;
   }


   .copyright-links {
       display: flex;
   }

   .copyright-ul {
       list-style: none;
       display: flex;
       gap: 20px;
       padding: 0;
       margin: 0;
   }



   .copyright-li a:hover {
       color: #22c55e;
   }

   /* ✅ RESPONSIVE */


   .copyright-container a:hover {
       color: #22c55e;
   }

   .pricing-card_inner_box {
       width: 80%;
       margin: 0 auto;
   }

   .pricing-card_inner_box h2 {
       font-size: 36px;
       margin-bottom: 9px;
   }

   .pricing-card {
       position: relative;
       overflow: hidden;
       background: radial-gradient(900px 420px at 10% 0%, rgba(99, 102, 241, 0.1), transparent 70%),
           radial-gradient(900px 420px at 90% 0%, rgba(34, 197, 94, 0.1), transparent 70%),
           linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
       padding: 80px 0;
       text-align: center;
   }

   .pricing-card::after {
       content: "";
       position: absolute;
       left: 0;
       right: 0;
       bottom: -2px;
       height: 3px;
       background: linear-gradient(90deg, transparent, var(--green), transparent);
   }

   .table-box {
       margin: 46px 26px 26px;
       border: 1px solid rgba(148, 163, 184, 0.25);
       border-radius: 20px;
       overflow: hidden;
       background: #ffffff;
       box-shadow: 0 24px 50px rgba(15, 23, 42, 0.1);
   }

   .table-box .pricing_row:nth-child(even) {
       background: rgba(34, 197, 94, 0.04);
   }

   .pricing_row {
       display: grid;
       grid-template-columns: 1fr 160px;
       align-items: center;
       min-height: 72px;
       border-bottom: 1px solid rgba(148, 163, 184, 0.2);
       background: #ffffff;
       transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
   }

   .pricing_row:last-child {
       border-bottom: none;
   }

   .pricing_row:hover {
       background: rgba(34, 197, 94, 0.08);
       transform: translateY(-1px);
   }

   .pricing_col {
       padding: 18px 22px;
       display: flex;
       align-items: center;
       gap: 14px;
       font-size: 16px;
       font-weight: 600;
       color: #0f172a;
       transition: color .3s ease;
   }

   .pricing_right {
       display: flex;
       justify-content: center;
       align-items: center;
       border-left: 1px solid rgba(148, 163, 184, 0.2);
       height: 100%;
   }

   .feature-icon {
       width: 40px;
       height: 40px;
       border-radius: 12px;
       background: rgba(34, 197, 94, 0.16);
       display: grid;
       place-items: center;
       font-size: 18px;
       color: #0f172a;
       transition: all .3s ease;
       box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.25);
   }

   .pricing_row:hover .feature-icon {
       background: rgba(34, 197, 94, 0.25);
       color: var(--green);
       transform: scale(1.08);
   }

   .check {
       width: 34px;
       height: 34px;
       border-radius: 50%;
       background: rgba(34, 197, 94, 0.14);
       display: flex;
       border: 1px solid rgba(34, 197, 94, 0.5);
       transition: all .3s ease;
       justify-content: center;
       align-items: center;
   }

   .check i {
       color: var(--green);
       font-size: 16px;
   }

   .pricing_row:hover .check {
       background: var(--green);
       box-shadow: 0 12px 26px rgba(34, 197, 94, .5);
       transform: scale(1.15);
   }

   .pricing_row:hover .check i {
       color: #0b0b0b;
   }

   .custom-pricing-card {
       background: #dff5ec;
       border-radius: 14px;
       padding: 0 30px 0 30px;
       margin: 40px 0;
   }

   .enterprise-cta-title {
       font-size: 43px;
       color: #1f2d3d;
       margin-bottom: 54px;
       line-height: 1.3;
       font-weight: 800;
   }

   .cp-btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       height: 49px;
       padding: 0 19px;
       border-radius: 12px;
       text-decoration: none;
       font-weight: 700;
       font-size: 18px;
       border: 0;
       cursor: pointer;
       transition: transform .15s ease, opacity .15s ease;
   }

   .cp-girl {
       max-width: 100%;
       height: auto;
       margin-top: -25px;
   }

   .mi-btn-primary {
       width: max-content;
       background: #17355E;
       color: #fff;
   }

   .cp-or {
       font-weight: 800;
       color: #1E2A3A;
       opacity: .8;
   }

   .enterprise-cta-btn-whatsapp {
       background: #25D366 !important;
       color: #fff;
   }

   section.mission_inner_section {
       padding: 60px 0;
       position: relative;
   }

   .mission-grid {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
       gap: 24px;
       align-items: start;
   }




   .space-extra {
       padding: 80px 0;
       background-color: #17315e;
   }



   .space-extra_row {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 24px;
   }

   .bg-peach-bg.rounded-4.p-4.p-md-5.gx-5 {
       background-color: #ffffff;
   }

   .counter-card {
       display: flex;
       align-items: center;
       gap: 30px;
       flex-direction: column;
       cursor: pointer;
   }



   .counter-card_icon:before, .counter-card_icon:after {
       content: '';
       height: 100%;
       width: 100%;
       position: absolute;
       top: 0;
       left: 0;
       background-color: #080e1c;
       -webkit-clip-path: path("M13.3648 23.689C12.3113 18.0885 13.5019 11.7494 18.6938 9.40012C35.1267 1.96429 68.7714 -9.44147 82.3112 14.0815C100.548 45.7649 138.846 59.5402 82.3112 87.5508C66.122 95.5719 56.2138 98.9992 50.3168 99.8059C42.2525 100.909 34.515 87.5508 26.3756 87.5508H13.8433C10.9933 87.5508 8.2154 86.3499 6.50037 84.0737C-12.7867 58.4757 17.3824 45.0461 13.3648 23.689Z");
       clip-path: path("M13.3648 23.689C12.3113 18.0885 13.5019 11.7494 18.6938 9.40012C35.1267 1.96429 68.7714 -9.44147 82.3112 14.0815C100.548 45.7649 138.846 59.5402 82.3112 87.5508C66.122 95.5719 56.2138 98.9992 50.3168 99.8059C42.2525 100.909 34.515 87.5508 26.3756 87.5508H13.8433C10.9933 87.5508 8.2154 86.3499 6.50037 84.0737C-12.7867 58.4757 17.3824 45.0461 13.3648 23.689Z");
       z-index: -2;
   }

   .counter-card_icon:after {
       background-color: #fff;
       top: 2px;
       left: 10px;
       z-index: -1;
   }

   .counter-card_icon i {
       transition: 0.4s ease-in-out;
       font-size: 43px;
       color: #4fa3a5;
   }

   .space-extra_col1 .counter-card_icon i {
       color: #ff5722;
   }

   .space-extra_col2 .counter-card_icon i {
       color: #ffc107;
   }

   .space-extra_col3 .counter-card_icon i {
       color: #4caf50;
   }

   .space-extra_col4 .counter-card_icon i {
       color: #2196f3;
   }

   .counter-card:hover .counter-card_icon i {
       transform: rotateY(180deg)
   }


   .counter-card:hover .i {
       transform: rotateY(180deg)
   }

   .counter-card_number {
       font-size: 40px;
       color: #fff;
       font-weight: 900;
       margin-bottom: 8px;
       margin-top: -0.3em;
   }

   .counter-card_text {
       font-weight: 500;
       color: #fff;
       display: block;
       margin-bottom: -0.5em;
   }

   .services-card p a {
       text-decoration: none;
       color: #007bff !important;
       font-size: 20px;
   }




   @media (max-width: 1299px) {
       .counter-card_number {
           margin-bottom: 4px;
       }
   }

   @media (max-width: 991px) {
       .space-extra_row {
           grid-template-columns: repeat(2, 1fr);
           gap: 67px 0px;
       }
       .support-section{
           width: 90%;
       }
   }


   @media (max-width:1200px) {
       .services-row {
           grid-template-columns: repeat(3, 1fr);
       }
   }

   @media (max-width: 1100px) {
       .nav-menus-wrapper {
           gap: 76px;
       }
   }

   @media (max-width: 991px) {

       .main_header_area {
           display: block;
       }

       .nav-toggle {
           display: flex;
           z-index: 999;
       }

       .nav-menus-wrapper {
           position: fixed;
           top: 0;
           left: -100%;
           width: 280px;
           height: 100vh;
           background: #fff;
           padding: 80px 20px 20px;
           transition: right 0.3s ease;
           box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
           z-index: 998;
           display: block;
           justify-content: flex-start;
       }

       .nav-menus-wrapper.active {
           left: 0;
       }

       .header_ul {
           flex-direction: column;
           align-items: flex-start;
           gap: 14px;
           width: 100%;
           padding: 0;
       }

       .header_ul li {
           width: 100%;
       }

       .header_ul a {
           width: 100%;
           padding: 10px 0;
           display: block;
           border-bottom: 1px solid #eee;
       }

       .header_btn {
           margin-top: 60px;
       }

       .nav-toggle.active span {
           background: transparent;
       }

       .nav-toggle.active span::before {
           transform: rotate(45deg);
       }

       .nav-toggle.active span::after {
           transform: rotate(-45deg);
       }

       .services-row {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   @media (max-width: 768px) {
       .hero_row_inner {
           grid-template-columns: 1fr;
           /*text-align: center;*/
       }
       .services-section {
    padding: 30px 0 90px;
}
       .support-section{
           width: 100%;
           text-align: start;
       }
       .about-unirr{
           text-align: start;
           padding: 50px 0;
       }
       .about-setion-heading h2 {
    font-size: 33px;
    margin-bottom: 13px;
           
       }
.founded_heaidng h3{
    width: 100%;
    font-size: 32px;
    text-align: start;
}
       .hero_img-abnner {
           display: none;
       }

       .section-heading-analytics {
           justify-content: flex-start;
           align-items: self-start;
       }
       .bulletpoint{
           display: none;
       }
       .list-item_feature h4 {
    font-size: 17px;
    margin: 10px 0;}

       .hero_row_inner h1 {
           font-size: 32px;
       }

.about-setion-heading{
    width: 100%;
}
       .analytics-content-box {
           width: 100%;
           text-align: start;
       }


       .testimonial-card {
           padding: 35px 28px;
       }

       .testimonial-text {
           font-size: 16px;
       }

       .faq-grid {
           grid-template-columns: 1fr;
           gap: 10px;
       }

       .price-title {
           width: 100%;
           margin: 40px 0;
           text-align: start;
       }
       .pricing-card_inner_box{
           width: 100%;
           text-align: start;
       }
       .custom-pricing-card {
    padding: 24px;
           
       }
       .pricing-card_inner_box h2 {
    font-size: 32px;
           
       }
       .header_btn .common-btn {
    padding: 8px 14px;
    font-size: 13px;
}
       .table-box {
    margin: 46px 0px 26px;
   }
   .enterprise-cta-title {
    font-size: 31px;
    font-weight: 600;
       margin-bottom: 10px;
   }
   .enterprise-cta-actions {
       display: flex;
       gap: 10px;
   }
   .cp-girl {
    position: relative;
    top: 23px;
}

.pricing-card {
    position: relative;
    padding: 50px 0;
    
}

}

   @media(max-width:640px) {
       .header {
           font-size: 26px;
       }

       .pricing_row {
           grid-template-columns: 1fr 80px;
       }

       .pricing_col {
           font-size: 14px;
       }

       .mission-grid {
           display: grid;
           grid-template-columns: repeat(1, minmax(0, 1fr));
       }
   }

   @media (max-width:576px) {
       .services-row {
           grid-template-columns: 1fr;
       }
   }


   @media (max-width: 480px) {
       .app-download__img {
           height: 40px;
       }

       .app-download__links {
           gap: 10px;
       }
   }

   /* ===================== Redesign Overrides ===================== */
   :root {
       --theme-color-1: #0b132b;
       --theme-color-2: #2ec4b6;
       --heading-color: #0b132b;
       --footer-bg: #ffffff;
       --body-bg: #f4f7fb;
       --font-color: #1f2937;
       --bg: #f4f7fb;
       --text: #1f2937;
       --font-white: #ffffff;
       --line: #e4eaf2;
       --green: #2ec4b6;
       --accent-warm: #ff9f1c;
       --surface: #ffffff;
       --surface-2: #eef3f8;
       --shadow-soft: 0 12px 35px rgba(11, 19, 43, 0.12);
       --shadow-tight: 0 6px 16px rgba(11, 19, 43, 0.12);
   }

   body {
       font-family: 'Nunito Sans', sans-serif;
       color: var(--font-color);
       background-color: var(--body-bg);
       background-image: radial-gradient(1200px 800px at 10% -10%, rgba(46, 196, 182, 0.18), transparent 60%),
           radial-gradient(900px 600px at 90% 0%, rgba(255, 159, 28, 0.18), transparent 55%),
           linear-gradient(180deg, #f8fbff 0%, #f4f7fb 45%, #eef2f7 100%);
   }

   p {
       color: #2b3445;
       font-family: 'Nunito Sans', sans-serif;
       line-height: 30px;
   }

   h1, h2, h3, h4, h5 {
       font-family: 'Nunito Sans', sans-serif;
       font-weight: 600;
       letter-spacing: -0.02em;
   }

   .header_area-fixed {
       background: rgba(248, 251, 255, 0.8);
       backdrop-filter: blur(10px);
   }

   .header_area-fixed.is-sticky {
       background: rgba(255, 255, 255, 0.95);
       border-bottom: 1px solid var(--line);
       box-shadow: var(--shadow-tight);
   }

   a.header_nav-brand span {
       color: var(--theme-color-1);
       font-weight: 700;
       letter-spacing: 0.02em;
   }

   .header_ul a {
       color: var(--theme-color-1);
       font-weight: 600;
       position: relative;
   }

   .header_ul a::after {
       content: "";
       position: absolute;
       left: 0;
       bottom: -6px;
       height: 2px;
       width: 0;
       background: linear-gradient(90deg, var(--theme-color-2), var(--accent-warm));
       transition: width 0.25s ease;
   }

   .header_ul a:hover::after,
   .header_ul a:focus::after {
       width: 100%;
   }

   .header_btn .common-btn {
       border-radius: 999px;
       background: linear-gradient(135deg, var(--theme-color-1), #1f3a6b);
       box-shadow: 0 10px 20px rgba(11, 19, 43, 0.18);
       font-family: 'Nunito Sans', sans-serif;
       font-weight: 600;
       letter-spacing: 0.01em;
   }

   .header_btn .common-btn:hover {
       transform: translateY(-1px);
       box-shadow: 0 14px 24px rgba(11, 19, 43, 0.2);
   }

   .theme-btn {
       border-radius: 999px;
       height: 52px;
       font-family: 'Nunito Sans', sans-serif;
       font-weight: 600;
       letter-spacing: 0.01em;
   }

   .btn-main {
       background: linear-gradient(135deg, var(--theme-color-2), #2a9d8f);
       border-color: transparent;
   }

   .banner-container {
       background: linear-gradient(135deg, #ffffff 0%, #f5f8ff 40%, #eef5f4 100%);
       overflow: hidden;
   }

   .banner-container::before,
   .banner-container::after {
       content: "";
       position: absolute;
       border-radius: 999px;
       filter: blur(0);
       opacity: 0.7;
       z-index: 0;
   }

   .banner-container::before {
       width: 320px;
       height: 320px;
       left: -120px;
       top: 40px;
       background: radial-gradient(circle, rgba(46, 196, 182, 0.4), transparent 70%);
   }

   .banner-container::after {
       width: 380px;
       height: 380px;
       right: -140px;
       top: -40px;
       background: radial-gradient(circle, rgba(255, 159, 28, 0.35), transparent 70%);
   }

   .banner-wrapper {
       position: relative;
       z-index: 1;
   }

   .hero_badge {
       border: 1px solid rgba(11, 19, 43, 0.12);
       font-family: 'Nunito Sans', sans-serif;
       background: rgba(46, 196, 182, 0.18);
       font-weight: 600;
       letter-spacing: 0.01em;
       box-shadow: 0 8px 22px rgba(11, 19, 43, 0.08);
       width: max-content;
   }

   .banner-wrapper h1 {
       font-weight: 700;
       color: var(--theme-color-1);
   }

   .banner-wrapper span {}

   .banner-input {
       border: 1px solid rgba(11, 19, 43, 0.1);
       box-shadow: var(--shadow-soft);
       padding: 16px 140px 16px 24px;
       font-family: 'Nunito Sans', sans-serif;
   }

   .banner-input:focus {
       outline: none;
       border-color: rgba(46, 196, 182, 0.6);
       box-shadow: 0 0 0 4px rgba(46, 196, 182, 0.15);
   }

   .services-section {
       background: linear-gradient(180deg, #f8fbff 0%, #f1f4f9 100%);
       padding: 70px 0 90px;
   }

   .hr-tabs-section {
       padding: 90px 0;
       background: radial-gradient(900px 420px at 10% 0%, rgba(99, 102, 241, 0.08), transparent 70%),
           radial-gradient(900px 420px at 90% 0%, rgba(34, 197, 94, 0.08), transparent 70%),
           linear-gradient(180deg, #ffffff 0%, #f4f6fb 100%);
       position: relative;
       overflow: hidden;
   }

   .hr-tabs-section::before,
   .hr-tabs-section::after {
       content: "";
       position: absolute;
       width: 380px;
       height: 380px;
       border-radius: 999px;
       opacity: 0.25;
       pointer-events: none;
   }

   .hr-tabs-section::before {
       left: -160px;
       top: -160px;
       background: radial-gradient(circle, rgba(255, 122, 26, 0.35), transparent 70%);
   }

   .hr-tabs-section::after {
       right: -180px;
       bottom: -180px;
       background: radial-gradient(circle, rgba(56, 189, 248, 0.35), transparent 70%);
   }

   .hr-tabs-header {
       text-align: center;
       margin: 0 auto 50px;
       max-width: 760px;
   }

   .hr-tabs-header h2 {
       font-family: 'Nunito Sans', sans-serif;
       font-size: clamp(1.8rem, 3vw, 2.6rem);
       font-weight: 700;
       color: #0f172a;
       margin-bottom: 10px;
   }

   .hr-tabs-header p {
       color: #475569;
       font-size: 16px;
       line-height: 28px;
   }

   .hr-tabs-list {
       display: flex;
       flex-direction: column;
       gap: 18px;
   }

   .hr-tab-item {
       border: 1px solid rgba(148, 163, 184, 0.35);
       background: #f7f6ff;
       border-radius: 16px;
       padding: 18px 20px;
       display: flex;
       align-items: start;
       gap: 16px;
       text-align: left;
       transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
       box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
       position: relative;
       overflow: hidden;
   }

   .hr-tab-item::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: 16px;
       border: 1px solid transparent;
       pointer-events: none;
   }

   .hr-tab-item:hover {
       transform: translateY(-4px);
       border-color: rgba(99, 102, 241, 0.4);
       box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
   }

   .hr-tab-item.is-active {
       background: #ffffff;
       border-color: rgba(255, 122, 26, 0.6);
       box-shadow: 0 20px 42px rgba(255, 122, 26, 0.2);
   }

   .hr-tab-item.is-active::after {
       border-color: rgba(255, 122, 26, 0.3);
   }

   .hr-tab-icon {
       width: 48px;
       height: 48px;
       border-radius: 14px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       font-size: 18px;
       color: #ff7a1a;
       background: rgba(255, 122, 26, 0.14);
       flex-shrink: 0;
       box-shadow: inset 0 0 0 1px rgba(255, 122, 26, 0.25);
   }

   .hr-tab-item:nth-child(2) .hr-tab-icon {
       color: #6366f1;
       background: rgba(99, 102, 241, 0.12);
   }

   .hr-tab-item:nth-child(3) .hr-tab-icon {
       color: #8b5cf6;
       background: rgba(139, 92, 246, 0.12);
   }

   .hr-tab-item:nth-child(4) .hr-tab-icon {
       color: #0ea5e9;
       background: rgba(14, 165, 233, 0.12);
   }

   .hr-tab-title {
       display: block;
       font-weight: 700;
       color: #0f172a;
       font-size: 18px;
       margin-bottom: 10px;
   }

   .hr-tab-desc {
       display: block;
       color: #475569;
       font-size: 14px;
       line-height: 22px;
   }

   .hr-tabs-visual {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: self-start;
       border-radius: 10px;
       height: 600px;
   }



   .hr-tabs-visual img {
       border-radius: 24px;
       position: relative;
       z-index: 1;
       width: 100%;
       max-width: 274px;
   }


   .careers-values {
       position: relative;
       overflow: hidden;
       background: radial-gradient(900px 420px at 15% 10%, rgba(255, 167, 38, 0.16), transparent 70%),
           radial-gradient(800px 380px at 90% 0%, rgba(56, 189, 248, 0.16), transparent 70%),
           linear-gradient(180deg, #f8fbff 0%, #eef2f7 100%);
   }

   .careers-values::before,
   .careers-values::after {
       content: "";
       position: absolute;
       width: 340px;
       height: 340px;
       border-radius: 999px;
       filter: blur(0);
       opacity: 0.35;
       pointer-events: none;
   }

   .careers-values::before {
       left: -120px;
       bottom: -140px;
       background: radial-gradient(circle, rgba(16, 185, 129, 0.35), transparent 70%);
   }

   .careers-values::after {
       right: -140px;
       top: -120px;
       background: radial-gradient(circle, rgba(99, 102, 241, 0.28), transparent 70%);
   }

   .careers-values .price-title h2 {
       color: #0b132b;
   }

   .careers-values .price-title p {
       color: #41506a;
   }

   .careers-values__content {
       display: grid;
       gap: 18px;
       counter-reset: value;
       position: relative;
       z-index: 1;
   }

   .careers-values .feature {
       position: relative;
   }



   .pricing-image img {
       width: 100%;
       max-width: 429px;
   }

   .careers-values .feature:hover {
       transform: translateY(-4px);
       border-color: rgba(15, 23, 42, 0.16);
   }

   .careers-values .feature h4 {
       font-size: 19px;
       font-weight: 700;
       color: #0f172a;
       margin-bottom: 8px;
   }

   .careers-values .feature p {
       color: #475569;
       font-size: 15px;
       line-height: 26px;
   }

   .careers-values__media {
       position: relative;
       padding: 16px;
       z-index: 1;
   }

   /*.careers-values__media::before {*/
   /*  content: "";*/
   /*  position: absolute;*/
   /*  inset: 0;*/
   /*  border-radius: 26px;*/
   /*  background: linear-gradient(140deg, rgba(15, 23, 42, 0.06), rgba(255, 255, 255, 0));*/
   /*  box-shadow: 0 26px 50px rgba(15, 23, 42, 0.12);*/
   /*  z-index: 0;*/
   /*}*/

   .careers-values__media img {
       position: relative;
       z-index: 1;
       border-radius: 24px;
       max-width: 100%;
   }



   .price-title {
       margin: 0 auto 60px;
       max-width: 780px;
   }

   .price-title h2 {
       font-family: 'Nunito Sans', sans-serif;
       font-size: clamp(1.8rem, 3vw, 2.6rem);
       font-weight: 700;
       line-height: 1.2;
       color: var(--theme-color-1);
       margin-bottom: 17px;
   }

   .price-title p {
       color: #41506a;
   }

   .services-row {
       gap: 26px;
   }

   .services-col {
       --card-accent: #ff9f1c;
   }

   .services-col:nth-child(2) {
       --card-accent: #38bdf8;
   }

   .services-col:nth-child(3) {
       --card-accent: #6366f1;
   }

   .services-col:nth-child(4) {
       --card-accent: #f43f5e;
   }

   .services-col:nth-child(5) {
       --card-accent: #22c55e;
   }

   .services-col:nth-child(6) {
       --card-accent: #0ea5e9;
   }

   .services-col:nth-child(7) {
       --card-accent: #a855f7;
   }

   .services-col:nth-child(8) {
       --card-accent: #f97316;
   }

   .services-card {
       position: relative;
       background: #ffffff;
       border-radius: 20px;
       border: 1px solid rgba(15, 23, 42, 0.08);
       box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
       padding: 26px 24px 28px;
       transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
       overflow: hidden;
   }

   .services-card::after {
       content: "";
       position: absolute;
       inset: 0;
       border-radius: 20px;
       border: 1px solid var(--card-accent);
       opacity: 0.65;
       pointer-events: none;
   }

   .services-card:hover {
       transform: translateY(-6px);
       border-color: var(--card-accent);
       box-shadow: 0 22px 40px rgba(15, 23, 42, 0.16);
   }

   .services-icon {
       width: 46px;
       height: 46px;
       border-radius: 12px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: rgba(255, 255, 255, 0.9);
       box-shadow: inset 0 0 0 1px var(--card-accent);
       color: var(--card-accent);
   }

   .services-icon i {
       color: var(--card-accent);
       font-size: 22px;
   }

   .services-card h3 {
       font-size: 18px;
       font-weight: 600;
       color: #0f172a;
       margin-top: 8px;
   }

   .services-card p {
       color: #475569;
       font-size: 15px;
       line-height: 28px;
   }

   .app-download__link {
       border-radius: 14px;
       box-shadow: 0 10px 24px rgba(11, 19, 43, 0.12);
       background: #ffffff;
   }

   .app-download__link:hover {
       transform: translateY(-3px);
   }

   @keyframes heroRise {
       0% {
           opacity: 0;
           transform: translateY(18px);
       }

       100% {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes cardRise {
       0% {
           opacity: 0;
           transform: translateY(16px);
       }

       100% {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .banner-wrapper {
       animation: heroRise 0.8s ease both;
   }

   .services-card {
       animation: cardRise 0.7s ease both;
   }

   .services-col:nth-child(1) .services-card {
       animation-delay: 0.05s;
   }

   .services-col:nth-child(2) .services-card {
       animation-delay: 0.12s;
   }

   .services-col:nth-child(3) .services-card {
       animation-delay: 0.18s;
   }

   .services-col:nth-child(4) .services-card {
       animation-delay: 0.24s;
   }

   .services-col:nth-child(5) .services-card {
       animation-delay: 0.3s;
   }

   .services-col:nth-child(6) .services-card {
       animation-delay: 0.36s;
   }

   .services-col:nth-child(7) .services-card {
       animation-delay: 0.42s;
   }

   .services-col:nth-child(8) .services-card {
       animation-delay: 0.48s;
   }

   @media (prefers-reduced-motion: reduce) {
       .banner-wrapper,
       .services-card {
           animation: none;
       }
   }

   /* --- Stats section refresh --- */
   .space-extra {
       position: relative;
       overflow: hidden;
       background: linear-gradient(135deg, #0b132b 0%, #12284d 45%, #1b3a6f 100%) !important;
       color: #fff;
   }

   .space-extra::before {
       content: "";
       position: absolute;
       inset: 0;
       background: radial-gradient(800px 320px at 10% 0%, rgba(46, 196, 182, 0.25), transparent 70%),
           radial-gradient(700px 280px at 90% 20%, rgba(255, 159, 28, 0.18), transparent 70%),
           linear-gradient(120deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
       opacity: 0.85;
       pointer-events: none;
   }

   .space-extra_row {
       position: relative;
       z-index: 1;
       gap: 28px;
       align-items: stretch;
   }

   .counter-card {
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.15);
       border-radius: 22px;
       padding: 26px 18px 24px;
       box-shadow: 0 18px 36px rgba(6, 16, 40, 0.35);
       transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
       text-align: center;
   }

   .counter-card:hover {
       transform: translateY(-6px);
       border-color: rgba(46, 196, 182, 0.45);
       box-shadow: 0 24px 44px rgba(6, 16, 40, 0.45);
   }

   .counter-card_icon {
       width: 68px;
       height: 68px;
       border-radius: 18px;
       background: rgba(255, 255, 255, 0.1);
       display: grid;
       place-items: center;
       padding: 0;
       margin-bottom: 14px;
   }

   .counter-card_icon:before,
   .counter-card_icon:after {
       content: none;
   }

   .counter-card_icon i {
       font-size: 30px;
       color: #ffffff;
   }

   .space-extra_col1 .counter-card_icon {
       background: rgba(255, 159, 28, 0.18);
   }

   .space-extra_col2 .counter-card_icon {
       background: rgba(255, 214, 10, 0.18);
   }

   .space-extra_col3 .counter-card_icon {
       background: rgba(46, 196, 182, 0.2);
   }

   .space-extra_col4 .counter-card_icon {
       background: rgba(56, 189, 248, 0.2);
   }

   .counter-card_number {
       font-size: 38px;
       font-weight: 700;
       letter-spacing: -0.02em;
       color: #ffffff;
       text-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
   }

   .counter-card_text {
       color: rgba(255, 255, 255, 0.82);
       font-weight: 500;
       font-size: 16px;
       letter-spacing: 0.01em;
   }

   .space-extra .media-body {
       text-align: center;
   }

   .counter-card_number span:last-child {
       color: rgba(255, 159, 28, 0.9);
       font-weight: 600;
   }


   /* --- Key features section refresh --- */
   section.key-features_section {
       padding: 90px 0;
       background: linear-gradient(180deg, #f8fbff 0%, #f2f6fb 100%);
   }

   .section-heading-wrapper span {
       background: rgba(46, 196, 182, 0.18);
       color: #0b132b;
       font-family: 'Nunito Sans', sans-serif;
       font-size: 14px;
       letter-spacing: 0.04em;
       text-transform: uppercase;
       border-radius: 999px;
       padding: 6px 16px;
   }

   .section-heading-wrapper h2 {
       font-family: 'Nunito Sans', sans-serif;
       font-size: clamp(1.8rem, 3vw, 2.6rem);
       color: #0b132b;
       margin: 20px 0
   }

   .analytics-content-info p {
       color: #475569;
       font-size: 16px;
       line-height: 30px;
   }

   .analytics-content-wrapper {
       padding: 0;
   }

   .hero_row_inner {
       gap: 56px;
   }

   .analytics-image-wrapper img {
       border-radius: 28px;
   }

   ul.aci-info-pointsList {
       gap: 10px;
       padding-top: 15px !important;
   }

   .aci-info-pointsList li {
       margin-bottom: 12px;
       gap: 10px;
   }

   .bulletpoint {
       width: 28px;
       height: 28px;
       background: rgba(46, 196, 182, 0.18);
       color: #0b132b;
       border-radius: 999px;
       font-size: 16px;
       display: flex;
       justify-content: center;
       align-items: center;
       font-size: 27px;
   }

   .aci-info-pointsList li h4 {
       font-family: 'Nunito Sans', sans-serif;
       font-size: 18px;
       font-weight: 600;
       color: #0f172a;
       margin: 0;
   }



   /* --- Hero section (reference style) --- */
   .banner-container {
       background: radial-gradient(1200px 500px at 10% 0%, rgba(255, 196, 135, 0.18), transparent 70%),
           radial-gradient(900px 480px at 90% 0%, rgba(158, 255, 219, 0.2), transparent 70%),
           linear-gradient(180deg, #f8fafc 0%, #eef4f8 100%);
   }

   .banner-container::before,
   .banner-container::after {
       display: none;
   }

   .hero-row {
       padding: 40px 0 80px;
   }

   .banner-left {
       text-align: left;
       align-items: flex-start;
   }



   .hero_badge {
       color: #0f172a !important;
       text-transform: none;
   }

   .banner-wrapper h1 {
       font-size: clamp(2rem, 4.4vw, 3rem);
       line-height: 1.4;
       margin-bottom: 12px;
   }



   .hero-cta {
       display: inline-flex;
       align-items: center;
       gap: 12px;
       padding: 14px 28px;
       border-radius: 14px;
       background: #ff7a1a;
       color: #fff;
       font-weight: 700;
       text-decoration: none;
       box-shadow: 0 18px 36px rgba(255, 122, 26, 0.28);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
   }

   .hero-visual--center {
       margin-top: 30px;
   }

   .hero-visual--center img {
       width: 100%;
       max-width: 620px;
       height: auto;
       border-radius: 28px;
       box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
   }

   .hero-visual img {
       width: 100%;
       max-width: 620px;
       height: auto;
   }

   .hero-rating-cards {
       display: grid;
       grid-template-columns: repeat(3, minmax(0, 1fr));
       gap: 24px;
       margin: 28px 0 12px;
   }

   .hero-rating-card {
       background: #ffffff;
       border-radius: 18px;
       padding: 28px 20px 26px;
       text-align: center;
       box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
       border: 1px solid rgba(15, 23, 42, 0.05);
   }

   .hero-rating-card img {
       height: 28px;
       width: auto;
       margin-bottom: 10px;
   }

   .hero-rating-logo {
       font-weight: 700;
       color: #111827;
       display: block;
       margin-bottom: 10px;
   }

   .hero-rating-stars {
       color: #f5b301;
       letter-spacing: 2px;
       font-size: 16px;
       margin-bottom: 6px;
   }

   .hero-rating-stars--muted {
       color: #f5b301;
       margin-bottom: 12px;
   }

   .hero-rating-card span {
       color: #6b7280;
       font-weight: 600;
       font-size: 15px;
   }



   html,
   body,
   * {
       font-family: 'Nunito Sans', sans-serif;
   }

   /* --- Testimonial section refresh --- */
   .testimonial-section {
       background: linear-gradient(180deg, #f8fafc 0%, #eef4f8 100%);
       padding: 80px 0 70px;
   }

   .testimonial-header h2 {
       font-size: clamp(1.8rem, 3vw, 2.6rem);
       color: #0f172a;
   }

   .testimonial-header p {
       color: #475569;
   }

   .testimonial-card {
       background: #ffffff;
       border-radius: 18px;
       padding: 30px 40px;
       max-width: 820px;
       margin: 0 auto;
       border: 1px solid rgba(15, 23, 42, 0.06);
       box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
       position: relative;
   }

   .testimonial-card::before {
       content: "“";
       position: absolute;
       top: -16px;
       left: 24px;
       font-size: 64px;
       color: rgba(15, 23, 42, 0.08);
       line-height: 1;
   }

   .testimonial-text {
       font-size: 17px;
       line-height: 30px;
       color: #1f2937;
       margin-bottom: 18px;
   }

   .author h4 {
       color: #0f172a;
   }

   .author p {
       color: #64748b;
   }


   /* --- Payroll app CTA section refresh --- */
   .payroll-cta-section {
       background: radial-gradient(900px 420px at 10% 0%, rgba(56, 189, 248, 0.18), transparent 70%),
           radial-gradient(900px 420px at 90% 10%, rgba(16, 185, 129, 0.16), transparent 70%),
           linear-gradient(180deg, #f8fafc 0%, #eef4f8 100%);
       padding: 90px 0;
   }

   .payroll-cta-image img {
       border-radius: 28px;
       box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
   }

   .payroll-cta-content {
       background: #ffffff;
       border-radius: 22px;
       padding: 28px 32px;
       box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
       border: 1px solid rgba(15, 23, 42, 0.06);
   }

   .copyright-text p {
       color: #fff;
   }

   .copyright-text p a {
       color: #03a303 !important;
       font-size: 19px;
       font-weight: 700;
   }

   .payroll-cta-section .section-heading-wrapper h2 {
       font-size: clamp(1.8rem, 3vw, 2.4rem);
       color: #0f172a;
   }

   .payroll-cta-section .section-heading-wrapper p {
       color: #475569;
       line-height: 28px;
   }

   .payroll-cta-section .analytics-content-info h4 {
       margin-top: 18px;
       font-size: 18px;
       color: #0f172a;
   }

   .payroll-cta-section .app-download__links {
       gap: 16px;
   }



   /* --- Time Attendance hero (about_banner) refresh --- */
   section.about_banner {
       background: radial-gradient(900px 420px at 10% 0%, rgba(45, 212, 191, 0.22), transparent 70%),
           radial-gradient(900px 420px at 90% 10%, rgba(129, 140, 248, 0.2), transparent 70%),
           linear-gradient(180deg, #f9fbff 0%, #eef2ff 100%);
       padding: 70px 0;
   }

   .about_container h1 {
       font-size: clamp(2rem, 4vw, 3.2rem);
       color: #0f172a;
       letter-spacing: -0.02em;
   }

   .hero_row_inner {
       gap: 48px;
   }

   .hero_row_inner p {
       color: #475569 !important;
       font-size: 17px;
       line-height: 30px;
   }

   /*.hero_img-abnner img {*/
   /*  border-radius: 24px;*/
   /*  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);*/
   /*}*/

   .mi-btn-warning {
       background: linear-gradient(135deg, #06b6d4, #0ea5e9) !important;
       color: #ffffff !important;
       border: none !important;
       padding: 10px 24px !important;
       font-size: 16px !important;
       font-weight: 700 !important;
       border-radius: 12px;
       box-shadow: 0 16px 30px rgba(14, 165, 233, 0.3);
   }

   .mi-btn-warning:hover {
       background: linear-gradient(135deg, #0ea5e9, #06b6d4) !important;
       transform: translateY(-2px);
       box-shadow: 0 20px 36px rgba(14, 165, 233, 0.36);
   }

   .hero-cta:hover {
       transform: translateY(-2px);
       box-shadow: 0 22px 42px rgba(255, 122, 26, 0.35);
   }

   .hero-ratings {
       display: flex;
       align-items: center;
       gap: 24px;
       margin-top: 18px;
       color: #475569;
       font-size: 14px;
       font-weight: 600;
   }

   .hero-rating {
       display: inline-flex;
       align-items: center;
       gap: 8px;
   }

   .hero-rating img {
       height: 20px;
       width: auto;
   }

   .hero-rating i {
       color: #f59e0b;
   }

   .hero-visual {
       position: relative;
       display: grid;
       place-items: center;
   }

   .hero-visual__glow {
       position: absolute;
       width: 360px;
       height: 360px;
       border-radius: 50%;
       background: #6420d3;
       opacity: 0.9;
       z-index: 0;
   }

   .hero-visual img {
       position: relative;
       z-index: 1;
       width: 100%;
       max-width: 520px;
       height: auto;
       border-radius: 28px;
   }

   .team-wise-inner {
       text-align: center;
       display: flex;
       flex-direction: column;
   }

   .about_container-in {
       width: 100%;
       max-width: 880px;
       margin: 0 auto;
   }

   .analytics-content-info h4 {
       margin: 20px 0;
   }

   .hero-chip,
   .hero-card {
       position: absolute;
       z-index: 2;
       background: #ffffff;
       border-radius: 12px;
       padding: 10px 14px;
       font-size: 13px;
       font-weight: 600;
       color: #0f172a;
       box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
       border: 1px solid rgba(15, 23, 42, 0.08);
   }

   .hero-chip--top {
       top: 16%;
       left: 6%;
   }

   .hero-chip--bottom {
       bottom: 18%;
       left: 12%;
   }

   .hero-card--right {
       top: 18%;
       right: 6%;
   }

   .hero-card--lower {
       bottom: 14%;
       right: 8%;
   }

   .support-overview--styled {
       position: relative;
       background: linear-gradient(135deg, rgba(231, 244, 255, 0.9), rgba(247, 251, 255, 0.7));
       overflow: hidden;
   }

   .support-overview--styled::before,
   .support-overview--styled::after {
       content: "";
       position: absolute;
       border-radius: 50%;
       background: rgba(59, 130, 246, 0.12);
       filter: blur(2px);
       z-index: 0;
   }

   .support-overview--styled::before {
       width: 320px;
       height: 320px;
       top: -120px;
       left: 6%;
   }

   .support-overview--styled::after {
       width: 260px;
       height: 260px;
       bottom: -120px;
       right: 8%;
   }

   .support-overview--styled .row {
       position: relative;
       z-index: 1;
   }

   .support-overview__visual {
       position: relative;
       display: grid;
       place-items: center;
       border-radius: 26px;
   }

   .social-media-review {
       width: 100%;
       max-width: 143px;
   }

   .support-overview__visual img {
       width: 100%;
       max-width: 520px;
       height: auto;
   }

   .support-overview__chip {
       position: absolute;
       top: 12%;
       left: 8%;
       background: #0f172a;
       color: #ffffff;
       padding: 8px 14px;
       border-radius: 999px;
       font-size: 13px;
       font-weight: 600;
       box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
   }

   .support-overview__chip--alt {
       top: auto;
       bottom: 12%;
       left: auto;
       right: 10%;
       background: #f97316;
   }

   .support-overview__content h2 {
       font-size: 34px;
       color: #0f172a;
       font-weight: 700;
       margin-bottom: 16px;
       font-family: 'Nunito Sans', sans-serif;
       line-height: 45px;
   }

   .support-overview__content p {
       color: #475569;
       font-size: 16px;
       line-height: 28px;
       margin-bottom: 16px;
   }

   .support-overview__eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 6px 14px;
       border-radius: 999px;
       background: rgba(59, 130, 246, 0.12);
       color: #1d4ed8;
       font-size: 13px;
       font-weight: 700;
       margin-bottom: 14px;
   }

   .support-overview__list {
       display: grid;
       gap: 12px;
       margin: 20px 0 26px;
   }

   .support-overview__item {
       display: flex;
       align-items: center;
       gap: 12px;
       color: #0f172a;
       font-weight: 600;
   }

   .support-overview__item i {
       font-size: 18px;
       color: #10b981;
   }

   .support-overview__actions {
       display: flex;
       align-items: center;
       flex-wrap: wrap;
       gap: 18px;
   }

   .support-overview__link {
       color: #1d4ed8;
       font-weight: 600;
       text-decoration: none;
   }

   .support-overview__link:hover {
       text-decoration: underline;
   }

   .support-workflow-section {
       background: linear-gradient(135deg, rgba(231, 244, 255, 0.7), rgba(245, 249, 255, 0.9));
   }

   .support-workflow__visual {
       border-radius: 28px;
       padding: 28px;
       display: grid;
       place-items: center;
   }

   .support-workflow__visual img {
       width: 100%;
       max-width: 520px;
       height: auto;
   }

   .support-workflow__content h2 {
       font-size: clamp(2rem, 3.4vw, 2.8rem);
       color: #0f172a;
       margin-bottom: 16px;
       font-weight: 700;
       line-height: 50px;
   }

   .support-workflow__content p {
       color: #475569;
       font-size: 16px;
       line-height: 28px;
       margin-bottom: 16px;
   }

   .ticket-form-visual {
       display: grid;
       place-items: center;
       padding: 24px;
       background: #eef4ff;
       border-radius: 28px;
   }

   .ticket-form-visual img {
       width: 100%;
       max-width: 420px;
       height: auto;
   }

   .feature h4 {
       font-size: 24px;
       color: #000;
       line-height: 25px;
       margin-bottom: 16px;
   }

   @media (max-width: 991px) {
       .hero-row {
           padding: 70px 0;
       }

.aci-info-pointsList li h4 {
    font-size: 16px;
    font-weight: 500;
    
}
       .counter-card {
           padding: 22px 16px;
       }

       .support-overview__visual {
           padding: 22px;
       }

       section.key-features_section {
           padding: 70px 0;
       }

       .hero_row_inner {
           gap: 32px;
       }

       .support-overview__chip,
       .support-overview__chip--alt {
           position: static;
           margin-top: 16px;
       }

       .support-overview__actions {
           justify-content: center;
       }

       .support-workflow__content {
           text-align: center;
       }

       .banner-left {
           text-align: center;
           align-items: center;
       }

       .hero-ratings {
           justify-content: center;
           flex-wrap: wrap;
       }

              .hr-tabs-section {
           padding: 70px 0;
       }

       .hr-tabs-visual {
           margin-top: 26px;
       }
       .payroll-cta-content {
           margin-top: 24px;
       }

       .hero-visual {
           margin-top: 32px;
       }

        .careers-values__content {
           gap: 14px;
       }

       .careers-values__media {
           margin-top: 12px;
       }
       .hero-chip,
       .hero-card {
           position: static;
           margin: 10px 6px 0;
       }

       .principles-grid {
           grid-template-columns: 1fr;
           gap: 32px;
       }

       .hero-rating-cards {
           grid-template-columns: 1fr;
       }
   }

   @media (max-width: 768px) {
       .copyright-container {
           flex-direction: column;
           text-align: center;
       }
.faq-question {
    font-size: 16px;
    font-weight: 600;
}
    section.key-features_section {
        padding: 42px 0;
    }
       .copyright-ul {
           justify-content: center;
           gap: 15px;
       }

       .hr-tabs-header {
           text-align: start !important;
       }

       .testimonial-card {
           padding: 26px 24px;
       }

       .hero_badge {
           font-size: 12px;
           line-height: 18px;
       }
   }

   @media (max-width: 576px) {
       .space-extra_row {
           grid-template-columns: repeat(1, 1fr);

       }
   }