@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;
       font-size: 20px;
     }

     .requestdemobtn1:hover {
       background-color: #ffffff;
       /* keep same background */
       color: #3A8DCA;
       /* keep same text color */
       border: 1px solid #3A8DCA;
       /* keep border */
     }

     .DatasheetBtn:hover {
       background-color: #ffffff;
       color: #3A8DCA;
       border: 1px solid #3A8DCA;
     }

     .buynowbtn1:hover {
       background-color: #3A8DCA;
       /* keep same background */
       color: #FFFFFF;
       /* keep text white */
       border: 1px solid #3A8DCA;
       /* keep border consistent */
     }

     .hero-badge {
       display: inline-block;
       background-color: #DAEAF5;
       padding: 0.23rem 0.6rem;
       margin: 0.5rem 2rem;
       border-radius: 20px;
       font-weight: 500;
       font-size: 18px;
     }

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

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

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

     .custom-navbar {
       background-color: #F1F5F9;
     }

     .faq-item {
       background-color: #FFFFFF;
     }

     .freqHeading {
       color: #353535;
       font-size: 18px !important;
     }

     .faq-answer {
       color: #878787;
       text-align: left !important;
     }

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

     .hero-img {
       max-width: 100%;
       height: auto;
       display: block;
       margin: 0 auto;
       object-fit: contain;
     }

     .second {
       min-height: 15rem;
       background-color: #F8FAFC;
       padding: 2rem 0rem;
     }

     .visibliltiy {
       font-size: 30px;
       color: #252525;
     }

     .visibliltiyText {
       color: #353535;
       font-size: 18px;
     }

     .bgclrnav {
       background-color: #F1F5F9;
     }

     .four {
       background-color: #F8FAFC;
     }

     .fivecards {
       background-color: #F8FAFC;
       border: none;
     }

     .fivecardsheading {
       color: #353535;
       font-size: 20px;
     }

     .fivecardText {
       color: #868686;
     }

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

     .no8card {
       background-color: #3A8DCA;
       height: 300px !important;
       color: #fff;
     }

     .no8cardHeading {
       font-size: 30px !important;
       margin-top: 50px;
     }

     .no8cardText {
       font-size: 18px;
       line-height: 34px;
       margin-top: 40px;
     }

     .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;
     }

     .social-icons {
       list-style: none;
       padding: 0;
       margin: 10px 0 0 0;
       gap: 15px;
     }

     .social-icons li {
       list-style: none;
     }

     .social-icons li img {
       width: 24px;
       height: 24px;
       cursor: pointer;
       transition: transform 0.3s;
     }

     .social-icons li img:hover {
       transform: scale(1.1);
     }

     .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 {
       background-color: #3A8DCA;
     }

     .requestdemobtn1 {
       background-color: white;
       border-radius: 30px;
     }

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

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

     .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;
     }

     .product-details-image2 {
       overflow: hidden;

       position: relative;
     }

     .product-details-image2 img {
       transition: transform 0.3s ease;
       width: 100%;
       height: auto;
       display: block;
     }

     .product-details-image2 img:hover {
       transform: scale(1.1);
     }

     .img-wrapper {
       overflow: hidden;
       width: 100%;
       height: 300px;
     }

     .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;
     }

     .smallcards:hover {
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
     }

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

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

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

     .Tablecards .table {
       width: 100%;
       border-collapse: collapse;
       margin-bottom: 0;
     }

     .Tablecards .table th,
     .Tablecards .table td {
       border: none;
       padding: 12px 16px;
       text-align: center;
     }

     .Tablecards .table tr {
       border-bottom: 1px solid #dee2e6;
     }

     .Tablecards .table tr:last-child {
       border-bottom: none;
     }

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

     .Tablecards .table th,
     .Tablecards .table td {
       border: none;
       padding: 16px 20px;
       text-align: center;
       vertical-align: middle;
     }

     .Tablecards .table tr {
       border-bottom: 2px solid #dee2e6;
     }

     .Tablecards .table tr:last-child {
       border-bottom: none;
     }

     .Tablecards .table thead {
       background-color: transparent !important;
     }

     .Tablecards .table thead,
     .Tablecards .table thead th {
       background-color: transparent !important;
       color: inherit;
       border: none;
       padding: 16px 20px;
     }

     .Tablecards .table thead {
       background-color: transparent !important;
     }

     .Tablecards .table thead th {
       border: none;
       padding: 16px 20px;
       text-align: center;
       vertical-align: middle;
     }

     .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;
     }

     .mainheading {
       font-size: 40px !important;
       font-weight: 900;
     }

     .main-subheading {
       font-size: 60px !important;
       font-weight: bolder;
     }

     .custom-paragraph {
       max-width: 520px;
       /* Adjust this value until it matches your design */
       line-height: 1.6;
     }

     /* Toggle btn */
     .switch {
       position: relative;
       display: inline-block;
       width: 230px;
       height: 40px;
     }

     .switch input {
       display: none;
     }

     .slider {
       position: relative;
       width: 100%;
       height: 100%;
       background-color: #F8FAFC;
       border-radius: 35px;
       border: 1px solid #3A8DCA;
       display: flex;
       justify-content: space-between;
       align-items: center;
       font-weight: bold;
       font-size: 14px;
       color: #3A8DCA;
       cursor: pointer;
       overflow: hidden;
     }

     .label {
       width: 50%;
       text-align: center;
       z-index: 2;
       transition: color 0.3s;
     }

     /* Highlight background for active selection */
     .highlight {
       position: absolute;
       width: 50%;
       height: 100%;
       top: 0;
       left: 0;
       background-color: #3A8DCA;
       border-radius: 35px;
       z-index: 1;
       transition: left 0.3s;
     }

     /* Checked state */
     input:checked+.slider .highlight {
       left: 50%;
     }

     input:checked+.slider .monthly {
       color: #3A8DCA;
     }

     input:checked+.slider .yearly {
       color: white;
     }

     input:not(:checked)+.slider .monthly {
       color: white;
     }

     input:not(:checked)+.slider .yearly {
       color: #3A8DCA;
     }

     /* ----------------- */
     .cardsheadingText {
       color: #3A8DCA;
       font-size: 18px;
       font-weight: 500;
     }

     .price {
       font-size: 45px;
     }

     .comprensivep {
       color: #3A8DCA;
     }

     .sectionHeading {
       font-size: 30px;
     }

     .secondcontainertext {
       color: #868686;
     }

     .cardsheadingTextBadge {
       color: #3A8DCA;
       margin-top: 5px;
       font-size: 14px;
       background-color: rgba(58, 141, 202, 0.18);
     }

     .currency {
       font-size: 40px;
       font-weight: 600;
     }

     .amount {
       font-size: 36px;
       font-weight: 700;
     }

     .period {
       font-size: 14px;
       color: gray;
       margin-left: 4px;
     }



     .pricing-card {
       border: 1px solid #3A8DCA !important;
       border-radius: 50px;
     }

     .pricing-card {
       padding: 30px 25px;
     }

     .Line {
       color: #F97316;
       height: 2px;
       opacity: 0.6;
     }

     .subscribBtn {
       background-color: #EBF6FF;
       font-size: 20px;
       color: #3A8DCA;
       font-weight: 400;
       width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 9px;
       gap: 8px;
       padding: 12px 16px;
     }

     p {
       font-size: 18px;
     }


     .bgclrnav {
       padding: 0px;
     }

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

       p {
         font-size: 16px;
       }

       .no8card {
         background-color: #3A8DCA;
         height: 400px !important;
         color: #fff;
       }

       .subscribBtn {
         font-size: 16px !important;
       }

       .cardsheadingText {
         color: #3A8DCA;
         font-size: 16px;
         font-weight: 400;
       }

       .price {
         font-size: 35px;
       }

       .price .amount {
         font-size: 30px;
       }

       .price .currency {
         font-size: 26px;
       }

       .main-subheading {
         font-size: 40px !important;
         font-weight: bolder;
       }

       .titles {
         font-size: 18px;

       }

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

       .hero-img {
         max-width: 98%;
       }

       .sectionHeading {
         font-size: 23px;
       }

       .secondcontainertext {
         color: #868686 !important;
       }

       .comprensivep {
         font-size: 10px;
       }

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

       .requestdemobtn {
         font-size: 0.875rem !important;
         background-color: #3A8DCA;
         padding: 0.25rem 0.5rem !important;
         width: auto;
       }

       .requestdemobtn1 {
         background-color: white;
         border-radius: 30px;
         font-size: 14px;
       }

       .buynowbtn {
         font-size: 0.875rem !important;
         padding: 0.25rem 0.5rem !important;
         width: auto;
         background-color: #3A8DCA !important;
       }

       .textformobile {
         font-size: 16px !important;
         line-height: 1.6;
         color: #353535;
       }

       .hero-badge {
         font-size: 16px;

       }

       .hero-buttons .btn {
         font-size: 12px;
         padding: 5px 10px;
       }

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

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

       .thirdtitle {
         font-size: 18px !important;
       }

       .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;
         column-gap: 2rem !important;
       }




       .Tablecards .table thead th {
         padding-bottom: 8px;
         font-size: 14px;
       }

       .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: 16px;
       }

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



       .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;
       background-color: #3A8DCA;
       padding-left: 15px;
       padding-right: 15px;
     }

     .logomanageItpro {
       height: 52px;
       width: 178px;
     }

     .hero-buttons {
       display: flex;
       flex-wrap: nowrap;
       gap: 10px;
     }

     .hero-buttons .btn {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       white-space: nowrap;
     }

     /* Buy Now */
     .buynowbtn1 {
       color: #FFFFFF;
       background-color: #3A8DCA;
       padding: 10px 18px;
       border-radius: 30px;
     }

     .buynowbtn2 {
       color: #3A8DCA;
       background-color: #FFFFFF;
       padding: 8px 18px;
       border-radius: 30px;
       width: 160px;
     }

     .DatasheetBtn {
       color: #3A8DCA;
       background: #FFFFFF;
       border: 1px solid #3A8DCA;
       padding: 10px 18px;
       border-radius: 30px;
     }

     .requestdemobtn1 {
       color: #3A8DCA;
       border: 1px solid #3A8DCA;
       padding: 8px 16px;
       border-radius: 30px;
     }

     .requestdemobtn2:hover {
       background-color: #2f78ad;
       color: #fff;
       border: 1px solid #fff;
     }

     /* Fix hover */
     .buynowbtn2:hover {
       color: #3A8DCA;
       background-color: #FFFFFF;
       border-color: #FFFFFF;
     }

     .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;
     }

     /* Hover effect */
     .buynowbtn2:hover {
       background-color: #FFFFFF;
       color: #3A8DCA;
     }

     /* Request Demo button */
     .requestdemobtn2 {
       color: #fff;
       border: 1px solid #fff;
       background-color: #3A8DCA;
       padding: 8px 16px;
       border-radius: 30px;
       transition: all 0.3s ease;
     }

     .requestdemobtn2:hover {
       background-color: #2f78ad;
       color: #fff;
     }

     /* Adjust flex container for small screens */
     @media (max-width: 576px) {
       .d-flex.justify-content-center.flex-wrap.gap-4 {
         flex-direction: column;
         /* stack vertically */
         gap: 12px;
         /* smaller spacing */
         align-items: stretch;
         /* buttons fill card width */
       }
     }

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

       .buynowbtn2 {
         color: #3A8DCA;
         background-color: #FFFFFF;
         padding: 6px 12px;
         border-radius: 30px;
         font-size: 14px;
         width: 140px;
       }

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

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

     .error {
       color: red;
     }



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

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

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

     /* .thirdtitle strong {
  font-weight: 700;
} */

     .container-fluid.bgclrnav {
       backdrop-filter: blur(1px);
       position: sticky;
       left: 0;
       top: 0;
       z-index: 999999;
     }

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

     #manageandsecure {
       color: #3A8DCA;
     }