body {
      background-color: #f8f9fa;
      color: #212529;
    }
    .terms-header {
      background: linear-gradient(135deg, #0d6efd, #0a58ca);
      color: #fff;
      padding: 40px 0;
      margin-top: 70px;
    }
    .terms-content h2 {
      margin-top: 20px;
      font-size: 1.4rem;
      font-weight: 600;
    }
    .terms-content p,
    .terms-content li {
      line-height: 1.7;
    }
    .terms-content ul {
      padding-left: 1.2rem;
    }



/* software area css */


/* SECTION BACKGROUND */
.hero-area {
  background: linear-gradient(135deg, #1f1f1f, #2b2b2b);
  padding: 72px 0 56px;
}

/* TITLE */
.hero-title {
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 36px;
}

/* IMAGE CARD */
.hero-card {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 6; /* similar wide banner ratio */
  background: #2a2a2a;
}

.hero-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* filter: brightness(.92) contrast(1.02); */
}

/* BUTTON */
.hero-cta {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  border: 0;
  background: linear-gradient(90deg, #0a5bd8 0%, #0f78ff 35%, #33c06b 100%);
}


/* Optional: make it feel like your screenshot (subtle inner overlay) */
.hero-overlay {
  position: absolute;
  inset: 0;
  /* background: linear-gradient(
    to bottom,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.10) 35%,
    rgba(0,0,0,.18) 100%
  ); */
  pointer-events: none;
}

/* .btn-client{
  width: 100%;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 800;
  letter-spacing: .6px;
  color:#ffffff;
  background: linear-gradient(90deg, #0a5bd8 0%, #0f78ff 35%, #33c06b 100%);
  box-shadow:
    0 14px 28px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.14) inset;
  transition: transform .12s ease, filter .12s ease;
} */
/* .btn-client:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
} */

/* Responsive spacing tweaks */
@media (max-width: 768px) {
  .hero-area { padding: 52px 0 40px; }
  .hero-title { font-size: 1.6rem; margin-bottom: 22px; }
  .hero-card { border-radius: 18px; aspect-ratio: 16 / 8; }
  .hero-cta { top: 60%; }
}


/* ########################### Login Page css start ############################### */

/* ====== HERO BACKGROUND ====== */
.tm-login-hero{
  min-height: 100vh;
  padding: 48px 0;
  background:
    url("../img/login_bg.webp") center/cover no-repeat; /* <- change this */
  position: relative;
  overflow: hidden;
}

/* Darken + soft glow like the sample */
.tm-hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.22), rgba(255,255,255,0) 45%),
    linear-gradient(180deg, rgba(8,18,40,.55), rgba(8,18,40,.20) 40%, rgba(8,18,40,.55));
  pointer-events:none;
}

/* ====== CARD ====== */
.tm-login-card{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 34px 26px 28px;
}

/* ====== BRAND ====== */
.tm-logo{ max-height: 70px; }

.tm-brand-title{
  font-weight: 700;
  letter-spacing: .5px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.05;
}
.tm-accent{
  color: #7fb6ff;
  text-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.tm-brand-sub{
  color: rgba(255,255,255,.85);
  letter-spacing: 4px;
  font-weight: 500;
  margin-top: 2px;
  text-transform: lowercase;
}

/* ====== INPUTS ====== */
.tm-input{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.90);
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
}
.tm-input:focus{
  border-color: rgba(127,182,255,.85);
  box-shadow: 0 0 0 .25rem rgba(127,182,255,.25), 0 10px 25px rgba(0,0,0,.12);
}

/* ====== BUTTON ====== */
.tm-btn{
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 600;
  background: linear-gradient(180deg, #2f67d5, #1f4fb3);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 16px 30px rgba(0,0,0,.22);
}
.tm-btn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

/* ====== LINK ====== */
.tm-link{
  color: rgba(255,255,255,.92);
  text-decoration: none;
  font-weight: 500;
}
.tm-link:hover{ text-decoration: underline; }

/* small screens */
@media (max-width: 420px){
  .tm-login-card{ padding: 28px 18px 22px; }
}