:root {
            --primary-color: #0e2a47;
            --secondary-color: #1b5192;
            --bg-light: #F8FAFC;
            --primary: #3157d5;
            --primary-dark: #203fae;
            --primary-soft: #eef2ff;
            --secondary: #6f7c91;
            --dark: #182033;
            --muted: #667085;
            --border: #e8ebf2;
            --surface: #f7f8fc;
            --success: #19a974;
            --warning: #f59e0b;
            --danger: #ef6262;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-light);
        }
        h1, h2, h3, h4, h5, h6, .navbar-brand, .nav-item, .btn ,.f-kanit{
            font-family: 'Kanit', sans-serif;
        }
        .text-primary-custom {
            color: #569ef2;
        }
        .bg-primary-custom {
            background-color: #569ef2;
        }
        .bg-primary-dark {
            background-color: var(--secondary-color);
        }
        .section-title {
            font-size: clamp(1.9rem, 4vw, 2.5rem);
            /*font-weight: 800;*/
            letter-spacing: -.8px;
            line-height: 1.2;
        }
        .hero-section {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            margin:55px 0;
        }
        .hero-mockup {
            border-radius: 1rem;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            background: #fff;
            padding: 1rem;
        }

        .hero-background {
          background: url(../images/hero-bg.png) no-repeat;
          background-position: 50vw 0px;
          background-size: contain;
          padding: 55px 0;
        }
        /*----------*/
        .dashboard-wrap {
          position: relative;
        }
        
        .dashboard {
          background: #fff;
          border: 1px solid var(--border);
          border-radius: 22px;
          box-shadow: -15px -5px 30px rgba(24, 32, 51, .08);
          overflow: hidden;
        }
        
        .dashboard-top {
          padding: 7px 12px;
          border-bottom: 1px solid var(--border);
        }
        
        .dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          display: inline-block;
          background: #d7dce5;
        }
        
        .dash-sidebar {
          background: #f8f9fc;
          min-height: 360px;
          border-right: 1px solid var(--border);
        }
        
        .dash-menu {
          padding: 10px 7px;
        }
        
        .dash-menu div {
          padding: 9px 12px;
          color: var(--muted);
          font-size: .75rem;
          border-radius: 8px;
          margin-bottom: 4px;
        }
        
        .dash-menu .active {
          background: var(--primary-soft);
          color: var(--primary);
          font-weight: 600;
        }
        
        .dash-content {
          padding: 12px;
        }
        
        .stat-box {
          border: 1px solid var(--border);
          border-radius: 14px;
          padding: 15px;
          background: #fff;
        }
        
        .stat-number {
          font-family: 'Kanit', sans-serif;
          font-size: 1.75rem;
        }
        
        .stat-label {
          color: var(--muted);
          font-size: .875rem;
        }
        
        .chart {
          height: 80px;
          display: flex;
          align-items: end;
          gap: 7px;
        }
        
        .chart span {
          flex: 1;
          background: #dce5ff;
          border-radius: 5px 5px 0 0;
        }
        
        .chart span:nth-child(1) {
          height: 35%;
        }
        
        .chart span:nth-child(2) {
          height: 55%;
        }
        
        .chart span:nth-child(3) {
          height: 45%;
        }
        
        .chart span:nth-child(4) {
          height: 70%;
        }
        
        .chart span:nth-child(5) {
          height: 60%;
        }
        
        .chart span:nth-child(6) {
          height: 58%;
        }
        
        .chart span:nth-child(7) {
          height: 65%;
        }

        .chart span:nth-child(8) {
          height: 85%;
        }
        
        .chart span:nth-child(9) {
          height: 95%;
        }
        .chart span:nth-child(10) {
          height: 78%;
        }

        .chart span:nth-child(11) {
          height: 65%;
        }

        .chart span:nth-child(12) {
          height: 85%;
        }
        /*-----------*/
        .workflow-section {
          background: #fff;
        }
        
        .workflow {
          position: relative;
        }
        
        .workflow-line {
          position: absolute;
          top: 35%;
          left: 8%;
          right: 8%;
          height: 2px;
          /*background: #dfe4f0;*/
          border-top: 1px dashed #cfd6e3;
        }
        
        .workflow-item {
          position: relative;
          text-align: center;
          z-index: 2;
        }
        
        .workflow-number {
          width: 58px;
          height: 58px;
          margin: auto;
          margin-bottom: 0.5rem;
          border-radius: 50%;
          background: #fff;
          border: 2px solid #dce3fa;
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--primary);
          font-family: 'Kanit', sans-serif;
          font-weight: 600;
          /*width: 60px;
          height: 60px;
          margin: 0 auto 15px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: 'Kanit', sans-serif;
          font-weight: 600;
          position: relative;
          z-index: 2;*/
        }
        
        .workflow-item h5 {
          margin-top: 15px;
        }

        .workflow-box {
                  background: white;
                  padding: 20px;
                  border-radius: 10px;
                  border-left: 2px solid var(--secondary);
                  margin-bottom: 15px;
                  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
              }

          .role-pills {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          gap: 8px;
          }
          .role-pills span {
          color: var(--primary);
          background: #dde2f7;
          padding: 6px 12px;
          border-radius: 20px;
          }

        /*---------*/
        .feature-card {
            border: none;
            border-radius: 15px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }
        .feature-icon {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            background-color: rgb(0 71 255 / 10%);
            color: var(--secondary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.25rem;
            margin-bottom: 18px;
            margin-left: auto;
            margin-right: auto;
        }

        .icon-box {
            width: 60px;
            height: 60px;
            background-color: rgb(0 71 255 / 10%);
            color: var(--secondary-color);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 20px;
        }

        	.float-card {
            position: absolute;
            z-index: 2;
            background: #fff;
            border-radius: 10px;
            padding: 4px 8px;
            box-shadow: 0 10px 20px #15202b2b;
            gap: 9px;
            align-items: center;
            border: #eee 1px solid;
            color: var(--bs-dark);
          }
          .money {
            right: -15px;
            top: 20px;
            display: flex;
          }

          .setting {
            left: -30px;
            bottom: 15px;
          }
	   /*------------*/

	   .portal-screen {
		background: #fff;
		border: 1px solid var(--border);
		border-radius: 22px;
		padding: 18px;
		box-shadow: 0 20px 55px rgba(24, 32, 51, .09);
	}
	
	.portal-header {
		padding: 14px;
		background: var(--surface);
		border-radius: 13px;
	}
	
	.portal-menu {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	
	.portal-menu-item {
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 13px;
		background: #fff;
		font-size: .8rem;
	}
	
	.portal-menu-item i {
		color: var(--primary);
		margin-right: 6px;
	}

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

	.automation-card {
		padding: 26px;
		border-radius: 18px;
		background: #fff;
		border: 1px solid var(--border);
		height: 100%;
	}
	
	.automation-card .icon {
		font-size: 1.7rem;
		color: var(--primary);
	}

	/*-------Mobile------*/

     .mobile {
	border: #2d313a 8px solid;
	border-radius: 30px;
	padding: 15px;
	width: 80%;
	max-width: 300px;
	background: #aacbf8;
	margin: 0 auto;
   }
   .invoice {
	width: 80%;
	margin-right: 0;
	justify-self: end;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
   }	
   .chat {
	background: #ffffff;
	border-radius: 50px;
	padding: 5px 10px;
	justify-self: end;
	margin-bottom: 1rem;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
   }
   .mini {
	font-size: .7em;
   }


.message {
  display: flex;
  width: 100%;
  margin-bottom: 0.5rem;
}

.bubble {
  padding: 7px 12px;
  max-width: 75%;
  font-size: 15px;
  line-height: 1.4;
  word-wrap: break-word;
}

.message.received {
  justify-content: flex-start;
}
.message.received .bubble {
  background-color: #ffffff;
  color: #000000;
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.message.sent {
  justify-content: flex-end;
}
.message.sent .bubble {
  background-color: #95f996;
  border-radius: 18px 18px 4px 18px; 
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
.css-qr-code{
	width: 4px;
    height: 4px;
    margin-right: 35px;
    margin-top: -20px;
    background: #555;
	box-shadow:
	4px 0 #555,12px 0 #555,20px 0 #555,28px 0 #555,
	8px 4px #555,12px 4px #555,24px 4px #555,32px 4px #555,	
	0 8px #555,4px 8px #555,16px 8px #555,20px 8px #555,28px 8px #555,
	4px 12px #555,8px 12px #555,16px 12px #555,24px 12px #555,28px 12px #555,
	0 16px #555,12px 16px #555,20px 16px #555,32px 16px #555,
	8px 20px #555,12px 20px #555,16px 20px #555,28px 20px #555,
	0 24px #555,4px 24px #555,16px 24px #555,20px 24px #555,24px 24px #555,32px 24px #555,
	4px 28px #555,12px 28px #555,20px 28px #555,24px 28px #555,28px 28px #555,
	0 32px #555,8px 32px #555,16px 32px #555,24px 32px #555,32px 32px #555;
}


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





    @media (max-width: 991.98px) {
      .hero-background {
        background-position: 30vw 25vw !important;
        background-size: 80vw !important;
      }

    }

    @media (max-width: 767.98px) {
      .hero-background {
        background-position: 25vw 40vw !important;
        background-size: 85vw !important;
      }

      .workflow-line{
        display: none;
      }

    }

    @media (max-width: 575.98px) {
      .hero-background {
        background-position: 20vw 55vw !important;
        background-size: 140vw !important;
      }

      .portal-menu {
        grid-template-columns: 1fr;
      }

      .money {
        right: -10px;
        top: 20px;
        display: flex;
      }

      .setting {
        left: -5px;
            bottom: -45px;
      }

    }
    
    @media (max-width: 409.98px) {
      .hero-background {
        background-position: 15vw 75vw !important;
        background-size: 110vw !important;
      }

    }

     
    @media (max-width: 360.98px) {
      .hero-background {
        background-position: 15vw 75vw !important;
        background-size: 160vw !important;
      }

    }