:root{
      --tg-primary:#00264a;
      --tg-primary-soft:#003565;
      --tg-bg:#001528;
    }

    body{
      background:radial-gradient(circle at top,#003565 0,#000915 55%,#000 100%);
      color:#e5e7eb;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      padding-top:70px; /* fixed navbar space */
    }

    .bg-primary{background-color:var(--tg-primary)!important;}
    .btn-primary{
      background-color:var(--tg-primary)!important;
      border-color:var(--tg-primary-soft)!important;
    }
    .btn-primary:hover{
      background-color:var(--tg-primary-soft)!important;
      border-color:var(--tg-primary-soft)!important;
    }

    .hero{
      background:linear-gradient(135deg,rgba(0,38,74,0.95),#000814);
      border-radius:24px;
      border:1px solid rgba(148,163,184,0.3);
      box-shadow:0 18px 40px rgba(0,0,0,0.6);
    }

    .hero-badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.2rem .75rem;
      border-radius:999px;
      font-size:.78rem;
      border:1px solid rgba(148,163,184,.5);
      background:rgba(15,23,42,.8);
      color:#cbd5f5;
    }
    .hero-badge span{
      width:8px;
      height:8px;
      border-radius:999px;
      background:#22c55e;
      box-shadow:0 0 0 6px rgba(34,197,94,0.25);
    }

    .hero-title span{
      color:#7dd3fc;
    }

    .tool-card{
      background:linear-gradient(145deg,#001528,#000814);
      border-radius:16px;
      border:1px solid rgba(31,41,55,.9);
      padding:1rem 1rem 0.9rem;
      height:100%;
      display:flex;
      flex-direction:column;
      gap:.35rem;
    }
    .tool-tag{
      font-size:.75rem;
      padding:.15rem .6rem;
      border-radius:999px;
      border:1px solid rgba(148,163,184,.6);
      color:#cbd5f5;
    }
    .tool-desc{
      font-size:.88rem;
      color:#d1d5db;
    }
    .pros-cons small{
      font-size:.78rem;
      color:#e5e7eb;
    }
    .pros-cons span{
      display:block;
      font-size:.74rem;
      color:#9ca3af;
    }

    .ad-box{
      border-radius:16px;
      border:1px dashed rgba(148,163,184,.6);
      padding:.6rem;
      font-size:.8rem;
      color:#9ca3af;
      background:rgba(0,21,40,.7);
      text-align:center;
    }

    footer{
      border-top:1px solid rgba(15,23,42,.9);
      font-size:.85rem;
      color:#9ca3af;
    }
    footer a{color:#9ca3af;text-decoration:none;}
    footer a:hover{text-decoration:underline;}

    a.btn-outline-light.btn-sm{font-size:.8rem;padding:.25rem .7rem;}

.card {
    background-color: transparent;
    border: 1px solid #ccc;
    color: white;
}
.gapsection{
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.hero h1 span {
  background: linear-gradient(to right, #38bdf8, #a855f7);
    background-clip: border-box;
  -webkit-background-clip: text;
  color: transparent;
}

.fonth1{
  font-size: 50px;
  line-height: 1.5;
}

.btn-primary {
  padding: 0.65rem 1.35rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #38bdf8, #0ea5e9);
  border: none;
  color: #0b1120;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(59,130,246,0.6);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(59,130,246,0.7);
  color: #000814;
}
.shadow1 {
  background: linear-gradient(to right, #38bdf8, #a855f7);
    background-clip: border-box;
  background-clip: border-box;
  -webkit-background-clip: text;
  color: transparent;
}
.ad-box {
    min-height: 280px; /* ad unit অনুযায়ী ঠিক করো */
}