@font-face {
       font-family: 'Sailec';
       src: url('fonts/Sailec-Medium.woff2') format('woff2'),
         url('fonts/Sailec-Medium.woff') format('woff');
       font-weight: 500;
       font-style: normal;
       font-display: swap;
     }

     @font-face {
       font-family: 'Sailec';
       src: url('fonts/Sailec-Regular.woff2') format('woff2'),
         url('fonts/Sailec-Regular.woff') format('woff');
       font-weight: 400;
       font-style: normal;
       font-display: swap;
     }

     @font-face {
       font-family: 'Optima';
       src: url('fonts/Optima-Medium.woff2') format('woff2'),
         url('fonts/Optima-Medium.woff') format('woff');
       font-weight: 700;
       font-style: normal;
       font-display: swap;
     }

     body {
       font-family: 'Sailec', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
     }

     .titles {
       font-family: 'Optima', 'Segoe UI', 'Candara', 'Calibri', Arial, sans-serif !important;
     }

     .hero-badge {
       display: inline-block;
       background-color: #E7F5EC;
       padding: 0.20rem 0.4rem;
       margin: 0.5rem 2rem;
       border-radius: 5px;
       font-weight: 500;
       font-size: 16px;
     }

     .image-banner {
       max-width: 100%;
       height: auto;
     }

     .hero {
       padding: 60px 20px;
       text-align: left;
     }

     .image-banner {
       object-fit: cover;
     }

     .productivity {
       background-color: antiquewhite;
       height: 500px;
     }

     .product-details-image2 img {
       display: block;
       width: 100%;
       height: auto;
     }

     .second {
       min-height: 15rem;
       background-color: rgb(236, 236, 236);
       padding: 2rem 0rem;
     }

     .four {
       background-color: rgb(236, 236, 236);
       padding: 60px 0;
       /* vertical spacing only */
     }

     .hero {
       padding-top: 60px;
       padding-right: 20px;
       padding-bottom: 20px;
       padding-left: 20px;
       text-align: left;
     }

     .no8card {
       background-color: #008F4F;
       color: #fff;
     }

     .btn-demo {
       background-color: #ffffff;
       color: #28a745;
       border: 2px solid #28a745;
       font-weight: 500;
     }

     .sevencard {
       border-color: #008F4F;
     }

     .sevencard .card-footer {
       border-top: none;
       padding: 1.5rem;
       background-color: #dcf3e9;
     }

     .six {
       background-color: #f5f5f5;
       /* full width background */
       padding: 70px 0;
       /* vertical spacing only */
     }

     .five {
       padding: 30px 0;
     }

     .footer-bg {
       background-color: #f1f5f9;
     }

     .contentatfooter {
       margin-top: 145px !important;
     }

     .scroll-to-top {
       position: fixed;
       bottom: 20px;
       right: 20px;
       background-color: #ffffff;
       color: #014f59;
       border: none;
       border-radius: 5px;
       padding: 10px 15px;
       cursor: pointer;
       display: none;
       z-index: 1000;
       transition: background-color 0.3s;
     }

     .scroll-to-top:hover {
       background-color: #ffffff;
     }

     img.full-cover-img {
       width: 100%;
       height: auto;
       /* keeps aspect ratio */
       object-fit: contain;
       /* shows full image */
       display: block;
       margin: 0 auto;
       /* centers if width < container */
     }

     .atomictimediscreption p {
       line-height: 1.8;
     }

     .requestdemobtn {
       color: #008F4F;
     }

     #home {
       margin-bottom: 0;
       padding-bottom: 20px;
     }

     section {
       margin-bottom: 0;
       padding-bottom: 0;
     }

     .bgclrnav {
       background-color: #f8f9fa !important;
     }

     .atomictimediscreption p {
       font-size: 18px;
       /* Set font size to 18px */
       line-height: 1.8;
       /* Makes text easier to read */
       margin-bottom: 1rem;
     }

     .hero-buttons .btn {
       font-size: 18px;
       /* padding: 0.75rem 1.5rem; */
     }



     .second-contain {
       line-height: 1.9;
       font-size: 18px;
     }

     .custom-img {
       max-width: 90%;
       /* reduce width */
       height: auto;
       /* keep aspect ratio */
     }

     .product-details-desc {
       padding-left: 20px;
       /* adds gap between image and text */
     }


     /* ===== */
     .product-details-image2 {
       overflow: hidden;
       /* keeps zoom inside the fixed frame */
       position: relative;
       /* ensures container stays fixed */

     }

     .product-details-image2 img {
       transition: transform 0.3s ease;
       /* smooth zoom */
       width: 100%;
       /* fill container */
       height: auto;
       /* keep aspect ratio */
       display: block;
       /* removes inline gaps */
     }

     .product-details-image2 img:hover {
       transform: scale(1.1);
       /* zoom in internally */
     }

     .img-wrapper {
       overflow: hidden;
       /* fixed frame */
       width: 100%;
       height: 300px;
       /* adjust height as needed */
     }

     .img-wrapper img {
       height: 100%;
       object-fit: cover;
       transition: transform 0.3s ease;

     }

     .img-wrapper img:hover {
       transform: scale(1.1);
       /* zoom internally */
     }

     .section3images {
       width: 50px;
       height: 50px;
     }

     .smallcards {
       transition: all 0.3s ease;
       /* smooth animation */
     }

     .smallcards:hover {
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
       /* transform: translateY(5px); */
     }


     .Tablecards {
       transition: transform 0.25s ease, box-shadow 0.25s ease;
       overflow: hidden;
     }

     .Tablecards:hover {
       transform: scale(1.01);
       /* VERY small zoom */
       box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
     }

     .Tablecards .card-body {
       padding: 0;
     }

     /* Make table full width and collapse spacing */
     .Tablecards .table {
       width: 100%;
       border-collapse: collapse;
       margin-bottom: 0;
     }

     /* Remove default cell borders and add row separators */
     .Tablecards .table th,
     .Tablecards .table td {
       border: none;
       padding: 12px 16px;
       /* consistent spacing inside cells */
       text-align: center;
     }

     /* Add one line after each row */
     .Tablecards .table tr {
       border-bottom: 1px solid #dee2e6;
     }

     /* Remove line after last row so it connects with card border */
     .Tablecards .table tr:last-child {
       border-bottom: none;
     }

     .tickcircleimage {
       width: 20px;
       height: 20px;
     }

     /* Remove default padding differences */
     .Tablecards .table th,
     .Tablecards .table td {
       border: none;
       /* no cell borders */
       padding: 16px 20px;
       /* same top & bottom padding */
       text-align: center;
       /* keep content centered */
       vertical-align: middle;
       /* align content vertically */
     }

     /* Add one clean line after each row */
     .Tablecards .table tr {
       border-bottom: 2px solid #dee2e6;
     }

     /* Remove line after last row */
     .Tablecards .table tr:last-child {
       border-bottom: none;
     }

     /* Remove grey header background */
     .Tablecards .table thead {
       background-color: transparent !important;
     }


     /* Remove grey background from table header */
     .Tablecards .table thead,
     .Tablecards .table thead th {
       background-color: transparent !important;
       color: inherit;
       /* keep text color consistent */
       border: none;
       /* remove header borders if needed */
       padding: 16px 20px;
       /* same padding as body cells */
     }

     /* Remove grey background from header */
     .Tablecards .table thead {
       background-color: transparent !important;
     }

     /* Style header cells consistently */
     .Tablecards .table thead th {
       border: none;
       /* remove default borders */
       padding: 16px 20px;
       /* same spacing as body cells */
       text-align: center;
       vertical-align: middle;
     }

     /* Add a single line after the header row */
     .Tablecards .table thead tr {
       border-bottom: 1px solid #dee2e6;
     }

     body {
       margin: 0;
       padding: 0;
     }

     .maincontainer {
       padding: 0;
     }

     .best-value {
       display: inline-block;
       padding: 5px 12px;
       color: #008F4F;
       border: 1px solid #008F4F;
       border-radius: 19px;
       font-weight: 500;
       font-size: 14px;
       text-align: center;
       background-color: transparent;
       cursor: default;
       white-space: nowrap;
     }


     @media (max-width: 767px) {
       .maincontainer {
         padding: 0px;
       }

       .hero {
         padding-top: 10px !important;
       }

       .best-value {
         font-size: 12px !important;
         font-weight: 500 !important;
         margin-top: 6px;
       }

       .requestdemobtn {
         font-size: 0.875rem !important;
         padding: 0.25rem 0.5rem !important;
         width: auto;
       }

       .buynowbtn {
         font-size: 0.875rem !important;
         padding: 0.25rem 0.5rem !important;
         width: auto;
       }

       .textformobile {
         font-size: 14px !important;
         line-height: 1.6;
       }

       .hero-badge {
         font-size: 14px;
       }

       .textformobile p {
         font-size: 14px !important;
       }

       .product-details-desc h1 {
         font-size: 24px !important;
       }

       .hero-badge {
         font-size: 14px !important;
       }

       .thirdtitle {
         font-size: 18px !important;
         /* Adjust between 18-20px */
       }

       .section3images {
         height: 40px !important;
         width: 40px !important;
       }

       .best-value {
         padding: 2px 6px;
         font-size: 12px;
         font-weight: 300;

       }

       .six .row.g-5 {
         row-gap: 2rem !important;
         /* vertical gap */
         column-gap: 2rem !important;
         /* horizontal gap */
       }

       .sectionHeading {
         font-size: 20px !important;
       }

       .Tablecards .table thead th {
         padding-bottom: 8px;
         /* slightly smaller on mobile */
         font-size: 14px;
         /* fits smaller screens */
       }

       .best-value {
         padding: 2px 6px;
         font-size: 12px;
       }

       .pricing-item span {
         font-size: 14px;
       }

       .gapbetweencards {
         row-gap: 2rem !important;

         column-gap: 2rem !important;

       }

       .pricing-item span {
         font-size: 14px;
       }

       .productivityImage {
         content: url('assets/images/A New Standard in ProductivityMobile view.png');
       }

       .contentatfooter {
         margin-top: 25px !important;
       }

     }

     @media (min-width: 768px) and (max-width: 1024px) {
       .hero {
         padding: 40px 20px;
       }

       .product-details-desc h1 {
         font-size: 26px;
       }

       .atomictimediscreption p {
         font-size: 16px;
         line-height: 1.6;
       }

       .hero-badge {
         font-size: 14px;
       }

       .hero-buttons .btn {
         font-size: 15px;
         padding: 8px 18px;
       }

       /* Second Section */
       .second {
         padding: 2rem;
       }

       .second-contain {
         font-size: 16px;
         line-height: 1.7;
       }

       .smallcards {
         padding: 15px;
       }

       .thirdtitle {
         font-size: 18px;
       }

       .section3images {
         width: 45px;
         height: 45px;
       }

       .img-wrapper {
         height: 250px;
       }


       .contentatfooter {
         margin-top: 60px !important;
       }

     }

     .Tablecards .table tbody td:nth-child(3) {
       background-color: #E7F5EC;
     }

     /* ------------- */
     .Tablecards .table thead tr {
       border-bottom: 2px solid #008F4F;
     }

     .Tablecards .table thead th {
       padding-bottom: 12px;
     }

     .tick {
       width: 20px;
     }

     .pricing-wrapper {
       width: 260px;
       margin: 0 auto;
     }

     .pricing-item {
       display: flex;
       align-items: center;
       margin-bottom: 15px;
     }

     .tick {
       width: 20px;
       margin-right: 10px;
     }

     .buynowbtn {
       border: 1px solid white;
       color: white;
       padding-left: 15px;
       padding-right: 15px;
     }

     .no8card {
       background: linear-gradient(to bottom,
           #42B46C 0%,
           #18A44C 100%);

     }

     .logoautomictime {
       width: 60px;
     }

     .automictimetext {
       text-align: justify;
       text-justify: inter-word;
       word-wrap: break-word;
       overflow-wrap: break-word;
       line-height: 1.5;
     }

     /* ----------------------------------- */

     .footertext {
       display: flex;
       flex-wrap: wrap;
       justify-content: start;
       align-items: center;
       gap: 10px;
       color: #6c757d;
       text-align: center;
     }

     .footertext a {
       text-decoration: none;
     }

     .footertext a:hover {
       text-decoration: underline;
     }

     @media (max-width: 767px) {
       .footertext {
         flex-direction: column;
         justify-content: center;
         align-items: center;
         gap: 5px;
       }

       .footertext p,
       .footertext ul {
         border: none;
         padding: 0;
       }

       .footertext ul {
         display: flex;
         justify-content: center;
         gap: 10px;
       }
     }

     .error {
       color: red;
     }

     .scroll-to-top {
       position: fixed;
       bottom: 20px;
       right: 20px;
       background-color: #ffffff;
       color: #014f59;
       border: none;
       border-radius: 5px;
       padding: 10px 15px;
       cursor: pointer;
       display: none;
       z-index: 1000;
       transition: background-color 0.3s;
     }

     .scroll-to-top:hover {
       background-color: #ffffff;
       /* Darker shade on hover */
     }

     .navbar-nav .nav-link:hover {
       color: #008F4F !important;
     }

     .navbar-nav .nav-link.active {
       color: #008F4F !important;
     }

     .BelowRequestDemobtn {
       background-color: #E7F5EC !important;
       color: #008F4F !important;
     }