@media (max-height: 650px) {
     .login-left {
          padding: 0px 130px;
     }
}

@media (min-width: 1270px) {
     .container-fluid {
          padding: 0px 74px 0px 65px;
          max-width: 1440px;
     }

     .container {
          max-width: 1285px;
     }
}

@media (max-width: 1403px) {
     .chat-left-box .nav-pills .nav-link {
          padding: 13px 17px;
     }
}

@media (max-width: 1365px) {
     .pdf-box-left {
          padding: 31px 18px;
     }

     .table thead tr th {
          padding: 18px 10px;
     }

     .table tbody tr td {
          padding: 18px 10px;
     }

     .dashboard-box {
          padding: 20px 12px;
     }

     .credit-content {
          margin-top: -79px;
     }

     .box-heading h6 {
          font-size: 14px;
          line-height: 18px;
     }

     .login-right h2 {
          font-size: 30px;
     }

     .blog-box .blog-box-body p {
          font-size: 16px;
     }

     .right-side {
          padding: 40px 48px 57px 40px;
     }

     .chat-left-box .nav-pills {
          flex-wrap: wrap;
     }

     .pdf-box-left form {
          margin-top: 48px;
     }
      /* new css */
      .blog-page-right h2 {
          font-size: 44px;
     }     
}

@media (max-width: 1199px) {
     .sidebar {
          max-width: 240px;
          padding: 20px 16px 24px 12px;
     }

     .blog-sec .principle-box .img-holder img {
          max-height: 180px;
          min-height: 180px;
     }

     .notifaction-wrapper {
          padding: 16px 12px;
     }

     .dashboard-box-wrapper {
          grid-template-columns: 6fr 6fr;
          grid-gap: 0px 24px;
     }

     .dashboard-box {
          grid-column: span 2 / span 2;
     }

     .table thead tr th {
          font-size: 14px;
          padding: 18px 14px;
     }

     .table tbody tr td {
          padding: 18px 14px;
     }

     .login-left {
          width: 52%;
          padding: 0px 30px !important;
     }

     .services-box {
          grid-gap: 14px;
     }

     .ai-serice-box {
          border-radius: 16px;
          padding: 24px 12px 20px;
     }

     .service-page .profile-box {
          padding: 36px 24px 28px;
     }

     .contact-box {
          padding: 32px 28px 26px 32px;
     }

     .title p {
          font-size: 16px;
          line-height: 24px;
     }

     .image-wrapper .img-holder {
          bottom: -45px;
          right: -31px;
     }

     .body-text p {
          font-size: 16px;
          line-height: 24px;
     }

     .data-card-body p {
          font-size: 16px;
          line-height: 24px;
     }

     .blog-box .blog-box-body p {
          line-height: 24px;
     }

     .case-box-header h4 {
          font-size: 20px;
     }

     .case-box {
          padding: 32px 24px 40px;
     }

     .case-box p {
          font-size: 16px;
          line-height: 24px;
     }

     .ai-box {
          padding: 38px 36px 34px;
     }

     .product-box-left {
          width: 50%;
     }

     .title h2 {
          font-size: 34px;
          line-height: 38px;
     }

     .text-box h1 {
          font-size: 50px;
     }

     .form-switch .form-check-input {
          margin-left: 0;
     }

     .right-side {
          padding: 40px 24px 57px 18px;
     }

     .sidebar-inner .nav-link {
          font-size: 14px;
          padding: 12px;
          grid-gap: 11px;
     }

     .history-box {
          padding: 12px;
     }

     .topbar {
          width: calc(100% - 304px);
     }

     .right-content {
          width: calc(100% - 256px);
     }

     .pdf-box-right {
          width: 100%;
     }


     .pdf-box-left {
          width: 100%;
          margin-bottom: 48px;
     }

     .pdf-box-wrapper {
          display: block;
     }

     .document-history h4 {
          font-size: 14px;
     }

     .faq-page .nav-link {
          padding: 5px 9px;
     }

     .work-cards {
          padding: 0px 20px;
     }

     .techonology-box {
          width: 70px;
          height: 70px;
          padding: 16px;
     }

     .techonology-list h6 {
          font-size: 18px;
     }

     .principle-box {
          padding: 40px 18px 25px;
     }

     .about-hero {
          max-height: 52vw;
     }
     /* new css */
     .blog-page-right h2 {
          font-size: 36px;
          margin-bottom: 24px;
      }
      .blog-inner-text {
          padding: 40px 0;
      }
      .blog-left-title {
          padding-bottom: 40px;
      }

}

@media (max-width: 991px) {
     .main {
          padding: 22px 14px;
     }

     .about-page .title h4 {
          font-size: 20px;
          line-height: 32px;
     }

     .principle-box {
          margin-bottom: 20px;
          height: auto;
     }

     .service-sec .nav-pills .nav-link {
          font-size: 16px;
          padding: 14px 20px;
          margin-bottom: 16px;
     }

     .tab-content-box p {
          font-size: 16px;
          line-height: 150%;
     }

     .solution-sec .principle-box {
          padding: 20px 16px 24px;
     }

     .solution-sec .img-circle {
          width: 64px;
          height: 64px;
          padding: 18px;
     }

     .solution-sec .principle-box h4 {
          font-size: 18px;
          line-height: 26px;
     }

     .contact-boxes .box {
          grid-gap: 10px;
          padding: 16px 14px 18px;
     }

     .solution-sec h2 {
          font-size: 48px;
     }

     .service-sec .nav-pills .nav-link.active {
          padding: 24px 20px;
     }

     .work-card h4 {
          font-size: 20px;
     }

     .work-card p {
          font-size: 16px;
     }

     .card-circle .card-icon {
          padding: 40px;
     }

     .login-left {
          display: none;
     }

     .account-page .login-right {
          width: 100%;
          padding: 36px 20px 28px;
     }

     .product-hero .text-box p {
          font-size: 20px;
          line-height: 130%;
     }

     .work-box {
          padding: 0px 54px 0px 42px;
     }

     .service-box {
          padding: 28px 36px 36px 24px;
     }



     .service-title-box {
          font-size: 14px;
          line-height: 36px;
          padding: 4px 20px;
     }

     .service-box .title h4 {
          font-size: 24px;
     }

     .work-box h2 {
          font-size: 26px;
     }

     .product-hero {
          padding: 145px 0px 80px;
     }

     .product-hero .text-box h2 {
          font-size: 30px;
     }

     .text-box h1 {
          font-size: 38px;
     }

     .about-sec .title span {
          font-size: 20px;
          line-height: 26px;
     }

     .title h6 {
          font-size: 16px;
          line-height: 13px;
     }

     .image-wrapper .img-holder {
          bottom: -26px;
          right: -22px;
          width: 55px;
     }

     .product-sec .nav-pills .nav-link {
          font-size: 18px;
          min-width: 150px;
          height: 55px;
     }

     .product-box {
          flex-wrap: wrap;
          grid-gap: 28px;
     }

     .data-card-body {
          padding: 12px 16px 22px 16px;
     }

     .data-card-body p {
          font-size: 14px;
          line-height: 20px;
     }

     .data-card-body span {
          font-size: 14px;
          line-height: 16px;
     }

     .ai-box .nav-pills .nav-link {
          font-size: 16px;
     }

     .case-box {
          margin-top: 24px;
     }

     footer .text-box h2 {
          font-size: 36px;
          line-height: 44px;
     }

     .footer-links li a {
          line-height: 32px;
     }


     footer .text-box {
          max-width: 342px;
     }

     .blog-card-wrapper {
          display: flex;
          grid-gap: 24px;
     }

     .product-box-left {
          width: 100%;
     }

     .title ul li {
          grid-gap: 10px;
          margin-bottom: 10px;
     }

     .divider {
          max-width: 130px;
     }

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

     .topbar {
          width: calc(100% - 296px);
     }

     .topbar {
          padding: 12px 20px 12px 14px;
     }

     .sidebar {
          left: -100%;
     }

     .right-content-copy{
          width: 100%;
     }

     .right-content {
          width: 100%;
          height: 100%
     }


     .topbar {
          width: calc(100% - 38px);
     }

     .hamburger-menu {
          display: block;
          width: 20px;
     }

     .nav-left-side {
          display: flex;
          align-items: center;
          grid-gap: 16px;
     }

     .sidebar {
          height: calc(100vh - 124px);
          z-index: 9999;
          bottom: 16px;
     }

     .sidebar-inner {
          height: calc(100vh - 152px);
     }

     .navbar-toggler:focus {
          box-shadow: none;
     }

     .navbar-nav .nav-item .nav-link {
          padding: 7px 17px;
     }

     .nav-right {
          padding: 0px 16px 40px;
     }

     .navbar-nav {
          padding: 20px 0px;
     }

     .navbar-collapse {
          background-color: #fff;
          border-radius: 20px;
     }
       /* new css */
     .blog-page-right h2 {
          font-size: 28px;
          margin-bottom: 20px;
      }
}

@media (max-width: 767px) {
     .product-sec .nav-pills .nav-link {
          font-size: 16px;
          min-width: 122px;
          height: 46px;
     }

     .user-page .form {
          margin: 14px 0px 18px;
     }

     .modal-box .title {
          padding: 24px 0px;
     }

     .modal-2 .modal-dialog {
          margin: 20px;
     }

     .modal-box .title p {
          margin-bottom: 16px;
          min-height: auto;
     }

     .modal-2 .modal-body {
          padding: 10px;
     }

     .modal-box {
          grid-template-columns: 6fr;
     }

     .right-divider {
          border-bottom: 1px solid #d5a9a9;
          border-right: none;
     }

     .blog-sec .title h4 {
          font-size: 32px;
          margin-bottom: 30px;
     }

     .blog-sec {
          padding: 100px 0px 50px;
     }

     .images-wrapper {
          display: flex;
          grid-gap: 24px;
     }

     .about-page .work-box {
          padding: 44px 15px 35px;
     }

     .about-page .work-box p {
          font-size: 18px;
          line-height: 146%;
     }

     .top-space {
          margin-top: 0px;
     }

     .about-hero {
          max-height: 60vw;
          padding: 106px 0px 0px;
     }

     .about-hero h2 {
          font-size: 34px;
          margin: 0 auto 24px;
     }

     .vision-sec {
          padding: 235px 0px 40px;
     }

     .accordion-list {
          overflow-x: scroll;
          padding-bottom: 6px;
     }

     .accordion-list-faq {
          overflow-x: scroll;
          padding-bottom: 6px;
          background-color: #FFDDD0;
          background: #FFF;
          color: #FF4800;
          

     }

     .faq-page .nav-pills {
          width: 616px;
     }

     .login-right {
          padding: 0px 20px 40px 20px;
     }

     .login-right {
          padding: 50px 20px 40px 20px;
     }

     .services-box {
          grid-template-columns: 6fr 6fr;
     }


     .work-box .img-holder {
          margin-bottom: 0;
          order: 1;
     }

     .work-box-title {
          order: 2;
     }

     .work-box {
          padding: 0px 20px 40px 20px;
          flex-wrap: wrap;
          border-radius: 16px;
          justify-content: end;
     }

     .ai-box {
          padding: 24px;
     }

     .product-sec .nav-pills {
          grid-gap: 9px;
     }

     .ai-box .nav-pills .nav-link {
          line-height: 27px;
          padding: 0 8px 5px;
     }

     .footer-links {
          flex-wrap: wrap;
     }

     .hero-sec {
          padding: 100px 0px 64px;
     }

     .image-wrapper .img-holder {
          bottom: -24px;
          right: 9px;
     }

     .avatar-content {
          display: none;
     }

     .left-side {
          padding: 26px 10px;
     }

     .left-side a {
          grid-gap: 8px;
          font-size: 12px;
          padding: 0px 12px 0px 15px;
          margin-bottom: 16px;
     }

     .notifaction-toggle {
          padding: 16px 4px 16px;
     }

     .activity-page .form-group .form-control {
          height: 52px;
     }

     .activity-page .profile-box form {
          grid-gap: 40px;
     }

     .profile-box {
          padding: 24px 16px;
     }

     .chat-box span {
          display: none;
     }

      /* new css */
      .blog-sidebar {
          position: static;
          height: auto;
     }
     .blog-left-title {
          padding-bottom: 14px;
      }
      .blog-sidebar ul{
          display: none;
      }
      .blog-page-right h2 {
          font-size: 24px;
      }
      .blog-left-title {
          padding-bottom: 30px;
      }
      .blog-inner-text {
          padding: 20px 0;
      }
}

@media (max-width: 590px) {
     .table-responsive .table {
          width: 590px;
     }
}

@media (max-width: 575px) {
     .chat-box {
          padding: 14px 12px 14px 14px;
     }

     .notifaction-wrapper {
          flex-wrap: wrap;
          position: relative;
     }

     .notifaction-wrapper p span {
          position: absolute;
          top: 30px;
          right: 0;
     }

     .notifaction-right-content {
          flex: auto;
          grid-gap: 0;
     }

     .notifaction-wrapper p {
          margin-bottom: 0px !important;
     }

     .dashboard-box {
          grid-column: auto;
     }

     .dashboard-box-wrapper {
          grid-template-columns: 12fr;
     }

     .user-page .form {
          flex-wrap: wrap;
     }

     .about-hero {
          max-height: 80vw;
          padding: 106px 0px 0px;
     }

     .about-hero h2 {
          font-size: 28px;
          line-height: 127%;
     }

     .contact-boxes {
          grid-template-columns: 12fr;
     }

     .vision-sec {
          padding: 130px 0px 40px;
     }

     .mian {
          padding: 22px 13px;
     }

     .login-right .nav-pills .nav-link {
          grid-gap: 8px;
          font-size: 16px;
          line-height: 34px;
     }

     .login-right h2 {
          font-size: 26px;
     }

     .login-right p {
          font-size: 16px;
     }

     .login-right .btn-pdf {
          padding: 18px 10px;
     }

     .service-page .profile-box {
          padding: 36px 16px 28px;
     }

     .ai-serice-box {
          border-radius: 12px;
          padding: 18px 11px 18px;
     }

     .service-page .text-box h4 {
          font-size: 20px;
          margin-top: 20px;
     }

     .product-hero .text-box p {
          font-size: 16px;
     }

     .form .msg-input {
          height: 161px !important;
     }

     .product-hero {
          padding: 102px 0px 56px;
     }

     .service-title-box {
          font-size: 12px;
          line-height: 32px;
          padding: 4px 18px;
     }

     .service-box {
          padding: 20px 24px 28px 18px;
     }

     .contact-box {
          padding: 24px 18px 16px 16px;
     }

     .text-box h1 {
          font-size: 28px;
     }

     .product-box {
          padding: 20px 16px 26px 16px;
     }

     .title h3 {
          font-size: 22px;
          line-height: 28px;
     }

     .ai-box p {
          font-size: 14px;
          line-height: 24px;
          flex: 1;
     }

     .footer-links {
          grid-gap: 16px;
     }

     .blog-card-wrapper {
          display: block;
     }

     .ai-box h4 {
          font-size: 20px;
          line-height: 30px;
     }

     .title h2 {
          font-size: 28px;
          line-height: 38px;
     }

     .form .form-control {
          height: 48px;
          padding: 20px 16px;
     }

     .form .form-group {
          margin-bottom: 14px;
     }

     .profile-box p {
          margin-bottom: 24px;
     }

     .left-side {
          max-width: 100%;
          overflow-x: scroll;
          padding: 14px 10px;
     }

     .left-side a {
          padding: 0px 4px 0px 1px;
          width: fit-content;
          margin-bottom: 0;
     }

     .form-switch .form-check-input {
          margin-left: 0;
     }

     .left-side a.active {
          margin-bottom: 0px;
     }

     .tab-links {
          grid-gap: 10px;
          width: 812px;
          display: flex;
          align-items: center;
     }

     .notifaction-box {
          display: block;
     }

     .activity-page .profile-box form {
          display: block;
     }

     .activity-page .profile-box .form-select {
          max-width: 100%;
          margin-top: 20px;
     }

     .avatar-menu .avatar {
          font-size: 14px;
          width: 36px;
          height: 36px;
     }

     .right-nav {
          grid-gap: 10px;
     }

     .balance-box h6 {
          font-size: 12px;
     }

     .topbar {
          padding: 12px 12px 12px 14px;
          width: calc(100% - 28px);
          right: 14px;
     }

     .intro-paragraph p {
          margin-bottom: 0px;
     }

     .chat-left-box {
          padding: 24px 20px 25px 18px;
     }

     .pdf-box-left form .form-control {
          border-radius: 6px;
          font-size: 16px;
          height: 52px;
          padding-left: 16px;
     }

     .btn-send {
          width: 36px;
          height: 36px;
          right: 12px;
          padding: 0;
     }

     .balance-box {
          padding: 11px 8px;
          grid-gap: 4px;
     }
}


@media (max-width: 375px) {}

.spinner {
     border: 4px solid #f3f3f3; /* Light grey */
     border-top: 4px solid #FF6B30; /* Blue */
     /*border-radius: 50%;*/
     width: 50px;
     height: 50px;
     animation: spin 2s linear infinite;
     /*margin: 20px auto;*/
 }
 
 @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }

 #processingMessage {
     font-size: 14px;
     color: #FF6B30;  /*Red color to make it stand out */
     /*font-weight: bold;*/
     text-align: center;
     margin-top: 20px;
 }
 #stepMessage {
     font-size: 16px;
     color: #333;  /*Red color to make it stand out */
     /*font-weight: bold;*/
     text-align: center;
     margin-top: 20px;
 }

 #timeElapsed {
     font-size: 16px;
     color: #333;  /*Red color to make it stand out */
     /*font-weight: bold;*/
     text-align: center;
     margin-top: 20px;
 }

 .processing-container {
     background-color: #f9f9f9;
     border: 1px solid #ddd;
     border-radius: 8px;
     padding: 20px;
     margin-top: 20px;
     text-align: center;
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     animation: fadeIn 0.5s ease-in-out;
 }
 
 .processing-header {
     font-size: 1.2rem;
     font-weight: bold;
     color: #333;
     margin-bottom: 10px;
 }
 
 .progress-messages {
     display: flex;
     flex-direction: column;
     gap: 10px;
     justify-content: center;
     align-items: center;
 }
 
 .step-message {
     font-size: 1rem;
     font-weight: 500;
     color: #555;
 }
 
 .time-elapsed {
     font-size: 0.9rem;
     color: #888;
 }
 
 .spinner {
     margin-top: 10px;
     border: 4px solid #f3f3f3;
     border-top: 4px solid #FF6B30;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
 }
 
 
 /* Keyframes for spinner animation */
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }
 
 /* Keyframes for fade-in animation */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: scale(0.95);
     }
     to {
         opacity: 1;
         transform: scale(1);
     }
 }