/*
 * SkyVault Host — NEON GLASSMORPHISM
 * Full override, beats all source CSS
 */

/* ── FONTS ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ── TOKENS ────────────────────────────────── */
:root {
  --nc:   #00f5ff;
  --np:   #b344ff;
  --nk:   #ff2d78;
  --nb:   #4d9fff;
  --void: #060610;
  --deep: #0a0a1a;
  --surf: #0f0f25;
  --rais: #13132e;
  --gb:   rgba(255,255,255,0.045);
  --gbo:  rgba(255,255,255,0.08);
  --gbl:  rgba(255,255,255,0.11);
  --tm:   rgba(255,255,255,0.85);
  --td:   rgba(255,255,255,0.50);
  --tf:   rgba(255,255,255,0.28);
  --gC:   0 0 22px rgba(0,245,255,.38),0 0 60px rgba(0,245,255,.12);
  --gP:   0 0 22px rgba(179,68,255,.42),0 0 60px rgba(179,68,255,.14);
  --fd:   'Oxanium',sans-serif;
  --fb:   'DM Sans',sans-serif;
}

/* ── RESET BASE ────────────────────────────── */
*,*::before,*::after{box-sizing:border-box!important}

html body {
  background: var(--void) !important;
  color: var(--tm) !important;
  font-family: var(--fb) !important;
  overflow-x: hidden !important;
}

/* Cosmic grid */
html body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(0,245,255,0.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,245,255,0.025) 1px,transparent 1px) !important;
  background-size: 52px 52px !important;
}

/* Ambient glow orbs */
html body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 65% 55% at 8% 18%, rgba(0,245,255,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 55% 65% at 92% 82%, rgba(179,68,255,0.08) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 50% 50%, rgba(255,45,120,0.04) 0%, transparent 60%) !important;
}

/* Make everything sit above body pseudo-elements */
body > * { position: relative; z-index: 1 !important; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--fd) !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}
p { color: var(--td) !important; font-family: var(--fb) !important; }
a { color: var(--nc) !important; text-decoration: none !important; }
a:hover { color: var(--np) !important; }

/* ── LOADER ────────────────────────────────── */
.loader-wrapper { background: var(--void) !important; z-index: 999999 !important; }
.loder-section  { background: var(--void) !important; }
.loader {
  border: 3px solid rgba(0,245,255,0.12) !important;
  border-top-color: var(--nc) !important;
  border-right-color: var(--np) !important;
  box-shadow: var(--gC) !important;
}

/* ── NAVBAR ────────────────────────────────── */
#sticky-header,
.hosting_nav_manu {
  background: rgba(6,6,16,0.80) !important;
  backdrop-filter: blur(22px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
  border-bottom: 1px solid rgba(0,245,255,0.10) !important;
  box-shadow: 0 2px 30px rgba(0,0,0,0.55) !important;
  z-index: 9999 !important;
}
.hosting_nav_manu::after {
  content:"" !important;
  position:absolute !important;
  bottom:0;left:0;right:0 !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,var(--nc) 35%,var(--np) 70%,transparent) !important;
  opacity:0.35 !important;
  pointer-events:none !important;
}

.logo a img { filter: drop-shadow(0 0 8px rgba(0,245,255,0.5)) !important; }
.logo a:hover img { filter: drop-shadow(0 0 16px rgba(0,245,255,0.9)) !important; }

.hosting_menu ul > li > a {
  font-family: var(--fd) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--tm) !important;
  border-radius: 8px !important;
  transition: all .22s ease !important;
}
.hosting_menu ul > li > a:hover,
.hosting_menu ul > li.active > a {
  color: var(--nc) !important;
  background: rgba(0,245,255,0.06) !important;
  text-shadow: 0 0 10px rgba(0,245,255,0.65) !important;
}

/* Dropdown */
.hosting_menu .sub-menu {
  background: rgba(8,8,22,0.97) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(0,245,255,0.14) !important;
  border-top: 2px solid var(--nc) !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.75),var(--gC) !important;
}
.hosting_menu .sub-menu li a {
  color: var(--td) !important;
  font-family: var(--fb) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 10px 20px !important;
}
.hosting_menu .sub-menu li a:hover {
  color: var(--nc) !important;
  background: rgba(0,245,255,0.06) !important;
  text-shadow: 0 0 8px rgba(0,245,255,0.5) !important;
  padding-left: 26px !important;
}

/* Login/CTA btn */
.menu-btn a {
  background: transparent !important;
  border: 1.5px solid var(--nc) !important;
  color: var(--nc) !important;
  border-radius: 9px !important;
  padding: 8px 22px !important;
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 14px rgba(0,245,255,0.22),inset 0 0 14px rgba(0,245,255,0.04) !important;
  transition: all .25s ease !important;
}
.menu-btn a:hover {
  background: rgba(0,245,255,0.10) !important;
  box-shadow: 0 0 30px rgba(0,245,255,0.5) !important;
  color: var(--nc) !important;
  transform: translateY(-2px) !important;
}
.menu-btn a i { color: var(--nc) !important; }

.country-list {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(0,245,255,0.14) !important;
  border-radius: 8px !important;
}
.select_box {
  background: transparent !important;
  color: var(--td) !important;
  border: none !important;
  font-size: 12px !important;
}
.select_box option { background: var(--deep) !important; }

#sticky-header.sticky {
  background: rgba(6,6,16,0.96) !important;
  box-shadow: 0 4px 44px rgba(0,0,0,0.7) !important;
}

/* ── MOBILE MENU ───────────────────────────── */
.mobile-menu-area {
  background: transparent !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999999 !important;
}
.Hosting_menu ul li a, .mobile-menu nav.Hosting_menu ul li a {
  color: var(--td) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  font-family: var(--fd) !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}
.mean-bar { background: rgba(6,6,16,0.97) !important; border-bottom-color: rgba(0,245,255,0.08) !important; }
.meanmenu-reveal { color: var(--nc) !important; border-color: rgba(0,245,255,0.25) !important; }
.meanmenu-reveal span { background: var(--nc) !important; }

/* ── HERO SECTION ──────────────────────────── */
.breadcumb_two,
.breadcumb_two.style_three {
  background:
    radial-gradient(ellipse 80% 60% at 15% 30%, rgba(0,245,255,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 65% 80% at 85% 70%, rgba(179,68,255,0.11) 0%, transparent 60%),
    linear-gradient(140deg, #06061c 0%, #0c0530 55%, #060618 100%) !important;
  background-image: none !important;
  /* FIX: remove the insane 955px height, use padding instead */
  height: auto !important;
  min-height: 520px !important;
  margin-top: 0 !important;
  padding: 90px 0 70px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(0,245,255,0.07) !important;
}
.breadcumb_two::before {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background-image:
    linear-gradient(rgba(0,245,255,0.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,245,255,0.035) 1px,transparent 1px) !important;
  background-size: 44px 44px !important;
}
.breadcumb_two::after {
  content:"" !important;
  position:absolute !important;
  width:500px;height:500px !important;
  right:-80px;top:-80px !important;
  border-radius:50% !important;
  border:1px solid rgba(179,68,255,0.16) !important;
  background:radial-gradient(circle,rgba(179,68,255,0.08) 0%,transparent 65%) !important;
  pointer-events:none !important;
  animation:hero-orb 8s ease-in-out infinite alternate !important;
}
@keyframes hero-orb {
  0%   { transform:scale(1) translate(0,0);   opacity:.65; }
  100% { transform:scale(1.12) translate(-25px,25px); opacity:1; }
}

.breadcumb_content h1 {
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  font-size: 42px !important;
  color: #fff !important;
  text-shadow: 0 0 40px rgba(0,245,255,0.2) !important;
  line-height: 1.2 !important;
}
.breadcumb_content p {
  color: var(--td) !important;
  font-size: 15px !important;
  font-family: var(--fb) !important;
}
.breadcumb_content p span {
  color: var(--nc) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 12px rgba(0,245,255,0.65) !important;
}
.breadcumb-list li {
  color: rgba(255,255,255,0.60) !important;
  font-size: 14px !important;
}
.breadcumb-list li img { filter: drop-shadow(0 0 4px rgba(0,245,255,0.5)) !important; }
.bradcumb-thumb img { filter: drop-shadow(0 10px 40px rgba(0,245,255,0.15)) !important; }

/* Hero CTA button */
.breadcumb_two .hosting-button a,
.hosting-button a {
  background: linear-gradient(130deg, var(--nc) 0%, var(--np) 100%) !important;
  background-image: linear-gradient(130deg, var(--nc) 0%, var(--np) 100%) !important;
  color: #060610 !important;
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  border-radius: 12px !important;
  border: none !important;
  padding: 14px 34px !important;
  box-shadow: 0 0 28px rgba(0,245,255,0.38), 0 8px 28px rgba(0,0,0,0.5) !important;
  transition: all .28s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.hosting-button a:hover {
  box-shadow: 0 0 50px rgba(0,245,255,0.6), 0 12px 40px rgba(0,0,0,0.6) !important;
  transform: translateY(-3px) scale(1.03) !important;
  color: #060610 !important;
}

/* ── SECTION TITLES ─────────────────────────── */
.section-title h1,
.section-title h2,
.section-title.text-center h1 {
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 0 30px rgba(0,245,255,0.12) !important;
}
.section-title p { color: var(--td) !important; }

/* ── FEATURE BADGES (4-grid) ────────────────── */
.feature-area.style_seven {
  background: rgba(8,8,20,0.85) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(0,245,255,0.05) !important;
}
.feature-single-box.style_seven {
  background: var(--gb) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  transition: all .28s ease !important;
}
.feature-single-box.style_seven:hover {
  background: var(--gbo) !important;
  border-color: rgba(0,245,255,0.35) !important;
  box-shadow: 0 0 30px rgba(0,245,255,0.10), 0 8px 32px rgba(0,0,0,0.5) !important;
  transform: translateY(-4px) !important;
}
.feature-single-box.style_seven .feature-content h3 {
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-size: 14px !important;
  letter-spacing:.03em !important;
}
.feature-single-box.style_seven .feature-icon img {
  filter: drop-shadow(0 0 7px rgba(0,245,255,0.45)) !important;
}

/* ── PRICING SECTION ────────────────────────── */
.pricing-area,
.pricing-area.style_sevens,
.pricing-area.style_seven,
.pricing-area.style_eight,
.pricing-area.style_3 {
  background:
    radial-gradient(ellipse 65% 45% at 0% 50%, rgba(0,245,255,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 55% 50% at 100% 50%, rgba(179,68,255,0.05) 0%, transparent 60%),
    var(--deep) !important;
  padding: 70px 0 90px !important;
}

/* Billing toggle */
.pricing-toggle span { color: var(--td) !important; font-family: var(--fd) !important; font-size:13px !important; letter-spacing:.06em !important; text-transform:uppercase !important; }
.switch .slider { background: rgba(255,255,255,0.08) !important; border:1px solid rgba(0,245,255,0.22) !important; }
.switch input:checked + .slider {
  background: rgba(0,245,255,0.12) !important;
  border-color: var(--nc) !important;
  box-shadow: 0 0 14px rgba(0,245,255,0.32) !important;
}
.switch .slider::before { background: var(--nc) !important; box-shadow: 0 0 8px rgba(0,245,255,0.7) !important; }

/* Pricing cards — GLASS */
.pricing-single-items.style_one,
.pricing-single-items.style_one.style_3,
.pricing-single-items.style_one.style_six,
.pricing-single-items.style_one.style_seven,
.pricing-single-items.style_one.style_eight,
.pricing-single-items.style_one.style_3.style_six,
.pricing-single-items.style_one.style_3.style_six.style_seven,
.pricing-single-items.style_one.style_3.style_six.style_seven.style_eight {
  background: var(--gb) !important;
  background-image: none !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(26px) !important;
  -webkit-backdrop-filter: blur(26px) !important;
  transition: all .32s cubic-bezier(.4,0,.2,1) !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 1 !important;
  padding: 35px 32px 44px !important;
}

/* Cyan top edge glow on each card */
.pricing-single-items.style_one::before,
.pricing-single-items.style_one.style_3::before,
.pricing-single-items.style_one.style_3.style_six.style_seven.style_eight::before {
  content:"" !important;
  position:absolute !important;
  top:0;left:12%;right:12% !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(0,245,255,0.45),transparent) !important;
  display:block !important;
  width:auto !important;
  clip-path: none !important;
  border-radius: 0 !important;
  z-index:2 !important;
}

/* Kill the old hover pseudo gradient */
.pricing-single-items.style_one::after,
.pricing-single-items.style_one.style_3::after,
.pricing-single-items.style_one.style_3.style_six::after {
  display: none !important;
  content: none !important;
}

.pricing-single-items.style_one:hover,
.pricing-single-items.style_one.style_3:hover,
.pricing-single-items.style_one.style_3.style_six.style_seven.style_eight:hover {
  border-color: rgba(0,245,255,0.40) !important;
  box-shadow: 0 0 40px rgba(0,245,255,0.11),0 20px 60px rgba(0,0,0,0.55) !important;
  transform: translateY(-8px) !important;
  background: rgba(0,245,255,0.04) !important;
  background-image: none !important;
}

/* Featured/popular plan — purple glow */
.pricing-single-items.style_one.upper,
.pricing-single-items.style_one.style_3.upper,
.pricing-single-items.style_one.style_3.style_six.style_seven.style_eight.upper {
  background: rgba(179,68,255,0.09) !important;
  background-image: none !important;
  border-color: rgba(179,68,255,0.42) !important;
  box-shadow: 0 0 50px rgba(179,68,255,0.16),0 20px 60px rgba(0,0,0,0.55) !important;
}
.pricing-single-items.upper::before,
.pricing-single-items.style_one.style_3.style_six.style_seven.style_eight.upper::before {
  background: linear-gradient(90deg,transparent,rgba(179,68,255,0.65),transparent) !important;
}
.pricing-single-items.upper:hover {
  border-color: rgba(179,68,255,0.65) !important;
  box-shadow: 0 0 70px rgba(179,68,255,0.28),0 24px 70px rgba(0,0,0,0.6) !important;
  background: rgba(179,68,255,0.12) !important;
}

/* Plan name */
h3.pricing-plan2,
.pricing-single-items h3.pricing-plan2 {
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #fff !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}
span.pricing-from {
  color: var(--tf) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-family: var(--fb) !important;
}

/* Price number */
.pricing-plan h2,
.pricing-plan .price,
h2.price,
h2.price-monthly,
h2.price-yearly {
  font-family: var(--fd) !important;
  font-weight: 900 !important;
  font-size: 46px !important;
  color: #fff !important;
  line-height: 1.1 !important;
}
.price .price_style,
.price_style {
  font-size: 22px !important;
  color: var(--nc) !important;
  text-shadow: 0 0 14px rgba(0,245,255,0.75) !important;
  vertical-align: top !important;
  margin-top: 8px !important;
  display: inline-block !important;
}
.pricing-single-items.upper .price_style {
  color: var(--np) !important;
  text-shadow: 0 0 14px rgba(179,68,255,0.8) !important;
}
.price span,
h2.price span {
  font-size: 14px !important;
  color: var(--td) !important;
  font-weight: 400 !important;
  font-family: var(--fb) !important;
}

/* Feature list */
.pricing-feature ul li,
.pricing-single-items.style_one.style_3 .pricing-feature ul li,
.pricing-single-items.style_one.style_six .pricing-feature ul li {
  color: rgba(255,255,255,0.60) !important;
  font-family: var(--fb) !important;
  font-size: 13px !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.pricing-feature ul li img { filter: drop-shadow(0 0 4px rgba(0,245,255,0.4)) !important; }
.pricing-feature ul li i { color: var(--nc) !important; }

p.pricing-text,
.pricing-single-items p.pricing-text {
  color: var(--td) !important;
  font-size: 13px !important;
  font-family: var(--fb) !important;
}
.paginatin p { color: var(--td) !important; font-family: var(--fb) !important; }
.paginatin .pagination_btn {
  background: transparent !important;
  border: 1px solid rgba(0,245,255,0.35) !important;
  color: var(--nc) !important;
  border-radius: 8px !important;
  padding: 6px 18px !important;
  font-family: var(--fd) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

/* Pricing CTA buttons */
.pricing-btn a,
.pricing-single-items.style_one.style_3 .pricing-btn a,
.pricing-single-items.style_one.style_six .pricing-btn a {
  display: block !important;
  text-align: center !important;
  padding: 12px 24px !important;
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid rgba(0,245,255,0.42) !important;
  color: var(--nc) !important;
  border-radius: 12px !important;
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 14px rgba(0,245,255,0.12),inset 0 0 14px rgba(0,245,255,0.04) !important;
  transition: all .24s ease !important;
}
.pricing-btn a::after { display:none !important; }
.pricing-btn a:hover,
.pricing-single-items.style_one.style_3:hover .pricing-btn a,
.pricing-single-items.style_one.style_six:hover .pricing-btn a {
  background: rgba(0,245,255,0.09) !important;
  background-image: none !important;
  box-shadow: 0 0 30px rgba(0,245,255,0.34) !important;
  color: var(--nc) !important;
  border-color: rgba(0,245,255,0.65) !important;
}
.pricing-single-items.upper .pricing-btn a {
  border-color: rgba(179,68,255,0.55) !important;
  color: var(--np) !important;
  box-shadow: 0 0 14px rgba(179,68,255,0.18) !important;
}
.pricing-single-items.upper .pricing-btn a:hover,
.pricing-single-items.upper:hover .pricing-btn a {
  background: rgba(179,68,255,0.10) !important;
  box-shadow: 0 0 32px rgba(179,68,255,0.38) !important;
  color: var(--np) !important;
}

/* ── CALL TO ACTION ─────────────────────────── */
.call-do-action {
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%,rgba(179,68,255,0.07) 0%,transparent 70%),
    linear-gradient(180deg,var(--surf) 0%,var(--rais) 100%) !important;
  border-top: 1px solid rgba(179,68,255,0.10) !important;
  border-bottom: 1px solid rgba(179,68,255,0.10) !important;
  position: relative !important;
  overflow: hidden !important;
}
.call-do-action::before {
  content:"" !important;
  position:absolute !important;
  width:500px;height:500px !important;
  top:50%;left:50% !important;
  transform:translate(-50%,-50%) !important;
  border-radius:50% !important;
  border:1px solid rgba(179,68,255,0.08) !important;
  pointer-events:none !important;
}
.call-do-action .section-title h1 { color: #fff !important; }

.hosting-button.style_2 a,
.hosting-button.style_3 a,
.hosting-button.style_one.style_2 a,
.hosting-button.style_one.style_3 a {
  background: transparent !important;
  background-image: none !important;
  border: 1.5px solid rgba(179,68,255,0.52) !important;
  color: var(--np) !important;
  box-shadow: 0 0 18px rgba(179,68,255,0.18),inset 0 0 18px rgba(179,68,255,0.04) !important;
  border-radius: 12px !important;
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 14px 34px !important;
}
.hosting-button.style_2 a:hover,
.hosting-button.style_3 a:hover {
  background: rgba(179,68,255,0.10) !important;
  box-shadow: 0 0 38px rgba(179,68,255,0.42) !important;
  color: var(--np) !important;
}

/* ── FEATURE AREA 6-GRID ────────────────────── */
.feature-area.style_eight {
  background:
    radial-gradient(ellipse 55% 65% at 0% 100%,rgba(0,245,255,0.05) 0%,transparent 60%),
    var(--surf) !important;
}
.feature-single-box.style_eight {
  background: var(--gb) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  padding: 28px 22px !important;
  transition: all .28s ease !important;
  position: relative !important;
  overflow: hidden !important;
}
.feature-single-box.style_eight::before {
  content:"" !important;
  position:absolute !important;
  top:0;left:20%;right:20% !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(0,245,255,0.28),transparent) !important;
}
.feature-single-box.style_eight:hover {
  border-color: rgba(0,245,255,0.28) !important;
  box-shadow: 0 0 36px rgba(0,245,255,0.09),0 16px 48px rgba(0,0,0,0.55) !important;
  transform: translateY(-6px) !important;
  background: rgba(0,245,255,0.04) !important;
}
.feature-single-box.style_eight .feature-title,
h3.feature-title {
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-size: 16px !important;
  letter-spacing: .03em !important;
}
.feature-single-box.style_eight p { color: var(--td) !important; font-size: 13px !important; }
.feature-single-box.style_eight .feature-icon img {
  filter: drop-shadow(0 0 8px rgba(0,245,255,0.4)) saturate(1.2) !important;
}

/* ── CATEGORY / APPS ───────────────────────── */
.category-area.style_five {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%,rgba(255,45,120,0.05) 0%,transparent 60%),
    var(--deep) !important;
}
.category_single-item.style_four {
  background: var(--gb) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px) !important;
  transition: all .25s ease !important;
}
.category_single-item.style_four:hover {
  border-color: rgba(255,45,120,0.38) !important;
  box-shadow: 0 0 26px rgba(255,45,120,0.10),0 8px 30px rgba(0,0,0,0.5) !important;
  transform: translateY(-4px) !important;
  background: rgba(255,45,120,0.04) !important;
}
.category_single-item .category-title h3 {
  font-family: var(--fd) !important;
  font-weight: 600 !important;
  color: #fff !important;
  font-size: 13px !important;
  letter-spacing: .04em !important;
}
.category_single-item .category-icon img {
  filter: drop-shadow(0 0 6px rgba(255,45,120,0.4)) !important;
}

/* ── TESTIMONIALS ───────────────────────────── */
.testimonial-area,
.testimonial-area.style_six {
  background:
    radial-gradient(ellipse 60% 60% at 50% 100%,rgba(0,245,255,0.05) 0%,transparent 60%),
    var(--rais) !important;
}
.testimonial-single-item,
.testimonial-single-item.style_seven {
  background: var(--gb) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  padding: 28px !important;
}
.testimonial-single-item .name { font-family: var(--fd) !important; font-weight:700 !important; color:#fff !important; }
.testimonial-single-item .designation { color: var(--tf) !important; font-size:12px !important; letter-spacing:.08em !important; text-transform:uppercase !important; }
.testimonial-single-item .testimonial-content p { color: var(--td) !important; font-style:italic !important; line-height:1.8 !important; }
.testi-rating span i { color:#ffd700 !important; text-shadow:0 0 8px rgba(255,215,0,0.5) !important; }
.hosting-rating-right img { filter: drop-shadow(0 0 12px rgba(0,245,255,0.2)) !important; }

/* ── FOOTER ─────────────────────────────────── */
.footer-area {
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%,rgba(179,68,255,0.05) 0%,transparent 60%),
    linear-gradient(180deg,var(--rais) 0%,var(--void) 100%) !important;
  border-top: 1px solid rgba(179,68,255,0.09) !important;
  position: relative !important;
}
.footer-area::before {
  content:"" !important;
  position:absolute !important;
  top:0;left:0;right:0 !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,var(--np) 40%,var(--nc) 65%,transparent) !important;
  opacity:0.25 !important;
}
.footer-desc { color: var(--td) !important; font-size:13px !important; line-height:1.85 !important; }
.footer-widget-title h4 {
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #fff !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}
.footer-widget-menu ul li a {
  color: var(--td) !important;
  font-size: 13px !important;
  font-family: var(--fb) !important;
  transition: all .2s ease !important;
  padding: 3px 0 !important;
  display: block !important;
}
.footer-widget-menu ul li a:hover { color: var(--nc) !important; text-shadow: 0 0 8px rgba(0,245,255,0.5) !important; padding-left: 5px !important; }
.footer-widget-menu ul li a i { color: var(--nc) !important; margin-right: 6px !important; }
.footer-follow-title { color: var(--td) !important; font-size:11px !important; font-family:var(--fd) !important; letter-spacing:.10em !important; text-transform:uppercase !important; }

.footer-widget-social-icon ul { display:flex !important; gap:8px !important; }
.footer-widget-social-icon ul li a {
  background: var(--gb) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: var(--td) !important;
  border-radius: 9px !important;
  width:36px;height:36px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition: all .22s ease !important;
  font-size:14px !important;
}
.footer-widget-social-icon ul li a:hover {
  border-color: var(--nc) !important;
  color: var(--nc) !important;
  box-shadow: 0 0 16px rgba(0,245,255,0.28) !important;
  transform: translateY(-3px) !important;
  background: rgba(0,245,255,0.07) !important;
}

.subscribe_title { color: var(--td) !important; font-family:var(--fd) !important; font-weight:600 !important; font-size:12px !important; letter-spacing:.08em !important; text-transform:uppercase !important; }
.subscribe_form input { background: rgba(255,255,255,0.04) !important; border:1px solid rgba(0,245,255,0.16) !important; color:#fff !important; border-radius:8px 0 0 8px !important; font-family:var(--fb) !important; padding:11px 14px !important; }
.subscribe_form input::placeholder { color:var(--tf) !important; }
.subscribe_form .btn { background: linear-gradient(130deg,var(--nc),var(--np)) !important; background-image: linear-gradient(130deg,var(--nc),var(--np)) !important; color:#060610 !important; font-family:var(--fd) !important; font-weight:700 !important; font-size:11px !important; letter-spacing:.08em !important; border-radius:0 8px 8px 0 !important; border:none !important; padding:11px 18px !important; }
.payment-title { color:var(--tf) !important; font-size:10px !important; text-transform:uppercase !important; letter-spacing:.12em !important; font-family:var(--fd) !important; }
.footer-bottom-content p { color:var(--tf) !important; font-size:12px !important; text-align:center !important; }
.add-border { border-top:1px solid rgba(255,255,255,0.05) !important; padding-top:20px !important; }
.footer-logo img { filter: drop-shadow(0 0 8px rgba(0,245,255,0.3)) !important; }

/* ── SCROLL UP ───────────────────────────────── */
.prgoress_indicator {
  background: var(--surf) !important;
  border:2px solid rgba(0,245,255,0.32) !important;
  box-shadow: 0 0 18px rgba(0,245,255,0.22) !important;
}
.prgoress_indicator svg path { stroke:var(--nc) !important; }

/* ── INNER PAGE SECTIONS ────────────────────── */
.hosting_about_area,.about-area,.faq-area,
.contact-area,.contact_area,.blog-area,
.blog_area,.error-area,.login-area,
.registration-area,.service-area {
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%,rgba(0,245,255,0.04) 0%,transparent 60%),
    var(--deep) !important;
}

/* FAQ */
.faq-single-item {
  background: var(--gb) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:13px !important;
  backdrop-filter:blur(14px) !important;
  transition:all .24s ease !important;
}
.faq-single-item.active,.faq-single-item:hover {
  border-color:rgba(0,245,255,0.28) !important;
  box-shadow:0 0 24px rgba(0,245,255,0.07) !important;
}
.faq-question h5 { font-family:var(--fd) !important; font-weight:600 !important; color:#fff !important; font-size:15px !important; }
.faq-answer p { color:var(--td) !important; }

/* Contact */
.contact-form input,.contact-form textarea,.contact_form input,.contact_form textarea {
  background:var(--gb) !important;
  border:1px solid rgba(0,245,255,0.13) !important;
  color:#fff !important;
  border-radius:9px !important;
  font-family:var(--fb) !important;
}
.contact-form input:focus,.contact-form textarea:focus {
  border-color:var(--nc) !important;
  box-shadow:0 0 14px rgba(0,245,255,0.14) !important;
  outline:none !important;
}

/* Blog cards */
.blog-single-item,.blog_single_item {
  background:var(--gb) !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  border-radius:16px !important;
  backdrop-filter:blur(14px) !important;
  overflow:hidden !important;
  transition:all .25s ease !important;
}
.blog-single-item:hover { border-color:rgba(0,245,255,0.26) !important; box-shadow:0 0 30px rgba(0,245,255,0.08),0 14px 44px rgba(0,0,0,0.5) !important; transform:translateY(-5px) !important; }

/* ── SEARCH POPUP ───────────────────────────── */
.search-popup { background:rgba(6,6,16,0.97) !important; backdrop-filter:blur(26px) !important; }
.search-popup input { background:var(--gb) !important; border:1px solid rgba(0,245,255,0.22) !important; color:#fff !important; border-radius:8px !important; }
.search-popup button { background:transparent !important; color:var(--nc) !important; }
.close-search { color:var(--np) !important; }

/* ── HEADER TOP SECTION ─────────────────────── */
.header-top-section {
  background:
    linear-gradient(90deg,rgba(0,245,255,0.06) 0%,rgba(179,68,255,0.06) 100%),
    var(--rais) !important;
  border-bottom:1px solid rgba(0,245,255,0.10) !important;
}
.header-address-info p { color:var(--tm) !important; font-family:var(--fd) !important; font-weight:600 !important; }

/* ── VPS PRICE SLIDER ───────────────────────── */
.vps-price-slider { background:var(--surf) !important; }
.price-slider-wrapper {
  background:var(--gb) !important;
  border:1px solid rgba(0,245,255,0.12) !important;
  border-radius:16px !important;
  backdrop-filter:blur(18px) !important;
}

/* ── DOMAIN AREA ────────────────────────────── */
.domain-area,.domain_area {
  background:
    radial-gradient(ellipse 65% 55% at 50% 50%,rgba(0,245,255,0.06) 0%,transparent 65%),
    var(--surf) !important;
}
.domain-search-btn,button.src-icon {
  background: linear-gradient(130deg,var(--nc),var(--np)) !important;
  background-image: linear-gradient(130deg,var(--nc),var(--np)) !important;
  color:#060610 !important;
  border:none !important;
  font-family:var(--fd) !important;
  font-weight:700 !important;
  border-radius:8px !important;
}

/* ── ERROR 404 ──────────────────────────────── */
.error-area h1 { color:var(--nc) !important; text-shadow:var(--gC) !important; }

/* ── LOGIN / REGISTER ───────────────────────── */
.login-form-box,.registration-form-box {
  background:var(--gb) !important;
  border:1px solid rgba(0,245,255,0.12) !important;
  border-radius:22px !important;
  backdrop-filter:blur(26px) !important;
  box-shadow:0 0 60px rgba(0,0,0,0.6) !important;
}
.login-btn,.register-btn {
  background:linear-gradient(130deg,var(--nc),var(--np)) !important;
  border:none !important;
  border-radius:12px !important;
  color:#060610 !important;
  font-family:var(--fd) !important;
  font-weight:800 !important;
}
label { color:var(--td) !important; }
input[type="text"],input[type="email"],input[type="password"] {
  background:rgba(255,255,255,0.04) !important;
  border:1px solid rgba(0,245,255,0.14) !important;
  color:#fff !important;
  border-radius:9px !important;
}

/* ── GENERIC BUTTONS ────────────────────────── */
.btn-primary,.btn-theme,.theme-btn,.submit-btn {
  background:linear-gradient(130deg,var(--nc),var(--np)) !important;
  color:#060610 !important;
  border-radius:10px !important;
  font-family:var(--fd) !important;
  font-weight:700 !important;
  border:none !important;
}

/* ── RESPONSIVE ─────────────────────────────── */
@media (max-width:991px) {
  .breadcumb_content h1 { font-size:30px !important; }
  .breadcumb_two { min-height:400px !important; padding:70px 0 50px !important; }
}
@media (max-width:767px) {
  .breadcumb_content h1 { font-size:26px !important; }
  .breadcumb_two { min-height:360px !important; padding:60px 0 40px !important; }
  h2.price,h2.price-monthly,h2.price-yearly { font-size:36px !important; }
}

/* ═══════════════════════════════════════════
   EXTRA FIXES — All remaining white boxes
═══════════════════════════════════════════ */

/* 4 feature boxes at top (style_seven) */
.feature-single-box.style_seven,
.feature-area .feature-single-box {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.12) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(0,245,255,0.12) !important;
}
.feature-single-box.style_seven:hover {
  border-color: rgba(0,245,255,0.35) !important;
  border-bottom: 1px solid rgba(0,245,255,0.35) !important;
  box-shadow: 0 0 28px rgba(0,245,255,0.10) !important;
  background: rgba(0,245,255,0.05) !important;
}

/* About section white boxes (about-single-item) */
.about-single-item,
.about-single-item.style_one,
.about-area.style_six .about-single-item,
.about-area .about-single-item {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.12) !important;
  border-radius: 12px !important;
  border-bottom: 2px solid rgba(0,245,255,0.25) !important;
  backdrop-filter: blur(14px) !important;
}
.about-single-item:hover,
.about-area.style_six .about-single-item:hover {
  border-bottom: 2px solid var(--nc) !important;
  box-shadow: 0 0 20px rgba(0,245,255,0.10) !important;
}
.about-single-item .about-text p,
.about-area.style_six .about-single-item .about-text p {
  color: var(--td) !important;
}
.about-single-item h3.about-title,
.about-area.style_six h3.about-title {
  color: var(--nc) !important;
  text-shadow: 0 0 12px rgba(0,245,255,0.4) !important;
}

/* Images with white blob backgrounds — blend into dark */
.about_thumb img,
.bradcumb-thumb img,
.feature-single-box img,
.about-thumb img,
.hosting_about_area img {
  mix-blend-mode: luminosity !important;
  filter: brightness(0.95) saturate(1.1) !important;
}
/* Hero image — keep colors but remove white blob */
.bradcumb-thumb img {
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 10px 40px rgba(0,245,255,0.15)) brightness(1.0) !important;
}

/* Counter / stat boxes (white 95% boxes) */
.counter-single-item,
.counter_item,
.hosting-counter,
.count-box,
.single-counter,
[class*="counter"] {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.12) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px) !important;
}
.counter-number,
.count-num,
[class*="counter"] h2,
[class*="counter"] h3 {
  color: var(--nc) !important;
  text-shadow: 0 0 14px rgba(0,245,255,0.5) !important;
  font-family: var(--fd) !important;
}
[class*="counter"] p,
[class*="counter"] span {
  color: var(--td) !important;
}

/* FAQ white boxes - all accordion styles */
.accordion li,
.accordion.style1 li,
.accordion.style_two li,
.accordion.style_three li,
.faq-single-box,
.faq-item {
  background: var(--gb) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
}
.accordion li a,
.accordion.style1 li a,
.accordion.style_two li a {
  background: var(--gb) !important;
  color: var(--tm) !important;
  font-family: var(--fd) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
}
.accordion li a:hover,
.accordion li a.active {
  background: rgba(0,245,255,0.07) !important;
  color: var(--nc) !important;
}
.accordion li p,
.accordion.style1 li p {
  color: var(--td) !important;
  background: var(--gb) !important;
}
.accordion a:before,
.accordion a:after,
.accordion a.active:before,
.accordion a.active:after {
  color: var(--nc) !important;
  background: var(--nc) !important;
}

/* FAQ icons left panel */
.faq-icon-box,
.faq-left,
.faq-icon,
.hosting-faq {
  background: var(--gb) !important;
}
.faq-icon-item,
.faq-icon-single {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.12) !important;
  border-radius: 12px !important;
}

/* VPS slider white cards */
.vps-price-slider,
.price-slider-wrapper,
.vps-slider,
.vps-tab,
.tab-pane,
.tab-content {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.10) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px) !important;
}

/* VPS spec boxes (RAM/CPU icon boxes) */
.vps-single,
.vps-box,
.vps-feature-box,
.vps-spec-box {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.12) !important;
  border-radius: 12px !important;
}

/* VPS table */
.table,
table,
.table-responsive,
.vps-table {
  background: transparent !important;
}
table thead,
table thead tr,
.table thead tr {
  background: rgba(0,245,255,0.08) !important;
}
table thead th,
.table thead th {
  color: var(--nc) !important;
  border-color: rgba(0,245,255,0.15) !important;
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
}
table tbody tr,
.table tbody tr {
  background: var(--gb) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  transition: all 0.2s ease !important;
}
table tbody tr:hover,
.table tbody tr:hover {
  background: rgba(0,245,255,0.05) !important;
}
table tbody td,
.table tbody td {
  color: var(--tm) !important;
  border-color: rgba(255,255,255,0.04) !important;
  font-family: var(--fb) !important;
}
table .btn,
.table .btn,
.buy-btn {
  background: linear-gradient(130deg, var(--nc), var(--np)) !important;
  color: #060610 !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 0 12px rgba(0,245,255,0.2) !important;
}

/* VPS tab pills (VPS 1, VPS 2...) */
.tabs,
.nav-tabs,
.nav-pills {
  background: transparent !important;
  border-bottom: 1px solid rgba(0,245,255,0.10) !important;
}
.nav-tabs .nav-link,
.nav-pills .nav-link,
.tabs li a {
  background: var(--gb) !important;
  color: var(--td) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  font-family: var(--fd) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: all 0.2s ease !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover,
.nav-pills .nav-link.active,
.tabs li a.active,
.tabs li.current a {
  background: rgba(0,245,255,0.10) !important;
  color: var(--nc) !important;
  border-color: rgba(0,245,255,0.35) !important;
  box-shadow: 0 0 12px rgba(0,245,255,0.15) !important;
}

/* Range slider */
.range-slider,
input[type="range"] {
  background: rgba(0,245,255,0.10) !important;
  accent-color: var(--nc) !important;
}
input[type="range"]::-webkit-slider-thumb {
  background: var(--nc) !important;
  box-shadow: 0 0 8px rgba(0,245,255,0.6) !important;
}
input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(0,245,255,0.12) !important;
}

/* VPS purchase button */
.vps-purchase-btn, .purchase-btn, a[href*="store"],
button.btn-primary {
  background: linear-gradient(130deg, var(--nc), var(--np)) !important;
  color: #060610 !important;
  border: none !important;
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
  box-shadow: 0 0 24px rgba(0,245,255,0.30) !important;
}

/* About area images — fix white blob background */
.about-area .about_thumb,
.about-area .about_thumb img,
.hosting_about_area .about_thumb img {
  background: transparent !important;
}
.about-area .about_thumb img {
  mix-blend-mode: normal !important;
  filter: drop-shadow(0 15px 50px rgba(0,245,255,0.12)) !important;
}

/* Any remaining white inline-bg anywhere */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"] {
  background: rgba(255,255,255,0.04) !important;
}

/* Hosting page — FTP/feature cards that were white */
.hosting-single-box,
.hosting-features,
.hosting-feature-box {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.10) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px) !important;
}

/* cPanel/hosting page content boxes with white bg */
.cpanel-feature,
.hosting-content-box,
.web-development-content,
.web-dev-box {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.10) !important;
  border-radius: 14px !important;
}

/* Neon CTA button used on various pages */
a[href*="client/store"],
a.btn-neon,
.cta-btn {
  background: linear-gradient(130deg, var(--nc), var(--np)) !important;
  color: #060610 !important;
  border: none !important;
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  border-radius: 12px !important;
}

/* Fix any Bootstrap card white backgrounds */
.card {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.10) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px) !important;
}
.card-body { background: transparent !important; }
.card-title { color: #fff !important; font-family: var(--fd) !important; }
.card-text { color: var(--td) !important; }

/* Pagination */
.pagination .page-item .page-link {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.14) !important;
  color: var(--td) !important;
  font-family: var(--fd) !important;
}
.pagination .page-item.active .page-link {
  background: rgba(0,245,255,0.12) !important;
  color: var(--nc) !important;
  border-color: rgba(0,245,255,0.35) !important;
}

/* Progress bar */
.progress {
  background: rgba(255,255,255,0.07) !important;
  border-radius: 999px !important;
}
.progress-bar {
  background: linear-gradient(90deg, var(--nc), var(--np)) !important;
  box-shadow: 0 0 8px rgba(0,245,255,0.4) !important;
}

/* Breadcrumb inner page */
.breadcumb-area,
.breadcumb_area {
  background:
    radial-gradient(ellipse 80% 60% at 15% 30%, rgba(0,245,255,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 65% 80% at 85% 70%, rgba(179,68,255,0.11) 0%, transparent 60%),
    linear-gradient(140deg, #06061c 0%, #0c0530 55%, #060618 100%) !important;
  height: auto !important;
  min-height: 220px !important;
  padding: 70px 0 50px !important;
  margin-top: 0 !important;
}
.breadcumb-area h1,
.breadcumb_area h1 { color: #fff !important; font-family: var(--fd) !important; font-weight: 800 !important; }
.breadcumb-area .breadcrumb,
.breadcumb_area .breadcrumb { background: transparent !important; }
.breadcrumb-item a { color: var(--nc) !important; }
.breadcrumb-item.active { color: var(--td) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--tf) !important; }

/* General bg colors that slipped through */
.white_bg, .bg_white { background: var(--gb) !important; }
.bg_color { background: rgba(0,245,255,0.08) !important; }

/* ═══════════════════════════════════════════
   TARGETED FIXES — VPS, FAQ, About, Table
═══════════════════════════════════════════ */

/* VPS plan section background */
.vps_plan {
  background: var(--deep) !important;
  border-top: 1px solid rgba(0,245,255,0.06) !important;
}

/* VPS pricing table */
.vps-pricing-table {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0,245,255,0.12) !important;
  box-shadow: 0 0 40px rgba(0,0,0,0.5) !important;
}
.vps-pricing-table table {
  background: transparent !important;
  width: 100% !important;
}
.vps-pricing-table table thead tr th {
  background: linear-gradient(135deg, rgba(0,245,255,0.15) 0%, rgba(179,68,255,0.15) 100%) !important;
  background-image: linear-gradient(135deg, rgba(0,245,255,0.15) 0%, rgba(179,68,255,0.15) 100%) !important;
  color: var(--nc) !important;
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(0,245,255,0.20) !important;
  padding: 16px 20px !important;
  text-shadow: 0 0 10px rgba(0,245,255,0.4) !important;
}
.vps-pricing-table table tbody {
  background: transparent !important;
}
.vps-pricing-table table tbody tr {
  background: rgba(255,255,255,0.025) !important;
  transition: all 0.2s ease !important;
}
.vps-pricing-table table tbody tr:hover {
  background: rgba(0,245,255,0.05) !important;
}
.vps-pricing-table table tbody tr td {
  color: var(--tm) !important;
  border-color: rgba(255,255,255,0.04) !important;
  font-family: var(--fb) !important;
  font-weight: 500 !important;
  padding: 16px 20px !important;
}
.vps-pricing-table table tbody tr td h6 {
  color: var(--td) !important;
  font-size: 11px !important;
  font-family: var(--fb) !important;
}
.vps-pricing-table table tbody tr td a {
  display: inline-block !important;
  background: linear-gradient(130deg, var(--nc), var(--np)) !important;
  color: #060610 !important;
  font-family: var(--fd) !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 8px 20px !important;
  border-radius: 8px !important;
  border: none !important;
  box-shadow: 0 0 12px rgba(0,245,255,0.25) !important;
  transition: all 0.2s ease !important;
}
.vps-pricing-table table tbody tr td a:hover {
  box-shadow: 0 0 22px rgba(0,245,255,0.5) !important;
  transform: translateY(-2px) !important;
  color: #060610 !important;
}
span.color_style { color: var(--td) !important; font-size: 12px !important; }

/* VPS feature selector boxes */
.vps_pp_feature_item {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.12) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px) !important;
  transition: all 0.25s ease !important;
}
.vps_pp_feature_item:hover {
  background: rgba(0,245,255,0.07) !important;
  border-color: rgba(0,245,255,0.35) !important;
  box-shadow: 0 0 20px rgba(0,245,255,0.12) !important;
}
.vps_pp_feature_item_content h6 { color: var(--nc) !important; font-family: var(--fd) !important; text-shadow: 0 0 8px rgba(0,245,255,0.4) !important; }
.vps_pp_feature_item_content span { color: var(--tm) !important; font-family: var(--fd) !important; font-weight: 600 !important; }

/* VPS tab buttons */
.tab-button {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.14) !important;
  color: var(--td) !important;
  border-radius: 9px !important;
  font-family: var(--fd) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 10px 24px !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
}
.tab-button:hover, .tab-button.active {
  background: rgba(0,245,255,0.10) !important;
  color: var(--nc) !important;
  border-color: rgba(0,245,255,0.35) !important;
  box-shadow: 0 0 14px rgba(0,245,255,0.15) !important;
}

/* VPS range slider */
.tab-content input[type="range"] {
  background: rgba(0,245,255,0.12) !important;
  height: 6px !important;
  border-radius: 999px !important;
  border: none !important;
  accent-color: var(--nc) !important;
}
.tab-content input[type="range"]::-webkit-slider-thumb {
  background: var(--nc) !important;
  box-shadow: 0 0 10px rgba(0,245,255,0.7) !important;
  width: 18px !important; height: 18px !important;
  border-radius: 50% !important;
}

/* Price slider wrapper */
.price-slider-wrapper, .vps-price-slider {
  background: var(--surf) !important;
  border: 1px solid rgba(0,245,255,0.08) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(14px) !important;
}

/* About-single-item (stat boxes — 85%) */
.about-single-item {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.14) !important;
  border-bottom: 2px solid rgba(0,245,255,0.35) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(14px) !important;
  padding: 20px 24px !important;
}
.about-single-item:hover {
  border-bottom-color: var(--nc) !important;
  box-shadow: 0 0 22px rgba(0,245,255,0.10) !important;
  background: rgba(0,245,255,0.05) !important;
}
h3.about-title {
  color: var(--nc) !important;
  text-shadow: 0 0 14px rgba(0,245,255,0.5) !important;
  font-family: var(--fd) !important;
  font-weight: 900 !important;
}
.about-text p { color: var(--td) !important; font-size: 13px !important; }

/* About page images - remove white blob */
.about_thumb, .about_thumb img,
.about-area .about_thumb,
.feature_thumb {
  background: transparent !important;
}
.about_thumb img { 
  filter: drop-shadow(0 0 30px rgba(0,245,255,0.12)) !important;
  mix-blend-mode: normal !important;
}

/* Feature area (cpanel page - FTP boxes) */
.feature-area.style_five {
  background: var(--surf) !important;
}
.feature-area.style_five .feature-single-box {
  background: transparent !important;
}
.feature-inner {
  background: rgba(0,8,40,0.7) !important;
  background-image: none !important;
  border: 1px solid rgba(0,245,255,0.14) !important;
  border-top: 2px solid rgba(0,245,255,0.35) !important;
  backdrop-filter: blur(16px) !important;
  border-radius: 14px !important;
  box-shadow: 0 0 30px rgba(0,0,0,0.4) !important;
}
.feature-inner:hover {
  background: rgba(0,245,255,0.04) !important;
  background-image: none !important;
  border-top-color: var(--nc) !important;
  box-shadow: 0 0 30px rgba(0,245,255,0.12) !important;
}
.feature-inner::before, .feature-inner::after {
  background-image: linear-gradient(to bottom, rgba(0,245,255,0.35), transparent) !important;
}
.feature-inner:hover::before, .feature-inner:hover::after {
  background-image: linear-gradient(to bottom, var(--nc), transparent) !important;
}
.feature-area.style_five .feature-content h3 { color: #fff !important; font-family: var(--fd) !important; }
.feature-area.style_five .feature-content p { color: var(--td) !important; }
.feature-area.style_five .feature-single-box::before {
  background-color: rgba(0,245,255,0.06) !important;
}

/* FAQ icon boxes on the left side */
.accordion-area, .faq-area {
  background: var(--deep) !important;
}
.accordion li,
.accordion li a {
  background: var(--gb) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
}
.accordion li a {
  color: var(--tm) !important;
  font-family: var(--fd) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}
.accordion li a.active { 
  background: rgba(0,245,255,0.07) !important;
  color: var(--nc) !important;
  border-color: rgba(0,245,255,0.25) !important;
}
.accordion li p {
  color: var(--td) !important;
  background: rgba(255,255,255,0.02) !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  padding: 16px 20px !important;
}
.accordion a:before, .accordion a:after {
  background: var(--nc) !important;
}
.accordion a.active:before, .accordion a.active:after {
  background: var(--nc) !important;
}

/* FAQ icons on the left column */
.faq-icon-wrap, .faq-left-item {
  background: var(--gb) !important;
  border: 1px solid rgba(0,245,255,0.10) !important;
  border-radius: 14px !important;
  backdrop-filter: blur(12px) !important;
}
/* Icon circles in FAQ */
[class*="faq"] .icon-box, [class*="faq"] .icon-wrap,
.accordion-icon, .faq-icon-item {
  background: rgba(0,245,255,0.10) !important;
  border: 1px solid rgba(0,245,255,0.20) !important;
  border-radius: 50% !important;
}

/* Hosting page - big feature section with FTP image */
.feature-area .feature_thumb img,
.feature_thumb img {
  filter: drop-shadow(0 10px 40px rgba(0,245,255,0.15)) !important;
}


/* ══════════════════════════════════════════════════════════════
   LAYOUT & MOBILE — Complete fix
══════════════════════════════════════════════════════════════ */

/* Kill ALL negative margins and fixed heights globally */
.breadcumb_two,
.breadcumb_two.style_three,
.breadcumb_two.style_four,
.breadcumb_two.style_five,
.breadcumb_two.style_2 {
  height: auto !important;
  min-height: 480px !important;
  margin-top: 0 !important;
  padding: 100px 0 70px !important;
  display: flex !important;
  align-items: center !important;
  background-image: none !important;
}
.breadcumb_content { margin-top: 0 !important; }

.row.feature_upper2 { margin-top: 0 !important; }
.feature-area.style_seven {
  margin-top: 0 !important;
  padding: 50px 0 30px !important;
}

.pricing-area,
.pricing-area.style_sevens,
.pricing-area.style_sevens.style_eight,
.pricing-area.style_3,
.pricing-area.style_one,
.pricing-area.style_six {
  margin-top: 0 !important;
  padding: 70px 0 90px !important;
  background-image: none !important;
}

/* Feature boxes — properly visible */
.feature-single-box.style_seven {
  background: rgba(0,245,255,0.04) !important;
  border: 1px solid rgba(0,245,255,0.14) !important;
  border-bottom: 3px solid rgba(0,245,255,0.35) !important;
  border-radius: 14px !important;
  padding: 28px 22px 24px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: all .28s ease !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 130px !important;
}
.feature-single-box.style_seven:hover {
  border-color: rgba(0,245,255,0.42) !important;
  border-bottom-color: var(--nc) !important;
  box-shadow: 0 0 28px rgba(0,245,255,0.12) !important;
  transform: translateY(-5px) !important;
  background: rgba(0,245,255,0.07) !important;
}
.feature-single-box.style_seven .feature-icon img {
  filter: drop-shadow(0 0 8px rgba(0,245,255,0.5)) !important;
  max-width: 54px !important;
  height: auto !important;
}
.feature-single-box.style_seven h3 {
  font-family: var(--fd) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: #fff !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  letter-spacing: 0.03em !important;
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (768–991px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
  /* Push content below fixed mobile nav */
  body { padding-top: 64px !important; }

  .breadcumb_two,
  .breadcumb_two.style_three {
    height: auto !important;
    min-height: 0 !important;
    padding: 60px 0 50px !important;
    margin-top: 0 !important;
    display: block !important;
  }
  .breadcumb_content { margin-top: 0 !important; text-align: left !important; }
  .breadcumb_content h1 { font-size: 30px !important; line-height: 1.25 !important; }
  .breadcumb_content p { font-size: 14px !important; }
  .bradcumb-thumb { margin-top: 30px !important; text-align: center !important; }
  .bradcumb-thumb img { width: 80% !important; max-width: 400px !important; }

  .row.feature_upper2 { margin-top: 0 !important; }
  .feature-area.style_seven { padding: 40px 0 20px !important; margin-top: 0 !important; }

  .pricing-area,
  .pricing-area.style_sevens,
  .pricing-area.style_sevens.style_eight {
    margin-top: 0 !important;
    padding: 50px 0 60px !important;
  }
  .pricing-single-items.style_one.upper { margin-top: 0 !important; }

  /* Desktop nav hide on mobile */
  #sticky-header { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (max 767px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  body { padding-top: 64px !important; }

  .breadcumb_two,
  .breadcumb_two.style_three {
    height: auto !important;
    min-height: 0 !important;
    padding: 40px 0 36px !important;
    margin-top: 0 !important;
    display: block !important;
    align-items: unset !important;
  }
  .breadcumb_two::after { display: none !important; }
  .breadcumb_content {
    margin-top: 0 !important;
    text-align: center !important;
    padding: 0 16px !important;
  }
  .breadcumb_content h1 { font-size: 24px !important; line-height: 1.3 !important; }
  .breadcumb_content p { font-size: 13px !important; margin: 14px 0 !important; }
  .breadcumb_content p span { display: inline !important; }
  .breadcumb-list { display: none !important; }
  .bradcumb-thumb { display: none !important; }
  .hosting-button { text-align: center !important; }
  .hosting-button a {
    padding: 12px 28px !important;
    font-size: 12px !important;
    display: inline-flex !important;
  }

  /* Feature boxes — 2 per row on mobile */
  .row.feature_upper2 { margin-top: 0 !important; }
  .feature-area.style_seven { padding: 30px 0 16px !important; margin-top: 0 !important; }
  .feature-single-box.style_seven {
    padding: 20px 14px 18px !important;
    min-height: 110px !important;
    margin-bottom: 14px !important;
  }
  .feature-single-box.style_seven h3 { font-size: 13px !important; }
  .feature-single-box.style_seven .feature-icon img { max-width: 40px !important; }

  /* Pricing */
  .pricing-area,
  .pricing-area.style_sevens,
  .pricing-area.style_sevens.style_eight {
    margin-top: 0 !important;
    padding: 40px 0 50px !important;
  }
  .pricing-single-items.style_one,
  .pricing-single-items.style_one.style_3.style_six.style_seven.style_eight {
    padding: 24px 20px 32px !important;
    margin-bottom: 16px !important;
  }
  h2.price, h2.price-monthly, h2.price-yearly { font-size: 38px !important; }
  .pricing-single-items.style_one.upper { transform: none !important; margin-top: 0 !important; }

  /* Sections padding */
  .call-do-action { padding: 50px 0 !important; }
  .feature-area.style_eight { padding: 40px 0 !important; }
  .category-area.style_five { padding: 40px 0 !important; }
  .footer-area { padding: 50px 0 30px !important; }
  .footer-widget-item { margin-bottom: 28px !important; }

  /* Section titles */
  .section-title h1 { font-size: 24px !important; line-height: 1.3 !important; }
  .section-title p { font-size: 13px !important; }

  /* Pricing toggle */
  .pricing-toggle { margin-bottom: 28px !important; }
  .pricing-toggle span { font-size: 12px !important; }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Small mobile (max 479px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 479px) {
  body { padding-top: 64px !important; }

  .breadcumb_two,
  .breadcumb_two.style_three {
    padding: 36px 0 28px !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    display: block !important;
  }
  .breadcumb_content h1 { font-size: 20px !important; }
  .breadcumb_content { margin-top: 0 !important; }

  .pricing-area.style_sevens.style_eight {
    margin-top: 0 !important;
    padding: 36px 0 44px !important;
  }
  .row.feature_upper2 { margin-top: 0 !important; }

  /* CTA section */
  .call-do-action .section-title h1 { font-size: 20px !important; }

  /* Feature boxes — full width on tiny screens */
  .feature-single-box.style_seven { min-height: 100px !important; }

  /* Footer */
  .footer-bottom-content p { font-size: 11px !important; }
}

/* ══════════════════════════════════════════════════════════════
   MOBILE MENU — Logo + right hamburger, dark neon bar
══════════════════════════════════════════════════════════════ */

/* The meanmenu plugin wraps nav in .mean-container and prepends .mean-bar */
.mean-container .mean-bar {
  background: rgba(6,6,16,0.97) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border-bottom: 1px solid rgba(0,245,255,0.14) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.7) !important;
  min-height: 62px !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999999 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* Neon bottom line */
.mean-container .mean-bar::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0; left: 0; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg,transparent,var(--nc,#00f5ff) 40%,var(--np,#b344ff) 70%,transparent) !important;
  opacity: 0.4 !important;
  font-size: 0 !important;
  display: block !important;
}

/* Logo is injected via JS as real <a><img> — hide CSS pseudo-element */
.mean-container .mean-bar::before {
  content: none !important;
  display: none !important;
}
/* Real logo link injected by JS */
.mean-container .mean-bar .mobile-logo-link {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  display: block !important;
}
.mean-container .mean-bar .mobile-logo-link img {
  height: 36px !important;
  width: auto !important;
  max-width: 140px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 0 6px rgba(0,245,255,0.35)) !important;
}

/* Hamburger button — RIGHT side */
.mean-container a.meanmenu-reveal {
  position: absolute !important;
  right: 16px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  text-indent: -9999px !important;
  float: none !important;
  border-radius: 8px !important;
  background: rgba(0,245,255,0.08) !important;
  border: 1px solid rgba(0,245,255,0.22) !important;
  box-shadow: 0 0 12px rgba(0,245,255,0.15) !important;
  transition: all 0.2s ease !important;
  z-index: 3 !important;
}
.mean-container a.meanmenu-reveal:hover {
  background: rgba(0,245,255,0.15) !important;
  box-shadow: 0 0 20px rgba(0,245,255,0.35) !important;
}
/* The 3 hamburger lines */
.mean-container a.meanmenu-reveal span {
  display: block !important;
  background: var(--nc,#00f5ff) !important;
  height: 2px !important;
  width: 20px !important;
  border-radius: 2px !important;
  box-shadow: 0 0 6px rgba(0,245,255,0.7) !important;
  margin-top: 0 !important;
  transition: all 0.2s ease !important;
}
.mean-container a.meanmenu-reveal:hover span {
  box-shadow: 0 0 10px rgba(0,245,255,1) !important;
}
/* Hide the "×" close text */
.mean-container a.meanmenu-reveal.meanclose {
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
}

/* Nav dropdown */
.mean-container .mean-nav {
  background: rgba(6,6,18,0.99) !important;
  backdrop-filter: blur(26px) !important;
  -webkit-backdrop-filter: blur(26px) !important;
  border-top: 1px solid rgba(0,245,255,0.08) !important;
  margin-top: 62px !important;
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  max-height: calc(100vh - 62px) !important;
  overflow-y: auto !important;
  z-index: 999998 !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.9) !important;
}
.mean-container .mean-nav ul li {
  background: transparent !important;
  border-top: 1px solid rgba(0,245,255,0.05) !important;
  float: left !important;
  width: 100% !important;
  position: relative !important;
}
.mean-container .mean-nav ul li a {
  background: transparent !important;
  color: rgba(255,255,255,0.75) !important;
  font-family: 'Oxanium','DM Sans',sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  padding: 15px 20px !important;
  display: block !important;
  float: left !important;
  width: 85% !important;
  transition: all 0.18s ease !important;
  text-shadow: none !important;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--nc,#00f5ff) !important;
  background: rgba(0,245,255,0.04) !important;
  text-shadow: 0 0 8px rgba(0,245,255,0.45) !important;
  padding-left: 28px !important;
}
/* Sub-menu items */
.mean-container .mean-nav ul li li a {
  padding: 12px 20px 12px 34px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.50) !important;
  width: 80% !important;
  opacity: 1 !important;
  letter-spacing: 0.04em !important;
  border-top: 1px solid rgba(0,245,255,0.03) !important;
}
.mean-container .mean-nav ul li li a:hover {
  color: var(--nc,#00f5ff) !important;
  padding-left: 40px !important;
}
/* Expand arrow (+) */
.mean-container .mean-nav ul li a.mean-expand {
  background: transparent !important;
  border: none !important;
  color: var(--nc,#00f5ff) !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  height: auto !important;
  padding: 12px 16px !important;
  top: 4px !important;
  right: 0 !important;
  position: absolute !important;
  width: 15% !important;
  text-align: center !important;
  float: right !important;
  text-shadow: 0 0 8px rgba(0,245,255,0.5) !important;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  color: var(--nc,#00f5ff) !important;
  background: rgba(0,245,255,0.05) !important;
}

/* Mobile menu wrapper area */
.mobile-menu-area {
  background: transparent !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 999999 !important;
}


/* ══════════════════════════════════════════════════════════════
   SHARED-HOSTING — Tech Stack 2×2 Grid (cPanel/LS/Imunify/CL)
══════════════════════════════════════════════════════════════ */

/* Kill blue wrapper & negative margin completely */
.feature_upper,
.row.feature_upper {
  background: transparent !important;
  padding: 0 !important;
  margin-top: 0 !important;
  border-radius: 0 !important;
}
.feature-area.style_six,
.svh-cpanel-feature {
  background: transparent !important;
  padding: 50px 0 30px !important;
  margin-top: 0 !important;
}

/* 2×2 grid container */
.svh-tech-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  width: 100% !important;
}

/* Each glass card */
.svh-fbox {
  background: rgba(0,245,255,0.04) !important;
  border: 1px solid rgba(0,245,255,0.16) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 32px 28px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.28s ease !important;
}
/* Top neon glow line */
.svh-fbox::before {
  content: "" !important;
  position: absolute !important;
  top: 0; left: 10%; right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.5), transparent) !important;
  pointer-events: none !important;
}
.svh-fbox:hover {
  border-color: rgba(0,245,255,0.40) !important;
  background: rgba(0,245,255,0.07) !important;
  box-shadow: 0 0 36px rgba(0,245,255,0.10), 0 16px 48px rgba(0,0,0,0.5) !important;
  transform: translateY(-5px) !important;
}

/* Logo area */
.svh-ficon {
  flex-shrink: 0 !important;
  width: 72px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.svh-tech-logo {
  max-width: 72px !important;
  max-height: 50px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 0 6px rgba(0,245,255,0.3)) !important;
}
/* cPanel SVG needs invert to show on dark bg */
.svh-logo-invert {
  filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(0,245,255,0.4)) !important;
}

/* Text */
.svh-fcontent {
  flex: 1 !important;
  min-width: 0 !important;
}
.svh-fcontent h3 {
  font-family: 'Oxanium', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  color: #fff !important;
  margin: 0 0 10px !important;
  letter-spacing: 0.03em !important;
  line-height: 1.25 !important;
}
.svh-fcontent p {
  color: rgba(255,255,255,0.52) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  font-family: 'DM Sans', sans-serif !important;
}

/* Tablet: keep 2 cols but smaller */
@media (max-width: 991px) {
  .svh-tech-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
  }
  .svh-fbox { padding: 22px 18px !important; gap: 14px !important; }
  .svh-ficon { width: 56px !important; height: 44px !important; }
  .svh-tech-logo { max-width: 56px !important; max-height: 40px !important; }
  .svh-fcontent h3 { font-size: 15px !important; }
  .svh-fcontent p { font-size: 12px !important; }
}

/* Mobile: single column */
@media (max-width: 575px) {
  .svh-tech-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .svh-fbox {
    flex-direction: row !important;
    padding: 20px 16px !important;
    align-items: center !important;
  }
  .svh-ficon { width: 52px !important; height: 40px !important; flex-shrink: 0 !important; }
  .svh-tech-logo { max-width: 52px !important; max-height: 36px !important; }
  .svh-fcontent h3 { font-size: 15px !important; margin-bottom: 6px !important; }
}