/* ===============================
   PREMIUM HEADER STYLE
=================================*/

.theme-header{
  background: linear-gradient(180deg,#0c1b2e,#0a1626);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 4px 20px rgba(0,0,0,0.35);
  transition:.35s ease;
}

/* container spacing */
.theme-header .zpcontainer{
  padding:14px 40px;
}


/* ===============================
   NAV LINKS
=================================*/

.theme-navigation-and-icons a{
  color:#FFFFFF !important;
  font-size:16px;
  font-weight:500;
  margin:0 18px;
  letter-spacing:.4px;
  position:relative;
  transition:.3s ease;
}

.theme-navigation-and-icons a:hover{
  color:#50a5f5 !important;
}


/* ===============================
   PREMIUM GLOW LINE EFFECT
=================================*/

.theme-navigation-and-icons a::before{
  content:"";
  position:absolute;
  bottom:-10px;
  left:50%;
  transform:translateX(-50%) scaleX(0);
  width:60%;
  height:2px;

  background:linear-gradient(
    90deg,
    transparent,
    #c9972b,
    #e6b84a,
    #c9972b,
    transparent
  );

  opacity:0;
  transition:.35s ease;
}

.theme-navigation-and-icons a:hover::before{
  transform:translateX(-50%) scaleX(1);
  opacity:1;
}


/* ===============================
   CTA BUTTON (GET STARTED)
   background unchanged
=================================*/

.theme-navigation-and-icons a:last-child{
  padding:10px 22px;
  border-radius:30px;
  font-weight:600;
  margin-left:25px;
  transition:.3s ease;
}

.theme-navigation-and-icons a:last-child:hover{
  transform:translateY(-2px);
}


/* ===============================
   STICKY HEADER EFFECT
=================================*/

.theme-header.zp-sticky{
  background:rgba(10,22,38,0.85);
  backdrop-filter:blur(14px);
}


/* ===============================
   LOGO POLISH
=================================*/

.theme-header img{
  transition:.3s;
  filter:brightness(1.15);
}

.theme-header img:hover{
  transform:scale(1.05);
}
.world-class-box {
  position: relative;
  padding: 28px;
  border-radius: 20px;
  background-color: rgba(255,255,255,0.9);
  border: 2px solid #143688;
  box-shadow: 
    0 10px 30px rgba(20, 54, 136, 0.18);
  transition: 
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.world-class-box:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 16px 40px rgba(20, 54, 136, 0.28);
}

.feature-card {
  position: relative;
  background: #ffffff;
  border: 1.5px solid rgba(30, 58, 138, 0.35); /* visible default border */
  border-radius: 14px;
  transition: 
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

/* Hover effect */
.feature-card:hover {
  border-color: #1e3a8a;

  background: linear-gradient(
    180deg,
    rgba(30, 58, 138, 0.06),
    rgba(30, 58, 138, 0.02)
  );

  transform: translateY(-6px);

  box-shadow:
    0 0 0 1px rgba(30, 58, 138, 0.6),
    0 0 28px rgba(30, 58, 138, 0.35),
    0 20px 45px rgba(15, 23, 42, 0.35);
}
.network-bg {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 30% 40%, #184a8b, #0b2c5a 70%);
}

/* animated mesh layer */
.network-bg::before {
  content: "";
  position: absolute;

  /* oversized layer prevents edge glitches */
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;

  opacity: 0.35;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'>\
<g stroke='%239adfff' stroke-width='1'>\
<line x1='50' y1='100' x2='300' y2='40'/>\
<line x1='300' y1='40' x2='600' y2='200'/>\
<line x1='600' y1='200' x2='760' y2='80'/>\
<line x1='100' y1='500' x2='400' y2='350'/>\
<line x1='400' y1='350' x2='700' y2='520'/>\
<line x1='200' y1='250' x2='500' y2='120'/>\
<line x1='500' y1='120' x2='700' y2='300'/>\
<line x1='0' y1='300' x2='250' y2='120'/>\
<line x1='250' y1='120' x2='600' y2='60'/>\
</g>\
<g fill='%236fe3ff'>\
<circle cx='50' cy='100' r='4'/>\
<circle cx='300' cy='40' r='4'/>\
<circle cx='600' cy='200' r='4'/>\
<circle cx='760' cy='80' r='5'/>\
<circle cx='100' cy='500' r='4'/>\
<circle cx='400' cy='350' r='4'/>\
<circle cx='700' cy='520' r='5'/>\
<circle cx='200' cy='250' r='4'/>\
<circle cx='500' cy='120' r='4'/>\
<circle cx='700' cy='300' r='5'/>\
</g>\
</svg>");

  background-size: 800px 600px;
  background-repeat: repeat;

  animation: networkMove 60s linear infinite;

  z-index: 0;
  will-change: transform;
}

/* keep content above */
.network-bg > * {
  position: relative;
  z-index: 1;
}

/* smooth floating motion */
@keyframes networkMove {
  0% {
    transform: translate3d(0,0,0);
  }
  50% {
    transform: translate3d(-120px,-60px,0);
  }
  100% {
    transform: translate3d(0,0,0);
  }
}