
/* =========================================================
   HostPinnacle-complete front page design (NyumbaniHost)
   Palette: navy #002b42 / #003456, lime #87c722, blue gradient hero
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800&display=swap');

body.asasi-marketing-home {
  background: #ffffff !important;
  background-image: none !important;
  font-family: 'Urbanist', 'Jost', sans-serif !important;
  color: #0c293a;
}
body.asasi-marketing-home #main-body,
body.asasi-marketing-home #main-body > .container,
body.asasi-marketing-home .primary-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}
body.asasi-marketing-home .master-breadcrumb,
body.asasi-marketing-home .home-domain-search,
/* marketing nav shown sitewide via hp-site.css */

/* ---- Header chrome like HostPinnacle ---- */
body.asasi-marketing-home #header {
  margin-left: 0 !important;
  width: 100% !important;
  background: #fff !important;
  box-shadow: 0 4px 24px rgba(0,43,66,.08);
}
body.asasi-marketing-home #header .topbar {
  background: #002b42 !important;
  color: #fff !important;
}
body.asasi-marketing-home #header .navbar.navbar-light {
  background: #fff !important;
  border: 0 !important;
}
body.asasi-marketing-home #header .navbar-brand span,
body.asasi-marketing-home #header .navbar-brand {
  color: #002b42 !important;
}
body.asasi-marketing-home #header .main-navbar-wrapper {
  background: #fff !important;
  border-bottom: 1px solid #eef2f5;
}
body.asasi-marketing-home #header #nav > li > a,
body.asasi-marketing-home #header .navbar-nav .nav-link {
  color: #002b42 !important;
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: .82rem !important;
  letter-spacing: .03em;
}
body.asasi-marketing-home #header #nav > li > a:hover {
  color: #87c722 !important;
}
body.asasi-marketing-home #footer {
  margin-left: 0 !important;
  width: 100% !important;
  background: #003456 !important;
}
body.asasi-marketing-home #footer .nh-footer-col h5 { color: #87c722 !important; }
body.asasi-marketing-home #footer a { color: rgba(255,255,255,.85) !important; }
body.asasi-marketing-home #footer .copyright { color: #cecece !important; }

.hp-home {
  font-family: 'Urbanist', sans-serif;
  color: #0c293a;
  overflow-x: hidden;
}
.hp-home .container { max-width: 1200px; }

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .75rem 1.6rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none !important;
  border: 2px solid transparent;
  transition: .2s ease;
}
.hp-btn-primary {
  background: linear-gradient(95.45deg, #0082F8 0.64%, #1C40F2 98.23%);
  color: #fff !important;
  border: 0;
  box-shadow: 0 12px 28px rgba(28,64,242,.35);
}
.hp-btn-primary:hover { filter: brightness(1.05); color: #fff !important; }
.hp-btn-lime {
  background: #87c722 !important;
  color: #002b42 !important;
  border-color: #87c722 !important;
  font-weight: 800;
}
.hp-btn-lime:hover { background: #78b41b !important; color: #002b42 !important; }
.hp-btn-outline-navy {
  background: transparent !important;
  color: #002b42 !important;
  border-color: #002b42 !important;
  width: 100%;
  margin-top: 1rem;
}
.hp-btn-outline-navy:hover { background: #002b42 !important; color: #fff !important; }

.hp-kicker {
  color: #87c722;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .5rem;
}
.hp-section-title {
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 800;
  color: #002b42;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
  line-height: 1.2;
}
.hp-lead {
  max-width: 46rem;
  margin: 0 auto 2rem;
  color: #4a6270;
  font-size: 1.05rem;
}
.hp-text {
  color: #4a6270;
  line-height: 1.7;
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* HERO */
.hp-hero {
  position: relative;
  background-color: #000F57;
  background-image: url("../img/heroes/hero-homepage.jpg");
  background-size: cover;
  background-position: center;
  min-height: 560px;
  padding: 3.5rem 0 4rem;
  overflow: hidden;
  isolation: isolate;
}
.hp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(278.54deg, rgba(0, 29, 172, 0.82) 15.93%, rgba(0, 15, 87, 0.88) 98.7%),
    radial-gradient(circle at 15% 80%, rgba(135,199,34,.16), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(0,130,248,.18), transparent 45%);
  pointer-events: none;
}
.hp-hero-slides { position: relative; z-index: 1; }
.hp-slide {
  display: none;
  animation: hpFade .55s ease;
}
.hp-slide.is-active { display: block; }
@keyframes hpFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.hp-slide-sub {
  color: #87c722 !important;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .75rem;
}
.hp-slide-title {
  color: #fff !important;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.hp-slide-lead {
  color: #ffffff !important;
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.hp-slide-lead mark {
  background: #87c722;
  color: #002b42;
  padding: .1rem .4rem;
  border-radius: 4px;
  font-weight: 800;
}
.hp-check-list {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
}
.hp-check-list li {
  position: relative;
  color: #fff;
  padding: .4rem 0 .4rem 1.85rem;
  font-size: 1rem;
}
.hp-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .35rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: rgba(135,199,34,.2);
  color: #87c722;
  font-size: .75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.35rem;
  text-align: center;
}
.hp-slide-img {
  max-width: min(100%, 480px);
  height: auto;
  filter: drop-shadow(0 25px 40px rgba(0,0,0,.35));
  animation: hpFloat 4.5s ease-in-out infinite;
}
@keyframes hpFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hp-hero-dots {
  position: absolute;
  left: 0; right: 0; bottom: 1.25rem;
  display: flex;
  justify-content: center;
  gap: .5rem;
  z-index: 2;
}
.hp-hero-dots button {
  width: 12px; height: 12px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.35);
  padding: 0;
  cursor: pointer;
}
.hp-hero-dots button.is-active {
  background: #87c722;
  width: 28px;
}

/* DOMAIN */
.hp-domain {
  padding: 4rem 0 3.5rem;
  background: #f7fafc;
}
.hp-domain-form { max-width: 720px; margin: 1.5rem auto 2rem; }
.hp-domain-bar {
  display: flex;
  gap: .5rem;
  background: #fff;
  border: 1px solid #dbe3ea;
  border-radius: 8px;
  padding: .45rem;
  box-shadow: 0 18px 40px rgba(0,43,66,.08);
}
.hp-domain-bar input {
  flex: 1;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: .85rem 1rem !important;
  font-size: 1.05rem !important;
  background: transparent !important;
}
.hp-tld-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
}
@media (min-width: 768px) {
  .hp-tld-row { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px) {
  .hp-tld-row { grid-template-columns: repeat(7, 1fr); }
}
.hp-tld {
  background: #fff;
  border: 1px solid #e4ebf0;
  border-radius: 10px;
  padding: 1.1rem .75rem;
  text-align: center;
  text-decoration: none !important;
  color: inherit;
  transition: .2s ease;
}
.hp-tld:hover { border-color: #87c722; transform: translateY(-2px); }
.hp-tld strong { display: block; color: #002b42; font-size: 1.15rem; font-weight: 800; }
.hp-tld span { display: block; margin-top: .35rem; color: #5b7382; font-size: .85rem; }

/* WELCOME */
.hp-welcome { padding: 4.5rem 0; background: #fff; }
.hp-welcome-img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 35px rgba(0,43,66,.15));
}

/* PRICING */
.hp-pricing {
  padding: 4rem 0 4.5rem;
  background: linear-gradient(180deg, #f4f8fb 0%, #ffffff 100%);
}
.hp-pricing-row { margin-top: 1.5rem; }
.hp-price-card {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 2.25rem 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 20px 50px rgba(0,43,66,.1);
  border: 1px solid #eef2f5;
  overflow: hidden;
  height: calc(100% - 1.5rem);
  display: flex;
  flex-direction: column;
}
.hp-price-card.is-popular {
  border-color: rgba(135,199,34,.55);
  box-shadow: 0 24px 55px rgba(135,199,34,.2);
}
.hp-popular {
  position: absolute;
  top: 42px;
  right: -78px;
  width: 260px;
  text-align: center;
  background: linear-gradient(287.85deg, #87c722 0%, #6aa816 95.32%);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  padding: .55rem 0;
  transform: rotate(40deg);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hp-price-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #002b42;
  margin: 0;
}
.hp-from {
  display: block;
  margin-top: 1.1rem;
  color: #1C40F2;
  font-size: .9rem;
  font-weight: 700;
}
.hp-price {
  font-size: 2rem;
  font-weight: 800;
  color: #002b42;
  margin: .35rem 0 .75rem;
  line-height: 1.15;
}
.hp-price span {
  font-size: .95rem;
  font-weight: 600;
  color: #5b7382;
  margin-left: .25rem;
}
.hp-plan-desc { color: #5b7382; margin-bottom: 1rem; }
.hp-features {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 150px;
  overflow: hidden;
  transition: height .3s ease;
  flex: 0 0 auto;
}
.hp-features.is-open { height: auto; }
.hp-features li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-size: .9rem;
  color: #334155;
  margin-top: .7rem;
}
.hp-features li i { color: #1C40F2; margin-top: .15rem; }
.hp-expand {
  background: transparent;
  border: 0;
  color: #002b42;
  font-weight: 700;
  font-family: inherit;
  padding: .85rem 0;
  text-align: left;
  cursor: pointer;
}
.hp-expand i {
  display: inline-flex;
  width: 20px; height: 20px;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0,43,66,.08);
  margin-right: .35rem;
  font-size: .7rem;
}
.hp-price-card .hp-btn-lime { width: 100%; margin-top: 1rem; }

/* SMS */
.hp-sms { padding: 1rem 0 4rem; }
.hp-sms-card {
  border-radius: 16px;
  padding: 3rem 2.5rem;
  background-size: cover !important;
  background-position: center !important;
  color: #fff;
  box-shadow: 0 25px 60px rgba(0,43,66,.3);
  min-height: 280px;
  display: flex;
  align-items: center;
}
.hp-sms-copy { max-width: 36rem; }
.hp-sms-price {
  display: inline-block;
  background: #87c722;
  color: #002b42;
  font-weight: 800;
  padding: .35rem .75rem;
  border-radius: 4px;
  margin-bottom: .85rem;
}
.hp-sms-copy h2 {
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  margin: 0 0 .35rem;
}
.hp-sms-copy h3 {
  color: #87c722;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 .85rem;
}
.hp-sms-copy p { color: rgba(255,255,255,.9); line-height: 1.65; margin-bottom: 1.25rem; }

/* VPS */
.hp-vps { padding: 3.5rem 0 4rem; background: #fff; }
.hp-vps-grid { margin: 1.25rem 0; }
.hp-vps-item {
  background: #f4f8fb;
  border: 1px solid #e4ebf0;
  border-radius: 10px;
  padding: .9rem 1rem;
  margin-bottom: .85rem;
  font-weight: 700;
  color: #002b42;
  font-size: .92rem;
}
.hp-vps-item i { color: #87c722; margin-right: .45rem; }
.hp-vps-img { max-width: min(100%, 460px); height: auto; }

/* WHY */
.hp-why { padding: 4rem 0; background: #f7fafc; }
.hp-why-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.75rem 1.35rem;
  text-align: center;
  height: 100%;
  margin-bottom: 1.25rem;
  box-shadow: 0 14px 35px rgba(0,43,66,.07);
  border: 1px solid #eef2f5;
}
.hp-why-card img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 1rem; }
.hp-why-card h3 { font-size: 1.05rem; font-weight: 800; color: #002b42; margin: 0 0 .65rem; }
.hp-why-card p { margin: 0; color: #5b7382; font-size: .92rem; line-height: 1.55; }

/* SPEED */
.hp-speed { padding: 4rem 0; background: #fff; }
.hp-speed-list { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; }
.hp-speed-list li {
  font-weight: 700;
  color: #002b42;
  margin: .55rem 0;
  font-size: 1.02rem;
}
.hp-speed-list i { color: #87c722; margin-right: .5rem; }
.hp-speed-img { max-width: min(100%, 420px); height: auto; }

/* TRUSTED */
.hp-trusted { padding: 3.5rem 0; background: #f7fafc; text-align: center; }
.hp-map { max-width: min(100%, 480px); margin-top: 1rem; height: auto; }

/* TESTIMONIALS */
.hp-testimonials { padding: 4rem 0 5rem; background: #fff; }
.hp-quote {
  background: #fff;
  border: 1px solid #eef2f5;
  border-radius: 14px;
  padding: 1.75rem 1.4rem;
  box-shadow: 0 18px 40px rgba(0,43,66,.08);
  height: 100%;
  margin-bottom: 1.25rem;
  text-align: center;
}
.hp-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
  border: 3px solid #87c722;
  display: block;
}
.hp-quote p { color: #4a6270; line-height: 1.6; margin-bottom: .75rem; }
.hp-stars { color: #87c722; letter-spacing: .1em; margin-bottom: .5rem; font-size: .95rem; }
.hp-quote strong { display: block; color: #002b42; font-weight: 800; }
.hp-quote span { color: #8aa0ad; font-size: .9rem; }

@media (max-width: 991.98px) {
  .hp-hero { min-height: 0; padding: 2.5rem 0 3.5rem; }
  .hp-slide-img { margin-top: 2rem; max-width: 320px; }
  .hp-domain-bar { flex-direction: column; }
}


/* Extra HostPinnacle header polish */
body.asasi-marketing-home #header .form-inline,
body.asasi-marketing-home #header form.d-xl-none {
  display: none !important;
}
body.asasi-marketing-home #header .cart-btn {
  color: #002b42 !important;
}
body.asasi-marketing-home #header .navbar-nav.ml-auto > li > a[href*="login"],
body.asasi-marketing-home #header a.btn-login,
body.asasi-marketing-home #Secondary_Navbar-Account > a {
  background: #87c722 !important;
  color: #002b42 !important;
  border-radius: 6px !important;
  padding: .45rem .9rem !important;
  font-weight: 800 !important;
}
body.asasi-marketing-home .nh-home { display: none !important; }

/* Justify all homepage text */
.hp-home {
  text-align: justify;
  text-justify: inter-word;
}
.hp-home p,
.hp-home li,
.hp-home h1,
.hp-home h2,
.hp-home h3,
.hp-home h4,
.hp-home .hp-text,
.hp-home .hp-lead,
.hp-home .hp-slide-lead,
.hp-home .hp-plan-desc,
.hp-home .hp-kicker,
.hp-home .hp-section-title,
.hp-home .hp-slide-title,
.hp-home .hp-slide-sub,
.hp-home .hp-from,
.hp-home .hp-price,
.hp-home .hp-features,
.hp-home .hp-check-list,
.hp-home .hp-speed-list,
.hp-home .hp-why-card,
.hp-home .hp-quote,
.hp-home .hp-sms-copy,
.hp-home .hp-vps-item,
.hp-home .hp-tld {
  text-align: justify !important;
  text-justify: inter-word;
}


/* Live product description lists inside plan cards / hero */
.hp-features-db ul,
.hp-slide-copy ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hp-features-db {
  height: 150px;
  overflow: hidden;
  transition: height .3s ease;
}
.hp-features-db.is-open { height: auto; }
.hp-features-db li,
.hp-slide-copy ul li {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  font-size: .9rem;
  color: #334155;
  margin-top: .7rem;
  position: relative;
  padding-left: 1.35rem;
}
.hp-slide-copy ul li {
  color: #fff;
  font-size: 1rem;
  padding-left: 1.85rem;
}
.hp-features-db li::before,
.hp-slide-copy ul li::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: .15rem;
  color: #1C40F2;
  font-size: .75rem;
}
.hp-slide-copy ul li::before {
  content: "✓";
  font-family: inherit;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: rgba(135,199,34,.2);
  color: #87c722;
  font-size: .75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.35rem;
  text-align: center;
}
.hp-slide-copy .hp-btn { margin-top: 1rem; }

/* Home body readability */
.hp-home .hp-welcome p,
.hp-home .hp-section p,
.hp-home .hp-why p,
.hp-home .hp-plan p,
.hp-home .hp-testimonial p {
  color: #243b4a !important;
  line-height: 1.7;
}
.hp-home h2, .hp-home .hp-section-title {
  color: #002b42 !important;
}


/* Homepage Bulk SMS banner — white readable text */
body.hp-site .hp-sms .hp-sms-copy h2,
body.hp-site .hp-sms .hp-sms-copy h3,
body.hp-site .hp-sms .hp-sms-copy p,
body.asasi-marketing-home .hp-sms .hp-sms-copy h2,
body.asasi-marketing-home .hp-sms .hp-sms-copy h3,
body.asasi-marketing-home .hp-sms .hp-sms-copy p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
body.hp-site .hp-sms .hp-sms-price,
body.asasi-marketing-home .hp-sms .hp-sms-price {
  color: #87c722 !important;
  -webkit-text-fill-color: #87c722 !important;
  text-shadow: none;
}
body.hp-site .hp-sms .hp-btn-lime,
body.asasi-marketing-home .hp-sms .hp-btn-lime {
  color: #002b42 !important;
  -webkit-text-fill-color: #002b42 !important;
  text-shadow: none !important;
}



/* Trusted map — smaller + location dots */
.hp-trusted .hp-map-wrap {
  position: relative;
  display: inline-block;
  max-width: min(100%, 480px);
  width: 100%;
  margin: 1rem auto 0;
}
.hp-trusted .hp-map {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: 0;
}
.hp-map-dot {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: #87c722;
  border: 2px solid #fff;
  box-shadow: 0 0 0 0 rgba(135,199,34,.55);
  animation: hpMapPulse 2.4s ease-out infinite;
  z-index: 2;
}
.hp-map-dot:nth-child(2) { animation-delay: 0.12s; }
.hp-map-dot:nth-child(3) { animation-delay: 0.24s; }
.hp-map-dot:nth-child(4) { animation-delay: 0.36s; }
.hp-map-dot:nth-child(5) { animation-delay: 0.48s; }
.hp-map-dot:nth-child(6) { animation-delay: 0.60s; }
.hp-map-dot:nth-child(7) { animation-delay: 0.72s; }
.hp-map-dot:nth-child(8) { animation-delay: 0.84s; }
.hp-map-dot:nth-child(9) { animation-delay: 0.96s; }
.hp-map-dot:nth-child(10) { animation-delay: 1.08s; }
.hp-map-dot:nth-child(11) { animation-delay: 1.20s; }
.hp-map-dot:nth-child(12) { animation-delay: 1.32s; }
.hp-map-dot:nth-child(13) { animation-delay: 1.44s; }
.hp-map-dot:nth-child(14) { animation-delay: 1.56s; }
.hp-map-dot:nth-child(15) { animation-delay: 1.68s; }
.hp-map-dot:nth-child(16) { animation-delay: 1.80s; }
.hp-map-dot:nth-child(17) { animation-delay: 1.92s; }
.hp-map-dot:nth-child(18) { animation-delay: 2.04s; }
.hp-map-dot:nth-child(19) { animation-delay: 2.16s; }
.hp-map-dot:nth-child(20) { animation-delay: 2.28s; }
.hp-map-dot:nth-child(21) { animation-delay: 2.40s; }
.hp-map-dot:nth-child(22) { animation-delay: 2.52s; }
.hp-map-dot:nth-child(23) { animation-delay: 2.64s; }
.hp-map-dot:nth-child(24) { animation-delay: 2.76s; }
@keyframes hpMapPulse {
  0% { box-shadow: 0 0 0 0 rgba(135,199,34,.55); }
  70% { box-shadow: 0 0 0 12px rgba(135,199,34,0); }
  100% { box-shadow: 0 0 0 0 rgba(135,199,34,0); }
}
@media (max-width: 575.98px) {
  .hp-trusted .hp-map-wrap { max-width: 320px; }
  .hp-map-dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
}
