/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.13.0.1777039920
Updated: 2026-04-24 14:12:00

*/
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #030712;
  color: #ffffff;
}

.vp-page {
  overflow: hidden;
  background:
    radial-gradient(circle at top left, rgba(85, 91, 255, .25), transparent 30%),
    radial-gradient(circle at bottom right, rgba(0, 212, 255, .16), transparent 28%),
    #030712;
}

.vp-hero {
  position: relative;
  min-height: 100vh;
  padding: 28px 7% 90px;
  background:
    linear-gradient(135deg, rgba(3,7,18,.96), rgba(9,14,36,.92)),
    radial-gradient(circle at 75% 30%, rgba(102, 92, 255, .5), transparent 35%);
}

.vp-nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}

.vp-logo {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -1px;
}

.vp-logo span {
  color: #7c83ff;
}

.vp-nav-links {
  display: flex;
  gap: 22px;
}

.vp-nav-links a {
  color: #dce4ff;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}

.vp-hero-grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: 60px;
  padding-top: 90px;
}

.vp-badge,
.vp-kicker {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(124,131,255,.14);
  border: 1px solid rgba(124,131,255,.38);
  color: #dfe4ff;
  font-weight: 800;
}

.vp-hero h1 {
  color: #ffffff !important;
  margin: 22px 0;
  font-size: clamp(48px, 7vw, 92px);
  line-height: .95;
  letter-spacing: -4px;
  text-shadow: 0 20px 60px rgba(0,0,0,.45);
}

.vp-hero p {
  color: #c9d3ff;
  font-size: 23px;
  line-height: 1.55;
  max-width: 720px;
}

.vp-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

.vp-btn {
  display: inline-block;
  padding: 15px 25px;
  border-radius: 15px;
  text-decoration: none;
  font-weight: 900;
  transition: .3s ease;
}

.vp-btn.primary {
  color: white;
  background: linear-gradient(135deg, #7c83ff, #484bff);
  box-shadow: 0 18px 40px rgba(72,75,255,.38);
}

.vp-btn.ghost {
  color: #ffffff;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.20);
}

.vp-btn:hover {
  transform: translateY(-5px) scale(1.03);
}

.vp-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

.vp-trust span {
  color: #dce4ff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
}

.vp-screen {
  position: relative;
  min-height: 430px;
  border-radius: 34px;
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 40px 100px rgba(0,0,0,.55),
    inset 0 0 50px rgba(255,255,255,.05);
  animation: floatScreen 5s ease-in-out infinite;
}

.vp-screen-top {
  display: flex;
  gap: 8px;
  padding: 8px;
}

.vp-screen-top span {
  width: 12px;
  height: 12px;
  border-radius: 99px;
  background: #7c83ff;
}

.vp-screen-content {
  height: 360px;
  border-radius: 26px;
  background:
    radial-gradient(circle at top right, rgba(0,212,255,.35), transparent 30%),
    linear-gradient(135deg, #111936, #060914);
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vp-live {
  width: fit-content;
  background: #ff315a;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  animation: blink 1.4s infinite;
}

.vp-screen h3 {
  font-size: 52px;
  margin: 22px 0 5px;
}

.vp-screen p {
  color: #c9d3ff;
}

.vp-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.vp-mini-grid div {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  padding: 16px;
  border-radius: 18px;
  font-weight: 800;
}

.vp-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(85px);
  opacity: .55;
  animation: orbMove 8s ease-in-out infinite;
}

.orb-1 {
  width: 380px;
  height: 380px;
  background: #5b5cff;
  right: 5%;
  top: 20%;
}

.orb-2 {
  width: 300px;
  height: 300px;
  background: #00d4ff;
  left: 8%;
  bottom: 10%;
  animation-delay: 2s;
}

.orb-3 {
  width: 260px;
  height: 260px;
  background: #ff3edb;
  right: 35%;
  bottom: 0;
  animation-delay: 4s;
}

.vp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 38px 7%;
  background: #070b18;
}

.vp-stats div,
.vp-feature,
.vp-device,
.vp-plan {
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}

.vp-stats div {
  padding: 28px;
  border-radius: 24px;
  text-align: center;
}

.vp-stats strong {
  display: block;
  font-size: 38px;
  color: #8b92ff;
}

.vp-stats span {
  color: #cbd5ff;
}

.vp-section,
.vp-devices,
.vp-pricing,
.vp-reseller,
.vp-final {
  padding: 95px 7%;
  text-align: center;
}

.vp-section h2,
.vp-devices h2,
.vp-pricing h2,
.vp-reseller h2,
.vp-final h2 {
  color: #ffffff;
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1;
  margin: 18px 0;
  letter-spacing: -2px;
}

.vp-subtitle,
.vp-final p {
  color: #bfc9f5;
  font-size: 20px;
  max-width: 820px;
  margin: 0 auto 45px;
}

.vp-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.vp-feature {
  padding: 40px 30px;
  border-radius: 28px;
  text-align: left;
  transition: .35s;
}

.vp-icon {
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: linear-gradient(135deg, #7c83ff, #00d4ff);
  font-size: 34px;
  margin-bottom: 24px;
}

.vp-feature h3 {
  color: #ffffff;
  font-size: 27px;
}

.vp-feature p {
  color: #cbd5ff;
}

.vp-devices {
  background:
    radial-gradient(circle at center, rgba(124,131,255,.20), transparent 35%),
    #070b18;
}

.vp-device-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin-top: 45px;
}

.vp-device {
  padding: 30px 18px;
  border-radius: 26px;
  transition: .35s;
  animation: devicePulse 3s ease-in-out infinite;
}

.vp-device b {
  display: block;
  font-size: 24px;
  color: #ffffff;
}

.vp-device span {
  display: block;
  color: #bfc9f5;
  margin-top: 8px;
  font-size: 14px;
}

.vp-pricing {
  background:
    linear-gradient(180deg, #030712, #081026);
}

.vp-plan-grid {
  display: grid;
  gap: 22px;
}

.client-plans {
  grid-template-columns: repeat(5, 1fr);
}

.reseller-plans {
  grid-template-columns: repeat(3, 1fr);
}

.vp-plan {
  position: relative;
  padding: 38px 26px;
  border-radius: 30px;
  transition: .35s;
  overflow: hidden;
}

.vp-plan::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(124,131,255,.22), transparent 40%);
  opacity: 0;
  transition: .35s;
}

.vp-plan:hover::before {
  opacity: 1;
}

.vp-plan:hover,
.vp-feature:hover,
.vp-device:hover {
  transform: translateY(-12px);
  border-color: rgba(124,131,255,.7);
  box-shadow: 0 35px 75px rgba(0,0,0,.35);
}

.vp-plan.popular {
  border: 2px solid #8b92ff;
  box-shadow: 0 30px 80px rgba(91,92,255,.28);
}

.vp-plan.gold {
  border: 2px solid #f5c76b;
  box-shadow: 0 30px 80px rgba(245,199,107,.18);
}

.vp-plan h3,
.vp-plan p,
.vp-plan ul,
.vp-plan a,
.vp-plan small {
  position: relative;
  z-index: 2;
}

.vp-plan h3 {
  color: #ffffff;
  font-size: 27px;
  margin-top: 10px;
}

.vp-price {
  font-size: 42px;
  font-weight: 950;
  color: #9aa1ff;
  margin: 20px 0 0;
}

.vp-plan small {
  color: #bfc9f5;
}

.vp-plan ul {
  list-style: none;
  padding: 0;
  margin: 28px 0;
}

.vp-plan li {
  color: #d7defe;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.vp-label {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 16px;
  padding: 8px 13px;
  border-radius: 999px;
  background: #7c83ff;
  color: #ffffff;
  font-size: 12px;
  font-weight: 900;
}

.green {
  background: #00c982;
}

.gold-label {
  background: linear-gradient(135deg, #f5c76b, #c9962e);
}

.vp-reseller {
  background:
    radial-gradient(circle at top left, rgba(245,199,107,.12), transparent 30%),
    #050816;
}

.vp-final {
  background:
    linear-gradient(135deg, rgba(124,131,255,.25), rgba(0,212,255,.08)),
    #070b18;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(35px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatScreen {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-18px) rotate(1deg);
  }
}

@keyframes orbMove {
  0%, 100% {
    transform: translate(0,0);
  }
  50% {
    transform: translate(28px,-32px);
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .45;
  }
}

@keyframes devicePulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(124,131,255,0);
  }
  50% {
    box-shadow: 0 0 35px rgba(124,131,255,.18);
  }
}

@media (max-width: 1200px) {
  .client-plans {
    grid-template-columns: repeat(2, 1fr);
  }

  .vp-device-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .vp-hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .vp-nav {
    flex-direction: column;
    gap: 18px;
  }

  .vp-nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .vp-hero {
    padding: 22px 5% 70px;
  }

  .vp-hero-grid {
    padding-top: 55px;
  }

  .vp-hero-text {
    text-align: center;
  }

  .vp-hero h1 {
    letter-spacing: -2px;
  }

  .vp-buttons,
  .vp-trust {
    justify-content: center;
  }

  .vp-stats,
  .vp-feature-grid,
  .client-plans,
  .reseller-plans,
  .vp-device-list {
    grid-template-columns: 1fr;
  }

  .vp-screen {
    min-height: 340px;
  }

  .vp-screen-content {
    height: 280px;
  }

  .vp-screen h3 {
    font-size: 38px;
  }
}