/* ==========================================================================
   Kohost Hosting Pricing Section
   All classes are prefixed with khp- to avoid collisions with
   Bootstrap / theme classes (.card, .btn, .badge, etc.)
   ========================================================================== */

.khp-section{
  --khp-bg-page:#F7F9FC;
  --khp-bg-card:#FFFFFF;
  --khp-bg-card-soft:#F5F7FB;
  --khp-ink:#111827;
  --khp-muted:#6B7280;
  --khp-hairline:#E5E7EB;
  --khp-blue:#2563EB;
  --khp-blue-dim:#1D4ED8;

  font-family:'Inter',sans-serif;
  background:var(--khp-bg-page);
  color:var(--khp-ink);
  padding:96px 20px;
  position:relative;
  overflow:hidden;
  background-image:radial-gradient(rgba(37,99,235,.06) 1px, transparent 1px);
  background-size:28px 28px;
  background-position:-14px -14px;
}

.khp-section *{
  box-sizing:border-box;
}

.khp-section::before{
  content:"";
  position:absolute;
  top:-200px;
  left:50%;
  transform:translateX(-50%);
  width:900px;
  height:500px;
  background:radial-gradient(ellipse at center, var(--khp-blue-glow), transparent 70%);
  pointer-events:none;
}

.khp-container{
  max-width:1180px;
  margin:auto;
  position:relative;
}

.khp-eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--khp-blue-dim);
  margin-bottom:18px;
}

.khp-eyebrow::before,
.khp-eyebrow::after{
  content:"";
  width:26px;
  height:1px;
  background:var(--khp-hairline);
}

.khp-title{
  text-align:center;
  font-family:'Space Grotesk',sans-serif;
  font-size:44px;
  font-weight:700;
  letter-spacing:-.01em;
  margin-bottom:16px;
  color:var(--khp-ink);
}

.khp-desc{
  text-align:center;
  color:var(--khp-muted);
  max-width:560px;
  margin:0 auto 64px;
  line-height:1.7;
  font-size:15.5px;
}

.khp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:26px;
  align-items:start;
}

.khp-card{
  background:var(--khp-bg-card);
  border:1px solid var(--khp-hairline);
  border-radius:16px;
  overflow:hidden;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  box-shadow:0 1px 2px rgba(17,24,39,.04);
}

.khp-card:hover{
  transform:translateY(-6px);
  border-color:#D1D5DB;
  box-shadow:0 20px 40px -12px rgba(17,24,39,.10);
}

.khp-card--popular{
  border-color:var(--khp-blue);
  box-shadow:0 0 0 1px var(--khp-blue), 0 30px 60px -20px var(--khp-blue-glow);
      position: relative;
}

.khp-card.khp-card--popular:hover .khp-badge{
    visibility: visible;
}

.khp-card--popular:hover{
  box-shadow:0 0 0 1px var(--khp-blue), 0 36px 70px -18px var(--khp-blue-glow);
}

.khp-termbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 18px;
  background:var(--khp-bg-card-soft);
  border-bottom:1px solid var(--khp-hairline);
}

.khp-dots{
  display:flex;
  gap:6px;
}

.khp-dots span{
  width:9px;
  height:9px;
  border-radius:50%;
  display:block;
}

.khp-dots span:nth-child(1){background:#FF5F57;}
.khp-dots span:nth-child(2){background:#FEBC2E;}
.khp-dots span:nth-child(3){background:#28C840;}

.khp-uptime{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:.04em;
  color:var(--khp-muted);
}

.khp-pulse{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--khp-blue);
  box-shadow:0 0 0 0 rgba(37,99,235,.5);
  animation:khp-ping 2.2s infinite;
}

@keyframes khp-ping{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.45);}
  70%{box-shadow:0 0 0 7px rgba(37,99,235,0);}
  100%{box-shadow:0 0 0 0 rgba(37,99,235,0);}
}

.khp-badge{
  position:absolute;
  top:14px;
  right:14px;
  background:var(--khp-blue);
  color:#fff;
  padding:5px 12px;
  border-radius:50px;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.05em;
  visibility: hidden;
}

.khp-body{
  padding:30px 30px 32px;
  position:relative;
}

.khp-plan{
  font-family:'Space Grotesk',sans-serif;
  font-size:24px;
  font-weight:700;
  margin:0 0 6px;
  color:var(--khp-ink);
}

.khp-tagline{
  color:var(--khp-muted);
  font-size:14px;
  margin:0 0 26px;
  line-height:1.5;
}

.khp-price-row{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:'JetBrains Mono',monospace;
}

.khp-price{
  font-size:40px;
  font-weight:700;
  color:var(--khp-ink);
}

.khp-price sup{
  font-size:16px;
  font-weight:600;
  color:var(--khp-muted);
  top:-14px;
  position:relative;
}

.khp-renew{
  margin:6px 0 26px;
  color:var(--khp-muted);
  font-size:12.5px;
  font-family:'JetBrains Mono',monospace;
}

.khp-specs{
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  border:1px solid var(--khp-hairline);
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:26px;
  background:var(--khp-bg-card-soft);
}

.khp-spec-row{
  display:flex;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px dashed var(--khp-hairline);
}

.khp-spec-row:last-child{border:none;}

.khp-spec-key{
  color:var(--khp-muted);
  letter-spacing:.04em;
}

.khp-spec-val{
  color:var(--khp-ink);
  font-weight:600;
  text-align:right;
}

.khp-features{
  list-style:none;
  margin:0 0 30px;
  padding:0;
}

.khp-features li{
  padding:9px 0;
  font-size:14px;
  color:#374151;
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.khp-features li::before{
  content:"›";
  color:var(--khp-blue-dim);
  font-weight:700;
  font-family:'JetBrains Mono',monospace;
  line-height:1.4;
}

.khp-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:14px;
  text-align:center;
  text-decoration:none;
  background:#fff;
  color:var(--khp-ink);
  border:1px solid var(--khp-hairline);
  border-radius:10px;
  font-weight:600;
  font-size:14.5px;
  transition:.25s;
}

.khp-btn:hover,
.khp-btn:focus-visible{
  border-color:var(--khp-blue);
  color:var(--khp-blue-dim);
  text-decoration:none;
}

.khp-btn:focus-visible{
  outline:2px solid var(--khp-blue);
  outline-offset:2px;
}

.khp-btn-arrow{
  transition:transform .25s;
}

.khp-btn:hover .khp-btn-arrow{
  transform:translateX(3px);
}

.khp-card--popular .khp-btn{
  background:var(--khp-blue);
  color:#fff;
  border-color:var(--khp-blue);
}

.khp-card--popular .khp-btn:hover{
  background:var(--khp-blue-dim);
  color:#fff;
}

@media(max-width:768px){
  .khp-title{font-size:32px;}
  .khp-section{padding:64px 16px;}
}

@media (prefers-reduced-motion: reduce){
  .khp-pulse{animation:none;}
  .khp-card,
  .khp-btn,
  .khp-btn-arrow{transition:none;}
  .khp-card:hover{transform:none;}
}

/*Header*/
.navbar .container {
    display: flex;
    flex-wrap: nowrap;
}
header.header .logo-img {
    max-width: 140px;
}
header#header {
    padding: 0;
}
@media (min-width: 320px) and (max-width: 579px) {
    img.hero-img {
    display: none;
}
.tt-hero h1 {
    font-size: 2rem;
}
.navbar-brand:not(.tt-double-header .navbar-brand):not(#registration .navbar-brand) {
        width: 38%;
        display: block;
        text-align: center;
    }
header.header .logo-img {
    max-width: 140px;
    width: 95px;
}
}

.aptixo-host-why {
    background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.87)), url(/templates/kohost/img/server-bg.webp);
    background-size: cover;
    background-position: center center;
}
/*Hosting by WordPress experts*/
section.bg-white.cta {
    margin-top: -350px;
}

section#aptixo-host-wordpress {
    background-image: linear-gradient(rgb(15 23 42 / 90%), rgb(15 23 42 / 87%)), url(/templates/kohost/img/server-bg.webp);
    background-size: cover;
    background-position: center;
}
.aptixo-host-wp-backdrop {
    background: linear-gradient(150deg, #ffffff30, #e0e9ff30);
    border-radius: 20px;
    padding: 32px;
    position: relative;
}
section#aptixo-host-wordpress h2 {
    color: #fff;
}
.aptixo-host-desc {
    color: #a7b5cf;
}
