@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
          font-family: 'Inter', sans-serif;
          background-color: #f8f9fa;
      }

      .text-xs {
          font-size: 0.75rem;
          line-height: 1rem;
      }

      .text-sm {
          font-size: 0.875rem;
          line-height: 1.25rem;
      }

      button.loginbtn {
          background-color: hsl(221.2, 83.2%, 53.3%);
      }

      p.text-ss {
          color: #647180;
          line-height: 30px;
      }

      .text-xl {
          font-size: 1.25rem;
          line-height: 1.75rem;
      }

      .text-2xl {
          font-size: 1.5rem!important;
          line-height: 2rem!important;
      }

      .text-3xl {
          font-size: 1.875rem;
          line-height: 2.25rem;
      }

      .text-5xl {
          font-size: 3rem;
          line-height: 1;
      }

      .ev_ss{
        color:rgb(75 85 99);
      }

      .text-4xl {
          font-size: 2.25rem;
          line-height: 2.5rem;
      }

      .bgbox {
          width: 48px;
          height: 48px;
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .ev_ss{
          color:rgb(75 85 99);
      }

      .bg-blue-100{
          background-color: rgb(219 234 254);
      }

      .bg-green-100{
          background-color: rgb(220 252 231);
      }

      .bg-purple-100{
          background-color: rgb(243 232 255);
      }

      .bg-orange-100{
          background-color: rgb(255 237 213);
      }

      .bg-indigo-100{
          background-color: rgb(224 231 255);
      }

      .bg-pink-100{
        background-color: rgb(252 231 243);
      }

      .text-indigo{
          color: rgb(79 70 229);
      }

      .text-black{
         color: #000;
      }

      .text-orange{
        color: rgb(234 88 12);
      }

      .text-purpal{
        color: rgb(147 51 234);
      }

      .text-green{
          color:rgb(22 163 74);
      }

      .text-gray-600{
        color:rgb(75 85 99)!important;
      }

      button.video:hover {
          background: rgb(241, 245, 249);
      }

      button.video {
          border: 1px solid rgb(222, 230, 237);
      }

      .container{
         max-width: 1536px!important;
      }

      a.nav-link {
          padding-left: 20px !important;
          padding-right: 20px !important;
      }

      .text-custom-blue {
          color: rgb(37 99 235) !important; /* Use !important to override Bootstrap's utilities if needed */
      }

      button.bk.bks:hover {
          background: #fff;
          color: rgb(37 99 235) !important;
      }

      .bg-custom-blue {
          background-color: rgb(37 99 235) !important;
      }

      .solution-card:hover {
          box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
      }

      .navbar-brand img {
          height: 30px;
      }
      .btn-primary {
          background-color: #0d6efd; /* Adjust to a blue similar to the image */
          border-color: #0d6efd;
          border-radius: 8px; /* Rounded corners */
          padding: 10px 20px;
      }
      .btn-outline-primary {
          border-color: #0d6efd;
          color: #0d6efd;
          border-radius: 8px; /* Rounded corners */
          padding: 10px 20px;
      }

      .pricing-card ul li {
          color: #000;
      }

      .pricing-card ul li svg {
          margin-right: 10px;
      }

      .hero-section {
          padding: 60px 0;
          text-align: center;
      }
      .hero-section h1 {
          font-size: 3.5rem;
          font-weight: 700;
          color: #2c3e50;
      }
      .hero-section p.lead {
          font-size: 1.25rem;
          color: rgb(75 85 99);
          max-width: 800px;
          margin: 20px auto;
          font-weight: 400;
      }
      .feature-icon {
          font-size: 3rem;
          color: #0d6efd;
          margin-bottom: 15px;
      }

       .width_in{
          width: 100%;
          max-width: 896px;
          margin:0px auto;
       }

      .feature-card {
          border-radius: 10px;
          padding: 10px;
          text-align: center;
          height: 100%; /* Ensure cards are same height */
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
      }

      span.pick {
          background-color: rgb(37 99 235) !important;
          color: #fff;
          border-radius: 50px;
          font-size: 11px;
          padding: 3px 10px;
          font-weight: bold;
          position: absolute;
          top: -11px;
          left: 50%;
          transform: translateX(-50%);
      }

      .stats-section {
          background-color: #f8f9fa;
          padding: 60px 0;
      }
      .stats-item {
          text-align: center;
      }
      .stats-item h2 {
          font-size: 3rem;
          font-weight: 700;
          color: #2c3e50;
      }
      .stats-item p {
          font-size: 1.1rem;
          color: #777;
      }
      .what-you-need-section {
          padding: 60px 0;
          text-align: center;
      }
      .solution-card {
          background-color: #fff;
          border-radius: 10px;
          /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);*/
          box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
          padding: 30px;
          text-align: left;
          min-height: 220px; /* Adjust as needed */
          transition: transform 0.3s ease;
          border: 1px solid rgb(223, 230, 237);
      }

      .solution-card:hover {
          transform: translateY(-5px);
      }
      .solution-card h5 {
          color: #2c3e50;
          font-weight: 600;
      }
      .solution-card p {
          color: #666;
          font-size: 0.95rem;
      }
      .solution-icon {
          font-size: 1.8rem;
          color: #0d6efd;
          margin-bottom: 15px;
      }
      .loved-by-section {
          padding: 80px 0;
          text-align: center;
          background-color: #eeeeee6b;
      }
      .testimonial-card {
          background-color: #fff;
          border-radius: 10px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
          padding: 30px;
          text-align: left;
          min-height: 250px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
      }

      .name_testi {
          width: 40px;
          height: 40px;
          border-radius: 50px;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
      }

      .testimonial-card .quote {
          font-size: 1rem;
          color: rgb(55 65 81);
          margin-bottom: 20px;
          font-style: italic;
      }
      .testimonial-card .author {
          font-weight: 600;
          color: #2c3e50;
      }
      .testimonial-card .role {
          font-size: 0.9rem;
          color: #777;
      }
      .star-rating {
          color: gold;
          margin-bottom: 10px;
      }
      .pricing-section {
          background-color: #f8f9fa;
          padding: 80px 0;
          text-align: center;
      }

      .pricing-card.active{
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
          border: 1px solid rgb(191 219 254);
      }

      .pricing-card {
          background-color: #fff;
          border-radius: 10px;
          /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);*/
          padding: 30px;
          text-align: left;
          height: 100%;
          border: 1px solid hsl(214.3, 31.8%, 91.4%);
          position: relative; /* For "Most Popular" badge */
      }
      .pricing-card .badge-popular {
          position: absolute;
          top: 0;
          right: 0;
          background-color: #28a745; /* Green */
          color: #fff;
          padding: 5px 15px;
          border-top-right-radius: 10px;
          border-bottom-left-radius: 10px;
          font-size: 0.85rem;
          font-weight: 500;
      }
      .pricing-card h4 {
          font-weight: 600;
          color: #2c3e50;
      }
      .pricing-card .price {
          font-weight: 700;
          color: #0d6efd;
          margin-top: 10px;
      }
      .pricing-card .price small {
          font-size: 1.125rem;
          color:rgb(107 114 128);
          font-weight:bold;
      }
      .pricing-card ul {
          list-style: none;
          padding: 0;
          margin-top: 20px;
      }
      .pricing-card ul li {
          margin-bottom: 10px;
          color: #555;
      }
      .pricing-card ul li i {
          color: #28a745; /* Green checkmark */
          margin-right: 10px;
      }
      .cta-section {
          background-image: linear-gradient(to right, #2563eb, #4f46e5); /* Blue background */
          padding: 80px 0;
          text-align: center;
          color: #fff;
      }
      .cta-section h2 {
          font-size: 2.5rem;
          font-weight: 700;
          margin-bottom: 20px;
      }
      .cta-section p {
          font-size: 1.1rem;
          margin-bottom: 30px;
          max-width: 800px;
          margin-left: auto;
          margin-right: auto;
      }

      button.bk {
          height: 56px;
      }

      .footer-section {
          background-color:rgb(17 24 39);
          color: #fff;
          padding: 60px 0;
          font-size: 0.9rem;
      }
      .footer-section h6 {
          color: #fff;
          font-weight: 600;
          margin-bottom: 20px;
      }
      .footer-section ul {
          list-style: none;
          padding: 0;
      }
      .footer-section ul li a {
          color: #ccc;
          text-decoration: none;
          line-height: 2;
      }
      .footer-section ul li a:hover {
          color: #fff;
      }
      .footer-bottom {
          background-color:rgb(17 24 39);
          padding: 20px 0;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          color: rgb(156 163 175);
          font-size: 18px;
      }

      a.hoverbtn:hover {
          background-color:hsl(210, 40%, 96%);
      }

      a.btn-try-free:hover {
          color: #fff;
      }

      .navbar .nav-link {
          color: rgb(75 85 99);
          font-weight: 400;
      }
      .navbar .nav-link:hover {
          color: rgb(17 24 39);
          font-weight: 400;
      }
      .btn-try-free {
          background-color: #0d6efd;
          color: #fff;
          border-radius: 8px;
          padding: 8px 18px;
          font-weight: 500;
      }
      .text-blue-dark {
          color: #2c3e50;
      }
      .text-muted-light {
          color: #777;
      }

      .trusted-by {
          font-size: 0.9rem;
          color: #555;
          margin-top: 20px;
          background: rgb(241, 245, 249);
          width: 100%;
          max-width: 255px;
          margin: 0px auto;
          border-radius: 50px;
          margin-bottom: 20px;
      }

      .trusted-by img {
          height: 20px;
          margin: 0 10px;
          filter: grayscale(100%);
          opacity: 0.7;
      }

      p.fotter-one {
          color: rgb(156 163 175) !important;
          font-size: 18px;
      }

      .footer-section ul li a {
          color: rgb(156 163 175) !important;
          font-size: 16px;
          font-weight: 500;
      }

      .footer-section ul li a:hover{
          color: #fff!important;
      }

      /* login page */

      input#rememberMe {
          border: 1px solid rgb(37 99 235) !important;
          border-radius: 50px;
      }

      .custom-border {
          border-color: hsl(214.3, 31.8%, 91.4%) !important; /* Light blue-gray border */
      }

      /* Custom styling for the "N" avatar in the bottom left */
      .bottom-left-avatar {
          position: fixed;
          bottom: 20px;
          left: 20px;
          width: 40px;
          height: 40px;
          background-color: #3f51b5; /* A shade of blue for the background */
          color: white;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: bold;
          font-size: 1.2rem;
          box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      }

      .form-control {
          height: 40px;
          border-radius: 0.75rem;
          border-color: hsl(214.3, 31.8%, 91.4%) !important;
          font-size: 0.875rem;
          line-height: 1.25rem;
          background-color: hsl(0, 0%, 100%);
      }